web-app-v1/pages/index/index.vue

<template>
	<view v-if="userinfo.user_type == 3">
		<view class="hang" v-if="screenState===0"></view>
		<view class="IndexContainer" v-if="screenState===1">
			<view class="countTime" v-if="countTime.value > 0">
				<view class="animate"></view>
				<view class="name">{{ countTime.status ? '距活动结束' : '距活动开始' }}</view>
				<view class="timeContainer">
					<view class="day">{{ Math.floor(countTime.value / 24 / 60 / 60) }}</view>
					<text class="fixed">天</text>
					<view class="hour">{{ Math.floor((countTime.value / 60 / 60) % 24) }}</view>
					<text class="fixed">时</text>
					<view class="minutes">{{ Math.floor((countTime.value / 60) % 60) }}</view>
					<text class="fixed">分</text>
					<view class="seconds">
						<view class="seconds_ten">{{ Math.floor((countTime.value % 60) / 10) }}</view>
						<swiper :autoplay="true" :interval="1000" :duration="1000" :vertical="true" :circular="true"
							:disable-touch="true" class="seconds_one" :current="countTime.index" @change="countTiming">
							<swiper-item v-for="i in 10" :key="i">
								<view class="swiper-item">{{ 10 - i }}</view>
							</swiper-item>
						</swiper>
					</view>
					<text class="fixed">秒</text>
				</view>
			</view>
			<view class="NoticeView">
				<view class="noticeTop">
					<view class="noticeIcon" />
					<view class="noticeText" />
					<swiper :autoplay="true" :vertical="true" :circular="true" class="noticeContents">
						<swiper-item v-for="item in messageList" :key="item.id" @click="showMessageInfo(item)">
							<text>{{ item.contents }}</text>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="functionView">
				<view v-for="(v, k, i) in functionList" :key="k" class="functionList">
					<view v-for="(item, i) in v" :key="i" class="functionItem" @click="moduleListFun(item)">
						<image :src="item.icon" class="functionIcon"></image>
						<view class="functionName">{{ item.name }}</view>
						<view v-if="item.num" class="messageNumber">{{ userinfo[item.num] || 0 }}</view>
					</view>
				</view>
			</view>
			<view class="messageToast" v-if="messageVis">
				<view class="messageToastBody">
					<view class="close" @click="
							messageInfo = {};
							messageVis = false;
						"></view>
						
					<view class="title">公告</view>
					<scroll-view :scroll-y="true" class="contents">{{ messageInfo.contents }}</scroll-view>
				</view>
			</view>
		</view>
		<view v-if="shopCar" class="shop" @click="goShop">
			<view class="shop_car" :style="{ 'margin-left' : (shopNum ? '14rpx' : '24rpx') }">
				<image src="../../static/icon/shop_car.png" mode="widthFix" style="width: 55rpx;"></image>
				<view class="messageNumber" v-if="shopNum">
					{{ shopNum }}
				</view>
			</view>
		</view>
		<view class="showTotal" v-if="fillOut">
			<view class="show">
				<image src="../../static/team/lALPDiQ3NdD0r2DNAhDNAmw_620_528.png" mode="widthFix" class="show-image">
				</image>
				<view class="show-button" @click="toFeed">立即填写</view>
			</view>
			<view class="over"></view>
		</view>
		
		<view class="online flexCC" :class="screenState===2?'all':''">
			<view class="exit flexCC" v-if="screenState===2" @click="logout">退出登录</view>
		</view>
		<!-- 契约弹窗 -->
		<view class="pop_up" v-if="showContract">
			<view class="pop_con">
				<image src="../../static/new_index/hint.png" class="hint_icon"></image>
				<view class="hint">{{isShowCode?'契约锁认证':'未完成契约锁认证'}}</view>
				<view v-if="isShowCode" class="flexCC">
					<image :src="contractCode" class="code_img"></image>
					<view class="identify">长按识别二维码进行验证</view>
				</view>
				<view v-else class="flexCC">
					<view class="intr">点击下方按钮查看二维码进行验证</view>
					<view class="close_btn" @click="getAuthCode">查看二维码</view>
				</view>
			</view>
		</view>
		<view v-if="overlay" class="overlay" />
	</view>
</template>

