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

<template>
	<view class="home">
		<view class="index">
			<view class="header-bg"></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" @tap="toself"></image>
						<image v-if="userServerInfo.score >= 300" class="hat" src="../../static/icon/hat.png"
							mode="scaleToFill" @tap="toself"></image>
						<view class="user-info" @tap="changeName">
							<view class="name-grade-level">
								<view class="name">
									{{ userServerInfo.nickname}}
								</view>
							</view>
						</view>
					</view>
					<view class="user-status" @click="tapUserStatus">
						{{userStatus}}
					</view>
					<view class="score-rank">
						<view class="score">学分：{{ userServerInfo.integral ? userServerInfo.integral : '0' }}</view>
					</view>
				</view>
			</view>
			<view class="user_info_new">
				<view class="biye_tip" v-if="userServerInfo.integral" >
					<template v-if="userServerInfo.integral >=0 && userServerInfo.integral <=200">
						<view style="color: #ffffff;">
							距离 {{ userServerInfo.integral|willDeg }} 还差
							{{ userServerInfo.integral|lessScore }} 学分
						</view>
					</template>
					<template v-if="userServerInfo.integral >=201 && userServerInfo.integral <=500">
						<view style="color: #ffffff;">
							距离 {{ userServerInfo.integral|willDeg }} 还差
							{{ userServerInfo.integral|lessScore }} 学分
						</view>
					</template>
					<template v-if="userServerInfo.integral >=501 && userServerInfo.integral <=1000">
						<view style="color: #ffffff;">
							距离 {{ userServerInfo.integral|willDeg }} 还差
							{{ userServerInfo.integral|lessScore }} 学分
						</view>
					</template>
					<template v-if="userServerInfo.integral >=1001 && userServerInfo.integral <=1500">
						<view style="color: #ffffff;">
							距离 {{ userServerInfo.integral|willDeg }} 还差
							{{ userServerInfo.integral|lessScore }} 学分
						</view>
					</template>
					<template v-if="userServerInfo.integral >=1501">
						<view style="color: #ffffff;">
							你已经博士毕业
						</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_bg1" @tap="toranking">
					<text class="name">销售排行</text>
					<view v-if="userServerInfo.rank" class="userranking">
						我的排名：{{ userServerInfo.rank ? userServerInfo.rank : '0' }}</view>
					<image src="https://api.jiuweiyun.cn/public/uploads/weapp/icon/index_bg1.png" class="coverImg cv1">
				</view>
				<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 class="index-item item_bg3" @tap="toHonor">
					<text class="name">荣誉殿堂</text>
					<image src="https://api.jiuweiyun.cn/public/uploads/weapp/icon/index_bg5.png" class="coverImg cv3">
				</view>
				<!-- <view class="index-item item_bg3" @tap="toChallenge()">
			                <text class="name">挑战竞猜</text>
			                <image src="https://api.jiuweiyun.cn/public/uploads/weapp/icon/index_bg3.png" class="coverImg cv3">
			            </view> -->
				<view class="index-item item_bg4" @tap="toOther">
					<text class="name">其他</text>
					<image src="https://api.jiuweiyun.cn/public/uploads/weapp/icon/index_bg4.png" class="coverImg cv4">
				</view>
				<!-- </view> -->
			</view>
			<view class="rules" @click="torules">查看赛季规则 <text class="cuIcon-question"></text>
			</view>
			<!-- 学位弹窗 -->
			<page-toast
				:is-show="isXuefenToast && (userServerInfo.glory_popovers && userServerInfo.glory_popovers.type === 1)">
				<view class="toast_container xuewei_toast" @click="toToastDetail">
					<image class="bg" src="https://api.jiuweiyun.cn/public/uploads/icon/toast8.png"></image>
					<view class="text">{{ userServerInfo.score  }}</view>
				</view>
			</page-toast>
			<!-- 学霸弹窗 -->
			<page-toast
				:is-show="isXuebaToast && (userServerInfo.max_popovers && userServerInfo.max_popovers.type === 10)">
				<view class="toast_container xueba_toast" @click="toToastXueBa">
					<image class="bg" src="https://api.jiuweiyun.cn/public/uploads/icon/toast7.png"></image>
					<view class="text">{{ userServerInfo.level_name }}学霸</view>
				</view>
			</page-toast>
			<!-- 挑战详情 -->
			<page-toast
				:is-show="isTiaoXhanToast && (userServerInfo.challenge_result && userServerInfo.challenge_result.type === 1)"
				:is-close="false" :before-close="resetTiaoZhanToast">
				<view class="challenge-num">
					<view class="challenage-num-top">
						<view class="challenage-num-body">
							<view class="challenge-num-item">
								<view>
									<text class="label">参加挑战:</text>
									<text class="spec">
										<!--                                        {{ userServerInfo.challenge_result.data.challenge_num || 0 } -->}
									</text>
									<text class="label">场</text>
								</view>
								<view>
									<text class="label">参加竞猜:</text>
									<text class="spec">
										<!--                                        {{ userServerInfo.challenge_result.data.guessing_num || 0 } -->}
									</text>
									<text class="label">场</text>
								</view>
							</view>
							<view class="challenge-num-item">
								<view>
									<text class="label">挑战成功:</text>
									<text class="spec">
										<!--                                        {{ userServerInfo.challenge_result.data.challenge_success || 0 } -->}
									</text>
									<text class="label">场</text>
								</view>
								<view>
									<text class="label">挑战失败:</text>
									<text class="spec">
										<!--                                        {{ userServerInfo.challenge_result.data.challenge_fail || 0 } -->}
									</text>
									<text class="label">场</text>
								</view>
							</view>
							<view class="challenge-num-item">
								<view>
									<text class="label">猜赢了:</text>
									<text class="spec">
										<!--                                        {{ userServerInfo.challenge_result.data.guessing_success || 0 } -->}
									</text>
									<text class="label">场</text>
								</view>
								<view>
									<text class="label">猜输了:</text>
									<text class="spec">
										<!-- {{ userServerInfo.challenge_result.data.guessing_fail || 0 }} -->
									</text>
									<text class="label">场</text>
								</view>
							</view>
						</view>
					</view>
					<view class="challenge-num-btn" @click="toTiaoZhan">查看详情</view>
				</view>
			</page-toast>
			<!-- 发起挑战 -->
			<page-toast :is-show="userServerInfo.cha_nickname" :is-close="false">
				<view class="challenge-invite">
					<view class="challenge-user">
						<view class="user-avatar"></view>
					</view>
					<view class="challenge-title">
						“{{ userServerInfo.cha_nickname | getName }}”向你发起学分挑战 详情可在“我的挑战”列表中查看
					</view>
					<view class="challenage-btn" @click="toChallenge('0')">查看详情</view>
				</view>
			</page-toast>
			<!-- 课程提醒 -->
			<page-toast :is-show="userServerInfo.link && showLink" :before-close="closeCourseLink">
				<scroll-view class="courseDialog" scroll-y="true">
					<image :src="userServerInfo.link" mode="widthFix" class="courseImg" @click="toCourseList" />
				</scroll-view>
			</page-toast>

		</view>
	</view>

