weapp-v1/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">
			<!-- <tel-verify v-if="showVerify"></tel-verify> -->
			<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="" @click="gotoyan">
					奖学金明细
				</view> -->
			<!-- <view class="title" v-if="userServerInfo.season">大卫博士学位争霸赛第{{ userServerInfo.season | numToZh }}季</view> -->
			<view class="title" v-if="userServerInfo.season">大卫博士学位争霸赛第{{ userServerInfo.season }}季</view>
			<view class="user_info_new">
				<view class="userinfo">
					<view class="top">
						<!-- <open-data class="user-pic" type="userAvatarUrl"></open-data> -->
						<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.name ? userServerInfo.name : '更换昵称头像' }}
								</view>
								<!-- <open-data type="userNickName" class="name"></open-data> -->
								<view class="grade">
									{{ userServerInfo.grade === undefined ? '未验证' : userServerInfo.grade }}
								</view>
								<!-- 隐藏等级 -->
								<!-- <view class="level" v-if="userServerInfo.level_name">
										<image src="../../static/icon/level.png" mode="scaleToFill"></image>
										<text>{{ userServerInfo.level_name }}</text>
									</view> -->
							</view>
						</view>
					</view>
					<view class="user-status" v-if="userStatus"
						:class="(userStatus === '报名截止' || userStatus === '暂未开赛') ? 'end' : ''" @tap="tapUserStatus">
						{{ userStatus }}
					</view>
					<view class="score-rank">
						<view class="score">学分：{{ userServerInfo.score ? userServerInfo.score : '0' }}</view>
						<view class="rank">排名：{{ userServerInfo.rank ? userServerInfo.rank : '0' }}</view>
					</view>
				</view>
				<view class="biye_tip" v-if="userServerInfo.signuped">
					<template v-if="userServerInfo.status === 1">
						<view>
							你已连续参赛{{ userServerInfo.enrol_count }}季，你真棒！继续努力，加油！
						</view>
					</template>
					<template v-else>
						<view v-if="userServerInfo.score === userServerInfo.max_score">
							您已达到历史最高学分,请继续加油!
						</view>
						<view v-else>
							距离 {{ userServerInfo.score | willDeg(userServerInfo.max_score) }} 还差
							{{ userServerInfo.score | lessScore(userServerInfo.max_score) }} 学分
						</view>
					</template>
					<view v-if="userServerInfo.score === userServerInfo.max_score">
						你已连续参赛{{ userServerInfo.enrol_count }}季，你真棒！继续努力，加油！
					</view>
					<view v-else>
						距离 {{ userServerInfo.score | willDeg(userServerInfo.max_score) }} 还差
						{{ userServerInfo.score | lessScore(userServerInfo.max_score) }} 学分
					</view>
				</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" @tap="torules" @longpress="toLongTapIndex">查看赛季规则 <text class="cuIcon-question"></text>
			</view>

			<!-- <button v-if="!canIUseProfile && showGetUserInfoButton" class="getUserInfo" type="default" open-type="getUserInfo" @getuserinfo="getuserinfo"></button> -->
			<button v-if="showGetUserInfoButton" class="getUserInfo" type="default" @click="getuserinfo"></button>
			<!-- <button class="getUserInfo" type="default" @click="getuserinfo"></button> -->
			<!-- 学位弹窗 -->
			<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 | userXueWei }}</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>
			<!-- 跳转争霸赛New -->
			<uni-popup ref="popup" type="center">
				<view class="new_pop">
					<view class="new_title">温馨提示</view>
					<view class="new_content">即将跳转新的小程序</view>
					<view class="new_btns">
						<!-- <view @click="hint">取消</view> -->
						<view @click.stop="goNew()">继续前往</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import telVerify from '../../components/tel-verify.vue'
