weapp-v4/pages/index/index.vue

<template>
	<view class="home">
		<view class="pop" v-if="showPrivacy">
			<view class="pop_con">
				<view class="title">用户隐私保护提示</view>
				<view class="desc">
					<view class="desc_con">感谢您使用本程序，您使用本程序前应当阅井同意</view>
					<view class="file" @click="openPrivacyContract">《大卫博士争霸赛小程序隐私保护指引》</view>
					<view class="desc_con">
						当您点击同意并开始时用产品服务时，即表示你已理解并同息该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法进入程序。</view>
				</view>
				<view class="btn_box">
					<navigator open-type="exit" target="miniProgram" class="exit_btn" id="disagree-btn">不同意退出
					</navigator>
					<button id="agree-btn" @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
						open-type="agreePrivacyAuthorization">同意并继续</button>
				</view>
			</view>
		</view>
		<view class="index">
			<custom-warn v-if="showWarn"></custom-warn>
			<custom-toast ref='toast'></custom-toast>
			<view class="header-bg"></view>
			<view v-if="showphonelabel" class="showphonelabel" @click="goshowphone"></view>
			<view class="title" v-if="userServerInfo.season">大卫博士学位争霸赛第{{ userServerInfo.season}}季</view>
			<view class="user_info_new">
				<view class="userinfo">
					<view class="top">
						<image class="user-pic"
							:src="userServerInfo.avatar? userServerInfo.avatar : '../../static/icon/user.jpg'"
							mode="scaleToFill"></image>
						<image v-if="userServerInfo.score >= 300" class="hat" src="../../static/icon/hat.png"
							mode="scaleToFill"></image>
						<view class="user-info" @tap="changeName">
							<view class="name-grade-level">
								<view class="name">
									{{ userServerInfo.name? userServerInfo.name : '更换昵称头像' }}
								</view>
								<view class="grade">
									{{ userServerInfo.grade === undefined ? '未验证' : userServerInfo.grade }}
								</view>
							</view>
						</view>
					</view>
					<view class="user-status" v-if="userStatus"
						:class="(userStatus === '报名截止' || userStatus === '暂未开赛') ? 'end' : ''" @tap="tapUserStatus">
						{{userStatus}}
					</view>
				</view>
				<view class="biye_tip" v-if="userServerInfo.signuped && userServerInfo.status === 1">
					<template v-if="userServerInfo.status === 1">
						<view>
							你已连续参赛{{ userServerInfo.enrol_count }}季，你真棒！继续努力，加油！
						</view>
					</template>
				</view>
			</view>
			<view v-if="timer" class="index_countdown">
				<text style="font-size: 30rpx;">距{{ timerStatus ? '结束' : '开始' }}仅剩：</text>
				<text class="spec bg1">{{ countDown[0] || '00' }}</text>
				<text class="small">天</text>
				<text class="spec bg2">{{ countDown[1] || '00' }}</text>
				<text class="small">时</text>
				<text class="spec bg3">{{ countDown[2] || '00' }}</text>
				<text class="small">分</text>
				<view class="spec bg4 animate_second" v-if="countDown[3] || countDown[3] === 0">
					<swiper :indicator-dots="false" :autoplay="false" :interval="10000" :duration="300" :circular="true"
						:vertical="true" :current="countA.findIndex(i => +i === Number(countDown[3]))"
						:disable-touch="true" class="animate_item">
						<swiper-item v-for="n of countA" :key="n">
							<view class="swiper-item">{{ n }}</view>
						</swiper-item>
					</swiper>
					<swiper :indicator-dots="false" :autoplay="true" :interval="1000" :duration="300" :circular="true"
						:vertical="true" :disable-touch="true"
						:current="countB.findIndex(i => +i === Number(countDown[4]))" class="animate_item"
						@change="changeCountTime">
						<swiper-item v-for="n in countB" :key="n">
							<view class="swiper-item">{{ n }}</view>
						</swiper-item>
					</swiper>
				</view>
				<text class="small">秒</text>
			</view>
			<view v-if="messageList.length > 0" class="swiper_parant">
				<view class="message_icon_box">
					<image src="../../static/new/message2.jpg" mode="" class="message_icon"></image>
					<text>恭喜</text>
				</view>
				<swiper class="swiper swiper_message" :indicator-dots="false" :autoplay="true" :circular="true"
					@animationfinish="changeMessageSwiper" interval="1500">
					<swiper-item v-for="(item, i) in messageList" :key="i">
						<view class="swiper-item uni-bg-red">{{ item.data }}</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="entrance">
				<!-- <view class="nav_container"> -->
				<view class="index-item item_bg2" @tap="toupload">
					<text class="name">课程表</text>
					<image src="https://api.jiuweiyun.cn/public/uploads/weapp/icon/index_bg2.png" class="coverImg cv2">
				</view>
				<!-- </view> -->
			</view>
			<!-- <view class="" @click="toduihuan">
				礼品兑换
			</view> -->
			<button v-if="showGetUserInfoButton" class="getUserInfo" type="default" @click="getuserinfo"></button>
		</view>
	</view>


