|
|
<template> <view class="pageBgImg"> <!-- 学员名字 --> <view class="top_row flex-b" @click="$goPage('/pages/mineEntry/personaInfo/personaInfo')"> <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" @click="$goPage('/pages/mineEntry/carLearProgress/carLearProgress')">进度查询</view> </view> </view> </view> </view> <!-- 我的相关入口 --> <view class="ul"> <view class="li" v-for="(item,index) in myPageEntry" :key="index" @click="$goPage(item.url)"> <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" @click="$goPage(item.url)"> <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'), url: '/pages/mineEntry/myAppointment/myAppointment' }, { text: '我的订单', icon: require('../../../static/images/userCenter/ic_dingdan.png'), url: '/pages/mineEntry/myOrder/myOrder' }, { text: '学车数据', icon: require('../../../static/images/userCenter/ic_shuju.png'), url: '/pages/mineEntry/carData/carData' }, { text: '我的合同', icon: require('../../../static/images/userCenter/ic_hetong.png'), url: '/pages/mineEntry/myContract/myContract' }, { text: '我的评价', icon: require('../../../static/images/userCenter/ic_pingjia.png'), url: '/pages/mineEntry/myEvaluate/myEvaluate' }, { text: '我的收藏', icon: require('../../../static/images/userCenter/ic_shoucang.png'), url: '/pages/mineEntry/myCollect/myCollect' }, { text: '本地生活', icon: require('../../../static/images/userCenter/ic_shenghuo.png'), }, ], businessEntry: [ { text: '学时查询', icon: require('../../../static/images/userCenter/ic_chaxun.png'), url: '/pages/mineEntry/carLearnHours/carLearnHours' }, { text: '同城转校', icon: require('../../../static/images/userCenter/tgzhuanxiao.png'), url: '/pages/mineEntry/schoolTransfer/schoolTransfer' }, { text: '车型变更', icon: require('../../../static/images/userCenter/biangen.png'), url: '/pages/mineEntry/modelChange/modelChange' }, { text: '申请退学', icon: require('../../../static/images/userCenter/shenqingtuixue.png'), url: '/pages/mineEntry/refund/refund' }, ] } }, onLoad() { console.log('我的页面') }, onShow() { // uni.hideTabBar();
}, methods: { goPage() {} } }</script>
<style lang="scss" scoped> .pageBgImg { .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 { margin-bottom: 24rpx; } .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>
|
