vue-insagent-app/pages/my/my.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<!-- 头部信息Start -->
		<view class="headers " :style="headerStyle">
			<view class="dis a-c j-c">
				<text>我的</text>
				<image @tap="tool" src="/static/image/my/Frame.png" mode=""></image>
			</view>
		</view>
		<view class="Personnel">
			<image src="../../static/image/my/decor1.png" class="decor" mode="widthFix"></image>
			<view class="promotion dis a-c j-c " @click="promotionQrde">
				<image src="../../static/image/my/qrcode.png" mode="widthFix"></image>
				<text>我的推广码</text>
			</view>
			<view class="dis a-c" @tap.stop="openDetail">
				<image :src="avatar" class="avatar" mode=""></image>
				<view class="info dis f-c a-start">
					<view class="dis a-end">
						<view class="dis a-c">
							<text
								style="margin-right: 10px;color: #082E5D;font-size: 18px;font-weight: bold;">{{userInfo.sysUser.name}}</text>
							<image v-if="userInfo.sysUser.status=='1'" src="../../static/image/my/renzheng.png" mode="">
							</image>
						</view>
						<view v-if="userInfo.sysUser.status!='1'" class="cloudAlert dis a-c j-c"
							@click.stop="cloudAlert">
							{{getStatusInfo(userInfo.sysUser.status,userInfo.sysUser.factorVerify,userInfo.sysUser.managementSource).message}}
						</view>
					</view>
					<text>专属领地 开心溢满 绽放璀璨</text>
				</view>
			</view>
			<view class="my-wallet">
				<view class="wallet-body dis f-c">
					<view class="dis a-c j-s route">
						<view class="bg  dis f-c" @tap="accountTool('/pages/wallet/wallet')">
							<text>我的钱包</text>
							<view class="dis a-c details" style="margin-top: 7rpx;">
								<text>查看详情</text>
								<image src="../../static/image/my/qianbao-icon.png" mode=""></image>
							</view>
							<image class="imgIcon" src="../../static/image/my/qianbao.png" mode=""></image>
							<image class="shape" src="../../static/image/my/qianbao-shape.png" mode=""></image>
						</view>
						<view class="bg dis f-c" @tap="accountTool('/pages/wallet/bankCard')">
							<text>我的银行卡</text>
							<view class="dis a-c details" style="margin-top: 7rpx;">
								<text>查看详情</text>
								<image src="../../static/image/my/ka-icon.png" mode=""></image>
							</view>
							<image class="imgIcon" src="../../static/image/my/ka.png" mode=""></image>
							<image class="shape" src="../../static/image/my/ka-shape.png" mode=""></image>
						</view>
						<view class="bg dis f-c" @tap="accountTool()">
							<text>我的充值</text>
							<view class="dis a-c details" style="margin-top: 7rpx;">
								<text>查看详情</text>
								<image src="../../static/image/my/chongzhi-icon.png" mode=""></image>
							</view>
							<image class="imgIcon" src="../../static/image/my/chongzhi.png" mode=""></image>
							<image class="shape" src="../../static/image/my/chongzhi-shape.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="my-tools mb-2" style="margin-top: -126rpx;">
			<view class="order-body dis f-c ">
				<view class="header dis a-c">
					<view class="tag"></view>
					<text>我的工具</text>
				</view>
				<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
				<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode" :dots-styles="dotsStyles">
					<swiper style="height:calc(324upx)" class="swiper" @change="change">
						<swiper-item class="swiper" v-for="(count,cindex) of  toolsListLength" :key="count">
							<uni-grid :column="4" :show-border="false" :square="false" :highlight="false"
								@change="toTools($event,'toolsList')">
								<uni-grid-item class="" v-show="(index>=(cindex)*8) && (index<(cindex+1)*8)"
									v-for="(item ,index) in toolsList" :index="index" :key="item.text">
									<view class="grid-item-box dis a-c j-c f-c">
										<image :src="item.image" mode=""
											style="width: 30px;height: 30px;margin: 10px 9px 4px;"></image>
										<text class="text">{{item.text}}</text>
										<u-badge v-if="item.text=='客户管理'" size="mini" type="error" :count="InsureCount"
											:offset="[10, 10]"></u-badge>
									</view>
								</uni-grid-item>
							</uni-grid>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>

			</view>
		</view>
		<!-- 我的工具End -->

		<!-- 售后管理Start -->
		<view class="my-tools mb-2">
			<view class="order-body dis f-c">
				<view class="header dis a-c">
					<view class="tag"></view>
					<text>后台管理</text>
				</view>
				<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
				<swiper style="height:calc(162upx)" class="swiper" :indicator-dots="(serviceListLength!=1)?true:false">
					<swiper-item class="swiper dis a-c" v-for="(count,cindex) of  serviceListLength" :key="count">
						<uni-grid :column="4" :show-border="false" :square="false" :highlight="false"
							@change="toTools($event,'serviceList')">
							<uni-grid-item v-show="(index>=(cindex)*8) && (index<(cindex+1)*8)"
								v-for="(item ,index) in serviceList" :index="index" :key="item.text">
								<view class="grid-item-box dis a-c  f-c">
									<image :src="item.image" mode="" style="width: 24px;height: 24px;margin: 5px 12px;">
									</image>
									<text class="text">{{item.text}}</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 售后管理End -->
		<!-- 我的关于Start -->
		<view class="my-tools mb-2">
			<view class="order-body dis  f-c">
				<view class="header dis a-c">
					<view class="tag"></view>
					<text>关于掌柜</text>
				</view>
				<view class="shopKeeper mt-2">
					<view class="item dis a-c j-s" v-for="(item,index) in aboutList" :key="index"
						@click="toTools(index,'aboutList')">
						<view class="dis a-c ">
							<image :src="item.image" mode=""></image>
							<text>{{item.text}}</text>
						</view>
						<image :src="item.icon" mode="" style="width: 15px;height: 15px;"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 我的关于End -->

		<!-- 菜单Start -->
		<!-- <block v-for="(item,index) in menusList" :key="index">
			<my-list-item :item="item" :index="index"></my-list-item>
		</block> -->
		<!-- 菜单End -->
		<u-modal v-model="modalshow" :show-title="false">
			<view class="slot-content dis a-c j-c" style="padding: 20px;">
				<img :src="promoImage" alt="" style="width: 150px;height: 150px;" />
			</view>
		</u-modal>
		<service-widget @btnClick="btn_click"></service-widget>
		<auth-Modal :authShow="authShow" @btnClick="authShow=false" @maskClick="authShow=false"></auth-Modal>
	</view>
