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 25KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130
  1. <template>
  2. <view class='container'>
  3. <view class="bg-img">
  4. <image :src="`${fileURL}image/newHome/header.png`" mode="scaleToFill" class="icon"></image>
  5. </view>
  6. <view class="content">
  7. <view class="header">
  8. <!-- <navBar :isBack='false' :title='首页'></navBar> -->
  9. <view class="title">
  10. <view :style="{ height: `${statusBarHeight}px` }"></view>
  11. <!-- 自定义导航栏高度 -->
  12. <view class='title-txt' :style="{
  13. height: `${barHeight}px`,
  14. 'line-height': `${barHeight}px`
  15. }">
  16. <text>首页</text>
  17. </view>
  18. </view>
  19. <view class="search-box">
  20. <image :src="`${fileURL}image/newHome/search.png`" class="icon" mode="aspectFill"></image>
  21. <input class="search" placeholder="办业务·搜一搜" @input="onKeyInput" />
  22. </view>
  23. </view>
  24. <view class="nav">
  25. <view class="item-box" v-for='(item,index) in navList' :key='index' @click="handleNav(item)">
  26. <view class="icon-img">
  27. <image :src="item.imgUrl" mode="aspectFit" class='img'></image>
  28. </view>
  29. <view class="b-txt">
  30. {{item.title}}
  31. </view>
  32. </view>
  33. </view>
  34. <view class="notice">
  35. <view class="l-img">
  36. <image :src="`${fileURL}image/newHome/tongzhi-l.png`" class='img' mode="aspectFit"></image>
  37. </view>
  38. <view class="r-info">
  39. <!-- <u-notice-bar mode="vertical" :list="state.noticeList" type="none" :volume-icon="false" :no-list-hidden='true'></u-notice-bar> -->
  40. {{state.notice}}
  41. </view>
  42. </view>
  43. <view class="supervision-con">
  44. <!-- <u-swiper :list="state.swiperListArr"></u-swiper> -->
  45. <swiper class="swiper" circular :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay"
  46. :interval="swiper.interval" :duration="swiper.duration" :easing-function="swiper.easing">
  47. <block v-if="state.swiperList.length >0" v-for="item in state.swiperList" :key="item.id">
  48. <swiper-item class="swiper-item" @click="link(item)">
  49. <image :src="fileURLList + item.imgUrl" mode="widthFix" class='img'></image>
  50. </swiper-item>
  51. </block>
  52. </swiper>
  53. <!-- <view class="txt">
  54. ETC服务监督电话
  55. </view>
  56. <view class="phone">
  57. 0851-883065555
  58. </view>
  59. <view class="btn">
  60. <text>立即拨打 ></text>
  61. </view> -->
  62. </view>
  63. <view class="title-name">
  64. 快速办理
  65. </view>
  66. <view class="express-lane">
  67. <view class="item keche">
  68. <view class="item-con" @click="showMask(1)">
  69. <view class="top-txt">
  70. 客车用户
  71. </view>
  72. <view class="btn">
  73. 进入
  74. </view>
  75. </view>
  76. </view>
  77. <view class="item huoche">
  78. <view class="item-con" @click="showMask(2)">
  79. <view class="top-txt">
  80. 货车用户
  81. </view>
  82. <view class="btn">
  83. 进入
  84. </view>
  85. </view>
  86. </view>
  87. </view>
  88. <view class="news-con">
  89. <view class="title-con">
  90. <text>高速快讯</text>
  91. <view class="r-more" @click="$util.navTo('/subpackage/orders/moreHighMsg/moreHighMsg',true)">
  92. <text class='txt'>更多</text>
  93. <image :src="`${fileURL}image/newHome/r-icon.png`" mode="aspectFit" class='icon'></image>
  94. </view>
  95. </view>
  96. <view class="news-box">
  97. <template v-if='state.highMsgData'>
  98. <view class="news-item" v-for="(item,index) in state.highMsgData" :key='index' @click="link(item)">
  99. <view class="l-img">
  100. <image :src="fileURLList + item.imgUrl" mode="aspectFill" class="img"></image>
  101. </view>
  102. <view class="r-txt">
  103. <view class="tit">
  104. {{item.title}}
  105. </view>
  106. <view class="b-time">
  107. {{item.updateTime}}
  108. </view>
  109. </view>
  110. </view>
  111. </template>
  112. <view class="empty-news" v-else>
  113. <u-empty text="暂无数据" mode="news" :icon-size='90' :font-size='24'></u-empty>
  114. </view>
  115. </view>
  116. </view>
  117. <!-- 办理流程 -->
  118. <view class="flow-path">
  119. <view class="top-menu">
  120. <view :class="item == state.tabActive ? 'tab active' : 'tab'" v-for="item in state.flowPathTabList"
  121. :key="item" @click="flowPathTabHandle(item)">
  122. <view class="txt">
  123. {{ item }}
  124. </view>
  125. <view class="border">
  126. </view>
  127. </view>
  128. </view>
  129. <view v-if="state.tabActive === '办理流程'">
  130. <view class="flow-list">
  131. <flow-path-list :options="state.flowList"></flow-path-list>
  132. </view>
  133. </view>
  134. <view v-else-if="state.tabActive === '办理条件'">
  135. <view class="flow-list tiaojian">
  136. <view class="title-top">
  137. <image :src="`${fileURL}image/newHome/tiaojian.png`" mode="scaleToFill" class="icon-img"></image>
  138. <view class="txt">
  139. 基本条件
  140. </view>
  141. <image :src="`${fileURL}image/newHome/tiaojianr.png`" mode="scaleToFill" class="icon-img"></image>
  142. </view>
  143. <view class="list-info"> {{state.processeConditionText}} </view>
  144. </view>
  145. </view>
  146. <view v-else-if="state.tabActive === '常见问题'">
  147. <view class="flow-list wenti">
  148. <view class="item-box" v-for='(item,index) in state.commonQuestionArr' :key='index'>
  149. <view class="l-icon">
  150. <image :src="`${fileURL}image/newHome/wenhao.png`" mode="scaleToFill" class="icon-img"></image>
  151. </view>
  152. <view class="txt">
  153. {{item}}
  154. </view>
  155. </view>
  156. <!-- <view class="list-info"> {{state.commonQuestionText}} </view> -->
  157. </view>
  158. </view>
  159. </view>
  160. </view>
  161. </view>
  162. <!-- ETC选择弹窗 -->
  163. <view class="mask" v-if="isShowMask">
  164. <view class="mask-content">
  165. <filter>
  166. <view class="mask-close">
  167. <image :src="fileURL + 'image/index/icon-close.png'" class="icon-closed" @click="closeMask"></image>
  168. </view>
  169. <view class="mask-title" :style="{ '--color': color }">选择ETC用户类型</view>
  170. <view class="mask-tab">
  171. <view class="tab-item active" @click="toCreatOrder('1')">
  172. <image :src="fileURL + 'image/index/icon-personal.png'" mode="aspectFill"></image>
  173. <text class="tab-tit on">个人办理</text>
  174. </view>
  175. <view class="tab-item" @click="toCreatOrder('2')">
  176. <image :src="fileURL + 'image/index/icon-unit.png'" mode="aspectFill"></image>
  177. <text class="tab-tit on">单位办理</text>
  178. </view>
  179. </view>
  180. </filter>
  181. </view>
  182. </view>
  183. </template>
  184. <script setup lang="ts">
  185. import {
  186. onMounted,
  187. ref, reactive
  188. } from "vue";
  189. import {
  190. onPageScroll,
  191. onLoad, onReachBottom, onReady
  192. } from "@dcloudio/uni-app";
  193. import flowPathList from "./components/flow-path-list.vue";
  194. import filter from '@/components/filter/filter.vue';
  195. import {
  196. request
  197. } from "@/utils/network/request.js";
  198. import {
  199. stringToJson
  200. } from "@/utils/network/encryption.js";
  201. import {
  202. useUserStore
  203. } from "@/stores/user";
  204. import {
  205. getItem,
  206. setItem,
  207. StorageKeys
  208. } from "@/utils/storage";
  209. import {
  210. queryKey,
  211. querySwiper,
  212. envs,
  213. infoQuery,
  214. queryHighMsg,
  215. orderList
  216. } from "@/utils/network/api.js";
  217. import {
  218. fileURL, fileURLList
  219. } from "@/datas/fileURL.js";
  220. import {
  221. navTo,
  222. msg,
  223. noticeUser
  224. } from "@/utils/utils";
  225. import {
  226. getCodeName
  227. } from "@/datas/queryKey.js";
  228. // import { jump } from "@/datas/9901Jump.js";
  229. // import navBar from "@/components/nav-bar/nav-bar2.vue";
  230. import { getCurrentInstance } from 'vue';
  231. const tools = require("../../static/etcUtil/tools.js");
  232. const instance = getCurrentInstance();
  233. const swiper = reactive({
  234. indicatorDots: false,
  235. autoplay: true,
  236. interval: 6000,
  237. duration: 3000,
  238. easing: "easeInOutCubic"
  239. })
  240. onLoad((options) => {
  241. console.log("wechatSignNo", options)
  242. getInfo();
  243. })
  244. onMounted(() => {
  245. const query = uni.createSelectorQuery().in(instance.proxy);
  246. query
  247. .select(".news-con")
  248. .boundingClientRect((data) => {
  249. console.log("得到布局位置信息", data);
  250. console.log("节点离页面顶部的距离为" + data.top);
  251. newTop.value = data.top
  252. })
  253. .exec();
  254. let systemInfo = uni.getSystemInfoSync()
  255. viewHeight.value = systemInfo.windowHeight
  256. statusBarHeight.value = systemInfo.statusBarHeight;
  257. const {
  258. top,
  259. height
  260. } = uni.getMenuButtonBoundingClientRect();
  261. barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
  262. console.log(barHeight.value, statusBarHeight.value, systemInfo, '计算的顶部高度');
  263. getSwiper()
  264. })
  265. const statusBarHeight = ref(0)
  266. const viewHeight = ref(0) //可视区高度
  267. const barHeight = ref(0)
  268. const searchParams = ref('')
  269. const newTop = ref(0) //高速快讯距离顶部距离
  270. const isShowMask = ref(false);
  271. //搜索
  272. const onKeyInput = (event) => {
  273. searchParams.value = event.target.value;
  274. console.log('搜索内容', searchParams.value);
  275. }
  276. const navList = [{
  277. imgUrl: `${fileURL}image/newHome/kaqian.png`,
  278. title: "卡签信息查询",
  279. path: '/pages/bluetooth/bluetooth?routeType=4'
  280. }, {
  281. imgUrl: `${fileURL}image/newHome/jihuo.png`,
  282. title: "激活服务",
  283. path: '/subpackage/personal-center/install-activation-order'
  284. }, {
  285. imgUrl: `${fileURL}image/newHome/zhuxiao.png`,
  286. title: "设备注销",
  287. path: "",
  288. handlePath: () => {
  289. cardRecharge(3)
  290. }
  291. }, {
  292. imgUrl: `${fileURL}image/newHome/shenji.png`,
  293. title: "设备升级",
  294. path: `/subpackage/after-sale/equipment-upgrade/select-car`
  295. }, {
  296. imgUrl: `${fileURL}image/newHome/kefu.png`,
  297. title: "在线客服",
  298. path: `/subpackage/after-sale/onlineService`
  299. }, {
  300. imgUrl: `${fileURL}image/newHome/wangdian.png`,
  301. title: "网点查询",
  302. path: ""
  303. }, {
  304. imgUrl: `${fileURL}image/newHome/yewu.png`,
  305. title: "业务指引",
  306. path: ""
  307. }, {
  308. imgUrl: `${fileURL}image/newHome/more.png`,
  309. title: "更多",
  310. path: `/pages/service/service`
  311. }]
  312. const handleNav = (item) => {
  313. if (item.path) {
  314. navTo(item.path, true)
  315. } else if (item.handlePath) {
  316. item.handlePath()
  317. }
  318. }
  319. const cardRecharge = (val) => {
  320. // #ifdef MP-ALIPAY
  321. if (val == 1 || val == 2 || val == 3) {
  322. msg("业务升级中,请前往九州ETC公众号进行办理。或拨打客服电话400-800-8787")
  323. }
  324. // #endif
  325. // #ifdef MP-WEIXIN
  326. if (val == 1) {
  327. navTo('/pages/recharge/recharge-pay', true)
  328. } else if (val == 2) {
  329. navTo('/subpackage/after-sale/rescind-carId/rescind-carId-select', true)
  330. } else if (val == 3) {
  331. navTo('/subpackage/after-sale/activation-once-again/select-car?type=2', true)
  332. }
  333. // #endif
  334. }
  335. const state = reactive({
  336. vanType: 0, //1客车 2货车
  337. userType: 1, //1个人 2单位
  338. notice: "",
  339. swiperList: [],
  340. swiperListArr: [],
  341. noticeList: [], //公告栏列表
  342. flowPathTabList: ["办理流程", "办理条件", "常见问题"],
  343. tabActive: "办理流程",
  344. flowList: [
  345. //办理流程数据
  346. {
  347. title: "01 产品选择",
  348. desc: "选择购买的发行产品",
  349. imgUrl: `${fileURL}image/newHome/1.png`,
  350. },
  351. {
  352. title: "02 信息校验",
  353. desc: "提交车牌号、车牌颜色、收货地址相关信息",
  354. imgUrl: `${fileURL}image/newHome/2.png`,
  355. },
  356. {
  357. title: "03 证件上传",
  358. desc: "上传身份证、行驶证等相关信息",
  359. imgUrl: `${fileURL}image/newHome/3.png`,
  360. },
  361. {
  362. title: "04 订单支付",
  363. desc: "支付完成订单",
  364. imgUrl: `${fileURL}image/newHome/4.png`,
  365. },
  366. {
  367. title: "05 签约代扣",
  368. desc: "选择签约账户并关联",
  369. imgUrl: `${fileURL}image/newHome/5.png`,
  370. },
  371. ],
  372. highMsgData: '',//高速快讯内容
  373. processeConditionText: "", //办理条件文本
  374. commonQuestionText: "", //常见问题文本
  375. commonQuestionArr: [], //常见问题数组
  376. isEnableSetGray: false
  377. });
  378. // 页面初次渲染完成时触发
  379. onReady(() => {
  380. setTimeout(() => {
  381. quanKeyAction()
  382. }, 5000)
  383. })
  384. onMounted(() => {
  385. uni.getSystemInfo({
  386. success: (e : any) => {
  387. statusBarHeight.value = e.statusBarHeight;
  388. }
  389. })
  390. getSwiper()
  391. });
  392. onReachBottom(() => {
  393. highMsg(); //高速快讯
  394. })
  395. // const tip = () => {
  396. // const params = encodeURIComponent(JSON.stringify("https://webzeus.hltgz.com/throughBilManager/index"))
  397. // tools.toUrl(`/subpackage/personal-center/webview?url=` + params);
  398. // }
  399. //办理流程tab选择
  400. const flowPathTabHandle = (tab) => {
  401. state.tabActive = tab;
  402. if (tab == "办理条件") {
  403. processeCondition();//办理条件
  404. } else if (tab == "常见问题") {
  405. commonQuestion();
  406. }
  407. };
  408. const showMask = (val : any) => {
  409. state.vanType = val; //1 客车 2货车
  410. isShowMask.value = true;
  411. };
  412. const closeMask = () => {
  413. isShowMask.value = false;
  414. };
  415. // 获取文本信息----用户协议
  416. const getInfo = () => {
  417. //参数说明
  418. let options = {
  419. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  420. data: {
  421. businessType: 'BROADCAST' //广播栏信息
  422. }, //请求参数
  423. method: "POST", //提交方式(默认POST)
  424. showLoading: true, //是否显示加载中(默认显示)
  425. };
  426. //调用方式
  427. request(infoQuery, options)
  428. .then((res) => {
  429. let data = stringToJson(res.bizContent)
  430. state.notice = data.text
  431. state.noticeList = [data.text || '暂无公告', '平明送客楚山孤',]
  432. console.log(data, state.noticeList, '公告');
  433. })
  434. .catch((err) => {
  435. console.log(err, '错误');
  436. });
  437. }
  438. let newLock = false
  439. // 高速快讯查询接口
  440. const highMsg = () => {
  441. newLock = true
  442. let options = {
  443. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  444. data: {
  445. pageNo: 1,
  446. pageSize: 2
  447. }, //请求参数
  448. method: "POST", //提交方式(默认POST)
  449. showLoading: true, //是否显示加载中(默认显示)
  450. };
  451. //调用方式
  452. request(queryHighMsg, options).then((res) => {
  453. console.log("高速快讯查询接口", stringToJson(res.bizContent));
  454. state.highMsgData = stringToJson(res.bizContent).data.slice(0, 4)
  455. for (var i = 0; i < state.highMsgData.length; i++) {
  456. state.highMsgData[i]["copywriting"] = getCodeName('COPYWRITING', state.highMsgData[i]["copywriting"])
  457. state.highMsgData[i]["updateTime"] = state.highMsgData[i]["updateTime"].replace('T', ' ')
  458. if (state.highMsgData[i]["type"] == 3) {
  459. state.highMsgData[i]["title"] = state.highMsgData[i]["hyperLink"]
  460. }
  461. }
  462. state.highMsgData.sort(function (a, b) {
  463. return a.sequence - b.sequence//正序
  464. })
  465. }).catch((err) => { console.log(err) });
  466. }
  467. const processeCondition = () => {
  468. let options = {
  469. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  470. data: {
  471. businessType: 'PROCESSING_CONDITIONS' //办理条件
  472. }, //请求参数
  473. method: "POST", //提交方式(默认POST)
  474. showLoading: true, //是否显示加载中(默认显示)
  475. };
  476. //调用方式
  477. request(infoQuery, options)
  478. .then((res) => {
  479. let data = stringToJson(res.bizContent)
  480. console.log("办理条件", data)
  481. state.processeConditionText = data.text
  482. })
  483. .catch((err) => {
  484. console.log(err);
  485. });
  486. }
  487. const commonQuestion = () => {
  488. let options = {
  489. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  490. data: {
  491. businessType: 'COMMON_PROBLEM' //常见问题
  492. }, //请求参数
  493. method: "POST", //提交方式(默认POST)
  494. showLoading: true, //是否显示加载中(默认显示)
  495. };
  496. //调用方式
  497. request(infoQuery, options)
  498. .then((res) => {
  499. let data = stringToJson(res.bizContent)
  500. console.log("常见问题", data)
  501. state.commonQuestionText = data.text
  502. state.commonQuestionArr = data.text.split('。').filter(item => item)
  503. })
  504. .catch((err) => {
  505. console.log(err);
  506. });
  507. }
  508. //监听页面滚动
  509. onPageScroll((e) => {
  510. let h = viewHeight.value + e.scrollTop
  511. if (h >= newTop.value - 50 && !newLock) {
  512. highMsg()
  513. }
  514. });
  515. const toCreatOrder = (val : number) => {
  516. console.log(typeof (val));
  517. state.userType = val;
  518. navTo(`/subpackage/orders/choice-product?vanType=${state.vanType}&&userType=${state.userType}`)
  519. closeMask();
  520. };
  521. //全量枚举值查询
  522. const quanKeyAction = () => {
  523. var data = {};
  524. const options = {
  525. type: 2,
  526. data: data,
  527. method: "POST",
  528. showLoading: true,
  529. };
  530. request(queryKey, options).then((res) => {
  531. console.log(stringToJson(res.bizContent));
  532. const data = stringToJson(res.bizContent)
  533. console.log("枚举", data)
  534. setItem('key', data.dictTypeAndItem)
  535. })
  536. .catch((err) => {
  537. console.log(err);
  538. });
  539. }
  540. //获取轮播
  541. const getSwiper = () => {
  542. let options = {
  543. type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
  544. data: {
  545. }, //请求参数
  546. method: "POST", //提交方式(默认POST)
  547. showLoading: true, //是否显示加载中(默认显示)
  548. };
  549. //调用方式
  550. request(querySwiper, options).then((res) => {
  551. console.log(stringToJson(res.bizContent));
  552. const data = stringToJson(res.bizContent)
  553. console.log("轮播图", data)
  554. state.swiperList = data.swipers ? data.swipers : [],
  555. state.swiperListArr = state.swiperList.map(item => fileURLList + item.imgUrl)
  556. })
  557. .catch((err) => {
  558. console.log(err);
  559. });
  560. };
  561. const link = (item : any) => {
  562. console.log(item);
  563. if (item.type == 1) {
  564. const params = encodeURIComponent(JSON.stringify(item.hyperLink))
  565. tools.toUrl(`/subpackage/personal-center/webview?url=` + params);
  566. } else if (item.type == 2) {
  567. navTo(item.hyperLink)
  568. } else if (item.type == 3) {
  569. const param = encodeURIComponent(JSON.stringify(item))
  570. tools.toUrl(`/subpackage/orders/moreHighMsg/textDetails?item=` + param);
  571. } else if (item.type == 4) {
  572. uni.navigateToMiniProgram({
  573. appId: item.hyperLink,
  574. path: item.speedUrl,
  575. success(res) {
  576. console.log(res);
  577. },
  578. complete(res) {
  579. console.log(res);
  580. },
  581. fail(res) {
  582. console.log(res);
  583. // 未成功跳转到车主小程序
  584. },
  585. });
  586. }
  587. }
  588. </script>
  589. <style lang="scss" scoped>
  590. .container {
  591. height: 100%;
  592. background-color: #f2f5f7;
  593. position: relative;
  594. }
  595. .bg-img {
  596. width: 100%;
  597. position: absolute;
  598. z-index: 0;
  599. .icon {
  600. width: 100%;
  601. height: 750rpx;
  602. }
  603. }
  604. .content {
  605. position: relative;
  606. padding-bottom: 30rpx;
  607. }
  608. .header {
  609. height: 590rpx;
  610. .title {
  611. .title-txt {
  612. font-family: PingFangSC, PingFang SC;
  613. font-weight: bold;
  614. font-size: 32rpx;
  615. color: #FFFFFF;
  616. text-align: center;
  617. }
  618. }
  619. .search-box {
  620. margin: 10rpx 30rpx 0;
  621. position: relative;
  622. height: 80rpx;
  623. background: #1a394d;
  624. // border: 1px solid #DCDCDC;
  625. border-radius: 40rpx;
  626. display: flex;
  627. justify-content: center;
  628. align-items: center;
  629. box-sizing: border-box;
  630. flex: 1;
  631. .icon {
  632. width: 27rpx;
  633. height: 27rpx;
  634. margin-left: 26rpx;
  635. }
  636. .search {
  637. flex: 1;
  638. margin-right: 20rpx;
  639. height: 100%;
  640. padding: 0 10rpx;
  641. color: #fff;
  642. font-weight: 500;
  643. font-size: 26rpx;
  644. background: #1a394d;
  645. }
  646. }
  647. }
  648. .nav {
  649. background-color: #fff;
  650. margin: 0 30rpx;
  651. width: 100%;
  652. width: 690rpx;
  653. height: 360rpx;
  654. background: #FFFFFF;
  655. border-radius: 12rpx;
  656. display: grid;
  657. grid-template-columns: repeat(4, 25%);
  658. grid-template-rows: repeat(2, 50%);
  659. // grid-gap: 10px;
  660. .item-box {
  661. display: flex;
  662. align-items: center;
  663. justify-content: center;
  664. flex-direction: column;
  665. .icon-img {
  666. height: 100rpx;
  667. width: 100rpx;
  668. border-radius: 50%;
  669. padding: 25rpx;
  670. background: #ECF1F4;
  671. box-sizing: border-box;
  672. .img {
  673. width: 100%;
  674. height: 100%;
  675. }
  676. }
  677. .b-txt {
  678. margin-top: 16rpx;
  679. font-size: 26rpx;
  680. color: #111111;
  681. }
  682. }
  683. }
  684. .notice {
  685. background: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/tongzhi.png);
  686. background-size: 100% 100%;
  687. background-repeat: no-repeat;
  688. height: 80rpx;
  689. width: 690rpx;
  690. margin: 24rpx 30rpx 0;
  691. display: flex;
  692. align-items: center;
  693. .l-img {
  694. width: 136rpx;
  695. height: 80rpx;
  696. margin-left: 20rpx;
  697. .img {
  698. height: 100%;
  699. width: 100%;
  700. }
  701. }
  702. .r-info {
  703. margin-left: 16rpx;
  704. font-size: 28rpx;
  705. color: #000;
  706. font-weight: 500;
  707. }
  708. }
  709. .supervision-con {
  710. box-sizing: border-box;
  711. height: 180rpx;
  712. width: 690rpx;
  713. margin: 24rpx 30rpx 0;
  714. // background-image: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/phone.png);
  715. // background-size: 100% 100%;
  716. // background-repeat: no-repeat;
  717. // padding: 35rpx 0 0 52rpx;
  718. // background: #FFFFFF;
  719. border-radius: 12rpx;
  720. overflow: hidden;
  721. .swiper {
  722. height: 180rpx;
  723. width: 690rpx;
  724. }
  725. .swiper-item .img {
  726. overflow: hidden;
  727. border-radius: 12rpx;
  728. height: 180rpx !important;
  729. width: 690rpx;
  730. }
  731. .txt {
  732. font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  733. font-weight: 400;
  734. font-size: 26rpx;
  735. color: #111111;
  736. }
  737. .phone {
  738. margin: 10rpx 0 10rpx;
  739. font-family: Arial, Arial;
  740. font-weight: normal;
  741. font-size: 38rpx;
  742. color: #B99A46;
  743. }
  744. .btn {
  745. font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  746. font-weight: 400;
  747. font-size: 24rpx;
  748. color: #01243A;
  749. }
  750. }
  751. .title-name {
  752. margin: 24rpx 30rpx 0;
  753. }
  754. .express-lane {
  755. margin: 22rpx 30rpx 0;
  756. display: flex;
  757. align-items: center;
  758. justify-content: space-between;
  759. .item {
  760. background-size: 100% 100%;
  761. background-repeat: no-repeat;
  762. width: 334rpx;
  763. height: 168rpx;
  764. text-align: right;
  765. display: flex;
  766. align-items: flex-end;
  767. justify-content: center;
  768. flex-direction: column;
  769. .item-con {
  770. margin-right: 53rpx;
  771. }
  772. .top-txt {
  773. font-family: PingFangSC, PingFang SC;
  774. font-size: 30rpx;
  775. color: #FFFFFF;
  776. }
  777. .btn {
  778. margin-top: 30rpx;
  779. background: #03385D;
  780. border-radius: 20rpx;
  781. font-family: PingFangSC, PingFang SC;
  782. font-size: 24rpx;
  783. color: #FFFFFF;
  784. height: 40rpx;
  785. width: 80rpx;
  786. line-height: 40rpx;
  787. text-align: center;
  788. }
  789. }
  790. .keche {
  791. background-image: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/keche.png);
  792. }
  793. .huoche {
  794. margin-left: 22rpx;
  795. background-image: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/huoche.png);
  796. }
  797. }
  798. .news-con {
  799. margin: 39rpx 30rpx 0;
  800. .title-con {
  801. font-family: PingFangSC, PingFang SC;
  802. font-size: 34rpx;
  803. color: #01243A;
  804. display: flex;
  805. align-items: center;
  806. justify-content: space-between;
  807. .r-more {
  808. width: 100rpx;
  809. height: 44rpx;
  810. border-radius: 22rpx;
  811. border: 1rpx solid #01243A;
  812. display: flex;
  813. align-items: center;
  814. justify-content: center;
  815. .txt {
  816. font-family: PingFangSC, PingFang SC;
  817. font-weight: bold;
  818. font-size: 24rpx;
  819. color: #01243A;
  820. }
  821. .icon {
  822. width: 10rpx;
  823. height: 100%;
  824. margin-left: 5rpx;
  825. }
  826. }
  827. }
  828. .empty-news {}
  829. .news-box {
  830. border-radius: 12rpx;
  831. background-color: #fff;
  832. margin-top: 22rpx;
  833. padding: 0 20rpx;
  834. .news-item {
  835. padding: 20rpx 0;
  836. display: flex;
  837. &:nth-child(n+2) {
  838. border-top: 1rpx solid #eee;
  839. }
  840. .l-img {
  841. width: 180rpx;
  842. height: 135rpx;
  843. .img {
  844. height: 100%;
  845. width: 100%;
  846. }
  847. }
  848. .r-txt {
  849. margin-left: 20rpx;
  850. display: flex;
  851. flex-direction: column;
  852. justify-content: space-between;
  853. .tit {
  854. font-family: PingFangSC, PingFang SC;
  855. font-weight: bold;
  856. font-size: 30rpx;
  857. color: #111111;
  858. }
  859. .b-time {
  860. font-family: PingFangSC, PingFang SC;
  861. font-size: 24rpx;
  862. color: #999999;
  863. }
  864. }
  865. }
  866. }
  867. }
  868. .flow-path {
  869. margin: 31rpx 30rpx 0;
  870. .top-menu {
  871. display: flex;
  872. .tab {
  873. font-family: MicrosoftYaHeiUI;
  874. font-size: 28rpx;
  875. color: #5A5E61;
  876. margin-right: 39rpx;
  877. position: relative;
  878. &.active {
  879. font-size: 34rpx;
  880. color: #01243A;
  881. .border {
  882. position: relative;
  883. }
  884. .border::after {
  885. content: "";
  886. background-image: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/bottom-select.png);
  887. background-repeat: no-repeat;
  888. background-size: 100% 100%;
  889. position: absolute;
  890. bottom: 0;
  891. left: 0;
  892. width: 100%;
  893. height: 16rpx;
  894. }
  895. }
  896. .txt {
  897. position: relative;
  898. z-index: 2;
  899. }
  900. }
  901. }
  902. .flow-list {
  903. margin-top: 30rpx;
  904. background-color: #fff;
  905. border-radius: 12rpx;
  906. padding: 20rpx;
  907. }
  908. .tiaojian {
  909. .title-top {
  910. display: flex;
  911. justify-content: center;
  912. align-items: center;
  913. padding-bottom: 20rpx;
  914. .txt {
  915. margin: 0 24rpx;
  916. font-family: MicrosoftYaHei;
  917. font-size: 30rpx;
  918. color: #01243A;
  919. }
  920. .icon-img {
  921. width: 16rpx;
  922. height: 20rpx;
  923. }
  924. }
  925. }
  926. .list-info {
  927. font-family: MicrosoftYaHeiUI;
  928. font-size: 26rpx;
  929. color: #222222;
  930. }
  931. .wenti {
  932. .item-box:nth-child(n+2) {
  933. border-top: 1rpx solid #E8E8E8;
  934. }
  935. .item-box {
  936. display: flex;
  937. padding: 15rpx 0;
  938. }
  939. .l-icon {
  940. flex-shrink: 0;
  941. width: 38rpx;
  942. height: 38rpx;
  943. display: flex;
  944. align-items: center;
  945. justify-content: center;
  946. background-color: #c2a75f;
  947. border-radius: 50%;
  948. .icon-img {
  949. width: 14rpx;
  950. height: 24rpx;
  951. }
  952. }
  953. .txt {
  954. margin-left: 10rpx;
  955. font-family: PingFangSC, PingFang SC;
  956. font-size: 28rpx;
  957. color: #222222;
  958. }
  959. }
  960. }
  961. .mask {
  962. background: $uni-bg-color-mask;
  963. position: fixed;
  964. left: 0;
  965. top: 0;
  966. right: 0;
  967. bottom: 0;
  968. }
  969. .mask-content {
  970. background: $uni-bg-color;
  971. width: 570rpx;
  972. height: 480rpx;
  973. position: absolute;
  974. left: 50%;
  975. top: 50%;
  976. transform: translate(-50%, -50%);
  977. display: flex;
  978. flex-direction: column;
  979. border-radius: 20rpx;
  980. }
  981. .mask-close {
  982. text-align: right;
  983. }
  984. .mask-title {
  985. text-align: center;
  986. font-size: 32rpx;
  987. color: $uni-text-color-black;
  988. margin-bottom: 50rpx;
  989. }
  990. .mask-tab {
  991. display: flex;
  992. justify-content: space-evenly;
  993. }
  994. .icon-closed {
  995. width: 48rpx;
  996. height: 48rpx;
  997. margin: 24rpx 24rpx 0 0;
  998. }
  999. .tab-item {
  1000. display: flex;
  1001. flex-direction: column;
  1002. justify-content: center;
  1003. align-items: center;
  1004. }
  1005. .tab-tit {
  1006. font-size: 32rpx;
  1007. margin-top: 20rpx;
  1008. color: #666;
  1009. }
  1010. .tab-item image {
  1011. width: 160rpx;
  1012. height: 160rpx;
  1013. }
  1014. .backlog-notice {
  1015. margin: 50rpx 30rpx 0rpx;
  1016. }
  1017. </style>