v1.2.0

custom/App.uvue

@@ -38,10 +38,67 @@
 	/*每个页面公共css */
 
 	.uni-row {
+		display: flex;
 		flex-direction: row;
+		align-items: center;
 	}
-
+	
 	.uni-column {
+		display: flex;
 		flex-direction: column;
+		align-items: center;
+	}
+	
+	.uni-jct {
+		justify-content: flex-start;
+	}
+	
+	.uni-jcc {
+		justify-content: center;
+	}
+	
+	.uni-jce {
+		justify-content: flex-end;
+	}
+	
+	.uni-jcsa {
+		justify-content: space-around;
+	}
+	
+	.uni-jcsb {
+		justify-content: space-between;
+	}
+	
+	.uni-jcse {
+		justify-content: space-evenly;
+	}
+	
+	.uni-ais {
+		align-items: flex-start;
+	}
+	
+	.uni-aie {
+		align-items: flex-end;
+	}
+	
+	.uni-aibl {
+		align-items: baseline;
+	}
+	
+	.uni-hidden {
+		visibility: hidden;
+	}
+	
+	.uni-nowrap {
+		white-space: nowrap;
+	}
+	
+	.uni-ovf-hidden {
+		overflow: hidden;
+	}
+	
+	.uni-ovf-ellipsis {
+		text-overflow: ellipsis;
 	}
+	
 </style>

custom/manifest.json

@@ -2,8 +2,8 @@
     "name" : "custom",
     "appid" : "__UNI__F860CDD",
     "description" : "彩图奔跑APP内客户定制样式页面",
-    "versionName" : "1.1.3",
-    "versionCode" : 113,
+    "versionName" : "1.2.0",
+    "versionCode" : 120,
     "uni-app-x" : {},
     /* 快应用特有相关 */
     "quickapp" : {},

custom/pages.json

@@ -6,6 +6,24 @@
 				"navigationBarTitleText": "彩图奔跑APP定制页面"
 			}
 		},
