前端

mine rank.vue

@@ -0,0 +1,94 @@
+<template>
+	<view class="container">
+		<view class="circle">
+			<text class="total-points">{{ totalPoints }}</text>
+			<text class="points-label">总积分</text>
+		</view>
+		<view class="stats">
+			<view class="stat-item">
+				<text>签到次数:</text>
+				<text class="count">{{ signInCount }}</text>
+			</view>
+			<view class="stat-item">
+				<text>回答问题次数: </text>
+				<text class="count">{{Answers}}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				signInCount: 0,  // 示例签到次数
+				Answers: 0, // 示例回答问题次数
+			}
+		},
+		computed:{
+			totalPoints(){
+				return this.signInCount*2+this.Answers*3;
+			}
+		}
+	}
+</script>
+
+<style>
+.container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 20px;
+}
+
+.circle {
+	width: 160px; /* 圆圈宽度 */
+	height: 160px; /* 圆圈高度 */
+	border-radius: 50%; /* 圆形 */
+	background-color: dodgerblue; /* 圆圈背景色 */
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin-bottom: 40rpx; /* 圆圈与下方内容的间距 */
+}
+
+.total-points {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 38px; /* 积分字体大小 */
+	font-style: italic;
+	font-weight: bold; /* 粗体 */
+	padding-right: 12px;
+}
+
+.points-label {
+	font-size: 18px; /* 标签字体大小 */
+	padding-top: 8rpx;
+}
+
+.stats {
+	margin-top: 20px;
+	display: flex;
+	flex-direction: column;
+	width: 100%; /* 适应父容器宽度 */
+}
+
+.stat-item {
+	display: flex;
+	justify-content: space-between; /* 左右对齐 */
+	align-items: center;
+	font-size: 18px; /* 统计项字体大小 */
+	margin-bottom: 20px; /* 项间距 */
+	padding: 0 16px; /* 左右内边距 */
+	border-bottom: 1px solid #eee;
+}
+
+.count {
+	font-style: italic;
+	font-weight: 550;
+	margin-left: auto;
+}
+</style>
+