questionbankvue3/pages/exercises/examResults/examResults.vue

<template>
	<view class="content">
		<u-navbar leftText=" " title="模拟考试成绩" :safeAreaInsetTop="true" :autoBack="true" :fixed="true"></u-navbar>
		<view class="topCard card">
			<view class="echartBox">
				
			</view>
			<view class="info_row">
				<view class="avatar">
					<!-- <image src="@/static/images/backIcon.png" mode=""></image> -->
				</view>
				<view class="txtInfo">
					<view class="name">用户名</view>
					<view class="carType">车型：C1 (科目一)</view>
				</view>
				<view class="resStatus">考试不级格</view>
			</view>
			
			<view class="btnBox">
				<oneBtn text="快速提升通过率"></oneBtn>
			</view>
		</view>
		
		<view class="card">
			<view class="flex-b">
				<view class="leftT">预测考试通过率</view>
				<view class="rate"><span>12</span>%</view>
			</view>
		</view>
		
		<view class="card">
			<view class="lab">错题分类</view>
			<view class="ul">
				<view class="li" v-for="(item,index) in 4" :key="index">
					<view class="num">1</view>
					<view class="txt">驾驶证和机动车管理规定</view>
					<view class="rightBox">
						<view class="p">错3题</view>
						<u-icon name="arrow-right" color="#D9D9D9" size="14"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
	.card {
		background: #FFFFFF;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}
	.content {
		width: 100%;
		background-color: #F6F7FA;
		padding: 100rpx 30rpx 30rpx 30rpx;
		min-height: 100vh;
	  .topCard {
	    .echartBox {
	
	    }
	
	    .info_row {
			display: flex;
			align-items: center;
	      .avatar {
			  background: url('../../../static/images/avatarbg.png') no-repeat;
			  background-size: 100% 100%;
			  width: 120rpx;
			  height: 120rpx;
	      }
	
	      .txtInfo {
			  width: 0;
			  flex: 1;
			  padding: 0 20rpx;
	        .name {
				font-size: 36rpx;
				color: #333;
				font-weight: 600;
	        }
	
	        .carType {
				font-size: 28rpx;
				margin-top: 14rpx;
	        }
	      }
	
	      .resStatus {
			width: 200rpx;
			height: 66rpx;
			background: linear-gradient(90deg, #FAE0A2 0%, #F6C86F 100%);
			border-radius: 33rpx;
			font-size: 28rpx;
			color: #6B4229;
			text-align: center;
			line-height: 66rpx;
	      }
	    }
	
	    .btnBox {
			width: 100%;
			padding: 70rpx 80rpx 10rpx 80rpx;
	      onebtn {
	
	      }
	    }
	  }
	
	  .card{
		  
	    .flex-b {
			padding: 20rpx 10rpx;
	      .leftT {
			font-size: 36rpx;
			font-weight: 700;
	      }
	
	      .rate {
			  font-size: 36rpx;
			  color: #FF3333;
	        text {
				font-size: 72rpx;
				font-weight: 700;
	        }
	      }
	    }
	  }
	
	  .card {
	    .lab {
			font-size: 32rpx;
	    }
	
	    .ul {
			padding-top: 30rpx;
	      .li {
			  width: 100%;
			  display: flex;
			  align-items: center;
			  padding: 34rpx 0;
	        .num {
				height: 32rpx;
				background: #F5C142;
				border-radius: 50%;
				padding: 0 10rpx;
				color: #fff;
				font-size: 24rpx;
				line-height: 32rpx;
	        }
	
	        .txt {
				flex: 1;
				width: 0;
				font-size: 28rpx;
				padding: 0 20rpx;
	        }
	
	        .rightBox {
				display: flex;
				align-items: center;
	          .p {
				font-size: 24rpx;
				color: #FF3333;
				margin-right: 4rpx;
	          }
	
	          u-icon {
				
	          }
	        }
	      }
	    }
	  }
	}
	
</style>