+		{
+			"path": "pages/tpl/challenge/index",
+			"style": {
+				"navigationBarTitleText": "挑战结果"
+			}
+		},
+		{
+			"path": "pages/tpl/challenge/success",
+			"style": {
+				"navigationBarTitleText": "挑战成功"
+			}
+		},
+		{
+			"path": "pages/tpl/challenge/exit",
+			"style": {
+				"navigationBarTitleText": "退出比赛"
+			}
+		},
 		{
 			"path": "pages/shanda/challenge/index",
 			"style": {

custom/pages/shanda/challenge/success.uvue

@@ -1,12 +1,17 @@
 <!-- 
-http://localhost:5173/custom/#/pages/shanda/challenge/index?actId=18&matchType=3&subTitle=山东大学123周年庆&pagetype=challenge_result&distance=1320&status=success&name=天生我材必有用&cal=13500100&duration=3600&accuracy=50&syscount=25
+http://localhost:5173/custom/#/pages/shanda/challenge/index?sublogo=sddx_jjyjy.png&subTitle=“筑梦宿州·创赢未来 ”特训营&accuracyLable=正确答题&actId=18&matchType=3&pagetype=challenge_result&distance=1320&status=success&name=天生我材必有用&cal=13500100&duration=3600&accuracy=50&syscount=25
+http://localhost:5173/custom/#/pages/shanda/challenge/index?subTitle=山东大学123周年庆&actId=18&matchType=3&pagetype=challenge_result&distance=1320&status=success&name=天生我材必有用&cal=13500100&duration=3600&accuracy=50&syscount=25
+
+https://oss-mbh5.colormaprun.com/custom/#/pages/shanda/challenge/index?sublogo=sddx_jjyjy.png&subTitle=“筑梦宿州·创赢未来 ”特训营&accuracyLable=正确答题&pagetype=challenge_result&distance=1320&status=success&name=天生我材必有用&cal=13500100&duration=3600&accuracy=50&syscount=25
 https://oss-mbh5.colormaprun.com/custom/#/pages/shanda/challenge/index?pagetype=challenge_result&distance=1320&status=success&name=天生我材必有用&cal=13500100&duration=3600&accuracy=50&syscount=25
  -->
 <template>
 	<view class="body">
 		<view class="content">
 			<view class="top">
-				<image class="logo" mode="aspectFit" src="/static/shanda/logo.webp"></image>
+				<image v-if="sublogo" class="logo-small" mode="aspectFit" :src="logo"></image>
+				<image v-else class="logo" mode="aspectFit" :src="logo"></image>
+				<image v-if="sublogo" class="sublogo" mode="aspectFit" :src="sublogo"></image>
 				<text class="subTitle">{{subTitle}}</text>
 				<text class="gameName">{{ecName}}</text>
 			</view>
@@ -27,7 +32,7 @@ https://oss-mbh5.colormaprun.com/custom/#/pages/shanda/challenge/index?pagetype=
 							</view>
 						</view>
 						<view class="statistic">
-							<text class="statistic-title">校园文化：</text>
+							<text class="statistic-title">{{accuracyLable}}：</text>
 							<view class="statistic-right">
 								<text class="statistic-value">{{accuracy}}</text><text class="statistic-unit">%</text>
 							</view>
@@ -65,7 +70,10 @@ https://oss-mbh5.colormaprun.com/custom/#/pages/shanda/challenge/index?pagetype=
 				matchType: 0, 	// 游戏类型 1 普通活动 2 线下赛 3 线上赛
 				ecId: 0, 		// 卡片id
 				ecName: "",		// 卡片名称
+				logo: "",
+				sublogo: "",
 				subTitle: "",
+				accuracyLable: "",
 				
 				status: "",		// success: 挑战成功, ok: 挑战完成(没在规定时间完成，但打了所有点), fail: 挑战结束
 				name: "",		// 用户名
@@ -107,7 +115,14 @@ https://oss-mbh5.colormaprun.com/custom/#/pages/shanda/challenge/index?pagetype=
 			this.token = event["token"] ?? token;
 			this.actId = event["id"] ?? 0;
 			this.matchType = event["matchType"] ?? 0;
+			this.logo = event["logo"] ?? "logo.webp";
+			this.logo = "/static/shanda/" + this.logo;
+			this.sublogo = event["sublogo"] ?? "";
+			if (this.sublogo != "") {
+				this.sublogo = "/static/shanda/" + this.sublogo;
+			}
 			this.subTitle = event["subTitle"] ?? "";
+			this.accuracyLable = event["accuracyLable"] ?? "校园文化";
 			
 			this.status = event["status"] ?? "";
 			this.name = event["name"] ?? "";
@@ -214,16 +229,27 @@ https://oss-mbh5.colormaprun.com/custom/#/pages/shanda/challenge/index?pagetype=
 	}
 
 	.logo {
-		width: 210rpx;
-		height: 210rpx;
+		width: 105px;
+		height: 105px;
+	}
+	
+	.logo-small {
+		width: 86px;
+		height: 86px;
+	}
+	
+	.sublogo {
+		width: 100%;
+		height: 36px;
+		margin-top: 10px;
 	}
 	
 	.subTitle {
-		padding-top: 30rpx;
+		padding-top: 15px;
 		/* padding-bottom: 30rpx; */
 		font-family: Source Han Sans CN;
 		font-weight: 400;
-		font-size: 52rpx;
+		font-size: 23px;
 		color: #FFEE0B;
 		text-shadow: 2.21px 2.21px 0px  #640008;
 	}

custom/pages/tpl/challenge/exit.uvue

@@ -0,0 +1,249 @@
+<!-- 
+http://localhost:5173/custom/#/pages/tpl/challenge/index?pagetype=challenge_result&status=fail
+https://oss-mbh5.colormaprun.com/custom/#/pages/tpl/challenge/index?pagetype=challenge_result&status=fail
+ -->
+<template>
+	<view :class="tplStyle">
+		<view class="body">
+			<view class="content uni-column">
+				<view class="top uni-column">
+					<image v-if="logo.length > 0 && sublogo.length > 0" class="logo-small" mode="aspectFit" :src="logo">
+					</image>
+					<image v-if="logo.length > 0 && sublogo.length == 0" class="logo" mode="aspectFit" :src="logo">
+					</image>
+					<image v-if="sublogo.length > 0" class="sublogo" mode="aspectFit" :src="sublogo"></image>
+					<text class="subTitle">{{subTitle}}</text>
+					<text class="gameName">{{ecName}}</text>
+				</view>
+				<view class="main uni-column uni-jcsa">
+					<view class="fail failBg"></view>
+					<view class="nostop nostopBg"></view>
+				</view>
+
+				<view class="btnRankList btnRankListBg" @click="btnRankList">点击查看排行榜</view>
+			</view>
+
+			<my-fab></my-fab>
+		</view>
+	</view>
+</template>
+
+<script>
+	import tools from '/common/tools';
+	import {
+		token,
+		apiCardUrlQuery,
+		checkResCode
+	} from '/common/api';
+
+	export default {
+		data() {
+			return {
+				token: "",
+				matchType: 0, 	// 游戏类型 1 普通活动 2 线下赛 3 线上赛
+				ecId: 0, 		// 卡片id
+				ecName: "",		// 卡片名称
+				tplStyle: "",	//模板类型 对应tplConfigs的key
+				logo: "",
+				sublogo: "",
+				subTitle: "",
+
+				urlRs: [],		// Url集合
+			}
+		},
+		computed: {
+		},
+		onLoad(event) { // 类型非必填，可自动推导
+			this.token = event["token"] ?? token;
+			this.actId = event["id"] ?? 0;
+			this.matchType = event["matchType"] ?? 0;
+
+			this.tplStyle = event["tplStyle"] ?? "orange";
+			this.logo = event["logo"] ?? "";
+			this.sublogo = event["sublogo"] ?? "";
+			this.subTitle = event["subTitle"] ?? "";
+
+			// console.log("event:", JSON.stringify(event));
+			// uni.showToast({
+			// 	title: 'event：' + JSON.stringify(event),
+			// 	icon: 'none',
+			// 	duration: 10000
+			// });
+
+			this.cardUrlQuery();
+		},
+		methods: {
+			// 根据游戏id查询卡片信息
+			cardUrlQuery() {
+				uni.request({
+					url: apiCardUrlQuery,
+					header: {
+						"Content-Type": "application/x-www-form-urlencoded",
+						"token": this.token,
+					},
+					method: "POST",
+					data: {
+						actId: this.actId,
+						matchType: this.matchType
+					},
+					success: (res) => {
+						// console.log("cardUrlQuery", res);
+						if (res.data.code == 0) {
+							const data = res.data.data;
+							this.ecId = data.ecId;
+							this.ecName = data.ecName;
+							this.urlRs = data.urlRs;
+						}
+					},
+					fail: (err) => {
+						console.log("cardUrlQuery err", err);
+					},
+				});
+			},
+			btnRankList() {
+				// console.log("urlRs", this.urlRs);
+				// const rankListUrl = this.urlRs.find(item => item.name === 'rankListUrl');
+				const rankListUrl = this.urlRs.rankListUrl;
+				// console.log("rankListUrl", rankListUrl);
+				if (rankListUrl != null) {
+					let url = "";
+					if (rankListUrl.indexOf('?') !== -1) {
+						url = rankListUrl + '&token=' + this.token + '&id=' + this.ecId;
+					} else {
+						url = rankListUrl + '?token=' + this.token + '&id=' + this.ecId;
+					}
+					console.log("url", url);
+					// uni.navigateTo({
+					// 	url: url
+					// });
+					window.location.href = url;
+				} else {
+					uni.showToast({
+						// title: '网址错误：' + rankListUrl,
+						title: '请升级APP到最新版才能查看排行榜',
+						icon: 'none',
+						duration: 3000
+					});
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.orange {
+		.body {
+			background-color: #FF5E00;
+		}
+
+		.subTitle {
+			color: #FFF45E;
+		}
+
+		.gameName {
+			color: #FFF45E;
+		}
+
+		.failBg {
+			background-image: url("/static/tpl/challenge/fail.png");
+		}
+
+		.nostopBg {
+			background-image: url("/static/tpl/challenge/nostop.png");
+		}
+		
+		.btnRankListBg {
+			background: #FFFFFF;
+			color: #E05200;
+		}
+	}
+
+	.body {
+		width: 100vw;
+		min-height: 100vh;
+	}
+
+	.content {
+		width: 750rpx;
+		min-height: 100vh;
+	}
+
+	.top {
+		width: 100%;
+		padding-top: 90rpx;
+	}
+
+	.logo {
+		width: 105px;
+		height: 105px;
+	}
+
+	.logo-small {
+		width: 86px;
+		height: 86px;
+	}
+
+	.sublogo {
+		width: 100%;
+		height: 36px;
+		margin-top: 10px;
+	}
+
+	.subTitle {
+		padding-top: 15px;
+		/* padding-bottom: 30rpx; */
+		font-family: Source Han Sans CN;
+		font-weight: 400;
+		font-size: 23px;
+		color: #FFEE0B;
+		// text-shadow: 2.21px 2.21px 0px  #640008;
+		white-space: nowrap;
+	}
+
+	.gameName {
+		padding-top: 30rpx;
+		padding-bottom: 30rpx;
+		font-family: Source Han Sans CN;
+		font-weight: 500;
+		font-size: 50rpx;
+		color: #ffffff;
+		white-space: nowrap;
+	}
+
+	.main {
+		width: 100%;
+		height: 39vh;
+		// background-color: #b0352e;
+	}
+
+	.fail {
+		width: 100%;
+		height: 120rpx;
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: contain;
+	}
+	
+	.nostop {
+		width: 100%;
+		height: 100rpx;
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: contain;
+	}
+	
+	.btnRankList {
+		// opacity: 30%;
+		width: 194px;
+		height: 35px;
+		margin-top: 90rpx;
+		margin-bottom: 60rpx;
+		background: #b0352e;
+		border-radius: 18px;
+		align-items: center;
+		color: #ffffff;
+		font-size: 16px;
+		line-height: 35px;
+	}
+	
+</style>

custom/pages/tpl/challenge/index.uvue

@@ -0,0 +1,48 @@
+<!-- 
+http://localhost:5173/custom/#/pages/tpl/challenge/index?tplStyle=orange&logo=/static/shanda/logo.webp&subTitle=山东大学123周年庆&actId=18&matchType=3&pagetype=challenge_result&distance=1320&status=success&name=天生我材必有用&cal=13500100&duration=3600&accuracy=50&syscount=25
+
+https://oss-mbh5.colormaprun.com/custom/#/pages/tpl/challenge/index?tplStyle=orange&logo=/static/shanda/logo.webp&subTitle=“筑梦宿州·创赢未来 ”特训营&pagetype=challenge_result&distance=1320&status=success&name=天生我材必有用&cal=13500100&duration=3600&accuracy=50&syscount=25
+https://oss-mbh5.colormaprun.com/custom/#/pages/tpl/challenge/index?tplStyle=orange&pagetype=challenge_result&distance=1320&status=success&name=天生我材必有用&cal=13500100&duration=3600&accuracy=50&syscount=25
+ -->
+<template>
+	<view></view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+			}
+		},
+		onLoad(event) { // 类型非必填，可自动推导
+			// console.log(event);
+			const queryString = this.objectToQueryString(event);
+			// console.log(queryString);
+			const status = event["status"] ?? ""
+			
+			if (status == 'success') {	// 挑战成功
+				uni.reLaunch({
+					url: '/pages/tpl/challenge/success?' + queryString
+				});
+			}
+			else if (status == 'ok' || status == 'fail') {	// 挑战完成/挑战失败
+				uni.reLaunch({
+					url: '/pages/tpl/challenge/exit?' + queryString
+				});
+			}
+			else {
+				this.showErr();
+			}
+		},
+		methods: {
+			showErr() {
+				uni.showToast({
+					title: '参数错误'
+				});
+			},
+			objectToQueryString(obj) {
+				return Object.keys(obj).map(k => k + '=' + obj[k]).join('&');
+			}
+		}
+	}
+</script>

custom/pages/tpl/challenge/success.uvue

@@ -0,0 +1,359 @@
+<!-- 
+http://localhost:5174/custom/#/pages/tpl/challenge/index?tplStyle=orange&logo=/static/shanda/logo.webp&sublogo=static/shanda/sddx_jjyjy.png&subTitle=山东大学123周年庆&actId=18&matchType=3&pagetype=challenge_result&distance=1320&status=success&name=天生我材必有用&cal=13500100&duration=3600&accuracy=50&syscount=25
+http://localhost:5173/custom/#/pages/tpl/challenge/index?sublogo=/static/shanda/sddx_jjyjy.png&subTitle=“筑梦宿州·创赢未来 ”特训营&accuracyLable=正确答题&actId=18&matchType=3&pagetype=challenge_result&distance=1320&status=success&name=天生我材必有用&cal=13500100&duration=3600&accuracy=50&syscount=25
+http://localhost:5173/custom/#/pages/tpl/challenge/index?subTitle=山东大学123周年庆&actId=18&matchType=3&pagetype=challenge_result&distance=1320&status=success&name=天生我材必有用&cal=13500100&duration=3600&accuracy=50&syscount=25
+
+https://oss-mbh5.colormaprun.com/custom/#/pages/tpl/challenge/index?sublogo=/static/shanda/sddx_jjyjy.png&subTitle=“筑梦宿州·创赢未来 ”特训营&accuracyLable=正确答题&pagetype=challenge_result&distance=1320&status=success&name=天生我材必有用&cal=13500100&duration=3600&accuracy=50&syscount=25
+https://oss-mbh5.colormaprun.com/custom/#/pages/tpl/challenge/index?pagetype=challenge_result&distance=1320&status=success&name=天生我材必有用&cal=13500100&duration=3600&accuracy=50&syscount=25
+ -->
+<template>
+	<view :class="tplStyle">
+		<view class="body">
+			<view class="content uni-column uni-jcsa">
+				<view class="top uni-column">
+					<image v-if="logo.length > 0 && sublogo.length > 0" class="logo-small" mode="aspectFit" :src="logo">
+					</image>
+					<image v-if="logo.length > 0 && sublogo.length == 0" class="logo" mode="aspectFit" :src="logo">
+					</image>
+					<image v-if="sublogo.length > 0" class="sublogo" mode="aspectFit" :src="sublogo"></image>
+					<text class="subTitle">{{subTitle}}</text>
+					<text class="gameName">{{ecName}}</text>
+				</view>
+				<view class="main uni-column">
+					<view class="main-content rankBg">
+						<view class="rank">
+							<view class="statistic uni-row uni-jcsb">
+								<text class="statistic-title">积分：</text>
+								<view class="uni-row uni-aibl">
+									<text class="statistic-value">{{syscount}}</text><text
+										class="statistic-unit">个</text>
+								</view>
+							</view>
+							<view class="statistic uni-row uni-jcsb">
+								<text class="statistic-title">里程：</text>
+								<view class="uni-row uni-aibl">
+									<text class="statistic-value">{{distanceKm}}</text><text
+										class="statistic-unit">Km</text>
+								</view>
+							</view>
+							<view class="statistic uni-row uni-jcsb">
+								<text class="statistic-title">{{accuracyLable}}：</text>
+								<view class="uni-row uni-aibl">
+									<text class="statistic-value">{{accuracy}}</text><text
+										class="statistic-unit">%</text>
+								</view>
+							</view>
+							<view class="statistic uni-row uni-jcsb">
+								<text class="statistic-title">用时：</text>
+								<view class="uni-row uni-aibl">
+									<text class="statistic-value">{{durationMin}}</text><text
+										class="statistic-unit">min</text>
+								</view>
+							</view>
+						</view>
+						<text class="name">{{nameSub}}</text>
+					</view>
+				</view>
+				<view class="btnRankList btnRankListBg" @click="btnRankList">点击查看排行榜</view>
+			</view>
+
+			<my-fab></my-fab>
+		</view>
+	</view>
+</template>
+
+<script>
+	import tools from '/common/tools';
+	import {
+		token,
+		apiCardUrlQuery,
+		checkResCode
+	} from '/common/api';
+
+	export default {
+		data() {
+			return {
+				token: "",
+				matchType: 0, 	// 游戏类型 1 普通活动 2 线下赛 3 线上赛
+				ecId: 0, 		// 卡片id
+				ecName: "",		// 卡片名称
+				tplStyle: "",	//模板类型 对应tplConfigs的key
+				logo: "",
+				sublogo: "",
+				subTitle: "",
+				accuracyLable: "",
+
+				status: "",		// success: 挑战成功, ok: 挑战完成(没在规定时间完成，但打了所有点), fail: 挑战结束
+				name: "",		// 用户名
+				duration: 0,	// 总用时，秒
+				distance: 0,	// 总里程，米
+				cal: 0,			// 卡路里，卡 int
+				accuracy: 0,	// 脑力值百分比
+				syscount: 0,	// 点数
+
+				actId: 0, 		// 活动或关联id
+				urlRs: [],		// Url集合
+			}
+		},
+		computed: {
+			nameSub() {
+				// const maxlen = 8;
+				const nameLen = tools.calStrLen(this.name);
+				console.log('nameLen', nameLen);
+				if (nameLen <= 10) {
+					return '选手: ' + this.name;
+				}
+				// else if (nameLen >= maxlen) {
+				// 	return this.name.substring(0,maxlen-1) + '...';
+				// }
+				else {
+					return this.name;
+				}
+			},
+			durationMin() {
+				return Math.round(this.duration * 10 / 60) / 10;
+			},
+			distanceKm() {
+				return Math.round(this.distance * 10 / 1000) / 10;
+			}
+		},
+		onLoad(event) { // 类型非必填，可自动推导
+			this.token = event["token"] ?? token;
+			this.actId = event["id"] ?? 0;
+			this.matchType = event["matchType"] ?? 0;
+
+			this.tplStyle = event["tplStyle"] ?? "orange";
+			this.logo = event["logo"] ?? "";
+			this.sublogo = event["sublogo"] ?? "";
+			this.subTitle = event["subTitle"] ?? "";
+			this.accuracyLable = event["accuracyLable"] ?? "答题";
+
+			this.status = event["status"] ?? "";
+			this.name = event["name"] ?? "";
+			this.duration = event["duration"] ?? 0;
+			this.distance = event["distance"] ?? 0;
+			this.cal = event["cal"] ?? 0;
+			this.accuracy = event["accuracy"] ?? 0;
+			this.syscount = event["syscount"] ?? 0;
+
+			// console.log("event:", JSON.stringify(event));
+			// uni.showToast({
+			// 	title: 'event：' + JSON.stringify(event),
+			// 	icon: 'none',
+			// 	duration: 10000
+			// });
+
+			this.cardUrlQuery();
+		},
+		methods: {
+			// 根据游戏id查询卡片信息
+			cardUrlQuery() {
+				uni.request({
+					url: apiCardUrlQuery,
+					header: {
+						"Content-Type": "application/x-www-form-urlencoded",
+						"token": this.token,
+					},
+					method: "POST",
+					data: {
+						actId: this.actId,
+						matchType: this.matchType
+					},
+					success: (res) => {
+						// console.log("cardUrlQuery", res);
+						if (res.data.code == 0) {
+							const data = res.data.data;
+							this.ecId = data.ecId;
+							this.ecName = data.ecName;
+							this.urlRs = data.urlRs;
+						}
+					},
+					fail: (err) => {
+						console.log("cardUrlQuery err", err);
+					},
+				});
+			},
+			btnRankList() {
+				// console.log("urlRs", this.urlRs);
+				// const rankListUrl = this.urlRs.find(item => item.name === 'rankListUrl');
+				const rankListUrl = this.urlRs.rankListUrl;
+				// console.log("rankListUrl", rankListUrl);
+				if (rankListUrl != null) {
+					let url = "";
+					if (rankListUrl.indexOf('?') !== -1) {
+						url = rankListUrl + '&token=' + this.token + '&id=' + this.ecId;
+					} else {
+						url = rankListUrl + '?token=' + this.token + '&id=' + this.ecId;
+					}
+					console.log("url", url);
+					// uni.navigateTo({
+					// 	url: url
+					// });
+					window.location.href = url;
+				} else {
+					uni.showToast({
+						// title: '网址错误：' + rankListUrl,
+						title: '请升级APP到最新版才能查看排行榜',
+						icon: 'none',
+						duration: 3000
+					});
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.orange {
+		.body {
+			background-color: #FF5E00;
+		}
+
+		.subTitle {
+			color: #FFF45E;
+		}
+
+		.gameName {
+			color: #FFF45E;
+		}
+
+		.rankBg {
+			background-image: url("/static/tpl/challenge/orange_rank_bg.png");
+		}
+
+		.btnRankListBg {
+			background: #FFFFFF;
+			color: #E05200;
+		}
+	}
+
+	.body {
+		width: 100vw;
+		min-height: 100vh;
+	}
+	
+	.content {
+		width: 750rpx;
+		min-height: 100vh;
+	}
+
+	.top {
+		width: 100%;
+		padding-top: 90rpx;
+	}
+
+	.logo {
+		width: 105px;
+		height: 105px;
+	}
+
+	.logo-small {
+		width: 86px;
+		height: 86px;
+	}
+
+	.sublogo {
+		width: 100%;
+		height: 36px;
+		margin-top: 10px;
+	}
+
+	.subTitle {
+		padding-top: 15px;
+		/* padding-bottom: 30rpx; */
+		font-family: Source Han Sans CN;
+		font-weight: 400;
+		font-size: 23px;
+		color: #FFEE0B;
+		// text-shadow: 2.21px 2.21px 0px  #640008;
+		white-space: nowrap;
+	}
+
+	.gameName {
+		padding-top: 30rpx;
+		padding-bottom: 30rpx;
+		font-family: Source Han Sans CN;
+		font-weight: 500;
+		font-size: 50rpx;
+		color: #ffffff;
+		white-space: nowrap;
+	}
+
+	.main {
+		width: 100%;
+	}
+
+	.main-content {
+		width: 100%;
+		height: 830rpx;
+		/* background-image: url("/static/shanda/challenge/rank_bg.webp"); */
+		background-repeat: no-repeat;
+		background-position-x: center;
+		background-position-y: top;
+		background-size: contain;
+	}
+
+	.rank {
+		width: 380rpx;
+		/* height: 500rpx; */
+		margin-left: 180rpx;
+		margin-top: 150rpx;
+	}
+
+	.name {
+		width: 330rpx;
+		/* 确保文本在一行内显示 */
+		white-space: nowrap;
+		/* 超出容器部分的文本隐藏起来 */
+		overflow: hidden;
+		/* 使用省略号表示被截断的文本 */
+		/* text-overflow: ellipsis; */
+		text-align: center;
+		margin-left: 250rpx;
+		margin-top: 36rpx;
+		font-family: Source Han Sans CN;
+		font-weight: 500;
+		font-size: 36rpx;
+		color: #000000;
+	}
+
+	.statistic {
+		height: 110rpx;
+		margin-bottom: 16rpx;
+	}
+
+	.statistic-title {
+		font-family: Source Han Sans CN;
+		font-weight: 500;
+		font-size: 46rpx;
+		color: #ffffff;
+	}
+
+	.statistic-value {
+		font-family: Source Han Sans CN;
+		font-size: 56rpx;
+		color: #ffffff;
+		font-weight: bold;
+	}
+
+	.statistic-unit {
+		font-family: Source Han Sans CN;
+		font-size: 40rpx;
+		color: #ffffff;
+		padding-left: 10rpx;
+	}
+
+	.btnRankList {
+		// opacity: 30%;
+		width: 194px;
+		height: 35px;
+		margin-top: 10rpx;
+		margin-bottom: 60rpx;
+		background: #b0352e;
+		border-radius: 18px;
+		align-items: center;
+		color: #ffffff;
+		font-size: 16px;
+		line-height: 35px;
+	}
+</style>