fanghuayuexuan/pages/user/index.vue

<template>
	<view>
		<view class="top-cont">
			<view class="top-inner">
				<!-- 这里是状态栏 -->
				<view class="status_bar" :style="{height: statusBarHeight}"></view>
				<view class="top-block">
					<view class="qscode-block">
						<view class="qscode">
							<image class="w40 h40" src="/static/images/qscode_icon.png"></image>
						</view>
					</view>
					<view class="user-info">

						<view class="left" @click="openPersonInfo()">
							<view class="head-img">
								<image :src="user.avatar==null?'/static/images/detault_head.jpg':user.avatar"
									mode="aspectFill"></image>
							</view>
							<view class="name-phone">
								<view class="name">
									<text>{{user.nickname}}</text>
									<image class="w48 h48" src="/static/images/right1.png"></image>
								</view>
								<view class="user-page">
									<text>个人主页</text>
									<image class="w32 h32" src="/static/images/right1.png"></image>
								</view>

								<view class="lable">
									<view class="lable-item">
										<image class="w32 h32 mr8" src="/static/images/lv_icon.png"></image>
										<text>会员</text>
									</view>
									<view class="lable-item yellow">
										<image class="w32 h32 mr8" src="/static/images/intelligent_icon.png"></image>
										<text>LV.2</text>
									</view>
								</view>
							</view>
						</view>
						<view class="right">
							<!-- <uni-badge size="small" :text="msgNum" absolute="rightTop" type="error">
							<view class="set" @click="navgetTo('/pages_user/user/personInfo')">
								<image src="../../static/images/icon-set.png" mode=""></image>
							</view>
						</uni-badge> -->
							<uni-badge size="small" :text="msgNum" absolute="rightTop" type="error">
								<view class="msg-box" @click="navgetTo('/pages_user/user/message')">
									<image src="../../static/images/icon-msg.png" mode=""></image>
								</view>
							</uni-badge>
						</view>
					</view>
					<!-- 芳华币数量及券 -->
					<view class="data">
						<view class="data-item" v-for="(item,index) in dataList" :key="index">
							<view class="number">{{item.num}}</view>
							<view class="txt">{{item.title}}</view>
						</view>
					</view>
				</view>
				<!-- 会员 -->
				<view class="member">
					<image class="bg" src="/static/images/vip_bg.png"></image>
					<view class="member-block">
						<view class="left">
							<view class="vip">
								<image class="w126 h30 mr34" src="/static/images/VIP_member.png"></image>
								<text>已过期4天</text>
							</view>
							<view class="count">
								续费享季卡会员约<text class="bold">6.5</text> 折
							</view>
						</view>
						<view class="right">
							立即续费
						</view>
					</view>
				</view>
				<!-- 我的订单 -->
				<view class="my-order">
					<view class="inner">
						<view class="title-box">
							<text class="title">我的订单</text>
							<view class="all-order" @click="showOrder('')">
								<text class="text">全部订单</text>
								<image src="../../static/images/arrow4.png" mode=""></image>
							</view>
						</view>
						<view class="status-box">
							<uni-badge size="small" :text=count0 absolute="rightTop" type="error">
								<view class="item" @click="showOrder('0')">
									<image src="../../static/images/payment.png" mode=""></image>
									<text class="text">待付款</text>
								</view>
							</uni-badge>
							<uni-badge size="small" :text=count1 absolute="rightTop" type="error">
								<view class="item" @click="showOrder('1')">
									<image src="../../static/images/send_goods.png" mode=""></image>
									<text class="text">待发货</text>
								</view>
							</uni-badge>
							<uni-badge size="small" :text=count2 absolute="rightTop" type="error">
								<view class="item" @click="showOrder('2')">
									<image src="../../static/images/sou_goods.png" mode=""></image>
									<text class="text">待收货</text>
								</view>
							</uni-badge>
							<view class="item" @click="showOrder('3')">
								<image src="../../static/images/completed.png" mode=""></image>
								<text class="text">已完成</text>
							</view>
							<uni-badge size="small" :text=afterSalesCount absolute="rightTop" type="error">
								<view class="item" @click="navgetTo('/pages_user/user/refundOrderList')">
									<image src="../../static/images/after_sales.png" mode=""></image>
									<text class="text">售后/退款</text>
								</view>
							</uni-badge>
						</view>
					</view>
				</view>
				<!-- 芳华币签到 -->
				<view class="coin-card">
					<image class="bg" src="/static/images/sign_in_bg.png"></image>
					<view class="container">
						<view class="coin-txt">
							<view class="left">已连续签到 <text class="bold">1</text>天</view>
							<view class="right">我的芳华币：4578</view>
						</view>
						<view class="item">
							<!-- <view class="progress"></view> -->

							<view class="progress">
								<view v-for="(item,index) in sign" :key="index"
									:class="signNum >= index+ 1?'item active':'item'">
									<view class="line"></view>
									<view class="right">
										<!-- 已签到图标 -->
										<image v-if="signNum >= index+ 1" src="/static/images/right_org.png" mode="">
										</image>
										<!-- 未签到图标 -->
										<image v-else src="/static/images/right_org_ling.png" mode=""></image>
										<text class="text">第{{ item.day }}天</text>
									</view>
								</view>
							</view>
							<image class="button" mode="widthFix" src="/static/images/check_in.png"></image>
						</view>
					</view>
				</view>
				<view class="content">
					<!-- 常用工具 -->
					<view class="used-tools">
						<view class="title">我的应用</view>
						<view class="tools-list">
							<!-- <view 
								v-for="(item,index) in toolsArr" 
								:key="index" 
								@click="navgetTo(item.url)" 
								:class="(toolsArr.length - index) > toolsRemain?'item':'item no-marin-bottom'">
								<image :src="item.img" mode=""></image>
								<text class="text">{{ item.name }}</text>
								<button v-if="item.url == ''" class="contact-btn" open-type="contact"></button>
							</view> -->
							<!-- <view class="item" @click="navgetTo('/pages_user/user/doctorOrder')">
								<image src="../../static/images/my_ask.png" mode=""></image>
								<text class="text">我的问诊</text>
							</view> -->
							<view class="item no-marin-bottom" @click="navgetTo('/pages_shopping/live/order')">
								<image src="../../static/images/live.png" mode=""></image>
								<text class="text">直播订单</text>
							</view>
							<view class="item" @click="navgetTo('/pages_user/user/prescribeOrder')">
								<image src="../../static/images/prescription.png" mode=""></image>
								<text class="text">我的处方</text>
							</view>
							<view class="item" @click="navgetTo('/pages_user/user/patient')">
								<image src="../../static/images/management.png" mode=""></image>
								<text class="text">就诊人管理</text>
							</view>
							<view class="item" @click="navgetTo('/pages_user/user/address')">
								<image src="../../static/images/address.png" mode=""></image>
								<text class="text">收货地址</text>
							</view>
							<!-- <view class="item no-marin-bottom" @click="navgetTo('/pages_user/user/integral')">
								<image src="../../static/images/integral.png" mode=""></image>
								<text class="text">积分管理</text>
							</view> -->
							<view class="item no-marin-bottom" @click="navgetTo('/pages_shopping/shopping/myCoupon')">
								<image src="../../static/images/mycoupon.png" mode=""></image>
								<text class="text">领券中心</text>
							</view>
							<view class="item no-marin-bottom"
								@click="navgetTo('/pages_user/user/storeProductRelation')">
								<image src="../../static/images/service_file.png" mode=""></image>
								<text class="text">我的足迹</text>
							</view>
							<view class="item no-marin-bottom" @click="openH5(1)">
								<image src="../../static/images/service_file.png" mode=""></image>
								<text class="text">用户协议</text>
							</view>
							<view class="item no-marin-bottom align-top" @click="openH5(2)">
								<image src="../../static/images/advice.png" mode=""></image>
								<text class="text">隐私保护</text>
							</view>
							<view class="item no-marin-bottom">
								<image src="../../static/images/customer1.png" mode=""></image>
								<text class="text">专属客服</text>
								<button class="contact-btn" open-type="contact"></button>
							</view>
							<view v-if="user.isPromoter==0" class="item no-marin-bottom"
								@click="navgetTo('/pages_user/user/userTuiAdd')">
								<image src="../../static/images/my_promotion.png" mode=""></image>
								<text class="text">申请健康大使</text>
							</view>
							<view v-if="user.isPromoter==1" class="item no-marin-bottom"
								@click="navgetTo('/pages_user/user/userTui')">
								<image src="../../static/images/my_promotion.png" mode=""></image>
								<text class="text">我的推广</text>
							</view>
							<view class="item no-marin-bottom" @click="navgetTo('/pages/home/cert')">
								<image src="../../static/images/service_file.png" mode=""></image>
								<text class="text">资质证书</text>
							</view>

							<view class="item no-marin-bottom" @click="toManager()">
								<image src="../../static/images/management.png" mode=""></image>
								<text class="text">销售管理</text>
							</view>
						</view>
					</view>

					<view class="used-tools">
						<view class="title">我的视频</view>
						<view class="tools-list">
							<view class="item no-marin-bottom" @click="navgetTo('/pages_shopping/live/order')">
								<image src="../../static/images/live.png" mode=""></image>
								<text class="text">直播订单</text>
							</view>
						</view>
					</view>

					<view class="used-tools">
						<view class="title">管理应用</view>
						<view class="tools-list">
							<view class="item no-marin-bottom" @click="navgetTo('/pages_shopping/shopping/myCoupon')">
								<image src="../../static/images/mycoupon.png" mode=""></image>
								<text class="text">领券中心</text>
							</view>
							
							<view class="item no-marin-bottom" @click="openH5(1)">
								<image src="../../static/images/service_file.png" mode=""></image>
								<text class="text">用户协议</text>
							</view>
							
							<view class="item no-marin-bottom">
								<image src="../../static/images/customer1.png" mode=""></image>
								<text class="text">专属客服</text>
								<button class="contact-btn" open-type="contact"></button>
							</view>
							<view v-if="user.isPromoter==0" class="item no-marin-bottom"
								@click="navgetTo('/pages_user/user/userTuiAdd')">
								<image src="../../static/images/my_promotion.png" mode=""></image>
								<text class="text">申请健康大使</text>
							</view>
							<view v-if="user.isPromoter==1" class="item no-marin-bottom"
								@click="navgetTo('/pages_user/user/userTui')">
								<image src="../../static/images/my_promotion.png" mode=""></image>
								<text class="text">我的推广</text>
							</view>
							<view class="item no-marin-bottom" @click="navgetTo('/pages/home/cert')">
								<image src="../../static/images/service_file.png" mode=""></image>
								<text class="text">资质证书</text>
							</view>

							<view class="item no-marin-bottom" @click="toManager()">
								<image src="../../static/images/management.png" mode=""></image>
								<text class="text">销售管理</text>
							</view>

						</view>
					</view>
					<!-- 退出登录按钮 -->
				</view>
				<view style="padding-bottom: 20rpx;" v-if="user.phone!=''">
					<view @tap="loginOUt" class="log-out x-c">退出登录</view>
				</view>
				<!-- <view class="banner">
					<image src="https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20221125/71ddd95044bb46d5b27e19a5f61cf5ab.png"></image>
					<view class="tel_btn" @click="callService()"></view>
				</view> -->
				<view class="like-product">
					<likeProduct ref="product" />
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		getOrderCount
	} from '@/api/storeOrder'
	import {
		getUserInfo
	} from '@/api/user'
	import likeProduct from '@/components/likeProduct.vue'
	export default {
		components: {
			likeProduct
		},
		data() {
			return {
				signNum: 2,
				sign: [{
					day: 1
				}, {
					day: 2
				}, {
					day: 3
				}, {
					day: 4
				}],

				dataList: [{
					num: '55',
					title: '芳华币'
				}, {
					num: '55',
					title: '待用券'
				}, {
					num: '55',
					title: '已用券'
				}, {
					num: '55',
					title: '过期券'
				}],
				count0: 0,
				count1: 0,
				count2: 0,
				afterSalesCount: 0,
				user: {
					isPromoter: 0,
					isWeixinAuth: 0,
					phone: "",
					nickname: "请登录",
					avatarUrl: "/static/images/detault_head.png"
				},
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				// 消息数量
				msgNum: 0,


			};
		},
		onLoad() {
			console.log("onload")
		},
		onShow() {
			console.log("onshow")
			var that = this;
			if (uni.getStorageSync('AppToken')) {
				that.getUserInfo();
				that.getOrderCount();
			}
			// this.utils.isLogin().then(res => {
			// 	that.getUserInfo();
			// 	that.getOrderCount();
			// })

		},
		onReachBottom() {
			console.log("onReachBottom")
			this.$refs.product.getGoodsProducts();
		},
		methods: {
			toManagerCourse() {
				if (uni.getStorageSync('ManageToken')) {
					uni.navigateTo({
						url: '/pages_manage/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages_manage/login'
					})
				}

			},
			// loginOUt(){
			// 	this.utils.loginOut();
			// 	this.getUserInfo();
			// 	// uni.switchTab({
			// 	// 	url:'/pages/home/index'
			// 	// })
			// },
			loginOUt() {
				const that = this;
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: function(res) {
						if (res.confirm) {
							// 先重置用户数据为默认值
							that.user = {
								isPromoter: 0,
								isWeixinAuth: 0,
								phone: "",
								nickname: "请登录",
								avatarUrl: "/static/images/detault_head.png",
								avatar: null // 确保头像也被重置
							};

							// 清空本地存储的用户数据
							uni.removeStorageSync('userData');

							// 执行退出登录逻辑
							that.utils.loginOut();

							// 重置订单数量
							that.count0 = 0;
							that.count1 = 0;
							that.count2 = 0;
							that.afterSalesCount = 0;
							that.msgNum = 0;

							// 可选：提示退出成功
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							});

							// 可选：如果需要刷新页面数据，可以重新调用 onShow 中的方法
							// 但由于我们已经手动重置了数据，这一步不是必需的
						}
					}
				});
			},
			openPersonInfo() {
				this.utils.isLogin().then(res => {
					uni.navigateTo({
						url: "/pages_user/user/personInfo"
					})
				})

			},
			callService() {
				uni.makePhoneCall({
					phoneNumber: "4000717770",
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			},

			getOrderCount() {
				getOrderCount().then(
					res => {
						if (res.code == 200) {
							this.count0 = res.count0;
							this.count1 = res.count1;
							this.count2 = res.count2;
							this.afterSalesCount = res.afterSalesCount;
						}
					},
					rej => {}
				);
			},
			toManager() {
				if (this.utils.checkCompanyUserLoginState()) {
					uni.navigateTo({
						url: '/pages_company/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages_company/auth/login'
					})
				}

			},
			openH5(type) {
				var requestPath = uni.getStorageSync('requestPath');
				// uni.setStorageSync('url',requestPath+url);
				uni.navigateTo({
					url: '../home/h5?type=' + type
				})
			},
			getUserInfo() {
				getUserInfo().then(
					res => {
						if (res.code == 200) {
							if (res.user != null) {
								this.user = res.user;
								uni.setStorageSync('userData', res.user)
							} else {
								this.utils.loginOut();
							}

						} else {
							uni.showToast({
								icon: 'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			// 跳转页面
			navgetTo(url) {
				this.utils.isLogin().then(res => {
					if (res) {
						uni.navigateTo({
							url: url
						})
					}
				})
			},
			// 查看订单
			showOrder(status) {
				uni.navigateTo({
					url: '/pages_user/user/storeOrder?status=' + status
				})
			}
		}
	}
</script>

<style lang="scss">
	.top-cont {
		width: 100%;
		height: 532rpx;
		position: relative;
		background: radial-gradient( 60% 60% at 70% 11%, #C5EFEA 0%, rgba(245,246,246,0) 100%);
		// background-image: url(../../static/images/personl_top_bg.png);
		// background-image: url(../../static/images/red_bg.png);
		// background-image: url(../../static/images/viewer_top.png);
		// background-image: url(https://placehold.co/400x200/red/white);

		// background-repeat: repeat-x;
		// background-size: 40rpx 100%;

		.top-inner {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;

			.top-block {
				padding: 0 30rpx 0 30rpx;
				display: flex;
				flex-direction: column;

				.qscode-block {
					display: flex;
					justify-content: flex-end;

					.qscode {
						width: 64rpx;
						height: 64rpx;
						padding: 12rpx;
						margin-right: 210rpx;
						border-radius: 32rpx 32rpx 32rpx 32rpx;
						border: 1rpx solid #E9E9E9;
						box-sizing: border-box;
						background: #FFFFFF;

					}
				}

				.user-info {
					// padding: 88rpx 30rpx 0 30rpx;
					padding: 0 30rpx 0 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						position: relative;
						display: flex;

						.head-img {
							width: 128rpx;
							height: 128rpx;
							border-radius: 50%;
							overflow: hidden;
							margin-right: 30rpx;
							border: 4rpx solid #FFFFFF;
							box-shadow: 0px 5px 15px 2px rgba(0, 0, 0, 0.1);

							image {
								width: 100%;
								height: 100%;
							}
						}

						.name-phone {
							padding-top: 15rpx;

							.name {
								font-size: 40rpx;
								font-family: PingFang SC;
								font-weight: 600;
								color: #333333;
								display: flex;
								align-items: center;
							}

							.user-page {
								width: 160rpx;
								box-sizing: border-box;
								background: #FFFFFF;
								border-radius: 22rpx 22rpx 22rpx 22rpx;
								text-align: center;
								padding: 6rpx 16rpx 4rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								margin-top: 12rpx;
								font-size: 24rpx;
								color: #626469;
							}

							.lable {
								display: flex;
								align-items: center;
								margin-top: 16rpx;

								.lable-item {
									display: flex;
									justify-content: center;
									box-sizing: border-box;
									font-weight: 500;
									font-size: 22rpx;
									color: #FEF5EA;
									background: linear-gradient(90deg, #F26F00 0%, #FF9D1F 100%);
									border-radius: 20rpx 20rpx 20rpx 20rpx;
									border: 1rpx solid #FEDDB9;
									width: 118rpx;
									height: 40rpx;
								}

								.yellow {
									background: linear-gradient(90deg, #F5CE3C 0%, #E39414 100%);
								}
							}
						}
					}

					.right {
						display: flex;
						align-items: center;
						justify-content: center;

						.msg-box {
							margin-left: 10rpx;
							width: 44rpx;
							height: 44rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.set {

							width: 44rpx;
							height: 44rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}

				}

				.data {
					margin: 40rpx 8rpx 30rpx;
					display: flex;
					justify-content: space-between;

					.data-item {
						text-align: center;

						.number {
							font-weight: 500;
							font-size: 40rpx;
							color: #333333;
						}

						.txt {
							margin-top: 12rpx;
							font-size: 24rpx;
							color: #666666;
						}
					}
				}
			}

			.member {
				width: 702rpx;
				height: 172rpx;
				background: linear-gradient(90deg, #FFF3DF 0%, #FADBA9 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: 0 auto;
				position: relative;
				z-index: -2;

				.bg {
					width: 702rpx;
					height: 172rpx;
					position: absolute;
					top: 0;
					z-index: -1;
				}

				.member-block {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 36rpx 32rpx;
					box-sizing: border-box;

					.left {
						display: flex;
						flex-direction: column;

						.vip {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #834F00;
						}

						.count {
							font-weight: 500;
							font-size: 32rpx;
							color: #885201;

							.bold {
								font-family: Roboto, Roboto;
								font-weight: bold;
								font-size: 40rpx;
								color: #EA8F07;
							}
						}
					}
				}

				.right {
					width: 176rpx;
					height: 72rpx;
					background: #885201;
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					text-align: center;
					line-height: 72rpx;
					font-weight: 600;
					font-size: 28rpx;
					color: #FFF6E7;
				}
			}

			.my-order {
				padding: 50rpx 20rpx 0;

				.inner {
					box-sizing: border-box;
					height: 245rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					padding: 40rpx 30rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title-box {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.title {
							font-size: 34rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #222222;
							line-height: 1;
						}

						.all-order {
							display: flex;
							align-items: center;

							.text {
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
								line-height: 1;
								margin-right: 8rpx;
							}

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

					.status-box {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 10rpx;

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

							image {
								width: 40rpx;
								height: 40rpx;
								margin-bottom: 18rpx;
							}

							.text {
								font-size: 26rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #111111;
								line-height: 1;
							}
						}
					}
				}
			}

		}
	}

	.coin-card {
		width: 702rpx;
		height: 380rpx;
		background: linear-gradient(180deg, #FF5600 0%, #FFB501 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		position: relative;
		z-index: -2;
		margin: 20rpx auto;

		.bg {
			width: 702rpx;
			height: 380rpx;
			position: absolute;
			top: 0;
			z-index: -1;
		}

		.container {
			padding: 20rpx;

			.coin-txt {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 18rpx 0;

				.left {
					font-weight: 600;
					font-size: 32rpx;
					color: #FFFFFF;

					.bold {
						font-family: Roboto, Roboto;
						font-weight: bold;
						font-size: 56rpx;
						color: #FEEBC9;
					}
				}

				.right {
					padding: 4rpx 16rpx;
					background: #FFF3D7;
					font-size: 24rpx;
					color: #FF5C03;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border: 2rpx solid rgba(255, 255, 255, 0.3);
				}
			}

			.item {
				background: #FEFAF7;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				padding: 34rpx 32rpx 32rpx;

				.progress {
					display: flex;
					align-items: center;
					justify-content: space-between;
					// margin-top: 40upx;

					.item {
						display: flex;
						justify-content: center;

						.right {
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;

							image {
								width: 44upx;
								height: 44upx;
								margin-bottom: 20upx;
							}

							.text {
								font-size: 24upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #FF7511;
								line-height: 1;
								white-space: nowrap;
							}
						}

						.line {
							width: 34upx;
							height: 4upx;
							background: #F6CDA7;
							border-radius: 2upx;
							margin-top: 22upx;
						}

						&:first-child {
							.line {
								display: none;
							}
						}

						&.active {
							.line {
								background: #FF8E3C;
							}
						}
					}
				}

				.button {
					width: 598rpx;
				}
			}

		}
	}

	.content {
		margin-top: 20rpx;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
flex-direction: column;
		.used-tools {
			margin-top: 20rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 40rpx 30rpx;

			.title {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #222222;
				line-height: 1;
			}

			.tools-list {
				margin-top: 50rpx;
				display: flex;
				flex-wrap: wrap;
				width: 100%;

				.item {
					box-sizing: border-box;
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-bottom: 50rpx;
					position: relative;

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

					.text {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
						line-height: 1;
						margin-top: 20rpx;
					}

					.contact-btn {
						display: inline-block;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
					}
				}
			}
		}

	}

	.sub-btn {
		position: absolute;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.like-product {
		padding: 0 20rpx;

	}

	.banner {
		padding: 20rpx 20rpx 0rpx 20rpx;
		height: 200rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 100%;
			height: 100%;
		}

		.tel_btn {
			width: 100%;
			height: 100%;
			top: 0rpx;
			position: absolute;
			opacity: 0.0;
		}
	}

	.log-out {
		height: 80rpx;
		margin: 20rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 20rpx;
	}
</style>