saas_miniprogram/pages2/subject/report.vue

<template>
	<view class="safeArea">
		<view class="reportWrap">
			<view class="reportMain">
				<view class="title">试卷名称可换行我也不知道最多多少个字</view>
				<view class="time">交卷时间：2021/10/22  17:24</view>
				<view class="info">
					<view class="left">
						<view class="val">100<text>%</text></view>
						<view class="name">正确率</view>
						<view class="tip">不含简答/案例题</view>
					</view>
					<view class="right">
						<view class="item">
							<view class="label">
								<u-icon class="icon" name="checkmark" color="#16D48B"></u-icon>正确题数
							</view>
							<view class="num">3</view>
						</view>
						<view class="item">
							<view class="label">
								<u-icon class="icon" name="close" color="#FF3B30"></u-icon>错误题数
							</view>
							<view class="num1">3</view>
						</view>
					</view>
				</view>
				<view class="btnBox">
					<view class="btn">错题解析</view>
					<view class="btn">全部解析</view>
					<view class="btn">重新练习</view>
					<view class="btn no">继续练习</view>
				</view>
			</view>
			<view class="reportBt">
				<view class="item">
					<view class="title">试卷得分<text class="sub">（不含简答和案例题）</text></view>
					<view class="progress">
						
					</view>
				</view>
				<view class="item">
					<view class="title">答题时长</view>
					<view class="progress">
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
			
		};
	},
	onPullDownRefresh() {},
	onLoad(option) {},
	methods: {
	}
};
</script>
<style lang="scss">
page {
	background: #EAEEF1;
}
</style>
<style scoped lang="scss">
.reportWrap{
	padding: 8rpx;
}
.reportMain{
	background: #FFFFFF;
	border-radius: 16rpx;
	padding:16rpx;
	.title{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin: 24rpx 0;
		padding-left: 18rpx;
	}
	.time{
		padding-left: 18rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		margin-bottom: 40rpx;
	}
	.info{
		display: flex;
		justify-content: space-between;
		.left{
			width: 250rpx;
			height: 176rpx;
			background: #F5F5F5;
			border-radius: 16rpx;	
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			text-align: center;
		}
		.val{
			font-size: 60rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #007AFF;
			text{
				font-size: 30rpx;
			}
		}
		.name{
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.item{
			width: 420rpx;
			height: 80rpx;
			background: #F5F5F5;
			border-radius: 16rpx;
			margin-bottom: 16rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 35rpx 0 45rpx;
			.label{
				display: flex;
				align-items: center;
			}
			.icon{
				margin-right: 28rpx;
				font-size: 45rpx;
			}
			.num{
				font-size: 48rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #16D48B;
			}
			.num1{
				font-size: 48rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FF3B30;
			}
		}
	}
	.btnBox{
		display: flex;
		justify-content: center;
		margin: 25rpx 0 8rpx;
		.btn{
			width: 160rpx;
			height: 48rpx;
			line-height: 48rpx;
			background: #FFFFFF;
			border: 1px solid #007AFF;
			border-radius: 16rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #007AFF;
			text-align: center;
			margin: 0 15rpx;
			&.no{
				opacity: 0.3;
			}
		}
	}
}
.reportBt{
	display: flex;
	justify-content: space-between;
	margin-top:16rpx;
	.item{
		width: 352rpx;
		height: 288rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx 16rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		.sub{
			font-size: 20rpx;
			font-weight: 500;
			color: #999999;
		}
	}
}
</style>