index.vue 18 KB

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