You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
347 lines
7.2 KiB
347 lines
7.2 KiB
<template>
|
|
<view class="content pageBg">
|
|
<!-- 学员名字 -->
|
|
<view class="top_row flex-b">
|
|
<view class="flex">
|
|
<view class="userName">Hi，大乔</view>
|
|
<view class="arrowIcon">
|
|
<image src="../../../static/images/userCenter/ic_gengduo.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="scanCode">
|
|
<image src="../../../static/images/userCenter/ic_erweima.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<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="ul">
|
|
<view class="li" v-for="(item,index) in myPageEntry" :key="index">
|
|
<view class="icon">
|
|
<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>
|
|
</view>
|
|
<!-- <UserTab selectedIndex ='2'></UserTab> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
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() {
|
|
console.log('我的页面')
|
|
},
|
|
onShow() {
|
|
// uni.hideTabBar();
|
|
},
|
|
methods: {
|
|
goPage() {}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
background: url('../../../static/images/bigImg/topbg.png') #F6F6F6 no-repeat;
|
|
background-size: 100% 362rpx;
|
|
.top_row {
|
|
width: 100%;
|
|
padding: 180rpx 62rpx 0 32rpx;
|
|
.flex {
|
|
|
|
.userName {
|
|
font-size: 48rpx;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.arrowIcon {
|
|
margin-left: 24rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.scanCode {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
padding: 38rpx 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
.li {
|
|
width: 25%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 24rpx 0;
|
|
.icon {
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
}
|
|
|
|
.text {
|
|
font-size: 28rpx;
|
|
margin-top: 16rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.business {
|
|
padding: 32rpx 0;
|
|
.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 {
|
|
width: 100%;
|
|
height: 390rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 38rpx 0 0 0;
|
|
.item {
|
|
width: 33.33%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: 162rpx;
|
|
.icon {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
background: #F6F7F8;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
margin-top: 16rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|