questionbankvue3/pages/exercises/wrongQuestion/wrongQuestion.vue

<template>
	<view class="content">
		<up-navbar leftText=" " :leftIconColor="'#fff'" :safeAreaInsetTop="true" :autoBack="true" :bgColor="'transparent'">
			<template #center>
				<view class="u-nav-slot flex">
					<view class="btn" @click="changeNav(1)" :class="{active: currentNav==1}">错题本</view>
					<view class="btn" @click="changeNav(2)" :class="{active: currentNav==2}">收藏夹</view>
				</view>
			</template>
		</up-navbar>
		
		<view class="card">
			<view class="h7">我的错题</view>
			<view class="flex-b">
				<view class="cardBg">
					<view class="flex">
						<view class="label">全部错题</view>
						<u-icon name="arrow-right" color="#fff" size="14"></u-icon>
					</view>
					<view class="num">2</view>
				</view>
				<view class="cardBg">
					<view class="flex">
						<view class="label">高频错题</view>
						<u-icon name="arrow-right" color="#fff" size="14"></u-icon>
					</view>
					<view class="num">1</view>
				</view>
			</view>
			<view class="flex-b">
				<view class="h8">答对题后自动移除错题</view>
				<u-switch v-model="value" @change="change"></u-switch>
			</view>
		</view>
		<view class="card">
			<view class="flex-b">
				<view class="h7">错题分类</view>
				<view class="rightall">
					<u-icon name="trash" color="#ccc" size="14"></u-icon>
					<view class="txt">全部移除</view>
				</view>
			</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 setup>
	import { ref } from 'vue'
	const value = ref(false)
	const currentNav = ref(1)
	
	function changeNav(val) {
		currentNav.value = val
	}
</script>

<style lang="scss" scoped>
	.u-nav-slot {
		display: flex;
		.btn {
			color: #fff;
			position: relative;
			padding: 0 20rpx;
			&.active {
				&::before {
					content: '';
					position: absolute;
					left: 50%;
					bottom: -20rpx;
					width: 30rpx;
					height: 4rpx;
					background: #F6F7F8;
					border-radius: 2rpx;
					transform: translateX(-50%);
				}
			}
		}
	}
	.content {
	  width: 100%;
	  // background-color: #F6F7FA;
	  min-height: 100vh;
	  padding: 100rpx 30rpx 30rpx 30rpx;
	  background: url('../../../static/images/topbg.png') #F6F7FA no-repeat;
	  background-size: 100% 410rpx;
	  .card {
		  width: 100%;
		  background: #FFFFFF;
		  border-radius: 20rpx;
		  padding: 20rpx;
		  margin-top: 20rpx;
	    .h7 {
			font-size: 32rpx;
			font-weight: 550;
	    }
	
	    .cardBg {
			width: 48%;
			height: 147rpx;
			background: linear-gradient(125deg, #3776FF 0%, #6193FF 100%);
			border-radius: 20rpx;
			padding: 20rpx;
			color: #fff;
			margin-top: 30rpx;
			&:last-child {
				background: linear-gradient(125deg, #FE5656 0%, #FFC5C5 100%);
			}
	      .flex {
	        .label {
				font-size: 24rpx;
	        }
	
	        u-icon {
				
	        }
	      }
	
	      .num {
			font-weight: bold;
			font-size: 48rpx;
			margin-top: 20rpx;
	      }
	    }
	
	    .flex-b {
	      .h8 {
			font-size: 28rpx;
			line-height: 120rpx;
			font-weight: 550;
	      }
	
	      u-switch {
	
	      }
	    }
	  }
	  .rightall {
		  display: flex;
		  align-items: center;
		  font-size: 24rpx;
		  color: #ccc;
		  .txt {
			  margin-left: 6rpx;
		  }
	  }
	  .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>