-
1pages.json
-
4pages/indexEntry/findShcool/shcoolDetail/shcoolDetail.vue
-
134pages/mineEntry/carLearProgress/carLearProgress.vue
-
7pages/tabbar/index/comp/informaItem.vue
-
21pages/tabbar/index/index.vue
-
63pages/tabbar/learnCar/comp/comp.scss
-
41pages/tabbar/learnCar/comp/subject0.vue
-
150pages/tabbar/learnCar/comp/topInfo.vue
-
172pages/tabbar/learnCar/index - 副本.vue
-
167pages/tabbar/learnCar/index.vue
-
368pages/tabbar/mine/index - 副本.vue
-
125pages/tabbar/mine/index.scss
-
385pages/tabbar/mine/index.vue
-
0static/images/icon/arrowRightfff.png
-
0static/images/icon/箭头 拷贝 2(1).png
-
0static/images/mineIcon/sanCode.png
@ -0,0 +1,150 @@ |
|||||
|
<template> |
||||
|
<view class="topInfo card"> |
||||
|
<view class="user_row"> |
||||
|
<view class="avatar"> |
||||
|
<image src="@/static/images/mineIcon/emtryIcon (1).png" mode=""></image> |
||||
|
</view> |
||||
|
<view class="rightTxt"> |
||||
|
<view class="name">JOE宝宝</view> |
||||
|
<view class="btn_row"> |
||||
|
<view class="txt">科目四</view> |
||||
|
<u-icon name="arrow-down-fill" color="#fff" size="10"></u-icon> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="bg"> |
||||
|
<view class="row"> |
||||
|
<view class="timeItem"> |
||||
|
<view class="flex"> |
||||
|
<view class="time">120</view> |
||||
|
<view class="uni">分钟</view> |
||||
|
</view> |
||||
|
<view class="lab">已完成学时</view> |
||||
|
</view> |
||||
|
<view class="timeItem"> |
||||
|
<view class="flex"> |
||||
|
<view class="time">120</view> |
||||
|
<view class="uni">分钟</view> |
||||
|
</view> |
||||
|
<view class="lab">应完成学时</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="row"> |
||||
|
<view class="timeItem"> |
||||
|
<view class="flex "> |
||||
|
<view class="time">120</view> |
||||
|
<view class="uni">分钟</view> |
||||
|
</view> |
||||
|
<view class="lab">已完成学时</view> |
||||
|
</view> |
||||
|
<view class="timeItem"> |
||||
|
<view class="flex "> |
||||
|
<view class="time ">120</view> |
||||
|
<view class="uni">分钟</view> |
||||
|
</view> |
||||
|
<view class="lab">应完成学时</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.topInfo.card { |
||||
|
padding: 0rpx 20rpx 20rpx 20rpx; |
||||
|
.user_row { |
||||
|
display: flex; |
||||
|
.avatar { |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
|
border-radius: 50%; |
||||
|
overflow: hidden; |
||||
|
// transform: translateY(-50rpx); |
||||
|
margin-top: -36rpx; |
||||
|
background: #F6F7FA; |
||||
|
} |
||||
|
|
||||
|
.rightTxt { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
flex: 1; |
||||
|
width: 0; |
||||
|
padding: 0 0 0 20rpx; |
||||
|
.name { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.btn_row { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
background: $themC; |
||||
|
width: 150rpx; |
||||
|
height: 50rpx; |
||||
|
color: #fff; |
||||
|
border-radius: 10rpx; |
||||
|
font-size: 24rpx; |
||||
|
lighting-color: 50rpx; |
||||
|
.txt { |
||||
|
margin-right: 10rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bg { |
||||
|
background: #F6F7FA; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 20rpx; |
||||
|
margin-top: 30rpx; |
||||
|
.row { |
||||
|
border-top: 1rpx solid #EDEDED; |
||||
|
display: flex; |
||||
|
&:first-child { |
||||
|
border: none; |
||||
|
} |
||||
|
.timeItem { |
||||
|
border-left: 1px solid #EDEDED; |
||||
|
flex: 1; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
color: #999; |
||||
|
font-size: 24rpx; |
||||
|
padding: 20rpx 0; |
||||
|
&:first-child { |
||||
|
border: none; |
||||
|
} |
||||
|
.flex { |
||||
|
justify-content: center; |
||||
|
|
||||
|
.time { |
||||
|
font-size: 36rpx; |
||||
|
color: #333; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
.uni { |
||||
|
margin-top: -6rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.lab { |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,172 @@ |
|||||
|
<template> |
||||
|
<view class="content pageBgImg"> |
||||
|
|
||||
|
<view style="width: 100%;height: 40rpx;"></view> |
||||
|
<view class="status_bar"></view> |
||||
|
<view class="title">江西驾考公共服务平台</view> |
||||
|
<view class="navCard"> |
||||
|
<view class="nav_row"> |
||||
|
<view class="nav " v-for="(item,index) in navData" :key="index" :class="{active: item.id==currentNav}" @click="changeNav(item.id)">{{ item.text }}</view> |
||||
|
</view> |
||||
|
<view class="time_row"> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">应完成学时</view> |
||||
|
<view class="num">100分钟</view> |
||||
|
</view> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">已完成学时</view> |
||||
|
<view class="num">30分钟</view> |
||||
|
<view class="shareTime">*与科目一学时共享</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="subject3" v-if="currentNav==3"> |
||||
|
<view class="chain left"> |
||||
|
<image src="@/static/images/index/chain.png" mode=""></image> |
||||
|
</view> |
||||
|
<view class="chain right"> |
||||
|
<image src="@/static/images/index/chain.png" mode=""></image> |
||||
|
</view> |
||||
|
<view class="time_row "> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">应完成里程</view> |
||||
|
<view class="num">50km</view> |
||||
|
</view> |
||||
|
<view class="time_item"> |
||||
|
<view class="lab">已完成里程</view> |
||||
|
<view class="num">0km</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="haveToken" v-if="studentId"> |
||||
|
<subject0 v-show="currentNav==0"/> |
||||
|
<subject1 v-show="currentNav==1"/> |
||||
|
<subject2 v-show="currentNav==2"/> |
||||
|
<subject3 v-show="currentNav==3"/> |
||||
|
<subject4 v-show="currentNav==4"/> |
||||
|
</view> |
||||
|
<view class="noDate" v-else> |
||||
|
<nodata><text>暂无数据,您还未报名</text></nodata> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import subject0 from './comp/subject0' |
||||
|
import subject1 from './comp/subject1' |
||||
|
import subject2 from './comp/subject2' |
||||
|
import subject3 from './comp/subject3' |
||||
|
import subject4 from './comp/subject4' |
||||
|
export default { |
||||
|
components: { subject0, subject1, subject2, subject3, subject4 }, |
||||
|
data() { |
||||
|
return { |
||||
|
navData: [ |
||||
|
{text: '模拟器', id: 0}, |
||||
|
{text: '科目一', id: 1}, |
||||
|
{text: '科目二', id: 2}, |
||||
|
{text: '科目三', id: 3}, |
||||
|
{text: '科目四', id: 4}, |
||||
|
], |
||||
|
currentNav: 0 |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
}, |
||||
|
onShow() { |
||||
|
// console.log('没发生?') |
||||
|
// this.$store.dispatch('checkLogin') |
||||
|
}, |
||||
|
methods: { |
||||
|
changeNav(id) { |
||||
|
this.currentNav = id |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.content { |
||||
|
width: 100vw; |
||||
|
min-height: 100vh; |
||||
|
// background: url('../../../static/images/bigImg/topbg.png') #F6F6F6 no-repeat; |
||||
|
background-size: 100% 362rpx; |
||||
|
padding: 0 32rpx 32rpx 32rpx; |
||||
|
.title { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 600; |
||||
|
color: #fff; |
||||
|
padding: 10rpx 0 48rpx 0rpx; |
||||
|
} |
||||
|
.navCard { |
||||
|
.nav_row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
.nav { |
||||
|
width: 19.4%; |
||||
|
height: 86rpx; |
||||
|
background: rgba(255,255,255,0.4); |
||||
|
border-radius: 8rpx 8rpx 0px 0px; |
||||
|
font-size: 28rpx; |
||||
|
color: #fff; |
||||
|
line-height: 86rpx; |
||||
|
text-align: center; |
||||
|
&.active { |
||||
|
background: #FFFFFF; |
||||
|
color: $themC; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.subject3 { |
||||
|
padding-top: 32rpx; |
||||
|
position: relative; |
||||
|
.chain { |
||||
|
width: 28rpx; |
||||
|
height: 100rpx; |
||||
|
position: absolute; |
||||
|
top: -34rpx; |
||||
|
&.left { |
||||
|
left: 60rpx; |
||||
|
} |
||||
|
&.right { |
||||
|
right: 60rpx !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.time_row { |
||||
|
display: flex; |
||||
|
height: 240rpx; |
||||
|
padding: 32rpx; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
background: #fff; |
||||
|
border-radius: 0 0 8rpx 8rpx; |
||||
|
.time_item { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
position: relative; |
||||
|
.lab { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.num { |
||||
|
font-size: 40rpx; |
||||
|
font-weight: 600; |
||||
|
color: $themC; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
.shareTime { |
||||
|
font-size: 20rpx; |
||||
|
color: $themC; |
||||
|
position: absolute; |
||||
|
bottom: -40rpx; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
@ -1,172 +1,25 @@ |
|||||
<template> |
<template> |
||||
<view class="content pageBgImg"> |
|
||||
|
|
||||
<view style="width: 100%;height: 40rpx;"></view> |
|
||||
|
<view class="pageBgImg pad"> |
||||
<view class="status_bar"></view> |
<view class="status_bar"></view> |
||||
<view class="title">江西驾考公共服务平台</view> |
|
||||
<view class="navCard"> |
|
||||
<view class="nav_row"> |
|
||||
<view class="nav " v-for="(item,index) in navData" :key="index" :class="{active: item.id==currentNav}" @click="changeNav(item.id)">{{ item.text }}</view> |
|
||||
</view> |
|
||||
<view class="time_row"> |
|
||||
<view class="time_item"> |
|
||||
<view class="lab">应完成学时</view> |
|
||||
<view class="num">100分钟</view> |
|
||||
</view> |
|
||||
<view class="time_item"> |
|
||||
<view class="lab">已完成学时</view> |
|
||||
<view class="num">30分钟</view> |
|
||||
<view class="shareTime">*与科目一学时共享</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="subject3" v-if="currentNav==3"> |
|
||||
<view class="chain left"> |
|
||||
<image src="@/static/images/index/chain.png" mode=""></image> |
|
||||
</view> |
|
||||
<view class="chain right"> |
|
||||
<image src="@/static/images/index/chain.png" mode=""></image> |
|
||||
</view> |
|
||||
<view class="time_row "> |
|
||||
<view class="time_item"> |
|
||||
<view class="lab">应完成里程</view> |
|
||||
<view class="num">50km</view> |
|
||||
</view> |
|
||||
<view class="time_item"> |
|
||||
<view class="lab">已完成里程</view> |
|
||||
<view class="num">0km</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
<view class="haveToken" v-if="studentId"> |
|
||||
<subject0 v-show="currentNav==0"/> |
|
||||
<subject1 v-show="currentNav==1"/> |
|
||||
<subject2 v-show="currentNav==2"/> |
|
||||
<subject3 v-show="currentNav==3"/> |
|
||||
<subject4 v-show="currentNav==4"/> |
|
||||
</view> |
|
||||
<view class="noDate" v-else> |
|
||||
<nodata><text>暂无数据,您还未报名</text></nodata> |
|
||||
</view> |
|
||||
|
<view class="" style="height: 100rpx;"></view> |
||||
|
<topInfo></topInfo> |
||||
|
<subject0></subject0> |
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import subject0 from './comp/subject0' |
|
||||
import subject1 from './comp/subject1' |
|
||||
import subject2 from './comp/subject2' |
|
||||
import subject3 from './comp/subject3' |
|
||||
import subject4 from './comp/subject4' |
|
||||
|
import topInfo from './comp/topInfo.vue' |
||||
|
import subject0 from './comp/subject0.vue' |
||||
export default { |
export default { |
||||
components: { subject0, subject1, subject2, subject3, subject4 }, |
|
||||
|
components: { topInfo, subject0 }, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
navData: [ |
|
||||
{text: '模拟器', id: 0}, |
|
||||
{text: '科目一', id: 1}, |
|
||||
{text: '科目二', id: 2}, |
|
||||
{text: '科目三', id: 3}, |
|
||||
{text: '科目四', id: 4}, |
|
||||
], |
|
||||
currentNav: 0 |
|
||||
} |
|
||||
}, |
|
||||
onLoad() { |
|
||||
}, |
|
||||
onShow() { |
|
||||
// console.log('没发生?') |
|
||||
// this.$store.dispatch('checkLogin') |
|
||||
}, |
|
||||
methods: { |
|
||||
changeNav(id) { |
|
||||
this.currentNav = id |
|
||||
|
|
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.content { |
|
||||
width: 100vw; |
|
||||
min-height: 100vh; |
|
||||
// background: url('../../../static/images/bigImg/topbg.png') #F6F6F6 no-repeat; |
|
||||
background-size: 100% 362rpx; |
|
||||
padding: 0 32rpx 32rpx 32rpx; |
|
||||
.title { |
|
||||
font-size: 36rpx; |
|
||||
font-weight: 600; |
|
||||
color: #fff; |
|
||||
padding: 10rpx 0 48rpx 0rpx; |
|
||||
} |
|
||||
.navCard { |
|
||||
.nav_row { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
.nav { |
|
||||
width: 19.4%; |
|
||||
height: 86rpx; |
|
||||
background: rgba(255,255,255,0.4); |
|
||||
border-radius: 8rpx 8rpx 0px 0px; |
|
||||
font-size: 28rpx; |
|
||||
color: #fff; |
|
||||
line-height: 86rpx; |
|
||||
text-align: center; |
|
||||
&.active { |
|
||||
background: #FFFFFF; |
|
||||
color: $themC; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.subject3 { |
|
||||
padding-top: 32rpx; |
|
||||
position: relative; |
|
||||
.chain { |
|
||||
width: 28rpx; |
|
||||
height: 100rpx; |
|
||||
position: absolute; |
|
||||
top: -34rpx; |
|
||||
&.left { |
|
||||
left: 60rpx; |
|
||||
} |
|
||||
&.right { |
|
||||
right: 60rpx !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.time_row { |
|
||||
display: flex; |
|
||||
height: 240rpx; |
|
||||
padding: 32rpx; |
|
||||
align-items: center; |
|
||||
justify-content: center; |
|
||||
background: #fff; |
|
||||
border-radius: 0 0 8rpx 8rpx; |
|
||||
.time_item { |
|
||||
flex: 1; |
|
||||
text-align: center; |
|
||||
position: relative; |
|
||||
.lab { |
|
||||
font-size: 28rpx; |
|
||||
color: #333; |
|
||||
} |
|
||||
|
|
||||
.num { |
|
||||
font-size: 40rpx; |
|
||||
font-weight: 600; |
|
||||
color: $themC; |
|
||||
margin-top: 20rpx; |
|
||||
} |
|
||||
.shareTime { |
|
||||
font-size: 20rpx; |
|
||||
color: $themC; |
|
||||
position: absolute; |
|
||||
bottom: -40rpx; |
|
||||
left: 0; |
|
||||
width: 100%; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
<style scoped lang="scss"> |
||||
|
|
||||
} |
|
||||
</style> |
|
||||
|
</style> |
@ -0,0 +1,368 @@ |
|||||
|
<template> |
||||
|
<view class="pageBgImg"> |
||||
|
<!-- 学员名字 --> |
||||
|
<view class="top_row flex-b" @click="topClick"> |
||||
|
<view class="flex"> |
||||
|
<view class="userName">Hi,{{ vuex_userInfo.name?vuex_userInfo.name:vuex_userInfo.phone?vuex_userInfo.phone:'请登录'}}</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="myPageEntryClick(item)"> |
||||
|
<view class="icon"> |
||||
|
<image :src="item.icon" mode="" v-if="item.text=='我的报名'" ></image> |
||||
|
<image :src="item.icon" mode="" v-else></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="goBusinessEntry(item)"> |
||||
|
<view class="icon"> |
||||
|
<image :src="item.icon" mode=""></image> |
||||
|
</view> |
||||
|
<view class="text">{{ item.text }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { selectContractPdfBase64 } from '@/config/api.js' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
myPageEntry: [ |
||||
|
{ |
||||
|
text: '我的报名', |
||||
|
icon: require('../../../static/images/userCenter/yubaoming.png'), |
||||
|
url: '/pages/mineEntry/myForecastName/myForecastName', |
||||
|
}, |
||||
|
{ |
||||
|
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: { |
||||
|
topClick() { |
||||
|
if(!this.vuex_userInfo.phone) { |
||||
|
this.$goPage('/pages/userCenter/login/login') |
||||
|
}else { |
||||
|
this.$goPage('/pages/mineEntry/personaInfo/personaInfo') |
||||
|
} |
||||
|
}, |
||||
|
async selectContractPdfBase64Fn() { |
||||
|
const {data: res} = await selectContractPdfBase64({studentId: this.studentId}) |
||||
|
this.pdfUrl = res |
||||
|
console.log('this.pdfUrl') |
||||
|
console.log(this.pdfUrl) |
||||
|
}, |
||||
|
async goBusinessEntry(item) { |
||||
|
const res = await this.$store.dispatch('checkLogin') |
||||
|
if(!res) return |
||||
|
if(!this.vuex_userInfo.schoolId) return this.$u.toast('您不是平台学员') |
||||
|
this.$goPage(item.url) |
||||
|
}, |
||||
|
async myPageEntryClick(item) { |
||||
|
const res = await this.$store.dispatch('checkLogin') |
||||
|
if(!res) return |
||||
|
let arr = ['我的收藏','本地生活', '我的报名'] |
||||
|
console.log(arr.includes(item.text)) |
||||
|
if(!this.vuex_userInfo.schoolId&&!arr.includes(item.text)) return this.$u.toast('您不是平台学员') |
||||
|
this.$goPage(item.url) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</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> |
@ -0,0 +1,125 @@ |
|||||
|
|
||||
|
.pageBgImg { |
||||
|
|
||||
|
.userInfo { |
||||
|
width: 100%; |
||||
|
padding: 30rpx 30rpx 100rpx 30rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.avatar { |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
|
border-radius: 50%; |
||||
|
overflow: hidden; |
||||
|
background: #f4f4f4; |
||||
|
image { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.rightInfo { |
||||
|
flex: 1; |
||||
|
width: 0; |
||||
|
padding-left: 20rpx; |
||||
|
.name-row { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
.leftTxt { |
||||
|
flex: 1; |
||||
|
width: 0; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.name { |
||||
|
font-size: 30rpx; |
||||
|
color: #fff; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
|
||||
|
.arrowIcon { |
||||
|
width: 36rpx; |
||||
|
height: 36rpx; |
||||
|
margin-left: 4rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.scanCode { |
||||
|
width: 36rpx; |
||||
|
height: 36rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.phone { |
||||
|
font-size: 24rpx; |
||||
|
color: #fff; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.pad { |
||||
|
border-radius: 20rpx 20rpx 0 0; |
||||
|
background-color: #f4f4f4; |
||||
|
transform: translateY(-22rpx); |
||||
|
} |
||||
|
.ul { |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
height: 154rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 20rpx; |
||||
|
transform: translateY(-60rpx); |
||||
|
.li { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
.icon { |
||||
|
width: 77rpx; |
||||
|
height: 77rpx; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
font-size: 24rpx; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ul2 { |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
margin-top: -40rpx; |
||||
|
padding: 4rpx 20rpx; |
||||
|
.li2 { |
||||
|
display: flex; |
||||
|
height: 88rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
border-bottom: 1rpx solid #F6F7FA; |
||||
|
&:last-child { |
||||
|
border: none; |
||||
|
} |
||||
|
.icon { |
||||
|
width: 54rpx; |
||||
|
height: 52rpx; |
||||
|
image { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
font-size: 28rpx; |
||||
|
color: #333; |
||||
|
margin-left: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.arrowRight { |
||||
|
width: 36rpx; |
||||
|
height: 36rpx; |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
@ -1,368 +1,79 @@ |
|||||
<template> |
<template> |
||||
<view class="pageBgImg"> |
<view class="pageBgImg"> |
||||
<!-- 学员名字 --> |
|
||||
<view class="top_row flex-b" @click="topClick"> |
|
||||
<view class="flex"> |
|
||||
<view class="userName">Hi,{{ vuex_userInfo.name?vuex_userInfo.name:vuex_userInfo.phone?vuex_userInfo.phone:'请登录'}}</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 class="status_bar"></view> |
||||
|
<!-- 用户信息 --> |
||||
|
<view class="userInfo"> |
||||
|
<view class="avatar"> |
||||
|
<image src="@/static/images/mineIcon/emtryIcon (3).png" mode=""></image> |
||||
</view> |
</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 class="rightInfo"> |
||||
|
<view class="name-row"> |
||||
|
<view class="leftTxt"> |
||||
|
<view class="name">JOE宝宝</view> |
||||
|
<view class="arrowIcon"> |
||||
|
<image src="@/static/images/icon/arrowRightfff.png" mode=""></image> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
|
<view class="scanCode"> |
||||
|
<image src="@/static/images/mineIcon/sanCode.png" mode=""></image> |
||||
|
</view> |
||||
</view> |
</view> |
||||
|
<view class="phone">18267103167</view> |
||||
</view> |
</view> |
||||
<!-- 我的相关入口 --> |
|
||||
|
</view> |
||||
|
|
||||
|
<view class="pad"> |
||||
<view class="ul"> |
<view class="ul"> |
||||
<view class="li" v-for="(item,index) in myPageEntry" :key="index" @click="myPageEntryClick(item)"> |
|
||||
|
<view class="li" v-for="(item,index) in ulData" :key="index" @click="$goPage(item.url)"> |
||||
<view class="icon"> |
<view class="icon"> |
||||
<image :src="item.icon" mode="" v-if="item.text=='我的报名'" ></image> |
|
||||
<image :src="item.icon" mode="" v-else></image> |
|
||||
|
<image :src="item.icon" mode=""></image> |
||||
</view> |
</view> |
||||
<view class="text">{{ item.text }}</view> |
|
||||
|
<view class="text">{{ item.name }}</view> |
||||
</view> |
</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="goBusinessEntry(item)"> |
|
||||
<view class="icon"> |
|
||||
<image :src="item.icon" mode=""></image> |
|
||||
</view> |
|
||||
<view class="text">{{ item.text }}</view> |
|
||||
|
|
||||
|
<view class="ul2"> |
||||
|
<view class="li2" v-for="(item,index) in ulData2" :key="index"> |
||||
|
<view class="icon"> |
||||
|
<image :src="item.icon" mode=""></image> |
||||
|
</view> |
||||
|
<view class="text">{{ item.name }}</view> |
||||
|
<view class="arrowRight"> |
||||
|
<u-icon name="arrow-right" color="#ccc" size="16"></u-icon> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
|
|
||||
|
|
||||
|
|
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import { selectContractPdfBase64 } from '@/config/api.js' |
|
||||
export default { |
export default { |
||||
data() { |
data() { |
||||
return { |
return { |
||||
|
|
||||
myPageEntry: [ |
|
||||
{ |
|
||||
text: '我的报名', |
|
||||
icon: require('../../../static/images/userCenter/yubaoming.png'), |
|
||||
url: '/pages/mineEntry/myForecastName/myForecastName', |
|
||||
}, |
|
||||
{ |
|
||||
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'), |
|
||||
}, |
|
||||
|
ulData: [ |
||||
|
{name: '学车进度', icon: require('@/static/images/mineIcon/emtryIcon (4).png'),url: '/pages/mineEntry/carLearProgress/carLearProgress'}, |
||||
|
{name: '我的预约', icon: require('@/static/images/mineIcon/emtryIcon (1).png'),url: ''}, |
||||
|
{name: '我的订单', icon: require('@/static/images/mineIcon/emtryIcon (2).png'),url: ''}, |
||||
|
{name: '我的合同', icon: require('@/static/images/mineIcon/emtryIcon (3).png'),url: ''}, |
||||
], |
], |
||||
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' |
|
||||
}, |
|
||||
|
ulData2: [ |
||||
|
{name: '学时查询', icon: require('@/static/images/mineIcon/minIcon (4).png'),url: ''}, |
||||
|
{name: '我的评价', icon: require('@/static/images/mineIcon/minIcon (1).png'),url: ''}, |
||||
|
{name: '退款申请', icon: require('@/static/images/mineIcon/minIcon (3).png'),url: ''}, |
||||
|
{name: '变更车型', icon: require('@/static/images/mineIcon/minIcon (7).png'),url: ''}, |
||||
|
{name: '同城转校', icon: require('@/static/images/mineIcon/minIcon (5).png'),url: ''}, |
||||
|
{name: '退款申请记录', icon: require('@/static/images/mineIcon/minIcon (6).png'),url: ''}, |
||||
|
{name: '关于我们', icon: require('@/static/images/mineIcon/minIcon (2).png'),url: ''}, |
||||
] |
] |
||||
} |
} |
||||
}, |
|
||||
onLoad() { |
|
||||
console.log('我的页面') |
|
||||
|
|
||||
}, |
|
||||
onShow() { |
|
||||
// uni.hideTabBar(); |
|
||||
}, |
|
||||
methods: { |
|
||||
topClick() { |
|
||||
if(!this.vuex_userInfo.phone) { |
|
||||
this.$goPage('/pages/userCenter/login/login') |
|
||||
}else { |
|
||||
this.$goPage('/pages/mineEntry/personaInfo/personaInfo') |
|
||||
} |
|
||||
}, |
|
||||
async selectContractPdfBase64Fn() { |
|
||||
const {data: res} = await selectContractPdfBase64({studentId: this.studentId}) |
|
||||
this.pdfUrl = res |
|
||||
console.log('this.pdfUrl') |
|
||||
console.log(this.pdfUrl) |
|
||||
}, |
|
||||
async goBusinessEntry(item) { |
|
||||
const res = await this.$store.dispatch('checkLogin') |
|
||||
if(!res) return |
|
||||
if(!this.vuex_userInfo.schoolId) return this.$u.toast('您不是平台学员') |
|
||||
this.$goPage(item.url) |
|
||||
}, |
|
||||
async myPageEntryClick(item) { |
|
||||
const res = await this.$store.dispatch('checkLogin') |
|
||||
if(!res) return |
|
||||
let arr = ['我的收藏','本地生活', '我的报名'] |
|
||||
console.log(arr.includes(item.text)) |
|
||||
if(!this.vuex_userInfo.schoolId&&!arr.includes(item.text)) return this.$u.toast('您不是平台学员') |
|
||||
this.$goPage(item.url) |
|
||||
} |
|
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<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> |
|
||||
|
@import './index.scss'; |
||||
|
</style> |
Before Width: 36 | Height: 36 | Size: 516 B After Width: 36 | Height: 36 | Size: 516 B |
Before Width: 36 | Height: 36 | Size: 638 B After Width: 36 | Height: 36 | Size: 638 B |
Before Width: 36 | Height: 36 | Size: 626 B After Width: 36 | Height: 36 | Size: 626 B |