You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
196 lines
4.1 KiB
196 lines
4.1 KiB
<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>
|