mobile_h5/card/pages/bm/style4/signup.vue

<!-- 
[报名] 样式3 - 报名
http://localhost:5173/card/#/pages/bm/style4/signup
https://oss-mbh5.colormaprun.com/card/#/pages/bm/style4/signup
 -->
<template>
	<view class="body">
		<view class="content uni-column">
			<view class="uni-column" :class="cssTop">
				<my-topbar :mcName="mcName" :class="cssTopbarColor" @btnBackClick="btnBack"
					@btnInfoClick="btnInfo"></my-topbar>

				<view class="topcontent uni-column uni-jcsa">
					<view class="logo"></view>
					<text v-if="configParam.subTitle.length > 0" class="top-acttime">{{configParam.subTitle}}</text>
					<text v-else class="top-acttime">{{fmtMcTime2(beginSecond, endSecond)}}</text>
				</view>
			</view>

			<view class="timebar uni-row">
				<image mode="aspectFit" class="clock" src="/static/default/clock.png"></image>
				<text class="acttime">{{acttime}}</text>
			</view>

			<view class="main uni-column uni-jct">
				<input class="uni-input" maxlength="12" :placeholder="'请填写'+configParam.labelName" placeholder-style="font-size: 14px;" v-model="nickName" />
				<e-select v-model="coiId" :options="coiRs" :props="eSelectionProps" clearable
					maxHeight="40vh" :placeholder="'请选择'+configParam.labelOrg+'（可输入关键字）'" @getText="getESelectText"
					@change="eSelectChange"></e-select>

				<view class="introduce uni-column">
					<text class="introduce-title">{{introduce.title}}</text>
					<text class="introduce-content" v-html="introduce.content"></text>
				</view>

				<view v-if="activityRules.content.length > 0" class="activityRules uni-column">
					<text class="activityRules-title">{{activityRules.title}}</text>
					<text class="activityRules-content" v-html="activityRules.content"></text>
				</view>

				<button class="btnSignup btnSignup-enable" v-if="mcState<=1" @click="btnSignup">报 名</button>
				<button class="btnSignup btnSignup-disable" v-if="mcState==2">活动已结束</button>

			</view>

			<my-popup ref="mypopup" :config="popupRuleConfig" :dataList="popupDataList" :acttime="acttime"></my-popup>

			<!-- <uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="info" cancelText="取消" confirmText="确认" title="您填写的姓名:" @confirm="dialogConfirm"
					@close="dialogClose">
					<view class="dialog-content uni-column">
						<text class="dialog-content-1">{{nickName}}</text>
					</view>
				</uni-popup-dialog>
			</uni-popup> -->

			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="info" cancelText="取消" confirmText="确认" title="你的报名信息:" @confirm="dialogConfirm"
					@close="dialogClose">
					<view class="dialog-content uni-column">
						<text class="dialog-content-1">{{mcName}}</text>
						<view class="uni-column uni-ais">
							<text class="dialog-content-2">{{configParam.labelName}}: {{nickName}}</text>
							<text class="dialog-content-2">{{configParam.labelOrg}}: {{coiName}}</text>
							<!-- <text class="dialog-content-2">{{teamName}}</text> -->
						</view>
					</view>
				</uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import tools from '../../../common/tools';
	import {
		defaultPopUpDataList
	} from '../../../common/define';
	import {
		token,
		apiCardDetailQuery,
		apiOnlineMcSignUpDetail,
		apiOnlineMcSignUp,
		apiCardConfigQuery,
		apiMatchRsDetailQuery,
		checkResCode,
		checkToken
	} from '../../../common/api';

	export default {
		data() {
			return {
				pageName: "signup",
				firstEnterKey: 'firstEnter-bm-style4',
				rankKey: "rank-bm-style4",
				queryObj: {},
				queryString: "",
				from: "", // 来源页面
				token: "",

				ecId: 0, // 卡片id
				mcId: 0, // 赛事id
				mcType: 0, // 赛事类型 1 普通活动 2 线下赛 3 线上赛
				mcName: "", // 赛事名称
				acttime: "", // 活动时间
				beginSecond: null, // 活动或赛事开始时间戳，单位秒
				endSecond: null, // 活动或赛事结束时间戳，单位秒
				coiId: 0, // 已报名单位id
				coiName: "", // 已报名单位名称，可为空
				teamNum: 0, // 已报名队伍编号，可为0
				nickName: "", // 昵称
				coiRs: [], // 组织信息集合
				// orgList: [], // 分组下拉列表数据源
				// teamList: [], // 
				interval: null,

				mcState: 0, // 赛事/活动状态 0: 未开始  1: 进行中  2: 已结束
				// teamType: 0, // 队伍类型  0: 红黄蓝紫 1: 学生/家长
				cssTop: "",
				cssTopbarColor: "",
				cssLogo: "",
				introduce: {
					title: "",
					content: ""
				},
				activityRules: {
					title: "",
					content: ""
				},
				popupRuleConfig: {}, // 规则弹窗配置
				popupDataList: [],
				configParam: {
					labelName: "昵称",
					labelOrg: "组织",
					subTitle: ""
				},

				eSelectionProps: {
					text: 'coiName',
					value: 'coiId',
					// disabled: 'noallowed'
				},
			}
		},
		computed: {},
		onLoad(query) { // 类型非必填，可自动推导
			// console.log(query);
			this.queryObj = query;
			this.queryString = tools.objectToQueryString(this.queryObj);
			// console.log(queryString);
			this.from = query["from"] ?? "";
			this.token = query["token"] ?? token;
			this.ecId = query["id"] ?? 0;

			this.firstEnterKey += "-" + this.ecId;
			console.log("firstEnterKey:", this.firstEnterKey);

			this.rankKey += "-" + this.ecId;
			console.log("rankKey:", this.rankKey);

			tools.removeCssCode();

			this.getCardConfigQuery();
			this.getCardDetailQuery();
			this.matchRsDetailQuery();
		},
		// 页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用
		onReady() {
			// this.dealFirstEnter();
		},
		onUnload() {
			this.clear();
		},
		methods: {
			dealNotice(rank) {
				// console.log('[dealNotice]');
				let that = this;
				uni.getStorage({
					key: that.rankKey,
					success: (res) => {
						console.log('[getStorage]', that.rankKey, res.data);
						const oldRank = res.data;
						if (oldRank != rank) {
							// that.notice = true;
							that.setRankValue(rank);
						}
					},
					fail: (e) => {
						console.log('[getStorage] fail', that.rankKey, e);
						// that.notice = false;
						that.setRankValue(rank);
					},
				})
			},
			setRankValue(data) {
				let that = this;
				uni.setStorage({
					key: that.rankKey,
					data: data,
					success: () => {
						console.log('[setStorage] success', that.rankKey, data);
					},
					fail: (e) => {
						console.log('[setStorage] fail', that.rankKey, e);
					},
				})
			},
			dealFirstEnter() {
				// console.log('[dealFirstEnter]');
				let that = this;
				uni.getStorage({
					key: that.firstEnterKey,
					success: (res) => {
						console.log('[getStorage]', that.firstEnterKey, res.data);
					},
					fail: (e) => {
						console.log('[getStorage] fail', that.firstEnterKey, e);
						that.btnInfo();
						that.setFirstEnterValue(true);
					},
				})
			},
			setFirstEnterValue(data) {
				let that = this;
				uni.setStorage({
					key: that.firstEnterKey,
					data: data,
					success: () => {
						console.log('[setStorage] success', that.firstEnterKey, data);
					},
					fail: (e) => {
						console.log('[setStorage] fail', that.firstEnterKey, e);
					},
				})
			},
			clear() {
				if (this.interval != null) {
					clearInterval(this.interval);
					this.interval = null;
				}
			},
			loadConfig(config) {
				// console.log("config", config);

				// 加载CSS样式
				const css = config.css;
				if (css != undefined && css.length > 0) {
					tools.loadCssCode(css);

					if (css.indexOf(".top{") >= 0) {
						this.cssTop = "top";
					}
					if (css.indexOf(".topbar-color{") >= 0) {
						this.cssTopbarColor = "topbar-color";
					}
				}

				if (this.cssTop == "") {
					this.cssTop = "top-default";
				}
				if (this.cssTopbarColor == "") {
					this.cssTopbarColor = "topbar-color-default";
				}
				console.log("[loadConfig] cssTop:", this.cssTop);
				console.log("[loadConfig] cssTopbarColor:", this.cssTopbarColor);

				// 加载队伍类型  0: 红黄蓝紫 1: 学生/家长
				/* if (config.teamType != undefined && config.teamType >= 0) {
					this.teamType = config.teamType;
				} */

				// 加载介绍内容
				const introduce = config.introduce;
				if (introduce != undefined) {
					if (introduce.title != undefined) {
						this.introduce.title = introduce.title;
					}
					if (introduce.content != undefined) {
						this.introduce.content = introduce.content;
					}
				}

				// 加载活动规则
				const activityRules = config.activityRules;
				if (activityRules != undefined) {
					if (activityRules.title != undefined) {
						this.activityRules.title = activityRules.title;
					}
					if (activityRules.content != undefined) {
						this.activityRules.content = activityRules.content;
					}
				}

				// 加载规则弹窗配置
				const popupRuleConfig = config.popupRuleConfig;
				if (popupRuleConfig != undefined) {
					this.popupRuleConfig = popupRuleConfig;
				}
				// console.log("[loadConfig] popupRuleConfig:", this.popupRuleConfig);
				
				// 加载弹窗数据
				const popupDataList = config.popupDataList;
				// console.log("[loadConfig] popupDataList:", popupDataList);
				if (popupDataList != undefined && popupDataList.length > 0) {
					for (var i = 0; i < popupDataList.length; i++) {
						// console.log("[loadConfig] popupDataList", i, popupDataList[i]);
						if (popupDataList[i] == 'default') {
							for (var j = 0; j < defaultPopUpDataList.length; j++) {
								this.popupDataList.push(defaultPopUpDataList[j]);
							}
						} else {
							this.popupDataList.push(popupDataList[i]);
						}
					}
				} else {
					this.popupDataList = defaultPopUpDataList;
					console.log("[loadConfig] popupDataList 加载默认列表");
				}
				// console.log("[loadConfig] popupDataList:", this.popupDataList);

				// 加载页面参数
				const param = config.param;
				if (param != undefined) {
					if (param.labelName != undefined && param.labelName.length > 0) {
						this.configParam.labelName = param.labelName;
					}
					if (param.labelOrg != undefined && param.labelOrg.length > 0) {
						this.configParam.labelOrg = param.labelOrg;
					}
					if (param.subTitle != undefined && param.subTitle.length > 0) {
						this.configParam.subTitle = param.subTitle;
					}
				}
				// console.log("[loadConfig] param:", this.configParam);
			},
			fmtMcTime(timestamp) {
				return tools.fmtMcTime(timestamp);
			},
			// 获取倒计时
			getActtime() {
				this.acttime = tools.getActtime(this.beginSecond, this.endSecond);
			},
			fmtMcTime2(timestamp1, timestamp2) {
				return tools.fmtMcTime2(timestamp1, timestamp2);
			},
			getCardConfigQuery() {
				uni.request({
					url: apiCardConfigQuery,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {
						ecId: this.ecId,
						pageName: this.pageName
					},
					success: (res) => {
						// console.log("getCardConfigQuery", res)
						const data = res.data.data;
						const config = data.configJson != "" ? JSON.parse(data.configJson) : "";
						// console.log("configJson", data.configJson);
						/* const config = {
							"css": `
								.top{
									width: 100%;
									height: 150px;
									padding-top: 36px;
									justify-content: space-between;
									background-image: url('static/backgroud/top_bg_dengshanjie.png');
									background-repeat: no-repeat;
									background-position: center;
									background-size: cover;
								}
								.topbar-color{
									color: #333333;
								}
								.timebar {
									margin-top: 25px !important;
									margin-bottom: 10px;
								}
								.btnSignup-enable {
									background-color: #ff870e !important;
								}
								.swiper-item-button {
									background-color: #ff870e !important;
								}
								.uni-swiper-dot-active {
									background: #ff870e !important;
								}
							`,
							"popupRuleConfig": {
								"height": "530px"
							},
							"popupDataList": [								
								{
									"type": 7,
									"data": {
										"title": "活动规则",
										"content": "<br>① 任何人、任何时间均可体验参赛。<br><br>② 6个场地任意选，比赛时间内，不限次数参赛。<br><br>③ 1次成功打点，获取1个百味豆。<br><br>④ 1次正确答题，获取1个百味豆。"
									}
								},
								{
									"type": 7,
									"data": {
										"title": "活动奖励",
										"content": "<br><li>活动： 20个百味豆兑换一个鸡蛋<br><span style='font-size: 12px; color:#999999;'>(限本次活动百味豆，兑换以“蛋叔券”为准)</style><li>百味豆越多，“蛋叔”给你的鸡蛋 越多，上不封顶！<li>随时可以兑换哦~<li>能不能吃上自己挣的鸡蛋，就看你的了！<li style='color:#FF870E;'><span style='color:#FF870E;'>同时，参赛即可获取合作机构的奖励！</span><br><br>",
										"imageList": [{
											"src": "/static/common/danshu.png",
											"width": "183px",
											"height": "81px"
										}]
									}
								},
								{
									"type": 7,
									"data": {
										"title": "合作机构",
										"logo": {
											"src": "/static/logo/xxhpgy.png",
											"width": "120px",
											"height": "120px",
											"memo": "星星和蒲公英双语阅读馆"
										},
										"content": "星星和蒲公英双语阅读馆，济南儿童阅读网红圣地！馆藏2W+册正版图书，涵盖中英文大奖绘本、桥梁书、自然科学与文学社科名著，以及艺术画册和摄影图集。开展面向4-12岁孩子的中文阅读读书会＆中英双语阅读课。<br><br><span style='color:#FF870E;'>礼品一：到店阅读权限一年<br>礼品二：店内饮品五折券一张</span>",
										"pointList": [
											{
												"name": "星星和蒲公英双语阅读馆",
												"tel": "电话：<a href='tel:18765812082' style='color: #333333;'>18765812082</a>",
												"longitude": 117.075174,
												"latitude": 36.654108
											}
										]
									}
								},
								{
									"type": 7,
									"data": {
										"title": "合作机构",
										"logo": {
											"src": "/static/logo/wensiyu.png",
											"width": "120px",
											"height": "120px",
											"memo": "文思语少年读书会"
										},
										"content": "文思语少年读书会，专注于为4-15岁儿童和家庭提供阅读素养发展解决方案和产品。读书会以整本书精读伴读为核心，塑造良好的读书习惯，训练阅读理解能力，培养创意作文能力。<br><br><span style='color:#FF870E;'>礼品：《山海经》精装套系书<br>书籍原价158元，仅需19.9元/套，不限领取次数，多余权限可赠送他人使用！</span>",
										"pointList": [
											{
												"name": "文思语少年读书会",
												"tel": "电话：<a href='tel:17663733631' style='color: #333333;'>17663733631</a>",
												"longitude": 117.075174,
												"latitude": 36.654108
											}
										]
									}
								},
								{
									"type": 7,
									"data": {
										"title": "合作机构",
										"logo": {
											"src": "/static/logo/lezhigu.png",
											"width": "120px",
											"height": "120px",
											"memo": "乐知谷"
										},
										"content": "乐知谷是济南科学类口碑最好的机构，主做面向4-12岁儿童，内容涵盖工程科技、自然科学、生命科学、地球太空、PBL综合项目等五大板块，室内＆户外相结合，真正将实验、动手、探究融于生活，培养独立思考、永存好奇、敢于创造的未来型孩子。<br><span style='color:#FF870E;'>礼品：乐知谷经典工程体验课《建造一座斜拉桥》一堂，感受力学结构的科技含量课程每人限参与1次，多余权限可赠送他人使用</span>",
										"pointList": [
											{
												"name": "乐知谷",
												"tel": "电话：<a href='tel:19100652564' style='color: #333333;'>19100652564</a>",
												"longitude": 117.075174,
												"latitude": 36.654108
											}
										]
									}
								},
								{
									"type": 7,
									"data": {
										"title": "合作机构",
										"logo": {
											"src": "/static/logo/kusentiyu.png",
											"width": "120px",
											"height": "120px",
											"memo": "酷森体育俱乐部"
										},
										"content": "酷森体育俱乐部包含少儿篮球、体能训练、跳绳，三大课程。拥有二十年以上资深学院派专家教练团队，制定系统的少儿运动训练体系，结合不同年龄及能力的孩子进行定制化教学，使其更符合不同孩子的综合能力提升。<br><br><span style='color:#FF870E;'>礼品：手机全年影视会员卡</span>",
										"pointList": [
											{
												"name": "酷森体育俱乐部",
												"tel": "电话：<a href='tel:15621875115' style='color: #333333;'>15621875115</a>",
												"longitude": 117.075174,
												"latitude": 36.654108
											}
										]
									}
								}
							],
							"introduce": {
								"title": "介绍：",
								"content": "<li>小飞龙定向赛再次来袭！这次有6个场地哟~<li>神秘“蛋叔”闪亮登场~<li>蛋叔放大招，百味豆换鸡蛋！<li>时不可待！冲鸭！<br><br><li>能不能把蛋叔整郁闷，就看你的啦~<li>还等啥？火速报名吧！"
							},
							"param": {
								"labelName": "姓名",
								"labelOrg": "分组",
								"subTitle": ""
							}
						}; */

						this.loadConfig(config);

						setTimeout(this.dealFirstEnter, 500);
					},
					fail: (err) => {
						console.log("getCardConfigQuery err", err)
					},
				});
			},
			// 卡片信息查询
			getCardDetailQuery() {
				uni.request({
					url: apiCardDetailQuery,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token
					},
					method: "POST",
					data: {
						ecId: this.ecId
					},
					success: (res) => {
						// console.log("getCardDetailQuery", res);
						const data = res.data.data;
						this.mcType = data.mcType;
						this.mcId = data.mcId;
						this.mcName = data.mcName;
						this.beginSecond = data.beginSecond;
						this.endSecond = data.endSecond;
						this.coiId = data.coiId;
						this.coiName = data.coiName;
						this.teamNum = data.teamNum;
						this.nickName = data.nickName;

						this.mcState = tools.checkMcState(this.beginSecond, this.endSecond);

						this.getActtime();
						this.getOnlineMcSignUpDetail();

						this.clear();
						this.interval = setInterval(this.getActtime, 60000);
					},
					fail: (err) => {
						console.log("getCardDetailQuery err", err)
					},
				});
			},
			// 卡片对应线上赛多个活动查询
			matchRsDetailQuery() {
				uni.request({
					url: apiMatchRsDetailQuery,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {
						ecId: this.ecId
					},
					success: (res) => {
						// console.log("matchRsDetailQuery", res);
						if (res.data.code == 0) {
							const data = res.data.data;
							const rank = JSON.stringify(data);
							this.dealNotice(rank);
						}
					},
					fail: (err) => {
						console.log("matchRsDetailQuery err", err)
					},
				});
			},
			// 卡片用户当前排名查询
			// getUserCurrentRankNumQuery() {
			// 	uni.request({
			// 		url: apiUserCurrentRankNumQuery,
			// 		header: {
			// 			"Content-Type": "application/x-www-form-urlencoded",
			// 			"token": this.token,
			// 		},
			// 		method: "POST",
			// 		data: {
			// 			ecId: this.ecId
			// 		},
			// 		success: (res) => {
			// 			// console.log("getUserCurrentRankNumQuery", res)
			// 			if (res.data.code == 0) {
			// 				const data = res.data.data;
			// 				const rankNum = data.rankNum;
			// 				this.dealNotice(rankNum);
			// 			}
			// 		},
			// 		fail: (err) => {
			// 			console.log("getUserCurrentRankNumQuery err", err)
			// 		},
			// 	});
			// },
			// 线上赛报名页面信息详情
			getOnlineMcSignUpDetail() {
				uni.request({
					url: apiOnlineMcSignUpDetail,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {
						mcId: this.mcId,
					},
					success: (res) => {
						// console.log("getOnlineMcSignUpDetail", res);
						this.coiRs = res.data.data.coiRs;
						if (this.nickName == undefined || this.nickName == '') {
							this.nickName = res.data.data.name;
						}
						/* const rsNum = this.coiRs.length;
						this.orgList = [];
						for (let i = 0; i < rsNum; i++) {
							this.orgList[i] = {};
							this.orgList[i].value = this.coiRs[i].coiId;
							this.orgList[i].text = this.coiRs[i].coiName;
							this.orgList[i].teamNum = this.coiRs[i].teamNum;
						}
						// console.log("orgList", this.orgList);
						if (this.coiId > 0) {
							this.orgChange(this.coiId, false);
						} */
					},
					fail: (err) => {
						console.log("getOnlineMcSignUpDetail err", err)
					},
				});
			},
			// 线上赛报名
			onlineMcSignUp() {
				uni.request({
					url: apiOnlineMcSignUp,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {
						mcId: this.mcId,
						coiId: this.coiId,
						selectTeam: this.teamNum,
						nickName: this.nickName
					},
					success: (res) => {
						// console.log("onlineMcSignUp", res);

						if (checkResCode(res)) {
							uni.showToast({
								title: '比赛报名成功！',
								icon: 'none',
								duration: 3000
							});

							// uni.navigateTo({
							// 	// url: '/pages/bm/style4/rankOverview?' + this.queryString
							// 	url: '/pages/bm/style4/rankList?' + this.queryString
							// });
							const url = '/pages/bm/style4/rankList?' + this.queryString;
							tools.appAction(url, "uni.navigateTo");
						}
					},
					fail: (err) => {
						console.log("onlineMcSignUp err", err);
						uni.showToast({
							title: '出错了，报名失败',
							icon: 'none',
							duration: 3000
						});
					},
				});
			},
			btnBack() {
				// console.log("from:", this.from)
				if (this.from != '') {
					// window.history.back();
					// uni.navigateTo({
					// 	url: '/pages/bm/style4/' + this.from + '?' + this.queryString
					// });
					const url = '/pages/bm/style4/' + this.from + '?' + this.queryString;
					tools.appAction(url, "uni.navigateTo");
				} else {
					const url = `action://to_home/`;
					tools.appAction(url);
				}
			},
			btnInfo() {
				this.$refs.mypopup.popupOpen();
			},
			btnSignup() {
				if (!checkToken(this.token)) {
					return;
				}

				if (!(this.nickName.trim().length > 0)) {
					uni.showToast({
						title: `请填写${this.configParam.labelName}`,
						icon: 'none',
						duration: 2000
					});
					return;
				}

				if (!(this.coiId > 0)) {
					uni.showToast({
						title: `请选择${this.configParam.labelOrg}`,
						icon: 'none',
						duration: 2000
					});
					return;
				}

				this.nickName = this.nickName.trim();
				// this.coiName = tools.getSelectedText(this.orgList, this.coiId);
				// this.teamName = tools.getSelectedText(this.teamList, this.teamNum);

				this.$refs.alertDialog.open();
			},
			dialogConfirm() {
				this.onlineMcSignUp();
			},
			dialogClose() {},
			// 获取输入框中值
			getESelectText(data) {
				// console.log("getESelectText:", data);
				this.coiName = data;
			},
			// 获取选择选项值
			eSelectChange(data) {
				// console.log("eSelectChange:", data);
			},
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		min-height: 100vh;
	}

	.top-default {
		width: 100%;
		height: 220px;
		padding-top: 36px;
		justify-content: space-between;
		background-image: url('static/backgroud/top_bg_sddx.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}

	.topbar-color-default {
		color: #333333;
	}

	.topcontent {
		height: 90%;
		margin-bottom: 30px;
	}

	.logo {
		width: 80px;
		height: 80px;
		margin-top: 10px;
		/* background-image: url('/static/logo/sddx.png'); */
		background-repeat: no-repeat;
		background-position-x: center;
		background-position-y: center;
		background-size: contain;
	}

	.top-acttime {
		display: none;
		text-shadow: 3px 3px 0px #640008;
		font-family: YouSheBiaoTiHei;
		/* font-family: Arial, Helvetica, sans-serif; */
		font-weight: bold;
		color: #ffee0b;
		font-size: 26px;
	}

	.mcName {
		font-size: 40rpx;
		font-weight: 550;
	}

	.main {
		width: 76%;
		/* min-height: 800rpx; */
		/* margin-top: 20rpx; */
		/* justify-content: space-around; */
		flex-grow: 1;
	}

	.timebar {
		min-width: 68%;
		height: 32px;
		margin-top: -17px;
		padding: 0 15px;
		justify-content: center;
		background: #ffffff;
		border: 0.5px solid;
		border-color: #e7e7e7;
		border-radius: 20px;
		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.13);
	}

	.acttime {
		font-weight: 550;
		color: #333333;
		font-size: 14px;
		text-wrap: nowrap;
	}

	.clock {
		width: 15px;
		height: 15px;
		margin-right: 10px;
	}

	.uni-input {
		width: 90%;
		height: 34px;
		margin-top: 15px;
		margin-bottom: 15px;
		padding: 0 13px;
		/* background: #f1f1f1; */
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		font-size: 14px;
	}

	.input-placeholder {
		color: #333333;
		font-size: 16px;
	}

	.introduce {
		width: 100%;
		margin-top: 12px;
		margin-bottom: 10px;
		align-items: flex-start;
		justify-content: space-around;
	}

	.introduce-title {
		color: #333333;
		font-size: 15px;
		line-height: 30px;
		font-family: Source Han Sans CN;
	}

	.introduce-content {
		color: #333333;
		font-size: 14px;
		line-height: 23px;
		font-family: Source Han Sans CN;
	}

	.activityRules {
		width: 100%;
		margin-top: 5px;
		margin-bottom: 10px;
		padding: 10px 15px;
		align-items: flex-start;
		justify-content: space-around;
		border-radius: 9px;
		background: #EBEBEB;
	}

	.activityRules-title {
		color: #333333;
		font-size: 14px;
		line-height: 25px;
		font-weight: 500;
		font-family: Source Han Sans CN;
	}

	.activityRules-content {
		color: #333333;
		font-size: 13px;
		line-height: 23px;
		font-family: Source Han Sans CN;
	}

	.btnSignup {
		width: 100%;
		height: 100rpx;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		color: white;
		font-weight: bold;
		line-height: 100rpx;
		border-radius: 55rpx;
	}

	.btnSignup-enable {
		background-color: #81cd00;
	}

	.btnSignup-disable {
		background-color: #c3c3c3;
	}

	.dialog-content {
		width: 280px;
		height: 110px;
		padding: 0 20px;
		background: #f1f1f1;
		border-radius: 9px;
		justify-content: center;
		text-align: center;
		font-weight: 550;
		color: #333333;
	}

	.dialog-content-1 {
		font-size: 34rpx;
		margin-bottom: 30rpx;
	}

	.dialog-content-2 {
		font-size: 28rpx;
		margin-bottom: 10rpx;
		text-align: left;
	}
</style>