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.
326 lines
7.9 KiB
326 lines
7.9 KiB
<template>
|
|
<view class="content">
|
|
<up-navbar title="理论学习" :leftIconColor="'#333'" :safeAreaInsetTop="true" :autoBack="true" :bgColor="'transparent'">
|
|
<template #right>
|
|
<view class="u-nav-slot flex">
|
|
<view class="txt">小车</view>
|
|
<u-icon name="arrow-down-fill" color="#333" size="12"></u-icon>
|
|
</view>
|
|
</template>
|
|
</up-navbar>
|
|
|
|
<view class="tabs flex">
|
|
<view class="tab" @click="changeTab(1)" :class="{active: currentTab==1}">科目一</view>
|
|
<view class="tab" @click="changeTab(2)" :class="{active: currentTab==2}">收藏夹</view>
|
|
</view>
|
|
|
|
<view class="swiperBox">
|
|
<u-swiper :list="list1" @click="swiperClick" :dots-styles="dotsStyles" indicatorMode="dot"></u-swiper>
|
|
</view>
|
|
|
|
<view class="notice">
|
|
<view class="yellowT">通知/</view>
|
|
<view class="txt">06月11日已更新至最新题库</view>
|
|
</view>
|
|
|
|
<view class="iconBox">
|
|
<view class="iconComl">
|
|
<view class="item" v-for="(item,index) in leftItem" :key="index">
|
|
<view class="icon">
|
|
<image :src="item.icon" mode=""></image>
|
|
</view>
|
|
<view class="text">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="centerComl">
|
|
<view class="ctItem">
|
|
<view class="txt">顺序练习</view>
|
|
<view class="txt">0/1700</view>
|
|
</view>
|
|
<view class="ctItem">
|
|
<view class="txt">精选试题</view>
|
|
<view class="txt">0/1700</view>
|
|
</view>
|
|
</view>
|
|
<view class="iconComl">
|
|
<view class="item" v-for="(item,index) in rightItem" :key="index">
|
|
<view class="icon">
|
|
<image :src="item.icon" mode=""></image>
|
|
</view>
|
|
<view class="text">{{ item.name }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="simulatedExam flex-b">
|
|
<view class="leftTxt">
|
|
<view class="h8">科一模拟考试</view>
|
|
<view class="text">考试次数：1次</view>
|
|
<view class="text">预测通过率：10%</view>
|
|
<view class="btnBox flex">
|
|
<view class="btnTxt">开始考试</view>
|
|
<view class="btnIcon">
|
|
<image src="@/static/images/theory/sanjx.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="rightImg">
|
|
<image src="@/static/images/theory/computed.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="ul flex">
|
|
<view class="li" v-for="(item,index) in bottomItem" :key="index">
|
|
<view class="icon">
|
|
<image :src="item.icon" mode=""></image>
|
|
</view>
|
|
<view class="txt">{{ item.name }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
const list1 = [
|
|
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
|
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
|
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
|
]
|
|
function swiperClick(val) {
|
|
console.log(val)
|
|
}
|
|
const currentTab = ref(1)
|
|
const dotsStyles = ref({
|
|
backgroundColor: '#E8E9EC',
|
|
border: '1px #E8E9EC solid',
|
|
color: '#fff',
|
|
selectedBackgroundColor: '#1989FA',
|
|
selectedBorder: '1px #1989FA solid'
|
|
})
|
|
|
|
const leftItem = ref([
|
|
{name: '分类学习', icon: new URL('@/static/images/theory/theoryIcon1.png', import.meta.url).href, url: ''},
|
|
{name: '章节练习', icon: new URL('@/static/images/theory/theoryIcon7.png', import.meta.url).href, url: ''},
|
|
{name: '精选试题', icon: new URL('@/static/images/theory/theoryIcon9.png', import.meta.url).href, url: ''},
|
|
{name: '考前密卷', icon: new URL('@/static/images/theory/theoryIcon11.png', import.meta.url).href, url: ''},
|
|
])
|
|
|
|
const rightItem = ref([
|
|
{name: '题型练习', icon: new URL('@/static/images/theory/theoryIcon6.png', import.meta.url).href, url: ''},
|
|
{name: '错题收藏', icon: new URL('@/static/images/theory/theoryIcon8.png', import.meta.url).href, url: ''},
|
|
{name: '仿真考试', icon: new URL('@/static/images/theory/theoryIcon10.png', import.meta.url).href, url: ''},
|
|
{name: '我的学习', icon: new URL('@/static/images/theory/theoryIcon12.png', import.meta.url).href, url: ''},
|
|
])
|
|
|
|
const bottomItem = ref([
|
|
{name: '考试简介', icon: new URL('@/static/images/theory/theoryIcon3.png', import.meta.url).href, url: ''},
|
|
{name: '考试准备', icon: new URL('@/static/images/theory/theoryIcon2.png', import.meta.url).href, url: ''},
|
|
{name: '考试流程', icon: new URL('@/static/images/theory/theoryIcon4.png', import.meta.url).href, url: ''},
|
|
{name: '注意事项', icon: new URL('@/static/images/theory/theoryIcon5.png', import.meta.url).href, url: ''},
|
|
])
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.tabs {
|
|
display: flex;
|
|
height: 100rpx;
|
|
width: 100%;
|
|
justify-content: center;
|
|
.tab {
|
|
color: #333;
|
|
position: relative;
|
|
padding: 0 40rpx;
|
|
font-weight: 400;
|
|
flex: 1;
|
|
text-align: center;
|
|
&.active {
|
|
width: 100%;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -20rpx;
|
|
width: 30rpx;
|
|
height: 4rpx;
|
|
background: #333;
|
|
font-weight: 700;
|
|
border-radius: 2rpx;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
padding: 100rpx 30rpx 30rpx 30rpx;
|
|
.u-nav-slot {
|
|
.txt {
|
|
font-size: 28rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
|
|
.swiperBox {
|
|
padding-top: 20rpx;
|
|
}
|
|
|
|
.notice {
|
|
padding: 18rpx;
|
|
background: #FEF9ED;
|
|
border-radius: 8rpx;
|
|
margin-top: 20rpx;
|
|
font-size: 28rpx;
|
|
.yellowT {
|
|
font-weight: 800;
|
|
color: #F1AD40;
|
|
font-style: italic;
|
|
display: inline-block;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.txt {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.iconBox {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 60rpx 30rpx;
|
|
.iconComl {
|
|
display: flex;
|
|
flex-direction: column;
|
|
.item {
|
|
text-align: center;
|
|
margin-bottom: 40rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.icon {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
|
|
}
|
|
|
|
.text {
|
|
font-size: 28rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.centerComl {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
padding-bottom: 30rpx;
|
|
.ctItem {
|
|
width: 230rpx;
|
|
height: 230rpx;
|
|
background: linear-gradient(0deg, #4FACFE 0%, #00F2FE 100%);
|
|
border-radius: 50%;
|
|
// border: 10px solid;
|
|
// opacity: 0.1;
|
|
// border-image: linear-gradient(0deg, #4FACFE, #00F2FE) 10 10;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
&:last-child {
|
|
background: linear-gradient(45deg, #0FE25C 0%, #1FF2CA 100%);
|
|
}
|
|
.txt {
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
padding: 6rpx 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.simulatedExam {
|
|
background: #DFF6FF;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
// margin-top: 40rpx;
|
|
.leftTxt {
|
|
flex: 1;
|
|
width: 0;
|
|
.h8 {
|
|
font-weight: bold;
|
|
font-size: 44rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 28rpx;
|
|
margin-top: 12rpx;
|
|
}
|
|
|
|
.btnBox {
|
|
width: 188rpx;
|
|
height: 66rpx;
|
|
background: #3776FF;
|
|
border-radius: 33rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 30rpx;
|
|
.btnTxt {
|
|
font-size: 30rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.btnIcon {
|
|
width: 10rpx;
|
|
height: 12rpx;
|
|
margin-left: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rightImg {
|
|
width: 256rpx;
|
|
height: 256rpx;
|
|
img {
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.ul {
|
|
padding: 20rpx 0 0 0;
|
|
justify-content: space-between;
|
|
.li {
|
|
width: 23%;
|
|
height: 174rpx;
|
|
background: linear-gradient(0deg, #FFFFFF 0%, #E5F7FF 100%);
|
|
box-shadow: 0px 2px 2px 0px #E5F7FF;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.icon {
|
|
width: 58rpx;
|
|
height: 60rpx;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.txt {
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
margin-top: 24rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|