yicangzongtai_app_240321/pages/government/mine.vue

<template>
	<view class="Body">
		<!-- <navbar :config="config">
			<template v-slot:right>
				<view class="nav_r">
					<view class="nav_r_item " :class="myUnReadSum>0?'dian':''" @click="goToMsg()">
						<image class="news" src="/static/czd/news.png" mode=""></image>
						<view v-if="myUnReadSum>0">{{myUnReadSum>99?'99+':myUnReadSum}}</view>
					</view>
					<view class="nav_r_item" @click="goToSet()">
						<image class="set" src="/static/czd/set.png" mode=""></image>
					</view>
				</view>
			</template>
		</navbar> -->

		<view :class="['mine-fixed' , showFixed ? '' : 'hide-fixed' ]">
			<view class="fixed-status" :style="{'height':statusBarHeight + 'px'}"></view>
			<view class="fixed-nav">
				<view class="fixed-info">
					<image class="mine-left-img" v-if="user.headPhoto" :src="$getImgPath(user.headPhoto)"></image>
					<image class="mine-left-img" v-else src="/static/default-avatar.png" mode="aspectFit"></image>
					<text
						class="name-text">{{ $onDesensitization('name', user.realName || user.nickname  || '')}}</text>
					<image class="certification" v-if="user.certification" src="@/static/czd/authentication.png"
						mode="aspectFit"></image>
					<image class="certification" v-else src="@/static/czd/authentication_01.png" mode="aspectFit">
					</image>
				</view>
				<view class="fixed-right nav_r">
					<view class="nav_r_item" :class="myUnReadSum>0?'dian':''" @click="goToMsg()">
						<image class="news" src="/static/czd/news.png" mode="aspectFit"></image>
						<view v-if="myUnReadSum>0">{{myUnReadSum>99?'99+':myUnReadSum}}</view>
					</view>
					<view class="nav_r_item" @click="goToSet()">
						<image class="set" src="/static/czd/set.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="top-box">
			<view class="" :style="{'width': '100%','height':statusBarHeight + 'px'}">

			</view>
			<view class="mine-top">
				<view class="mine-left" @click.stop="goPersonalData()">
					<image class="mine-left-img" v-if="user.headPhoto" :src="$getImgPath(user.headPhoto)"></image>
					<image class="mine-left-img" v-else src="/static/default-avatar.png" mode="aspectFit"></image>
					<view class="name-info">
						<view class="name-box">
							<text
								class="name-text">{{ $onDesensitization('name', user.realName || user.nickname  || '')}}</text>
							<!-- <text class="name-tag">{{user.certification?'已实名':'未实名'}}</text> -->
							<image class="certification" v-if="user.certification" src="@/static/czd/authentication.png"
								mode="aspectFit"></image>
							<image class="certification" v-else src="@/static/czd/authentication_01.png"
								mode="aspectFit"></image>
						</view>
						<text class="mobile-info">{{$onDesensitization('tel', user.mobile || '')}}</text>
					</view>
				</view>

				<view class="nav_r">
					<!-- <u-icon name="arrow-right"></u-icon> -->
					<!-- 	<view class="nav_r">
						
					</view> -->
					<view class="nav_r_item" :class="myUnReadSum>0?'dian':''" @click="goToMsg()">
						<image class="news" src="/static/czd/news.png" mode="aspectFit"></image>
						<view v-if="myUnReadSum>0">{{myUnReadSum>99?'99+':myUnReadSum}}</view>
					</view>
					<view class="nav_r_item" @click="goToSet()">
						<image class="set" src="/static/czd/set.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>



		<view class="zw-pages-content">
			<!-- 我的管理 -->
			<view class="integral-box" @click.stop="$u.route('/pages/research/community/mypoints')">
				<view class="integral-item">
					<text class="integral-icon iconfont_yige">&#xe684;</text>
					<text class="integral-title">我的积分</text>
				</view>
				<view class="integral-item integral-info">
					<text class="integral-num zw-one-row">{{user.integralAble || 0}}积分</text>
					<text class="integral-more iconfont_yige">&#xe65f;</text>
				</view>
			</view>
			<view class="class-type" @click.stop="e => {return false}">
				<view class="class-type-item" v-for="(v,i) in myManagementList" :key="'a'+i" @click.stop="$openPage(v)">
					<image class="class-item-img" :src="$getImgPath(v.moduleImage)"></image>
					<text class="class-item-text">{{v.moduleName}}</text>
				</view>
				<view class="class-type-item" @click.stop="$u.route('/pages/user/wallet/myWallet')">
					<image class="class-item-img" src="/static/czd/myData_2.png"></image>
					<text class="class-item-text">我的钱包</text>
				</view>
				<view class="class-type-item" @click.stop="$u.route('/pages/government/beautiful-code?codeType=券包')">
					<image class="class-item-img" src="/static/czd/myData_3.png"></image>
					<text class="class-item-text">我的券包</text>
				</view>
				<view class="class-type-item" @click.stop="goOrder()">
					<image class="class-item-img" src="/static/czd/myData_4.png"></image>
					<text class="class-item-text">我的订单</text>
				</view>
			</view>
	 
			<!-- 任务 / 勋章 -->
			<view class="task-box">
				<view class="task-item" @click.stop="$u.route('/pages/government/medal')">
					<view class="task-icon" v-if="myMedal">
						<!-- <text style="color: #3DC8DF;" class="iconfont_yige">&#xe6af;</text> -->
						<image class="task-icon" :src="myMedal.medalPicture" mode="aspectFit"></image>
					</view>
					<view class="task-content">
						<view class="task-content-title">
							我的勋章
						</view>
						<view class="task-value task-level">
							<template v-if="myMedal">
								<text class="task-level-num">LV.{{myMedal.medalLevel}}</text>
								<template v-if="myMedal.next_">
									<view class="task-level-line">
										<text class="line-color" :style="{width: myMedal.percent_num}"></text>
									</view>
									<text class="task-level-num">LV.{{ myMedal.next_.medalLevel }}</text>
								</template>
							</template>
						</view>
					</view>
				</view>
				<view class="task-item" @click.stop="$u.route('/pages/task/task-list')">
					<view class="task-icon">
						<text style="color: #0B71E1;" class="iconfont_yige">&#xe7b1;</text>
					</view>
					<!-- <image class="task-icon" src="../icon.png" mode="aspectFit"></image> -->
					<view class="task-content">
						<view class="task-content-title">
							任务中心
						</view>
						<view class="task-value">
							进行中 {{myTackCountNum}}
						</view>
					</view>
				</view>
			</view>

			<view class="myData">
				<view class="myData_title">我的数据</view>
				<view class="myData_box">
					<view class="myData_list">
						<view class="myData_item" v-for="(v,i) in myData" :key="'b'+i" @click="$openPage(v)">
							<!-- <view class="myData_item_tit">{{v.moduleName}}</view>
							<view class="myData_item_tig">去看看></view> -->
							<image :src="$getImgPath(v.moduleImage)" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="service" v-if="inCommonUseList&&inCommonUseList.length>0">
				<view class="service_title">常用服务</view>
				<view class="service_box">
					<view class="service_list">
						<swiper class="swiper" indicator-dots indicator-color="#999999"
							indicator-active-color="#0B71E1">
							<swiper-item v-for="(item,index) in inCommonUseList" :key="'inCommonUseList'+index">
								<view class="itemBox">
									<view class="service_item" v-for="(v,i) in item" :key="'c'+i" @click="$openPage(v)">
										<view class="service_item_img">
											<image :src="$getImgPath(v.icon)" mode="aspectFit"></image>
										</view>
										<view class="service_item_tit">
											{{v.thirdName.length>4?v.thirdName.substr(0,4)+'...':v.thirdName}}
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>

			<view class="moreCls">
				<view class="moreCls_title">
					<view>更多功能</view>
				</view>
				<view class="moreCls_list">
					<!-- <view class="moreCls_item" v-for="(v,i) in moreList" :key="'c'+i" @click="$openPage(v)">
						<view class="moreCls_item_img">
							<image :src="$getImgPath(v.moduleImage)" mode=""></image>
						</view>
						<view class="moreCls_item_title">{{v.moduleName}}</view>
					</view> -->
					<view class="moreCls_item" @click="$u.route('/pages/government/customer-center')">
						<view class="moreCls_item_img">
							<image src="/static/czd/more_1.png" mode=""></image>
						</view>
						<view class="moreCls_item_title">常见问题</view>
					</view>
					<view class="moreCls_item" @click="$u.route('/pages/government/feedback')">
						<view class="moreCls_item_img">
							<image src="/static/czd/more_2_.png" mode=""></image>
						</view>
						<view class="moreCls_item_title">建议反馈</view>
					</view>
					<view class="moreCls_item" @click="$u.route('/pages/government/attention')">
						<view class="moreCls_item_img">
							<image src="/static/czd/more_2.png" mode=""></image>
						</view>
						<view class="moreCls_item_title">我的关注</view>
					</view>
					<view class="moreCls_item" @click="$u.route('/pages/government/collect')">
						<view class="moreCls_item_img">
							<image src="/static/czd/more_4.png" mode=""></image>
						</view>
						<view class="moreCls_item_title">我的收藏</view>
					</view>
					<view class="moreCls_item" @click="share()">
						<view class="moreCls_item_img">
							<image src="/static/czd/invite.png" mode=""></image>
						</view>
						<view class="moreCls_item_title">邀请好友</view>
					</view>
				</view>
			</view>
		</view>

		<technical-support />
		<!-- <iframe src="https://www.wejointimes.com/multi/h5#/subpackages/rankingList/pages/overall" frameborder="0"></iframe> -->
		<share ref="shares" :contentHeight="580" v-if="isvisible"></share>
	</view>
