11 changed files with 249 additions and 98 deletions
-
9pages/exercises/beforeExam/beforeExam.vue
-
7pages/exercises/exam/exam.vue
-
2pages/exercises/theoryStudy/theoryStudy.vue
-
127pages/index/index.vue
-
62pages/vip/vipEntry/comp/commentItem.vue
-
126pages/vip/vipEntry/vipEntry.vue
-
BINstatic/images/car1.png
-
BINstatic/images/car2.png
-
BINstatic/images/car3.png
-
BINstatic/images/car4.png
-
BINstatic/images/dg.png
@ -1,11 +1,132 @@ |
|||||
<template> |
<template> |
||||
<view class="content"> |
<view class="content"> |
||||
<up-button type="primary" text="点我啊" @click="$goPage('/pages/exercises/chapter/chapter')"></up-button> |
|
||||
|
<up-navbar title="选择类型" @rightClick="rightClick" :autoBack="true"></up-navbar> |
||||
|
<view class="tit">请选择需要学习的题库类型</view> |
||||
|
<view class="ul"> |
||||
|
<view class="li" v-for="(item,index) in tabData" :key="index" @click="chooseCar(item)" :class="{active: item.name==currentCar}"> |
||||
|
<view class="checkBox" v-if="item.name==currentCar"> |
||||
|
<image src="@/static/images/dg.png" mode=""></image> |
||||
|
</view> |
||||
|
<view class="icon" :style="item.style"> |
||||
|
<image :src="item.icon" mode=""></image> |
||||
|
</view> |
||||
|
<view class="name">{{item.name}}</view> |
||||
|
<view class="carType">{{ item.type }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="btnBox"> |
||||
|
<oneBtn text="确 定" @oneBtnClick="oneBtnClick"></oneBtn> |
||||
|
</view> |
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup> |
<script setup> |
||||
import { ref,reactive } from 'vue'; |
|
||||
import {onLoad,onReady} from "@dcloudio/uni-app" |
|
||||
|
import { |
||||
|
ref, |
||||
|
reactive |
||||
|
} from 'vue'; |
||||
|
import { |
||||
|
onLoad, |
||||
|
onReady |
||||
|
} from "@dcloudio/uni-app" |
||||
|
|
||||
|
const rightClick = () => { |
||||
|
console.log('rightClick'); |
||||
|
}; |
||||
|
const tabData = ref([ |
||||
|
{name: '小车', type: 'C1/C2/C3', style: 'width: 114rpx;height: 61rpx;', icon: new URL('@/static/images/car4.png', import.meta.url).href, id: '1'}, |
||||
|
{name: '货车', type: 'A2/B2', style: 'width: 106rpx;height: 68rpx;', icon: new URL('@/static/images/car2.png', import.meta.url).href, id: '1'}, |
||||
|
{name: '客车', type: 'A1/B1/A3', style: 'width: 106rpx;height: 68rpx;', icon: new URL('@/static/images/car1.png', import.meta.url).href, id: '1'}, |
||||
|
{name: '摩托车', type: 'D/E/F', style: 'width: 102rpx;height: 73rpx;', icon: new URL('@/static/images/car3.png', import.meta.url).href, id: '1'}, |
||||
|
]) |
||||
|
const currentCar = ref('小车') |
||||
|
function chooseCar(item) { |
||||
|
currentCar.value = item.name |
||||
|
} |
||||
|
|
||||
|
function oneBtnClick() { |
||||
|
uni.navigateTo({ |
||||
|
url: '/pages/exercises/theoryStudy/theoryStudy' |
||||
|
}) |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
image { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.btnBox { |
||||
|
position: fixed; |
||||
|
bottom: 70rpx; |
||||
|
left: 0; |
||||
|
padding: 20px; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.content { |
||||
|
width: 100%; |
||||
|
|
||||
|
up-navbar { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.tit { |
||||
|
padding: 40rpx 0; |
||||
|
font-size: 36rpx; |
||||
|
color: #333; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
|
||||
|
.ul { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
padding: 0 20px; |
||||
|
justify-content: space-between; |
||||
|
.li { |
||||
|
width: 190rpx; |
||||
|
height: 190rpx; |
||||
|
border-radius: 10rpx; |
||||
|
padding-top: 20rpx; |
||||
|
position: relative; |
||||
|
display: flex;align-items: center;justify-content: center;margin: 30rpx 0rpx 0 0 ;flex-direction: column; |
||||
|
&.active { |
||||
|
background: #EDF8FF; |
||||
|
} |
||||
|
.checkBox { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
width: 36rpx; |
||||
|
height: 36rpx; |
||||
|
background: #4DBEFF; |
||||
|
border-radius: 0px 10rpx 0px 10rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
image { |
||||
|
display: block; |
||||
|
width: 32rpx; |
||||
|
height: 23rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.icon { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.name { |
||||
|
font-size: 28rpx; |
||||
|
margin: 4rpx 0; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.carType { |
||||
|
font-size: 24rpx; |
||||
|
color: #ccc; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,62 @@ |
|||||
|
<template> |
||||
|
<view class="commentItem"> |
||||
|
<view class="flex"> |
||||
|
<view class="avatar"> |
||||
|
<image src="@/static/images/avatarbg.png" mode=""></image> |
||||
|
</view> |
||||
|
<view class="name">关系很好</view> |
||||
|
<view class="tag">7天通过科目一</view> |
||||
|
</view> |
||||
|
<view class="text"> |
||||
|
抱着"花钱买个心安" 的想法买了VIP，后面果然很快就通过考试了，比我预想的考试分高！ |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
defineProps(['info']) |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
image { |
||||
|
display: block;width: 100%;height: 100%; |
||||
|
} |
||||
|
.commentItem { |
||||
|
width: 100%; |
||||
|
height: 236rpx; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0px 0px 18rpx 0px rgba(0, 0, 0, 0.04); |
||||
|
border-radius: 10rpx; |
||||
|
padding: 40rpx; |
||||
|
.flex { |
||||
|
.avatar { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.name { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
padding: 0 10rpx; |
||||
|
} |
||||
|
|
||||
|
.tag { |
||||
|
min-width: 159rpx; |
||||
|
height: 36rpx; |
||||
|
background: linear-gradient(135deg, #F9E4B1 0%, #F1C477 100%); |
||||
|
border-radius: 6rpx; |
||||
|
line-height: 36rpx; |
||||
|
text-align: center; |
||||
|
padding: 0 10rpx; |
||||
|
font-size: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
margin-top: 26rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #2D1306; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
After Width: 212 | Height: 134 | Size: 41 KiB |
|
After Width: 210 | Height: 136 | Size: 37 KiB |
|
After Width: 204 | Height: 146 | Size: 34 KiB |
|
After Width: 228 | Height: 122 | Size: 36 KiB |
|
After Width: 64 | Height: 46 | Size: 1.0 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue