jwl-applet/src/pages/questionBank/wrongQuestion.vue

<template>
	<view>
		<u-sticky bgColor="#fff">
		  <u-tabs :list="categoryList" :scrollable="false" @click="tabChange"></u-tabs>
		</u-sticky>
		<view class="p14">
			<view class="top_box">
					<view class="tip_box flex ai-c jc-sb" v-if="tIndex==0">
						<view class="flex ai-c">
							<u-icon name="error-circle-fill" color="#FF6E02" size="18"></u-icon>
							<text class="ml10 fs12" style="color: #FF6E02;">{{title}}</text>
						</view>
						<u-icon name="close" color="#FF6E02" size="18"></u-icon>
					</view>
					<view class="p14">
						<text class="fs18 cor-000 fw600">{{tIndex==0?'错题':'收藏'}}情况</text>
						<view class="total_box mt10">
							<view class="flex ai-c jc-sb">
									<view class="text-center">
										<view style="width: 111rpx;" class="fs30 cor-000">4</view>
									</view>
									<view style="text-align: right;flex-direction: column;justify-content: right" class="flex ai-c" @tap="toPractice">
										<u-icon name="arrow-right" size="18"></u-icon>
								</view>
							</view>
							<view class="flex ai-c jc-sb mt5">
									<view class="text-center">
										<text class="fs14 cor-666">全部{{tIndex==0?'错题':'收藏'}}</text>
									</view>
									<view style="text-align: right;flex-direction: column;justify-content: right" class="flex ai-c">
										<text v-if="tIndex==0" class="fs14 cor-666">错4/已做100</text>
								</view>
							</view>
						</view>
						<view class="yellow_box" v-if="tIndex==0">
							<view class="flex jc-sb ai-c">
								<view>
									<text class="fs24 fw600" style="color: #FF6E02;">32%</text><text class="fs18 cor-000 fw600">错题率</text>
									<view class="fs14 cor-000">错题率有点高，快去提升吧</view>
								</view>
								<view style="width: 156rpx;">
									<button class="riseBtn">马上提升</button>
								</view>
							</view>
						</view>
						<view class="flex jc-sb ai-c mt10"  v-if="tIndex==0">
							<text>答对后自动移除错题</text>
							<u-switch v-model="isMoveWrong" activeColor="#0BD032" ></u-switch>
						</view>
			</view>
		  <view style="margin-top: 30rpx;"  v-if="tIndex==0">
		  		<view class="video-box">
		  			<view class="flex jc-sb ai-c wp100">
		  				<text style="color: #05C341;font-size: 36rpx;">科一精品视频课</text>
		  				<text class="cor-666 fs12">全部10节课 ></text>
		  			</view>
		  			<view class="flex ai-c mt20">
		  				<image class="contain-box" src="../../static/image/index/index_bg.png"></image>
		  				<view class="ml15 text-center">
		  					<u-button :customStyle="{width:'200rpx',height:'66rpx',borderRadius: '33rpx'}" iconColor="#fff"
		  						text="去看视频" color="linear-gradient(90deg, #11DF20 0%, #00B74F 100%)" icon="play-circle">
		  					</u-button>
		  					<view class="cor-333 fs15 fw600 mt10">科一易错试题</view>
		  				</view>
		  			</view>
		  
		  		</view>
		  	</view>
		  
		</view>
	    <view class="top_box mt15 p14">
				<view class="flex jc-sb aic">
					<text class="fs18 cor-000 fw600">{{tIndex==0?'错题':'收藏题'}}分类</text>
					<u-icon name="arrow-right" size="18"></u-icon>
				</view>
				<view class="flex ai-c jc-sb" style="flex-wrap: wrap;">
					<view v-for="(item,index) of typeList" :key="index" class="category_item p14 flex jc-sb ai-c mb10">
						<text class="cor-000">{{item.typeName}}</text>
						<text class="cor-666">{{item.typeNum}}</text>
					</view>
				</view>
			</view>
	</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tIndex:0,
				isMoveWrong:true,
				title:'重要提示：所有错题做对，再去考试！',
				categoryList:[{
					name:'错题本'
				},{name:'收藏夹'}],
				typeList:[{
					typeName:'驾驶证审验注销',
					typeNum:1
				},{
					typeName:'机动车强制报废',
					typeNum:2
				},{
					typeName:'驾驶证审验注销',
					typeNum:1
				},{
					typeName:'机动车强制报废',
					typeNum:2
				},{
					typeName:'驾驶证审验注销',
					typeNum:1
				},{
					typeName:'机动车强制报废',
					typeNum:2
				}]
			}
		},
		methods:{
			tabChange(val){
				this.tIndex=val.index
			},
			toPractice(){
				const navTitle=this.tIndex==0?'错题本':'收藏夹'
				uni.navigateTo({
					url:"/pages/questionBank/questionBank?navTitle="+navTitle
				})
			}
		}
	}
</script>

<style scoped>
	::v-deep .u-tabs__wrapper__nav__line {
			background: linear-gradient(90deg, #11DF20 0%, #00B74F 100%) !important;
			bottom: 14rpx !important;
		}
		.top_box{
			width: 100%;
			background: #FDFDFD;
			border-radius: 20rpx;
		}
		.tip_box{
			width: 100%;
			background: #FFE6D4;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 10px 14px;
		}
		.total_box{
			width: 100%;
			background: #F5F5F5;
			border-radius: 20rpx;
			padding: 14px;
		}
		.yellow_box{
			margin-top: 10px;
			padding: 14px;
			width: 100%;
			background: linear-gradient(90deg, #FBF2D4 0%, #F7E4B5 100%);
			border-radius: 20rpx;
		}
		.riseBtn{
			width: 156rpx;
			height: 56rpx;
			text-align: center;
			line-height: 56rpx;
			font-size: 12px;
			background-color: #F7E4B5;
			border: 1px solid #FF6E02;
			color: #FF6E02;
			border-radius: 28rpx;
		}
		.video-box {
			padding: 20rpx;
			width: 694rpx;
			height: 369rpx;
			background: #DEEFE5;
			border: 2px solid #47DB87;
			border-radius: 16rpx;
		}
		
		.contain-box {
			width: 406rpx;
			height: 228rpx;
			background: #00B74F;
			border-radius: 16rpx;
		}
		.category_item{
			width: 312rpx;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			background: #F5F5F5;
			border-radius: 20rpx;
		}
</style>