|
|
@ -5,35 +5,58 @@ |
|
|
<view class="flex"> |
|
|
<view class="flex"> |
|
|
<view class="userName">Hi，大乔</view> |
|
|
<view class="userName">Hi，大乔</view> |
|
|
<view class="arrowIcon"> |
|
|
<view class="arrowIcon"> |
|
|
<image src="../../../static/images/userCenter/loginTopBg.png" mode=""></image> |
|
|
|
|
|
|
|
|
<image src="../../../static/images/userCenter/ic_gengduo.png" mode=""></image> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="scanCode"> |
|
|
<view class="scanCode"> |
|
|
<image src="../../../static/images/userCenter/loginTopBg.png" mode=""></image> |
|
|
|
|
|
|
|
|
<image src="../../../static/images/userCenter/ic_erweima.png" mode=""></image> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<!-- 学车进度 --> |
|
|
|
|
|
<view class="userProgress"> |
|
|
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
<!-- 我的相关入口 --> |
|
|
|
|
|
<view class="ul"> |
|
|
|
|
|
<view class="li"> |
|
|
|
|
|
<view class="icon"> |
|
|
|
|
|
<image src="../../../static/logo.png" mode=""></image> |
|
|
|
|
|
|
|
|
<view class="pad"> |
|
|
|
|
|
<!-- 学车进度 --> |
|
|
|
|
|
<view class="userProgress"> |
|
|
|
|
|
<view class="progItme first flex"> |
|
|
|
|
|
<view class="dianBox"> |
|
|
|
|
|
<view class="dian"></view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="rightCon">报名成功</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="progItme flex"> |
|
|
|
|
|
<view class="dianBox"> |
|
|
|
|
|
<view class="dian active"></view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="line"></view> |
|
|
|
|
|
<view class="rightCon"> |
|
|
|
|
|
<view class="day">22天</view> |
|
|
|
|
|
<view class="flex-b"> |
|
|
|
|
|
<view class="flex"> |
|
|
|
|
|
<view class="text">科目一考试通过</view> |
|
|
|
|
|
<view class="tag">当前进度</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="progBtn">进度查询</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="text">我的预约</view> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
<!-- 业务办理 --> |
|
|
|
|
|
<view class="business "> |
|
|
|
|
|
<view class="h1">业务办理</view> |
|
|
|
|
|
<view class="card"> |
|
|
|
|
|
<view class="item"> |
|
|
|
|
|
|
|
|
<!-- 我的相关入口 --> |
|
|
|
|
|
<view class="ul"> |
|
|
|
|
|
<view class="li" v-for="(item,index) in myPageEntry" :key="index"> |
|
|
<view class="icon"> |
|
|
<view class="icon"> |
|
|
<image src="../../../static/logo.png" mode=""></image> |
|
|
|
|
|
|
|
|
<image :src="item.icon" mode=""></image> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="text">{{ item.text }}</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<!-- 业务办理 --> |
|
|
|
|
|
<view class="business "> |
|
|
|
|
|
<view class="h1">业务办理</view> |
|
|
|
|
|
<view class="card"> |
|
|
|
|
|
<view class="item" v-for="(item,index) in businessEntry" :key="index"> |
|
|
|
|
|
<view class="icon"> |
|
|
|
|
|
<image :src="item.icon" mode=""></image> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="text">{{ item.text }}</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="text">学时查询</view> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
@ -45,6 +68,54 @@ |
|
|
export default { |
|
|
export default { |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
|
|
|
myPageEntry: [ |
|
|
|
|
|
{ |
|
|
|
|
|
text: '我的预约', |
|
|
|
|
|
icon: require('../../../static/images/userCenter/ic_yuyue.png'), |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
text: '我的订单', |
|
|
|
|
|
icon: require('../../../static/images/userCenter/ic_dingdan.png'), |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
text: '学车数据', |
|
|
|
|
|
icon: require('../../../static/images/userCenter/ic_shuju.png'), |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
text: '我的合同', |
|
|
|
|
|
icon: require('../../../static/images/userCenter/ic_hetong.png'), |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
text: '我的评价', |
|
|
|
|
|
icon: require('../../../static/images/userCenter/ic_pingjia.png'), |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
text: '我的收藏', |
|
|
|
|
|
icon: require('../../../static/images/userCenter/ic_shoucang.png'), |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
text: '本地生活', |
|
|
|
|
|
icon: require('../../../static/images/userCenter/ic_shenghuo.png'), |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
businessEntry: [ |
|
|
|
|
|
{ |
|
|
|
|
|
text: '学时查询', |
|
|
|
|
|
icon: require('../../../static/images/userCenter/ic_chaxun.png'), |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
text: '同城转校', |
|
|
|
|
|
icon: require('../../../static/images/userCenter/tgzhuanxiao.png'), |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
text: '车型变更', |
|
|
|
|
|
icon: require('../../../static/images/userCenter/biangen.png'), |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
text: '申请退学', |
|
|
|
|
|
icon: require('../../../static/images/userCenter/shenqingtuixue.png'), |
|
|
|
|
|
}, |
|
|
|
|
|
] |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
onLoad() { |
|
|
onLoad() { |
|
|
@ -61,60 +132,213 @@ |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
.content { |
|
|
.content { |
|
|
width: 100vw; |
|
|
|
|
|
min-height: 100vh; |
|
|
|
|
|
background: url('../../../static/images/bigImg/topbg.png') no-repeat; |
|
|
|
|
|
background-size: 100% 362rpx; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.content { |
|
|
.content { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
|
|
|
width: 100vw; |
|
|
|
|
|
min-height: 100vh; |
|
|
|
|
|
background: url('../../../static/images/bigImg/topbg.png') #F6F6F6 no-repeat; |
|
|
|
|
|
background-size: 100% 362rpx; |
|
|
.top_row { |
|
|
.top_row { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
padding: 180rpx 62rpx 0 32rpx; |
|
|
.flex { |
|
|
.flex { |
|
|
|
|
|
|
|
|
.userName { |
|
|
.userName { |
|
|
|
|
|
|
|
|
|
|
|
font-size: 48rpx; |
|
|
|
|
|
font-weight: 600; |
|
|
|
|
|
color: #FFFFFF; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.arrowIcon { |
|
|
.arrowIcon { |
|
|
|
|
|
|
|
|
|
|
|
margin-left: 24rpx; |
|
|
|
|
|
width: 40rpx; |
|
|
|
|
|
height: 40rpx; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.scanCode { |
|
|
.scanCode { |
|
|
|
|
|
|
|
|
|
|
|
width: 40rpx; |
|
|
|
|
|
height: 40rpx; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.userProgress { |
|
|
.userProgress { |
|
|
|
|
|
background: rgba(255,255,255,0.65); |
|
|
|
|
|
box-shadow: 2px 2px 8px 0px #C3D6E9, inset 0px 2px 4px 0px rgba(255,255,255,0.5); |
|
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
|
padding: 22rpx 22rpx 22rpx 32rpx; |
|
|
|
|
|
margin-top: 32rpx; |
|
|
|
|
|
.progItme { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
.dianBox { |
|
|
|
|
|
width: 32rpx; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
left: 0rpx; |
|
|
|
|
|
bottom: 14rpx; |
|
|
|
|
|
z-index: 4; |
|
|
|
|
|
.dian { |
|
|
|
|
|
width: 12rpx; |
|
|
|
|
|
height: 12rpx; |
|
|
|
|
|
background: #1989FA; |
|
|
|
|
|
border-radius: 50%; |
|
|
|
|
|
&.active { |
|
|
|
|
|
width: 32rpx; |
|
|
|
|
|
height: 32rpx; |
|
|
|
|
|
background: rgba(25,137,250,0.11); |
|
|
|
|
|
position: relative; |
|
|
|
|
|
&::before { |
|
|
|
|
|
content: '' ; |
|
|
|
|
|
width: 18rpx; |
|
|
|
|
|
height: 18rpx; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
border-radius: 50%; |
|
|
|
|
|
top: 50%; |
|
|
|
|
|
left: 50%; |
|
|
|
|
|
background: #1989FA; |
|
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.line { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
left: 14rpx; |
|
|
|
|
|
bottom: 30rpx; |
|
|
|
|
|
width: 0rpx; |
|
|
|
|
|
height: 90rpx; |
|
|
|
|
|
border: 1rpx dashed rgba(25,137,250,0.7); |
|
|
|
|
|
z-index: 1; |
|
|
|
|
|
} |
|
|
|
|
|
.rightCon { |
|
|
|
|
|
flex: 1; |
|
|
|
|
|
padding: 0 0 0 54rpx; |
|
|
|
|
|
.day { |
|
|
|
|
|
font-size: 20rpx; |
|
|
|
|
|
color: $themC; |
|
|
|
|
|
margin: 12rpx 0 0rpx 0; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.flex-b { |
|
|
|
|
|
|
|
|
|
|
|
.flex { |
|
|
|
|
|
.text { |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
color: #333; |
|
|
|
|
|
font-weight: 600; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tag { |
|
|
|
|
|
margin-left: 10rpx; |
|
|
|
|
|
width: 110rpx; |
|
|
|
|
|
height: 44rpx; |
|
|
|
|
|
background: #FAF0E4; |
|
|
|
|
|
border-radius: 8rpx; |
|
|
|
|
|
font-size: 20rpx; |
|
|
|
|
|
color: #FA7919; |
|
|
|
|
|
line-height: 44rpx; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.progBtn { |
|
|
|
|
|
width: 130rpx; |
|
|
|
|
|
height: 60rpx; |
|
|
|
|
|
background: rgba(25,137,250,0.1); |
|
|
|
|
|
border-radius: 8rpx; |
|
|
|
|
|
border: 2rpx solid #1989FA; |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
color: $themC; |
|
|
|
|
|
line-height: 60rpx; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.ul { |
|
|
.ul { |
|
|
|
|
|
padding: 38rpx 0; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
width: 100%; |
|
|
.li { |
|
|
.li { |
|
|
|
|
|
width: 25%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
margin: 24rpx 0; |
|
|
.icon { |
|
|
.icon { |
|
|
|
|
|
|
|
|
|
|
|
width: 68rpx; |
|
|
|
|
|
height: 68rpx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.text { |
|
|
.text { |
|
|
|
|
|
|
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
margin-top: 16rpx; |
|
|
|
|
|
color: #333; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.business { |
|
|
.business { |
|
|
|
|
|
padding: 32rpx 0; |
|
|
.h1 { |
|
|
.h1 { |
|
|
|
|
|
|
|
|
|
|
|
font-size: 32rpx; |
|
|
|
|
|
color: #333; |
|
|
|
|
|
font-weight: 500; |
|
|
|
|
|
position: relative; |
|
|
|
|
|
padding: 0 0 0 32rpx; |
|
|
|
|
|
margin-bottom: 24rpx; |
|
|
|
|
|
&::before { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
content: ''; |
|
|
|
|
|
width: 8rpx; |
|
|
|
|
|
height: 32rpx; |
|
|
|
|
|
background: #1F6EFA; |
|
|
|
|
|
border-radius: 4rpx; |
|
|
|
|
|
top: 8rpx; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.card { |
|
|
.card { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 390rpx; |
|
|
|
|
|
background: #FFFFFF; |
|
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
padding: 38rpx 0 0 0; |
|
|
.item { |
|
|
.item { |
|
|
|
|
|
width: 33.33%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: column; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
height: 162rpx; |
|
|
.icon { |
|
|
.icon { |
|
|
|
|
|
|
|
|
|
|
|
width: 72rpx; |
|
|
|
|
|
height: 72rpx; |
|
|
|
|
|
background: #F6F7F8; |
|
|
|
|
|
border-radius: 50%; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
image { |
|
|
|
|
|
width: 48rpx; |
|
|
|
|
|
height: 48rpx; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.text { |
|
|
.text { |
|
|
|
|
|
|
|
|
|
|
|
margin-top: 16rpx; |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
color: #333; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
