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.

1 anno fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
2 anni fa
2 anni fa
2 anni fa
2 anni fa
2 anni fa
2 anni fa
2 anni fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
1 anno fa
2 anni fa
2 anni fa
2 anni fa
1 anno fa
1 anno fa
1 anno fa
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837
  1. <template>
  2. <navBar title="九州ETC" :scrollTop="scrollTop" :isBack="isBack"></navBar>
  3. <filter>
  4. <view class="wrapper">
  5. <image :src="`${$imgUrl}user/bg-user-2.png`" class="bg-head" mode="widthFix"></image>
  6. <!-- <view class="bar" :style="{ top: top, height: height, lineHeight: height }">我的-九州ETC</view> -->
  7. <view class="content" :style="{ top: margin + 'px' }">
  8. <!-- <view class="content"> -->
  9. <view class="head" :style="{ marinTop: margin + 'px' }">
  10. <view class="avatar">
  11. <image :src="`${$imgUrl}user/icon-avatar.png`" :class="!state.data.opId ? 'unlogin' : ''"
  12. @click="$util.navTo('/login/login')">
  13. </image>
  14. <view v-if="!state.data.opId" class="name" @click="$util.navTo('/login/login')">
  15. <view class="nickname">登录/注册</view>
  16. </view>
  17. <view v-else class="name">
  18. <view class="nickname">{{state.accountInfoVo.nickName}}</view>
  19. <view class="user-id">
  20. <view class="phone">{{state.accountInfoVo.mobile}}</view>
  21. <view v-if="false"
  22. @click="$util.navTo('/subpackage/personal-center/setting/change-phone', true)"
  23. class="btn-change">已关联</view>
  24. </view>
  25. </view>
  26. </view>
  27. <view v-if="false" class="setting"
  28. @click="$util.navTo('/subpackage/personal-center/setting/setting', true)">
  29. <!-- <image :src="`${$imgUrl}user/icon-setting.png`"></image> -->
  30. <text>签到</text>
  31. </view>
  32. </view>
  33. <view class="panel-box">
  34. <view class="panel">
  35. <view class="panel-item"
  36. @click="$util.navTo('/subpackage/personal-center/vehicle-information', true)">
  37. <view class="panel-text"><text class="num"
  38. v-if="state.carNumber">{{state.carNumber}}</text><text class="num"
  39. v-else>0</text><text class="txt">辆</text></view>
  40. <text class="type">车辆</text>
  41. </view>
  42. <!-- <view class="panel-item" @click="$util.navTo('/subpackage/personal-center/vehicle-information', true)">
  43. <view class="panel-text"><text class="num">{{state.userVehicleInfoSumQueryVo.vehicleSum}}</text><text class="txt">辆</text></view>
  44. <text class="type">车辆</text>
  45. </view> -->
  46. <view class="panel-item" @click="goOrder(0)">
  47. <text class="num">{{state.userVehicleInfoSumQueryVo.orderStatus0}}</text>
  48. <text class="type">待办</text>
  49. </view>
  50. <view class="panel-item" v-if="false">
  51. <view class="panel-text"><text class="num">2</text><text class="txt">张</text></view>
  52. <text class="type">卡券</text>
  53. </view>
  54. <view class="panel-item" v-if="false">
  55. <view class="panel-text"><text class="num">2555</text><text class="txt">分</text></view>
  56. <text class="type">积分</text>
  57. </view>
  58. </view>
  59. <view class="notice" v-if="false">
  60. <image :src="`${$imgUrl}user/icon-tips.png`" class="icon-notice" mode="aspectFill"></image>
  61. <view class="notice-content">您有一笔成功交易,点击查看详情</view>
  62. </view>
  63. </view>
  64. <view class="rights box" v-if="false">
  65. <view class="right-head">
  66. <view class="tit">我的权益</view>
  67. <view class="more">
  68. <text class="more-text">查看全部</text>
  69. <image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
  70. </view>
  71. </view>
  72. <view class="rights-items">
  73. <view class="item">
  74. <image :src="`${$imgUrl}user/icon-car-2.png`" class="icon"></image>
  75. <text class="tit">我的通行</text>
  76. <text class="sub-tit">查询账单、轨迹</text>
  77. </view>
  78. <view class="item">
  79. <image :src="`${$imgUrl}user/icon-door.png`" class="icon"></image>
  80. <text class="tit">上门服务</text>
  81. <text class="sub-tit">8折优惠</text>
  82. </view>
  83. <view class="item">
  84. <image :src="`${$imgUrl}user/icon-obu.png`" class="icon"></image>
  85. <text class="tit">设备险</text>
  86. <text class="sub-tit">享50元更换</text>
  87. </view>
  88. <view class="item">
  89. <image :src="`${$imgUrl}user/icon-bao.png`" class="icon"></image>
  90. <text class="tit">微保驾乘险</text>
  91. <text class="sub-tit">最高享20万</text>
  92. </view>
  93. </view>
  94. </view>
  95. <view class="order box">
  96. <view class="right-head">
  97. <view class="tit">我的订单</view>
  98. <view class="more" @click="goOrder(0)">
  99. <text class="more-text">查看全部</text>
  100. <image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
  101. </view>
  102. </view>
  103. <view class="order-items">
  104. <view class="item" @click="goOrder(1)">
  105. <image :src="`${$imgUrl}user/icon-daifahuo.png`" class="icon"></image>
  106. <text class="tit">待发货</text>
  107. </view>
  108. <view class="item" @click="goOrder(2)">
  109. <image :src="`${$imgUrl}user/icon-daishouhuo.png`" class="icon"></image>
  110. <text class="tit">待收货</text>
  111. </view>
  112. <view class="item" @click="goOrder(3)">
  113. <image :src="`${$imgUrl}user/icon-daijihuo.png`" class="icon"></image>
  114. <text class="tit">待激活</text>
  115. </view>
  116. <view class="item" @click="goOrder(4)">
  117. <image :src="`${$imgUrl}user/icon-tuihuanhuo.png`" class="icon"></image>
  118. <text class="tit">退换货/退款</text>
  119. </view>
  120. </view>
  121. </view>
  122. <view class="go-through box">
  123. <view class="right-head">
  124. <view class="tit">本月通行</view>
  125. </view>
  126. <view class="pass">
  127. <view class="total m-top">
  128. <text>通行消费</text>
  129. <text>总消费</text>
  130. </view>
  131. <view class="amount m-top">
  132. <text>¥
  133. {{(state.monthFlowingVo.flowingNum ? state.monthFlowingVo.flowingNum : 0) /100}}</text>
  134. <text>¥
  135. {{(state.monthFlowingVo.flowingNum ? state.monthFlowingVo.flowingNum : 0)/100}}</text>
  136. </view>
  137. <view class="line m-top">
  138. <view class="line1"
  139. :style="{width: (state.monthFlowingVo.flowingNum ? state.monthFlowingVo.flowingNum : 0)*100/state.monthFlowingVo.money+'%'}">
  140. </view>
  141. <view class="line2"></view>
  142. </view>
  143. <view class="mileage">
  144. <view class="txt">
  145. <text class="tit">通行里程</text>
  146. <text class="val">{{state.monthFlowingVo.mileage}}km</text>
  147. </view>
  148. <view class="txt">
  149. <text class="tit">通行时长</text>
  150. <text class="val">{{state.monthFlowingVo.duration}}</text>
  151. </view>
  152. <view class="txt">
  153. <text class="tit ">通行次数</text>
  154. <text class="val">{{state.monthFlowingVo.num}}次</text>
  155. </view>
  156. </view>
  157. <view class="detail" @click="goTrajectory()">查看通行轨迹
  158. </view>
  159. </view>
  160. </view>
  161. <view class="cars box">
  162. <view class="right-head">
  163. <view class="tit">我的车辆</view>
  164. <view class="more"
  165. @click="$util.navTo('/subpackage/personal-center/vehicle-information', true)">
  166. <text class="more-text">查看全部</text>
  167. <image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
  168. </view>
  169. </view>
  170. <view class="car-item" v-for="(item,index) in state.list">
  171. <image :src="`${$imgUrl}che.png`" class="car-pic"></image>
  172. <view class="car-info">
  173. <view class="car-no"><text class="no">{{item.vehiclePlate}}</text><text
  174. class="color">{{item.color}}</text></view>
  175. <view class="card-no">卡号:{{item.cardId}}</view>
  176. <view class="card-no">签号:{{item.obuId}}</view>
  177. </view>
  178. <view class="btn-unbind" @click="del(item.vehicleId)">解除绑定</view>
  179. </view>
  180. <view class="sub-bind">
  181. <view class="item-tit">
  182. <image :src="`${$imgUrl}user/icon-car-3.png`" class="icon icon-2"></image>
  183. <text>我要关联车辆</text>
  184. </view>
  185. <view class="right-arrow"
  186. @click="$util.navTo('/subpackage/personal-center/setting/car-information/car-create', true)">
  187. <view class="sub-tit">增加未关联车辆</view>
  188. <image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
  189. </view>
  190. </view>
  191. </view>
  192. <view class="menu">
  193. <view class="item" @click="$util.navTo('/subpackage/personal-center/setting/setting', true)">
  194. <view class="item-tit">
  195. <image :src="`${$imgUrl}user/icon-setting.png`" class="icon icon-2"></image>
  196. <text>设置与资料管理</text>
  197. </view>
  198. <view class="right-arrow">
  199. <view class="sub-tit">隐私、密码管理</view>
  200. <image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
  201. </view>
  202. </view>
  203. </view>
  204. </view>
  205. </view>
  206. </filter>
  207. </template>
  208. <script lang="ts" setup>
  209. import { reactive } from "vue";
  210. import { msg, navTo } from "@/utils/utils";
  211. import { onMounted, ref } from "vue";
  212. import { getItem, StorageKeys } from "@/utils/storage";
  213. import navBar from "../../components/nav-bar/nav-bar2.vue";
  214. import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
  215. import {
  216. userInfoIndex, selectCarInfo, delCarInfo
  217. } from "@/utils/network/api.js";
  218. import {
  219. request
  220. } from "@/utils/network/request.js";
  221. import {
  222. stringToJson
  223. } from "@/utils/network/encryption.js";
  224. import filter from '@/components/filter/filter.vue';
  225. import { vehiclePlateColor, vehiclePlateColorPai } from "@/datas/vehiclePlateColor.js";
  226. const height = ref(null);
  227. const top = ref(null);
  228. const margin = ref(null);
  229. const mobile = ref(null);
  230. const scrollTop = ref(0);
  231. const isBack = ref(false);
  232. const state = reactive({
  233. data: {
  234. opId: "",
  235. },
  236. accountInfoVo: {
  237. nickName: '',
  238. mobile: ''
  239. },
  240. monthFlowingVo: {
  241. duration: 0,
  242. mileage: 0,
  243. flowingNum: 0,
  244. num: 0,
  245. parkingLotMoney: 0,
  246. parkingLotNum: 0,
  247. money: 0,
  248. },
  249. list: '', //车辆信息
  250. carNumber: '',//车辆数量
  251. userVehicleInfoSumQueryVo: {
  252. vehicleSum: 0,
  253. orderStatus0: 0
  254. },//车数量 ,代办数量
  255. isTrajectory: false, //是否有轨迹
  256. });
  257. onMounted(() => {
  258. const res = uni.getMenuButtonBoundingClientRect();
  259. height.value = res.height + "px";
  260. top.value = res.top + "px";
  261. margin.value = res.height + res.top;
  262. });
  263. onLoad((option : any) => {
  264. state.data.opId = getItem(StorageKeys.OpenId);
  265. mobile.value = getItem("mobile");
  266. });
  267. const goTrajectory = () => {
  268. if (state.isTrajectory) {
  269. uni.navigateTo({
  270. url: "/subpackage/personal-center/trajectory/trajectory"
  271. })
  272. } else {
  273. msg("暂无轨迹")
  274. }
  275. }
  276. //监听页面滚动
  277. onPageScroll((e) => {
  278. scrollTop.value = e.scrollTop;
  279. });
  280. onShow((option : any) => {
  281. state.data.opId = getItem(StorageKeys.OpenId);
  282. if (state.data.opId) {
  283. getUserInfo();
  284. }
  285. });
  286. // 查询车辆信息
  287. const queryCarMsg = () => {
  288. const options = {
  289. type: 2,
  290. data: {
  291. "openId": getItem('openId')
  292. },
  293. method: "POST",
  294. showLoading: true,
  295. };
  296. //调用方式
  297. request(selectCarInfo, options).then((res) => {
  298. const data = (stringToJson(res.bizContent).vehicleManages)
  299. for (var i = 0; i < data.length; i++) {
  300. for (var j = 0; j < vehiclePlateColorPai.length; j++) {
  301. if (data[i].vehiclePlateColor == vehiclePlateColorPai[j]['id']) {
  302. data[i].color = vehiclePlateColorPai[j]['color']
  303. }
  304. }
  305. }
  306. state.list = data;
  307. state.carNumber = data.length
  308. console.log("state.list", state.list)
  309. })
  310. .catch((err) => {
  311. console.log('输出内容', err)
  312. });
  313. }
  314. const getUserInfo = () => {
  315. const options = {
  316. type: 2,
  317. data: {
  318. openId: state.data.opId
  319. },
  320. method: "POST",
  321. // showLoading: true,
  322. };
  323. //调用方式
  324. request(userInfoIndex, options)
  325. .then((res) => {
  326. console.log('用户信息', res)
  327. let data = stringToJson(res.bizContent)
  328. state.accountInfoVo = data.accountInfoVo;
  329. if (data.monthFlowingVo && JSON.stringify(data.monthFlowingVo) != "{}") {
  330. state.monthFlowingVo = data.monthFlowingVo;
  331. state.isTrajectory = true;
  332. }
  333. state.userVehicleInfoSumQueryVo.vehicleSum = JSON.parse(JSON.stringify(data.userVehicleInfoSumQueryVo)).vehicleSum;
  334. state.userVehicleInfoSumQueryVo.orderStatus0 = JSON.parse(JSON.stringify(data.userVehicleInfoSumQueryVo)).orderStatus0;
  335. console.log("获取用户信息", data);
  336. queryCarMsg();
  337. })
  338. .catch((err) => {
  339. console.log(err);
  340. });
  341. }
  342. const del = (id) => {
  343. wx.showModal({
  344. title: '提示',
  345. content: '是否删除该条车辆信息',
  346. success: function (res) {
  347. if (res.confirm) {
  348. console.log('用户点击确定');
  349. let data = {
  350. vehicleId: id,
  351. openId: getItem('openId')
  352. }
  353. const options = {
  354. type: 2,
  355. data: data,
  356. method: "POST",
  357. showLoading: true,
  358. };
  359. request(delCarInfo, options).then((res) => {
  360. const data = stringToJson(res.bizContent);
  361. console.log(data)
  362. state.list = data.vehicleManages
  363. if (data.info == '成功.') {
  364. uni.showToast({
  365. title: "删除成功",
  366. icon: "none"
  367. })
  368. queryCarMsg();
  369. }
  370. });
  371. } else if (res.cancel) {
  372. console.log('用户点击取消');
  373. }
  374. }
  375. });
  376. }
  377. const goOrder = (index) => {
  378. uni.reLaunch({
  379. url: `../order/order?index=${index}`
  380. })
  381. }
  382. </script>
  383. <style>
  384. page {
  385. background: #eef7f7;
  386. }
  387. </style>
  388. <style scoped>
  389. .unlogin {
  390. filter: grayscale(100%);
  391. opacity: 0.7;
  392. }
  393. .wrapper {
  394. position: relative;
  395. background: #fff;
  396. }
  397. .bar {
  398. width: 100%;
  399. position: fixed;
  400. text-align: center;
  401. font-size: 32rpx;
  402. font-weight: bold;
  403. }
  404. .bg-head {
  405. width: 100%;
  406. position: absolute;
  407. z-index: -99;
  408. top: 0;
  409. left: 0;
  410. }
  411. .content {
  412. position: absolute;
  413. display: flex;
  414. flex-direction: column;
  415. width: 100%;
  416. }
  417. .head {
  418. display: flex;
  419. justify-content: space-between;
  420. align-items: center;
  421. width: 100%;
  422. box-sizing: border-box;
  423. padding: 40rpx 0 46rpx;
  424. }
  425. .head .avatar {
  426. display: flex;
  427. align-items: center;
  428. }
  429. .head .avatar image {
  430. width: 120rpx;
  431. height: 120rpx;
  432. border-radius: 80rpx;
  433. border: 12rpx solid rgba(255, 255, 255, 0.5);
  434. margin: 0 20rpx 0 30rpx;
  435. }
  436. .head .setting {
  437. display: flex;
  438. align-items: center;
  439. background: rgba(0, 179, 139, .1);
  440. border: 1px solid #fff;
  441. height: 60rpx;
  442. border-radius: 30rpx;
  443. padding: 0 34rpx;
  444. color: #fff;
  445. font-size: 28rpx;
  446. margin-right: 30rpx;
  447. }
  448. .head .setting image {
  449. width: 40rpx;
  450. height: 40rpx;
  451. margin-right: 6rpx;
  452. }
  453. .head .nickname {
  454. font-size: 36rpx;
  455. color: #000000;
  456. }
  457. .head .user-id {
  458. font-size: 26rpx;
  459. color: #000000;
  460. padding-top: 30rpx;
  461. display: flex;
  462. align-items: center;
  463. }
  464. .head .btn-change {
  465. font-size: 22rpx;
  466. height: 40rpx;
  467. padding: 0 20rpx;
  468. border: 1px solid #fff;
  469. color: #fff;
  470. box-sizing: border-box;
  471. border-radius: 20rpx;
  472. margin-left: 16rpx;
  473. background: rgba(0, 179, 139, .1);
  474. }
  475. .panel-box {
  476. display: flex;
  477. flex-direction: column;
  478. background: #fff;
  479. margin: 0 30rpx 30rpx;
  480. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  481. border-radius: 20rpx;
  482. padding: 30rpx 0;
  483. }
  484. .panel {
  485. display: flex;
  486. justify-content: space-evenly;
  487. padding: 30rpx 0;
  488. }
  489. .panel-item {
  490. display: flex;
  491. flex-direction: column;
  492. justify-content: center;
  493. align-items: center;
  494. font-size: 32rpx;
  495. }
  496. .panel-item .num {
  497. font-weight: bold;
  498. color: #454545;
  499. }
  500. .panel-item .txt {
  501. font-size: 26rpx;
  502. }
  503. .panel-item .type {
  504. color: #999;
  505. font-size: 26rpx;
  506. padding: 14rpx 0;
  507. }
  508. .panel-box .icon-notice {
  509. width: 48rpx;
  510. height: 48rpx;
  511. }
  512. .panel-box .notice {
  513. display: flex;
  514. font-size: 32rpx;
  515. margin: 0 30rpx;
  516. align-items: center;
  517. background: #f3f3f3;
  518. border-radius: 10rpx;
  519. padding: 0 14rpx;
  520. }
  521. .panel-box .notice .notice-content {
  522. height: 68rpx;
  523. line-height: 68rpx;
  524. padding: 0 12rpx;
  525. font-size: 28rpx;
  526. }
  527. .box .arrow {
  528. width: 14rpx;
  529. height: 26rpx;
  530. }
  531. .box {
  532. background: #ffffff;
  533. margin: 0 30rpx 30rpx;
  534. padding: 30rpx;
  535. border-radius: 20rpx;
  536. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  537. }
  538. .box .more {
  539. display: flex;
  540. font-size: 26rpx;
  541. color: #808080;
  542. align-items: center;
  543. }
  544. .box .more .more-text {
  545. padding-right: 12rpx;
  546. }
  547. .box .right-head {
  548. display: flex;
  549. justify-content: space-between;
  550. }
  551. .box .right-head .tit {
  552. font-size: 32rpx;
  553. /* font-weight: bold; */
  554. }
  555. .rights .rights-items {
  556. display: flex;
  557. justify-content: space-evenly;
  558. padding: 30rpx 0;
  559. }
  560. .rights .item {
  561. display: flex;
  562. flex-direction: column;
  563. align-items: center;
  564. justify-content: center;
  565. }
  566. .rights .item .tit {
  567. font-size: 26rpx;
  568. color: #333;
  569. padding: 20rpx 0 10rpx 0;
  570. }
  571. .rights .item .sub-tit {
  572. font-size: 22rpx;
  573. color: #999;
  574. }
  575. .order .order-items {
  576. display: flex;
  577. justify-content: space-around;
  578. padding: 30rpx 0;
  579. }
  580. .order .item {
  581. display: flex;
  582. flex-direction: column;
  583. align-items: center;
  584. justify-content: center;
  585. }
  586. .order .item .tit {
  587. font-size: 26rpx;
  588. color: #333;
  589. padding: 20rpx 0 10rpx 0;
  590. }
  591. .box .icon {
  592. width: 56rpx;
  593. height: 56rpx;
  594. }
  595. .go-through .pass {
  596. display: flex;
  597. flex-direction: column;
  598. }
  599. .go-through .total {
  600. display: flex;
  601. justify-content: space-between;
  602. font-size: 26rpx;
  603. color: #999;
  604. }
  605. .go-through .amount {
  606. display: flex;
  607. justify-content: space-between;
  608. align-items: center;
  609. font-size: 28rpx;
  610. color: #333;
  611. }
  612. .go-through .line {
  613. display: flex;
  614. }
  615. .go-through .line1 {
  616. height: 8rpx;
  617. background: #00B38B;
  618. border-radius: 4rpx;
  619. }
  620. .go-through .line2 {
  621. height: 8rpx;
  622. background: #F1F1F1;
  623. border-radius: 0 4rpx 4rpx 0;
  624. flex: 1;
  625. }
  626. .go-through .mileage {
  627. display: flex;
  628. justify-content: space-evenly;
  629. align-items: center;
  630. text-align: center;
  631. margin: 32rpx 0;
  632. }
  633. .go-through .mileage .txt {
  634. display: flex;
  635. flex-direction: column;
  636. }
  637. .go-through .mileage .tit {
  638. font-size: 26rpx;
  639. color: #999;
  640. }
  641. .go-through .mileage .val {
  642. font-size: 28rpx;
  643. color: #333;
  644. margin-top: 16rpx;
  645. }
  646. .go-through .m-top {
  647. margin-top: 16rpx;
  648. }
  649. .go-through .detail {
  650. width: 100%;
  651. text-align: center;
  652. color: #00B38B;
  653. font-size: 24rpx;
  654. border-top: 1px solid #DCDCDC;
  655. padding-top: 24rpx;
  656. }
  657. .cars .car-item {
  658. display: flex;
  659. align-items: center;
  660. padding: 36rpx 0;
  661. }
  662. .cars .car-item .btn-unbind {
  663. border: 1px solid #00B38B;
  664. border-radius: 30rpx;
  665. height: 60rpx;
  666. box-sizing: border-box;
  667. line-height: 60rpx;
  668. font-size: 24rpx;
  669. padding: 0 20rpx;
  670. background: rgba(0, 179, 139, .1);
  671. color: #00B38B;
  672. }
  673. .cars .car-pic {
  674. width: 120rpx;
  675. height: 120rpx;
  676. margin-right: 12rpx;
  677. }
  678. .cars .car-info {
  679. display: flex;
  680. flex-direction: column;
  681. flex: 1;
  682. color: #999;
  683. font-size: 22rpx;
  684. }
  685. .cars .car-no {
  686. font-size: 30rpx;
  687. color: #333;
  688. }
  689. .cars .card-no {
  690. margin-top: 14rpx;
  691. }
  692. .cars .sub-bind {
  693. display: flex;
  694. align-items: center;
  695. justify-content: space-between;
  696. border-top: 1px solid #F1F1F1;
  697. padding-top: 20rpx;
  698. }
  699. .cars .sub-bind .item-tit {
  700. display: flex;
  701. align-items: center;
  702. font-size: 26rpx;
  703. color: #333;
  704. }
  705. .cars .sub-bind .right-arrow {
  706. font-size: 22rpx;
  707. color: #ccc;
  708. display: flex;
  709. justify-content: center;
  710. align-items: center;
  711. }
  712. .cars .sub-bind .sub-tit {
  713. padding-right: 20rpx;
  714. }
  715. .menu {
  716. background: #ffffff;
  717. /* border-radius: 30rpx 30rpx 0 0; */
  718. padding: 0 30rpx;
  719. margin: 0 30rpx 30rpx;
  720. border-radius: 20rpx;
  721. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  722. }
  723. .menu .arrow {
  724. width: 14rpx;
  725. height: 26rpx;
  726. }
  727. .menu .icon {
  728. width: 48rpx;
  729. height: 48rpx;
  730. margin-right: 10rpx;
  731. }
  732. .menu .item {
  733. display: flex;
  734. justify-content: space-between;
  735. align-items: center;
  736. /* border-bottom: 1px solid #dcdcdc; */
  737. padding: 20rpx 0;
  738. }
  739. .menu .item:first-child {
  740. margin-top: 10rpx;
  741. }
  742. .menu .item-tit {
  743. display: flex;
  744. align-items: center;
  745. font-size: 26rpx;
  746. color: #333;
  747. }
  748. .menu .right-arrow {
  749. font-size: 22rpx;
  750. color: #ccc;
  751. display: flex;
  752. justify-content: center;
  753. align-items: center;
  754. }
  755. .menu .sub-tit {
  756. padding-right: 20rpx;
  757. }
  758. .color {
  759. padding: 4rpx 8rpx;
  760. border-radius: 10rpx;
  761. color: white;
  762. background-color: rgb(6, 112, 255);
  763. display: inline-block;
  764. margin-left: 20rpx;
  765. font-size: 24rpx;
  766. }
  767. </style>