</template>

<script>
	import {
		myUserInfo
	} from "@/api/government.js"
	// import share from '@/common/share.js';
	import share from "@/pages/public/share";
	import {
		getAccountInfo
	} from "@/api/login.js"
	import {
		myTackCount_Api,
		getUserMedal_Api
	} from "@/api/task.js"
	let app = getApp()
	export default {
		components: {
			share,
		},
		data() {
			return {
				config: {
					back: false, //false是tolbar页面 是则不写
					title: '我的',
					color: '#fff',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: 'transparent',
					rightSlot: true
				},
				statusBarHeight: app.globalData.statusBarHeight,
				// head: "https://img2.baidu.com/it/u=1297740018,2772695612&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1703350800&t=bbe26f969cf1a55c18b211c29cba6bfe",
				user: {},
				myManagementList: [],
				myData: [],
				moreList: [],
				inCommonUseList: [],
				myUnReadSum: 0,
				isvisible: false,
				apiToken: null,
				showFixed: false,
				integralNum: 0, // 我的积分
				myTackCountNum: 0, // 我的任务数量
				myMedal: null
			}
		},
		onShow() {
			// return
			let apiToken = uni.getStorageSync('apiToken');
			if (!apiToken) {
				this.user = {};
				this.myManagementList = [];
				this.myData = [];
				this.moreList = [];
				this.inCommonUseList = [];
				this.myUnReadSum = 0
				this.myMedal = null;
			} else if (!this.apiToken && apiToken) {
				this.getThemeModuleList('my_management', 'myManagementList');
				this.getThemeModuleList('my_data', 'myData');
				this.getThemeModuleList('more', 'moreList');
			}
			this.apiToken = apiToken;
			this.getUserData();
			this.getNewNum();
			this.getInCommonUseList();

		},
		onLoad() {
			this.getThemeModuleList('my_management', 'myManagementList');
			this.getThemeModuleList('my_data', 'myData');
			this.getThemeModuleList('more', 'moreList');
		},
		onPullDownRefresh() {
			this.getUserData();
			this.getNewNum();
			this.getInCommonUseList();
			this.getThemeModuleList('my_management', 'myManagementList');
			this.getThemeModuleList('my_data', 'myData');
			this.getThemeModuleList('more', 'moreList')
		},
		onPageScroll: function(e) {
			const u = uni.upx2px(100)
			console.log('e.scrollTop = ', e.scrollTop, u)
			this.showFixed = e.scrollTop > u ? true : false
		},
		methods: {
			// go(){
			// 	uni.navigateTo({
			// 		// url:"/pages/web-view/Apps?path=http://192.168.0.136:8084/yige-h5/#/pages/payCentre"
			// 		url:"/pages/web-view/Apps?path=http://192.168.0.136:8084/yige-h5/#/pages/payCentre&title=222"
			// 	})
			// },
			myTackCount() {
				myTackCount_Api().then(res => {
					console.log('res.data = ', res.data)
					this.myTackCountNum = res.data.myTackCount || 0

				})
			},
			getUserMedal() {
				getUserMedal_Api().then(res => {
					const list = res.data || [];
					let myMedal_ = null;
					try {
						list.forEach((el, index) => {
							if (el.currentLevel) {
								const next_ = list[index + 1];
								const percent_num = (el.userScore / el.medalScore).toFixed(2) * 100;
								myMedal_ = {
									...el,
									next_: next_
								};
								myMedal_.percent_num = `${percent_num}%`
								if (percent_num <= 0) myMedal_.percent_num = '0%';
								if (percent_num > 100) myMedal_.percent_num = '100%';
								throw new Error()
							}
						})
					} catch (e) {
						//TODO handle the exception
					}
					myMedal_ = list[0];
					const next_ = list[1];
					const percent_num = (myMedal_.userScore / myMedal_.medalScore).toFixed(2) * 100;
					myMedal_ = {
						...myMedal_,
						next_: next_
					};
					myMedal_.percent_num = `${percent_num}%`
					if (percent_num <= 0) myMedal_.percent_num = '0%';
					if (percent_num > 100) myMedal_.percent_num = '100%';
					this.myMedal = myMedal_ || null;
				})
			},
			goOrder() {
				uni.navigateTo({
					url: "/pages/government/myOrder"
				})
			},
			goToMsg() {
				uni.navigateTo({
					url: "/pages/government/myMsg"
				})
			},
			goToSet() {
				uni.navigateTo({
					url: "/pages/government/set"
				})
			},
			goPersonalData() {
				uni.navigateTo({
					url: "/pages/government/personalData"
				})
			},
			share() {
				this.isvisible = true;
				this.$nextTick(() => {
					this.$refs.shares.shareInfo(
						// '/?pageType=1&type=3&id=' + this.activity_goods_id + '&shareId=' + user.id + '&teamId=' + this.teamId,
						// 'pages/down',
						// this.orderList[0].goods_title,
						// '',
						// this.orderList[0].goods_img
					);
				});
			},
			// 邀请
			shareInfo(params, url, title, des, images, noHome = false) {
				// return this.$mUtil.toast('暂无法使用分享功能')
				let shareList = [{
						icon: '/static/czd/wx.png',
						text: '微信好友'
					},
					{
						icon: '/static/czd/pyq.png',
						text: '朋友圈'
					}
				];

				let shareInfo = {
					href: $config.hostUrls,
					title: title || '"宜格服务"懂宜昌，更懂你!',
					summary: des || '打造宜昌政务、医疗、交通、旅游、教育、生活等综合城市服务平台!',
					imgUrl: images || '/logo.png'
				};
				this.shareObj = share(shareInfo, shareList, index => {
					if (index == 0) {
						uni.share({
							provider: 'weixin',
							scene: 'WXSceneSession',
							type: 0,
							href: shareInfo.href,
							title: shareInfo.title,
							summary: shareInfo.summary,
							imageUrl: shareInfo.imgUrl,
							success: res => {
								this.shareObj.shareMenu.hide();
								this.shareObj.alphaBg.hide();
							},
							fail: function(err) {
								this.shareObj.shareMenu.hide();
								this.shareObj.alphaBg.hide();
							}
						});
					} else if (index == 1) {
						uni.share({
							provider: 'weixin',
							scene: 'WXSenceTimeline',
							type: 0,
							href: shareInfo.href,
							title: shareInfo.title,
							summary: shareInfo.summary,
							imageUrl: shareInfo.imgUrl,
							success: res => {
								this.shareObj.shareMenu.hide();
								this.shareObj.alphaBg.hide();
							},
							fail: function(err) {
								this.shareObj.shareMenu.hide();
								this.shareObj.alphaBg.hide();
							}
						});
					} else {
						this.shareObj.shareMenu.hide();
						this.shareObj.alphaBg.hide();
					}
				});
				this.$nextTick(() => {
					this.shareObj.alphaBg.show();
					this.shareObj.shareMenu.show();
				});
			},
			getUserData() {
				myUserInfo().then(res => {
					this.user = res.data;
					if (res.data) {
						this.getMyMsg()
					}
				}).finally(() => {
					uni.stopPullDownRefresh();
				})
				this.myTackCount();
				this.getUserMedal()
			},
			// 获取我的应用
			getThemeModuleList(markCode, key) {
				this.$yghttp.get(`/themeModule/list/${markCode}`).then(res => {
					const {
						data
					} = res
					if (data) {
						this[key] = data?.themeModuleVoList;
					}

				})
			},
			// 获取我的未读消息总数
			getNewNum() {
				this.$yghttp.get('/message/myUnReadSum').then(res => {
					this.myUnReadSum = res.data
				})
			},
			openMore() {
				uni.navigateTo({
					url: `/pages/government/more-app?type=zhengwujihe`
				});
			},
			// 获取常用应用
			getInCommonUseList() {
				this.$yghttp.get('/third/in_common_use').then(res => {
					// res.data= res.data.splice(0,3);
					let arr = [];
					this.inCommonUseList = []
					res.data.map((v, i) => {
						arr.push(v)
						if (arr.length == 4 && i < res.data.length - 1 || i == res.data.length - 1) {
							let arr1 = JSON.parse(JSON.stringify(arr))
							arr = [];
							this.inCommonUseList.push(arr1);
						}
					})
				})
			},
			//获取我的信息/我积分
			getMyMsg() {
				this.$http.get(getAccountInfo).then(res => {
					if (res && res.code == 200) {
						this.integralNum = res.data?.integral_able || 0;
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.hide-fixed {
		display: none !important;
	}

	.mine-fixed {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		background: url("../../static/czd/mineTBg.png") no-repeat;
		background-size: 100% 350rpx;
		z-index: 1;
		overflow: hidden;

		// display: none;
		.fixed-status {
			width: 100%;
		}

		.fixed-nav {
			width: 100%;
			height: 88rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;

			.fixed-info {
				display: flex;
				align-items: center;

				.mine-left-img {
					flex-shrink: 0;
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
				}

				.name-text {
					padding-left: 20rpx;
					display: block;
					font-size: 28rpx;
					color: #fff;
					font-weight: 600;
					padding-right: 10rpx;
				}

				.certification {
					flex-shrink: 0;
					width: 78.4rpx;
					height: 33.6rpx;
				}
			}

			.fixed-right {
				image {
					width: 38rpx !important;
					height: 38rpx !important;
				}
			}
		}
	}

	.top-box {
		width: 100%;
	}

	// /deep/ .hx-navbar__fixed {
	// 	width: 100%;
	// 	background: url("../../static/czd/mineTBg.png");
	// 	background-size: 100% 400rpx;
	// }

	.Body {
		background: url("../../static/czd/mineTBg.png") no-repeat;
		background-size: 100% 350rpx;
		padding-bottom: 60rpx;
	}

	.nav_r {
		display: flex;
		align-items: center;

		.nav_r_item {
			.news {
				width: 37rpx;
				height: 37rpx;
				margin-right: 30rpx;
			}

			.set {
				width: 44rpx;
				height: 42rpx;
				// margin-right: 40rpx;
			}
		}

		.dian {
			font-size: 0;
			position: relative;

			>view {
				position: absolute;
				width: 37rpx;
				height: 22rpx;
				background: #FB1B1B;
				border-radius: 11rpx 11rpx 11rpx 0;
				font-size: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				top: -14rpx;
				right: 22rpx;
				color: #fff;
			}
		}
	}


	.mine-top {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		padding: $zw-gap $zw-gap 0;

		.mine-left {
			display: flex;
			align-items: center;

			.mine-left-img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				border: 4rpx solid #fff;
			}

			.name-info {
				padding: 0 20rpx;

				.name-box {
					display: flex;
					align-items: center;

					.name-text {
						display: block;
						font-size: 32rpx;
						color: #fff;
						font-weight: 700;
						padding-right: 10rpx;
					}

					.name-tag {
						display: block;
						font-size: 24rpx;
						margin-top: 6rpx;
						color: #fff;
					}

					.certification {
						flex-shrink: 0;
						width: 112rpx;
						height: 48rpx;
					}
				}

				.mobile-info {
					display: block;
					font-size: 24rpx;
					margin-top: 6rpx;
					color: #fff;
				}

			}
		}

		// 	.mine-right {
		// 		display: flex;
		// 		align-items: center;
		// 		justify-content: flex-end;
		// 		// font-size: 32rpx;
		// 		color: #fff;
		// 		// margin-right: 40rpx;

		// 		.nav_r_item {

		// 			.news {
		// 				width: 37rpx;
		// 				height: 37rpx;
		// 				margin-right: 30rpx;
		// 			}

		// 			.set {
		// 				width: 44rpx;
		// 				height: 42rpx;
		// 				margin-right: 20rpx;
		// 			}
		// 		}
		// 	}


	}

	.integral-box {
		margin-top: 30rpx;
		width: 100%;
		height: 140rpx;
		background: linear-gradient(42deg, #3cb7d2 0%, #45c7d5 100%) #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		box-shadow: 0px 3rpx 23.49rpx 3.51rpx rgba(207, 207, 207, 0.23);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx 40rpx 40rpx;
		color: #fff;

		.integral-item {
			display: flex;
			align-items: center;
			flex-shrink: 0;

			.integral-icon {
				font-size: 36rpx;
			}

			.integral-title {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				padding-left: 17rpx;
			}

			.integral-num {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				padding-right: 15rpx;
			}

			.integral-more {
				font-size: 30rpx;
			}
		}

		.integral-info {
			flex: 1;
			width: 1px;
			justify-content: flex-end;
		}

	}

	.class-type {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		background-color: #fff;
		padding: 40rpx;
		border-radius: 20rpx;

		margin-top: -40rpx;

		.class-type-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.class-item-img {
				width: 80rpx;
				height: 80rpx;
			}

			.class-item-text {
				font-size: 24rpx;
				padding-top: 20rpx;
			}
		}

	}

	.myData {
		background-color: #fff;
		padding: 40rpx 40rpx 20rpx 40rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;

		.myData_box {
			box-sizing: border-box;
			overflow: auto;
		}

		.myData_title {
			font-weight: 700;
			padding-bottom: 40rpx;
			font-size: 32rpx;
		}

		.myData_list {
			width: max-content;

			.myData_item {
				// width: 230rpx;
				// height: 150rpx;
				// margin: 20rpx 20rpx 0 0;
				display: inline-block;
				font-size: 0;

				// background: rgb(249,248,253);
				// padding: 30rpx 0 0 20rpx;
				// .myData_item_tit{
				// }
				// .myData_item_tig{
				// 	margin-top: 10rpx;
				// 	font-size: 24rpx;
				// }
				image {
					width: 245rpx;
					height: 156rpx;
					margin-right: 23rpx;
				}
			}

			.myData_item:last-child {
				margin-right: 0rpx;
			}
		}
	}

	.service {
		background-color: #fff;
		padding: 40rpx 40rpx 20rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;

		.service_title {
			font-weight: 700;
			padding-bottom: 40rpx;
			font-size: 32rpx;
		}

		.service_box {
			overflow: auto;

			.service_list {
				.itemBox {
					display: flex;
				}

				// width: max-content;
				.swiper {
					width: 100%;
					height: 170rpx;

					/deep/ .uni-swiper-dots-horizontal {
						bottom: 8rpx;

						.uni-swiper-dot {
							width: 10rpx;
							height: 10rpx;
							border-radius: 50%;
							transition: 0.3s all ease;
						}

						.uni-swiper-dot-active {
							width: 26rpx;
							height: 8rpx;
							border-radius: 10rpx;
							transition: 0.3s all ease;
						}
					}
				}

				.service_item {
					width: 25%;
					text-align: center;
					display: inline-block;
					// flex: 1;
					// margin: 0 22rpx;

					.service_item_img {
						font-size: 0;
						margin: 0 22rpx;

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

					.service_item_tit {
						font-size: 24rpx;
						margin-top: 20rpx;
					}
				}
			}
		}
	}

	.moreCls {
		background-color: #fff;
		padding: 40rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;

		.moreCls_title {
			padding-bottom: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			>view {
				font-size: 32rpx;
				font-weight: 700;
				display: flex;
				align-items: center;

				image {
					width: 17rpx;
					height: 19rpx;
				}
			}
		}

		.moreCls_list {
			display: flex;
			justify-content: space-between;

			.moreCls_item {
				text-align: center;

				.moreCls_item_img {
					image {
						width: 50rpx;
						height: 50rpx;
					}
				}

				.moreCls_item_title {
					font-size: 24rpx;
					margin-top: 10rpx;
				}
			}
		}
	}

	.task-box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		margin-top: 20rpx;

		.task-item {
			width: calc(50% - 10rpx);
			background-color: #fff;
			display: flex;
			// justify-content: space-between;
			align-items: center;
			border-radius: 20rpx;
			padding: 20rpx;

			.task-icon {
				width: 60rpx;
				height: 60rpx;

				.iconfont_yige {
					font-size: 50rpx;
					line-height: 60rpx;
				}
			}

			.task-content {
				padding-left: 20rpx;
				max-width: calc(100% - 60rpx);
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.task-content-title {
					width: 100%;
					font-size: 28rpx;
				}

				.task-value {
					width: 100%;
					font-size: 24rpx;
					color: #9A9A9A;
				}

				.task-level {
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					// padding-right: 10rpx;
					.task-level-line {
						flex: 1;
						width: 50rpx;
						height: 2rpx;
						background-color: #BBBBBB;
						margin: 0 10rpx;

						.line-color {
							display: block;
							height: 100%;
							background-color: #01DBFF;
						}
					}
				}
			}
		}
	}
</style>