</template>

<script>
	import {
		_API_Logout
	} from '@/apis/verify.js'
	import {
		formatDate,
		remove,
		willDeg,
		lessScore,
		GetQueryString
	} 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_New_GetUserInfo,
		getWxJSSDKConfig,
		_API_GetUserSignStatus
	} from '@/apis/user.js';
	import QR from '../../common/util/wxqrcode.js'; // 二维码生成器
	import {
		mapState
	} from 'vuex';
	import {
		myStock
	} from '@/apis/stock.js';

	export default {
		data() {
			return {
				swiper: [],
				messageList: [],
				messageVis: false,
				messageInfo: {},
				fillOut: false,
				shopNum: 0,
				shopCar: false,
				countTime: {
					value: 0,
					status: 0,
					index: 0
				},
				total: 0,
				timerStatus: null,
				screenState: 0, // 0白屏 1 正常  2 只显示实战营
				userServerInfo: {},
				signstatus: false,
				status: false,
				timer: '',
				now: null,
				isXuefenToast: true,
				isXuebaToast: true,
				isTiaoXhanToast: true,
				countA: [5, 4, 3, 2, 1, 0],
				countB: [9, 8, 7, 6, 5, 4, 3, 2, 1, 0],
			};
		},
		onLoad() {
			this.shopNum = this.$store.getters['cart/shopcarNum']
			uni.hideTabBar()
		},
		computed: {
			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
			},
			userStatus() { //根据赛季阶段和用户类型，显示不同可操作项
				if (this.signstatus) {
					if (this.status) {
						return '已报名'
					} else {
						return '报名结束'
					}
				} else { //如果赛季暂未开赛
					if (this.status) {
						return '报名参赛'
					} else {
						return '报名结束'
					}

				}

			},
		},
		onPullDownRefresh() {
			this.init();
		},
		onShow() {
			this.init();
		},
		methods: {

			resetTiaoZhanToast() {
				this.isTiaoXhanToast = false
			},
			countTiming() {
				--this.countTime.value;
			},
			changeCountTime() {
				this.now = Date.now()
			},
			init() {
				_API_New_GetUserInfo()
					.then(res => {
						// 获取用户状态
						if (res.code == 200) {
							this.$store.commit('userinfo/UPDATA_USERINFO', res.data); // 获取用户状态后保存在 vuex 中
							this.userServerInfo = res.data
							_API_GetUserSignStatus().then(res => {
								if (res.code == 200) {
									this.userServerInfo.signstatus=res.data.signstatus
									this.signstatus = res.data.signstatus
									this.status = res.data.status
									this.userServerInfo.start_time = new Date(this.userServerInfo.start_time)
										.getTime()
									this.userServerInfo.end_time = new Date(this.userServerInfo.end_time)
										.getTime()
									//时间
									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
										} else if (_this.now > start_time && _this.now < end_time) {
											_this.timerStatus = true
											_this.timer = true

										} else {
											if (this.timer) {
												_this.timer = null;
											}
										}
									} else {
										if (this.timer) {
											_this.timer = null;
										}
									}
									uni.stopPullDownRefresh()
								}
							})
						}

					})
			},
			tapUserStatus() { //报名争霸赛
				if (this.signstatus) {
					uni.navigateTo({
						url: '/pages/zbs/detail'
					})
				} else {
					if (this.status) {
						uni.navigateTo({
							url: '/pages/zbs/detail'
						})
					}
				}

			},
			closeCourseLink() {
				this.$ajax.get(`${course_confim}`).then(([, {
					data: res
				}]) => {
					this.showLink = false
				})
			},
			toranking() {
				uni.navigateTo({
					url: '/pages/ranking/ranking'
				})
			},
			toupload() {
				uni.showToast({
					title: '暂未开放',
					duration: 2333,
					icon: 'none'
				})
			},
			toHonor() {
				uni.setStorageSync('newUserInfo', this.userServerInfo)
				uni.navigateTo({
					url: '/pages/honorList/index'
				})
			},
			toOther() {
				// uni.showToast({
				// 	title: '暂未开放',
				// 	duration: 2333,
				// 	icon: 'none'
				// })
				 uni.redirectTo({
				        url: "../other/other"
				    })
			},
			torules() { //点击赛季规则
				console.log('1111')
				uni.navigateTo({
					url: 'pages/rules/rules'
				})
			},
		}
	};
</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;

			view {
				color: #FFFFFF;
			}

			text {
				color: #FFFFFF;
			}

			.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: 0;
			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;
			color: #FFFFFF;
		}

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

			.biye_tip {
				height: 64rpx;
				background: rgba(0, 0, 0, .2);
				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: calc(50% - 5rpx);
				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);
			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;
				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>