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