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.

index.vue 21KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912
  1. <template>
  2. <filter>
  3. <view class="wrapper">
  4. <!-- Banner -->
  5. <view class="banner">
  6. <swiper class="swiper" circular :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay"
  7. :interval="swiper.interval" :duration="swiper.duration"
  8. indicator-active-color="rgba(0, 179, 139, 1)" :easing-function="swiper.easing">
  9. <block v-if="state.swiperList.length >0" v-for="item in state.swiperList" :key="item.id">
  10. <swiper-item class="swiper-item" @click="link(item)">
  11. <image :src="fileURLList + item.imgUrl" mode="widthFix"></image>
  12. </swiper-item>
  13. </block>
  14. </swiper>
  15. <view class="notice">
  16. <image class="icon" :src="fileURL + 'image/index/icon-notice.png'" lazy-load="false"
  17. mode="aspectFill">
  18. </image>
  19. <uni-notice-bar style="width: 100%;" scrollable single :text="state.notice" @click="tip()">
  20. </uni-notice-bar>
  21. </view>
  22. </view>
  23. <!-- 按钮导航 -->
  24. <view class="nav">
  25. <!-- <view class="item-box" @click="cardRecharge(1)">
  26. <view class="item item-1">
  27. <image :src="fileURL + 'image/index/item-1.png'" mode="aspectFill" />
  28. </view>
  29. <view class="text">储值卡充值</view>
  30. </view> -->
  31. <view class="item-box" @click="$util.navTo('/pages/bluetooth/bluetooth?routeType=4', true)">
  32. <view class="item item-2">
  33. <image :src="fileURL + 'image/index/item-2.png'" mode="aspectFill" />
  34. </view>
  35. <view class="text">卡签信息查询</view>
  36. </view>
  37. <view class="item-box"
  38. @click="$util.navTo('/subpackage/personal-center/install-activation-order',true)">
  39. <view class="item item-4">
  40. <image :src="fileURL + 'image/index/item-4.png'" mode="aspectFill" />
  41. </view>
  42. <view class="text">激活服务</view>
  43. </view>
  44. <view class="item-box" @click="cardRecharge(3)">
  45. <view class="item item-5">
  46. <image :src="fileURL + 'image/index/item-5.png'" mode="aspectFill" />
  47. </view>
  48. <view class="text">设备注销</view>
  49. </view>
  50. <view class="item-box" @click="$util.navTo(`/subpackage/after-sale/equipment-upgrade/select-car`,true)">
  51. <view class="item item-6">
  52. <image :src="fileURL + 'image/index/item-6.png'" mode="aspectFill" />
  53. </view>
  54. <view class="text">设备升级</view>
  55. </view>
  56. <view class="item-box" @click="$util.navTo(`/subpackage/after-sale/onlineService`,true)">
  57. <view class="item item-7">
  58. <image :src="fileURL + 'image/index/item-7.png'" mode="aspectFill" />
  59. </view>
  60. <view class="text">在线客服</view>
  61. </view>
  62. <view class="item-box" @click="$util.navTo(`/pages/service/service`,true)">
  63. <view class="item item-8">
  64. <image :src="fileURL + 'image/index/item-more.png'" mode="aspectFill" />
  65. </view>
  66. <view class="text">更多</view>
  67. </view>
  68. </view>
  69. <!--快速办理通道 -->
  70. <view class="express-lane">
  71. <view class="title">快速办理</view>
  72. <view class="lane">
  73. <view class="lane-item lane-1" :style="{ '--background': bgOrange }" @click="showMask(1)">
  74. <image :src="fileURL + 'image/index/icon-car.png'" mode="aspectFill"></image>
  75. <view class="text">
  76. <text class="head">客车用户</text>
  77. </view>
  78. </view>
  79. <view class="lane-item lane-2" :style="{ '--background': bgBlue }" @click="showMask(2)">
  80. <image :src="fileURL + 'image/index/icon-truck.png'" mode="aspectFill"></image>
  81. <view class="text">
  82. <text class="head">货车用户</text>
  83. </view>
  84. </view>
  85. </view>
  86. </view>
  87. <!-- 办理流程 -->
  88. <view class="flow-path">
  89. <scroll-view scroll-x="true" class="scroll-view">
  90. <view class="top-menu">
  91. <view :class="item == state.tabActive ? 'tab active' : 'tab'"
  92. v-for="item in state.flowPathTabList" :key="item" @click="flowPathTabHandle(item)">
  93. <view class="border"></view>{{ item }}
  94. </view>
  95. </view>
  96. </scroll-view>
  97. <view v-if="state.tabActive === '办理流程'">
  98. <view class="flow-list">
  99. <flow-path-list :options="state.flowList"></flow-path-list>
  100. </view>
  101. </view>
  102. <view v-else-if="state.tabActive === '办理条件'">
  103. <view class="flow-list as-gravity-center"> {{state.processeConditionText}} </view>
  104. </view>
  105. <view v-else-if="state.tabActive === '常见问题'">
  106. <view class="flow-list as-gravity-center"> {{state.commonQuestionText}} </view>
  107. </view>
  108. </view>
  109. </view>
  110. <!-- 高速快讯 -->
  111. <view class="news" v-if="state.highMsgData.length!=0">
  112. <view class="title">高速快讯</view>
  113. <view class="news-box">
  114. <view class="news-item" v-for="(item,index) in state.highMsgData" :key='index' @click="link(item)">
  115. <view class="left-text">
  116. <view class="tit description">{{item.title}}</view>
  117. <view class="span">{{item.copywriting}}</view>
  118. </view>
  119. <view class="image-box">
  120. <image :src="fileURLList + item.imgUrl" mode="aspectFill"></image>
  121. </view>
  122. </view>
  123. <view v-if="state.highMsgData.length!=0" class="more"
  124. @click="$util.navTo('/subpackage/orders/moreHighMsg/moreHighMsg',true)">查看更多</view>
  125. </view>
  126. </view>
  127. </filter>
  128. <!-- ETC选择弹窗 -->
  129. <view class="mask" v-if="isShowMask">
  130. <view class="mask-content">
  131. <filter>
  132. <view class="mask-close">
  133. <image :src="fileURL + 'image/index/icon-close.png'" class="icon-closed" @click="closeMask"></image>
  134. </view>
  135. <view class="mask-title" :style="{ '--color': color }">选择ETC用户类型</view>
  136. <view class="mask-tab">
  137. <view class="tab-item active" @click="toCreatOrder('1')">
  138. <image :src="fileURL + 'image/index/icon-personal.png'" mode="aspectFill"></image>
  139. <text class="tab-tit on">个人办理</text>
  140. </view>
  141. <view class="tab-item" @click="toCreatOrder('2')">
  142. <image :src="fileURL + 'image/index/icon-unit.png'" mode="aspectFill"></image>
  143. <text class="tab-tit on">单位办理</text>
  144. </view>
  145. </view>
  146. </filter>
  147. </view>
  148. </view>
  149. </template>
  150. <script setup lang="ts">
  151. import {
  152. onMounted,
  153. ref
  154. } from "vue";
  155. import {
  156. onPageScroll,
  157. onLoad, onReachBottom
  158. } from "@dcloudio/uni-app";
  159. import flowPathList from "./components/flow-path-list.vue";
  160. import filter from '@/components/filter/filter.vue';
  161. import {
  162. request
  163. } from "@/utils/network/request.js";
  164. import {
  165. stringToJson
  166. } from "@/utils/network/encryption.js";
  167. import {
  168. useUserStore
  169. } from "@/stores/user";
  170. import {
  171. getItem,
  172. setItem,
  173. StorageKeys
  174. } from "@/utils/storage";
  175. import {
  176. queryKey,
  177. querySwiper,
  178. envs,
  179. infoQuery,
  180. queryHighMsg,
  181. orderList
  182. } from "@/utils/network/api.js";
  183. import {
  184. reactive
  185. } from "vue";
  186. import {
  187. fileURL, fileURLList
  188. } from "@/datas/fileURL.js";
  189. import {
  190. navTo,
  191. msg,
  192. noticeUser
  193. } from "@/utils/utils";
  194. import {
  195. getCodeName
  196. } from "@/datas/queryKey.js";
  197. // import { jump } from "@/datas/9901Jump.js";
  198. import navBar from "@/components/nav-bar/nav-bar2.vue";
  199. const tools = require("../../static/etcUtil/tools.js");
  200. const bgOrange = `url(${fileURL}image/index/bg-orange.png) center center no-repeat`;
  201. const bgBlue = `url(${fileURL}image/index/bg-blue.png) center center no-repeat`;
  202. const list = reactive(["您有一条待办事项,还未办理完成"])
  203. const scrollTop = ref(0);
  204. const isBack = ref(false);
  205. const swiper = reactive({
  206. indicatorDots: true,
  207. autoplay: true,
  208. interval: 3000,
  209. duration: 3000,
  210. easing: "easeInOutCubic"
  211. })
  212. console.log('输出内容==============', getItem(StorageKeys.OpenId), '==============')
  213. const state = reactive({
  214. type: 0, //1客车 2货车
  215. userType: 1, //1个人 2单位
  216. notice: "",
  217. swiperList: [],
  218. noticeList: [], //公告栏列表
  219. flowPathTabList: ["办理流程", "办理条件", "常见问题"],
  220. tabActive: "办理流程",
  221. flowList: [
  222. //办理流程数据
  223. {
  224. title: "第一步:产品选择",
  225. desc: "选择购买的发行产品",
  226. },
  227. {
  228. title: "第二步:信息校验",
  229. desc: "提交车牌号、车牌颜色、收货地址相关信息",
  230. },
  231. {
  232. title: "第三步:证件上传",
  233. desc: "上传身份证、行驶证等相关信息",
  234. },
  235. {
  236. title: "第四步:订单支付",
  237. desc: "支付完成订单",
  238. },
  239. {
  240. title: "第五步:签约代扣",
  241. desc: "选择签约账户并关联",
  242. },
  243. ],
  244. highMsgData: '',//高速快讯内容
  245. processeConditionText: "", //办理条件文本
  246. commonQuestionText: "", //常见问题文本
  247. isEnableSetGray: false
  248. });
  249. const isShowMask = ref(false);
  250. const isShowBar = ref(false)
  251. const userStore = useUserStore();
  252. const type = 0;
  253. const title = ref("我是测试");
  254. const statusBarHeight = ref(0)
  255. //监听页面滚动
  256. onPageScroll((e) => {
  257. if (e.scrollTop > statusBarHeight.value) {
  258. isShowBar.value = true;
  259. } else {
  260. isShowBar.value = false;
  261. }
  262. scrollTop.value = e.scrollTop;
  263. });
  264. onLoad((options) => {
  265. console.log("wechatSignNo",options)
  266. getInfo();
  267. quanKeyAction().then((val : any) => {
  268. setItem('key', val.dictTypeAndItem)
  269. })
  270. })
  271. onMounted(() => {
  272. uni.getSystemInfo({
  273. success: (e : any) => {
  274. statusBarHeight.value = e.statusBarHeight;
  275. }
  276. })
  277. getSwiper()
  278. });
  279. onReachBottom(() => {
  280. highMsg(); //高速快讯
  281. })
  282. const tip = () => {
  283. const params = encodeURIComponent(JSON.stringify("https://webzeus.hltgz.com/throughBilManager/index"))
  284. tools.toUrl(`/subpackage/personal-center/webview?url=` + params);
  285. }
  286. //获取轮播
  287. const getSwiper = () => {
  288. let options = {
  289. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  290. data: {
  291. }, //请求参数
  292. method: "POST", //提交方式(默认POST)
  293. showLoading: true, //是否显示加载中(默认显示)
  294. };
  295. //调用方式
  296. request(querySwiper, options).then((res) => {
  297. console.log(stringToJson(res.bizContent));
  298. const data = stringToJson(res.bizContent)
  299. console.log("轮播图", data)
  300. state.swiperList = data.swipers ? data.swipers : []
  301. })
  302. .catch((err) => {
  303. console.log(err);
  304. });
  305. };
  306. //办理流程tab选择
  307. const flowPathTabHandle = (tab) => {
  308. state.tabActive = tab;
  309. if (tab == "办理条件") {
  310. processeCondition();//办理条件
  311. } else if (tab == "常见问题") {
  312. commonQuestion();
  313. }
  314. };
  315. //全量枚举值查询
  316. const quanKeyAction = () => {
  317. var data = {};
  318. const options = {
  319. type: 2,
  320. data: data,
  321. method: "POST",
  322. showLoading: true,
  323. };
  324. return new Promise(async (resolve, reject) => {
  325. const res = await request(queryKey, options);
  326. const data = stringToJson(res.bizContent);
  327. resolve(data);
  328. }).catch((error) => {
  329. reject(error);
  330. });
  331. }
  332. const toCreatOrder = (val : number) => {
  333. console.log(typeof (val));
  334. state.userType = val;
  335. navTo(`/subpackage/orders/choice-product?type=${state.type}&&userType=${state.userType}`)
  336. closeMask();
  337. };
  338. const showMask = (val : any) => {
  339. state.type = val; //1 客车 2货车
  340. isShowMask.value = true;
  341. };
  342. const closeMask = () => {
  343. isShowMask.value = false;
  344. };
  345. // 获取文本信息----用户协议
  346. const getInfo = () => {
  347. //参数说明
  348. let options = {
  349. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  350. data: {
  351. businessType: 'BROADCAST' //广播栏信息
  352. }, //请求参数
  353. method: "POST", //提交方式(默认POST)
  354. showLoading: true, //是否显示加载中(默认显示)
  355. };
  356. //调用方式
  357. request(infoQuery, options)
  358. .then((res) => {
  359. let data = stringToJson(res.bizContent)
  360. console.log(data);
  361. state.notice = data.text
  362. })
  363. .catch((err) => {
  364. console.log(err);
  365. });
  366. }
  367. // 高速快讯查询接口
  368. const highMsg = () => {
  369. let options = {
  370. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  371. data: {
  372. pageNo: 1,
  373. pageSize: 2
  374. }, //请求参数
  375. method: "POST", //提交方式(默认POST)
  376. showLoading: true, //是否显示加载中(默认显示)
  377. };
  378. //调用方式
  379. request(queryHighMsg, options).then((res) => {
  380. console.log("高速快讯查询接口", stringToJson(res.bizContent));
  381. state.highMsgData = stringToJson(res.bizContent).data
  382. for (var i = 0; i < state.highMsgData.length; i++) {
  383. state.highMsgData[i]["copywriting"] = getCodeName('COPYWRITING', state.highMsgData[i]["copywriting"])
  384. if (state.highMsgData[i]["type"] == 3) {
  385. state.highMsgData[i]["title"] = state.highMsgData[i]["hyperLink"]
  386. }
  387. }
  388. state.highMsgData.sort(function (a, b) {
  389. return a.sequence - b.sequence//正序
  390. })
  391. }).catch((err) => { console.log(err) });
  392. }
  393. const link = (item : any) => {
  394. if (item.type == 1) {
  395. const params = encodeURIComponent(JSON.stringify(item.hyperLink))
  396. tools.toUrl(`/subpackage/personal-center/webview?url=` + params);
  397. } else if (item.type == 2) {
  398. navTo(item.hyperLink)
  399. } else if (item.type == 3) {
  400. const param = encodeURIComponent(JSON.stringify(item))
  401. tools.toUrl(`/subpackage/orders/moreHighMsg/textDetails?item=` + param);
  402. } else if (item.type == 4) {
  403. uni.navigateToMiniProgram({
  404. appId: item.hyperLink,
  405. path: item.speedUrl,
  406. success(res) {
  407. console.log(res);
  408. },
  409. complete(res) {
  410. console.log(res);
  411. },
  412. fail(res) {
  413. console.log(res);
  414. // 未成功跳转到车主小程序
  415. },
  416. });
  417. }
  418. }
  419. const processeCondition = () => {
  420. let options = {
  421. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  422. data: {
  423. businessType: 'PROCESSING_CONDITIONS' //办理条件
  424. }, //请求参数
  425. method: "POST", //提交方式(默认POST)
  426. showLoading: true, //是否显示加载中(默认显示)
  427. };
  428. //调用方式
  429. request(infoQuery, options)
  430. .then((res) => {
  431. let data = stringToJson(res.bizContent)
  432. console.log("办理条件", data)
  433. state.processeConditionText = data.text
  434. })
  435. .catch((err) => {
  436. console.log(err);
  437. });
  438. }
  439. const commonQuestion = () => {
  440. let options = {
  441. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  442. data: {
  443. businessType: 'COMMON_PROBLEM' //常见问题
  444. }, //请求参数
  445. method: "POST", //提交方式(默认POST)
  446. showLoading: true, //是否显示加载中(默认显示)
  447. };
  448. //调用方式
  449. request(infoQuery, options)
  450. .then((res) => {
  451. let data = stringToJson(res.bizContent)
  452. console.log("常见问题", data)
  453. state.commonQuestionText = data.text
  454. })
  455. .catch((err) => {
  456. console.log(err);
  457. });
  458. }
  459. // 代办事项
  460. const doSomething = () => {
  461. let options = {
  462. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  463. data: {
  464. "opId": getItem(StorageKeys.OpenId),
  465. "source": "WECHAT",
  466. "vehiclePlate": "",
  467. "tabIndex": 3 + '',
  468. "pageNo": 1,
  469. "pageSize": 100,
  470. "promotionModes": 1
  471. },
  472. method: "POST", //提交方式(默认POST)
  473. };
  474. //调用方式
  475. request(orderList, options)
  476. .then((res) => {
  477. let data = stringToJson(res.bizContent)
  478. let obj = {};
  479. obj["id"] = 1;
  480. obj['title'] = "您有" + data.data.length + "条未完成订单,前往处理"
  481. state.noticeList.push(obj)
  482. console.log("代办事项", data.data)
  483. })
  484. .catch((err) => {
  485. console.log(err);
  486. });
  487. }
  488. const cardRecharge = (val) => {
  489. // #ifdef MP-ALIPAY
  490. if (val == 1 || val == 2 || val == 3) {
  491. msg("业务升级中,请前往九州ETC公众号进行办理。或拨打客服电话400-800-8787")
  492. }
  493. // #endif
  494. // #ifdef MP-WEIXIN
  495. if (val == 1) {
  496. navTo('/pages/recharge/recharge-pay', true)
  497. } else if (val == 2) {
  498. navTo('/subpackage/after-sale/rescind-carId/rescind-carId-select', true)
  499. } else if (val == 3) {
  500. navTo('/subpackage/after-sale/activation-once-again/select-car?type=2', true)
  501. }
  502. // #endif
  503. }
  504. </script>
  505. <style>
  506. page {
  507. background: #eef7f7;
  508. }
  509. </style>
  510. <style lang="scss" scoped>
  511. .statusBar {
  512. width: 100%;
  513. position: sticky;
  514. background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
  515. top: 0;
  516. left: 0;
  517. z-index: 999;
  518. }
  519. .banner {
  520. position: relative;
  521. }
  522. .banner swiper {
  523. height: 470rpx;
  524. width: 750rpx;
  525. }
  526. .banner .notice {
  527. position: absolute;
  528. background: rgba(0, 0, 0, 0.28);
  529. border-radius: 30rpx;
  530. width: 500rpx;
  531. height: 60rpx;
  532. bottom: 46rpx;
  533. left: 125rpx;
  534. display: flex;
  535. justify-content: center;
  536. align-items: center;
  537. padding: 0 20rpx;
  538. box-sizing: border-box;
  539. ::v-deep .uni-noticebar {
  540. background: none !important;
  541. margin-bottom: 0;
  542. text {
  543. font-size: 24rpx !important;
  544. color: #ffffff !important;
  545. }
  546. }
  547. }
  548. .banner .notice .icon {
  549. width: 40rpx;
  550. height: 40rpx;
  551. margin: 10rpx;
  552. }
  553. .banner .notice .notice-text {
  554. font-size: 24rpx;
  555. color: #ffffff;
  556. flex: 1;
  557. }
  558. .swiper-item image {
  559. width: 100%;
  560. height: auto;
  561. }
  562. .nav {
  563. display: flex;
  564. flex-wrap: wrap;
  565. padding: 0 35rpx;
  566. font-size: 28rpx;
  567. }
  568. .nav .item-box {
  569. display: flex;
  570. flex-direction: column;
  571. justify-content: center;
  572. align-items: center;
  573. }
  574. .nav .item {
  575. width: 80rpx;
  576. height: 80rpx;
  577. border-radius: 30rpx;
  578. display: flex;
  579. justify-content: center;
  580. align-items: center;
  581. margin: 50rpx 45rpx 20rpx 45rpx;
  582. }
  583. .nav .text {
  584. font-size: 24rpx;
  585. color: #172843;
  586. }
  587. .item-1 {
  588. background: linear-gradient(133deg, #5fff9b 0%, #00b38b 100%);
  589. }
  590. .item-2 {
  591. background: linear-gradient(-50deg, #018ffd 0%, #27fcff 100%);
  592. }
  593. .item-3 {
  594. background: linear-gradient(-47deg, #f88721 0%, #fecd61 100%);
  595. }
  596. .item-4 {
  597. background: linear-gradient(-47deg, #018ffd 0%, #27fcff 100%);
  598. }
  599. .item-5 {
  600. background: linear-gradient(-44deg, #018ffd 0%, #27fcff 100%);
  601. }
  602. .item-6 {
  603. background: linear-gradient(-50deg, #f88721 0%, #fecd61 100%);
  604. }
  605. .item-7 {
  606. background: linear-gradient(129deg, #5fff9b 0%, #00b38b 100%);
  607. }
  608. .item-8 {
  609. background: linear-gradient(124deg, #b8f0f2 0%, #62aeb1 100%);
  610. }
  611. .item image {
  612. width: 56rpx;
  613. height: 56rpx;
  614. }
  615. .express-lane {
  616. font-size: 36rpx;
  617. font-weight: 400;
  618. color: #000000;
  619. padding-top: 30rpx;
  620. }
  621. .express-lane .title {
  622. padding-left: 30rpx;
  623. margin: 0rpx 0 20rpx;
  624. font-size: 32rpx;
  625. font-weight: bold;
  626. }
  627. .lane {
  628. display: flex;
  629. justify-content: space-evenly;
  630. }
  631. .lane-item {
  632. width: 330rpx;
  633. height: 150rpx;
  634. border-radius: 20rpx;
  635. display: flex;
  636. justify-content: center;
  637. align-items: center;
  638. }
  639. .lane-item image {
  640. width: 120rpx;
  641. height: 100rpx;
  642. margin: 0 18rpx;
  643. }
  644. .lane-item .text {
  645. display: flex;
  646. flex-direction: column;
  647. justify-content: center;
  648. color: #ffffff;
  649. flex: 1;
  650. }
  651. .lane-item .head {
  652. font-size: 30rpx;
  653. font-weight: bold;
  654. }
  655. .lane-item .decribe {
  656. font-size: 24rpx;
  657. }
  658. .lane-1 {
  659. background: var(--background);
  660. }
  661. .lane-2 {
  662. background: var(--background);
  663. }
  664. .news {
  665. padding: 30rpx 30rpx 0 30rpx;
  666. }
  667. .news .title {
  668. font-size: 32rpx;
  669. font-weight: bold;
  670. }
  671. .news .left-text {
  672. flex: 1;
  673. margin-right: 100rpx;
  674. }
  675. .news-box {
  676. background: #ffffff;
  677. border-radius: 20rpx;
  678. padding: 0 32rpx;
  679. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  680. margin: 20rpx 0 50rpx;
  681. }
  682. .news .tit {
  683. font-size: 26rpx;
  684. color: #172843;
  685. }
  686. .news .news-item {
  687. display: flex;
  688. border-bottom: 1px solid #dcdcdc;
  689. padding: 32rpx 0 15rpx;
  690. }
  691. .news .image-box image {
  692. width: 100rpx;
  693. height: 100rpx;
  694. border-radius: 10rpx;
  695. }
  696. .news .span {
  697. font-size: 22rpx;
  698. display: inline-block;
  699. text-align: center;
  700. background: #bae0f1;
  701. border-radius: 6rpx;
  702. color: #0a8f8a;
  703. padding: 4rpx 8rpx;
  704. }
  705. .news .more {
  706. font-size: 24rpx;
  707. text-align: center;
  708. color: #0a8f8a;
  709. padding: 22rpx 0;
  710. }
  711. .mask {
  712. background: $uni-bg-color-mask;
  713. position: fixed;
  714. left: 0;
  715. top: 0;
  716. right: 0;
  717. bottom: 0;
  718. }
  719. .mask-content {
  720. background: $uni-bg-color;
  721. width: 570rpx;
  722. height: 480rpx;
  723. position: absolute;
  724. left: 50%;
  725. top: 50%;
  726. transform: translate(-50%, -50%);
  727. display: flex;
  728. flex-direction: column;
  729. border-radius: 20rpx;
  730. }
  731. .mask-close {
  732. text-align: right;
  733. }
  734. .mask-title {
  735. text-align: center;
  736. font-size: 32rpx;
  737. color: $uni-text-color-black;
  738. margin-bottom: 50rpx;
  739. }
  740. .mask-tab {
  741. display: flex;
  742. justify-content: space-evenly;
  743. }
  744. .icon-closed {
  745. width: 48rpx;
  746. height: 48rpx;
  747. margin: 24rpx 24rpx 0 0;
  748. }
  749. .tab-item {
  750. display: flex;
  751. flex-direction: column;
  752. justify-content: center;
  753. align-items: center;
  754. }
  755. .tab-tit {
  756. font-size: 32rpx;
  757. margin-top: 20rpx;
  758. color: #666;
  759. }
  760. .tab-item image {
  761. width: 160rpx;
  762. height: 160rpx;
  763. }
  764. .backlog-notice {
  765. margin: 50rpx 30rpx 0rpx;
  766. }
  767. .flow-path {
  768. padding: 20rpx 0rpx 20rpx;
  769. .scroll-view {
  770. white-space: nowrap;
  771. top: 0;
  772. }
  773. .top-menu {
  774. display: flex;
  775. }
  776. .top-menu .tab {
  777. font-size: 28rpx;
  778. padding: 38rpx 30rpx;
  779. color: #666666;
  780. position: relative;
  781. }
  782. .top-menu .active .border {
  783. position: absolute;
  784. width: 70%;
  785. height: 16rpx;
  786. background: #00b38b;
  787. opacity: 0.3;
  788. bottom: 40rpx;
  789. z-index: -99;
  790. left: 15%;
  791. border-radius: 6rpx;
  792. }
  793. .top-menu .active {
  794. font-weight: bold;
  795. font-size: 32rpx;
  796. color: #0d0f26;
  797. }
  798. .top-menu .active::before {
  799. width: 100%;
  800. height: 16rpx;
  801. background: #00b38b;
  802. opacity: 0.3;
  803. }
  804. .flow-list {
  805. margin: 0rpx 30rpx;
  806. min-height: 700rpx;
  807. background: #ffffff;
  808. box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
  809. border-radius: 20rpx;
  810. padding: 55rpx 30rpx 30rpx;
  811. }
  812. }
  813. .description {
  814. overflow: hidden;
  815. -webkit-line-clamp: 2;
  816. text-overflow: ellipsis;
  817. display: -webkit-box;
  818. -webkit-box-orient: vertical;
  819. }
  820. </style>