FE-lab-xcx/pages_safetyEducationExamination/views/home/component/mockPractice.vue

<!-- 模拟练习 -->
<template>
	<view class="mockPractice-component">
		<view class="card">
			<view class="card-header">
				<view class="header-left">
					<view class="card-title">📝 模拟练习</view>
					<view class="header-subtitle">刷题提高正确率</view>
				</view>
				<text class="header-link" @click="goToPage()">去练习 ›</text>
			</view>
			<view class="card-body">
				<view class="card-left-bxo">
					<view class="card-top-text-box">
						<view>{{newData.completedCount}}</view>
						<view>/</view>
						<view>{{newData.totalCount}}</view>
					</view>
					<view class="card-name-box">已完成 / 总题数</view>
					<view class="card-num-box">
						<view :style="'width:'+num+'rpx;'"></view>
					</view>
				</view>
				<view class="card-right-bxo">
					<view class="card-top-text-box">
						{{newData.correctRate}}%
					</view>
					<view class="card-name-box">模拟正确率</view>
					<view class="card-num-box">
						<view :style="'width:'+newData.correctRate+'rpx;'"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		examUserPracticeSummary, 
	} from '@/pages_safetyEducationExamination/api/index.js'
	export default {
		// components: {
		// 	workbench,
		// },
		data() {
			return {
				newData:{
					completedCount: 0,
					correctRate: 0,
					totalCount: 0,
				},
				num:0,
			}
		},
		created() {
			
		},
		mounted() {
			this.examUserPracticeSummary();
		},
		methods: {
			goToPage(){
				
			},
			async examUserPracticeSummary() {
				try {
					const { data } = await examUserPracticeSummary();
					if (data.code === 200){
						data.data={
							completedCount: 50,
							correctRate: 50,
							totalCount: 100,
						}
						this.$set(this,'newData',data.data);
						this.$set(this,'num',this.completedPercentage(data.data));
					}
				} catch (e) { console.error('模拟练习数据错误', e); }
			},
			// 计算完成百分比
			completedPercentage(data) {
				if (data.totalCount === 0) {
					return 0;
				}
				const percentage = (data.completedCount / data.totalCount) * 100;
				return parseFloat(percentage.toFixed(2));
			}
		},
		
	}
</script>

<style lang="stylus" scoped>
	.mockPractice-component {
		margin: 0 32rpx 32rpx;

		.card {
			background: #fff;
			border-radius: 24rpx;
			overflow: hidden;
			margin-bottom: 24rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
			border: 1px solid #dde3ed;
		}

		.card-header {
			padding: 20rpx 28rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.card-title {
				font-size: 28rpx;
				color: #333;
			}
			.header-subtitle{
				margin-top:10rpx;
				font-size:22rpx;
				color:#8896a7;
			}
			.header-link {
				font-size: 24rpx;
				color: #1857d4;
				border:1rpx solid #1857d4;
				padding:10rpx 20rpx;
				border-radius:50rpx;
				background-color: #f5f8ff;
			}
		}
		.card-body{
			display: flex;
			padding:0 36rpx 36rpx;
			.card-left-bxo{
				flex:1;
				text-align: center;
				padding: 10rpx 6rpx;
				background: #f6f8ff;
				border-radius: 10rpx;
				margin-right: 16rpx;
				.card-top-text-box{
					margin-top:20rpx;
					display: flex;
					view:nth-child(1){
						font-size: 44rpx;
						line-height:44rpx;
						font-weight: 700;
						color: #1677ff;
						flex:1;
						text-align: right;
					}
					view:nth-child(2){
						margin-top:10rpx;
						font-size:26rpx;
						line-height:26rpx;
						width:30rpx;
					}
					view:nth-child(3){
						margin-top:10rpx;
						font-size:26rpx;
						line-height:26rpx;
						flex:1;
						text-align: left;
					}
				}
				.card-name-box{
					font-size: 22rpx;
					margin-top:8rpx;
					color:#8896a7;
				}
				.card-num-box{
					margin:16rpx 10rpx;
					height: 10rpx;
					border-radius: 12rpx;
					background: #e8eaf6;
					overflow: hidden;
					view{
						border-radius: 12rpx;
						height: 10rpx;
						background: linear-gradient(90deg, #1677ff, #69b1ff);
					}
				}
			}
			.card-right-bxo{
				flex:1;
				text-align: center;
				padding: 10rpx 6rpx;
				background: #f6ffed;
				border-radius: 10rpx;
				.card-top-text-box{
					margin-top:20rpx;
					font-size: 44rpx;
					line-height:44rpx;
					font-weight: 700;
					color: #52c41a;
				}
				.card-name-box{
					font-size: 22rpx;
					margin-top:8rpx;
					color:#8896a7;
				}
				.card-num-box{
					margin:16rpx 10rpx;
					height: 10rpx;
					border-radius: 12rpx;
					background: #e8eaf6;
					overflow: hidden;
					view{
						border-radius: 12rpx;
						height: 10rpx;
						background: linear-gradient(90deg, #52c41a, #95de64);
					}
				}
			}
		}
	}
</style>