<script>
	import {
		_API_Logout
	} from '@/apis/verify.js'
	import {
		formatDate,
		remove
	} from '../../filters/index.js';
	import {
		deepClone
	} from '@/common/util/index.js';
	import {
		_API_IndexIndex,
		_API_GetActivityTime,
		_API_getMessage,
		_API_CheckAuth,
		_API_Auth
	} from '@/apis/app.js';
	import {
		_API_GetUserStatus,
		_API_GetUserInfo,
		getWxJSSDKConfig
	} from '@/apis/user.js';
	import {
		GetQueryString
	} from '../../filters/index.js';
	import QR from '../../common/util/wxqrcode.js'; // 二维码生成器
	import {
		mapState
	} from 'vuex';
	import {
		myStock
	} from '@/apis/stock.js';
	
	export default {
		data() {
			return {
				overlay: false,
				isShowCode: false, // 是否显示契约二维码
				showContract: false, //显示契约弹窗
				contractCode: '', // 契约二维码
				swiper: [],
				messageList: [],
				messageVis: false,
				messageInfo: {},
				fillOut: false,
				shopNum: 0,
				shopCar: false,
				countTime: {
					value: 0,
					status: 0,
					index: 0
				},
				total: 0,
				screenState: 0 // 0白屏 1 正常  2 只显示实战营
			};
		},
		onLoad() {
			this.shopNum = this.$store.getters['cart/shopcarNum']
			uni.hideTabBar()
		},
		computed: {
			tabBerList() {
				return this.$store.state.tabBer.list;
			},
			...mapState(['userinfo']),
			functionList() {
				const requireBaseUrl = 'static/new_index/function_icon/';
				// 订单
				let orderModules = [{
						name: '订单列表',
						icon: require(`@/${requireBaseUrl}1_2.png`),
						url: 'my-order/my-order'
					},
					{
						name: '订货汇总',
						icon: require(`@/${requireBaseUrl}1_3.png`),
						url: 'order-sum/order-sum',
						num: 'no_money'
					},
					{
						name: '公司发货',
						icon: require(`@/${requireBaseUrl}1_4.png`),
						url: 'deliver-detail/deliver-detail'
					}
				];
				// 库存
				let stockModules = [
					{
						name: '入库',
						icon: require(`@/${requireBaseUrl}2_1.png`),
						url: 'stock/ruku_type'
					},
					{
						name: '出库',
						icon: require(`@/${requireBaseUrl}2_2.png`),
						url: 'stock/chuku'
					},
					{
						name: '库存',
						icon: require(`@/${requireBaseUrl}2_3.png`),
						url: 'stock/stock'
					},
					{
						name: '盘库',
						icon: require(`@/${requireBaseUrl}2_4.gif`),
						url: 'stock/panku'
					}
				]
				//测试账号
				if (this.userinfo.mobile == 15866666666) {
					orderModules.length = 0
				}
				if (this.userinfo.user_type === 3) {
					orderModules.unshift({
						name: '订货下单',
						icon: require(`@/${requireBaseUrl}1_1.png`),
						url: 'place-order/place-order'
					})
				}
				let teamModules = []
				teamModules.push({
					name: '实战营报名',
					icon: require(`@/${requireBaseUrl}3_4.png`),
					url: 'payment-xx/payment'
				})
				// teamModules.push({
				// 	name: '争霸赛报名',
				// 	icon: require(`@/${requireBaseUrl}3_4.png`),
				// 	url: 'zbs/detail'
				// })
				this.shopCar = true
				const modules = {
					order: orderModules,
					stock: this.userinfo.user_type == 3 ? stockModules : [],
					team: teamModules
				};
				return modules;
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		onShow() {
			// this.$store.commit('app/HELPERSTATUS', 0) // 助手状态
			// // 如果是助理登录默认跳转到助手页面
			// if (this.$store.state.app.token && uni.getStorageSync('isHelper')) {
			// 	uni.reLaunch({
			// 		url: '../helper/helper'
			// 	})
			// 	return false
			// }
			if (this.$store.state.app.token) {
				// 当用户处于登录状态
				if (window.location.pathname.split('/').length > 4) {
					window.history.replaceState({}, '', '/api/gzh');
				}
				uni.showLoading({
					mask: true
				})
				this.init();
				this.activityTime();
				this.getMessageList();
			} else {
				this.toWxchatLogin(`/pages/login-reg/login-reg`, null)
			}
			uni.$on('noopening', () => uni.showToast({
				title: '暂未开放',
				duration: 2333,
				icon: 'none'
			}));
			uni.$on('RELAUNCH', () => this.toClearToken()); // 监听 token 失效事件，移除token, 跳转到登录页
			uni.$on('INIT', () => this.init())
		},
		methods: {
			// 移除token，跳转登录页
			toClearToken() {
				this.$store.commit('app/LOGOUT')
				this.toWxchatLogin(`/pages/login-reg/login-reg`, null)
			},
			//获取契约锁二维码
			getAuthCode(type) {
				_API_Auth().then(res => {
					if (res.code === 200) {
						this.contractCode = QR.createQrCodeImg(res.data.url, {
							size: parseInt(300) //二维码大小
						});
						if (this.contractCode) {
							this.isShowCode = true
						} else {
							uni.showToast({
								title: '获取二维码失败'
							})
						}
					} else {
						uni.showModal({
							content: res.data || '获取二维码失败',
							showCancel: false
						})
					}
				})
			},
			// 检查是否完成契约锁认证
			checkContract() {
				_API_CheckAuth().then(res => {
					if (res.code === 200) {
						// 已完成认证 

					} else {
						uni.hideTabBar()

						this.showContract = true
					}
				})
			},
			// 退出登录（只有18888888888账号才显示）
			logout() {
				uni.showLoading({
					mask: true
				})
				_API_Logout().then(() => {
					if (this.$store.state.app.token) {
						this.$store.commit('app/LOGOUT')
						// window.history.replaceState({}, '', '/api/gzh/#/pages/login-reg/login-reg')
						// location.reload()
						this.toWxchatLogin("/pages/login-reg/login-reg", null)
					} else {
						this.$store.commit('app/LOGOUT')
						this.toWxchatLogin("/pages/login-reg/login-reg", null)
					}
				})
			},
			// 跳转到报名支付
			goSigup() {
				uni.navigateTo({
					url: '../payment/payment'
				})
			},
			goShop() {
				uni.navigateTo({
					url: '../shop-car1/shop-car1'
				});
			},
			toFeed() {
				uni.navigateTo({
					url: '../feedback/index'
				});
			},
			skipDetail() {
				uni.navigateTo({
					url: '../article-detail/article-detail?id=' + this.article.id
				});
			},
			skipMore() {
				uni.navigateTo({
					url: '../article-list/article-list'
				});
			},
			moduleListFun(item) {
				let specModuleMap = new Map([
					['stock/panku', this.getMyStock]
				]);
				if (specModuleMap.get(item.url)) {
					specModuleMap.get(item.url)();
				} else {
					this.toUrlLink(item.url);
				}
			},
			getMyStock() {
				myStock()
					.then(res => {
						if (res.code === 200) {
							this.toUrlLink(res.data.status ? 'stock/first_panku' : 'stock/panku');
						} else {
							uni.showModal({
								content: res.message || '获取我的库存失败',
								showCancel: false
							});
						}
					})
					.catch(() => {
						uni.showModal({
							content: '获取我的库存失败',
							showCancel: false
						});
					});
			},
			countTiming() {
				--this.countTime.value;
			},
			// 跳转
			toUrlLink(url) {
				console.log(url)
				if (!url) return false;
				// if (url == 'place-order/place-order') {
				// 	uni.showToast({
				// 		title: '该功能暂未开放',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }
				uni.navigateTo({
					url: `../../pages/${url}`
				})
			},
			showMessageInfo(data) {
				this.messageInfo = data;
				this.messageVis = true;
			},
			getMessageList() {
				_API_getMessage().then(res => {
					if (res.code === 200) {
						this.messageList = res.data.list.info;
						if (res.data.list.notice) {
							this.messageList.unshift(res.data.list.notice);
						}
					}
				});
			},
			activityTime() {
				_API_GetActivityTime().then(res => {
					if (res.code === 200) {
						let {
							end_time,
							start_time
						} = res.data;
						let now = Date.now();
						if ((now >= start_time && now <= end_time) || now <= start_time) {
							this.countTime.value = now <= start_time ? start_time - now : end_time - now;
							this.countTime.value = Math.ceil(this.countTime.value / 1000);
							this.countTime.status = now <= start_time ? 0 : 1;
							this.countTime.index = 9 - Math.floor((this.countTime.value % 60) % 10);
						}
					}
				});
			},
			toSwiperDetail(index) {
				// 点击轮播图
				if (this.swiper[index].is_jump == 1) {
					uni.navigateTo({
						url: `../app-webview/app-webview?url=${this.swiper[index].url}`
					});
				}
			},
			indexRequest() {
				// 请求首页数据
				_API_IndexIndex().then(res => {
					uni.stopPullDownRefresh();
					this.swiper = res.data.swiper;
				});
			},
			init() {
				_API_GetUserStatus()
					.then(res => {
						// 禁止进入系统
						if (res.data.user_type == 1) {
							const that = this
							that.overlay = true
							uni.showModal({
								content: '抱歉，您没有权限进入系统',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										that.$store.commit('app/LOGOUT')
										that.toWxchatLogin(`/pages/login-reg/login-reg`, null)
									}
								}
							})
						}
						// 账号被冻结
						if (res.code == 20014) {
							uni.navigateTo({
								url: '../freeze/freeze?type=' + 1
							})
							return false;
						}
						// 账号被删除
						if (res.data.deleted_at) {
							uni.reLaunch({
								url: '../freeze/freeze?type=' + 2
							})
							return false;
						}

						// 获取用户状态
						this.$store.commit('userinfo/UPDATA_USERINFO', res.data); // 获取用户状态后保存在 vuex 中
						//只显示实战营报名
						if (res.data.mobile === '18888888888') {
							// if (res.data.mobile === '15138929587') {
							this.screenState = 2
							uni.hideTabBar()
						} else {
							this.screenState = 1
							uni.showTabBar()
						}
						// 根据类别，判断是否完成契约锁认证
						if (res.data.user_type === 3) {
							this.checkContract()
							// 初始化契约锁二维码，预防第一次加载失败
							_API_Auth().then(res => {
								if (res.code === 200) {
									this.contractCode = QR.createQrCodeImg(res.data.url, {
										size: parseInt(300) //二维码大小
									});
								}
							})
						}
						//测试begin
						this.is_weiliao = res.data.is_weiliao;
						//测试end
						if (res.data.status == 1) {
							// 用户状态为 1 表示正常
							if ((res.data.cert_status == 3 ||  res.data.cert_status == 6) && res.data.in_group == 1) {
								// 用户认证完成
								this.indexRequest(); // 请求首页数据
								/*获取用户信息*/
								_API_GetUserInfo({
									wxcode: this.$store.state.userinfo.code
								}).then(res => {
									// res.data.user_type = 2
									// 请求用户信息
									uni.stopPullDownRefresh();
									this.$store.commit('userinfo/UPDATA_USERINFO', res
										.data); // 获取用户信息后保存在 vuex 中
									if (this.$store.state.userinfo.pass_status) {
										uni.showModal({
											title: '提示',
											content: '为了保障您的账户安全，请立即修改密码',
											showCancel: false,
											success: res => {
												uni.reLaunch({
													url: '../updata-psw/updata-psw'
												});
											}
										});
									}
									if (!this.$store.state.userinfo.openid) {
										let _this = this;
										uni.showModal({
											title: '提示',
											content: '获取微信信息失败,请重新登录',
											showCancel: false,
											success() {
												_this.$store.commit('app/LOGOUT');
												_this.toWxchatLogin('/pages/login-reg/login-reg', _this.$store.state.userinfo.id);
											}
										});
									}
								});
								// _API_InviteCode().then(res => {
								// 	this.$store.commit('userinfo/UPDATA_USERINFO', {
								// 		invite_code: res.data.invite_code.toUpperCase()
								// 	}); // 获取用户邀请码后保存在 vuex 中
								// });
							} else {
								uni.showModal({
									title: '提示',
									content: '抱歉，您没有权限进入到个人中心',
									showCancel: false,
									success: res => {
										uni.reLaunch({
											url: '/pages/login-reg/login-reg'
										});
									}
								});
							}
						} else if (res.data.status == 0) {
							// 用户状态为 0 表示用户已被冻结
							this.$store.commit('app/LOGOUT');
							this.$refs.ltm.modal('提示', ['您已退出大卫博士'], 'noCancle').then(() => {
								uni.reLaunch({
									url: '../login-reg/login-reg'
								});
							});
						}
					})
					.catch(e => {
						// uni.showModal({
						// 	content: e
						// })
					});
			},
			// 跳转微信登录
			toWxchatLogin(url, state) {
				url = url || '/pages/index/index';
				state = state || 'cli';
				const redirect_uri = encodeURIComponent(`${this.$config.redirect_uri}/api/gzh#${url}`);
				const auth = () =>
					(window.location.href = `${this.$config.wxURL}?appid=${
					this.$config.appid
				}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`);
				auth();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.overlay {
		position: fixed;
		z-index: 999;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: #909399
	}

	.pop_up {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 102;


		.code_box {

			.close_icon {
				margin-top: 60rpx;
				width: 50rpx;
				height: 50rpx;
			}
		}

		.pop_con {
			width: 620rpx;
			background: #fff;
			border-radius: 24rpx;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;



			.hint_icon {
				width: 183rpx;
				height: 135rpx;
				margin-top: -90rpx;
			}

			.code_img {
				margin: 40rpx 0 24rpx;
				width: 370rpx;
				height: 370rpx;
			}

			.hint {
				font-size: 36rpx;
				font-weight: bold;
				margin-top: 20rpx;
			}

			.identify {
				font-size: 32rpx;
			}

			.intr {
				font-size: 32rpx;
				color: #333;
				margin: 20rpx 0 40rpx 0;
			}

			.close_btn {
				width: 430rpx;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				background: linear-gradient(93deg, #F97C55 0%, #F44545 100%);
				border-radius: 44rpx;
				font-size: 32rpx;
				color: #fff;
			}
		}
	}

	.hang {
		width: 100vw;
		height: 100vh;
	}

	.online {
		position: fixed;
		right: 40rpx;
		bottom: 160rpx;
		z-index: 100;

		.showSigup {
			width: 132rpx;
			height: 132rpx;
			// padding: 30rpx;
			background: linear-gradient(150deg, #FFAA01 0%, #FE0000 100%);
			box-shadow: 0px 3px 10px rgba(254, 34, 0, 0.43);
			border-radius: 50%;
			opacity: 1;

			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			text {
				color: #fff;
			}
		}

		.exit {
			width: 308rpx;
			height: 78rpx;
			background: #FFF4F3;
			border: 2rpx solid #FB231F;
			opacity: 1;
			border-radius: 44px;
			font-size: 32rpx;
			color: #FB231F;
			margin-top: 100rpx;
		}
	}

	.all {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 100;
	}


	.showTotal {
		.show {
			width: 620rpx;
			position: fixed;
			left: 0;
			right: 0;
			top: 280rpx;
			margin: auto;
			z-index: 10000;

			&-image {
				width: 620rpx;
				position: relative;
			}

			&-button {
				width: 400rpx;
				line-height: 96rpx;
				text-align: center;
				color: #fff;
				font-size: 32rpx;
				border-radius: 56rpx;
				background: linear-gradient(90deg, #f97c55 0%, #f44545 100%);
				position: absolute;
				bottom: -40rpx;
				left: 110rpx;
			}
		}

		.over {
			width: 100%;
			height: 100%;
			background-color: #000;
			opacity: 0.6;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
		}

		.button {
			width: 400rpx;
			height: 96rpx;
			background: linear-gradient(90deg, #f97c55 0%, #f44545 100%);
		}
	}

	.article {
		width: 100%;
		padding-bottom: 110rpx;
		background: #f9f9fb;

		.article_title {
			padding: 0 30rpx 30rpx;

			.recom {
				font-size: 32rpx;
				font-weight: bold;

				&::before {
					content: '';
					display: inline-block;
					width: 18rpx;
					height: 18rpx;
					border-radius: 50%;
					background: linear-gradient(180deg, #ffaa01 0%, #fe0000 100%);
					margin-right: 15rpx;
				}
			}

			.look_more {
				text {
					font-size: 28rpx;
					color: #999;
				}

				image {
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
					margin-left: 15rpx;
				}
			}
		}

		.article_con {
			background: #fff;
			padding: 30rpx;
			position: relative;

			image {
				width: 176rpx;
				flex-shrink: 0;
				height: 184rpx;
				border-radius: 20rpx;
			}

			.article_intr {
				margin-left: 15rpx;
				font-size: 28rpx;

				>view:first-child {
					font-size: 32rpx;
					font-weight: bold;
				}

				.summary {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					margin: 15rpx 0;
				}
			}
		}
	}

	.recommend_box {
		width: 690rpx;
		margin: 0 auto;
		padding: 24rpx 0;
		background: #fff;
		border-radius: 24rpx;

		.box_item {
			padding: 24rpx;
			box-sizing: border-box;

			.box_icon {
				width: 128rpx;
				height: 128rpx;
				border-radius: 16rpx;
				flex-shrink: 0;
			}

			.center {
				width: 68%;

				view {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 14rpx;
				}

				text {
					font-size: 26rpx;
					color: #999;
				}
			}

			.arrow {
				width: 47rpx;
				height: 47rpx;
				border-radius: 50%;
				background: #FFF4F3;

				.chat-icon {
					font-size: 26rpx;
					color: $base-color;
					font-weight: bold;
				}
			}
		}


		.recommend_title {
			height: 88rpx;
			line-height: 88rpx;
			padding-left: 24rpx;
			border-bottom: 2rpx solid #eee;
			font-size: 34rpx;
			font-weight: bold;

		}
	}

	page {
		display: flex;
		flex-direction: column;
	}

	.shop {
		width: 112rpx;
		height: 112rpx;
		background: linear-gradient(150deg, #FFAA01 0%, #FE0000 100%);
		box-shadow: 0px 6rpx 20rpx 2rpx rgba(254, 34, 0, 0.43);
		border-radius: 50%;
		opacity: 1;
		position: fixed;
		right: 40rpx;
		bottom: 160rpx;
		z-index: 800;

		.shop_car {
			width: 55rpx;
			margin-top: 40rpx;
			margin-left: 15rpx;
			position: relative;
		}

		.messageNumber {
			position: absolute;
			padding: 0 6rpx;
			line-height: 40rpx;
			border-radius: 20px;
			background-color: #fff;
			border: 2rpx solid #FB231F;
			color: #FB231F;
			line-height: 32rpx;
			text-align: center;
			font-size: 28rpx;
			top: 0;
			// left: -10%;
			min-width: 48rpx;
			box-sizing: border-box;
			transform: translate(50%, -16rpx);
		}
	}

	.IndexContainer {
		width: 100%;
		flex: 1;
		min-width: 0;
		padding: 30rpx 30rpx 150rpx 30rpx;
		background: #f9f9fb;

		// padding-bottom: 50px;
		.banner {
			width: 100%;
			height: 344rpx;
			margin-bottom: 30rpx;

			.bannerImg {
				width: 100%;
				height: 100%;
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center;
				border-radius: 24rpx;
			}
		}

		.functionView {
			width: 100%;
			background: #ffffff;
			margin-bottom: 30rpx;
			border-radius: 24rpx;
			padding: 30rpx 0;
			padding-bottom: 0;

			.functionList {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				position: relative;

				.functionItem {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					width: 25%;
					margin-bottom: 20rpx;
					position: relative;

					.functionIcon {
						width: 96rpx;
						height: 96rpx;
						margin-bottom: 12rpx;
					}

					.functionName {
						color: #333333;
						font-size: 24rpx;
						line-height: 30rpx;
					}

					.messageNumber {
						position: absolute;
						padding: 0 6rpx;
						height: 32rpx;
						border-radius: 32rpx;
						border-bottom-left-radius: 0;
						background: linear-gradient(to right, #ffc401 0%, #fe2400 51%, #fe0000 100%);
						color: #ffffff;
						line-height: 32rpx;
						text-align: center;
						font-size: 28rpx;
						top: 0;
						left: 50%;
						min-width: 48rpx;
						box-sizing: border-box;
						transform: translate(50%, -16rpx);
					}
				}
			}
		}

		.countTime {
			width: 100%;
			height: 132rpx;
			margin-bottom: 44rpx;
			background-image: url(../../static/new_index/count_time.png);
			background-position: center;
			background-size: 100%;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx;
			box-sizing: border-box;

			.animate {
				position: absolute;
				width: 200rpx;
				height: 100%;
				top: 50%;
				left: 30rpx;
				transform: translateY(-50%);
				overflow: hidden;

				&::before {
					content: '';
					display: block;
					width: 24rpx;
					height: calc(100% * 1.5);
					background-color: #ffffff;
					position: absolute;
					top: 40%;
					left: -3%;
					transform: rotate(20deg) translateY(-50%);
					animation: timeAnimate 2s backwards infinite;
					opacity: 0;
				}

				@keyframes timeAnimate {
					0% {
						opacity: 0;
						left: -3%;
					}

					33% {
						opacity: 0.2;
						left: 18%;
					}

					66% {
						opacity: 0.4;
						left: 39%;
					}

					100% {
						opacity: 0.2;
						left: 60%;
					}
				}
			}

			.timeContainer {
				display: flex;
				align-items: flex-end;
				justify-content: flex-end;

				.day,
				.hour,
				.minutes,
				.seconds {
					width: 66rpx;
					height: 66rpx;
					border-radius: 8rpx;
					text-align: center;
					line-height: 66rpx;
					background-color: #c40604;
					color: #ffe682;
					font-size: 40rpx;
					margin: 0 8rpx;
					overflow: hidden;
				}

				.fixed {
					color: #ffffff;
					font-size: 24rpx;
				}

				.seconds {
					display: flex;
					align-items: center;
					justify-content: space-around;

					.seconds_ten,
					.seconds_one {
						flex: 1;
						overflow: hidden;
						text-align: center;
						height: 100%;
						color: #ffe682;
					}

					.seconds_one {
						background-color: #700706;
					}

					.swiper-item {
						color: #ffe682;
					}
				}
			}

			.name {
				color: #ffffff;
				font-size: 32rpx;
			}
		}

		.NoticeView {
			width: 100%;
			margin-bottom: 30rpx;

			.noticeTop {
				width: calc(100% - 40rpx);
				height: 98rpx;
				margin: 0 auto;
				padding: 0 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: linear-gradient(to right, #ffe9c2, #ffcd81);
				border-top-right-radius: 24rpx;
				border-top-left-radius: 24rpx;
				position: relative;

				.noticeIcon {
					width: 70rpx;
					height: 70rpx;
					background-image: url(../../static/new_index/notice.png);
					background-position: center;
					background-size: cover;
					background-repeat: no-repeat;
				}

				.noticeText {
					width: 82rpx;
					height: 42rpx;
					background-image: url(../../static/new_index/notice2.png);
					background-position: center;
					background-size: cover;
					background-repeat: no-repeat;
					margin: 0 16rpx 0 24rpx;
				}

				.noticeContents {
					flex: 1;
					min-width: 0;
					height: 40rpx;
					color: #333333;
					font-size: 28rpx;
					line-height: 40rpx;
					margin-left: 16rpx;
				}

				&::after {
					content: '';
					display: block;
					width: 100%;
					height: 22rpx;
					background: linear-gradient(90deg, #ffe9c2 0%, #ffcd81 100%);
					position: absolute;
					bottom: -6rpx;
					left: 0;
					right: 0;
				}
			}

			&::after {
				content: '';
				display: block;
				width: 100%;
				height: 12rpx;
				border-radius: 12rpx;
				background: linear-gradient(to right, rgba(228, 142, 14, 0.2), rgba(228, 142, 14, 0.6));
			}
		}
	}

	.messageToast {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.messageToastBody {
			width: calc(100% - 60rpx);
			background-color: #ffffff;
			border-radius: 20rpx;
			padding: 60rpx;
			box-sizing: border-box;
			position: relative;

			.close {
				width: 72rpx;
				height: 72rpx;
				background-color: rgba(0, 0, 0, 0.4);
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				top: 24rpx;
				right: 24rpx;
				border-radius: 50%;

				&::after {
					content: '\2715';
					display: block;
					color: #ffffff;
					font-size: 36rpx;
				}
			}

			.title {
				width: 150rpx;
				color: #333333;
				font-size: 46rpx;
				margin: 0 auto;
				margin-bottom: 60rpx;
				text-align: center;
				position: relative;
				height: 50rpx;
				line-height: 50rpx;

				&::after {
					content: '';
					display: block;
					width: 100%;
					height: 22rpx;
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					background-image: linear-gradient(rgba(255, 223, 187, 0), rgba(255, 159, 49, 0.8));
				}
			}

			.contents {
				width: 100%;
				height: 600rpx;
				color: #666666;
				font-size: 36rpx;
				line-height: 50rpx;
			}
		}
	}
</style>