QianNiaoShop/pages/index/index.vue

<template>
	<view class="home">
		<view class="top_view">
			<u-navbar :title-bold="true" :border-bottom="false" :background="{ background: `rgba(64, 118, 214, ${scroll_top / 100})` }" :is-back="false" title=" ">
				<view class="title">{{ enterprise.enterpriseName || '工作台' }}</view>
			</u-navbar>
			<!-- <uniStatusBar></uniStatusBar> -->
			<!-- <view class="title">{{ enterprise.enterpriseName || '--' }}</view> -->
			<view class="user_img clearfix">
				<view class="img">
					<image :src="enterprise.logo" mode="aspectFill"></image>
					<span class="img_title">{{ userInfo.name }}</span>
				</view>
				<view class="Icon">
					<view class="btn-li" @click="goPage('/pages/enterprise/index', 'reLaunch')">
						<u-icon name="qiehuan-" custom-prefix="custom-icon" size="36" color="#4076D6"></u-icon>
					</view>
					<view class="btn-li" @click="overview('reset')"><u-icon name="shuaxin" size="36" color="#4076D6" custom-prefix="custom-icon"></u-icon></view>
					<view class="btn-li" @click="goPage('/pages/index/WxCode')"><u-icon name="erweima" size="32" custom-prefix="custom-icon" color="#4076D6"></u-icon></view>
					<view class="btn-li" @click="goPage('/pagesT/notice/notice')"><u-icon name="bell" size="36" color="#4076D6"></u-icon></view>
					<view class="btn-li" @click="logout"><u-icon name="zhuxiao" custom-prefix="custom-icon" size="34" color="#4076D6"></u-icon></view>
				</view>
			</view>
			<view class="top_money clearfix" v-if="$accessCheck($Access.overview)">
				<view class="float_left" style="font-weight: 400;">
					<u-icon name="jinbi" size="36" color="#ffffff" margin-left="12" label-color="#ffffff" label-size="24" label="应收账款" custom-prefix="custom-icon"></u-icon>
				</view>
				<view class="float_right">
					<text class="rmb-icon">¥</text>
					{{ $utils.formatNub(now.totalShouldReceive) }}
				</view>
			</view>
		</view>
		<view class="top_bottom" v-if="$accessCheck($Access.overview)">
			<view class="money-li">
				<view>
					<u-icon name="jinbi" size="36" color="#f69844" margin-left="12" label-color="#BABBC6" label-size="24" label="应付账款" custom-prefix="custom-icon"></u-icon>
				</view>
				<view class="num">
					¥
					<text class="written">{{ $utils.formatNub(now.totalShouldPay) }}</text>
				</view>
			</view>
			<view class="money-li">
				<navigator open-type="switchTab" url="/pages/customer/CustomerList">
					<view>
						<u-icon
							name="customer"
							size="36"
							color="#7a15ff"
							margin-left="12"
							label-color="#BABBC6"
							label-size="24"
							label="当前客户数"
							custom-prefix="custom-icon"
						></u-icon>

						<view class="num">
							<text class="written">{{ Number(now.customerTotalNum) || 0 }}</text>
						</view>
					</view>
				</navigator>
			</view>
			<view class="money-li">
				<view>
					<u-icon
						name="shangpin1"
						size="36"
						color="#3f64d9"
						margin-left="12"
						label-color="#BABBC6"
						label-size="24"
						label="库存商品数"
						custom-prefix="custom-icon"
					></u-icon>
				</view>
				<view class="num">
					<text class="written">{{ Number(now.numberOfProductsInStock) || 0 }}</text>
				</view>
			</view>
			<view class="money-li">
				<view>
					<u-icon name="jine" size="36" color="#f54957" margin-left="12" label-color="#BABBC6" label-size="24" label="库存总金额" custom-prefix="custom-icon"></u-icon>
				</view>
				<view class="num">
					¥
					<text class="written">{{ $utils.formatNub(now.totalMoneyOfInventory) }}</text>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<!-- 工作台 -->
			<view class="content_main" style="margin-top: 0;">
				<view class="content_top clearfix" style="background: linear-gradient(270deg, #FDFFFE 0%, #EAFEEE 100%);">
					<image src="../../static/img/ic-work.png" class="img"></image>
					<text class="title-text">工作台</text>
					<view class="edit-btn float_right" @click="goPage('/pages/app/index')">
						<u-icon name="edit-pen-fill" color="#4076D6" label-color="#4076D6" size="28" label="编辑" label-size="28"></u-icon>
					</view>
				</view>
				<view class="cont">
					<swiper class="swiper" indicator-color="#B8C0C8" indicator-active-color="#4076D6" :indicator-dots="true" :autoplay="false" :interval="2000" :duration="500">
						<swiper-item v-for="(item, index) in nav_list" :key="index">
							<view class="app-ul">
								<block v-for="(app, appi) in item" :key="appi">
									<view class="app-li" @click="goPage(app.url)" v-if="$accessCheck($Access[app.access])">
										<view class="icon-view" :style="{ background: app.color }"><text :class="[app.icon]" class="custom-icon"></text></view>
										<view class="label ellipsis">{{ app.label }}</view>
									</view>
								</block>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="content_main" v-if="$accessCheck($Access.overview)">
				<view class="content_top">
					<image src="../../static/img/ic-jy.png" class="img" mode="aspectFill"></image>
					<text class="title-text">经营概况</text>
				</view>
				<!-- 经营概况 -->
				<view class="content_text">
					<ul class="content-ul">
						<li class="li-list">
							<view class="order_money">下单金额</view>
							<view class="num">{{ businessOverview.orderTotalMoney }}</view>
							<!-- 	<view class='txt'>同比<span style='margin-left: 3rpx;color: #2CB244;'>+10%</span><span>
										<image src="../../static/img/ic-sh.png" style="width: 16rpx;height: 16rpx;">
										</image>
									</span></view> -->
							<!-- <view class="time">
								昨日
								<span style="margin-left: 4rpx;">13409.00</span>
							</view> -->
						</li>
						<li class="li-list">
							<view class="order_money">营业金额</view>
							<view class="num">{{ businessOverview.orderConfirmedMoney }}</view>
							<!-- 	<view class='txt'>同比<span style='margin-left: 8rpx;color: #FA6400;'>+10%</span><span>
										<image src="../../static/img/ic-xd.png" style="width: 16rpx;height: 16rpx;">
										</image>
									</span></view> -->
							<!-- <view class="time">
								昨日
								<span style="margin-left: 4rpx;">13409.00</span>
							</view> -->
						</li>
						<li class="li-list">
							<view class="order_money">今日毛利</view>
							<view class="num">{{ businessOverview.todayGrossProfit }}</view>
							<!-- <view class='txt'>同比<span style='margin-left: 3rpx;color: #2CB244;'>+10%</span><span>
										<image src="../../static/img/ic-sh.png" style="width: 16rpx;height: 16rpx;">
										</image>
									</span></view> -->
							<!-- <view class="time">
								昨日
								<span style="margin-left: 4rpx;">13409.00</span>
							</view> -->
						</li>
						<li class="li-list bottom-li">
							<view class="order_money">今日收款</view>
							<view class="num">{{ businessOverview.todayReceivedMoney }}</view>
							<!-- <view class='txt'>同比<span style='margin-left: 3rpx;color: #2CB244;'>+10%</span><span>
										<image src="../../static/img/ic-sh.png" style="width: 16rpx;height: 16rpx;">
										</image>
									</span></view> -->
							<!-- <view class="time">
								昨日
								<span style="margin-left: 4rpx;">13409.00</span>
							</view> -->
						</li>
						<li class="li-list bottom-li">
							<view class="order_money">今日新增客户数</view>
							<view class="num">{{ businessOverview.todayNewCustomerNum }}</view>
							<!-- <view class='txt'>同比<span style='margin-left: 3rpx;color: #2CB244;'>+10%</span><span>
										<image src="../../static/img/ic-sh.png" style="width: 16rpx;height: 16rpx;">
										</image>
									</span></view> -->
							<!-- <view class="time">
								昨日
								<span style="margin-left: 4rpx;">13409.00</span>
							</view> -->
						</li>
					</ul>
				</view>
			</view>
			<!-- 	订单概况 -->
			<view class="content_main" v-if="$accessCheck($Access.overview)">
				<view class="content_top clearfix" style="background: linear-gradient(270deg, #FFFFFF 0%, #FDF6E8 100%); ">
					<view class="float_left">
						<image src="../../static/img/ic-jyh3.png" class="img" mode="aspectFill"></image>
						<text class="title-text">订单概况</text>
					</view>
					<!-- <view class="float_right" style="color: #B8C0C8;">选择店铺</view> -->
				</view>
				<view class="content_text">
					<ul class="content-ul">
						<li class="li-list">
							<view class="order_money">今日订单</view>
							<view class="num">{{ businessOverview.todayConfirmedOrderNum }}</view>
							<!-- 	<view class='txt'>同比<span style='margin-left: 3rpx;color: #2CB244;'>+10%</span><span>
										<image src="../../static/img/ic-sh.png" style="width: 16rpx;height: 16rpx;">
										</image>
									</span></view> -->
							<!-- <view class="time">
								昨日
								<span style="margin-left: 4rpx;">13409.00</span>
							</view> -->
						</li>
						<li class="li-list">
							<view class="order_money">下单客户</view>
							<view class="num">{{ businessOverview.todayConfirmedOrderCustomerNum }}</view>
							<!-- 	<view class='txt'>同比<span style='margin-left: 8rpx;color: #FA6400;'>+10%</span><span>
										<image src="../../static/img/ic-xd.png" style="width: 16rpx;height: 16rpx;">
										</image>
									</span></view> -->
							<!-- <view class="time">
								昨日
								<span style="margin-left: 4rpx;">13409.00</span>
							</view> -->
						</li>
						<li class="li-list">
							<view class="order_money">今日客单价</view>
							<view class="num">{{ businessOverview.customerAverageMoney }}</view>
							<!-- <view class='txt'>同比<span style='margin-left: 3rpx;color: #2CB244;'>+10%</span><span>
										<image src="../../static/img/ic-sh.png" style="width: 16rpx;height: 16rpx;">
										</image>
									</span></view> -->
							<!-- <view class="time">
								昨日
								<span style="margin-left: 4rpx;">13409.00</span>
							</view> -->
						</li>
						<li class="li-list bottom-li">
							<view class="order_money">未出库订单</view>
							<view class="num">{{ businessOverview.orderNumOfNotOutOfStock }}</view>
							<!-- <view class='txt'>同比<span style='margin-left: 3rpx;color: #2CB244;'>+10%</span><span>
										<image src="../../static/img/ic-sh.png" style="width: 16rpx;height: 16rpx;">
										</image>
									</span></view> -->
							<!-- <view class="time">
								昨日
								<span style="margin-left: 4rpx;">13409.00</span>
							</view> -->
						</li>
						<li class="li-list bottom-li">
							<view class="order_money">今日取消订单</view>
							<view class="num">{{ businessOverview.todayCanceledOrder }}</view>
							<!-- <view class='txt'>同比<span style='margin-left: 3rpx;color: #2CB244;'>+10%</span><span>
										<image src="../../static/img/ic-sh.png" style="width: 16rpx;height: 16rpx;">
										</image>
									</span></view> -->
							<!-- <view class="time">
								昨日
								<span style="margin-left: 4rpx;">13409.00</span>
							</view> -->
						</li>
					</ul>
				</view>
			</view>
			<!-- 近7日交易统计图 -->
			<view class="content_main" v-if="$accessCheck($Access.overview)">
				<view class="content_top" style="background: linear-gradient(270deg, #FDFFFF 0%, #EAFAFE 100%);">
					<image src="../../static/img/ic-jyh2.png" class="img" style="vertical-align: middle;"></image>
					<text class="title-text">近7日交易趋势</text>
				</view>
				<view class="charts-box"><qiun-data-charts type="area" :chartData="chartData" :echartsH5="true" :echartsApp="true" background="none" :animation="false" /></view>
			</view>
			<!-- tab -->
			<view class="content_main" v-if="$accessCheck($Access.overview)">
				<view class="content_top tabs-ul">
					<ul class="ul_tag">
						<li v-for="(item, index) in tag" :key="index" @click="changeTag(item.value)" class="ul_tag_item" :class="[item.value === rank_on ? 'hover' : '']">
							{{ item.label }}
						</li>
					</ul>
				</view>
				<view class="content_bottom">
					<view class="bottom_top clearfix">
						<view class="float_left">
							<text class="sale" @click="changeSel(1)" :class="[ranking_sel === 1 ? 'show-on' : '']">销额</text>
							<text style="width: 1rpx;height: 24rpx;display: inline-block;border-left: 1rpx solid #ECF0F7;"></text>
							<text class="sale_num" @click="changeSel(2)" :class="[ranking_sel === 2 ? 'show-on' : '']">销量</text>
						</view>
						<view v-if="false" class="float_right" @click="goPage('/pagesT/shop/selShop')">
							<u-icon
								name="arrow-down-fill"
								color="#B8C0C8"
								margin-right="20"
								label-size="28rpx"
								label-color="#B8C0C8"
								size="14"
								label="选择店铺"
								label-pos="left"
							></u-icon>
						</view>
					</view>
					<view style="margin-top:40rpx">
						<ul class="progress-ul" v-if="rank_on === 1">
							<li class="clearfix progress-li" v-for="(item, index) in ranking.categoryRanking" :key="index">
								<view class="float_left label ellipsis">{{ item.categoryName }}</view>
								<view class="float_left line">
									<u-line-progress
										active-color="#4076D6"
										:percent="item.percent"
										:show-percent="false"
										height="16prx"
										width="423prx"
										:round="true"
									></u-line-progress>
								</view>
								<view class="float_right num">{{ item.numberOrMoney }}</view>
							</li>
						</ul>
						<ul class="progress-ul" v-if="rank_on === 2">
							<li class="clearfix progress-li" v-for="(item, index) in ranking.goodsRanking" :key="index">
								<view class="float_left label ellipsis">{{ item.goodsName || '未设置' }}</view>
								<view class="float_left line">
									<u-line-progress
										active-color="#4076D6"
										:percent="item.percent"
										:show-percent="false"
										height="16prx"
										width="423prx"
										:round="true"
									></u-line-progress>
								</view>
								<view class="float_right num">{{ item.numberOrMoney }}</view>
							</li>
						</ul>
						<ul class="progress-ul" v-if="rank_on === 3">
							<li class="clearfix progress-li" v-for="(item, index) in ranking.customerRanking" :key="index">
								<view style="width: 450rpx;border: 0;" class="float_left label ellipsis">{{ item.customerName }}</view>
								<view style="width: 200rpx;text-align: left;" class="float_right num">{{ item.numberOrMoney }}</view>
							</li>
						</ul>
						<ul class="progress-ul" v-if="rank_on === 4">
							<li class="clearfix progress-li ellipsis" v-for="(item, index) in ranking.supplierRanking" :key="index">
								<view style="width: 450rpx;border: 0;" class="float_left label">{{ item.supplierName }}</view>
								<view style="width: 200rpx;text-align: left;" class="float_right num">{{ item.numberOrMoney }}</view>
							</li>
						</ul>
					</view>
				</view>
			</view>
		</view>
		<u-popup
			v-model="noticePop"
			border-radius="18"
			mode="center"
			height="905"
			:custom-style="{
				background: 'rgba(0,0,0,0)'
			}"
		>
			<view class="mag-view">
				<view class="mag-top"><image class="notice-i" src="../../static/img/notice-i.png" mode=""></image></view>
				<view class="msg-cont">
					<image class="msg-yun" src="../../static/img/notice-bg.png" mode=""></image>
					<view class="mag-tit">{{ notice_data.title }}</view>
					<scroll-view class="mag-main" scroll-y>{{ notice_data.content }}</scroll-view>
				</view>
				<view class="confirm-btn primary-btn-pain" @click="noticePop = false">我知道了</view>
			</view>
		</u-popup>
		<!-- 底部tabbar -->
		<Tabbar v-model="tabbar_current"></Tabbar>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
