31 changed files with 2616 additions and 8 deletions
-
22common/css/app.scss
-
77common/css/textareaBg.scss
-
57pages.json
-
134pages/carEntry/evaluate/comp/evaluateItem.vue
-
91pages/carEntry/evaluate/evaluate.vue
-
222pages/carEntry/examineAppointment/comp/step1.vue
-
86pages/carEntry/examineAppointment/comp/step2.vue
-
96pages/carEntry/examineAppointment/comp/step3.vue
-
79pages/carEntry/examineAppointment/comp/step4.vue
-
177pages/carEntry/examineAppointment/comp/step5.vue
-
132pages/carEntry/examineAppointment/examineAppointment.vue
-
55pages/carEntry/operaAppointment/comp/searchBox.vue
-
72pages/carEntry/operaAppointment/comp/step1.vue
-
99pages/carEntry/operaAppointment/comp/step2.vue
-
110pages/carEntry/operaAppointment/comp/step3.vue
-
307pages/carEntry/operaAppointment/comp/step4.vue
-
125pages/carEntry/operaAppointment/operaAppointment.vue
-
222pages/carEntry/simulateAppointment/comp/step1.vue
-
96pages/carEntry/simulateAppointment/comp/step2.vue
-
161pages/carEntry/simulateAppointment/comp/step3.vue
-
118pages/carEntry/simulateAppointment/simulateAppointment.vue
-
74pages/mineEntry/personaInfo/personaInfo.vue
-
2pages/tabbar/index/index.vue
-
4pages/tabbar/learnCar/comp/subject0.vue
-
2pages/tabbar/learnCar/comp/subject1.vue
-
2pages/tabbar/learnCar/comp/subject3.vue
-
2pages/tabbar/mine/index.vue
-
BINstatic/images/car/btn_daohang.png
-
BINstatic/images/car/btn_daohang_cli.png
-
BINstatic/images/car/ic_sousuo.png
-
BINstatic/images/index/telephone_cli.png
@ -0,0 +1,77 @@ |
|||||
|
.textareaBg { |
||||
|
min-height: 364rpx; |
||||
|
background: #F8F8F8; |
||||
|
border-radius: 16rpx; |
||||
|
border: 2rpx solid #E8E9EC; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
.flex { |
||||
|
padding: 20rpx; |
||||
|
align-items: flex-start; |
||||
|
.icon { |
||||
|
width: 24rpx; |
||||
|
height: 24rpx; |
||||
|
margin: 0 14rpx 0 24rpx; |
||||
|
} |
||||
|
|
||||
|
.inputBox { |
||||
|
flex: 1; |
||||
|
|
||||
|
} |
||||
|
/deep/ .inputBox .u-textarea { |
||||
|
padding: 0 !important; |
||||
|
border: none !important; |
||||
|
background: none !important; |
||||
|
font-size: 24rpx |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.phoneBox { |
||||
|
display: flex; |
||||
|
padding: 0 10rpx 20rpx 20rpx; |
||||
|
.imgBox { |
||||
|
display: flex; |
||||
|
.img { |
||||
|
margin-right: 14rpx; |
||||
|
position: relative; |
||||
|
image { |
||||
|
width: 160rpx; |
||||
|
height: 160rpx; |
||||
|
border-radius: 8rpx; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.minusCircle { |
||||
|
position: absolute; |
||||
|
right: -14rpx; |
||||
|
top: -20rpx; |
||||
|
z-index: 9; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.phone { |
||||
|
border: 2rpx dashed #CDCED0; |
||||
|
width: 160rpx; |
||||
|
height: 160rpx; |
||||
|
background: #F8F8F8; |
||||
|
border-radius: 8rpx; |
||||
|
overflow: hidden; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
flex-direction: column; |
||||
|
.phoneIcon { |
||||
|
width: 60rpx; |
||||
|
height: 60rpx; |
||||
|
} |
||||
|
|
||||
|
.lab { |
||||
|
font-size: 20rpx; |
||||
|
color: #686B73; |
||||
|
margin-top: 8rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,134 @@ |
|||||
|
<template> |
||||
|
<view class=""> |
||||
|
<view class="pad"> |
||||
|
<view class="card"> |
||||
|
<view class="top_row"> |
||||
|
<view class="tit">{{ info.tit }}</view> |
||||
|
<u-checkbox-group iconPlacement="right" :size="14" > |
||||
|
<u-checkbox v-model="checked" shape="circle" label="匿名提交" :iconSize="12" :labelSize="12" ></u-checkbox> |
||||
|
</u-checkbox-group> |
||||
|
</view> |
||||
|
<view class="user_row"> |
||||
|
<view class="avatar"> |
||||
|
<image src="@/static/images/logo.png" mode=""></image> |
||||
|
</view> |
||||
|
<view class="name">王一宝</view> |
||||
|
</view> |
||||
|
<view class="star_row"> |
||||
|
<view class="lab">服务态度</view> |
||||
|
<view class="star"> |
||||
|
<u-rate active-color="#1989FA" inactive-color="#1989FA" gutter="1" :size="16" :value="4" ></u-rate> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="star_row"> |
||||
|
<view class="lab">教学安排</view> |
||||
|
<view class="star"> |
||||
|
<u-rate active-color="#1989FA" inactive-color="#1989FA" gutter="1" :size="16" :value="4" ></u-rate> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="star_row"> |
||||
|
<view class="lab">教学质量</view> |
||||
|
<view class="star"> |
||||
|
<u-rate active-color="#1989FA" inactive-color="#1989FA" gutter="1" :size="16" :value="4" ></u-rate> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 写内容上传图片 --> |
||||
|
<view class="textareaBg"> |
||||
|
<view class="flex"> |
||||
|
<view class="icon"> |
||||
|
<image src="@/static/images/index/edit.png" mode=""></image> |
||||
|
</view> |
||||
|
<view class="inputBox"> |
||||
|
<u-textarea v-model="value" ref="textarea" placeholder="详细说明问题，以便获得更好的回答~"></u-textarea> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="phoneBox"> |
||||
|
<view class="imgBox"> |
||||
|
<view class="img"> |
||||
|
<view class="minusCircle"> |
||||
|
<u-icon name="close-circle-fill" size="20" color="#9FA3A4"></u-icon> |
||||
|
</view> |
||||
|
<image src="@/static/logo.png" mode=""></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="phone" @click="chooseImages"> |
||||
|
<view class="phoneIcon"> |
||||
|
<image src="@/static/images/index/btn_tupian.png" mode=""></image> |
||||
|
</view> |
||||
|
<view class="lab">添加图片</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: [ 'info' ], |
||||
|
data() { |
||||
|
return { |
||||
|
checked: false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import '../../../../common/css/textareaBg.scss'; |
||||
|
.card { |
||||
|
padding: 28rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
.top_row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding-bottom: 24rpx; |
||||
|
border-bottom: 2rpx solid #E8E9EC; |
||||
|
justify-content: space-between; |
||||
|
.tit { |
||||
|
font-weight: 600; |
||||
|
color: #333333; |
||||
|
font-size: 32rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.user_row { |
||||
|
width: 100%; |
||||
|
height: 100rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.avatar { |
||||
|
width: 60rpx; |
||||
|
height: 60rpx; |
||||
|
border-radius: 50%; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.name { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
padding-left: 26rpx; |
||||
|
} |
||||
|
} |
||||
|
.star_row { |
||||
|
padding: 14rpx 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.lab { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
padding-right: 32rpx; |
||||
|
} |
||||
|
|
||||
|
.star { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.textareaBg { |
||||
|
margin-top: 22rpx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,91 @@ |
|||||
|
<template> |
||||
|
<view class="pageBgImg"> |
||||
|
<topNavbar title="评价"></topNavbar> |
||||
|
<evaluateItem :info="info"/> |
||||
|
<evaluateItem :info="{tit: '您对教练满意吗'}"/> |
||||
|
|
||||
|
<view class="btnBox"> |
||||
|
<view class="btnBg">提交</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import evaluateItem from './comp/evaluateItem' |
||||
|
export default { |
||||
|
components: { evaluateItem }, |
||||
|
data() { |
||||
|
return { |
||||
|
checked: false, |
||||
|
info: { |
||||
|
tit: '您对驾校满意吗？', |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import '../../../common/css/textareaBg.scss'; |
||||
|
.btnBox { |
||||
|
padding-bottom: 76rpx; |
||||
|
} |
||||
|
.btnBg { |
||||
|
margin: 124rpx auto 0 auto; |
||||
|
width: 396rpx; |
||||
|
} |
||||
|
.textareaBg { |
||||
|
margin-top: 22rpx; |
||||
|
} |
||||
|
.card { |
||||
|
padding: 28rpx; |
||||
|
.top_row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding-bottom: 24rpx; |
||||
|
border-bottom: 2rpx solid #E8E9EC; |
||||
|
justify-content: space-between; |
||||
|
.tit { |
||||
|
font-weight: 600; |
||||
|
color: #333333; |
||||
|
font-size: 32rpx; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
.user_row { |
||||
|
width: 100%; |
||||
|
height: 100rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.avatar { |
||||
|
width: 60rpx; |
||||
|
height: 60rpx; |
||||
|
border-radius: 50%; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.name { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
padding-left: 26rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.star_row { |
||||
|
padding: 14rpx 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.lab { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
padding-right: 32rpx; |
||||
|
} |
||||
|
|
||||
|
.star { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,222 @@ |
|||||
|
<template> |
||||
|
<view class="step1"> |
||||
|
<view class="card"> |
||||
|
<view class="dateBox"> |
||||
|
<view class="month-row"> |
||||
|
<view class="month">2032.08</view> |
||||
|
<view class="arrow"> |
||||
|
<u-icon name="arrow-down" :size="12" :color="'#1989FA'"></u-icon> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="date_row"> |
||||
|
<view class="icon left"> |
||||
|
<u-icon name="arrow-left" :size="12" :color="'#fff'"></u-icon> |
||||
|
</view> |
||||
|
<view class="dateArr"> |
||||
|
<view class="date" v-for="(item,index) in dateArr" :key="index" :class="{active: index==1}"> |
||||
|
<view class="week">{{ item.week }}</view> |
||||
|
<view class="num">{{ item.num }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="icon right"> |
||||
|
<u-icon name="arrow-right" :size="12" :color="'#fff'"></u-icon> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="card"> |
||||
|
<view class="timeCon"> |
||||
|
<view class="h2">上午</view> |
||||
|
<view class="time_box"> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">已过期</view> |
||||
|
<view class="time">06:00-07:00</view> |
||||
|
</view> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">已约满</view> |
||||
|
<view class="time">06:00-07:00</view> |
||||
|
</view> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">可预约</view> |
||||
|
<view class="time">06:00-07:00</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="h2">下午</view> |
||||
|
<view class="time_box"> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">已过期</view> |
||||
|
<view class="time">06:00-07:00</view> |
||||
|
</view> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">已约满</view> |
||||
|
<view class="time">06:00-07:00</view> |
||||
|
</view> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">可预约</view> |
||||
|
<view class="time">06:00-07:00</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="btn" @click="changeStep(2)">下一步</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
dateArr: [ |
||||
|
{week: '一', num: '08'}, |
||||
|
{week: '二', num: '09'}, |
||||
|
{week: '三', num: '10'}, |
||||
|
{week: '四', num: '11'}, |
||||
|
{week: '五', num: '12'}, |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
changeStep(val) { |
||||
|
this.$emit('changeStep', val) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.card { |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
.dateBox { |
||||
|
padding: 36rpx 0 40rpx 0; |
||||
|
.month-row { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin-bottom: 36rpx; |
||||
|
.month { |
||||
|
font-size: 32rpx; |
||||
|
color: $themC; |
||||
|
} |
||||
|
|
||||
|
.arrow { |
||||
|
margin-left: 6rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.date_row { |
||||
|
width: 100%; |
||||
|
height: 100rpx; |
||||
|
position: relative; |
||||
|
.icon { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
background: rgba(51,51,51,0.18); |
||||
|
backdrop-filter: blur(4rpx); |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
border-radius: 50%; |
||||
|
&.left { |
||||
|
left: 16rpx; |
||||
|
} |
||||
|
&.right { |
||||
|
right: 16rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.dateArr { |
||||
|
display: flex; |
||||
|
padding: 0 70rpx; |
||||
|
justify-content: space-between; |
||||
|
.date { |
||||
|
width: 74rpx; |
||||
|
height: 100rpx; |
||||
|
border-radius: 16rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
&.active { |
||||
|
background: rgba(25,137,250,0.1); |
||||
|
border: 2rpx solid #1989FA; |
||||
|
color: $themC; |
||||
|
} |
||||
|
.week { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.num { |
||||
|
margin-top: 4rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.card { |
||||
|
.timeCon { |
||||
|
padding: 0 24rpx 40rpx 24rpx; |
||||
|
} |
||||
|
.h2 { |
||||
|
line-height: 90rpx; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.time_box { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: space-between; |
||||
|
.time_item { |
||||
|
width: 30%; |
||||
|
height: 120rpx; |
||||
|
background: #F8F8F8; |
||||
|
border-radius: 12rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
border-radius: 12rpx; |
||||
|
color: #333; |
||||
|
&.active { |
||||
|
background: rgba(25,137,250,0.1); |
||||
|
border: 2rpx solid #1989FA; |
||||
|
color: $themC; |
||||
|
} |
||||
|
&.disable { |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
.lab { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.time { |
||||
|
font-size: 24rpx; |
||||
|
margin-top: 4rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
width: 47%; |
||||
|
height: 72rpx; |
||||
|
background: #1989FA; |
||||
|
border-radius: 8rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
line-height: 72rpx; |
||||
|
margin: 108rpx auto 50rpx auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,86 @@ |
|||||
|
<template> |
||||
|
<view class="step1"> |
||||
|
<view class="card"> |
||||
|
<view class="list"> |
||||
|
<view class="listItem" v-for="(item,index) in list" :key="index" :class="{active: index==1}"> |
||||
|
{{ item.text }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="btn_row" style="margin-top: 108rpx;"> |
||||
|
<view class="border btn" @click="changeStep(1)">返回上一步</view> |
||||
|
<view class="btn" @click="changeStep(3)">下一步</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
list: [{ |
||||
|
text: '科目二', |
||||
|
id: 2 |
||||
|
}, |
||||
|
{ |
||||
|
text: '科目三', |
||||
|
id: 3 |
||||
|
}, |
||||
|
], |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
changeStep(val) { |
||||
|
this.$emit('changeStep', val) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.list { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
display: flex; |
||||
|
padding: 24rpx; |
||||
|
.listItem { |
||||
|
width: 32.4%; |
||||
|
height: 120rpx; |
||||
|
background: #F8F8F8; |
||||
|
border-radius: 12rpx; |
||||
|
font-weight: 500; |
||||
|
text-align: center; |
||||
|
line-height: 120rpx; |
||||
|
margin-right: 20rpx; |
||||
|
&.active { |
||||
|
width: 200rpx; |
||||
|
height: 120rpx; |
||||
|
background: rgba(25, 137, 250, 0.1); |
||||
|
border-radius: 12rpx; |
||||
|
border: 2rpx solid $themC; |
||||
|
color: $themC; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.btn_row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.btn { |
||||
|
width: 47%; |
||||
|
height: 72rpx; |
||||
|
background: #1989FA; |
||||
|
border-radius: 8rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
line-height: 72rpx; |
||||
|
|
||||
|
&.border { |
||||
|
background: rgba(25, 137, 250, 0.1); |
||||
|
border: 2rpx solid $themC; |
||||
|
color: $themC; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,96 @@ |
|||||
|
<template> |
||||
|
<view class="step2"> |
||||
|
<view class="card" v-for="(item,index) in 10" :key="index" :class="{active: index==2}"> |
||||
|
<view class="leftTxt"> |
||||
|
<view class="name oneRowText">某某模拟驾驶馆</view> |
||||
|
<view class="adr">江西省江西市江西区尚坤丁兰国际1190</view> |
||||
|
</view> |
||||
|
<view class="icon"> |
||||
|
<image src="@/static/images/index/telephone.png" mode=""></image> |
||||
|
<!-- <image src="@/static/images/index/telephone_cli.png" mode=""></image> --> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="poz_btn"> |
||||
|
<view class="btn_row" > |
||||
|
<view class="border btn" @click="changeStep(2)">返回上一步</view> |
||||
|
<view class="btn" @click="changeStep(4)">下一步</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
methods: { |
||||
|
changeStep(val) { |
||||
|
this.$emit('changeStep', val) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.poz_btn { |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
padding: 12rpx 32rpx; |
||||
|
width: 100%; |
||||
|
background: #F6F6F6; |
||||
|
} |
||||
|
.step2 { |
||||
|
width: 100%; |
||||
|
padding-bottom: 120rpx; |
||||
|
.card { |
||||
|
padding: 28rpx 36rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 20rpx; |
||||
|
&.active { |
||||
|
background: rgba(25,137,250,0.1); |
||||
|
border: 2rpx solid #1989FA; |
||||
|
color: $themC; |
||||
|
} |
||||
|
.leftTxt { |
||||
|
width: 0; |
||||
|
flex: 1; |
||||
|
.name { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.adr { |
||||
|
font-size: 24rpx; |
||||
|
margin-top: 8rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.icon { |
||||
|
width: 72rpx; |
||||
|
height: 72rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.btn_row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding-bottom: 20rpx; |
||||
|
.btn { |
||||
|
width: 47%; |
||||
|
height: 72rpx; |
||||
|
background: #1989FA; |
||||
|
border-radius: 8rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
line-height: 72rpx; |
||||
|
|
||||
|
&.border { |
||||
|
background: rgba(25, 137, 250, 0.1); |
||||
|
border: 2rpx solid $themC; |
||||
|
color: $themC; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,79 @@ |
|||||
|
<template> |
||||
|
<view class="step1"> |
||||
|
<view class="card"> |
||||
|
<view class="carModel">C1小型汽车手动挡</view> |
||||
|
</view> |
||||
|
<view class="card"> |
||||
|
<view class="carModel active">C2小型汽车自动挡</view> |
||||
|
</view> |
||||
|
<view class="btn_row" style="margin-top: 108rpx;"> |
||||
|
<view class="border btn" @click="changeStep(3)">返回上一步</view> |
||||
|
<view class="btn" @click="changeStep(5)">下一步</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
dateArr: [ |
||||
|
{week: '一', num: '08'}, |
||||
|
{week: '二', num: '09'}, |
||||
|
{week: '三', num: '10'}, |
||||
|
{week: '四', num: '11'}, |
||||
|
{week: '五', num: '12'}, |
||||
|
], |
||||
|
show: true |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
changeStep(val) { |
||||
|
this.$emit('changeStep', val) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.card { |
||||
|
margin-bottom: 20rpx; |
||||
|
.carModel { |
||||
|
padding: 0 36rpx; |
||||
|
height: 152rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 16rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
line-height: 152rpx; |
||||
|
&.active { |
||||
|
background: rgba(25,137,250,0.1); |
||||
|
color: $themC; |
||||
|
border: 2rpx solid #1989FA; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.btn_row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding-bottom: 30rpx; |
||||
|
.btn { |
||||
|
width: 47%; |
||||
|
height: 72rpx; |
||||
|
background: #1989FA; |
||||
|
border-radius: 8rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
line-height: 72rpx; |
||||
|
|
||||
|
&.border { |
||||
|
background: rgba(25, 137, 250, 0.1); |
||||
|
border: 2rpx solid $themC; |
||||
|
color: $themC; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,177 @@ |
|||||
|
<template> |
||||
|
<view class="step3"> |
||||
|
<view class="card"> |
||||
|
<view class="list"> |
||||
|
<view class="listItem" v-for="(item,index) in list" :key="index" :class="{active: index==1}"> |
||||
|
<view class="num">{{index+1}}号车</view> |
||||
|
<view class="text">{{ item.text }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="btn_row" style="margin-top: 108rpx;"> |
||||
|
<view class="border btn" @click="changeStep(4)">返回上一步</view> |
||||
|
<view class="btn" @click="show = true">确认预约</view> |
||||
|
</view> |
||||
|
|
||||
|
<u-popup :show="show" mode="center" :round="8"> |
||||
|
<view class="popupCon"> |
||||
|
<view class="h2">再次确认预约信息</view> |
||||
|
<view class="content"> |
||||
|
<view class="row"> |
||||
|
<view class="lab">预约类型</view> |
||||
|
<view class="val">xxx</view> |
||||
|
</view> |
||||
|
<view class="row"> |
||||
|
<view class="lab">预约科目</view> |
||||
|
<view class="val">xxx</view> |
||||
|
</view> |
||||
|
<view class="row"> |
||||
|
<view class="lab">预约考场</view> |
||||
|
<view class="val">2023/08/08 08:00—9:00</view> |
||||
|
</view> |
||||
|
<view class="row"> |
||||
|
<view class="lab">预约车型</view> |
||||
|
<view class="val">xxx</view> |
||||
|
</view> |
||||
|
<view class="row"> |
||||
|
<view class="lab">预约车辆</view> |
||||
|
<view class="val">xxx</view> |
||||
|
</view> |
||||
|
<view class="row"> |
||||
|
<view class="lab">预约时间</view> |
||||
|
<view class="val">2023/08/08 08:00—9:00</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="btn_row"> |
||||
|
<view class="border btn" @click="show = false">返回修改</view> |
||||
|
<view class="btn">确认</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</u-popup> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
list: [{ |
||||
|
text: '00001', |
||||
|
id: 1 |
||||
|
}, |
||||
|
{ |
||||
|
text: '00002', |
||||
|
id: 1 |
||||
|
}, |
||||
|
{ |
||||
|
text: '00003', |
||||
|
id: 1 |
||||
|
}, |
||||
|
], |
||||
|
show: true |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
changeStep(val) { |
||||
|
this.$emit('changeStep', val) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.card { |
||||
|
padding: 28rpx 24rpx; |
||||
|
} |
||||
|
|
||||
|
.list { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.listItem { |
||||
|
width: 32.4%; |
||||
|
height: 120rpx; |
||||
|
background: #F8F8F8; |
||||
|
border-radius: 12rpx; |
||||
|
font-weight: 500; |
||||
|
text-align: center; |
||||
|
font-size: 24rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
.num { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 600; |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
&.active { |
||||
|
width: 200rpx; |
||||
|
height: 120rpx; |
||||
|
background: rgba(25, 137, 250, 0.1); |
||||
|
border-radius: 12rpx; |
||||
|
border: 2rpx solid $themC; |
||||
|
color: $themC; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn_row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.btn { |
||||
|
width: 47%; |
||||
|
height: 72rpx; |
||||
|
background: #1989FA; |
||||
|
border-radius: 8rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
line-height: 72rpx; |
||||
|
|
||||
|
&.border { |
||||
|
background: rgba(25, 137, 250, 0.1); |
||||
|
border: 2rpx solid $themC; |
||||
|
color: $themC; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.popupCon { |
||||
|
padding: 30rpx 50rpx; |
||||
|
|
||||
|
.h2 { |
||||
|
font-weight: 600; |
||||
|
color: #333333; |
||||
|
line-height: 70rpx; |
||||
|
font-size: 36rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
padding-bottom: 20rpx; |
||||
|
|
||||
|
.row { |
||||
|
padding: 22rpx 0; |
||||
|
display: flex; |
||||
|
font-size: 28rpx; |
||||
|
align-items: center; |
||||
|
|
||||
|
.lab { |
||||
|
width: 180rpx; |
||||
|
color: #686B73; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.val { |
||||
|
flex: 1; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,132 @@ |
|||||
|
<template> |
||||
|
<view class="pageBgImg"> |
||||
|
<topNavbar title="考场模拟训练预约"></topNavbar> |
||||
|
<view class="pad"> |
||||
|
<view class="top_row"> |
||||
|
<view class="step_row"> |
||||
|
<view class="dian" @click="changeStep(1)"> |
||||
|
<view class="num" :class="{active: currentStep==1}">1</view> |
||||
|
</view> |
||||
|
<view class="line"></view> |
||||
|
<view class="dian" @click="changeStep(2)"> |
||||
|
<view class="num" :class="{active: currentStep==2}">2</view> |
||||
|
</view> |
||||
|
<view class="line"></view> |
||||
|
<view class="dian" @click="changeStep(3)"> |
||||
|
<view class="num" :class="{active: currentStep==3}">3</view> |
||||
|
</view> |
||||
|
<view class="line"></view> |
||||
|
<view class="dian" @click="changeStep(4)"> |
||||
|
<view class="num" :class="{active: currentStep==4}">4</view> |
||||
|
</view> |
||||
|
<view class="line"></view> |
||||
|
<view class="dian" @click="changeStep(5)"> |
||||
|
<view class="num" :class="{active: currentStep==5}">5</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="step_text"> |
||||
|
<view class="txt">选择时间</view> |
||||
|
<view class="txt">选择科目</view> |
||||
|
<view class="txt">选择考场</view> |
||||
|
<view class="txt">选择车型</view> |
||||
|
<view class="txt">选择车辆</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<step1 v-if="currentStep==1" @changeStep="changeStep"></step1> |
||||
|
<step2 v-if="currentStep==2" @changeStep="changeStep"></step2> |
||||
|
<step3 v-if="currentStep==3" @changeStep="changeStep"></step3> |
||||
|
<step4 v-if="currentStep==4" @changeStep="changeStep"></step4> |
||||
|
<step5 v-if="currentStep==5" @changeStep="changeStep"></step5> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import step1 from './comp/step1' |
||||
|
import step2 from './comp/step2' |
||||
|
import step3 from './comp/step3' |
||||
|
import step4 from './comp/step4' |
||||
|
import step5 from './comp/step5' |
||||
|
export default { |
||||
|
components: { step1, step2, step3, step4, step5 }, |
||||
|
data() { |
||||
|
return { |
||||
|
currentStep: 1 |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
changeStep(num) { |
||||
|
this.currentStep = num |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.top_row { |
||||
|
width: 100%; |
||||
|
padding-bottom: 36rpx; |
||||
|
.step_row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
width: 100%; |
||||
|
padding: 0 32rpx; |
||||
|
.dian { |
||||
|
width: 180rpx; |
||||
|
height: 100rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
position: relative; |
||||
|
// background: red; |
||||
|
} |
||||
|
.num { |
||||
|
width: 46rpx; |
||||
|
height: 46rpx; |
||||
|
background: #D1E7FE; |
||||
|
line-height: 46rpx; |
||||
|
border-radius: 50%; |
||||
|
text-align: center; |
||||
|
color: $themC; |
||||
|
font-size: 24rpx; |
||||
|
position: absolute; |
||||
|
z-index: 9; |
||||
|
&.active { |
||||
|
border:2rpx solid $themC; |
||||
|
&::before { |
||||
|
content: ''; |
||||
|
width: 66rpx; |
||||
|
height: 66rpx; |
||||
|
border-radius: 50%; |
||||
|
position: absolute; |
||||
|
z-index: -1; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%,-50%); |
||||
|
background: rgba(255,255,255,0.6); |
||||
|
filter: blur(6rpx); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.line { |
||||
|
width: 60rpx; |
||||
|
height: 4rpx; |
||||
|
background: rgba(255,255,255,0.4); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.step_text { |
||||
|
display: flex; |
||||
|
.txt { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,55 @@ |
|||||
|
<template> |
||||
|
<view class="searchBg"> |
||||
|
<view class="flex"> |
||||
|
<view class="searchIcon"> |
||||
|
<image src="@/static/images/car/ic_sousuo.png" mode=""></image> |
||||
|
</view> |
||||
|
<view class="inputBox"> |
||||
|
<u--input :placeholder="placeholder" border="none" clearable v-model="keywords" :color="'#1989FA'" |
||||
|
placeholderClass="placeholderClass"></u--input> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: ['placeholder'], |
||||
|
data() { |
||||
|
return { |
||||
|
keywords: '' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.searchBg { |
||||
|
background: rgba(255,255,255,0.46); |
||||
|
border: 2px solid rgba(255,255,255,0.3); |
||||
|
width: 100%; |
||||
|
height: 72rpx; |
||||
|
border-radius: 16rpx; |
||||
|
line-height: 72rpx; |
||||
|
margin-bottom: 28rpx; |
||||
|
.flex { |
||||
|
height: 100%; |
||||
|
padding: 0 28rpx; |
||||
|
|
||||
|
.searchIcon { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.inputBox { |
||||
|
padding-left: 28rpx; |
||||
|
flex: 1; |
||||
|
color: #fff; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.placeholderClass { |
||||
|
color: #1989FA !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,72 @@ |
|||||
|
<template> |
||||
|
<view class="step1"> |
||||
|
<view class="card"> |
||||
|
<view class="list"> |
||||
|
<view class="listItem" v-for="(item,index) in list" :key="index" :class="{active: index==1}"> |
||||
|
{{ item.text }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="btn" @click="changeStep(2)">下一步</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
list: [{ |
||||
|
text: '科目二', |
||||
|
id: 2 |
||||
|
}, |
||||
|
{ |
||||
|
text: '科目三', |
||||
|
id: 3 |
||||
|
}, |
||||
|
], |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
changeStep(val) { |
||||
|
this.$emit('changeStep', val) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.list { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
display: flex; |
||||
|
padding: 24rpx; |
||||
|
.listItem { |
||||
|
width: 32.4%; |
||||
|
height: 120rpx; |
||||
|
background: #F8F8F8; |
||||
|
border-radius: 12rpx; |
||||
|
font-weight: 500; |
||||
|
text-align: center; |
||||
|
line-height: 120rpx; |
||||
|
margin-right: 20rpx; |
||||
|
&.active { |
||||
|
width: 200rpx; |
||||
|
height: 120rpx; |
||||
|
background: rgba(25, 137, 250, 0.1); |
||||
|
border-radius: 12rpx; |
||||
|
border: 2rpx solid $themC; |
||||
|
color: $themC; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.btn { |
||||
|
width: 47%; |
||||
|
height: 72rpx; |
||||
|
background: #1989FA; |
||||
|
border-radius: 8rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
line-height: 72rpx; |
||||
|
margin: 108rpx auto 50rpx auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,99 @@ |
|||||
|
<template> |
||||
|
<view class="step2"> |
||||
|
<searchBox placeholder="搜索场地名称"></searchBox> |
||||
|
<view class="card" v-for="(item,index) in 10" :key="index" :class="{active: index==2}"> |
||||
|
<view class="leftTxt"> |
||||
|
<view class="name oneRowText">某某模拟驾驶馆</view> |
||||
|
<view class="adr">江西省江西市江西区尚坤丁兰国际1190</view> |
||||
|
</view> |
||||
|
<view class="icon"> |
||||
|
<image src="@/static/images/car/btn_daohang.png" mode=""></image> |
||||
|
<!-- <image src="@/static/images/car/btn_daohang_cli.png" mode=""></image> --> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="poz_btn"> |
||||
|
<view class="btn_row" > |
||||
|
<view class="border btn" @click="changeStep(1)">返回上一步</view> |
||||
|
<view class="btn" @click="changeStep(3)">下一步</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import searchBox from './searchBox' |
||||
|
export default { |
||||
|
components: { searchBox }, |
||||
|
methods: { |
||||
|
changeStep(val) { |
||||
|
this.$emit('changeStep', val) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.poz_btn { |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
padding: 12rpx 32rpx; |
||||
|
width: 100%; |
||||
|
background: #F6F6F6; |
||||
|
} |
||||
|
.step2 { |
||||
|
width: 100%; |
||||
|
padding-bottom: 120rpx; |
||||
|
.card { |
||||
|
padding: 28rpx 36rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 20rpx; |
||||
|
&.active { |
||||
|
background: rgba(25,137,250,0.1); |
||||
|
border: 2rpx solid #1989FA; |
||||
|
color: $themC; |
||||
|
} |
||||
|
.leftTxt { |
||||
|
width: 0; |
||||
|
flex: 1; |
||||
|
.name { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.adr { |
||||
|
font-size: 24rpx; |
||||
|
margin-top: 8rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.icon { |
||||
|
width: 72rpx; |
||||
|
height: 72rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.btn_row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding-bottom: 20rpx; |
||||
|
.btn { |
||||
|
width: 47%; |
||||
|
height: 72rpx; |
||||
|
background: #1989FA; |
||||
|
border-radius: 8rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
line-height: 72rpx; |
||||
|
|
||||
|
&.border { |
||||
|
background: rgba(25, 137, 250, 0.1); |
||||
|
border: 2rpx solid $themC; |
||||
|
color: $themC; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,110 @@ |
|||||
|
<template> |
||||
|
<view class="step3"> |
||||
|
<searchBox placeholder="搜索车辆编号或车牌号"></searchBox> |
||||
|
<view class="card"> |
||||
|
<view class="list"> |
||||
|
<view class="listItem" v-for="(item,index) in list" :key="index" :class="{active: index==1}"> |
||||
|
<view class="num">{{index+1}}号车</view> |
||||
|
<view class="text">{{ item.text }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="btn_row" style="margin-top: 108rpx;"> |
||||
|
<view class="border btn" @click="changeStep(2)">返回上一步</view> |
||||
|
<view class="btn" @click="changeStep(4)">下一步</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
list: [{ |
||||
|
text: '00001', |
||||
|
id: 1 |
||||
|
}, |
||||
|
{ |
||||
|
text: '00002', |
||||
|
id: 1 |
||||
|
}, |
||||
|
{ |
||||
|
text: '00003', |
||||
|
id: 1 |
||||
|
}, |
||||
|
], |
||||
|
show: false |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
changeStep(val) { |
||||
|
this.$emit('changeStep', val) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.card { |
||||
|
padding: 28rpx 24rpx; |
||||
|
} |
||||
|
|
||||
|
.list { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.listItem { |
||||
|
width: 32.4%; |
||||
|
height: 120rpx; |
||||
|
background: #F8F8F8; |
||||
|
border-radius: 12rpx; |
||||
|
font-weight: 500; |
||||
|
text-align: center; |
||||
|
font-size: 24rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
.num { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 600; |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
&.active { |
||||
|
width: 200rpx; |
||||
|
height: 120rpx; |
||||
|
background: rgba(25, 137, 250, 0.1); |
||||
|
border-radius: 12rpx; |
||||
|
border: 2rpx solid $themC; |
||||
|
color: $themC; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn_row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.btn { |
||||
|
width: 47%; |
||||
|
height: 72rpx; |
||||
|
background: #1989FA; |
||||
|
border-radius: 8rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
line-height: 72rpx; |
||||
|
|
||||
|
&.border { |
||||
|
background: rgba(25, 137, 250, 0.1); |
||||
|
border: 2rpx solid $themC; |
||||
|
color: $themC; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,307 @@ |
|||||
|
<template> |
||||
|
<view class="step1"> |
||||
|
<view class="card"> |
||||
|
<view class="dateBox"> |
||||
|
<view class="month-row"> |
||||
|
<view class="month">2032.08</view> |
||||
|
<view class="arrow"> |
||||
|
<u-icon name="arrow-down" :size="12" :color="'#1989FA'"></u-icon> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="date_row"> |
||||
|
<view class="icon left"> |
||||
|
<u-icon name="arrow-left" :size="12" :color="'#fff'"></u-icon> |
||||
|
</view> |
||||
|
<view class="dateArr"> |
||||
|
<view class="date" v-for="(item,index) in dateArr" :key="index" :class="{active: index==1}"> |
||||
|
<view class="week">{{ item.week }}</view> |
||||
|
<view class="num">{{ item.num }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="icon right"> |
||||
|
<u-icon name="arrow-right" :size="12" :color="'#fff'"></u-icon> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="card"> |
||||
|
<view class="timeCon"> |
||||
|
<view class="h2">上午</view> |
||||
|
<view class="time_box"> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">已过期</view> |
||||
|
<view class="time">06:00-07:00</view> |
||||
|
</view> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">已约满</view> |
||||
|
<view class="time">06:00-07:00</view> |
||||
|
</view> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">可预约</view> |
||||
|
<view class="time">06:00-07:00</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="h2">下午</view> |
||||
|
<view class="time_box"> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">已过期</view> |
||||
|
<view class="time">06:00-07:00</view> |
||||
|
</view> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">已约满</view> |
||||
|
<view class="time">06:00-07:00</view> |
||||
|
</view> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">可预约</view> |
||||
|
<view class="time">06:00-07:00</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="poz_btn"> |
||||
|
<view class="btn_row" > |
||||
|
<view class="border btn" @click="changeStep(3)">返回上一步</view> |
||||
|
<view class="btn" >确认预约</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<u-popup :show="show" mode="center" :round="8"> |
||||
|
<view class="popupCon"> |
||||
|
<view class="h2">再次确认预约信息</view> |
||||
|
<view class="content"> |
||||
|
<view class="row"> |
||||
|
<view class="lab">预约类型</view> |
||||
|
<view class="val">模拟器训练预约</view> |
||||
|
</view> |
||||
|
<view class="row"> |
||||
|
<view class="lab">预约时间</view> |
||||
|
<view class="val">2023/08/08 08:00—9:00</view> |
||||
|
</view> |
||||
|
<view class="row"> |
||||
|
<view class="lab">模拟驾驶馆</view> |
||||
|
<view class="val">某某模拟驾驶馆</view> |
||||
|
</view> |
||||
|
<view class="row"> |
||||
|
<view class="lab">预约模拟器</view> |
||||
|
<view class="val">00002</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="btn_row"> |
||||
|
<view class="border btn" @click="show = false">返回修改</view> |
||||
|
<view class="btn">确认</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</u-popup> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
dateArr: [ |
||||
|
{week: '一', num: '08'}, |
||||
|
{week: '二', num: '09'}, |
||||
|
{week: '三', num: '10'}, |
||||
|
{week: '四', num: '11'}, |
||||
|
{week: '五', num: '12'}, |
||||
|
], |
||||
|
show: true |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
changeStep(val) { |
||||
|
this.$emit('changeStep', val) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.card { |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
.dateBox { |
||||
|
padding: 36rpx 0 40rpx 0; |
||||
|
.month-row { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin-bottom: 36rpx; |
||||
|
.month { |
||||
|
font-size: 32rpx; |
||||
|
color: $themC; |
||||
|
} |
||||
|
|
||||
|
.arrow { |
||||
|
margin-left: 6rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.date_row { |
||||
|
width: 100%; |
||||
|
height: 100rpx; |
||||
|
position: relative; |
||||
|
.icon { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
background: rgba(51,51,51,0.18); |
||||
|
backdrop-filter: blur(4rpx); |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
border-radius: 50%; |
||||
|
&.left { |
||||
|
left: 16rpx; |
||||
|
} |
||||
|
&.right { |
||||
|
right: 16rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.dateArr { |
||||
|
display: flex; |
||||
|
padding: 0 70rpx; |
||||
|
justify-content: space-between; |
||||
|
.date { |
||||
|
width: 74rpx; |
||||
|
height: 100rpx; |
||||
|
border-radius: 16rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
&.active { |
||||
|
background: rgba(25,137,250,0.1); |
||||
|
border: 2rpx solid #1989FA; |
||||
|
color: $themC; |
||||
|
} |
||||
|
.week { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.num { |
||||
|
margin-top: 4rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.card { |
||||
|
.timeCon { |
||||
|
padding: 0 24rpx 70rpx 24rpx; |
||||
|
} |
||||
|
.h2 { |
||||
|
line-height: 90rpx; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.time_box { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: space-between; |
||||
|
.time_item { |
||||
|
width: 30%; |
||||
|
height: 120rpx; |
||||
|
background: #F8F8F8; |
||||
|
border-radius: 12rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
border-radius: 12rpx; |
||||
|
color: #333; |
||||
|
&.active { |
||||
|
background: rgba(25,137,250,0.1); |
||||
|
border: 2rpx solid #1989FA; |
||||
|
color: $themC; |
||||
|
} |
||||
|
&.disable { |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
.lab { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.time { |
||||
|
font-size: 24rpx; |
||||
|
margin-top: 4rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.poz_btn { |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
padding: 12rpx 32rpx; |
||||
|
width: 100%; |
||||
|
background: #F6F6F6; |
||||
|
} |
||||
|
.btn_row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding-bottom: 30rpx; |
||||
|
.btn { |
||||
|
width: 47%; |
||||
|
height: 72rpx; |
||||
|
background: #1989FA; |
||||
|
border-radius: 8rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
line-height: 72rpx; |
||||
|
|
||||
|
&.border { |
||||
|
background: rgba(25, 137, 250, 0.1); |
||||
|
border: 2rpx solid $themC; |
||||
|
color: $themC; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.popupCon { |
||||
|
padding: 30rpx 50rpx; |
||||
|
|
||||
|
.h2 { |
||||
|
font-weight: 600; |
||||
|
color: #333333; |
||||
|
line-height: 70rpx; |
||||
|
font-size: 36rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
padding-bottom: 20rpx; |
||||
|
|
||||
|
.row { |
||||
|
padding: 22rpx 0; |
||||
|
display: flex; |
||||
|
font-size: 28rpx; |
||||
|
align-items: center; |
||||
|
|
||||
|
.lab { |
||||
|
width: 180rpx; |
||||
|
color: #686B73; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.val { |
||||
|
flex: 1; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,125 @@ |
|||||
|
<template> |
||||
|
<view class="pageBgImg"> |
||||
|
<topNavbar title="实操训练预约"></topNavbar> |
||||
|
<view class="pad"> |
||||
|
<view class="top_row"> |
||||
|
<view class="step_row"> |
||||
|
<view class="dian" @click="changeStep(1)"> |
||||
|
<view class="num" :class="{active: currentStep==1}">1</view> |
||||
|
</view> |
||||
|
<view class="line"></view> |
||||
|
<view class="dian" @click="changeStep(2)"> |
||||
|
<view class="num" :class="{active: currentStep==2}">2</view> |
||||
|
</view> |
||||
|
<view class="line"></view> |
||||
|
<view class="dian" @click="changeStep(3)"> |
||||
|
<view class="num" :class="{active: currentStep==3}">3</view> |
||||
|
</view> |
||||
|
<view class="line"></view> |
||||
|
<view class="dian" @click="changeStep(4)"> |
||||
|
<view class="num" :class="{active: currentStep==4}">4</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="step_text"> |
||||
|
<view class="txt">选择科目</view> |
||||
|
<view class="txt">选择场地</view> |
||||
|
<view class="txt">选择车辆</view> |
||||
|
<view class="txt">预约时间</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<step1 v-if="currentStep==1" @changeStep="changeStep"></step1> |
||||
|
<step2 v-if="currentStep==2" @changeStep="changeStep"></step2> |
||||
|
<step3 v-if="currentStep==3" @changeStep="changeStep"></step3> |
||||
|
<step4 v-if="currentStep==4" @changeStep="changeStep"></step4> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import step1 from './comp/step1' |
||||
|
import step2 from './comp/step2' |
||||
|
import step3 from './comp/step3' |
||||
|
import step4 from './comp/step4' |
||||
|
export default { |
||||
|
components: { step1, step2, step3, step4 }, |
||||
|
data() { |
||||
|
return { |
||||
|
currentStep: 1 |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
changeStep(num) { |
||||
|
this.currentStep = num |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.top_row { |
||||
|
width: 100%; |
||||
|
padding-bottom: 36rpx; |
||||
|
.step_row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
width: 100%; |
||||
|
padding: 0 32rpx; |
||||
|
.dian { |
||||
|
width: 180rpx; |
||||
|
height: 100rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
position: relative; |
||||
|
// background: red; |
||||
|
} |
||||
|
.num { |
||||
|
width: 46rpx; |
||||
|
height: 46rpx; |
||||
|
background: #D1E7FE; |
||||
|
line-height: 46rpx; |
||||
|
border-radius: 50%; |
||||
|
text-align: center; |
||||
|
color: $themC; |
||||
|
font-size: 24rpx; |
||||
|
position: absolute; |
||||
|
z-index: 9; |
||||
|
&.active { |
||||
|
border:2rpx solid $themC; |
||||
|
&::before { |
||||
|
content: ''; |
||||
|
width: 66rpx; |
||||
|
height: 66rpx; |
||||
|
border-radius: 50%; |
||||
|
position: absolute; |
||||
|
z-index: -1; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%,-50%); |
||||
|
background: rgba(255,255,255,0.6); |
||||
|
filter: blur(6rpx); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.line { |
||||
|
width: 60rpx; |
||||
|
height: 4rpx; |
||||
|
background: rgba(255,255,255,0.4); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.step_text { |
||||
|
display: flex; |
||||
|
.txt { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,222 @@ |
|||||
|
<template> |
||||
|
<view class="step1"> |
||||
|
<view class="card"> |
||||
|
<view class="dateBox"> |
||||
|
<view class="month-row"> |
||||
|
<view class="month">2032.08</view> |
||||
|
<view class="arrow"> |
||||
|
<u-icon name="arrow-down" :size="12" :color="'#1989FA'"></u-icon> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="date_row"> |
||||
|
<view class="icon left"> |
||||
|
<u-icon name="arrow-left" :size="12" :color="'#fff'"></u-icon> |
||||
|
</view> |
||||
|
<view class="dateArr"> |
||||
|
<view class="date" v-for="(item,index) in dateArr" :key="index" :class="{active: index==1}"> |
||||
|
<view class="week">{{ item.week }}</view> |
||||
|
<view class="num">{{ item.num }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="icon right"> |
||||
|
<u-icon name="arrow-right" :size="12" :color="'#fff'"></u-icon> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="card"> |
||||
|
<view class="timeCon"> |
||||
|
<view class="h2">上午</view> |
||||
|
<view class="time_box"> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">已过期</view> |
||||
|
<view class="time">06:00-07:00</view> |
||||
|
</view> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">已约满</view> |
||||
|
<view class="time">06:00-07:00</view> |
||||
|
</view> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">可预约</view> |
||||
|
<view class="time">06:00-07:00</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="h2">下午</view> |
||||
|
<view class="time_box"> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">已过期</view> |
||||
|
<view class="time">06:00-07:00</view> |
||||
|
</view> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">已约满</view> |
||||
|
<view class="time">06:00-07:00</view> |
||||
|
</view> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">可预约</view> |
||||
|
<view class="time">06:00-07:00</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="btn" @click="changeStep(2)">下一步</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
dateArr: [ |
||||
|
{week: '一', num: '08'}, |
||||
|
{week: '二', num: '09'}, |
||||
|
{week: '三', num: '10'}, |
||||
|
{week: '四', num: '11'}, |
||||
|
{week: '五', num: '12'}, |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
changeStep(val) { |
||||
|
this.$emit('changeStep', val) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.card { |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
.dateBox { |
||||
|
padding: 36rpx 0 40rpx 0; |
||||
|
.month-row { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin-bottom: 36rpx; |
||||
|
.month { |
||||
|
font-size: 32rpx; |
||||
|
color: $themC; |
||||
|
} |
||||
|
|
||||
|
.arrow { |
||||
|
margin-left: 6rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.date_row { |
||||
|
width: 100%; |
||||
|
height: 100rpx; |
||||
|
position: relative; |
||||
|
.icon { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
background: rgba(51,51,51,0.18); |
||||
|
backdrop-filter: blur(4rpx); |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
border-radius: 50%; |
||||
|
&.left { |
||||
|
left: 16rpx; |
||||
|
} |
||||
|
&.right { |
||||
|
right: 16rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.dateArr { |
||||
|
display: flex; |
||||
|
padding: 0 70rpx; |
||||
|
justify-content: space-between; |
||||
|
.date { |
||||
|
width: 74rpx; |
||||
|
height: 100rpx; |
||||
|
border-radius: 16rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
&.active { |
||||
|
background: rgba(25,137,250,0.1); |
||||
|
border: 2rpx solid #1989FA; |
||||
|
color: $themC; |
||||
|
} |
||||
|
.week { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.num { |
||||
|
margin-top: 4rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.card { |
||||
|
.timeCon { |
||||
|
padding: 0 24rpx 40rpx 24rpx; |
||||
|
} |
||||
|
.h2 { |
||||
|
line-height: 90rpx; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.time_box { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: space-between; |
||||
|
.time_item { |
||||
|
width: 30%; |
||||
|
height: 120rpx; |
||||
|
background: #F8F8F8; |
||||
|
border-radius: 12rpx; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
border-radius: 12rpx; |
||||
|
color: #333; |
||||
|
&.active { |
||||
|
background: rgba(25,137,250,0.1); |
||||
|
border: 2rpx solid #1989FA; |
||||
|
color: $themC; |
||||
|
} |
||||
|
&.disable { |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
.lab { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.time { |
||||
|
font-size: 24rpx; |
||||
|
margin-top: 4rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
width: 47%; |
||||
|
height: 72rpx; |
||||
|
background: #1989FA; |
||||
|
border-radius: 8rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
line-height: 72rpx; |
||||
|
margin: 108rpx auto 50rpx auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,96 @@ |
|||||
|
<template> |
||||
|
<view class="step2"> |
||||
|
<view class="card" v-for="(item,index) in 10" :key="index" :class="{active: index==2}"> |
||||
|
<view class="leftTxt"> |
||||
|
<view class="name oneRowText">某某模拟驾驶馆</view> |
||||
|
<view class="adr">江西省江西市江西区尚坤丁兰国际1190</view> |
||||
|
</view> |
||||
|
<view class="icon"> |
||||
|
<image src="@/static/images/index/telephone.png" mode=""></image> |
||||
|
<!-- <image src="@/static/images/index/telephone_cli.png" mode=""></image> --> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="poz_btn"> |
||||
|
<view class="btn_row" > |
||||
|
<view class="border btn" @click="changeStep(1)">返回上一步</view> |
||||
|
<view class="btn" @click="changeStep(3)">下一步</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
methods: { |
||||
|
changeStep(val) { |
||||
|
this.$emit('changeStep', val) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.poz_btn { |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
padding: 12rpx 32rpx; |
||||
|
width: 100%; |
||||
|
background: #F6F6F6; |
||||
|
} |
||||
|
.step2 { |
||||
|
width: 100%; |
||||
|
padding-bottom: 120rpx; |
||||
|
.card { |
||||
|
padding: 28rpx 36rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 20rpx; |
||||
|
&.active { |
||||
|
background: rgba(25,137,250,0.1); |
||||
|
border: 2rpx solid #1989FA; |
||||
|
color: $themC; |
||||
|
} |
||||
|
.leftTxt { |
||||
|
width: 0; |
||||
|
flex: 1; |
||||
|
.name { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.adr { |
||||
|
font-size: 24rpx; |
||||
|
margin-top: 8rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.icon { |
||||
|
width: 72rpx; |
||||
|
height: 72rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.btn_row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding-bottom: 20rpx; |
||||
|
.btn { |
||||
|
width: 47%; |
||||
|
height: 72rpx; |
||||
|
background: #1989FA; |
||||
|
border-radius: 8rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
line-height: 72rpx; |
||||
|
|
||||
|
&.border { |
||||
|
background: rgba(25, 137, 250, 0.1); |
||||
|
border: 2rpx solid $themC; |
||||
|
color: $themC; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,161 @@ |
|||||
|
<template> |
||||
|
<view class="step3"> |
||||
|
<view class="card"> |
||||
|
<view class="list"> |
||||
|
<view class="listItem" v-for="(item,index) in list" :key="index" :class="{active: index==1}"> |
||||
|
{{ item.text }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="btn_row" style="margin-top: 108rpx;"> |
||||
|
<view class="border btn" @click="changeStep(2)">返回上一步</view> |
||||
|
<view class="btn" @click="show=true">确认</view> |
||||
|
</view> |
||||
|
|
||||
|
<u-popup :show="show" mode="center" :round="8"> |
||||
|
<view class="popupCon"> |
||||
|
<view class="h2">再次确认预约信息</view> |
||||
|
<view class="content"> |
||||
|
<view class="row"> |
||||
|
<view class="lab">预约类型</view> |
||||
|
<view class="val">模拟器训练预约</view> |
||||
|
</view> |
||||
|
<view class="row"> |
||||
|
<view class="lab">预约时间</view> |
||||
|
<view class="val">2023/08/08 08:00—9:00</view> |
||||
|
</view> |
||||
|
<view class="row"> |
||||
|
<view class="lab">模拟驾驶馆</view> |
||||
|
<view class="val">某某模拟驾驶馆</view> |
||||
|
</view> |
||||
|
<view class="row"> |
||||
|
<view class="lab">预约模拟器</view> |
||||
|
<view class="val">00002</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="btn_row"> |
||||
|
<view class="border btn" @click="show = false">返回修改</view> |
||||
|
<view class="btn">确认</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</u-popup> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
list: [{ |
||||
|
text: '00001', |
||||
|
id: 1 |
||||
|
}, |
||||
|
{ |
||||
|
text: '00002', |
||||
|
id: 1 |
||||
|
}, |
||||
|
{ |
||||
|
text: '00003', |
||||
|
id: 1 |
||||
|
}, |
||||
|
], |
||||
|
show: false |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
changeStep(val) { |
||||
|
this.$emit('changeStep', val) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.card { |
||||
|
padding: 28rpx 24rpx; |
||||
|
} |
||||
|
|
||||
|
.list { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.listItem { |
||||
|
width: 32.4%; |
||||
|
height: 120rpx; |
||||
|
background: #F8F8F8; |
||||
|
border-radius: 12rpx; |
||||
|
font-weight: 500; |
||||
|
text-align: center; |
||||
|
line-height: 120rpx; |
||||
|
|
||||
|
&.active { |
||||
|
width: 200rpx; |
||||
|
height: 120rpx; |
||||
|
background: rgba(25, 137, 250, 0.1); |
||||
|
border-radius: 12rpx; |
||||
|
border: 2rpx solid $themC; |
||||
|
color: $themC; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.popupCon { |
||||
|
padding: 30rpx 50rpx; |
||||
|
|
||||
|
.h2 { |
||||
|
font-weight: 600; |
||||
|
color: #333333; |
||||
|
line-height: 70rpx; |
||||
|
font-size: 36rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
padding-bottom: 20rpx; |
||||
|
|
||||
|
.row { |
||||
|
padding: 22rpx 0; |
||||
|
display: flex; |
||||
|
font-size: 28rpx; |
||||
|
align-items: center; |
||||
|
|
||||
|
.lab { |
||||
|
width: 180rpx; |
||||
|
color: #686B73; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.val { |
||||
|
flex: 1; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
.btn_row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.btn { |
||||
|
width: 47%; |
||||
|
height: 72rpx; |
||||
|
background: #1989FA; |
||||
|
border-radius: 8rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
line-height: 72rpx; |
||||
|
|
||||
|
&.border { |
||||
|
background: rgba(25, 137, 250, 0.1); |
||||
|
border: 2rpx solid $themC; |
||||
|
color: $themC; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,118 @@ |
|||||
|
<template> |
||||
|
<view class="pageBgImg"> |
||||
|
<topNavbar title="模拟器训练预约"></topNavbar> |
||||
|
<view class="pad"> |
||||
|
<view class="top_row"> |
||||
|
<view class="step_row"> |
||||
|
<view class="dian" @click="changeStep(1)"> |
||||
|
<view class="num" :class="{active: currentStep==1}">1</view> |
||||
|
</view> |
||||
|
<view class="line"></view> |
||||
|
<view class="dian" @click="changeStep(2)"> |
||||
|
<view class="num" :class="{active: currentStep==2}">2</view> |
||||
|
</view> |
||||
|
<view class="line"></view> |
||||
|
<view class="dian" @click="changeStep(3)"> |
||||
|
<view class="num" :class="{active: currentStep==3}">3</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="step_text"> |
||||
|
<view class="txt">预约时间</view> |
||||
|
<view class="txt">选择模拟驾驶馆</view> |
||||
|
<view class="txt">选择模拟器</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<step1 v-if="currentStep==1" @changeStep="changeStep"></step1> |
||||
|
<step2 v-if="currentStep==2" @changeStep="changeStep"></step2> |
||||
|
<step3 v-if="currentStep==3" @changeStep="changeStep"></step3> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import step1 from './comp/step1' |
||||
|
import step2 from './comp/step2' |
||||
|
import step3 from './comp/step3' |
||||
|
export default { |
||||
|
components: { step1, step2, step3 }, |
||||
|
data() { |
||||
|
return { |
||||
|
currentStep: 1 |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
changeStep(num) { |
||||
|
this.currentStep = num |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.top_row { |
||||
|
width: 100%; |
||||
|
padding-bottom: 36rpx; |
||||
|
.step_row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
width: 100%; |
||||
|
padding: 0 32rpx; |
||||
|
.dian { |
||||
|
width: 180rpx; |
||||
|
height: 100rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
position: relative; |
||||
|
// background: red; |
||||
|
} |
||||
|
.num { |
||||
|
width: 46rpx; |
||||
|
height: 46rpx; |
||||
|
background: #D1E7FE; |
||||
|
line-height: 46rpx; |
||||
|
border-radius: 50%; |
||||
|
text-align: center; |
||||
|
color: $themC; |
||||
|
font-size: 24rpx; |
||||
|
position: absolute; |
||||
|
z-index: 9; |
||||
|
&.active { |
||||
|
border:2rpx solid $themC; |
||||
|
&::before { |
||||
|
content: ''; |
||||
|
width: 66rpx; |
||||
|
height: 66rpx; |
||||
|
border-radius: 50%; |
||||
|
position: absolute; |
||||
|
z-index: -1; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%,-50%); |
||||
|
background: rgba(255,255,255,0.6); |
||||
|
filter: blur(6rpx); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.line { |
||||
|
width: 60rpx; |
||||
|
height: 4rpx; |
||||
|
background: rgba(255,255,255,0.4); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.step_text { |
||||
|
display: flex; |
||||
|
.txt { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,74 @@ |
|||||
|
<template> |
||||
|
<view class="pageBgImg"> |
||||
|
<topNavbar title="人个中心"></topNavbar> |
||||
|
<view class="pad"> |
||||
|
<view class="card"> |
||||
|
<view class="row"> |
||||
|
<view class="lab">手机号</view> |
||||
|
<view class="val">18267103167</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="card"> |
||||
|
<view class="row border"> |
||||
|
<view class="lab">我的驾校</view> |
||||
|
<view class="val">江西海正驾校</view> |
||||
|
</view> |
||||
|
<view class="row border"> |
||||
|
<view class="lab">我的教练</view> |
||||
|
<view class="val">xxx</view> |
||||
|
</view> |
||||
|
<view class="row border"> |
||||
|
<view class="lab">所学车型</view> |
||||
|
<view class="val">xxx</view> |
||||
|
</view> |
||||
|
<view class="row"> |
||||
|
<view class="lab">报名时间</view> |
||||
|
<view class="val">xxx</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="card"> |
||||
|
<view class="row"> |
||||
|
<view class="lab">实名认证</view> |
||||
|
<view class="val">已完成</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="card"> |
||||
|
<view class="row"> |
||||
|
<view class="lab">拍照&体检&面签</view> |
||||
|
<view class="val">已完成</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="logout">退出登录</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.card { |
||||
|
padding: 6rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
height: 98rpx; |
||||
|
font-size: 28rpx; |
||||
|
padding: 0 30rpx; |
||||
|
&.border { |
||||
|
border-bottom: 2rpx solid #E8E9EC; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
After Width: 72 | Height: 72 | Size: 1.8 KiB |
|
After Width: 72 | Height: 72 | Size: 1.9 KiB |
|
After Width: 40 | Height: 40 | Size: 1.3 KiB |
|
After Width: 72 | Height: 72 | Size: 1.6 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue