You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

user.vue 17KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828
  1. <template>
  2. <navBar title="我的" :scrollTop="scrollTop" :isBack="isBack" navbgClass="nav-bgXin" fontColor='#fff'></navBar>
  3. <filter>
  4. <view class="wrapper">
  5. <image :src="`${$imgUrl}myImage/headbg.png`" class="bg-head" mode="widthFix"></image>
  6. <view class="content" :style="{ top: margin + 'px' }">
  7. <view class="head" :style="{ marinTop: margin + 'px' }">
  8. <view class="avatar">
  9. <image :src="`${$imgUrl}myImage/touxiang.png`" :class="!state.data.opId ? 'unlogin' : ''"
  10. @click="goLogin">
  11. </image>
  12. <view v-if="!state.data.opId" class="name" @click="$util.navTo('/login/login')">
  13. <view class="nickname">登录/注册</view>
  14. </view>
  15. <view v-else class="name">
  16. <view class="nickname">{{state.accountInfoVo.userName || state.accountInfoVo.nickName}}</view>
  17. <view class="user-id">
  18. <view class="phone">{{state.accountInfoVo.mobile}}</view>
  19. <view
  20. @click="changePhone"
  21. class="btn-change">已关联</view>
  22. </view>
  23. <text v-if="!isSm" class="btn-change-two">已实名认证</text>
  24. </view>
  25. </view>
  26. <view class="r-setting" @click="$util.navTo('/subpackage/personal-center/setting/setting', true)">
  27. <image :src="`${$imgUrl}myImage/shezhi.png`" class="img" mode="widthFix"></image>
  28. </view>
  29. </view>
  30. <view class="my-equity" :style="{'--bgimg':`url(${$imgUrl}myImage/quanuyikuang.png)`}"
  31. @click="myEtcAccount">
  32. <view class="l-con">
  33. <image :src="`${$imgUrl}myImage/myETC.png`" class="equity-icon" mode="widthFix"></image>
  34. <view class="txt">
  35. 我的ETC账户
  36. </view>
  37. </view>
  38. <view class="r-icon1">
  39. <image :src="`${$imgUrl}myImage/quanyixiayi.png`" class="r-img1" mode="widthFix"></image>
  40. </view>
  41. </view>
  42. <view class="my-equity userName" :style="{'--bgimg':`url(${$imgUrl}myImage/loginBg.png)`,'height': '120rpx' ,'margin-top':' -30rpx',
  43. 'z-index': -1,'padding-top': '17rpx','boxSizing':'border-box' }" v-if="state.customerObj">
  44. <view class="l-con">
  45. <image :src="`${$imgUrl}myImage/person.png`" class="equity-icon" mode="widthFix"></image>
  46. <view class="txt">
  47. {{state.customerObj.userName}}
  48. </view>
  49. </view>
  50. <view style="margin-right: 26rpx;">
  51. {{state.customerObj.vehicleCount?state.customerObj.vehicleCount + '辆车':'无车辆'}}
  52. </view>
  53. </view>
  54. <view class="info-content">
  55. <view class="order box">
  56. <view class="list_item"
  57. @click="$util.navTo('/subpackage/personal-center/real-name-authentication', true)">
  58. <view class="l-con">
  59. <image :src="`${$imgUrl}myImage/basicInformation.png`" class="equity-icon"
  60. mode="widthFix"></image>
  61. <view class="txt">
  62. 基本信息
  63. </view>
  64. </view>
  65. <view class="r-icon">
  66. <text v-if="isSm">请进行实名认证</text>
  67. <image :src="`${$imgUrl}myImage/myIcon.png`" class="r-img" mode="widthFix"></image>
  68. </view>
  69. </view>
  70. <view class="list_item"
  71. @click="$util.navTo(`/subpackage/after-sale/activation-once-again/select-car?type=38`, true)">
  72. <view class="l-con">
  73. <image :src="`${$imgUrl}myImage/myCar.png`" class="equity-icon" mode="widthFix"></image>
  74. <view class="txt">
  75. 我的车辆
  76. </view>
  77. </view>
  78. <view class="r-icon">
  79. <image :src="`${$imgUrl}myImage/myIcon.png`" class="r-img" mode="widthFix"></image>
  80. </view>
  81. </view>
  82. <view class="list_item" @click="goOrder(0)">
  83. <view class="l-con">
  84. <image :src="`${$imgUrl}myImage/etcOrder.png`" class="equity-icon" mode="widthFix">
  85. </image>
  86. <view class="txt">
  87. ETC订单
  88. </view>
  89. </view>
  90. <view class="r-icon">
  91. <image :src="`${$imgUrl}myImage/myIcon.png`" class="r-img" mode="widthFix"></image>
  92. </view>
  93. </view>
  94. <view class="list_item">
  95. <view class="l-con">
  96. <image :src="`${$imgUrl}myImage/afterOrder.png`" class="equity-icon" mode="widthFix">
  97. </image>
  98. <view class="txt">
  99. 售后订单
  100. </view>
  101. </view>
  102. <view class="r-icon">
  103. <image :src="`${$imgUrl}myImage/myIcon.png`" class="r-img" mode="widthFix"></image>
  104. </view>
  105. </view>
  106. <view class="list_item" @click="goEquity()">
  107. <view class="l-con">
  108. <image :src="`${$imgUrl}myImage/quanyi.png`" class="equity-icon" mode="widthFix">
  109. </image>
  110. <view class="txt">
  111. 我的权益
  112. </view>
  113. </view>
  114. <view class="r-icon">
  115. <image :src="`${$imgUrl}myImage/myIcon.png`" class="r-img" mode="widthFix"></image>
  116. </view>
  117. </view>
  118. <view class="list_item"
  119. @click="$util.navTo(`/subpackage/orders/invoiceApply/invoice-header-list?manage=1`, true)">
  120. <view class="l-con">
  121. <image :src="`${$imgUrl}myImage/invoiceHeader.png`" class="equity-icon" mode="widthFix">
  122. </image>
  123. <view class="txt">
  124. 发票抬头
  125. </view>
  126. </view>
  127. <view class="r-icon">
  128. <image :src="`${$imgUrl}myImage/myIcon.png`" class="r-img" mode="widthFix"></image>
  129. </view>
  130. </view>
  131. <view class="list_item"
  132. @click="$util.navTo(`/subpackage/personal-center/setting/addressManager`, true)">
  133. <view class="l-con">
  134. <image :src="`${$imgUrl}myImage/addressManager.png`" class="equity-icon"
  135. mode="widthFix"></image>
  136. <view class="txt">
  137. 收货地址
  138. </view>
  139. </view>
  140. <view class="r-icon">
  141. <image :src="`${$imgUrl}myImage/myIcon.png`" class="r-img" mode="widthFix"></image>
  142. </view>
  143. </view>
  144. </view>
  145. </view>
  146. </view>
  147. </view>
  148. </filter>
  149. </template>
  150. <script lang="ts" setup>
  151. import { reactive } from "vue";
  152. import { msg, navTo } from "@/utils/utils";
  153. import { onMounted, ref } from "vue";
  154. import { getItem, StorageKeys } from "@/utils/storage";
  155. import navBar from "../../components/nav-bar/nav-bar2.vue";
  156. import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
  157. import {
  158. userInfoIndex, queryVehicleBind, vehicleUnBind, showEquityListApi, orderinfosumquery, getUserMsg
  159. } from "@/utils/network/api.js";
  160. import {
  161. request, requestNew
  162. } from "@/utils/network/request.js";
  163. import filter from '@/components/filter/filter.vue';
  164. import { source } from "@/utils/network/difference";
  165. import { vehiclePlateColor, vehiclePlateColorPai, getVehiclePlateColorPaiShow } from "@/datas/vehiclePlateColor.js";
  166. import { useUserStore } from "@/stores/user";
  167. const userStore = useUserStore();
  168. const { saveUserInfo } = userStore;
  169. const height = ref(null);
  170. const top = ref(null);
  171. const margin = ref(null);
  172. const mobile = ref(null);
  173. const scrollTop = ref(0);
  174. const isBack = ref(false);
  175. const isSm = ref(true);
  176. const state = reactive({
  177. data: {
  178. opId: "",
  179. },
  180. accountInfoVo: {
  181. nickName: '',
  182. mobile: '',
  183. userName: ''
  184. },
  185. equityNumber: 0,
  186. customerObj: {}
  187. });
  188. onMounted(() => {
  189. const res = uni.getMenuButtonBoundingClientRect();
  190. height.value = res.height + "px";
  191. top.value = res.top + "px";
  192. margin.value = res.height + res.top;
  193. });
  194. onLoad((option : any) => {
  195. state.data.opId = getItem(StorageKeys.OpenId);
  196. console.log("state.data.opId", state.data.opId)
  197. mobile.value = getItem("mobile");
  198. getAuthInfo();
  199. });
  200. const carDetails = (vehicleId) => {
  201. uni.navigateTo({
  202. url: `/subpackage/personal-center/vehicle-change/car-details?vehicleId=${vehicleId}`
  203. })
  204. }
  205. const myEtcAccount = () => {
  206. navTo(`/subpackage/personal-center/my-etc-account`)
  207. }
  208. //监听页面滚动
  209. onPageScroll((e) => {
  210. scrollTop.value = e.scrollTop;
  211. });
  212. onShow((option : any) => {
  213. state.data.opId = getItem(StorageKeys.OpenId);
  214. console.log("state.data.opId", state.data.opId)
  215. if (state.data.opId) {
  216. getUserInfo();
  217. getAuthInfo();
  218. }
  219. state.customerObj = getItem('customerObj')
  220. });
  221. const getAuthInfo = () => {
  222. const options = {
  223. type: 2,
  224. data: { openId: getItem('openId') },
  225. method: "POST",
  226. showLoading: true,
  227. };
  228. requestNew(getUserMsg, options).then((res) => {
  229. const data = res;
  230. console.log(data, "用户信息"); //|| !data.userNegImgUrl || !data.userPosImgUrl
  231. if (!data.userIdNum || !data.userNegImgUrl || !data.userPosImgUrl) {
  232. isSm.value = true
  233. } else {
  234. isSm.value = false
  235. }
  236. });
  237. }
  238. const getUserInfo = () => {
  239. const options = {
  240. type: 2,
  241. data: {},
  242. method: "POST",
  243. showLoading: true,
  244. };
  245. //调用方式
  246. requestNew(userInfoIndex, options)
  247. .then((res) => {
  248. console.log('用户信息', res)
  249. let data = res
  250. saveUserInfo(data)
  251. state.accountInfoVo = data;
  252. console.log("获取用户信息", getItem('userInfo'));
  253. })
  254. .catch((err) => {
  255. console.log(err);
  256. });
  257. }
  258. const goOrder = (index) => {
  259. navTo(`../order/order?index=${index}`)
  260. }
  261. const goLogin = () => {
  262. if (!getItem('openId')) {
  263. uni.navigateTo({
  264. url: "/login/login"
  265. })
  266. }
  267. }
  268. const goEquity = () => {
  269. navTo('/subpackage/service/equityList/equityList')
  270. }
  271. const changePhone = () => {
  272. console.log(111)
  273. navTo('/subpackage/personal-center/setting/change-phone', true)
  274. }
  275. </script>
  276. <style>
  277. page {
  278. background: #eef7f7;
  279. }
  280. </style>
  281. <style scoped lang='scss'>
  282. .unlogin {
  283. filter: grayscale(100%);
  284. opacity: 0.7;
  285. }
  286. .bgVar {
  287. background-image: var(--bgimg);
  288. background-repeat: no-repeat;
  289. background-size: 100% 100%;
  290. }
  291. .wrapper {
  292. position: relative;
  293. background-color: #f6f9fc;
  294. }
  295. .bar {
  296. width: 100%;
  297. position: fixed;
  298. text-align: center;
  299. font-size: 32rpx;
  300. font-weight: bold;
  301. }
  302. .bg-head {
  303. width: 100%;
  304. position: absolute;
  305. z-index: 1;
  306. top: 0;
  307. left: 0;
  308. }
  309. .content {
  310. position: relative;
  311. display: flex;
  312. flex-direction: column;
  313. width: 100%;
  314. z-index: 2;
  315. }
  316. .head {
  317. display: flex;
  318. justify-content: space-between;
  319. align-items: center;
  320. width: 100%;
  321. box-sizing: border-box;
  322. padding: 40rpx 0 46rpx;
  323. }
  324. .head .avatar {
  325. display: flex;
  326. align-items: center;
  327. justify-content: space-between;
  328. }
  329. .head .avatar image {
  330. width: 141rpx;
  331. height: 141rpx;
  332. /* border-radius: 80rpx; */
  333. margin: 0 20rpx 0 30rpx;
  334. }
  335. .avatar .name{
  336. display: flex;
  337. flex-direction: column;
  338. }
  339. .head .setting {
  340. display: flex;
  341. align-items: center;
  342. background: rgba(0, 179, 139, .1);
  343. border: 1px solid #fff;
  344. height: 60rpx;
  345. border-radius: 30rpx;
  346. padding: 0 34rpx;
  347. color: #fff;
  348. font-size: 28rpx;
  349. margin-right: 30rpx;
  350. }
  351. .head .setting image {
  352. width: 40rpx;
  353. height: 40rpx;
  354. margin-right: 6rpx;
  355. }
  356. .head .r-setting {
  357. width: 80rpx;
  358. height: 80rpx;
  359. background: #345061;
  360. display: flex;
  361. align-items: center;
  362. justify-content: center;
  363. border-radius: 50%;
  364. margin-right: 50rpx;
  365. .img {
  366. width: 40rpx;
  367. height: 39rpx;
  368. }
  369. }
  370. .head .nickname {
  371. font-size: 36rpx;
  372. color: #fff;
  373. }
  374. .head .user-id {
  375. font-size: 26rpx;
  376. color: #fff;
  377. padding-top: 20rpx;
  378. display: flex;
  379. align-items: center;
  380. }
  381. .head .btn-change {
  382. font-size: 22rpx;
  383. padding: 0 24rpx;
  384. border: 1px solid #fff;
  385. color: #fff;
  386. box-sizing: border-box;
  387. border-radius: 20rpx;
  388. margin-left: 16rpx;
  389. background: rgba(0, 179, 139, .1);
  390. }
  391. .btn-change-two {
  392. font-size: 22rpx;
  393. width: 206rpx;
  394. height: 40rpx;
  395. padding: 0 40rpx;
  396. border: 1px solid #CCB375;
  397. color: #CCB375;
  398. box-sizing: border-box;
  399. border-radius: 20rpx;
  400. margin-top: 10rpx;
  401. background: rgba(0, 179, 139, .1);
  402. }
  403. .list_item {
  404. position: relative;
  405. z-index: 20;
  406. margin: 0 30rpx;
  407. height: 94rpx;
  408. display: flex;
  409. align-items: center;
  410. justify-content: space-between;
  411. border-bottom: 1rpx solid #DFDFDF;
  412. .l-con {
  413. display: flex;
  414. align-items: center;
  415. .equity-icon {
  416. width: 46rpx;
  417. height: 46rpx;
  418. }
  419. .txt {
  420. font-family: NotoSansHans, NotoSansHans;
  421. font-size: 28rpx;
  422. color: #01253C;
  423. margin-left: 19rpx;
  424. }
  425. }
  426. .r-icon {
  427. height: 32rpx;
  428. display: flex;
  429. align-items: center;
  430. color: rgb(177, 177, 177);
  431. font-size: 28rpx;
  432. .r-img {
  433. width: 32rpx;
  434. height: 32rpx;
  435. }
  436. }
  437. }
  438. .box>view:last-child {
  439. border: none;
  440. }
  441. .my-equity {
  442. position: relative;
  443. z-index: 20;
  444. margin: 0 auto;
  445. background-image: var(--bgimg);
  446. background-repeat: no-repeat;
  447. background-size: 100% 100%;
  448. width: 700rpx;
  449. height: 94rpx;
  450. display: flex;
  451. align-items: center;
  452. justify-content: space-between;
  453. .l-con {
  454. margin-left: 30rpx;
  455. display: flex;
  456. align-items: center;
  457. .equity-icon {
  458. width: 54rpx;
  459. height: 54rpx;
  460. }
  461. .txt {
  462. font-family: NotoSansHans, NotoSansHans;
  463. font-size: 28rpx;
  464. color: #01253C;
  465. margin-left: 19rpx;
  466. }
  467. }
  468. .r-icon {
  469. margin-right: 30rpx;
  470. width: 36rpx;
  471. height: 36rpx;
  472. .r-img {
  473. width: 36rpx;
  474. height: 36rpx;
  475. }
  476. }
  477. .r-icon1 {
  478. margin-right: 30rpx;
  479. width: 32rpx;
  480. height: 32rpx;
  481. .r-img1 {
  482. width: 32rpx;
  483. height: 32rpx;
  484. }
  485. }
  486. }
  487. .info-content {
  488. transform: translateY(-10rpx);
  489. margin-top: 30rpx;
  490. }
  491. .box .arrow {
  492. width: 10rpx;
  493. height: 18rpx;
  494. }
  495. .box {
  496. background: #ffffff;
  497. margin: 0 30rpx 30rpx;
  498. border-radius: 20rpx;
  499. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.9);
  500. }
  501. .box .more {
  502. display: flex;
  503. align-items: center;
  504. font-family: NotoSansHans, NotoSansHans;
  505. font-size: 24rpx;
  506. color: #004576;
  507. }
  508. .box .more .more-text {
  509. padding-right: 12rpx;
  510. }
  511. .box .right-head {
  512. display: flex;
  513. justify-content: space-between;
  514. }
  515. .box .right-head .tit {
  516. font-size: 32rpx;
  517. font-family: MicrosoftYaHei;
  518. }
  519. .rights .rights-items {
  520. display: flex;
  521. justify-content: space-evenly;
  522. padding: 30rpx 0;
  523. }
  524. .rights .item {
  525. display: flex;
  526. flex-direction: column;
  527. align-items: center;
  528. justify-content: center;
  529. }
  530. .rights .item .tit {
  531. font-size: 26rpx;
  532. color: #333;
  533. padding: 20rpx 0 10rpx 0;
  534. }
  535. .rights .item .sub-tit {
  536. font-size: 22rpx;
  537. color: #999;
  538. }
  539. .order .order-items {
  540. display: flex;
  541. justify-content: space-around;
  542. padding: 30rpx 0 10rpx;
  543. .rtop-badge {
  544. position: absolute;
  545. right: 0;
  546. width: 34rpx;
  547. height: 34rpx;
  548. top: 0;
  549. transform: translate(50%, -50%);
  550. line-height: 34rpx;
  551. text-align: center;
  552. font-family: SourceHanSansSC, SourceHanSansSC;
  553. font-weight: 400;
  554. font-size: 20rpx;
  555. color: #FFFFFF;
  556. }
  557. }
  558. .order .item {
  559. display: flex;
  560. flex-direction: column;
  561. align-items: center;
  562. justify-content: center;
  563. }
  564. .order .item .tit {
  565. font-size: 26rpx;
  566. color: #333;
  567. padding: 20rpx 0 10rpx 0;
  568. }
  569. .box .icon {
  570. width: 50rpx;
  571. height: 50rpx;
  572. }
  573. .go-through .pass {
  574. display: flex;
  575. flex-direction: column;
  576. }
  577. .go-through .total {
  578. display: flex;
  579. justify-content: space-between;
  580. font-size: 26rpx;
  581. color: #666;
  582. }
  583. .go-through .amount {
  584. display: flex;
  585. justify-content: space-between;
  586. align-items: center;
  587. font-family: NotoSansHans, NotoSansHans;
  588. font-size: 32rpx;
  589. color: #333333;
  590. font-weight: 400;
  591. }
  592. .go-through .line {
  593. display: flex;
  594. }
  595. .go-through .line1 {
  596. height: 14rpx;
  597. background: #005B9C;
  598. border-radius: 7rpx;
  599. }
  600. .go-through .line2 {
  601. height: 14rpx;
  602. background: #E5ECEF;
  603. border-radius: 7rpx;
  604. flex: 1;
  605. }
  606. .go-through .mileage {
  607. display: flex;
  608. justify-content: space-around;
  609. align-items: center;
  610. text-align: center;
  611. margin: 32rpx 0;
  612. .box-items {
  613. background-image: var(--bgimg);
  614. background-repeat: no-repeat;
  615. background-size: 100% 100%;
  616. padding: 20rpx 30rpx;
  617. .t-name {
  618. display: flex;
  619. .tongxing-icon {
  620. width: 29rpx;
  621. height: 29rpx;
  622. }
  623. .tit {
  624. font-size: 26rpx;
  625. color: #666666;
  626. line-height: 29rpx;
  627. margin-left: 5rpx;
  628. }
  629. }
  630. .b-info {
  631. padding-top: 20rpx;
  632. .val {
  633. font-size: 32rpx;
  634. color: #333333;
  635. }
  636. .unit {
  637. font-size: 24rpx;
  638. color: #666666;
  639. margin-left: 5rpx;
  640. }
  641. }
  642. }
  643. }
  644. .go-through .mileage .txt {
  645. display: flex;
  646. flex-direction: column;
  647. }
  648. .go-through .mileage .tit {
  649. font-size: 26rpx;
  650. color: #999;
  651. }
  652. .go-through .mileage .val {
  653. font-size: 28rpx;
  654. color: #333;
  655. margin-top: 16rpx;
  656. }
  657. .go-through .m-top {
  658. margin-top: 16rpx;
  659. }
  660. .go-through .detail {
  661. width: 100%;
  662. text-align: center;
  663. color: #00B38B;
  664. font-size: 24rpx;
  665. border-top: 1px solid #DCDCDC;
  666. padding-top: 24rpx;
  667. }
  668. .cars .car-item {
  669. display: flex;
  670. align-items: center;
  671. padding-top: 36rpx;
  672. }
  673. .cars .car-item .btn-unbind {
  674. font-weight: 400;
  675. border-radius: 30rpx;
  676. font-family: NotoSansHans, NotoSansHans;
  677. line-height: 60rpx;
  678. text-align: center;
  679. font-size: 24rpx;
  680. width: 130rpx;
  681. height: 60rpx;
  682. background: #004372;
  683. color: #fff;
  684. margin-bottom: 10rpx;
  685. }
  686. .cars .car-pic {
  687. width: 120rpx;
  688. height: 110rpx;
  689. margin-right: 20rpx;
  690. }
  691. .cars .car-info {
  692. display: flex;
  693. flex-direction: column;
  694. color: #999;
  695. font-size: 22rpx;
  696. width: 56%;
  697. }
  698. .cars .car-no {
  699. font-size: 30rpx;
  700. color: #333;
  701. }
  702. .cars .card-no {
  703. margin-top: 10rpx;
  704. font-size: 22rpx;
  705. color: #999999;
  706. }
  707. .cars .add-related {
  708. background-image: var(--bgimg);
  709. background-repeat: no-repeat;
  710. background-size: 100% 100%;
  711. height: 80rpx;
  712. display: flex;
  713. align-items: center;
  714. justify-content: center;
  715. font-family: NotoSansHans, NotoSansHans;
  716. font-weight: 400;
  717. font-size: 26rpx;
  718. color: #CCB375;
  719. margin-top: 30rpx;
  720. .add-img {
  721. margin-right: 10rpx;
  722. width: 36rpx;
  723. height: 36rpx;
  724. }
  725. }
  726. .color {
  727. padding: 4rpx 8rpx;
  728. border-radius: 10rpx;
  729. color: white;
  730. display: inline-block;
  731. margin-left: 20rpx;
  732. font-size: 24rpx;
  733. }
  734. .loading-more {
  735. text-align: center;
  736. font-size: 28rpx;
  737. margin-bottom: 20rpx;
  738. color: #999;
  739. }
  740. </style>
  741. <style>
  742. page {
  743. background-color: #f6f9fc;
  744. }
  745. </style>