做题记录、错题、收藏集页面

pages.json

@@ -347,6 +347,46 @@
 						"bounce": "none"
 					}
 				}
+			},
+			{
+				"path": "subject/record",
+				"style": {
+					"navigationBarTitleText": "做题记录",
+					"app-plus": {
+						"titleNView": false, //禁用原生导航栏 
+						"bounce": "none"
+					}
+				}
+			},
+			{
+				"path": "subject/report",
+				"style": {
+					"navigationBarTitleText": "试卷报告",
+					"app-plus": {
+						"titleNView": false, //禁用原生导航栏 
+						"bounce": "none"
+					}
+				}
+			},
+			{
+				"path": "subject/wrong",
+				"style": {
+					"navigationBarTitleText": "错题集",
+					"app-plus": {
+						"titleNView": false, //禁用原生导航栏 
+						"bounce": "none"
+					}
+				}
+			},
+			{
+				"path": "subject/collect",
+				"style": {
+					"navigationBarTitleText": "收藏集",
+					"app-plus": {
+						"titleNView": false, //禁用原生导航栏 
+						"bounce": "none"
+					}
+				}
 			}
 		]/*,
 		 "plugins": {

pages/wd/index.vue

@@ -44,7 +44,7 @@
 						<image src="/static/icon/my_icon3.png" class="my_icon"></image>
 						<view>我的网课</view>
 					</navigator>
-					<navigator class="small_menu">
+					<navigator url="/pages2/wd/question_bank" class="small_menu">
 						<image src="/static/icon/my_icon4.png" class="my_icon"></image>
 						<view>我的题库通</view>
 					</navigator>

pages2/subject/collect.vue

@@ -0,0 +1,273 @@
+<template>
+	<view class="safeArea">
+		<view class="sceenBox">
+			<view :class="['item', {'active':sceenType===1} ]" @click="showSceen(1)">全部题库记录<u-icon class="icon" name="arrow-down"></u-icon></view>
+			<view :class="['item', {'active':sceenType===2} ]" @click="showSceen(2)">全部试卷类型<u-icon class="icon" name="arrow-down"></u-icon></view>
+		</view>
+		<view class="sceenModel" v-if="sceenType">
+			<view class="sceenModelBg" @click="hideSceen"></view>
+			<view class="sceenMain">
+				<template v-if="sceenType===1">
+					<view :class="['item',{'active':item.checked}]" v-for="(item, index) in scennList1" :key="index" @click="choSceen(index,'tk')">{{item.name}}</view>
+				</template>
+				<template v-if="sceenType===2">
+					<view :class="['item',{'active':item.checked}]" v-for="(item, index) in scennList2" :key="index" @click="choSceen(index,'sj')">{{item.name}}</view>
+				</template>
+			</view>
+		</view>
+		<view class="wrap">
+			<view class="wrongHead">
+				<view class="title">收藏统计</view>
+				<view class="progress">
+					
+				</view>
+			</view>
+			<view class="wrongTab">
+				<view class="item active">试卷归类</view>
+				<view class="item">题型归类</view>
+			</view>
+			<view class="wrongList">
+				<view class="item" v-for="(item,index) in 5" :key="index">
+					<view class="title">试卷名称可换行我也不知道最多多少个字总之可以换行就对了</view>
+					<view class="bt">
+						<view class="left">错题数<text class="num">23</text></view>
+						<view class="right">
+							<view class="btn">重做</view>
+							<view class="btn">解析</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+export default {
+	components: {},
+	data() {
+		return {
+			sceenType: null,
+			scennList1:[
+				{id: 1, name: '全部题库记录', checked: true},{id: 1, name: '试卷名称可换行并完整显示'},{id: 1, name: '试卷名称可换行并完整显示'},{id: 1, name: '试卷名称可换行并完整显示'}
+			],
+			scennList2:[
+				{id: 1, name: '全部试卷类型', checked: true},{id: 1, name: '模拟卷'},{id: 1, name: '真题'},{id: 1, name: '练习'}
+			],
+		};
+	},
+	onPullDownRefresh() {},
+	onLoad(option) {},
+	methods: {
+		showSceen(type){
+			this.sceenType = type
+		},
+		hideSceen(){
+			this.sceenType = null
+		},
+		choSceen(index,type){
+			if(type==='tk'){
+				this.scennList1.forEach((item,idx)=>{
+					this.$set(item, 'checked',false)
+					if(index===idx){
+						this.$set(item, 'checked',true)
+					}
+				})
+			}
+			if(type==='sj'){
+				this.scennList2.forEach((item,idx)=>{
+					this.$set(item, 'checked',false)
+					if(index===idx){
+						this.$set(item, 'checked',true)
+					}
+				})
+			}
+			this.sceenType = null
+		}
+	}
+};
+</script>
+<style lang="scss">
+page {
+	background: #EAEEF1;
+}
+
+</style>
+<style scoped lang="scss">
+.sceenBox {
+	width:100%;
+	height: 80rpx;
+	background: #FFFFFF;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 32rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	color: #999999;
+	position: fixed;
+	z-index: 999;
+	border-bottom: 1px solid #eee;
+	.item{
+		flex:1;
+		text-align: center;
+		&.active{
+			color:#333;
+			font-weight: bold;
+			.icon{
+				transform: rotate(180deg);
+			}
+		}
+	}
+}
+.sceenModel{
+	width:100%;
+	height:100%;
+	position: fixed;
+	z-index: 998;
+	.sceenModelBg{
+		width:100%;
+		height:100%;
+		position: fixed;
+		background: rgba(0,0,0,.3);
+		z-index: 998;
+	}
+	.sceenMain{
+		position: relative;
+		z-index: 999;
+		background: #fff;
+		margin-top: 80rpx;
+		display: flex;
+		flex-wrap: wrap;
+		padding: 8rpx;
+		justify-content: space-between;
+		.item{
+			width: 350rpx;
+			background: #F5F5F5;
+			border-radius: 16rpx;
+			padding: 25rpx 19rpx;
+			margin: 8rpx;
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #666666;
+			&.active{
+				background: #007AFF;
+				color:#fff;
+			}
+			&:first-child{
+				width:100%;
+				text-align: center;
+			}
+		}
+	}
+}
+.wrap{
+	padding:96rpx 16rpx 16rpx;
+}
+.wrongHead{
+	background: #FFFFFF;
+	border-radius: 16px;
+	padding:24rpx;
+	.title{
+		font-size: 30rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #333333;
+		.sub{
+			font-size: 20rpx;
+			font-weight: 500;
+			color: #999999;
+		}
+	}
+	.progress{
+		width: 180rpx;
+		height: 180rpx;
+		border: 20rpx solid #EEEEEE;
+		border-radius: 50%;
+		margin: 24rpx auto;
+	}
+}
+.wrongTab{
+	display: flex;
+	margin: 24rpx 0;
+	.item{
+		width: 144rpx;
+		height: 48rpx;
+		line-height: 48rpx;
+		text-align: center;
+		background: #fff;
+		border-radius: 16px;
+		font-size: 28rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #666666;
+		margin-left: 15rpx;
+		&.active{
+			background: #007AFF;
+			color: #fff;
+		}
+	}
+}
+.wrongList{
+	.item{;
+		background: #FFFFFF;
+		border-radius: 16rpx;
+		padding: 0 30rpx;
+		margin-bottom: 16rpx;
+		overflow: hidden;
+		.title{
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #333333;
+			margin: 40rpx 0 17rpx;
+		}
+		.bt{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding-bottom: 24rpx;
+			.left{
+				width: 176rpx;
+				height: 40rpx;
+				background: #FFFFFF;
+				border: 1px solid #EEEEEE;
+				border-radius: 16rpx;
+				font-size: 26rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #999999;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				.num{
+					font-size: 26rpx;
+					font-weight: bold;
+					color: #FF3B30;
+					margin-left: 16rpx;
+				}
+			}
+			.right{
+				display: flex;
+				.btn{
+					width: 100rpx;
+					height: 48rpx;
+					background: #FFFFFF;
+					border: 1px solid #007AFF;
+					border-radius: 16px;
+					font-size: 24rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #007AFF;
+					margin-left:9rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+			}
+		}
+	}
+}
+</style>

pages2/subject/record.vue

@@ -0,0 +1,250 @@
+<template>
+	<view class="safeArea">
+		<view class="sceenBox">
+			<view :class="['item', {'active':sceenType===1} ]" @click="showSceen(1)">全部题库记录<u-icon class="icon" name="arrow-down"></u-icon></view>
+			<view :class="['item', {'active':sceenType===2} ]" @click="showSceen(2)">全部试卷类型<u-icon class="icon" name="arrow-down"></u-icon></view>
+		</view>
+		<view class="sceenModel" v-if="sceenType">
+			<view class="sceenModelBg" @click="hideSceen"></view>
+			<view class="sceenMain">
+				<template v-if="sceenType===1">
+					<view :class="['item',{'active':item.checked}]" v-for="(item, index) in scennList1" :key="index" @click="choSceen(index,'tk')">{{item.name}}</view>
+				</template>
+				<template v-if="sceenType===2">
+					<view :class="['item',{'active':item.checked}]" v-for="(item, index) in scennList2" :key="index" @click="choSceen(index,'sj')">{{item.name}}</view>
+				</template>
+			</view>
+		</view>
+		<view class="pubuBox">
+			<view class="pubuItem">
+				<view class="item-masonry" v-for="(item, index) in comList" :key="index">
+					<view class="type">{{item.type}}</view>
+					<view class="title">{{ item.title }}</view>
+					<view class="info"><u-icon class="icon" name="file-text"></u-icon>{{ item.time }}</view>
+					<view class="info"><u-icon class="icon" name="file-text"></u-icon>总共 {{ item.count }} 题 做对 {{item.trueNum}} 道</view>
+					<view class="btnBox">
+						<view class="btn">重做</view>
+						<view class="btn">解析</view>
+						<view class="btn">报告</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+export default {
+	components: {},
+	data() {
+		return {
+			sceenType: null,
+			scennList1:[
+				{id: 1, name: '全部题库记录', checked: true},{id: 1, name: '试卷名称可换行并完整显示'},{id: 1, name: '试卷名称可换行并完整显示'},{id: 1, name: '试卷名称可换行并完整显示'}
+			],
+			scennList2:[
+				{id: 1, name: '全部试卷类型', checked: true},{id: 1, name: '模拟卷'},{id: 1, name: '真题'},{id: 1, name: '练习'}
+			],
+			comList: [{
+				type: '模拟卷',
+				title: '试卷名称可换不知道最多多少个字行',
+				time: '2021/12/20  14:30',
+				count: 95,
+				trueNum: 2
+			}, {
+				type: '真题',
+				title: '试卷名称可换不知道最多多少个字行',
+				time: '2021/12/20  14:30',
+				count: 95,
+				trueNum: 2
+			},{
+				type: '练习',
+				title: '试卷名称可换',
+				time: '2021/12/20  14:30',
+				count: 95,
+				trueNum: 2
+			}, {
+				type: '模拟卷',
+				title: '试卷名称可换行我也不知道最多多少个字',
+				time: '2021/12/20  14:30',
+				count: 95,
+				trueNum: 2
+			} ]
+		};
+	},
+	onPullDownRefresh() {},
+	onLoad(option) {},
+	methods: {
+		showSceen(type){
+			this.sceenType = type
+		},
+		hideSceen(){
+			this.sceenType = null
+		},
+		choSceen(index,type){
+			if(type==='tk'){
+				this.scennList1.forEach((item,idx)=>{
+					this.$set(item, 'checked',false)
+					if(index===idx){
+						this.$set(item, 'checked',true)
+					}
+				})
+			}
+			if(type==='sj'){
+				this.scennList2.forEach((item,idx)=>{
+					this.$set(item, 'checked',false)
+					if(index===idx){
+						this.$set(item, 'checked',true)
+					}
+				})
+			}
+			this.sceenType = null
+		}
+	}
+};
+</script>
+<style lang="scss">
+page {
+	background: #EAEEF1;
+}
+</style>
+<style scoped lang="scss">
+.sceenBox {
+	width:100%;
+	height: 80rpx;
+	background: #FFFFFF;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 32rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	color: #999999;
+	position: fixed;
+	z-index: 999;
+	border-bottom: 1px solid #eee;
+	.item{
+		flex:1;
+		text-align: center;
+		&.active{
+			color:#333;
+			font-weight: bold;
+			.icon{
+				transform: rotate(180deg);
+			}
+		}
+	}
+}
+.sceenModel{
+	width:100%;
+	height:100%;
+	position: fixed;
+	z-index: 998;
+	.sceenModelBg{
+		width:100%;
+		height:100%;
+		position: fixed;
+		background: rgba(0,0,0,.3);
+		z-index: 998;
+	}
+	.sceenMain{
+		position: relative;
+		z-index: 999;
+		background: #fff;
+		margin-top: 80rpx;
+		display: flex;
+		flex-wrap: wrap;
+		padding: 8rpx;
+		justify-content: space-between;
+		.item{
+			width: 350rpx;
+			background: #F5F5F5;
+			border-radius: 16rpx;
+			padding: 25rpx 19rpx;
+			margin: 8rpx;
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #666666;
+			&.active{
+				background: #007AFF;
+				color:#fff;
+			}
+			&:first-child{
+				width:100%;
+				text-align: center;
+			}
+		}
+	}
+}
+.pubuBox {
+	padding: 96rpx 8rpx 30rpx;
+	.pubuItem {
+	    column-count: 2;
+	    column-gap: 16rpx;
+	}
+	.item-masonry {
+	    border-radius: 16rpx;
+	    overflow: hidden;
+	    background-color: #fff;
+	    break-inside: avoid;
+	    box-sizing: border-box;
+	    margin-bottom: 16rpx;
+		position: relative;
+		padding: 0 19rpx;
+		.type{
+			width: 112rpx;
+			height: 40rpx;
+			line-height: 40rpx;
+			background: linear-gradient(0deg, #4FACFE, #007AFF);
+			border-radius: 16rpx 0px 16rpx 0px;
+			position: absolute;
+			top:0;
+			left:0;
+			text-align: center;
+			font-size: 24rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #FFFFFF;
+		}
+		.title{
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #333333;
+			margin: 65rpx 0 26rpx;
+		}
+		.info{
+			font-size: 24rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #999999;
+			line-height: 36rpx;
+			.icon{
+				color:#007AFF;
+				margin-right: 14rpx;
+			}
+		}
+		.btnBox{
+			display: flex;
+			justify-content: center;
+			margin: 22rpx 0;
+			.btn{
+				width: 100rpx;
+				height: 48rpx;
+				line-height: 48rpx;
+				text-align: center;
+				background: #FFFFFF;
+				border: 1px solid #007AFF;
+				border-radius: 16rpx;
+				font-size: 24rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #007AFF;
+				margin: 0 9rpx;
+			}
+		}
+	}
+}
+</style>

pages2/subject/report.vue

@@ -0,0 +1,206 @@
+<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>

pages2/subject/wrong.vue

@@ -0,0 +1,273 @@
+<template>
+	<view class="safeArea">
+		<view class="sceenBox">
+			<view :class="['item', {'active':sceenType===1} ]" @click="showSceen(1)">全部题库记录<u-icon class="icon" name="arrow-down"></u-icon></view>
+			<view :class="['item', {'active':sceenType===2} ]" @click="showSceen(2)">全部试卷类型<u-icon class="icon" name="arrow-down"></u-icon></view>
+		</view>
+		<view class="sceenModel" v-if="sceenType">
+			<view class="sceenModelBg" @click="hideSceen"></view>
+			<view class="sceenMain">
+				<template v-if="sceenType===1">
+					<view :class="['item',{'active':item.checked}]" v-for="(item, index) in scennList1" :key="index" @click="choSceen(index,'tk')">{{item.name}}</view>
+				</template>
+				<template v-if="sceenType===2">
+					<view :class="['item',{'active':item.checked}]" v-for="(item, index) in scennList2" :key="index" @click="choSceen(index,'sj')">{{item.name}}</view>
+				</template>
+			</view>
+		</view>
+		<view class="wrap">
+			<view class="wrongHead">
+				<view class="title">错题统计<text class="sub">（不含简答和案例题）</text></view>
+				<view class="progress">
+					
+				</view>
+			</view>
+			<view class="wrongTab">
+				<view class="item active">试卷归类</view>
+				<view class="item">题型归类</view>
+			</view>
+			<view class="wrongList">
+				<view class="item" v-for="(item,index) in 5" :key="index">
+					<view class="title">试卷名称可换行我也不知道最多多少个字总之可以换行就对了</view>
+					<view class="bt">
+						<view class="left">错题数<text class="num">23</text></view>
+						<view class="right">
+							<view class="btn">重做</view>
+							<view class="btn">解析</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+export default {
+	components: {},
+	data() {
+		return {
+			sceenType: null,
+			scennList1:[
+				{id: 1, name: '全部题库记录', checked: true},{id: 1, name: '试卷名称可换行并完整显示'},{id: 1, name: '试卷名称可换行并完整显示'},{id: 1, name: '试卷名称可换行并完整显示'}
+			],
+			scennList2:[
+				{id: 1, name: '全部试卷类型', checked: true},{id: 1, name: '模拟卷'},{id: 1, name: '真题'},{id: 1, name: '练习'}
+			],
+		};
+	},
+	onPullDownRefresh() {},
+	onLoad(option) {},
+	methods: {
+		showSceen(type){
+			this.sceenType = type
+		},
+		hideSceen(){
+			this.sceenType = null
+		},
+		choSceen(index,type){
+			if(type==='tk'){
+				this.scennList1.forEach((item,idx)=>{
+					this.$set(item, 'checked',false)
+					if(index===idx){
+						this.$set(item, 'checked',true)
+					}
+				})
+			}
+			if(type==='sj'){
+				this.scennList2.forEach((item,idx)=>{
+					this.$set(item, 'checked',false)
+					if(index===idx){
+						this.$set(item, 'checked',true)
+					}
+				})
+			}
+			this.sceenType = null
+		}
+	}
+};
+</script>
+<style lang="scss">
+page {
+	background: #EAEEF1;
+}
+
+</style>
+<style scoped lang="scss">
+.sceenBox {
+	width:100%;
+	height: 80rpx;
+	background: #FFFFFF;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 32rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	color: #999999;
+	position: fixed;
+	z-index: 999;
+	border-bottom: 1px solid #eee;
+	.item{
+		flex:1;
+		text-align: center;
+		&.active{
+			color:#333;
+			font-weight: bold;
+			.icon{
+				transform: rotate(180deg);
+			}
+		}
+	}
+}
+.sceenModel{
+	width:100%;
+	height:100%;
+	position: fixed;
+	z-index: 998;
+	.sceenModelBg{
+		width:100%;
+		height:100%;
+		position: fixed;
+		background: rgba(0,0,0,.3);
+		z-index: 998;
+	}
+	.sceenMain{
+		position: relative;
+		z-index: 999;
+		background: #fff;
+		margin-top: 80rpx;
+		display: flex;
+		flex-wrap: wrap;
+		padding: 8rpx;
+		justify-content: space-between;
+		.item{
+			width: 350rpx;
+			background: #F5F5F5;
+			border-radius: 16rpx;
+			padding: 25rpx 19rpx;
+			margin: 8rpx;
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #666666;
+			&.active{
+				background: #007AFF;
+				color:#fff;
+			}
+			&:first-child{
+				width:100%;
+				text-align: center;
+			}
+		}
+	}
+}
+.wrap{
+	padding:96rpx 16rpx 16rpx;
+}
+.wrongHead{
+	background: #FFFFFF;
+	border-radius: 16px;
+	padding:24rpx;
+	.title{
+		font-size: 30rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #333333;
+		.sub{
+			font-size: 20rpx;
+			font-weight: 500;
+			color: #999999;
+		}
+	}
+	.progress{
+		width: 180rpx;
+		height: 180rpx;
+		border: 20rpx solid #EEEEEE;
+		border-radius: 50%;
+		margin: 24rpx auto;
+	}
+}
+.wrongTab{
+	display: flex;
+	margin: 24rpx 0;
+	.item{
+		width: 144rpx;
+		height: 48rpx;
+		line-height: 48rpx;
+		text-align: center;
+		background: #fff;
+		border-radius: 16px;
+		font-size: 28rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #666666;
+		margin-left: 15rpx;
+		&.active{
+			background: #007AFF;
+			color: #fff;
+		}
+	}
+}
+.wrongList{
+	.item{;
+		background: #FFFFFF;
+		border-radius: 16rpx;
+		padding: 0 30rpx;
+		margin-bottom: 16rpx;
+		overflow: hidden;
+		.title{
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #333333;
+			margin: 40rpx 0 17rpx;
+		}
+		.bt{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding-bottom: 24rpx;
+			.left{
+				width: 176rpx;
+				height: 40rpx;
+				background: #FFFFFF;
+				border: 1px solid #EEEEEE;
+				border-radius: 16rpx;
+				font-size: 26rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #999999;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				.num{
+					font-size: 26rpx;
+					font-weight: bold;
+					color: #FF3B30;
+					margin-left: 16rpx;
+				}
+			}
+			.right{
+				display: flex;
+				.btn{
+					width: 100rpx;
+					height: 48rpx;
+					background: #FFFFFF;
+					border: 1px solid #007AFF;
+					border-radius: 16px;
+					font-size: 24rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #007AFF;
+					margin-left:9rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+			}
+		}
+	}
+}
+</style>