zhywpt-sp/pages/index/index.vue

<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">
				<!-- <navBar :isBack='false' :title='首页'></navBar> -->
				<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" />
					<!-- <u-input v-model="searchParams" type="text" :border="false"  :height="80" placeholder-style='color: #fff;' /> -->
				</view>
			</view>

			<view class="nav">
				<view class="item-box" v-for='(item,index) in navList' :key='index' @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" v-if="state.notice != '无'" :style="{'--bgimg':`url(${fileURL}image/newHome/tongzhi.png)`}" >
				<view class="l-img">
					<image :src="`${fileURL}image/newHome/tongzhi-l.png`" class='img' mode="aspectFit"></image>
				</view>
				<view class="r-info">
					<uni-notice-bar style="width: 100%;" scrollable single :text="state.notice"></uni-notice-bar>
				</view>
			</view>

			<view class="supervision-con">
				<!-- <u-swiper :list="state.swiperListArr"></u-swiper> -->
				<swiper class="swiper" circular :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay"
					:interval="swiper.interval" :duration="swiper.duration" >
					<block v-if="state.swiperList.length >0" v-for="item in state.swiperList" :key="item.id">
						<swiper-item class="swiper-item" @click="link(item)">
							<image :src="fileURLList + item.imgUrl" mode="widthFix" class='img'></image>
						</swiper-item>
					</block>
				</swiper>
				<!-- 				<view class="txt">
					ETC服务监督电话
				</view>
				<view class="phone">
					0851-883065555
				</view>
				<view class="btn">
					<text>立即拨打 ＞</text>
				</view> -->
			</view>

			<view class="title-name title-h">
				快速办理
			</view>
			<view class="express-lane">
				<view class="item keche" :style="{'--bgimg':`url(${fileURL}image/newHome/keche.png)`}">
					<view class="item-con" @click="showMask(1)">
						<view class="top-txt">
							客车用户
						</view>
						<view class="btn">
							进入
						</view>
					</view>
				</view>
				<view class="item huoche" :style="{'--bgimg':`url(${fileURL}image/newHome/huoche.png)`}">
					<view class="item-con" @click="showMask(2)">
						<view class="top-txt">
							货车用户
						</view>
						<view class="btn">
							进入
						</view>
					</view>
				</view>
			</view>
			<view class="news-con">
				<view class="title-con">
					<text class='title-h'>高速快讯</text>
					<view class="r-more" @click="$util.navTo('/subpackage/orders/moreHighMsg/moreHighMsg',true)">
						<text class='txt'>更多</text>
						<image :src="`${fileURL}image/newHome/r-icon.png`" mode="aspectFit" class='icon'></image>
					</view>
				</view>
				<view class="news-box">
					<template v-if='state.highMsgData'>
						<view class="news-item" v-for="(item,index) in state.highMsgData" :key='index' @click="link(item)">
							<view class="l-img">
								<image :src="fileURLList + item.imgUrl" mode="aspectFill" class="img"></image>
							</view>
							<view class="r-txt">
								<view class="tit">
									{{item.title}}
								</view>
								<view class="b-time">
									{{item.updateTime}}
								</view>
							</view>
						</view>
					</template>
					<view class="empty-news" v-else>
						<u-empty text="暂无数据" mode="news" :icon-size='90' :font-size='24'></u-empty>
					</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" :style="{'--bgimg':`url(${fileURL}image/newHome/bottom-select.png)`}">
						</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,index) in state.commonQuestionArr' :key='index'>
							<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>
	<!-- ETC选择弹窗 -->
	<view class="mask" v-if="isShowMask">

		<view class="mask-content">
			<filter>
				<view class="mask-close">
					<image :src="fileURL + 'image/index/icon-close.png'" class="icon-closed" @click="closeMask"></image>
				</view>
				<view class="mask-title" :style="{ '--color': color }">选择ETC用户类型</view>
				<view class="mask-tab">
					<view class="tab-item active" @click="toCreatOrder('1')">
						<image :src="fileURL + 'image/index/icon-personal.png'" mode="aspectFill"></image>
						<text class="tab-tit on">个人办理</text>
					</view>
					<view class="tab-item" @click="toCreatOrder('2')">
						<image :src="fileURL + 'image/index/icon-unit.png'" mode="aspectFill"></image>
						<text class="tab-tit on">单位办理</text>
					</view>
				</view>
			</filter>
		</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 { requestNew} from "@/utils/network/request.js";
	import {
		setItem,
	} from "@/utils/storage";
	import {
		queryKey,
		querySwiper,
		infoQuery,
		queryHighMsg
	} from "@/utils/network/api.js";

	import {
		fileURL, fileURLList
	} from "@/datas/fileURL.js";
	import {
		navTo,
		msg,hasLogin,confirm
	} from "@/utils/utils";
	import {
		getCodeName
	} from "@/datas/queryKey.js";
	import { getCurrentInstance } from 'vue';
	const tools = require("../../static/etcUtil/tools.js");
	const instance = getCurrentInstance();
	const swiper = reactive({
		indicatorDots: false,
		autoplay: true,
		interval: 6000,
		duration: 500,
		easing: "default"
	})

	onLoad((options) => {
		console.log("wechatSignNo", options)
		getInfo();
	})
	onMounted(() => {
		const query = uni.createSelectorQuery().in(instance.proxy);
		query
			.select(".news-con")
			.boundingClientRect((data) => {
				console.log("得到布局位置信息", data);
				console.log("节点离页面顶部的距离为" + data.top);
				newTop.value = data.top
			})
			.exec();
		let systemInfo = uni.getSystemInfoSync()
		viewHeight.value = systemInfo.windowHeight
		statusBarHeight.value = systemInfo.statusBarHeight;
		const {
			top,
			height
		} = uni.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
		console.log(barHeight.value, statusBarHeight.value, systemInfo, '计算的顶部高度');
		getSwiper()
	})
	const statusBarHeight = ref(0)
	const viewHeight = ref(0) //可视区高度
	const barHeight = ref(0)
	const searchParams = ref('')
	const newTop = ref(0) //高速快讯距离顶部距离
	const isShowMask = ref(false);
	//搜索
	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: "/subpackage/after-sale/wangdian"
	}, {
		imgUrl: `${fileURL}image/newHome/yewu.png`,
		title: "业务指引",
		path: ""
	}, {
		imgUrl: `${fileURL}image/newHome/more.png`,
		title: "更多",
		path: `/pages/service/service`
	}]
	const handleNav = (item) => {
		console.log("item",item)
		if(item.title=='更多'){
			if (!hasLogin()) {
				confirm('您需要登录过后才能使用此功能', () => {
					uni.navigateTo({
						url: '/login/login',
					});
				}, '温馨提示', true, '去登录');
			} else {
				uni.switchTab({
					url:item.path
				})
			}
		
		}else{
			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({
		vanType: 0, //1客车 2货车
		userType: 1, //1个人 2单位
		notice: "",
		swiperList: [],
		swiperListArr: [],
		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
	});
	// 页面初次渲染完成时触发
	onReady(() => {
			quanKeyAction()
	})

	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);
	// }

	//办理流程tab选择
	const flowPathTabHandle = (tab) => {
		state.tabActive = tab;
		if (tab == "办理条件") {
			processeCondition();//办理条件
		} else if (tab == "常见问题") {
			commonQuestion();
		}
	};

	const showMask = (val : any) => {
		state.vanType = 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, //是否显示加载中(默认显示)
		};

		//调用方式
		requestNew(infoQuery, options)
			.then((res) => {
				let data = res
				state.notice=data.text
				console.log(data, state.notice, '公告',state.notice=='无');
			})
			.catch((err) => {
				console.log(err, '错误');
			});
	}
	let newLock = false
	// 高速快讯查询接口
	const highMsg = () => {
		newLock = true
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				pageNo: 1,
				pageSize: 2
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};

		//调用方式
		requestNew(queryHighMsg, options).then((res) => {
			console.log("高速快讯查询接口", res);
			state.highMsgData = res.result.slice(0, 4)
			for (var i = 0; i < state.highMsgData.length; i++) {
				state.highMsgData[i]["copywriting"] = getCodeName('COPYWRITING', state.highMsgData[i]["copywriting"])
				state.highMsgData[i]["updateTime"] = state.highMsgData[i]["updateTime"].replace('T', ' ')
				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 processeCondition = () => {
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				businessType: 'PROCESSING_CONDITIONS' //办理条件
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};

		//调用方式
		requestNew(infoQuery, options)
			.then((res) => {
				let data = res
				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, //是否显示加载中(默认显示)
		};

		//调用方式
		requestNew(infoQuery, options)
			.then((res) => {
				let data = res
				console.log("常见问题", data)
				state.commonQuestionText = data.text
				state.commonQuestionArr = data.text.split('。').filter(item => item)
			})
			.catch((err) => {
				console.log(err);
			});
	}
	//监听页面滚动
	onPageScroll((e) => {
		let h = viewHeight.value + e.scrollTop
		if (h >= newTop.value - 50 && !newLock) {
			highMsg()
		}
	});
	const toCreatOrder = (val : number) => {
		console.log(typeof (val));
		state.userType = val;
		navTo(`/subpackage/orders/choice-product?vanType=${state.vanType}&&userType=${state.userType}`)
		closeMask();
	};


	//全量枚举值查询
	const quanKeyAction = () => {
		var data = {};
		const options = {
			type: 2,
			data: data,
			method: "POST",
		};
		requestNew(queryKey, options).then((res) => {
			const data =res
			console.log("枚举", data)
			setItem('key', data.dictTypeAndItem)
		})
			.catch((err) => {
				console.log(err);
			});
	}
	//获取轮播
	const getSwiper = () => {
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};

		//调用方式
		requestNew(querySwiper, options).then((res) => {
			const data = res
			console.log("轮播图", data)
			state.swiperList = data.swipers ? data.swipers : [],
				state.swiperListArr = state.swiperList.map(item => fileURLList + item.imgUrl)
		})
			.catch((err) => {
				console.log(err);
			});

	};
	const link = (item : any) => {
		console.log(item);
		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);
					// 未成功跳转到车主小程序
				},
			});
		}
	}
