1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021 |
- <template>
- <view class='container'>
- <view class="bg-img">
- <image :src="`${fileURL}image/newHome/header.png`" mode="scaleToFill" class="icon"></image>
- </view>
- <view class="content">
- <view class="header">
- <view class="title">
- <view :style="{ height: `${statusBarHeight}px` }"></view>
- <!-- 自定义导航栏高度 -->
- <view class='title-txt' :style="{
- height: `${barHeight}px`,
- 'line-height': `${barHeight}px`
- }">
- <text>首页</text>
- </view>
- </view>
- <view class="search-box">
- <image :src="`${fileURL}image/newHome/search.png`" class="icon" mode="aspectFill"></image>
- <input class="search" placeholder="办业务·搜一搜" @input="onKeyInput" />
- </view>
- </view>
-
- <view class="nav">
- <view class="item-box" v-for='item in navList' @click="handleNav(item)">
- <view class="icon-img">
- <image :src="item.imgUrl" mode="aspectFit" class='img'></image>
- </view>
- <view class="b-txt">
- {{item.title}}
- </view>
- </view>
- </view>
-
-
- <view class="notice">
- <view class="l-img">
- <image :src="`${fileURL}image/newHome/tongzhi-l.png`" class='img' mode="aspectFit"></image>
- </view>
- <view class="r-info">
- 如何授权登录小程序?
- </view>
- </view>
-
- <view class="supervision-con">
- <view class="txt">
- ETC服务监督电话
- </view>
- <view class="phone">
- 0851-883065555
- </view>
- <view class="btn">
- <text>立即拨打 ></text>
- </view>
- </view>
-
- <view class="title-name">
- 快速办理
- </view>
- <view class="express-lane">
- <view class="item keche">
- <view class="item-con">
- <view class="top-txt">
- 客车用户
- </view>
- <view class="btn">
- 进入
- </view>
- </view>
- </view>
- <view class="item huoche">
- <view class="item-con">
- <view class="top-txt">
- 货车用户
- </view>
- <view class="btn">
- 进入
- </view>
- </view>
- </view>
- </view>
-
-
- <view class="news-con">
- <view class="title-con">
- <text>高速快讯</text>
- <view class="r-more">
- <text class='txt'>更多</text>
- <image :src="`${fileURL}image/newHome/r-icon.png`" mode="aspectFit" class='icon'></image>
- </view>
- </view>
- <view class="news-box">
- <view class="news-item">
- <view class="l-img">
- <image :src="`${fileURL}image/newHome/图层 5.png`" mode="aspectFill" class="img"></image>
- </view>
- <view class="r-txt">
- <view class="tit">
- 后装ETC与选装ETC的介绍
- </view>
- <view class="b-time">
- 2024-09-22
- </view>
- </view>
- </view>
- <view class="news-item">
- <view class="l-img">
- <image :src="`${fileURL}image/newHome/图层 5.png`" mode="aspectFill" class="img"></image>
- </view>
- <view class="r-txt">
- <view class="tit">
- 后装ETC与选装ETC的介绍
- </view>
- <view class="b-time">
- 2024-09-22
- </view>
- </view>
- </view>
- <view class="news-item">
- <view class="l-img">
- <image :src="`${fileURL}image/newHome/图层 5.png`" mode="aspectFill" class="img"></image>
- </view>
- <view class="r-txt">
- <view class="tit">
- 后装ETC与选装ETC的介绍
- </view>
- <view class="b-time">
- 2024-09-22
- </view>
- </view>
- </view>
- </view>
- </view>
-
- <!-- 办理流程 -->
- <view class="flow-path">
- <view class="top-menu">
- <view :class="item == state.tabActive ? 'tab active' : 'tab'" v-for="item in state.flowPathTabList"
- :key="item" @click="flowPathTabHandle(item)">
- <view class="txt">
- {{ item }}
- </view>
- <view class="border">
- </view>
- </view>
- </view>
-
- <view v-if="state.tabActive === '办理流程'">
- <view class="flow-list">
- <flow-path-list :options="state.flowList"></flow-path-list>
- </view>
- </view>
-
- <view v-else-if="state.tabActive === '办理条件'">
- <view class="flow-list tiaojian">
- <view class="title-top">
- <image :src="`${fileURL}image/newHome/tiaojian.png`" mode="scaleToFill" class="icon-img"></image>
- <view class="txt">
- 基本条件
- </view>
- <image :src="`${fileURL}image/newHome/tiaojianr.png`" mode="scaleToFill" class="icon-img"></image>
- </view>
- <view class="list-info"> {{state.processeConditionText}} </view>
- </view>
- </view>
- <view v-else-if="state.tabActive === '常见问题'">
- <view class="flow-list wenti">
- <view class="item-box" v-for='item in state.commonQuestionArr'>
- <view class="l-icon">
- <image :src="`${fileURL}image/newHome/wenhao.png`" mode="scaleToFill" class="icon-img"></image>
- </view>
- <view class="txt">
- {{item}}
- </view>
- </view>
- <!-- <view class="list-info"> {{state.commonQuestionText}} </view> -->
- </view>
- </view>
- </view>
- </view>
-
-
- </view>
- </template>
- <script setup lang="ts">
- import {
- onMounted,
- ref, reactive
- } from "vue";
- import {
- onPageScroll,
- onLoad, onReachBottom, onReady
- } from "@dcloudio/uni-app";
- import flowPathList from "./components/flow-path-list.vue";
- import filter from '@/components/filter/filter.vue';
- import {
- request
- } from "@/utils/network/request.js";
- import {
- stringToJson
- } from "@/utils/network/encryption.js";
- import {
- useUserStore
- } from "@/stores/user";
- import {
- getItem,
- setItem,
- StorageKeys
- } from "@/utils/storage";
- import {
- queryKey,
- querySwiper,
- envs,
- infoQuery,
- queryHighMsg,
- orderList
- } from "@/utils/network/api.js";
-
- import {
- fileURL, fileURLList
- } from "@/datas/fileURL.js";
- import {
- navTo,
- msg,
- noticeUser
- } from "@/utils/utils";
- import {
- getCodeName
- } from "@/datas/queryKey.js";
- // import { jump } from "@/datas/9901Jump.js";
- import navBar from "@/components/nav-bar/nav-bar2.vue";
- onLoad((options) => {
- console.log("wechatSignNo", options)
- getInfo();
- })
- onMounted(() => {
- statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
- const {
- top,
- height
- } = uni.getMenuButtonBoundingClientRect();
- barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
- console.log(barHeight.value, statusBarHeight.value, '计算的顶部高度');
- })
- const statusBarHeight = ref(0)
- const barHeight = ref(0)
- const searchParams = ref('')
- //搜索
- const onKeyInput = (event) => {
- searchParams.value = event.target.value;
- console.log('搜索内容', searchParams.value);
- }
- const navList = [{
- imgUrl: `${fileURL}image/newHome/kaqian.png`,
- title: "卡签信息查询",
- path: '/pages/bluetooth/bluetooth?routeType=4'
- }, {
- imgUrl: `${fileURL}image/newHome/jihuo.png`,
- title: "激活服务",
- path: '/subpackage/personal-center/install-activation-order'
- }, {
- imgUrl: `${fileURL}image/newHome/zhuxiao.png`,
- title: "设备注销",
- path: "",
- handlePath: () => {
- cardRecharge(3)
- }
- }, {
- imgUrl: `${fileURL}image/newHome/shenji.png`,
- title: "设备升级",
- path: `/subpackage/after-sale/equipment-upgrade/select-car`
- }, {
- imgUrl: `${fileURL}image/newHome/kefu.png`,
- title: "在线客服",
- path: `/subpackage/after-sale/onlineService`
- }, {
- imgUrl: `${fileURL}image/newHome/wangdian.png`,
- title: "网点查询",
- path: ""
- }, {
- imgUrl: `${fileURL}image/newHome/yewu.png`,
- title: "业务指引",
- path: ""
- }, {
- imgUrl: `${fileURL}image/newHome/more.png`,
- title: "更多",
- path: `/pages/service/service`
- }]
- const handleNav = (item) => {
- if (item.path) {
- navTo(item.path, true)
- } else if (item.handlePath) {
- item.handlePath()
- }
- }
- const cardRecharge = (val) => {
- // #ifdef MP-ALIPAY
- if (val == 1 || val == 2 || val == 3) {
- msg("业务升级中,请前往九州ETC公众号进行办理。或拨打客服电话400-800-8787")
- }
- // #endif
-
- // #ifdef MP-WEIXIN
- if (val == 1) {
- navTo('/pages/recharge/recharge-pay', true)
- } else if (val == 2) {
- navTo('/subpackage/after-sale/rescind-carId/rescind-carId-select', true)
- } else if (val == 3) {
- navTo('/subpackage/after-sale/activation-once-again/select-car?type=2', true)
- }
- // #endif
- }
- const state = reactive({
- type: 0, //1客车 2货车
- userType: 1, //1个人 2单位
- notice: "",
- swiperList: [],
- noticeList: [], //公告栏列表
- flowPathTabList: ["办理流程", "办理条件", "常见问题"],
- tabActive: "办理流程",
- flowList: [
- //办理流程数据
- {
- title: "01 产品选择",
- desc: "选择购买的发行产品",
- imgUrl: `${fileURL}image/newHome/1.png`,
- },
- {
- title: "02 信息校验",
- desc: "提交车牌号、车牌颜色、收货地址相关信息",
- imgUrl: `${fileURL}image/newHome/2.png`,
- },
- {
- title: "03 证件上传",
- desc: "上传身份证、行驶证等相关信息",
- imgUrl: `${fileURL}image/newHome/3.png`,
- },
- {
- title: "04 订单支付",
- desc: "支付完成订单",
- imgUrl: `${fileURL}image/newHome/4.png`,
- },
- {
- title: "05 签约代扣",
- desc: "选择签约账户并关联",
- imgUrl: `${fileURL}image/newHome/5.png`,
- },
- ],
- highMsgData: '',//高速快讯内容
- processeConditionText: "", //办理条件文本
- commonQuestionText: "", //常见问题文本
- commonQuestionArr: [], //常见问题数组
- isEnableSetGray: false
- });
- const isShowMask = ref(false);
- const isShowBar = ref(false)
- const userStore = useUserStore();
- const type = 0;
- const title = ref("我是测试");
- const scrollTop = ref("");
-
-
- //监听页面滚动
- onPageScroll((e) => {
- if (e.scrollTop > statusBarHeight.value) {
- isShowBar.value = true;
- } else {
- isShowBar.value = false;
- }
- scrollTop.value = e.scrollTop;
- });
- // 页面初次渲染完成时触发
- onReady(()=>{
- setTimeout(()=>{
- quanKeyAction()
- },5000)
- })
- // 页面初次渲染完成时触发
- onReady(()=>{
- setTimeout(()=>{
- quanKeyAction()
- },5000)
- })
-
- onMounted(() => {
- uni.getSystemInfo({
- success: (e : any) => {
- statusBarHeight.value = e.statusBarHeight;
- }
- })
- getSwiper()
- });
- onReachBottom(() => {
- highMsg(); //高速快讯
- })
- // const tip = () => {
- // const params = encodeURIComponent(JSON.stringify("https://webzeus.hltgz.com/throughBilManager/index"))
- // tools.toUrl(`/subpackage/personal-center/webview?url=` + params);
- // }
- //获取轮播
- const getSwiper = () => {
-
- let options = {
- type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
- data: {
- }, //请求参数
- method: "POST", //提交方式(默认POST)
- showLoading: true, //是否显示加载中(默认显示)
- };
-
- //调用方式
- request(querySwiper, options).then((res) => {
- console.log(stringToJson(res.bizContent));
- const data = stringToJson(res.bizContent)
- console.log("轮播图", data)
- state.swiperList = data.swipers ? data.swipers : []
- })
- .catch((err) => {
- console.log(err);
- });
-
- };
- //办理流程tab选择
- const flowPathTabHandle = (tab) => {
- state.tabActive = tab;
- if (tab == "办理条件") {
- processeCondition();//办理条件
- } else if (tab == "常见问题") {
- commonQuestion();
- }
- };
- // //全量枚举值查询
- const quanKeyAction = () => {
- var data = {};
- const options = {
- type: 2,
- data: data,
- method: "POST",
- showLoading: true,
- };
- request(queryKey, options).then((res) => {
- console.log(stringToJson(res.bizContent));
- const data = stringToJson(res.bizContent)
- console.log("轮播图", data)
- setItem('key', data.dictTypeAndItem)
- })
- .catch((err) => {
- console.log(err);
- });
- }
-
-
- const toCreatOrder = (val : number) => {
- console.log(typeof (val));
- state.userType = val;
- navTo(`/subpackage/orders/choice-product?type=${state.type}&&userType=${state.userType}`)
- closeMask();
- };
-
- const showMask = (val : any) => {
- state.type = val; //1 客车 2货车
- isShowMask.value = true;
- };
-
- const closeMask = () => {
- isShowMask.value = false;
- };
-
- // 获取文本信息----用户协议
- const getInfo = () => {
- //参数说明
- let options = {
- type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
- data: {
- businessType: 'BROADCAST' //广播栏信息
- }, //请求参数
- method: "POST", //提交方式(默认POST)
- showLoading: true, //是否显示加载中(默认显示)
- };
-
- //调用方式
- request(infoQuery, options)
- .then((res) => {
- let data = stringToJson(res.bizContent)
- console.log(data);
- state.notice = data.text
- })
- .catch((err) => {
- console.log(err);
- });
- }
- // 高速快讯查询接口
- const highMsg = () => {
- let options = {
- type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
- data: {
- pageNo: 1,
- pageSize: 2
- }, //请求参数
- method: "POST", //提交方式(默认POST)
- showLoading: true, //是否显示加载中(默认显示)
- };
-
- //调用方式
- request(queryHighMsg, options).then((res) => {
- console.log("高速快讯查询接口", stringToJson(res.bizContent));
- state.highMsgData = stringToJson(res.bizContent).data
- for (var i = 0; i < state.highMsgData.length; i++) {
- state.highMsgData[i]["copywriting"] = getCodeName('COPYWRITING', state.highMsgData[i]["copywriting"])
- if (state.highMsgData[i]["type"] == 3) {
- state.highMsgData[i]["title"] = state.highMsgData[i]["hyperLink"]
- }
- }
- state.highMsgData.sort(function (a, b) {
- return a.sequence - b.sequence//正序
- })
- }).catch((err) => { console.log(err) });
- }
- const link = (item : any) => {
- if (item.type == 1) {
- const params = encodeURIComponent(JSON.stringify(item.hyperLink))
- tools.toUrl(`/subpackage/personal-center/webview?url=` + params);
- } else if (item.type == 2) {
- navTo(item.hyperLink)
- } else if (item.type == 3) {
- const param = encodeURIComponent(JSON.stringify(item))
- tools.toUrl(`/subpackage/orders/moreHighMsg/textDetails?item=` + param);
- } else if (item.type == 4) {
- uni.navigateToMiniProgram({
- appId: item.hyperLink,
- path: item.speedUrl,
- success(res) {
- console.log(res);
- },
- complete(res) {
- console.log(res);
- },
- fail(res) {
- console.log(res);
- // 未成功跳转到车主小程序
- },
- });
- }
- }
- const processeCondition = () => {
- let options = {
- type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
- data: {
- businessType: 'PROCESSING_CONDITIONS' //办理条件
- }, //请求参数
- method: "POST", //提交方式(默认POST)
- showLoading: true, //是否显示加载中(默认显示)
- };
-
- //调用方式
- request(infoQuery, options)
- .then((res) => {
- let data = stringToJson(res.bizContent)
- console.log("办理条件", data)
- state.processeConditionText = data.text
- })
- .catch((err) => {
- console.log(err);
- });
- }
- const commonQuestion = () => {
- let options = {
- type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
- data: {
- businessType: 'COMMON_PROBLEM' //常见问题
- }, //请求参数
- method: "POST", //提交方式(默认POST)
- showLoading: true, //是否显示加载中(默认显示)
- };
-
- //调用方式
- request(infoQuery, options)
- .then((res) => {
- let data = stringToJson(res.bizContent)
- console.log("常见问题", data)
- state.commonQuestionText = data.text
- state.commonQuestionArr = data.text.split('。').filter(item => item)
- })
- .catch((err) => {
- console.log(err);
- });
- }
- //监听页面滚动
- onPageScroll((e) => {
- console.log(e.scrollTop,);
- });
- </script>
- <style lang="scss" scoped>
- .container {
- height: 100%;
- background-color: #f2f5f7;
- position: relative;
- }
-
- .bg-img {
- width: 100%;
- position: absolute;
- z-index: 0;
-
- .icon {
- width: 100%;
- height: 750rpx;
- }
- }
-
- .content {
- position: relative;
- padding-bottom: 30rpx;
- }
-
- .header {
- height: 590rpx;
-
-
-
- .title {
-
- .title-txt {
- font-family: PingFangSC, PingFang SC;
- font-weight: bold;
- font-size: 32rpx;
- color: #FFFFFF;
- text-align: center;
- }
- }
-
- .search-box {
- margin: 10rpx 30rpx 0;
- position: relative;
- height: 80rpx;
- background: #1a394d;
- // border: 1px solid #DCDCDC;
- border-radius: 40rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- box-sizing: border-box;
- flex: 1;
-
- .icon {
- width: 27rpx;
- height: 27rpx;
- margin-left: 26rpx;
- }
-
- .search {
- flex: 1;
- margin-right: 20rpx;
- height: 100%;
- padding: 0 10rpx;
- color: #fff;
- font-weight: 500;
- font-size: 26rpx;
-
- }
- }
-
-
-
- }
-
- .nav {
- background-color: #fff;
- margin: 0 30rpx;
- width: 100%;
- width: 690rpx;
- height: 360rpx;
- background: #FFFFFF;
- border-radius: 12rpx;
- display: grid;
- grid-template-columns: repeat(4, 25%);
- grid-template-rows: repeat(2, 50%);
- // grid-gap: 10px;
-
- .item-box {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
-
- .icon-img {
- height: 100rpx;
- width: 100rpx;
- border-radius: 50%;
- padding: 25rpx;
- background: #ECF1F4;
- box-sizing: border-box;
-
- .img {
- width: 100%;
- height: 100%;
- }
- }
-
- .b-txt {
- margin-top: 16rpx;
- font-size: 26rpx;
- color: #111111;
- }
- }
- }
-
- .notice {
- background: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/tongzhi.png);
- background-size: 100% 100%;
- background-repeat: no-repeat;
- height: 80rpx;
- width: 690rpx;
- margin: 24rpx 30rpx 0;
- display: flex;
- align-items: center;
-
- .l-img {
- width: 136rpx;
- height: 80rpx;
- margin-left: 20rpx;
-
- .img {
- height: 100%;
- width: 100%;
- }
- }
-
- .r-info {
- margin-left: 16rpx;
- font-size: 28rpx;
- color: #000;
- font-weight: 500;
- }
- }
-
- .supervision-con {
- box-sizing: border-box;
- height: 180rpx;
- width: 690rpx;
- margin: 24rpx 30rpx 0;
- background-image: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/phone.png);
- background-size: 100% 100%;
- background-repeat: no-repeat;
- padding: 35rpx 0 0 52rpx;
-
- .txt {
- font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
- font-weight: 400;
- font-size: 26rpx;
- color: #111111;
- }
-
- .phone {
- margin: 10rpx 0 10rpx;
- font-family: Arial, Arial;
- font-weight: normal;
- font-size: 38rpx;
- color: #B99A46;
- }
-
- .btn {
- font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
- font-weight: 400;
- font-size: 24rpx;
- color: #01243A;
- }
- }
-
- .title-name {
- margin: 24rpx 30rpx 0;
-
- }
-
- .express-lane {
- margin: 22rpx 30rpx 0;
- display: flex;
- align-items: center;
- justify-content: space-between;
-
- .item {
- background-size: 100% 100%;
- background-repeat: no-repeat;
- width: 334rpx;
- height: 168rpx;
- text-align: right;
- display: flex;
- align-items: flex-end;
- justify-content: center;
- flex-direction: column;
-
- .item-con {
- margin-right: 53rpx;
- }
-
- .top-txt {
- font-family: PingFangSC, PingFang SC;
- font-size: 30rpx;
- color: #FFFFFF;
- }
-
- .btn {
- margin-top: 30rpx;
- background: #03385D;
- border-radius: 20rpx;
- font-family: PingFangSC, PingFang SC;
- font-size: 24rpx;
- color: #FFFFFF;
- height: 40rpx;
- width: 80rpx;
- line-height: 40rpx;
- text-align: center;
- }
- }
-
- .keche {
- background-image: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/keche.png);
- }
-
- .huoche {
- margin-left: 22rpx;
- background-image: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/huoche.png);
- }
- }
-
- .news-con {
- margin: 39rpx 30rpx 0;
-
- .title-con {
- font-family: PingFangSC, PingFang SC;
- font-size: 34rpx;
- color: #01243A;
- display: flex;
- align-items: center;
- justify-content: space-between;
-
- .r-more {
- width: 100rpx;
- height: 44rpx;
- border-radius: 22rpx;
- border: 1rpx solid #01243A;
- display: flex;
- align-items: center;
- justify-content: center;
-
- .txt {
- font-family: PingFangSC, PingFang SC;
- font-weight: bold;
- font-size: 24rpx;
- color: #01243A;
- }
-
- .icon {
- width: 10rpx;
- height: 100%;
- margin-left: 5rpx;
- }
- }
- }
-
- .news-box {
- border-radius: 12rpx;
- background-color: #fff;
- margin-top: 22rpx;
- padding: 0 20rpx;
-
- .news-item {
- padding: 20rpx 0;
- display: flex;
-
- &:nth-child(n+2) {
- border-top: 1rpx solid #eee;
- }
-
- .l-img {
- width: 180rpx;
- height: 135rpx;
-
- .img {
- height: 100%;
- width: 100%;
- }
- }
-
- .r-txt {
- margin-left: 20rpx;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-
- .tit {
- font-family: PingFangSC, PingFang SC;
- font-weight: bold;
- font-size: 30rpx;
- color: #111111;
- }
-
- .b-time {
- font-family: PingFangSC, PingFang SC;
- font-size: 24rpx;
- color: #999999;
- }
- }
- }
- }
- }
-
- .flow-path {
- margin: 31rpx 30rpx 0;
-
- .top-menu {
- display: flex;
-
- .tab {
- font-family: MicrosoftYaHeiUI;
- font-size: 28rpx;
- color: #5A5E61;
- margin-right: 39rpx;
- position: relative;
-
- &.active {
- font-size: 34rpx;
- color: #01243A;
-
- .border {
- position: relative;
- }
-
- .border::after {
- content: "";
- background-image: url(https://qtzl.etcjz.cn/default-bucket/image/newHome/bottom-select.png);
- background-repeat: no-repeat;
- background-size: 100% 100%;
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 16rpx;
- }
- }
-
- .txt {
- position: relative;
- z-index: 2;
- }
- }
-
- }
-
- .flow-list {
- margin-top: 30rpx;
- background-color: #fff;
- border-radius: 12rpx;
- padding: 20rpx;
-
- }
-
- .tiaojian {
- .title-top {
- display: flex;
- justify-content: center;
- align-items: center;
- padding-bottom: 20rpx;
-
- .txt {
- margin: 0 24rpx;
- font-family: MicrosoftYaHei;
- font-size: 30rpx;
- color: #01243A;
- }
-
- .icon-img {
- width: 16rpx;
- height: 20rpx;
- }
- }
-
- }
-
- .list-info {
- font-family: MicrosoftYaHeiUI;
- font-size: 26rpx;
- color: #222222;
- }
-
- .wenti {
- .item-box:nth-child(n+2) {
- border-top: 1rpx solid #E8E8E8;
-
- }
-
- .item-box {
- display: flex;
- padding: 15rpx 0;
- }
-
- .l-icon {
- flex-shrink: 0;
- width: 38rpx;
- height: 38rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: #c2a75f;
- border-radius: 50%;
-
- .icon-img {
- width: 14rpx;
- height: 24rpx;
- }
- }
-
- .txt {
- margin-left: 10rpx;
- font-family: PingFangSC, PingFang SC;
- font-size: 28rpx;
- color: #222222;
- }
- }
- }
- </style>
|