<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>

