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
-
124pages/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> |
|||
<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> |
|||
</template> |
|||
|
|||
<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> |
|||
|
|||
<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