</template>

<script>
	import customWarn from '../../components/custom-warn.vue'
	import {
		toast_sure,
		index_message,
		api_onLaunch,
		GetSetingTime
	} from '../../api.js'
	import {
		setInterval,
		clearInterval
	} from 'timers'
	import PrivacyPopup from "../../components/privacyPopup.vue";
	export default {
		onShareAppMessage() { //分享
			uni.showLoading({
				title: '加载中',
				mask: true
			}) //显示loading
			return { //如果点击右上角分享按钮，则分享页面为小程序主页
				title: '大卫博士学位争霸赛',
				path: '/pages/index/index'
			}
		},
		onPullDownRefresh() {
			if (this.showPrivacy) {
				return
			}
			this.routing = false
			if (this.showGetUserInfoButton == false) {
				this.$store.dispatch('newLogin').then(() => {
					this.init()
				})
			}
		},
		components: {
			customWarn,
			PrivacyPopup
		},
		data() {
			return {
				timer: null,
				now: null,
				messageList: [],
				timerStatus: null,
				countA: [5, 4, 3, 2, 1, 0],
				countB: [9, 8, 7, 6, 5, 4, 3, 2, 1, 0],
				code: '',
				showPrivacy: false, //是否展示隐私弹窗
			}
		},
		computed: {
			showphonelabel() {
				// console.log('index里的按钮',this.$store.state.showphoneBtn)
				return this.$store.state.showphoneBtn
			},
			showWarn() {
				return this.$store.state.showWarn
			},
			userWeixinInfo() { //用户微信信息
				return this.$store.state.userWeixinInfo
			},
			userServerInfo() { //用户服务器信息
				return this.$store.state.userServerInfo
			},
			showGetUserInfoButton() { //是否显示获取用户信息的透明按钮
				// console.log('授权按钮',this.$store.state.showGetUserInfoButton)
				return this.$store.state.showGetUserInfoButton
			},
			userStatus() { //根据赛季阶段和用户类型，显示不同可操作项
				if (this.$verified()) { //如果用户已经登录，进行下一步判断
					if (this.userServerInfo.status) { //如果赛季已经开赛
						if (this.userServerInfo.status === 1) { //如果赛季正处于报名阶段
							if (this.userServerInfo.signuped) { //如果用户已报名
								return '已报名'
							} else { //如果用户未报名,那么可能是 type 1 用户真没报名  2 批发商 3 客服
								// if (this.userServerInfo.type === 1) {
								// 	return '报名参赛'
								// } else if (this.userServerInfo.type === 2) {
								// 	return '报名参赛'
								// } else if (this.userServerInfo.type === 3) {
								// 	return ''
								// }
								return '报名参赛'
							}
						} else if (this.userServerInfo.status === 2 || this.userServerInfo.status === 3 || this.userServerInfo.status === 4 || this.userServerInfo.status === 5) { //如果赛季正处于比赛或兑奖阶段
							if (this.userServerInfo.signuped) { //如果用户已报名
								return '已报名'
							} else { //如果用户未报名，那么可能是 1 用户真没报名  2 批发商 3 客服
								return ''
							}
						}
					} else { //如果赛季暂未开赛
						return '暂未开赛'
					}
				} else { //如果用户未登录
					return '绑定账号'
				}
			},
			countDown() {
				let time = this.timerStatus ? this.userServerInfo.end_time : this.userServerInfo.start_time
				const sec = Math.floor((time - this.now) / 1000)
				let day = Math.floor(sec / 86400)
				let hour = Math.floor((sec % 86400) / 3600)
				let minite = Math.floor((sec - 86400 * day - hour * 3600) / 60)
				let second = Math.floor(sec - 86400 * day - hour * 3600 - minite * 60)
				day = day >= 10 ? day : `0${day}`
				hour = hour >= 10 ? hour : `0${hour}`
				minite = minite >= 10 ? minite : `0${minite}`
				second = String(second)
				let arr = [day, hour, minite, second >= 10 ? second[0] : 0, second >= 10 ? second[1] : second]
				return arr
			}
		},
		created() { //加载完成后开启监听全局 MESSAGE 事件
			uni.$on('MESSAGE', (m, d, p) => { //m 要提示的文字信息  d 文字信息出现的时常  p 文字信息出现的位置
				this.$refs.toast.hover(m, d, p)
			})
			uni.$on('HIDEMESSAGE', () => { // 隐藏 文字提示
				this.$refs.toast.hide()
			})
			// console.log('初始化',this.showphonelabel)
		},
		onShow() { //每次展示首页时都初始化一次，达到实时更新数据的功能
			// 判断是否授权了隐私协议
			if (uni.getPrivacySetting) {
				uni.getPrivacySetting({
					success: res => {
						//console.log("是否需要授权：", res.needAuthorization, "隐私协议的名称为：", res.privacyContractName)
						if (res.needAuthorization) {
							//显示隐私协议弹窗
							this.showPrivacy = true
						} else {
							//隐藏隐私协议弹窗并获取用户信息
							this.showPrivacy = false
							let that = this
							// console.log(1111111,uni.getStorageSync('play'))
							// if ('none'.indexOf(that.networkType) == -1) { //有网络连接时才进行下一步
							this.GetSetingTimeInfo()
							this.$store.dispatch('newLogin').then(() => {
								this.routing = false
								this.init()
							})
							if (uni.fromUpload) {
								uni.fromUpload = false
								if (uni.toRank) {
									uni.toRank = false
									uni.navigateTo({
										url: '../ranking/ranking'
									})
								}
							}
							// } else {
							// 	uni.showToast({
							// 		title: '似乎已经断开网络连接',
							// 		icon: 'none'
							// 	})
							// }
						}
					},
					fail: () => {},
					complete: () => {},
				})
			}
		},
		methods: {
			toduihuan() {
				uni.navigateTo({
					url: '/pages/exchange/exchange'
				})
			},
			//修改昵称头像
			changeName() {
				if (this.$verified()) { //用户是否已登录
					if (this.routing) {
							return
					}
					this.routing = true
					uni.navigateTo({
						url: '../information/information?from=' + 1
					})
				}
			},
			//打开隐私协议
			openPrivacyContract() {
				wx.openPrivacyContract({
					success: res => {
						console.log('openPrivacyContract success')
					},
					fail: res => {
						console.error('openPrivacyContract fail', res)
					}
				})
			},
			//同意并继续按钮
			handleAgreePrivacyAuthorization() {
				this.showPrivacy = false
				let that = this;
				this.GetSetingTimeInfo()
				this.$store.dispatch('newLogin').then(() => {
					this.routing = false
					this.init()
				})
				if (uni.fromUpload) {
					uni.fromUpload = false
					if (uni.toRank) {
						uni.toRank = false
						uni.navigateTo({
							url: '../ranking/ranking'
						})
					}
				}
			},
			goshowphone() {
				uni.showModal({
					title: '提示',
					showCancel: false,
					content: '请使用代理商系统的账号密码登录',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '../boundPhone/boundPhone'
							})
						}
					}
				});
			},
			// 系统升级
			GetSetingTimeInfo() {
				let that = this
				this.$ajax.get(`${GetSetingTime}`).then(([, {
					data: res
				}]) => {
					if (res.code == 200) {
						if (res.data.status == 1) {
							var start_time = res.data.start_time
							var end_time = res.data.end_time
							var tmp = (Date.parse(new Date()).toString()).substr(0, 10)
							if (tmp >= start_time && tmp <= end_time) {
								uni.redirectTo({
									url: './upgrade?end_time=' + end_time
								})
							}
						}
						this.routing = false
					} else {
						this.routing = false
						uni.showModal({
							content: res.message,
							showCancel: false
						})
					}
				}).catch(() => {
					this.routing = false
				})
			},
			changeCountTime() {
				this.now = Date.now()
			},
			init() {
				let _this = this
				_this.now = Date.now()
				if (_this.userServerInfo.start_time && _this.userServerInfo.end_time) {
					let {
						start_time,
						end_time
					} = _this.userServerInfo
					if (_this.now > start_time - 5 * 24 * 3600 * 1000 && _this.now < start_time) {
						_this.timerStatus = false
						_this.timer = true
						// _this.timer = setInterval(() => {
						// 	_this.now = Date.now()
						// }, 1000 * 60)
					} else if (_this.now > start_time && _this.now < end_time) {
						_this.timerStatus = true
						_this.timer = true
						// _this.timer = setInterval(() => {
						// 	_this.now = Date.now()
						// }, 1000 * 1)
						// 活动期间 获取滚动卖货消息
						_this.index_message()
					} else {
						if (this.timer) {
							// clearInterval(_this.timer)
							_this.timer = null;
						}
					}
				} else {
					if (this.timer) {
						// clearInterval(_this.timer)
						_this.timer = null;
					}
				}
				uni.stopPullDownRefresh()
			},
			changeMessageSwiper({
				detail
			}) {
				let current = detail.current;
				if (current >= this.messageList.length) {
					this.index_message();
				}
			},
			// 获取滚动消息
			index_message() {
				this.$ajax.get(`${index_message}`).then(([, {
					data: res
				}]) => {
					if (res.code === 200) {
						this.messageList = res.data.list
					}
				})
			},
			getuserinfo() { //获取用户信息
				this.$store.commit('HIDEGETUSERINFOBUTTON') //隐藏透明按钮
				let _this = this
				this.$store.dispatch('getUserInfo').then(() => {
					_this.init()
				})
			},
			tapUserStatus() { //点击用户状态
				if (this.userStatus === '报名参赛') {
					if (this.routing) {
						return
					}
					this.routing = true
					uni.navigateTo({
						url: '../signup/signup'
					})
				} else if (this.userStatus === '暂未开赛') {
					this.$refs.toast.hover('暂未开赛，非常感谢您的关注。')
				}
			},
			// 课程表
			toupload() {
				let now = Date.now()
				let {
					end_time,
					start_time
				} = this.userServerInfo
				let week
				if (now > end_time) {
					week = 3
				} else if (now < start_time) {
					week = 0
				} else {
					week = Math.ceil((now - start_time) / (7 * 24 * 60 * 60 * 1000))
				}
				uni.navigateTo({
					url: '../course/list?week=' + week
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.new_pop {
		width: 648rpx;
		height: 368rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 0 auto;
		text-align: center;
		padding-top: 60rpx;

		.new_title {
			font-size: 38rpx;
			font-weight: bold;
			color: #000;
		}

		.new_content {
			font-size: 34rpx;
			color: #333;
			margin: 24rpx 0 40rpx 0;
		}

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

			view {
				width: 260rpx;
				height: 88rpx;
				line-height: 88rpx;
				background: #F5F5F5;
				border-radius: 44rpx;
				color: #333;
				font-size: 32rpx;
				font-weight: bold;
			}

			view:last-child {
				background: linear-gradient(93deg, #F30000 0%, #FE4815 100%);
				color: #fff;
			}
		}
	}

	.home {
		width: 100vw;
		height: 100vh;
		position: relative;

		.pop {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			bottom: 0;
			z-index: 999;
			background-color: rgba(0, 0, 0, 0.3);

			.pop_con {
				width: 100%;
				height: 40vh;
				background: #fff;
				border-top-left-radius: 26rpx;
				border-top-top-radius: 26rpx;
				position: fixed;
				left: 0;
				bottom: 0;
				padding: 0 30rpx;
				box-sizing: border-box;
				z-index: 9999;

				.title {
					font-size: 36rpx;
					font-weight: bold;
					margin: 24rpx 0;
				}

				.desc {
					font-size: 30rpx;
					color: 999;

					.file {
						color: #FB231F;
						margin: 24rpx 0;
						font-size: 32rpx;
					}
				}

				.btn_box {
					margin-top: 40rpx;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.exit_btn {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 300rpx;
						height: 88rpx;
						background: #E9E9E9;
						border-radius: 44rpx;
						font-size: 32rpx;
						color: #333;
					}

					button {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 300rpx;
						height: 88rpx;
						background: #FB231F;
						border-radius: 44rpx;
						font-size: 32rpx;
						color: #fff;
						background: linear-gradient(93deg, #F30000 0%, #FE4815 100%);
					}

				}

			}
		}
	}

	.privacy-popup {
		position: absolute;
		top: 0;
		left: 0;
	}

	.challenge-num {
		display: flex;
		flex-direction: column;
		align-items: center;

		.challenage-num-top {
			width: 626rpx;
			height: 612rpx;
			background: url(http://picture.liuliwa.top/new_challenge_toast/7.png) center no-repeat;
			background-size: 100%;
			margin: 0 auto 94rpx auto;
			position: relative;

			.challenage-num-body {
				width: 570rpx;
				height: 385rpx;
				position: absolute;
				bottom: 28rpx;
				left: 28rpx;
				border-radius: 24rpx;
				padding: 84rpx 30rpx 44rpx 30rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.challenge-num-item {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.label {
						color: #5D330D;
						font-size: 32rpx;
						margin-right: 10rpx;
					}

					.spec {
						color: #DD372D;
						font-size: 48rpx;
					}
				}
			}
		}

		.challenge-num-btn {
			width: 502rpx;
			height: 96rpx;
			border-radius: 96rpx;
			background: linear-gradient(180deg, #FEEB71 0%, #F89018 100%);
			color: #984100;
			font-size: 32rpx;
			font-weight: bold;
			line-height: 96rpx;
			text-align: center;
		}
	}

	.challenge-invite {
		display: flex;
		flex-direction: column;
		align-items: center;

		.challenge-user {
			width: 426rpx;
			height: 334rpx;
			margin: 0 auto 48rpx auto;
			background: url(http://picture.liuliwa.top/new_challenge_toast/5.png) center no-repeat;
			background-size: 100%;
			position: relative;

			.user-avatar {
				width: 168rpx;
				height: 168rpx;
				border-radius: 50%;
				position: absolute;
				bottom: 8rpx;
				left: 50%;
				transform: translateX(-50%);
				background-position: center;
				background-repeat: no-repeat;
				background-size: 100%;
				background-color: #007AFF;
			}
		}

		.challenge-title {
			width: 456rpx;
			color: #FFF1AD;
			font-size: 32rpx;
			line-height: 50rpx;
			margin-bottom: 86rpx;
			font-weight: bold;
		}

		.challenage-btn {
			width: 502rpx;
			height: 96rpx;
			border-radius: 96rpx;
			background: linear-gradient(180deg, #FEEB71 0%, #F89018 100%);
			color: #984100;
			font-size: 32rpx;
			font-weight: bold;
			line-height: 96rpx;
			text-align: center;
		}
	}

	.index {
		width: 100%;
		height: 100vh;
		position: relative;
		box-sizing: border-box;
		padding: 161rpx 30rpx 0;
		display: flex;
		flex-direction: column;

		.index_countdown {
			width: 100%;
			height: 140rpx;
			background-image: linear-gradient(#4CBA59, #6BE57D);
			color: #FFFFFF;
			border-radius: 6rpx;
			margin-top: 10rpx;
			line-height: 60rpx;
			text-align: center;
			letter-spacing: 4rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;

			.bg1 {
				background-color: #FD715D;
			}

			.bg2 {
				background-color: #3397DB;
			}

			.bg3 {
				background-color: #F39B11;
			}

			.bg4 {
				// background-color: #B933FF;
			}

			.animate_second {
				display: flex !important;
				justify-content: space-between;
				align-items: center;

				.animate_item {
					flex: 1;
					height: 70rpx;

					&:nth-of-type(1) {
						background-color: #e3abff;
					}

					&:nth-last-of-type(1) {
						background-color: #B933FF;
					}

					text-align: center;
				}
			}

			.spec {
				display: block;
				text-align: center;
				line-height: 70rpx;
				color: #FFFFFF;
				width: 70rpx;
				height: 70rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}

			.small {
				font-size: 24rpx;
				margin: 0 8rpx;
				margin-top: 40rpx;
			}
		}

		.xuefen_toast {
			width: 600rpx;
			height: 760rpx;

			.text {
				position: absolute;
				width: 430rpx;
				bottom: 217rpx;
				left: 50%;
				margin-left: -215rpx;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				font-size: 28rpx;
				color: #333333;

				view {
					width: calc(50% - 10rpx);
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					&:nth-last-child(1),
					&:nth-last-child(2) {
						margin-bottom: 0;
					}

					&:nth-child(2n) {
						text-align: right;
						margin-left: 20rpx;
					}
				}
			}
		}

		.yingzhan_toast {
			width: 574rpx;
			height: 596rpx;

			.text {
				left: 0;
				width: 100%;
				color: #F76454;
				font-size: 36rpx;
				position: absolute;
				text-align: center;
				top: 120rpx;
			}
		}

		.xiazhu_toast {
			width: 563rpx;
			height: 653rpx;

			.text {
				color: #712722;
				font-size: 28rpx;
				width: 402rpx;
				position: absolute;
				bottom: 188rpx;
				left: 50%;
				margin-left: -201rpx;

				text {
					display: block;
					margin-bottom: 20rpx;
					text-align: center;

					&:nth-last-child(1) {
						margin-bottom: 0;
					}
				}
			}
		}

		.tiaozhan_toast {
			width: 520rpx;
			height: 755rpx;

			.text {
				color: #712722;
				font-size: 28rpx;
				width: 390rpx;
				position: absolute;
				bottom: 160rpx;
				left: 50%;
				margin-left: -195rpx;
				line-height: 48rpx;
				text-align: center;
			}
		}

		.xuewei_toast {
			width: 712rpx;
			height: 750rpx;

			.text {
				font-size: 62rpx;
				color: #FFFFFF;
				position: absolute;
				width: 488rpx;
				text-align: center;
				height: 104rpx;
				line-height: 104rpx;
				left: 50%;
				margin-left: -244rpx;
				bottom: 138rpx;
			}
		}

		.xueba_toast {
			width: 662rpx;
			height: 685rpx;

			.text {
				width: 416rpx;
				text-align: center;
				height: 112rpx;
				line-height: 112rpx;
				color: #FFFFFF;
				font-size: 58rpx;
				position: absolute;
				left: 50%;
				margin-left: -208rpx;
				bottom: 226rpx;
			}
		}

		.getUserInfo {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 9999;
			background: rgba(1, 1, 1, 0);
		}

		.showphonelabel {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 9999;
			background: rgba(1, 1, 1, 0);
		}

		.header-bg {
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
			width: 100%;
			height: 286rpx;
			background: linear-gradient(-2deg, rgba(255, 68, 54, 1) 0%, rgba(254, 132, 72, 1) 100%);
			border-bottom-right-radius: 350rpx 30rpx;
			border-bottom-left-radius: 350rpx 30rpx;
		}

		.title {
			position: absolute;
			top: 70rpx;
			left: 30rpx;
			@include text(34rpx);
			color: #FFFFFF;
		}

		.user_info_new {
			background: linear-gradient(#FFCF82, #FF9C00);
			border-radius: 10rpx;

			.biye_tip {
				height: 64rpx;
				background: rgba(0, 0, 0, .4);
				color: #FFFFFF;
				font-size: 28rpx;
				padding: 0 22rpx;
				box-sizing: border-box;
				width: 100%;
				line-height: 64rpx;
				border-bottom-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
			}
		}

		.userinfo {
			position: relative;
			width: 100%;
			height: 225rpx;
			box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.2);
			border-radius: 10px;
			box-sizing: border-box;
			padding: 22rpx;

			.top {
				height: 98rpx;
				display: flex;
				align-items: center;
				position: relative;

				.user-pic {
					height: 100%;
					width: 98rpx;
					background-color: #B2B2B2;
					border-radius: 50%;
					overflow: hidden;
				}

				.hat {
					position: absolute;
					top: -40rpx;
					left: 0px;
					width: 80rpx;
					height: 69.873rpx;
				}

				.user-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 100%;
					margin-left: 16rpx;
					overflow: hidden;

					.progress {
						font-size: 26rpx;
						color: #FFFFFF;
					}

					.name-grade-level {
						height: 100%;
						width: 100%;
						display: flex;
						align-items: center;

						.name {
							font-size: 32rpx;
							color: #FFFFFF;
							max-width: 38%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.grade {
							font-size: 26rpx;
							color: rgba(255, 255, 255, 1);
							margin-left: 16rpx;
							vertical-align: baseline;
						}

						.level {
							margin-left: 18rpx;
							height: 30rpx;
							border-radius: 15rpx;
							font-size: 26rpx;
							background: #FFFFFF;
							color: rgba(250, 99, 66, 1);

							text {
								float: right;
								line-height: 35rpx;
								margin: 0 12rpx;
							}

							image {
								width: 30rpx;
								height: 30rpx;
								float: left;
							}
						}
					}
				}
			}

			.user-status {
				position: absolute;
				width: 170rpx;
				height: 60rpx;
				top: 111rpx;
				right: 0;
				line-height: 62rpx;
				background: #FFFFFF;
				text-align: center;
				border-radius: 30rpx 0 0 30rpx;
				font-size: 32rpx;
				color: rgba(250, 99, 66, 1);

				&.end {
					background: #999999;
					color: #FFFFFF;
				}
			}

			.countdown {
				position: absolute;
				right: 12rpx;
				top: 171rpx;
				display: flex;
				color: #FFFFFF;
			}

			.score,
			.rank {
				position: absolute;
				left: 32rpx;
				bottom: 35rpx;
				font-size: 32rpx;
				color: rgba(255, 255, 255, 1);

				&.rank {
					left: 294rpx;
				}
			}
		}

		.entrance {
			flex: 1;
			z-index: 1;
			margin: 10rpx 0;
			position: relative;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			.nav_container {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
			}

			.item_bg1 {
				// background-image: url(../../static/new/index_bg1.png);
				background-image: linear-gradient(#79a9fd, #929ef2);
			}

			.item_bg2 {
				// background-image: url(../../static/new/index_bg2.png);
				background-image: linear-gradient(#ff634c, #ff9587);
			}

			.item_bg3 {
				// background-image: url(../../static/new/index_bg3.png);
				background-image: linear-gradient(#fdad29, #ffcf4b);
			}

			.item_bg4 {
				// background-image: url(../../static/new/index_bg4.png);
				background-image: linear-gradient(#d486f9, #b063f8);
			}

			.index-item {
				width: 100%;
				position: relative;
				min-height: 285rpx;
				overflow: hidden;
				border-radius: 10px;
				box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.2);
				font-size: 30rpx;
				color: #FFFFFF;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				margin-right: 5rpx;
				margin-bottom: 12rpx;

				&:nth-of-type(2n) {
					margin-right: 0;
					margin-left: 5rpx;
				}

				.name {
					z-index: 1;
					top: 38rpx;
					left: 30rpx;
					color: #FFFFFF;
					font-size: 40rpx;
					position: absolute;
					font-weight: 500;
				}

				view {
					position: absolute;
					left: 30rpx;
					top: 87rpx;
					font-size: 24rpx;
					color: #FFFFFF;
				}

				.coverImg {
					position: absolute;
				}

				.cv1 {
					width: 238rpx;
					height: 260rpx;
					right: 30rpx;
					bottom: 0;
				}

				.cv2 {
					width: 200rpx;
					height: 163rpx;
					right: 44rpx;
					bottom: 31rpx;
				}

				.cv3 {
					width: 194rpx;
					height: 180rpx;
					right: 22rpx;
					bottom: 25rpx;
				}

				.cv4 {
					width: 187rpx;
					height: 187rpx;
					right: 53rpx;
					bottom: 31rpx;
				}
			}
		}

		.rules {
			font-size: 24rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-weight: bold;
			color: rgba(243, 67, 54, 1);

			text {
				margin-left: 9rpx;
			}
		}

		.swiper_parant {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #FF9C00;
			border-radius: 10rpx;
			height: 70rpx;
			margin: 5px 0;
			padding: 0 20rpx;
			box-sizing: border-box;

			// &::before{
			// 	content: "";
			// 	display: block;
			// 	width: 30rpx;
			// 	height: 30rpx;
			// 	background-image: url(../../static/new/message.png);
			// 	background-repeat: no-repeat;
			// 	background-size: 100% 100%;
			// 	margin-right: 10rpx;
			// }
			.message_icon_box {
				color: #FA6342;
				font-size: 32rpx;
				width: 135rpx;
				height: 54rpx;
				padding: 14rpx 12rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-right: 20rpx;
				background-color: #FFFFFF;
				border-radius: 8rpx;

				.message_icon {
					width: 32rpx;
					height: 26rpx;
					margin-right: 10rpx;
				}
			}
		}

		.swiper_message {
			flex: 1;
			height: 60rpx;
			box-sizing: border-box;
			line-height: 60rpx;
			color: #FFFFFF;
			font-size: 28rpx;
		}

		.hadChallenge {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.3);
			@include flex(column);
			z-index: 2;

			.challenage {
				width: 574rpx;
				height: 596rpx;
				position: relative;

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

				.challengeName {
					left: 0;
					width: 100%;
					top: 128rpx;
					color: #F76454;
					font-size: 36rpx;
					position: absolute;
					text-align: center;
				}
			}

			.closeChallenge {
				width: 62rpx;
				height: 62rpx;
				@include flex();
				font-size: 56rpx;
				margin-top: 30rpx;
				border-radius: 50%;
				background: #FFFFFF;
			}
		}
	}

	.courseDialog {
		width: 80%;
		margin: 0 auto;
		height: 700rpx;

		.courseImg {
			display: block;
			width: 100%;
		}
	}
</style>