</template>

<script>
	import authModal from '@/components/modules/user/authModal.vue'; //实名认证弹窗
	import store from '@/store';
	import {
		mapState,
		mapMutations
	} from "vuex"
	import zPopup from '@/components/common/z-popup.vue'
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/image-tools-base64.js';
	import myListItem from "@/components/modules/my/my-list-item.vue";
	import QR from "@/common/wxqrcode.js"
	export default {
		components: {
			zPopup,
			myListItem,
			authModal,
		},

		data() {
			return {
				authShow: false,
				promoImage: "",
				modalshow: false,
				info: ["", ""],
				dotsStyles: {
					backgroundColor: '#E5E5E5',
					selectedBackgroundColor: '#0052FF',
				},
				current: 0,
				mode: 'default',
				headerStyle: {
					backgroundColor: '',
					backgroundImage: '',
					backgroundSize: '',
					backgroundPosition: '',
					boxShadow: ''
					// 其他样式属性...
				},
				showBackground: false,
				prevScrollTop: 0,
				popupShow: false, //头像是否展示
				mystatusText: "已认证",
				prodetIntroShow: true, //显示滚动公告
				avatar: "",
				orderTypeList: [{
						icon: 'icon-jixurenwu',
						orderstatus: 0,
						text: '报价中',
						badge: '0',
						type: "primary",
						orderStage: 0,
						iconColor: '#0696FF'
					},
					{
						icon: 'icon-hebaozhong',
						orderstatus: 1,
						text: '待核保',
						badge: '0',
						type: "success",
						orderStage: 1,
						iconColor: '#FFA22A'
					},
					{
						icon: 'icon-querenzhifu',
						orderstatus: 2,
						text: '待缴费',
						badge: '0',
						type: "error",
						orderStage: 2,
					},
					{
						icon: 'icon-peisong',
						orderstatus: 3,
						text: '已承保',
						badge: '0',
						type: "error",
						orderStage: 3,
					},
				],
				toolsList: [{
						image: '/static/image/my/icon1.png',
						text: '闪电增员',
						url: '/pages/tools/addStaff/addStaff',
					},
					{
						image: '/static/image/my/icon2.png',
						text: '团队管理',
						url: '/pages/tools/team/team1',
					},
					{
						image: '/static/image/my/icon3.png',
						text: '客户管理',
						url: '/pages/tools/customer/customer',
					},
					{
						image: '/static/image/my/icon4.png',
						text: '业绩管理',
						url: '/pages/tools/achievement/achievement',
					},
					{
						image: '/static/image/my/icon5.png',
						text: '报案电话',
						url: '/pages/tools/insuranceClaims/insuranceClaims',
					},
					{
						image: '/static/image/my/icon6.png',
						text: '掌柜秘书',
						url: '/pages/tools/messageReminder/messageReminder',
					},
					{
						image: '/static/image/my/icon7.png',
						text: '保单管理',
						url: '/pages/tools/policy/policy',
					},
					{
						image: '/static/image/my/icon8.png',
						text: '计算器',
						url: '/pages/tools/calculator/calculator',
					},
					{
						image: '/static/image/my/icon9.png',
						text: '海报管理',
						url: '/pages/tools/poster/poster',
					},
					{
						image: '/static/image/my/icon10.png',
						text: '优惠劵',
						url: '/pages/tools/coupon/coupon',
					},
					{
						image: '/static/image/my/icon11.png',
						text: '掌柜商城',
					},
					{
						image: '/static/image/my/icon12.png',
						text: '车险之家',
						url: "/pages/carInsure/entry",
					},
					{
						image: '/static/image/my/icon13.png',
						text: '任务中心',
						url: "/pages/ad/index",
					}
				],
				aboutList: [{
						image: '/static/image/my/Frame5.png',
						text: '常见问题',
						url: '/pages/set/question',
						icon: '/static/image/my/right-jiantou.png'
					},
					{
						image: '/static/image/my/Frame6.png',
						text: '意见反馈',
						url: '',
						icon: '/static/image/my/right-jiantou.png'
					},
					{
						image: '/static/image/my/Frame7.png',
						text: '联系客服',
						tel: '4006333016',
						icon: '/static/image/my/right-jiantou.png'
					},
					{
						image: '/static/image/my/Frame8.png',
						text: '关于我们',
						url: '/pages/set/about',
						icon: '/static/image/my/right-jiantou.png'
					}
				],
				serviceList: [{
						image: '/static/image/my/Frame1.png',
						text: '发票申请',
						popup: '此功能还未开放,有需要请联系客服',
					},
					{
						image: '/static/image/my/Frame2.png',
						text: '保单批改',
						popup: '此功能还未开放,有需要请联系客服',
					},
					{
						image: '/static/image/my/Frame3.png',
						text: '申请退保',
						popup: '此功能还未开放,有需要请联系客服',
					},
					{
						image: '/static/image/my/Frame4.png',
						text: '自助理赔',
						popup: '此功能还未开放,有需要请联系客服',
					}
				],
				menusList: [{
						icon: "shangcheng",
						name: "掌柜商场",
						clicktype: "nothing",
						url: "",
						auth: true
					},
					{
						icon: "chexiandingdan",
						name: "车险之家",
						clicktype: "navigateTo",
						url: "/pages/carInsure/entry",
						auth: true
					}
				],
				InsureCount: 0,
			}
		},

		computed: {
			...mapState(['userInfo', "userCheckInfo"]),

			toolsListLength() {
				// let length = Math.ceil(this.toolsList.length / 8);
				let list = ["1", "2"]
				return list;
			},
			aboutListLength() {
				return Math.ceil(this.aboutList.length / 4);
			},
			serviceListLength() {
				return Math.ceil(this.serviceList.length / 4);
			}
		},
		async onShow() {
			await this.loginUser();
			await this.getInsureCount();
			if (this.userInfo.sysUser.headSculpture) {
				this.avatar = this.$base.baseUrl + this.userInfo.sysUser.headSculpture;
			} else {
				this.avatar = "/static/image/my/avatar1.png"

			}
			if (this.userInfo.sysUser.status == '1') {
				this.mystatusText = "已认证";
			} else if (this.userStatus == '2') {
				this.mystatusText = "未认证";
			}
		},
		async onPullDownRefresh() {
			await this.loginUser();
			uni.stopPullDownRefresh();
		},
		async onload() {
			await this.getInsureCount();
		},
		onPageScroll(e) {
			this.handleScroll(e);
		},
		mounted() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
			uni.$on('scroll', this.handleScroll);
		},
		destroyed() {
			uni.$off('scroll', this.handleScroll);
		},
		methods: {
			...mapMutations(['setUserModules', 'setOrderType', 'setOrderStage']),
			//头部颜色变化js
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			promotionQrde() {
				uni.navigateTo({
					url: '/pages/tools/addStaff/addStaff'
				})

			},
			async loginUser() {
				let userInfoRes = await this.$http.get('/user/loginUser')
				store.commit('setUserModules', {
					title: 'userInfo',
					data: {
						sysUser: {
							...userInfoRes.data
						}
					}
				})
			},
			getStatusInfo(status, factorVerify, managementSource) {
				// 定义状态与页面路径及消息的映射
				const statusInfo = {
					0: {
						page: '',
						message: '您还未实名认证 请去实名认证',
						status: 0,
					},

					2: {
						page: '/pages/user/authResult1',
						message: '入司资料审核中 请耐心等待',
						status: 2,
					},
					3: {
						page: '/pages/user/practitionerInfo',
						message: '入司资料审核不通过,请查看详情',
						status: 3,
					},
					8: {
						page: '/pages/user/practitionerInfo',
						message: '入司待补充资料 请去补充资料',
						status: 8,
					},
				};
				const factorVerifyInfo = {
					2: {
						page: '/pages/user/authInfo',
						message: '您的实名认证失败,请查看详情',
						status: 2,
					},

				};
				if (status == '0' && managementSource == '2') {
					if (factorVerify == '2') {
						return factorVerifyInfo[factorVerify];
					} else {
						return statusInfo[status];
					}
				} else {
					return statusInfo[status];
				}

			},
			cloudAlert() {
				let info = this.getStatusInfo(this.userInfo.sysUser.status, this.userInfo.sysUser.factorVerify, this
					.userInfo.sysUser
					.managementSource)
				switch (info.status) {
					case 0:
						this.authShow = true;
						break;
					case 2:
					case 3:
					case 8:
						uni.navigateTo({
							url: info.page
						})
						break;

				}

			},
			change(e) {
				this.current = e.detail.current;
			},

			async getInsureCount() {
				let res = await this.$http.post('/insurance/order/getExpirationInsureCount');
				if (res.code == '200') {
					this.InsureCount = res.data;
				}
			},
			handleScroll(e) {
				const scrollTop = e.scrollTop;
				if (scrollTop > this.prevScrollTop) {
					// 向下滚动
					this.showBackground = true; // 显示背景图
				} else if (scrollTop < 50) {
					// 在顶部附近，隐藏背景图
					this.showBackground = false;
				} else {
					// 向上滚动
					this.showBackground = true; // 显示背景图
				}
				this.headerStyle.backgroundColor = this.showBackground ? '#fff' : 'transparent';
				this.headerStyle.backgroundImage = this.showBackground ? 'url("/static/image/my/banner.png")' : '';
				this.headerStyle.backgroundSize = this.showBackground ? 'cover' : '';
				this.headerStyle.backgroundPosition = this.showBackground ? 'center' : '';
				this.prevScrollTop = scrollTop;
			},
			tool() {
				uni.navigateTo({
					url: "/pages/set/set"
				})
			},
			//去工具页面
			async toTools(e, listName) {
				let index = e.detail ? e.detail.index : e;
				if (this.userInfo.sysUser.status == '0' && this.userInfo.sysUser.managementSource == '2') {
					if (this.userInfo.sysUser.factorVerify == '2') {
						uni.navigateTo({
							url: "/pages/user/authInfo"
						})
					} else {
						this.authShow = true;
					}
				} else if (this.userInfo.sysUser.status == '8' || this.userInfo.sysUser.status == '3') {
					uni.navigateTo({
						url: "/pages/user/practitionerInfo"
					})
				} else if (this.userInfo.sysUser.status == '2') {
					uni.navigateTo({
						url: "/pages/user/authResult1"
					})
				} else if (this.userInfo.sysUser.status == '1') {
					if (this[listName][index].url) {
						this.navigate({
							url: this[listName][index].url
						}, "navigateTo", true)
					} else if (this[listName][index].tel) {
						uni.makePhoneCall({
							phoneNumber: this[listName][index].tel,
						})
					} else if (this[listName][index].popup) {
						let res = await this.$http.get('/sys/qy/wechat/find/picture');
						if (res.code == '200') {
							this.promoImage = QR.createQrCodeImg(res.data.wechatPictureUrl, {
								size: parseInt(200) //二维码大小  
							})
							this.modalshow = true;
						} else {
							uni.showModal({
								showCancel: false,
								content: this[listName][index].popup,
							});
						}

					} else {
						uni.showToast({
							title: this[listName][index].text + '更新中...',
							icon: 'none'
						})
					}

				}

			},
			async accountTool(path) {
				if (this.userInfo.sysUser.status == '0' && this.userInfo.sysUser.managementSource == '2') {
					if (this.userInfo.sysUser.factorVerify == '2') {
						uni.navigateTo({
							url: "/pages/user/authInfo"
						})
					} else {
						this.authShow = true;
					}
				} else if (this.userInfo.sysUser.status == '8' || this.userInfo.sysUser.status == '3') {
					uni.navigateTo({
						url: "/pages/user/practitionerInfo"
					})
				} else if (this.userInfo.sysUser.status == '2') {
					uni.navigateTo({
						url: "/pages/user/authResult1"
					})
				} else if (this.userInfo.sysUser.status == '1') {
					if (path) {
						if (path == '/pages/wallet/bankCard') {
							let res = await this.$http.post('/userBank/getUserBankList', {
								auditStatus: '',
							});
							if (!res.data.length) {
								this.navigate({
									url: '/pages/wallet/bindBank',
									complete: () => {
										setTimeout(() => {
											uni.showToast({
												title: '请先绑定银行卡',
												duration: 3000,
												icon: "none"
											});
										}, 500);

									}
								}, "navigateTo", true)
							} else {
								this.navigate({
									url: path,
								}, "navigateTo", true)
							}
						} else {
							this.navigate({
								url: path,
							}, "navigateTo", true)
						}
					} else {
						uni.showToast({
							title: '功能待开发...',
							icon: "none"
						});
					}
				}

			},
			//跳转个人信息页面
			openDetail() {
				this.navigate({
					url: "/pages/user/userInfo"
				}, "navigateTo", false)
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	page {
		background-color: #EEF1F7;
	}

	.headers {
		position: fixed;
		top: 0;
		left: 0;
		height: auto;
		width: 100%;
		z-index: 999999;
		padding: 16px;
		padding-top: 50px;

		>view {
			width: 100%;
			height: 100%;
			position: relative;
		}

		image {
			position: absolute;
			right: 0;
			width: 20px;
			height: 20px;
		}

		text {
			font-size: 18px;
			font-weight: bold;
			color: #000;
		}
	}

	.Personnel {
		height: auto;
		width: 100%;
		background: #fff;
		background-image: url("/static/image/my/banner.png");
		background-size: 100% 100%;
		padding: 110px 16px 73px 16px;
		position: relative;

		.decor {
			position: absolute;
			width: 230rpx;
			height: 210rpx;
			right: 21px;
			top: 58px;
		}

		.promotion {
			position: absolute;
			background: rgba(0, 82, 255, 0.7);
			border-radius: 50px 0px 0px 50px;
			right: 0;
			top: 114px;
			color: #fff;
			font-size: 20rpx;
			padding: 9rpx 10rpx;
			line-height: 1;
			letter-spacing: 1px;

			image {
				width: 13px;
				height: 13px;
				margin-right: 2px;
			}
		}

		.avatar {
			width: 42px;
			height: 42px;
			border-radius: 50%;
		}

		.info {
			margin-left: 12px;

			text {
				margin-right: 10px;
				color: #082E5D;
				font-size: 18px;
				font-weight: bold;
			}

			text:last-child {
				color: rgba(8, 46, 93, 0.9);
				font-size: 22rpx;
			}

			image {
				width: 95rpx;
				height: 40rpx;
			}

			.cloudAlert {
				position: relative;
				width: 85px;
				background: rgba(0, 0, 0, 0.6);
				border-radius: 2px;
				margin-left: 10px;
				color: #fff;
				font-size: 22rpx;
				padding: 3px 4px;
				line-height: 1.5;
			}

			.cloudAlert::before {
				content: '';
				position: absolute;
				top: 40%;
				/* 箭头垂直位置 */
				left: -10px;
				/* 箭头左侧位置 */
				border-width: 5px;
				/* 箭头大小 */
				border-style: solid;
				/* 实心箭头 */
				border-color: transparent rgba(0, 0, 0, 0.6) transparent transparent;
				/* 左边框有色，其他透明 */
			}
		}
	}

	.my-tools {
		padding: 0 16px;
		position: relative;

		.header {
			padding: 10px 0 0;
			font-size: 16px;
			color: #232832;
			font-weight: bold;

			.tag {
				width: 4px;
				height: 16px;
				background: #0052FF;
				border-radius: 0 6px 6px 0;
				margin-right: 11px;
			}
		}

		.order-body {
			background: #fff;
			box-shadow: 0px 4px 10px 0px #DAE3F4;
			border-radius: 6px;
		}

		.shopKeeper {
			padding: 0 15px;

			.item {
				padding: 25rpx 0;
				color: #333;
				font-size: 28rpx;
				border-top: 1px solid #EEEEEE;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10px;
				}

			}
		}
	}

	/* 产品介绍Start */
	.prodet-intro {
		width: 100%;
		height: 70upx;
		background-color: #333;
		color: #3ae;
		white-space: nowrap;
		border-top: 1upx solid #666;
		border-bottom: 1upx solid #666;
		box-sizing: border-box;
	}

	.prodet-intro>view:nth-of-type(1) {
		width: 60upx;
		height: 100%;
		flex-shrink: 1;
		padding-left: 20upx;
		font-size: 36upx;
	}

	.prodet-intro>view:nth-of-type(2) {
		overflow: hidden;
		line-height: 70upx;
		font-size: 24upx;
	}

	.prodet-intro>view:nth-of-type(3) {
		width: 60upx;
		padding-right: 20upx;
		flex-shrink: 1;
		height: 100%;
		font-size: 36upx;
	}

	.animate {
		padding-left: 40rpx;
		display: inline-block;
		white-space: nowrap;
		animation: 20s wordsLoop linear infinite normal;
	}

	@keyframes wordsLoop {
		0% {
			transform: translateX(750rpx);
			-webkit-transform: translateX(750rpx);
		}

		100% {
			transform: translateX(-100%);
			-webkit-transform: translateX(-100%);
		}
	}

	/* 产品介绍End */



	/* 个人信息Start */

	/* 个人信息End */

	/* 我的订单Start */
	.my-orders {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.my-orders,
	.wallet-body {
		position: relative;
		width: 95%;
		height: 180upx;
		background: #FFFFFF;
		border-radius: 20upx;
		box-shadow: 0upx 0upx 10upx #efeff4;
		overflow: hidden;
	}



	/* 我的订单End */

	/* 我的钱包Start */
	.my-wallet {
		.wallet-body {
			width: 100%;
			height: auto;
			padding: 12px;
			background: #FFFFFF;
			box-shadow: 0px 4px 10px 0px #DAE3F4;
			border-radius: 6px;
			margin-top: 10px;

			.route {
				.bg {
					width: 31%;
					border-radius: 4px;
					padding: 10px 6px;
					position: relative;
					background: linear-gradient(180deg, #FFF1E3 0%, #FCF6EF 100%);

					.imgIcon {
						position: absolute;
						right: 0;
						bottom: 6rpx;
						width: 68rpx;
						height: 72rpx;
					}

					.shape {
						position: absolute;
						left: 12rpx;
						bottom: 0;
						width: 50rpx;
						height: 18rpx;
					}

					>text {
						color: #FF9520;
						font-size: 26rpx;
						font-weight: bold;
					}

					.details {
						margin-top: 7rpx;

						>text {
							color: #FFB767;
							font-size: 18rpx;
							margin-right: 4rpx;
						}

						image {
							width: 16rpx;
							height: 16rpx;
						}
					}

				}

				.bg:nth-child(2) {
					background: linear-gradient(180deg, #E0F1FF 0%, #F6FBFF 100%);

					text {
						color: #2099FE;
					}

					.imgIcon {
						width: 71rpx;
						height: 72rpx;
					}
				}

				.bg:nth-child(3) {
					background: linear-gradient(180deg, #FDEBE4 0%, #FFF7F3 100%);

					text {
						color: #FF5D52;
					}

					.imgIcon {
						width: 65rpx;
						height: 72rpx;
					}
				}
			}

			.money {
				padding: 8px 0;
				background-color: #F9F8FD;
				border-radius: 4px;
				margin-top: 8px;

				text {
					font-size: 12px;
					color: #333;
					font-weight: 400;
				}

			}
		}
	}

	/* 我的钱包End */

	/* 小的分项标题Start */



	/* 小的分项标题End */



	.grid-item-box {

		.icon {
			font-size: 26px;
		}

		.text {
			font-size: 12px;
			color: #232832;
		}


	}

	.swiper {
		width: 100%;
	}

	.swiper-view .keep-out {
		width: 100%;
		height: 30upx;
		border-radius: 100% 100% 0 0;
		margin-top: -15upx;
		position: absolute;
	}

	.swiper-view .swiper {
		overflow: hidden;
		padding: 30upx 20upx 0;
		box-sizing: border-box;
		width: 100%;
		height: 200upx;
	}

	.swiper-view .swiper image {
		width: 100%;
		height: 200upx;
	}
</style>