import uniStatusBar from '../../components/uni-status-bar.vue';
export default {
	data() {
		return {
			tabbar_current: 0,
			notice_data: {
				title: '',
				content: ''
			},
			noticePop: false,
			shopData: '',
			ranking: [],
			now: {}, //
			type: true,
			businessOverview: {},
			active: false,
			rank_on: 1,
			list: ['快销品', '包装食品', '饼干糕点', '保健品', '营养保健品', '速冻面店', '办公器材', '美容化妆'],
			tag: [
				{
					value: 1,
					label: '类目排行',
					active: true
				},
				{
					value: 2,
					label: '商品排行',
					active: false
				},
				{
					value: 3,
					label: '客户排行',
					active: false
				},
				{
					value: 4,
					label: '供应商排行',
					active: false
				}
			],
			chartData: {
				categories: [],
				series: []
			},
			tabs_current: 0,
			tabs_list: [
				{
					name: '订单金额'
				},
				{
					name: '客户统计'
				},
				{
					name: '资金统计'
				},
				{
					name: '订单数'
				}
			],
			ranking_sel: 1,
			nav_list: [
				[
					{
						url: '/pages/order/OrderAdd',
						label: '代客下单',
						icon: 'custom-icon-piliangxiadan',
						color: '#f29611',
						access: 'OrderAdd'
					},
					{
						url: '/pagesT/stock/SalesOrder',
						label: '出库单',
						icon: 'custom-icon-quehuoshangpinshu',
						color: '#5c6aff',
						access: 'InventoryOut'
					},
					{
						url: '/pagesT/customer/StaffList',
						label: '销售排行',
						icon: 'custom-icon-paihangbang',
						color: '#f29611',
						access: 'salesRanking'
					},
					{
						url: '/pagesT/customer/CommunicationLogs',
						label: '客户拜访',
						icon: 'custom-icon-fuwu',
						color: '#f29611',
						access: 'CustomerListvisitedLogs'
					}
				]
			],
			scroll_top: 0
		};
	},
	onPageScroll(e) {
		this.scroll_top = e.scrollTop;
	},
	components: {
		uniStatusBar
	},
	computed: {
		hasLogin() {
			return this.$store.state.hasLogin;
		},
		userInfo() {
			return this.$store.state.userInfo;
		},
		enterprise() {
			return this.$store.state.enterprise;
		}
	},
	watch: {
		shopData(val) {}
	},
	async onLoad() {
		// this.noticePop=true
		if (!this.hasLogin) {
			this.logout();
			return;
		}
		await this.overview();
		await this.getupStatusAnnouncementInfo();
		await this.getBasicSetup();
	},
	async onShow() {
		await this.getCommonAppInfo();
	},
	async onPullDownRefresh() {
		await this.overview();
		await this.getupStatusAnnouncementInfo();
		await this.getBasicSetup();
	},
	onShareAppMessage(res) {},
	methods: {
		...mapActions({
			logout: 'logout'
		}),
		setChartData(timeData, orderMoney, goodsNum, orderNum) {
			this.chartData = {
				categories: timeData,
				series: [
					{
						name: '金额',
						data: orderMoney,
						// pointShape: 'circle',
						legendShape: 'line'
					},
					{
						name: '商品数量',
						data: goodsNum,
						// pointShape: 'circle',
						legendShape: 'line'
					},
					{
						name: '订单数量',
						data: orderNum,
						// pointShape: 'circle',
						legendShape: 'line'
					}
				]
			};
		},
		changeTag(val) {
			this.rank_on = val;
		},
		changeSel(val) {
			this.ranking_sel = val;
			this.overview();
		},
		async overview(isReset) {
			if (isReset) {
				uni.showLoading({
					title: '加载中...'
				});
			}
			await this.$u.api
				.overview({
					ranking: this.ranking_sel, // "1销量排行 2销额排行",
					businessOverviewShopId: '', // "经营概况按店铺筛选：为空则筛选全店",
					categoryRankingShopId: '', // "类目排行按店铺筛选：为空则筛选全店",
					goodsRankingShopId: '', // "商品排行按店铺筛选：为空则筛选全店",
					supplierRankingShopId: '' // 供应商排行按店铺筛选：为空则筛选全店"
				})
				.then(res => {
					uni.stopPullDownRefresh();
					uni.hideLoading();
					this.businessOverview = res.data.businessOverview;
					this.now = res.data.aggregateStatistics;
					this.ranking = res.data.ranking;
					const timeData = [];
					const goodsNumData = [];
					const orderMoneyData = [];
					const orderNumData = [];
					this.$nextTick(() => {
						res.data.chartData.forEach(value => {
							const arr = value.date.split('-');
							timeData.push(arr[1] + '-' + arr[2]);
							goodsNumData.push(Number(value.goodsNum));
							orderMoneyData.push(Number(value.orderMoney));
							orderNumData.push(Number(value.orderNum));
						});
						this.setChartData(timeData, orderMoneyData, goodsNumData, orderNumData);
					});
				})
				.catch(err => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				});
		},
		async getupStatusAnnouncementInfo() {
			await this.$u.api.getupStatusAnnouncementInfo().then(res => {
				if (res.data.upStatus === 5) {
					this.noticePop = true;
					this.notice_data.title = res.data.title;
					this.notice_data.content = res.data.content;
				} else {
					this.noticePop = false;
				}
			});
		},
		async getCommonAppInfo() {
			await this.$u.api.getCommonAppInfo(this.userInfo.userCenterId).then(res => {
				if (res.data.jsonKey) {
					const jsonKey = res.data.jsonKey;
					if (jsonKey[0].icon.indexOf('ibon') > -1) {
						return;
					}
					//可对一个数进行上舍入
					let num = Math.ceil(jsonKey.length / 8);
					let arr = [];
					for (let i = 0; i < num; i++) {
						arr[i] = jsonKey.slice(i * 8, i * 8 + 8);
					}
					this.nav_list = arr;
				}
			});
		},
		// 获取基本设置
		async getBasicSetup() {
			await this.$u.api.getBasicSetup().then(res => {
				if (res.data.basicData) {
					this.$store.commit('commit_basicSet', res.data.basicData);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.charts-box {
	width: 710rpx;
	height: 530rpx;
	padding: 24rpx 24rpx 0 0;
	background-color: #ffffff;
}

.show {
	color: #2d405e;
}

.home {
	font-family: DIN-Medium;
	.top_bottom {
		width: 686rpx;
		margin: 0 auto;
		background-color: #ffffff;
		border-radius: 8rpx;
		display: flex;
		padding: 32rpx;
		flex-wrap: wrap;
		transform: translateY(-146rpx);

		.money-li {
			padding-left: 42rpx;
			width: 50%;
			color: #2d405e;
			padding-top: 20rpx;

			&:nth-child(odd) {
				border-right: 1px solid #ecf0f7;
			}

			&:nth-child(2) {
				padding-top: 0;
				border-bottom: 1px solid #ecf0f7;
			}

			&:first-child {
				padding-top: 0;
				border-bottom: 1px solid #ecf0f7;
			}

			.num {
				padding-top: 8px;
				font-size: 24rpx;
				font-weight: 500;
				color: #2d405e;
				line-height: 50rpx;

				.written {
					font-size: 40rpx;
				}
			}
		}
	}

	.top_view {
		padding: 0 32rpx 164rpx;
		// height: calc(500rpx + var(--status-bar-height));
		background: linear-gradient(#4076d6, #4076d6, #4076d6, #4076d6, #f5f5f6 100%);

		.title {
			padding-left: 32rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.user_img {
			margin-top: 52rpx;

			.img {
				float: left;

				image {
					margin-right: 8rpx;
					vertical-align: middle;
					width: 68rpx;
					height: 68rpx;
					border-radius: 100%;
					border: 4rpx solid #ffffff;
					background-color: #ffffff;
				}

				.img_title {
					line-height: 68rpx;
					vertical-align: middle;
					font-size: 28rpx;
					font-weight: 500;
					color: #ffffff;
				}
			}

			.Icon {
				float: right;
				line-height: 72rpx;

				.btn-li {
					font-weight: bold;
					width: 50rpx;
					height: 50rpx;
					background-color: #ffffff;
					display: inline-block;
					text-align: center;
					vertical-align: middle;
					margin-left: 30rpx;
					line-height: 50rpx;
					border-radius: 6rpx;
				}
			}
		}

		.top_money {
			color: #ffffff;
			margin-top: 52rpx;

			.float_right {
				font-size: 34rpx;
				font-weight: 400;
				font-family: DINPro-Regular;
				.rmb-icon {
					margin-right: 4rpx;
					font-size: 24rpx;
				}
			}
		}

		.txst {
			width: 141rpx;
			height: 33px;
			font-size: 24px;
			font-weight: 400;
			color: #2d405e;
			line-height: 33px;
		}
	}

	.content {
		transform: translateY(-120rpx);

		.content_main {
			margin: 24rpx auto;
			width: 710rpx;
			border-radius: 12rpx;
			overflow: hidden;

			.content_top {
				background: linear-gradient(270deg, #fcfdff 0%, #e2ebff 100%);
				line-height: 40rpx;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 24rpx;
				overflow: hidden;

				.img {
					width: 40rpx;
					height: 40rpx;
					display: inline-block;
					margin-right: 16rpx;
					vertical-align: middle;
				}

				.title-text {
					font-size: 32rpx;
					font-weight: 600;
					color: #2d405e;
					vertical-align: middle;
				}

				.edit-btn {
					margin-left: 20rpx;
					display: inline-block;
				}

				&.tabs-ul {
					overflow: auto;
					height: 88rpx;
					padding: 0rpx;
					background: transparent;

					.ul_tag {
						display: flex;
						width: 710rpx;
						height: 72rpx;
						line-height: 72rpx;
						transform: translateY(16rpx);
						background: linear-gradient(217deg, #ffffff 0%, #ecf0f7 100%);

						.ul_tag_item {
							flex: 4;
							width: 177rpx;
							text-align: center;
							font-size: 24rpx;
							font-weight: 400;
							color: #62738e;
						}

						.hover {
							font-weight: 400;
							height: 88rpx;
							line-height: 88rpx;
							background-color: #4076d6;
							color: #ffffff;
							font-size: 28rpx;
							transform: translateY(-16rpx);
							border-radius: 8rpx 8rpx 0rpx 0rpx;
						}
					}
				}
			}

			.content_bottom {
				width: 710rpx;
				background-color: #ffffff;
				padding-top: 38rpx;

				.bottom_top {
					padding: 0 32rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 28rpx;

					.float_right {
						width: 210rpx;
						height: 50rpx;
						border-radius: 25rpx;
						border: 2rpx solid #b8c0c8;
						text-align: center;
						line-height: 36rpx;
					}

					.sale {
						font-size: 28rpx;
						width: 56rpx;
						height: 40rpx;
						color: #b8c0c8;
						margin-left: 32rpx;
						margin-right: 20rpx;
					}

					.sale_num {
						font-size: 28rpx;
						width: 56rpx;
						font-weight: 400;
						color: #b8c0c8;
						margin-left: 20rpx;
					}

					.show-on {
						font-size: 28rpx;
						font-weight: 500;
						color: #2d405e;
					}

					.sel {
						padding: 10rpx;
						font-size: 28rpx;
						width: 210rpx;
						border-radius: 25rpx;
						border: 2rpx solid #b8c0c8;
						margin-left: 320rpx;
						color: #b8c0c8;
					}
				}
			}

			.content_text {
				background-color: #ffffff;

				.content-ul {
					display: flex;
					flex-wrap: wrap;
					padding: 0 24rpx;

					.li-list {
						width: 33.3333%;
						text-align: center;
						margin-top: 10rpx;
						padding-bottom: 32rpx;
						padding-top: 40rpx;
						border-bottom: 1px solid #ecf0f7;
						position: relative;

						&::after {
							content: '';
							display: block;
							width: 1px;
							height: 120rpx;
							position: absolute;
							background-color: #ecf0f7;
							right: 0;
							top: 50%;
							transform: translateY(-48%);
						}

						&:nth-child(5),
						&:nth-child(4) {
							padding-top: 32rpx;
							padding-bottom: 40rpx;
							border-bottom: 0;
						}

						&:nth-child(3),
						&:last-child {
							&::after {
								height: 0;
								width: 0;
							}
						}

						.num {
							font-size: 44rpx;
							font-weight: 500;
							color: #2d405e;
							line-height: 56rpx;
							height: 56rpx;
							padding-top: 12rpx;
						}

						.order_money {
							font-size: 24rpx;
							font-weight: 400;
							color: #b8c0c8;
							line-height: 33rpx;
						}

						.txt {
							font-size: 20rpx;
							font-weight: 400;
							color: #62738e;
							line-height: 28rpx;
						}

						.time {
							font-size: 20rpx;
							font-weight: 400;
							color: #62738e;
							line-height: 45rpx;
						}

						&.bottom-li {
							width: 50%;
						}
					}
				}
			}
		}
	}
}

.cont {
	.swiper {
		width: 710rpx;
		height: 400rpx;

		.app-ul {
			padding: 40rpx 0 0;
			display: flex;
			flex-wrap: wrap;
			background-color: #ffffff;
			height: 400rpx;

			.app-li {
				text-align: center;
				width: 25%;
				margin-bottom: 40rpx;

				.icon-view {
					width: 72rpx;
					height: 72rpx;
					line-height: 72rpx;
					border-radius: 30rpx;
					margin: 0 auto;

					.custom-icon {
						font-size: 42rpx;
						color: #ffffff;
					}
				}

				.label {
					font-size: 26rpx;
					line-height: 36rpx;
					padding-top: 16rpx;
					color: #2d405e;
				}
			}
		}
	}
}

.progress-ul {
	padding-bottom: 40rpx;

	.progress-li {
		line-height: 90rpx;

		.label {
			width: 152rpx;
			text-align: right;
			border-right: 1px solid #dddddd;
			padding-right: 12rpx;
			color: #2d405e;
			font-size: 24rpx;
			font-weight: 400;
		}

		.line {
			width: 400rpx;
		}

		.num {
			color: #5c79b0;
			font-size: 24rpx;
			margin-right: 30rpx;
		}
	}
}

.mag-view {
	text-align: center;
	transform: translateY(100rpx);
	background-color: #ffffff;
	width: 612rpx;
	border-radius: 18rpx;
	padding-bottom: 46rpx;

	.mag-top {
		height: 242rpx;
		border-radius: 18rpx;
		background-color: $uni-color-primary;
		width: 100%;
		position: relative;

		.notice-i {
			width: 422rpx;
			height: 312rpx;
			position: absolute;
			top: -100rpx;
			left: 140rpx;
		}
	}

	.msg-cont {
		padding: 0 50rpx;
		padding-top: 56rpx;
		position: relative;

		.msg-yun {
			position: absolute;
			width: 622rpx;
			height: 215rpx;
			left: 0;
			top: -116rpx;
			z-index: 1;
		}

		.mag-main {
			height: 200rpx;
		}

		.mag-tit {
			position: relative;
			z-index: 9;
			font-size: 38upx;
			font-weight: bold;
			padding-bottom: 30rpx;
		}
	}

	.confirm-btn {
		line-height: 90rpx;
		height: 90rpx;
		font-size: 34rpx;
		width: 506rpx;
		margin: 30rpx auto 0;
		border: 1px solid $uni-color-primary;
		color: $uni-color-primary;
		border-radius: 12rpx;
	}
}
</style>