feat: bug 修复

pagesHouse/home/index.vue

@@ -1,433 +1,432 @@
-<template>
-
-	<view class="page" :style="{'min-height':(h)+'px'}">
-		<u-navbar bgColor="transparent">
-			<view class="u-nav-slot" slot="left" style="display: flex;" @tap="shShow=true">
-				<text>{{name}}</text>
-				<u-icon name="arrow-down" size="28" :bold="true" color="#111"></u-icon>
-			</view>
-		</u-navbar>
-		<u-picker :show="shShow" :columns="nameList" @close="shShow=false" @cancel="shShow=false" @confirm="confirm"
-			:immediateChange="true" itemHeight="88"></u-picker>
-		<view class="bg" :style="{'padding-top':(mt+10)+'px'}">
-			<view class="dataBox">
-				<view class="item">
-					<view>成交金额</view>
-					<view>￥<text>{{merchantType==10?info.numMoneyToday:info.todayOrderAmount}}</text></view>
-					<view>昨日¥{{merchantType==10?info.numMoneyYesterday:info.yesterdayOrderAmount}}</view>
-				</view>
-				<view class="item">
-					<view>退款金额</view>
-					<view>￥<text>{{merchantType==10?info.numRefundMoneyToday:info.todayRefundAmount}}</text></view>
-					<view>昨日¥{{merchantType==10?info.numRefundMoneyYesterday:info.yesterdayRefundAmount}}</view>
-				</view>
-				<view class="item">
-					<view>成交订单数</view>
-					<view>￥<text>{{merchantType==10?info.numOrderToday:info.todayOrders}}</text></view>
-					<view>昨日{{merchantType==10?info.numOrderYesterday:info.yesterdayOrders}}</view>
-				</view>
-				<view class="item">
-					<view>退款订单数</view>
-					<view>￥<text>{{merchantType==10?info.numRefundOrderToday:info.todayRefundOrders}}</text></view>
-					<view>昨日{{merchantType==10?info.numRefundOrderYesterday:info.yesterdayRefundOrders}}</view>
-				</view>
-
-			</view>
-			<view class="numberData">
-				<view @click="toHref('/pagesHouse/Mine/ordersList/index?typeTxt=待付款')">
-					<text>{{merchantType==10?info.unPayNum:info.todayObligationOrders}}</text>
-					<text>待付款</text>
-				</view>
-				<view @click="toHref('/pagesHouse/Mine/ordersList/index?typeTxt=待使用')">
-					<text>{{merchantType==10?info.unUseNum:info.todayPendingOrders||0}}</text>
-					<text>待使用</text>
-				</view>
-				<view @click="toHref('/pagesHouse/Mine/ordersList/index?typeTxt=已完成')">
-					<text>{{merchantType==10?info.completeNum:info.todayOrders||0}}</text>
-					<text>已完成</text>
-				</view>
-				<view @click="toHref('/pagesHouse/Mine/ordersList/index?typeTxt=已取消')">
-					<text>{{merchantType==10?info.joinNum:info.todayCancelledOrders||0}}</text>
-					<text>{{merchantType==10?'拼团中':'已取消'}}</text>
-				</view>
-				<view @click="toHref('/pagesHouse/Mine/ordersList/index?typeTxt=退款售后')">
-					<text>{{merchantType==10?info. refundNum:info.todayRefundOrders||0}}</text>
-					<text>退款售后</text>
-				</view>
-			</view>
-			<view class="menus">
-				<view @click="toHref('/pagesHouse/HotelMerchandise/index')">
-					<image :src="icons[0]"></image>
-					<text>商品管理</text>
-				</view>
-				<view @click="toHref('/pagesHouse/Verification/record')" v-if="merchantType==10">
-					<image :src="icons[1]"></image>
-					<text>核销记录</text>
-				</view>
-				<view @click="toHref('/pagesHouse/Verification/recordCy')" v-if="merchantType==4">
-					<image :src="icons[1]"></image>
-					<text>核销记录</text>
-				</view>
-				<view @click="toHref('/pagesHouse/home/bill')">
-					<image :src="icons[2]"></image>
-					<text>交易账单</text>
-				</view>
-				<view @click="toHref('/pagesHouse/home/tj')">
-					<image :src="icons[3]"></image>
-					<text>数据统计</text>
-				</view>
-			</view>
-		</view>
-		<view class="list">
-			<view class="tit">
-				<text>订单列表</text>
-				<text>{{new Date().Format('yyyy-MM-dd')}}</text>
-				<!-- <u-icon @click="more()" name="arrow-right" label="查看全部" labelPos="left" labelSize="13px"
-					labelColor="#808080" color="#AAA"></u-icon> -->
-			</view>
-			<view class="li first">
-				<text>订单信息</text>
-				<text>销量</text>
-				<text>成交金额</text>
-			</view>
-			<view class="li" v-for="(item,index) in list" :key="index">
-				<view class="avatar">
-					<image :src="merchantType==10?item.coverImg:item.productImg"></image>
-					<text>{{merchantType==10?item.goodsName:item.productName}}</text>
-				</view>
-				<text>{{merchantType==10?item.countNum:item.num}}</text>
-				<text>￥{{merchantType==10?item.sumNum:item.realityPay}}</text>
-			</view>
-		</view>
-		<u-picker :show="shShow" :columns="nameList" @close="shShow=false" @cancel="shShow=false" @confirm="confirm"
-			:immediateChange="true" itemHeight="88"></u-picker>
-		<Tabbares :tabbarid="0" :value="0"></Tabbares>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				merchantName: uni.getStorageSync('merchantName'),
-				emg: 'https://i.ringzle.com/file/20240224/91173dde1cb44b139129e12ad4971f1d.png',
-				icons: ['https://i.ringzle.com/file/20240316/cb736aa1ebea42b68f73a0532bac1875.png',
-					'https://i.ringzle.com/file/20240224/70ab9f9d1a144c95927dedc6e84bcce7.png',
-					'https://i.ringzle.com/file/20240224/3f990c250f444ac9a5d9f334f322c98e.png',
-					'https://i.ringzle.com/file/20240224/7ca1bfa6e348438e83edc5af0589f847.png'
-				],
-				info: {},
-				list: [],
-				nameList: [],
-				shShow: false,
-				shList: [],
-				name: '',
-				merchantType:'',
-			}
-		},
+<template>
+
+	<view class="page" :style="{'min-height':(h)+'px'}">
+		<u-navbar bgColor="transparent">
+			<view class="u-nav-slot" slot="left" style="display: flex;" @tap="shShow=true">
+				<text>{{name}}</text>
+				<u-icon name="arrow-down" size="28" :bold="true" color="#111"></u-icon>
+			</view>
+		</u-navbar>
+		<u-picker :show="shShow" :columns="nameList" @close="shShow=false" @cancel="shShow=false" @confirm="confirm"
+			:immediateChange="true" itemHeight="88"></u-picker>
+		<view class="bg" :style="{'padding-top':(mt+10)+'px'}">
+			<view class="dataBox">
+				<view class="item">
+					<view>成交金额</view>
+					<view>￥<text>{{merchantType==10?info.numMoneyToday:info.todayOrderAmount}}</text></view>
+					<view>昨日¥{{merchantType==10?info.numMoneyYesterday:info.yesterdayOrderAmount}}</view>
+				</view>
+				<view class="item">
+					<view>退款金额</view>
+					<view>￥<text>{{merchantType==10?info.numRefundMoneyToday:info.todayRefundAmount}}</text></view>
+					<view>昨日¥{{merchantType==10?info.numRefundMoneyYesterday:info.yesterdayRefundAmount}}</view>
+				</view>
+				<view class="item">
+					<view>成交订单数</view>
+					<view>￥<text>{{merchantType==10?info.numOrderToday:info.todayOrders}}</text></view>
+					<view>昨日{{merchantType==10?info.numOrderYesterday:info.yesterdayOrders}}</view>
+				</view>
+				<view class="item">
+					<view>退款订单数</view>
+					<view>￥<text>{{merchantType==10?info.numRefundOrderToday:info.todayRefundOrders}}</text></view>
+					<view>昨日{{merchantType==10?info.numRefundOrderYesterday:info.yesterdayRefundOrders}}</view>
+				</view>
+
+			</view>
+			<view class="numberData">
+				<view @click="toHref('/pagesHouse/Mine/ordersList/index?typeTxt=待付款')">
+					<text>{{merchantType==10?info.unPayNum:info.todayObligationOrders}}</text>
+					<text>待付款</text>
+				</view>
+				<view @click="toHref('/pagesHouse/Mine/ordersList/index?typeTxt=待使用')">
+					<text>{{merchantType==10?info.unUseNum:info.todayPendingOrders||0}}</text>
+					<text>待使用</text>
+				</view>
+				<view @click="toHref('/pagesHouse/Mine/ordersList/index?typeTxt=已完成')">
+					<text>{{merchantType==10?info.completeNum:info.todayFinishOrders||0}}</text>
+					<text>已完成</text>
+				</view>
+				<view @click="toHref('/pagesHouse/Mine/ordersList/index?typeTxt=已取消')">
+					<text>{{merchantType==10?info.joinNum:info.todayCancelledOrders||0}}</text>
+					<text>{{merchantType==10?'拼团中':'已取消'}}</text>
+				</view>
+				<view @click="toHref('/pagesHouse/Mine/ordersList/index?typeTxt=退款售后')">
+					<text>{{merchantType==10?info. refundNum:info.todayRefundOrders||0}}</text>
+					<text>退款售后</text>
+				</view>
+			</view>
+			<view class="menus">
+				<view @click="toHref('/pagesHouse/HotelMerchandise/index')">
+					<image :src="icons[0]"></image>
+					<text>商品管理</text>
+				</view>
+				<view @click="toHref('/pagesHouse/Verification/record')" v-if="merchantType==10">
+					<image :src="icons[1]"></image>
+					<text>核销记录</text>
+				</view>
+				<view @click="toHref('/pagesHouse/Verification/recordCy')" v-if="merchantType==4">
+					<image :src="icons[1]"></image>
+					<text>核销记录</text>
+				</view>
+				<view @click="toHref('/pagesHouse/home/bill')">
+					<image :src="icons[2]"></image>
+					<text>交易账单</text>
+				</view>
+				<view @click="toHref('/pagesHouse/home/tj')">
+					<image :src="icons[3]"></image>
+					<text>数据统计</text>
+				</view>
+			</view>
+		</view>
+		<view class="list">
+			<view class="tit">
+				<text>订单列表</text>
+				<text>{{new Date().Format('yyyy-MM-dd')}}</text>
+				<!-- <u-icon @click="more()" name="arrow-right" label="查看全部" labelPos="left" labelSize="13px"
+					labelColor="#808080" color="#AAA"></u-icon> -->
+			</view>
+			<view class="li first">
+				<text>订单信息</text>
+				<text>销量</text>
+				<text>成交金额</text>
+			</view>
+			<view class="li" v-for="(item,index) in list" :key="index">
+				<view class="avatar">
+					<image :src="merchantType==10?item.coverImg:item.productImg"></image>
+					<text>{{merchantType==10?item.goodsName:item.productName}}</text>
+				</view>
+				<text>{{merchantType==10?item.countNum:item.num}}</text>
+				<text>￥{{merchantType==10?item.sumNum:item.realityPay}}</text>
+			</view>
+		</view>
+		<u-picker :show="shShow" :columns="nameList" @close="shShow=false" @cancel="shShow=false" @confirm="confirm"
+			:immediateChange="true" itemHeight="88"></u-picker>
+		<Tabbares :tabbarid="0" :value="0"></Tabbares>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				merchantName: uni.getStorageSync('merchantName'),
+				emg: 'https://i.ringzle.com/file/20240224/91173dde1cb44b139129e12ad4971f1d.png',
+				icons: ['https://i.ringzle.com/file/20240316/cb736aa1ebea42b68f73a0532bac1875.png',
+					'https://i.ringzle.com/file/20240224/70ab9f9d1a144c95927dedc6e84bcce7.png',
+					'https://i.ringzle.com/file/20240224/3f990c250f444ac9a5d9f334f322c98e.png',
+					'https://i.ringzle.com/file/20240224/7ca1bfa6e348438e83edc5af0589f847.png'
+				],
+				info: {},
+				list: [],
+				nameList: [],
+				shShow: false,
+				shList: [],
+				name: '',
+				merchantType: '',
+			}
+		},
 		onLoad(opt) {
-			this.merchantType=uni.getStorageSync('merchantType');
-			if(this.merchantType==10){
-				this.getData();
-				this.getList();
-			}else{
-				this.getData2();
-				this.getList2();
-			}
+			this.merchantType = uni.getStorageSync('merchantType');
+			if (this.merchantType == 10) {
+				this.getData();
+				this.getList();
+			} else {
+				this.getData2();
+				this.getList2();
+			}
 			this.getType()
-		},
-		methods: {
-			getType() {
-				this.$api.post('/merchant/register/getMerchantStoreList').then(res => {
-					if (res.data.code === 0) {
-						this.shList = res.data.data;
-						let shs = [];
-						this.shList.forEach(d => shs.push(d.merchantName));
-						this.nameList = [shs];
-						let id = uni.getStorageSync('homestayId');
-						if (!uni.getStorageSync('homestayId')) id = uni.getStorageSync('merchantId');
-						let t = this.shList.find(d => d.merchantId == id);
-						this.name = t ? t.merchantName : ''
-					} else this.$showToast(res.data.msg);
-				})
-			},
-			confirm(e) {
-				this.name = e.value[0];
-				this.shShow = false;
-				let t = this.shList.find(d => d.merchantName == this.name);
-				if (t) {
-					this.merchantType=t.merchantType;
-					uni.setStorageSync('merchantType',t.merchantType);
-					if (t.merchantType != 2) { //酒店民宿
-						uni.setStorageSync('homestayId', '');
-						uni.setStorageSync('merchantId', t.merchantId);
-						this.list = [];
-						if(t.merchantType==10){
-							this.getData();
-							this.getList();
-						}else{
-							this.getData2();
-							this.getList2();
-						}
-					} else {
-						this.item = null;
-						this.list = [];
-						uni.setStorageSync('homestayId', t.merchantId);
-						uni.setStorageSync('merchantId', '');
-						uni.reLaunch({
-							url: '/pages/home/index'
-						})
-					}
-				}
-
-			},
-			//渔家乐统计
-			getData() {
-				this.$api.get('/merchant/fishering/merchantHomePageMoneyOrderCount/' + uni.getStorageSync(
-					'merchantId')).then(res => {
-						console.log(res.data);
-					if (res.data.code === 0) {
-						this.info = res.data.data;
-					}
-				})
-			},
-			getList() {
-				this.$api.get('/merchant/fishering/merchantHomePageGoodsList', {
-					page: -1,
-					limit:10,
-					merchandId: uni.getStorageSync('merchantId')
-			
-				}).then(res => {
-					if (res.data.code === 0) {
-						this.list = res.data.data.list;
-					}
-				})
-			},
-			//餐饮美食统计
-			getData2() {
-				this.$api.get('/api/merchant/food/getMerchantFoodAppHome/' + uni.getStorageSync(
-					'merchantId')).then(res => {
-						console.log(res.data);
-					if (res.data.code === 0) {
-						this.info = res.data.data;
-					}
-				})
-			},
-			getList2() {
-				this.$api.post('/api/merchant/food/getMerchantFoodOrderList', {
-					dateTime: new Date().Format('yyyy-MM-dd'),
-					merchantId: uni.getStorageSync('merchantId')
-
-				}).then(res => {
-					if (res.data.code === 0) {
-						this.list = res.data.data;
-					}
-				})
-			},
-			toHref(url) {
-				uni.redirectTo({
-					url: url
-				})
-			},
-			more() {
-				uni.navigateTo({
-					url: "/pagesHouse/home/orderList"
-				})
-			}
-		}
-	}
-</script>
-
-<style lang="less" scoped>
-	
-	.page {
-		background: #F3F4F4;
-		padding-bottom: 40rpx;
-		box-sizing: border-box;
-		width: 100%;
-		overflow-x: hidden;
-
-		.list {
-			width: calc(100% - 36rpx);
-			margin: 20rpx auto;
-			padding: 0 20rpx 6rpx;
-			background-color: #fff;
-			border-radius: 24rpx;
-			box-sizing: border-box;
-
-			.tit {
-				padding: 40rpx 0;
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-
-				text {
-					&:first-child {
-						font-size: 32rpx;
-						color: #111;
-						font-weight: bold;
-					}
-
-					&:nth-child(2) {
-						margin-left: 17rpx;
-						color: #666666;
-						width: 100px;
-						flex: 1;
-					}
-				}
-			}
-
-			.li {
-				display: grid;
-				grid-template-columns: 60% 20% 20%;
-				align-items: center;
-				margin-bottom: 24rpx;
-
-
-				text {
-					color: #333;
-					font-size: 26rpx;
-				}
-
-				.avatar {
-					display: flex;
-					align-items: center;
-
-					image {
-						width: 90rpx;
-						min-width: 90rpx;
-						height: 90rpx;
-						margin-right: 20rpx;
-						border-radius: 9rpx;
-					}
-
-					text {
-						width: 100px;
-						word-break: break-all;
-						text-overflow: ellipsis;
-						display: -webkit-box;
-						-webkit-box-orient: vertical;
-						-webkit-line-clamp: 2;
-						font-size: 24rpx;
-						line-height: 33rpx;
-						/* 这里是超出几行省略 */
-						overflow: hidden;
-					}
-				}
-
-				&.first {
-					margin-bottom: 30rpx;
-
-					text {
-						color: #666;
-					}
-				}
-
-			}
-		}
-
-		.bg {
-			width: 100%;
-			height: auto;
-			padding: 0 18rpx;
-			background: url(https://i.ringzle.com/file/20240224/343febca7aa149c5aa0ee8c9365b2d3e.png) no-repeat;
-			background-size: 100% 100%;
-			box-sizing: border-box;
-
-
-
-			.menus {
-				display: flex;
-				justify-content: space-around;
-				height: 184rpx;
-				border-radius: 24rpx;
-				background-color: #fff;
-				color: #333;
-				align-items: center;
-
-
-				&>view {
-					image {
-						width: 64rpx;
-						height: 64rpx;
-						display: block;
-						margin: 0 auto 22rpx;
-					}
-
-					text {
-						font-size: 26rpx;
-					}
-				}
-			}
-
-			.numberData {
-				display: flex;
-				justify-content: space-around;
-				height: 150rpx;
-				border-radius: 24rpx;
-				background-color: #007A69;
-				color: #fff;
-				align-items: center;
-				margin: 20rpx 0;
-
-				&>view {
-
-					text {
-						display: block;
-						text-align: center;
-						font-size: 26rpx;
-						color: #F0F8F6;
-
-						&:first-child {
-							font-size: 36rpx;
-							color: #fff;
-							margin-bottom: 20rpx;
-						}
-					}
-				}
-			}
-
-			.dataBox {
-				display: grid;
-				/* 宽度平均分成4份 */
-				grid-template-columns: repeat(2, 1fr);
-				/* 高度平均分成3份 */
-				grid-template-rows: repeat(2, 1fr);
-				gap: 14rpx;
-
-				.item {
-					width: 340rpx;
-					height: 180rpx;
-					padding: 24rpx 0 0 26rpx;
-					border-radius: 16rpx;
-					background-color: rgba(255, 255, 255, .48);
-					color: #777;
-
-					&>view:nth-child(2) {
-						color: #111;
-
-						text {
-							font-size: 36rpx;
-							display: inline-block;
-							margin: 12rpx 0;
-							font-weight: bold;
-							margin-left: -4rpx;
-						}
-					}
-
-				}
-
-			}
-		}
-	}
-
-	/deep/.u-nav-slot {
-		&>text {
-			font-size: 36rpx;
-			font-family: PingFang SC, PingFang SC;
-			font-weight: bold;
-			color: #333;
-			margin-right: 10rpx;
-		}
-	}
+		},
+		methods: {
+			getType() {
+				this.$api.post('/merchant/register/getMerchantStoreList').then(res => {
+					if (res.data.code === 0) {
+						this.shList = res.data.data;
+						let shs = [];
+						this.shList.forEach(d => shs.push(d.merchantName));
+						this.nameList = [shs];
+						let id = uni.getStorageSync('homestayId');
+						if (!uni.getStorageSync('homestayId')) id = uni.getStorageSync('merchantId');
+						let t = this.shList.find(d => d.merchantId == id);
+						this.name = t ? t.merchantName : ''
+					} else this.$showToast(res.data.msg);
+				})
+			},
+			confirm(e) {
+				this.name = e.value[0];
+				this.shShow = false;
+				let t = this.shList.find(d => d.merchantName == this.name);
+				if (t) {
+					this.merchantType = t.merchantType;
+					uni.setStorageSync('merchantType', t.merchantType);
+					if (t.merchantType != 2) { //酒店民宿
+						uni.setStorageSync('homestayId', '');
+						uni.setStorageSync('merchantId', t.merchantId);
+						this.list = [];
+						if (t.merchantType == 10) {
+							this.getData();
+							this.getList();
+						} else {
+							this.getData2();
+							this.getList2();
+						}
+					} else {
+						this.item = null;
+						this.list = [];
+						uni.setStorageSync('homestayId', t.merchantId);
+						uni.setStorageSync('merchantId', '');
+						uni.reLaunch({
+							url: '/pages/home/index'
+						})
+					}
+				}
+
+			},
+			//渔家乐统计
+			getData() {
+				this.$api.get('/merchant/fishering/merchantHomePageMoneyOrderCount/' + uni.getStorageSync(
+					'merchantId')).then(res => {
+					console.log(res.data);
+					if (res.data.code === 0) {
+						this.info = res.data.data;
+					}
+				})
+			},
+			getList() {
+				this.$api.get('/merchant/fishering/merchantHomePageGoodsList', {
+					page: -1,
+					limit: 10,
+					merchandId: uni.getStorageSync('merchantId')
+
+				}).then(res => {
+					if (res.data.code === 0) {
+						this.list = res.data.data.list;
+					}
+				})
+			},
+			//餐饮美食统计
+			getData2() {
+				this.$api.get('/api/merchant/food/getMerchantFoodAppHome/' + uni.getStorageSync(
+					'merchantId')).then(res => {
+					console.log(res.data);
+					if (res.data.code === 0) {
+						this.info = res.data.data;
+					}
+				})
+			},
+			getList2() {
+				this.$api.post('/api/merchant/food/getMerchantFoodOrderList', {
+					dateTime: new Date().Format('yyyy-MM-dd'),
+					merchantId: uni.getStorageSync('merchantId')
+
+				}).then(res => {
+					if (res.data.code === 0) {
+						this.list = res.data.data;
+					}
+				})
+			},
+			toHref(url) {
+				uni.redirectTo({
+					url: url
+				})
+			},
+			more() {
+				uni.navigateTo({
+					url: "/pagesHouse/home/orderList"
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.page {
+		background: #F3F4F4;
+		padding-bottom: 40rpx;
+		box-sizing: border-box;
+		width: 100%;
+		overflow-x: hidden;
+
+		.list {
+			width: calc(100% - 36rpx);
+			margin: 20rpx auto;
+			padding: 0 20rpx 6rpx;
+			background-color: #fff;
+			border-radius: 24rpx;
+			box-sizing: border-box;
+
+			.tit {
+				padding: 40rpx 0;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				text {
+					&:first-child {
+						font-size: 32rpx;
+						color: #111;
+						font-weight: bold;
+					}
+
+					&:nth-child(2) {
+						margin-left: 17rpx;
+						color: #666666;
+						width: 100px;
+						flex: 1;
+					}
+				}
+			}
+
+			.li {
+				display: grid;
+				grid-template-columns: 60% 20% 20%;
+				align-items: center;
+				margin-bottom: 24rpx;
+
+
+				text {
+					color: #333;
+					font-size: 26rpx;
+				}
+
+				.avatar {
+					display: flex;
+					align-items: center;
+
+					image {
+						width: 90rpx;
+						min-width: 90rpx;
+						height: 90rpx;
+						margin-right: 20rpx;
+						border-radius: 9rpx;
+					}
+
+					text {
+						width: 100px;
+						word-break: break-all;
+						text-overflow: ellipsis;
+						display: -webkit-box;
+						-webkit-box-orient: vertical;
+						-webkit-line-clamp: 2;
+						font-size: 24rpx;
+						line-height: 33rpx;
+						/* 这里是超出几行省略 */
+						overflow: hidden;
+					}
+				}
+
+				&.first {
+					margin-bottom: 30rpx;
+
+					text {
+						color: #666;
+					}
+				}
+
+			}
+		}
+
+		.bg {
+			width: 100%;
+			height: auto;
+			padding: 0 18rpx;
+			background: url(https://i.ringzle.com/file/20240224/343febca7aa149c5aa0ee8c9365b2d3e.png) no-repeat;
+			background-size: 100% 100%;
+			box-sizing: border-box;
+
+
+
+			.menus {
+				display: flex;
+				justify-content: space-around;
+				height: 184rpx;
+				border-radius: 24rpx;
+				background-color: #fff;
+				color: #333;
+				align-items: center;
+
+
+				&>view {
+					image {
+						width: 64rpx;
+						height: 64rpx;
+						display: block;
+						margin: 0 auto 22rpx;
+					}
+
+					text {
+						font-size: 26rpx;
+					}
+				}
+			}
+
+			.numberData {
+				display: flex;
+				justify-content: space-around;
+				height: 150rpx;
+				border-radius: 24rpx;
+				background-color: #007A69;
+				color: #fff;
+				align-items: center;
+				margin: 20rpx 0;
+
+				&>view {
+
+					text {
+						display: block;
+						text-align: center;
+						font-size: 26rpx;
+						color: #F0F8F6;
+
+						&:first-child {
+							font-size: 36rpx;
+							color: #fff;
+							margin-bottom: 20rpx;
+						}
+					}
+				}
+			}
+
+			.dataBox {
+				display: grid;
+				/* 宽度平均分成4份 */
+				grid-template-columns: repeat(2, 1fr);
+				/* 高度平均分成3份 */
+				grid-template-rows: repeat(2, 1fr);
+				gap: 14rpx;
+
+				.item {
+					width: 340rpx;
+					height: 180rpx;
+					padding: 24rpx 0 0 26rpx;
+					border-radius: 16rpx;
+					background-color: rgba(255, 255, 255, .48);
+					color: #777;
+
+					&>view:nth-child(2) {
+						color: #111;
+
+						text {
+							font-size: 36rpx;
+							display: inline-block;
+							margin: 12rpx 0;
+							font-weight: bold;
+							margin-left: -4rpx;
+						}
+					}
+
+				}
+
+			}
+		}
+	}
+
+	/deep/.u-nav-slot {
+		&>text {
+			font-size: 36rpx;
+			font-family: PingFang SC, PingFang SC;
+			font-weight: bold;
+			color: #333;
+			margin-right: 10rpx;
+		}
+	}
 </style>