import customWarn from '../../components/custom-warn.vue'
import {
	toast_sure,
	index_message,
	course_confim,
	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 ('none'.indexOf(this.networkType) == -1) { //有网络连接时才进行下一步
		if (this.showGetUserInfoButton == false) {
			this.$store.dispatch('newLogin').then(() => {
				this.init()
			})
		}
		// } else {
		// 	uni.showToast({
		// 		title: '似乎已经断开网络连接',
		// 		icon: 'none'
		// 	})
		// }
	},
	components: {
		telVerify,
		customWarn,
		PrivacyPopup
	},
	filters: {
		getName(name) {
			if (name) {
				return name.length > 6 ? name.slice(0, 6) + '...' : name
			}
			return ''
		}
	},
	data() {
		return {
			timer: null,
			now: null,
			canIUseProfile: false,
			isXuefenToast: true,
			isXuebaToast: true,
			filterUserScore: 20,
			isTiaoXhanToast: true,
			messageList: [],
			timerStatus: null,
			countA: [5, 4, 3, 2, 1, 0],
			countB: [9, 8, 7, 6, 5, 4, 3, 2, 1, 0],
			showLink: true,
			code: '',
			showPrivacy: false, //是否展示隐私弹窗
			userId: '' //用户id 用于跳转新的小程序免登录
		}
	},
	computed: {
		// showVerify () {  //是否弹出手机验证框
		// 	return this.$store.state.showVerify
		// },
		// showPrivacy() { //隐私协议弹窗
		// 	return this.$store.state.showPrivacy
		// },
		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() { //用户服务器信息
			if (this.$store.state.userServerInfo.report_card && this.$store.state.userServerInfo.report_card.status ===
				1) {
				let _this = this
				uni.showModal({
					content: '查看成绩单',
					success: function (res) {
						let id = _this.$store.state.userServerInfo.report_card.id
						if (res.confirm) {
							_this.$ajax.get(`${toast_sure}?id=${id}`).then(([, {
								data: res
							}]) => {
								uni.navigateTo({
									url: '../schoolReport/index'
								})
							})
						} else if (res.cancel) {

						}
					}
				})
			}
			return this.$store.state.userServerInfo
		},
		// networkType() { //网络类型
		// 	return this.$store.state.networkType
		// 	// return 'not'
		// },
		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 { //如果用户未报名,那么可能是 1 用户真没报名  2 批发商 3 客服
							if (this.userServerInfo.type === 1) {
								return '报名参赛'
							} else if (this.userServerInfo.type === 2) {
								return '报名参赛'
							} else if (this.userServerInfo.type === 3) {
								return ''
							}
						}
					} else if (this.userServerInfo.status === 2 || this.userServerInfo.status === 3 || this
						.userServerInfo.status === 5) { //如果赛季正处于比赛或兑奖阶段
						if (this.userServerInfo.signuped) { //如果用户已报名
							return '学分账单'
						} else { //如果用户未报名，那么可能是 1 用户真没报名  2 批发商 3 客服
							if (this.userServerInfo.type === 1) {
								return '报名截止'
							} else if (this.userServerInfo.type === 2) {
								return '学分账单'
							} else if (this.userServerInfo.type === 3) {
								return ''
							}
						}
					} else if (this.userServerInfo.status === 4) { // 如果赛季正处于报名结束的空档期
						if (this.userServerInfo.signuped) { //如果用户已报名
							return '已报名'
						} else { //如果用户未报名，那么可能是 1 用户真没报名  2 批发商 3 客服
							if (this.userServerInfo.type === 1) {
								return '报名截止'
							} else if (this.userServerInfo.type === 2) {
								return '学分账单'
							} else if (this.userServerInfo.type === 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: {
		//修改昵称头像
		changeName() {
			if (this.$verified()) { //用户是否已登录
				if (this.userServerInfo.type === 1 || this.userServerInfo.type === 2) { //只有普通客户和批发商个人主页
					if (this.routing) {
						return
					}
					this.routing = true
					uni.navigateTo({
						url: '../information/information?from=' + 1
					})
				}
			} else { //未登录弹出登录框
				console.log('111')
				// this.$store.commit('SHOWVERIFY')
				// uni.navigateTo({ url: '../boundPhone/boundPhone' })
			}
		},
		//跳转小程序取消按钮提示语
		hint() {
			uni.showToast({
				title: '请前往新的小程序',
				icon: 'none'
			})
		},
		//继续前往按钮
		goNew() {
			this.userId = this.userServerInfo.id
			wx.navigateToMiniProgram({
				appId: 'wxa9d1325fd98f5a7d',
				path: 'pages/index/index',
				//develop开发版；trial体验版；release正式版
				envVersion: 'release',
				extraData: { // 传递的参数，可选
					HeaderID:this.userId,
				},
				success: res => {
					// 打开成功
					console.log("跳转小程序成功！", res);
				},
				fail: err => {
					uni.showToast({
						title: '跳转失败',
						icon: 'none'
					})
				}
			})
		},
		//打开隐私协议
		openPrivacyContract() {
			wx.openPrivacyContract({
				success: res => {
					console.log('openPrivacyContract success')
				},
				fail: res => {
					console.error('openPrivacyContract fail', res)
				}
			})
		},
		//同意并继续按钮
		handleAgreePrivacyAuthorization() {
			this.showPrivacy = false
			let that = this;
			// 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'
			// 	})
			// }
		},
		goshowphone() {
			uni.showModal({
				title: '提示',
				showCancel: false,
				content: '请使用代理商系统的账号密码登录',
				success: function (res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '../boundPhone/boundPhone'
						})
					}
				}
			});
			// 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
			})
		},
		gotoyan() {
			// uni.navigateTo({ url: '../makeApply/makeApply' })
			uni.redirectTo({
				url: './upgrade'
			})
		},
		closeCourseLink() {
			this.$ajax.get(`${course_confim}`).then(([, {
				data: res
			}]) => {
				this.showLink = false
			})
		},
		toCourseList() {
			this.$ajax.get(`${course_confim}`).then(([, {
				data: res
			}]) => {
				if (res.code === 200) {
					let {
						end_time,
						start_time
					} = this.userServerInfo
					let week = Math.ceil((end_time - start_time) / (7 * 24 * 60 * 60 * 1000))
					uni.navigateTo({
						url: '../course/list?week=' + week
					})
				} else {
					uni.showModal({
						content: '课程确认失败',
						showCancel: false
					})
				}
			})
		},
		changeCountTime() {
			this.now = Date.now()
		},
		init() {
			//跳转到争霸赛New
			this.$refs.popup.open('center')
			return
		
			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
				}
			})
		},
		resetTiaoZhanToast() {
			this.isTiaoXhanToast = false
		},
		toTiaoZhan() {
			let toast_id = this.userServerInfo.challenge_result.id
			let _this = this
			this.$ajax.get(`${toast_sure}?id=${toast_id}`).then(([, {
				data: res
			}]) => {
				_this.isTiaoXhanToast = false
				_this.toChallenge()
			})
		},
		// 其他
		toOther() {
			uni.redirectTo({
				url: "../other/other"
			})
		},
		// 荣誉殿堂
		toHonor() {
			uni.navigateTo({
				url: '../honorList/index'
			})
		},
		// 学霸弹窗
		toToastXueBa() {
			let toast_id = this.userServerInfo.max_popovers.id
			let _this = this
			this.$ajax.get(`${toast_sure}?id=${toast_id}`).then(([, {
				data: res
			}]) => {
				_this.isXuebaToast = false
				_this.toChallenge()
			})
		},
		toToastDetail() {
			let toast_id = this.userServerInfo.glory_popovers.id
			let _this = this
			this.$ajax.get(`${toast_sure}?id=${toast_id}`).then(([, {
				data: res
			}]) => {
				_this.isXuefenToast = false
				_this.tohonour()
			})
		},
		getuserinfo() { //获取用户信息
			this.$store.commit('HIDEGETUSERINFOBUTTON') //隐藏透明按钮
			let _this = this
			this.$store.dispatch('getUserInfo').then(() => {
				_this.init()
			})
		},
		toself() { //点击用户信息
			if (this.$verified()) { //用户是否已登录
				if (this.userServerInfo.type === 1 || this.userServerInfo.type === 2) { //只有普通客户和批发商个人主页
					if (this.routing) {
						return
					}
					this.routing = true
					uni.navigateTo({
						url: `../self/self?from=index&id=${this.userServerInfo.id}`
					}) //已登录跳转到用户中心
				}
			} else { //未登录弹出登录框
				console.log('111')
				// this.$store.commit('SHOWVERIFY')
				// uni.navigateTo({ url: '../boundPhone/boundPhone' })
			}
		},
		tapUserStatus() { //点击用户状态
			if (this.userStatus === '绑定账号') {
				// this.$store.commit('SHOWVERIFY')
				// uni.navigateTo({ url: '../boundPhone/boundPhone' })
			} else if (this.userStatus === '报名参赛') {
				if (this.routing) {
					return
				}
				this.routing = true
				uni.navigateTo({
					url: '../signup/signup'
				})
			} else if (this.userStatus === '学分账单') {
				if (this.routing) {
					return
				}
				this.routing = true
				uni.navigateTo({
					url: '../score/score'
				})
			} else if (this.userStatus === '报名截止') {
				this.$refs.toast.hover('报名时间已过，非常感谢您的关注。')
			} else if (this.userStatus === '暂未开赛') {
				this.$refs.toast.hover('暂未开赛，非常感谢您的关注。')
			} else if (this.userStatus === '已报名') {
				uni.navigateTo({
					url: "../certificate/notice"
				})
			}
		},
		toranking() { //点击排行榜
			// uni.navigateTo({ url: '../ranking/ranking' })
			if (this.$verified()) { //用户是否已登录
				if (this.userServerInfo.type === 1) { //判断用户类型，普通用户需要报名后才可以查看排行榜
					if (this.userServerInfo.signuped) { //如果用户已报名，就跳转
						if (this.routing) {
							return
						}
						this.routing = true
						uni.navigateTo({
							url: '../ranking/ranking'
						})

					} else { ////如果用户已报名，就提示用户没有报名
						uni.showModal({
							content: "您还没有报名参赛",
							showCancel: false
						})
					}
				} else { //批发商和客服可以直接查看排行榜页
					if (this.routing) {
						return
					}
					this.routing = true
					uni.navigateTo({
						url: '../ranking/ranking'
					})
				}
			} else { //未登录弹出登录框
				// this.$store.commit('SHOWVERIFY')
				// uni.navigateTo({ url: '../boundPhone/boundPhone' })
			}
		},
		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
			})
			// this.$refs.toast.hover('本季争霸赛不允许使用')
			// if (this.$verified()) {  //用户是否已登录
			// 	if (this.userServerInfo.signuped) {
			// 		if (this.userServerInfo.status === 1 || this.userServerInfo.status === 4) {
			// 			this.$refs.toast.hover('比赛还没有开始')
			// 		} else if (this.userServerInfo.status === 2) {
			// 			if (this.routing) { return }
			// 			this.routing = true
			// 			uni.navigateTo({ url: '../upload/upload' })
			// 			uni.fromUpload = true
			// 		} else if (this.userServerInfo.status === 3 || this.userServerInfo.status === 5) {
			// 			this.$refs.toast.hover('比赛已经结束了')
			// 		}
			// 	} else {
			// 		this.$refs.toast.hover('您还没有报名参赛')
			// 	}
			// } else {  //未登录弹出登录框
			// 	// this.$store.commit('SHOWVERIFY')
			// 	uni.navigateTo({ url: '../boundPhone/boundPhone' })
			// }
		},
		toChallenge(active) { // 点击学分挑战
			uni.navigateTo({
				url: '../challengeList/challengeList' + (active ? `?active=${active}` : '')
			})
			// uni.navigateTo({ url: '../challengeList/challengeList'+(active ? `?active=${active}` : '') })
			// return false
			if (this.$verified()) { //用户是否已登录
				if (this.userServerInfo.signuped) { // 用户是否已经报名
					if (this.userServerInfo.level_name === '批发商' || this.userServerInfo.level_name ===
						'经销商') { // 只有批发商能够参加学分竞赛
						if (this.routing) {
							return
						}
						this.routing = true
						this.closeChallenge()
						uni.navigateTo({
							url: '../challengeList/challengeList' + (active ? `?active=${active}` : '')
						})
					} else { //批发商和客服不可参赛，所以提示无参赛记录
						//隐藏等级
						// this.$refs.toast.hover('只有批发商可以参与挑战')
						this.$refs.toast.hover('暂无参与挑战权限')
					}
				} else {
					this.$refs.toast.hover('您还没有报名参赛')
				}
			} else { //未登录弹出登录框
				// this.$store.commit('SHOWVERIFY')
				// uni.navigateTo({ url: '../boundPhone/boundPhone' })
			}
		},
		torules() { //点击赛季规则
			if (this.routing) {
				return
			}
			this.routing = true
			uni.navigateTo({
				url: '../rules/rules'
			})
		},
		// 长按赛季规则跳转
		toLongTapIndex() {
			uni.navigateTo({
				url: '../longTapIndex/longTapIndex'
			})
		},
		closeChallenge() {
			this.$store.commit('READCHALLENGE')
		}
	}
}
</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;
	z-index: 999999;

	.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: 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);
		@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>