index.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020
  1. <template>
  2. <view>
  3. <view class="header">
  4. <!-- 用户信息 -->
  5. <view class="userinfo">
  6. <view class="infos" @click="toData" >
  7. <view class="head-portrait" >
  8. <u-avatar :src="userId ? headImg : '../../assets/img/head.png'" size="96"></u-avatar>
  9. </view>
  10. <view class="username" v-if="personInfo&&personInfo.userType==1" >
  11. <view class="name" style="font-size: 56rpx; width: 360rpx;line-height: 100rpx;">
  12. 游客模式
  13. </view>
  14. </view>
  15. <view class="" v-if="personInfo&&personInfo.userType==1" >
  16. </view>
  17. <view class="username" v-else >
  18. <view class="name" :style="elderStatus ? 'font-size: 28px;' : ''">
  19. {{userId ? nickName : '登录 / 注册'}}
  20. </view>
  21. <view class="change" :style="elderStatus ? 'font-size: 16px;' : ''">
  22. {{userId ? '点击修改个人信息' : '登录后享受更多优惠及服务'}}
  23. </view>
  24. </view>
  25. </view>
  26. <view class="right" v-if="false">
  27. <!-- <i class="ri-notification-2-line">
  28. <text class="unread">20</text>
  29. </i> -->
  30. <i class="ri-settings-line" @click="setUp"></i>
  31. </view>
  32. </view>
  33. <!-- 卡片 -->
  34. <view v-for="(item,i) in businessVipList" :key="i" v-if="!(personInfo&&personInfo.userType==1)"
  35. @click="gotoUrl('pages/user/company-vip?id='+item.platform)"
  36. class="card" >
  37. <view class="card2">
  38. <view class="title">
  39. <text class="img">
  40. <img src="../../assets/img/riFill-building-fill@4x.png" alt="">
  41. </text>
  42. {{item.platformN}}
  43. </view>
  44. <view class="view" >
  45. 查看<text class="iconfont">&#xe600;</text>
  46. </view>
  47. </view>
  48. <view class="cardspan" v-if="item.entAccountEnabled&&item.enterpriseAccount!=null">
  49. 企业余额:{{item.enterpriseAccount.totalAmount?item.enterpriseAccount.totalAmount.toFixed(2):'0.00'}}元
  50. </view>
  51. </view>
  52. <view v-if="personInfo&&personInfo.userType==1" >
  53. </view>
  54. <!-- 立即开通 -->
  55. <view class="open" v-else-if="userId&&!userCardBool">
  56. <view class="title">
  57. <text class="img">
  58. <img src="../../assets/img/antFill-crown@3x.png" alt="">
  59. </text>充电月卡
  60. </view>
  61. <view class="open-btn" @click="gotoUrl('pages/monthlyCardActivity/monthlyCardBuy')">
  62. 立即开通
  63. <text class="iconfont">&#xe632;</text>
  64. </view>
  65. </view>
  66. <!-- 开通后 -->
  67. <view class="opened" v-if="userId&&userCardBool" @click="gotoUrl('pages/monthlyCardActivity/monthlyCardBuy')">
  68. <view class="title">
  69. <text class="img">
  70. <img src="../../assets/img/antFill-crown@3x.png" alt="">
  71. </text>充电月卡
  72. </view>
  73. <view class="date">
  74. {{userCard.endTime?userCard.endTime.slice(0,10):''}}到期
  75. <text class="iconfont">&#xe600;</text>
  76. </view>
  77. </view>
  78. <!-- 可用余额 -->
  79. <view class="balance" v-if="(personInfo&&personInfo.userType==2)" >
  80. <view class="item" @click="toBalance">
  81. <view class="num oldTextjp" oldstyle="font-size: 28px;">
  82. {{personAccount.availableAmount != null ? personAccount.availableAmount.toFixed(2) : '0.00'}}<span style="font-size: 16px;">元</span>
  83. </view>
  84. <view class="name" :style="elderStatus ? 'font-size: 16px;' : ''">
  85. 可用余额{{" "}}
  86. <span class="userData-foot-look">查看</span>
  87. </view>
  88. </view>
  89. <view class="item" @click="toMyCoupon">
  90. <view class="num oldTextjp" oldstyle="font-size: 28px;">
  91. {{personAccount.couponNum}}<span style="font-size: 16px; margin-right: 4px;">张</span>
  92. <!-- <text class="new">新券</text> -->
  93. <span style="font-size: 16px;">共</span>{{personAccount.couponAmount}}<span style="font-size: 16px;">元</span>
  94. </view>
  95. <view class="name" :style="elderStatus ? 'font-size: 16px;' : ''">
  96. 优惠券{{" "}}
  97. <span class="userData-foot-look">查看</span>
  98. </view>
  99. </view>
  100. <!-- <view class="item">
  101. <view class="num oldTextjp" oldstyle="font-size: 28px;">
  102. 0
  103. </view>
  104. <view class="name" :style="elderStatus ? 'font-size: 16px;' : ''">
  105. 积分{{" "}}
  106. <span class="userData-foot-look">查看</span>
  107. </view>
  108. </view> -->
  109. </view>
  110. </view>
  111. <view class="carImg" v-if="!personInfo||personInfo&&personInfo.userType!=2" >
  112. <img @click="toData" src="@/assets/img/gologin/img.png">
  113. </view>
  114. <!-- 优惠 -->
  115. <view class="discounts" v-else >
  116. <u-swiper bg-color="#fff" :img-mode="'scaleToFill'" height="160" :list="bannerList" @click="clickBanner"
  117. :name="'picUrl'">
  118. </u-swiper>
  119. </view>
  120. <!-- 菜单 -->
  121. <view class="menu">
  122. <view class="item" @click="chargingRecord">
  123. <view class="item-icon">
  124. <img src="@/assets/img/gologin/img3.svg">
  125. </view>
  126. <view class="item-name " oldstyle="font-size: 16px;">
  127. 充电记录
  128. </view>
  129. </view>
  130. <view class="item" @click="myAppointment">
  131. <view class="item-icon">
  132. <img src="@/assets/img/gologin/img4.svg">
  133. </view>
  134. <view class="item-name " oldstyle="font-size: 16px;">
  135. 我的预约
  136. </view>
  137. </view>
  138. <view class="item" @click="toInvoice">
  139. <view class="item-icon">
  140. <img src="@/assets/img/gologin/img1.svg">
  141. </view>
  142. <view class="item-name " oldstyle="font-size: 16px;">
  143. 我的发票
  144. </view>
  145. </view>
  146. <view class="item" @click="toRecharge">
  147. <view class="item-icon">
  148. <img src="@/assets/img/gologin/img2.svg">
  149. </view>
  150. <view class="item-name " oldstyle="font-size: 16px;">
  151. 我要充值
  152. </view>
  153. </view>
  154. </view>
  155. <!-- 菜单 -->
  156. <view class="menu" style="margin-bottom:60px ;">
  157. <view class="item" @click="gotoUrl('pages/user/contactService')">
  158. <view class="item-icon">
  159. <i class="ri-customer-service-2-line"></i>
  160. </view>
  161. <view class="item-name " oldstyle="font-size: 16px;">
  162. 联系客服
  163. </view>
  164. </view>
  165. <view class="item" @click="feedback">
  166. <view class="item-icon">
  167. <i class="ri-feedback-line"></i>
  168. </view>
  169. <view class="item-name " oldstyle="font-size: 16px;">
  170. 意见反馈
  171. </view>
  172. </view>
  173. <view class="item" @click="gotoUrl('pages/user/help')">
  174. <view class="item-icon">
  175. <i class="ri-compass-3-line"></i>
  176. </view>
  177. <view class="item-name " oldstyle="font-size: 16px;">
  178. 操作指南
  179. </view>
  180. </view>
  181. <view class="item" @click="gotoUrl('pages/user/about')">
  182. <view class="item-icon">
  183. <i class="ri-account-pin-box-line"></i>
  184. </view>
  185. <view class="item-name " oldstyle="font-size: 16px;">
  186. 关于我们
  187. </view>
  188. </view>
  189. <!-- <view class="item">
  190. <view class="item-icon">
  191. <i class="ri-tools-line"></i>
  192. </view>
  193. <view class="item-name oldTextjp" oldstyle="font-size: 16px;">
  194. 我要报修
  195. </view>
  196. </view> -->
  197. <view class="item" @click="toFreeInstallation">
  198. <view class="item-icon">
  199. <i class="ri-file-add-line"></i>
  200. </view>
  201. <view class="item-name " oldstyle="font-size: 16px;">
  202. 免费安桩
  203. </view>
  204. </view>
  205. <view class="item" @click="toJoin">
  206. <view class="item-icon">
  207. <i class="ri-service-line"></i>
  208. </view>
  209. <view class="item-name " oldstyle="font-size: 16px;">
  210. 我要加盟
  211. </view>
  212. </view>
  213. <view class="item" @click="setUp">
  214. <view class="item-icon" style="line-height: 52rpx;">
  215. <u-icon name="setting" size="24px" ></u-icon>
  216. </view>
  217. <view class="item-name " oldstyle="font-size: 16px;">
  218. 设置
  219. </view>
  220. </view>
  221. <!-- <view class="item">
  222. <view class="item-icon">
  223. <i class="ri-shield-user-line"></i>
  224. </view>
  225. <view class="item-name oldTextjp" oldstyle="font-size: 16px;">
  226. 实名认证
  227. </view>
  228. </view> -->
  229. </view>
  230. <Tabbar :current="3" ref="tabbarMain" :elderStatus="elderStatus"></Tabbar>
  231. </view>
  232. </template>
  233. <script>
  234. import * as API from '@/apis/index.js'
  235. import * as userApi from '@/apis/user.js'
  236. import * as loginApi from '@/apis/login.js'
  237. import * as WxJsApi from '@/utils/wxJsApi.js'
  238. import Tabbar from '@/components/Tabbar.vue'
  239. import * as newsApi from '@/apis/news.js'
  240. import {
  241. newDate
  242. } from '@/utils'
  243. export default {
  244. components: {
  245. Tabbar
  246. },
  247. data() {
  248. return {
  249. userCard:null,
  250. recordsTotal: 0,
  251. myCouponList: [],
  252. elderStatus: false,
  253. personAccount: {},
  254. userId: '',
  255. headImg: '',
  256. nickName: '',
  257. userPhone: '',
  258. personInfo:{},
  259. show: false,
  260. title: '联系客服',
  261. content: '400-8899-619',
  262. confirmText: '拨打电话',
  263. bannerList:[],
  264. businessVipList:[],
  265. background:{
  266. background: 'none'
  267. },
  268. }
  269. },
  270. onShow() {
  271. this.personInfo=this.carhelp.getPersonInfo()
  272. if(this.carhelp.getPersonInfo()) {
  273. this.userId = this.carhelp.getPersonInfo().id;
  274. this.getCarPersonAccount();
  275. this.getUserInfo();
  276. //this.getCouponList();
  277. }
  278. if(this.$refs.tabbarMain){
  279. this.$refs.tabbarMain.setcount(3);
  280. }
  281. if(this.carhelp.get("getElderModeClass") == "长辈模式") {
  282. this.elderStatus = true;
  283. } else {
  284. this.elderStatus = false;
  285. }
  286. },
  287. computed:{
  288. userCardBool(){
  289. if(this.userCard){
  290. var date=new Date().getTime()
  291. var reg=new RegExp('-','gi')
  292. var str=this.userCard.endTime;
  293. //console.log(str.replace(reg,'/'))
  294. var date2=newDate(str).getTime();
  295. if(date<date2){
  296. return true;
  297. }
  298. }
  299. return false
  300. }
  301. },
  302. onReady() {
  303. WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
  304. // //(res)
  305. }).catch(error => {
  306. //(error)
  307. })
  308. var consumerPhone=this.carhelp.getConfig().consumerPhone
  309. // img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"
  310. if(consumerPhone){
  311. this.content=consumerPhone
  312. }
  313. this.getBannerInfo("userinfo")
  314. },
  315. methods: {
  316. personalCenter(){
  317. API.personalCenter().then((res2) => {
  318. var entRegList=res2.data.entRegList;
  319. for(var i in this.businessVipList){
  320. var item1=this.businessVipList[i]
  321. for(var j in entRegList){
  322. var item2=entRegList[j].vipUser;
  323. if(item1.id==item2.id){
  324. item1.enterpriseAccount=entRegList[j].enterpriseAccount
  325. }
  326. }
  327. }
  328. this.$forceUpdate()
  329. }).catch(error => {
  330. uni.showToast({
  331. title: error
  332. })
  333. })
  334. },
  335. clickBanner(index){
  336. var mod= this.bannerList[index]
  337. if(mod.linkUrl.indexOf('http')==0){
  338. window.location=mod.linkUrl;
  339. }
  340. else if(mod.linkUrl.indexOf('#/')==0){
  341. if(mod.linkUrl.indexOf("?")==-1){
  342. mod.linkUrl+='?';
  343. }
  344. //window.location=mod.linkUrl;
  345. var url=mod.linkUrl.split("#")[1]
  346. //window.location = mod.clickUrl;
  347. uni.navigateTo({
  348. url: url
  349. })
  350. }
  351. else if(mod.linkUrl=='#'||mod.linkUrl==''){
  352. }
  353. else{
  354. uni.navigateTo({
  355. url:mod.linkUrl
  356. })
  357. }
  358. },
  359. getBannerInfo(code){
  360. uni.showLoading({
  361. title: "加载中",
  362. mask: true,
  363. })
  364. newsApi.getBannerInfo(code).then((res) => {
  365. uni.hideLoading();
  366. this.bannerList =res.data;
  367. // document.getElementsByClassName("uni-swiper-wrapper")[0].parentNode.style="background-color: rgb(255, 255, 255); height: 300px;"
  368. }).catch(error => {
  369. uni.showToast({
  370. title: error,icon: "none"
  371. })
  372. })
  373. },
  374. getCouponList() {
  375. uni.showLoading({
  376. title: "加载中",
  377. mask: true,
  378. })
  379. userApi.couponList({
  380. status: '0'
  381. }).then((res) => {
  382. uni.hideLoading();
  383. this.myCouponList = res.data.data;
  384. this.recordsTotal = res.data.recordsTotal;
  385. }).catch(error => {
  386. uni.showToast({
  387. title: error,
  388. icon: "none"
  389. })
  390. })
  391. },
  392. //微信扫二维码
  393. getScanCode() {
  394. if (this.userId) {
  395. WxJsApi.scanQRCode(1).then(res => {
  396. if(res) {
  397. API.scanCode(res).then((response) => {
  398. }).catch(error => {
  399. uni.showToast({
  400. title: error,
  401. icon: "none"
  402. })
  403. })
  404. }
  405. }).catch(error => {
  406. })
  407. } else {
  408. uni.navigateTo({
  409. url: '/pages/login/login'
  410. })
  411. }
  412. },
  413. toInvoice(){
  414. if (this.userId) {
  415. uni.navigateTo({
  416. url: '/pages/MyInvoice/invoiceManagement'
  417. })
  418. } else {
  419. uni.navigateTo({
  420. url: '/pages/login/login'
  421. })
  422. }
  423. },
  424. chargingRecord() {
  425. if (this.userId) {
  426. uni.navigateTo({
  427. url: '/pages/record/index'
  428. })
  429. } else {
  430. uni.navigateTo({
  431. url: '/pages/login/login'
  432. })
  433. }
  434. },
  435. toSearchPile() {
  436. uni.navigateTo({
  437. url: '/pages/searchPile/searchPile'
  438. })
  439. },
  440. getUserInfo() {
  441. uni.showLoading({
  442. title: "加载中",
  443. mask: true,
  444. })
  445. loginApi.findByOpenId({
  446. openId: this.carhelp.getOpenId()
  447. }).then((res) => {
  448. uni.hideLoading();
  449. this.businessVipList=res.data.businessVipList;
  450. if(this.businessVipList.length){
  451. var b=false;
  452. for(var i in this.businessVipList){
  453. var item=this.businessVipList[i];
  454. if(item.entAccountEnabled){
  455. b=true
  456. }
  457. }
  458. if(b){
  459. this.personalCenter()
  460. }
  461. }
  462. this.headImg = res.data.regUser.headImg;
  463. this.nickName = res.data.regUser.nickName;
  464. this.userCard=res.data.userCard;
  465. var phone = res.data.regUser.phone;
  466. if(phone){
  467. var phone1 = phone.slice(0,3);
  468. var phone2 = phone.slice(-4);
  469. this.userPhone = phone1 + '****' + phone2;
  470. }
  471. if (res.code == 200&&res.result) {
  472. var token = res ? res.data.token : '';
  473. this.personInfo=res.data.regUser
  474. this.carhelp.setPersonInfo(res.data.regUser );
  475. this.carhelp.setToken(token);
  476. this.carhelp.setPersonInfoPlus(res.data);
  477. console.log("setPersonInfoPlus")
  478. }
  479. }).catch(error => {
  480. this.carhelp.logoff()
  481. uni.showToast({
  482. title: error,
  483. icon: "none"
  484. })
  485. })
  486. },
  487. toData() {
  488. if(this.personInfo&&this.personInfo.userType==1){
  489. uni.navigateTo({
  490. url: '/pages/login/login'
  491. })
  492. }else if(this.userId) {
  493. uni.navigateTo({
  494. url: '/pages/user/dataSet'
  495. })
  496. } else {
  497. uni.navigateTo({
  498. url: '/pages/login/login'
  499. })
  500. }
  501. },
  502. toBalance() {
  503. if(this.userId) {
  504. uni.navigateTo({
  505. url: '/pages/user/finance/balance'
  506. })
  507. } else {
  508. uni.navigateTo({
  509. url: '/pages/login/login'
  510. })
  511. }
  512. },
  513. toMyCoupon() {
  514. if(this.userId) {
  515. uni.navigateTo({
  516. url: '/pages/user/coupon/myCoupon'
  517. })
  518. } else {
  519. uni.navigateTo({
  520. url: '/pages/login/login'
  521. })
  522. }
  523. },
  524. toRecharge() {
  525. if(this.userId) {
  526. if(this.personInfo.userType==1){
  527. uni.showToast({
  528. title:"游客模式只支持“先付后退”"
  529. })
  530. }else{
  531. uni.navigateTo({
  532. url: '/pages/user/finance/recharge'
  533. })
  534. }
  535. } else {
  536. uni.navigateTo({
  537. url: '/pages/login/login'
  538. })
  539. }
  540. },
  541. carManage() {
  542. if(this.userId) {
  543. } else {
  544. uni.navigateTo({
  545. url: '/pages/login/login'
  546. })
  547. }
  548. },
  549. myAppointment() {
  550. if(this.userId) {
  551. uni.navigateTo({
  552. url: '/pages/user/myReservation/myReservation'
  553. })
  554. } else {
  555. uni.navigateTo({
  556. url: '/pages/login/login'
  557. })
  558. }
  559. },
  560. toFreeInstallation() {
  561. if(this.userId) {
  562. uni.navigateTo({
  563. url: '/pages/user/freeInstallment?isback=1'
  564. })
  565. } else {
  566. uni.navigateTo({
  567. url: '/pages/login/login'
  568. })
  569. }
  570. },
  571. toJoin() {
  572. if(this.userId) {
  573. uni.navigateTo({
  574. url: '/pages/user/toJoin?isback=1'
  575. })
  576. } else {
  577. uni.navigateTo({
  578. url: '/pages/login/login'
  579. })
  580. }
  581. },
  582. feedback() {
  583. if(this.userId) {
  584. uni.navigateTo({
  585. url: '/pages/user/message'
  586. })
  587. } else {
  588. uni.navigateTo({
  589. url: '/pages/login/login'
  590. })
  591. }
  592. },
  593. setUp() {
  594. if(this.userId) {
  595. uni.navigateTo({
  596. url: '/pages/user/setting'
  597. })
  598. } else {
  599. uni.navigateTo({
  600. url: '/pages/login/login'
  601. })
  602. }
  603. },
  604. openModal() {
  605. this.show = true;
  606. },
  607. confirmPhone(){
  608. this.show = false;
  609. uni.makePhoneCall({
  610. phoneNumber:this.content //仅为示例
  611. });
  612. },
  613. getCarPersonAccount() {
  614. uni.showLoading({
  615. title: "加载中",
  616. mask: true,
  617. })
  618. userApi.carPersonAccount().then((res) => {
  619. uni.hideLoading();
  620. this.personAccount = res.data;
  621. }).catch(error => {
  622. uni.showToast({
  623. title: error,
  624. icon: "none"
  625. })
  626. })
  627. }
  628. }
  629. }
  630. </script>
  631. <style>
  632. page{
  633. background-size: 100%;
  634. }
  635. </style>
  636. <style lang="scss" scoped>
  637. .carImg{
  638. margin: 0 40rpx;
  639. img{
  640. width: 100%;
  641. }
  642. }
  643. .btnuserType1{
  644. width: 160rpx;
  645. height: 64rpx;
  646. line-height: 60rpx;
  647. border-radius: 50px;
  648. background-color: rgba(0, 185, 98, 1);
  649. color: #fff;
  650. font-size: 28rpx;
  651. text-align: center;
  652. font-family: -apple-system;
  653. margin-top: 20rpx;
  654. }
  655. .header {
  656. background: linear-gradient(#D6EEDC, #F6F8F8);
  657. .userinfo {
  658. display: flex;
  659. justify-content: space-between;
  660. padding: 40rpx 32rpx 32rpx 32rpx;
  661. .infos {
  662. display: flex;
  663. }
  664. .head-portrait {
  665. width: 48px;
  666. height: 48px;
  667. img {
  668. width: 100%;
  669. height: 100%;
  670. }
  671. }
  672. .username {
  673. margin-left: 8px;
  674. .name {
  675. color: rgba(51, 51, 51, 100);
  676. font-size: 20px;
  677. line-height: 24px;
  678. }
  679. .change {
  680. color: rgba(166, 180, 173, 100);
  681. line-height: 14px;
  682. margin-top: 8px;
  683. }
  684. }
  685. .right {
  686. font-size: 24px;
  687. .ri-notification-2-line {
  688. position: relative;
  689. .unread {
  690. width: 20px;
  691. line-height: 14px;
  692. border-radius: 24px;
  693. background-color: rgba(255, 94, 0, 100);
  694. color: rgba(255, 255, 255, 100);
  695. font-size: 9px;
  696. text-align: center;
  697. position: absolute;
  698. bottom: 14px;
  699. left: 14px;
  700. }
  701. }
  702. .ri-settings-line {
  703. margin-left: 16px;
  704. }
  705. }
  706. }
  707. // 卡片
  708. .card {
  709. background: linear-gradient(#405473, #536D96);
  710. border-radius: 8px;
  711. width: 91.4%;
  712. margin: 8rpx auto 0;
  713. padding: 24rpx 24rpx;
  714. .cardspan{
  715. margin-left: 48rpx;
  716. font-size: 24rpx;
  717. line-height:40rpx;
  718. color: rgba(255, 255, 255, 100);
  719. }
  720. .card2 {
  721. display: flex;
  722. justify-content: space-between;
  723. .title {
  724. line-height: 72rpx;
  725. color: rgba(255, 255, 255, 100);
  726. font-size: 36rpx;
  727. .img {
  728. display: inline-block;
  729. // width: 48rpx;
  730. // height: 48rpx;
  731. vertical-align: middle;
  732. margin-right: 8rpx;
  733. img {
  734. width: 40rpx;
  735. height: 40rpx;
  736. }
  737. }
  738. }
  739. .view {
  740. line-height: 72rpx;
  741. color: rgba(208, 214, 226, 100);
  742. font-size: 36rpx;
  743. }
  744. .view2 {
  745. line-height: 144rpx !important;
  746. }
  747. }
  748. }
  749. // 立即开通
  750. .openlogin {
  751. border: 1px solid rgba(187, 226, 189, 1);
  752. background: #F4FFF3 ;
  753. width: 91.4%;
  754. padding: 30rpx 24rpx 24rpx 24rpx;
  755. margin: 8rpx auto 0;
  756. margin-bottom: 10px;
  757. display: flex;
  758. justify-content: space-between;
  759. border-radius: 8px;
  760. .title {
  761. line-height: 72rpx;
  762. color: #101010;
  763. font-size: 36rpx;
  764. .img {
  765. display: inline-block;
  766. // width: 48rpx;
  767. // height: 48rpx;
  768. vertical-align: middle;
  769. margin-right: 8rpx;
  770. img {
  771. width: 40rpx;
  772. height: 40rpx;
  773. }
  774. }
  775. }
  776. .open-btn {
  777. margin: auto;
  778. padding-left: 12px;
  779. padding-right: 4px;
  780. line-height: 28px;
  781. height: 32px;
  782. // text-align: center;
  783. color: #ffffff;
  784. border-radius: 10px;
  785. background: linear-gradient(to right,#34BC58 , #00A39A );
  786. .iconfont {
  787. margin-left: 0px;
  788. }
  789. }
  790. }
  791. // 立即开通
  792. .open,.opened {
  793. background: linear-gradient(#4A4C62, #2C3145);
  794. width: 91.4%;
  795. padding: 30rpx 24rpx 24rpx 24rpx;
  796. margin: 8rpx auto 0;
  797. display: flex;
  798. justify-content: space-between;
  799. border-radius: 8px;
  800. .title {
  801. line-height: 72rpx;
  802. color: #E1C082;
  803. font-size: 36rpx;
  804. .img {
  805. display: inline-block;
  806. vertical-align: middle;
  807. margin-right: 8rpx;
  808. img {
  809. width: 40rpx;
  810. height: 40rpx;
  811. }
  812. }
  813. }
  814. .open-btn {
  815. padding-left: 28rpx;
  816. padding-right: 8rpx;
  817. line-height: 76rpx;
  818. // text-align: center;
  819. font-size: 32rpx;
  820. border-radius: 100rpx;
  821. background: linear-gradient(to right,#F0E1C6, #ECC194);
  822. .iconfont {
  823. margin-left: 0px;
  824. }
  825. }
  826. .date{
  827. color: #d1b37a;
  828. line-height: 24px;
  829. font-size: 32rpx;
  830. .iconfont{
  831. color: #867668
  832. }
  833. }
  834. }
  835. // 余额
  836. .balance {
  837. background-color: #fff;
  838. width: 91.4%;
  839. margin: 12px auto;
  840. padding: 16px ;
  841. display: flex;
  842. // justify-content: space-between;
  843. justify-content: space-around;
  844. border-radius: 8px;
  845. .item {
  846. text-align: center;
  847. .num {
  848. line-height: 28px;
  849. color: rgba(51, 51, 51, 100);
  850. font-size: 24px;
  851. position: relative;
  852. .new {
  853. width: 40px;
  854. line-height: 20px;
  855. border-radius: 24px 24px 24px 0px;
  856. background-color: rgba(255, 94, 0, 100);
  857. color: rgba(255, 255, 255, 100);
  858. font-size: 12px;
  859. text-align: center;
  860. position: absolute;
  861. bottom: 20px;
  862. left: 36px;
  863. }
  864. }
  865. .name {
  866. height: 16px;
  867. color: rgba(134, 134, 134, 100);
  868. font-size: 14px;
  869. margin-top: 4px;
  870. .userData-foot-look {
  871. color: #00B962;
  872. }
  873. }
  874. }
  875. }
  876. }
  877. // 优惠
  878. .discounts {
  879. width: 91.4%;
  880. height: 80px;
  881. margin: 0 auto;
  882. border-radius: 8px;
  883. overflow: hidden;
  884. img {
  885. width: 100%;
  886. height: 80px;
  887. }
  888. }
  889. // 菜单
  890. .menu {
  891. background-color: #fff;
  892. width: 91.4%;
  893. margin: 24px auto 0;
  894. padding: 0 24rpx 18rpx 24rpx;
  895. border-radius: 8px;
  896. display: flex;
  897. flex-wrap: wrap;
  898. .item {
  899. width: 25%;
  900. margin-top: 40rpx;
  901. margin-bottom: 22rpx;
  902. display: flex;
  903. flex-direction: column;
  904. align-items: center;
  905. color: rgba(119, 119, 119, 100);
  906. i {
  907. font-size: 24px
  908. }
  909. .item-name {
  910. font-size: 14px;
  911. margin-top: 8px;
  912. }
  913. }
  914. }
  915. </style>