</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;
				background: #1a394d;
				::v-deep .input-placeholder {
					color: #fff !important;
				}
			}
		}



	}

	.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-image: var(--bgimg);
		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 {
			line-height: 80rpx;
			margin-left: 16rpx;
			font-size: 27rpx;
			color: #000;
			font-weight: 500;
			width: 400rpx;
		}
	}

	.supervision-con {
		box-sizing: border-box;
		height: 180rpx;
		width: 690rpx;
		margin: 24rpx 30rpx 0;
		border-radius: 12rpx;
		overflow: hidden;

		.swiper {
			height: 180rpx;
			width: 690rpx;
		}

		.swiper-item .img {
			overflow: hidden;
			border-radius: 12rpx;
			height: 180rpx !important;
			width: 690rpx;
		}

		.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;
	}

	.title-h {
		font-family: PingFangSC, PingFang SC;
		font-weight: bold;
		font-size: 34rpx;
		color: #01243A;
	}

	.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;
			background-image: var(--bgimg);
			.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 {

			.btn {
				background-color: #03385D;
			}
		}

		.huoche {
			margin-left: 22rpx;

			.btn {
				background-color: #C2A75F;
			}
		}
	}

	.news-con {
		margin: 39rpx 30rpx 0;

		.title-con {
			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;
				}
			}
		}

		.empty-news {}

		.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: var(--bgimg);
						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: 14rpx;
				font-family: PingFangSC, PingFang SC;
				font-size: 28rpx;
				color: #222222;
				line-height: 38rpx;
			}
		}
	}

	.mask {
		background: $uni-bg-color-mask;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.mask-content {
		background: $uni-bg-color;
		width: 570rpx;
		height: 480rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
	}

	.mask-close {
		text-align: right;
	}

	.mask-title {
		text-align: center;
		font-size: 32rpx;
		color: $uni-text-color-black;
		margin-bottom: 50rpx;
	}

	.mask-tab {
		display: flex;
		justify-content: space-evenly;
	}

	.icon-closed {
		width: 48rpx;
		height: 48rpx;
		margin: 24rpx 24rpx 0 0;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.tab-tit {
		font-size: 32rpx;
		margin-top: 20rpx;
		color: #666;
	}

	.tab-item image {
		width: 160rpx;
		height: 160rpx;
	}

	.backlog-notice {
		margin: 50rpx 30rpx 0rpx;
	}
</style>