fangwenqiao
/
JiangxiMiniProgram
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

学车静态页面

master
unknown 1 year ago
parent
8a214f7b32
commit
9a63741948
44 changed files with 1257 additions and 142 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      common/css/app.scss
  2. 51
      components/searchRow/searchRow.vue
  3. 30
      components/topNavbar/topNavbar.vue
  4. 14
      pages.json
  5. 156
      pages/indexEntry/findShcool/findShcool.vue
  6. 0
      pages/indexEntry/index.vue
  7. 46
      pages/tabbar/index/index.vue
  8. 109
      pages/tabbar/learnCar/comp/comp.scss
  9. 62
      pages/tabbar/learnCar/comp/subject0.vue
  10. 83
      pages/tabbar/learnCar/comp/subject1.vue
  11. 104
      pages/tabbar/learnCar/comp/subject2.vue
  12. 103
      pages/tabbar/learnCar/comp/subject3.vue
  13. 75
      pages/tabbar/learnCar/comp/subject4.vue
  14. 149
      pages/tabbar/learnCar/index.vue
  15. 266
      pages/tabbar/mine/index.vue
  16. BIN
      static/images/index/chain.png
  17. 0
      static/images/userCenter/biangen.png
  18. 0
      static/images/userCenter/btn_xueche_nor.png
  19. 0
      static/images/userCenter/ic_chaxun.png
  20. 0
      static/images/userCenter/ic_dingdan.png
  21. 0
      static/images/userCenter/ic_erweima.png
  22. BIN
      static/images/userCenter/ic_gengduo.png
  23. 0
      static/images/userCenter/ic_hetong.png
  24. 0
      static/images/userCenter/ic_pingjia.png
  25. 0
      static/images/userCenter/ic_shenghuo.png
  26. 0
      static/images/userCenter/ic_shoucang.png
  27. 0
      static/images/userCenter/ic_shuju.png
  28. 0
      static/images/userCenter/ic_yuyue.png
  29. 0
      static/images/userCenter/shenqingtuixue.png
  30. 0
      static/images/userCenter/tgzhuanxiao.png

5
common/css/app.scss
View File

@ -36,6 +36,11 @@ view {
.pageBg {
background: #F6F6F6;
}
.pageBgImg {
background: url('static/images/bigImg/topbg.png') #F6F6F6 no-repeat;
// background: url('http://192.168.1.20:81/zhili/image/20230814/625b0f15924541cda70b4616f032d194.png') #F6F6F6 no-repeat;
background-size: 100% 362rpx;
}
.pad {
padding: 0 28rpx;
}

51
components/searchRow/searchRow.vue
View File

@ -0,0 +1,51 @@
<template>
<view class="searchBg">
<view class="flex">
<view class="searchIcon">
<image src="@/static/images/index/searchIcon.png" mode=""></image>
</view>
<view class="inputBox">
<u--input :placeholder="placeholder" border="none" clearable v-model="keywords" :color="'#fff'"
placeholderClass="placeholderClassFFF"></u--input>
</view>
</view>
</view>
</template>
<script>
export default {
props: ['placeholder'],
data() {
return {
keywords: ''
}
}
}
</script>
<style lang="scss" scoped>
.searchBg {
background: #8ABAED;
width: 100%;
height: 72rpx;
border-radius: 16rpx;
line-height: 72rpx;
.flex {
height: 100%;
padding: 0 28rpx;
.searchIcon {
width: 40rpx;
height: 40rpx;
}
.inputBox {
padding-left: 28rpx;
flex: 1;
color: #fff;
font-size: 28rpx;
}
}
}
</style>

30
components/topNavbar/topNavbar.vue
View File

@ -0,0 +1,30 @@
<template>
<view class="topNavbar">
<u-navbar
:leftText="title"
:autoBack="true"
:bgColor="bgColor"
:leftIconColor="leftIconColor"
:fixed="false"
>
</u-navbar>
<view class="pad">
</view>
</view>
</template>
<script>
export default {
props: ['title'],
data() {
return {
bgColor: 'transparent',
leftIconColor: '#fff'
}
}
}
</script>
<style>
</style>

14
pages.json
View File

@ -30,6 +30,20 @@
],
"subPackages": [
{
"root": "pages/indexEntry",
"pages": [
{
"path": "findShcool/findShcool",
"style": {
"navigationBarTitleText": "找驾校",
"navigationStyle": "custom",
"enablePullDownRefresh": false,
"backgroundTextStyle": "dark"
}
}
]
},
{
"root": "pages/userCenter",
"pages": [
{

156
pages/indexEntry/findShcool/findShcool.vue
View File

@ -0,0 +1,156 @@
<template>
<view class="pageBgImg">
<topNavbar title="找驾校"></topNavbar>
<view class="pad">
<view class="searchCon">
<searchRow placeholder="搜索驾校、教练…"></searchRow>
</view>
<view class="navBox">
<view class="tab" v-for="(item,index) in tabData" :key="index" :class="{active: index==0}">
{{ item.text }}</view>
<view class="screen">
<view class="txt">筛选</view>
<view class="screenIcon">
<image src="../../../static/images/tabbar/wd.png" mode=""></image>
</view>
</view>
</view>
<view class="ul">
<view class="li">
<view class="img">
<image src="../../../static/images/logo.png" mode=""></image>
</view>
<view class="textCon">
<view class="name">江西海正驾校</view>
<view class="starBox">
<u-rate active-color="#1989FA" inactive-color="#1989FA" gutter="20"></u-rate>
<view class="num">4.9分</view>
</view>
<view class="credit">行业信用AA</view>
<view class="adr">距您1000.99公里</view>
</view>
<view class="pozPhone">
<image src="@/static/images/tabbar/sy.png" mode=""></image>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tabData: [{
text: '全部',
id: 0
},
{
text: '场地优先',
id: 0
},
{
text: '距离优先',
id: 0
},
{
text: '好评优先',
id: 0
},
]
}
}
}
</script>
<style lang="scss" scoped>
.pageBgImg {
width: 100%;
min-height: 100vh;
.searchCon {
padding: 24rpx 0;
}
.navBox {
display: flex;
justify-content: space-between;
.tab {
display: flex;
font-size: 28rpx;
color: #fff;
&.active {
position: relative;
&::before {
content: '';
position: absolute;
bottom: -14rpx;
left: 50%;
transform: translateX(-50%);
width: 50rpx;
height: 4rpx;
background-color: #fff;
border-radius: 0 0 2rpx 2rpx;
}
}
}
.screen {
width: 150rpx;
display: flex;
justify-content: center;
align-items: center;
position: relative;
&::before {
content: '';
position: absolute;
left: 0;
top: 10rpx;
width: 1px;
background: #fff;
height: 26rpx;
}
.txt {
font-size: 28rpx;
color: #fff;
margin-right: 10rpx;
}
.screenIcon {
width: 40rpx;
height: 40rpx;
}
}
}
.ul {
.li {
.img {
img {}
}
.textCon {
.name {}
.starBox {
u-rate {}
.num {}
}
.credit {}
.adr {}
}
.pozPhone {
img {}
}
}
}
}
</style>

0
pages/index/index.vue → pages/indexEntry/index.vue
View File

46
pages/tabbar/index/index.vue
View File

@ -32,24 +32,14 @@
</view>
<!-- 搜索 -->
<view class="searchCon">
<view class="searchBg">
<view class="flex">
<view class="searchIcon">
<image src="@/static/images/index/searchIcon.png" mode=""></image>
</view>
<view class="inputBox">
<u--input placeholder="搜索驾校、教练…" border="none" clearable v-model="keywords" :color="'#fff'"
placeholderClass="placeholderClassFFF"></u--input>
</view>
</view>
</view>
<searchRow placeholder="搜索驾校、教练…"></searchRow>
</view>
</view>
<view class="pad">
<!-- 精钢区 -->
<view class="card traTop">
<view class="ul">
<view class="li" v-for="(item,index) in entrySection" :key="index">
<view class="li" v-for="(item,index) in entrySection" :key="index" @click="goPageSection(item)">
<view class="icon">
<image :src="item.icon" mode=""></image>
</view>
@ -117,7 +107,7 @@
export default {
data() {
return {
showPrivacy: true,
showPrivacy: false,
keywords: '',
entrySection: [{
text: '我要报名',
@ -126,6 +116,7 @@
{
text: '找驾校',
icon: require('../../../static/images/index/ic_jiaxiao.png'),
url: '/pages/indexEntry/findShcool/findShcool'
},
{
text: '找考场',
@ -224,8 +215,10 @@
close() {
},
open() {
goPageSection(item) {
uni.navigateTo({
url:item.url
})
},
// 扫码
scanCodeFn() {
@ -314,30 +307,7 @@
padding: 0 28rpx;
width: 100%;
.searchBg {
background: #8ABAED;
width: 100%;
height: 72rpx;
border-radius: 16rpx;
line-height: 72rpx;
.flex {
height: 100%;
padding: 0 28rpx;
.searchIcon {
width: 40rpx;
height: 40rpx;
}
.inputBox {
padding-left: 28rpx;
flex: 1;
color: #fff;
font-size: 28rpx;
}
}
}
}
}

109
pages/tabbar/learnCar/comp/comp.scss
View File

@ -0,0 +1,109 @@
.h1 {
font-size: 32rpx;
color: #333;
font-weight: 500;
position: relative;
padding: 0 0 0 32rpx;
line-height: 108rpx;
height: 108rpx;
&::before {
position: absolute;
content: '';
width: 8rpx;
height: 32rpx;
background: #1F6EFA;
border-radius: 4rpx;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}
.card {
background: #FFFFFF;
border-radius: 16rpx;
padding: 28rpx 32rpx;
margin-bottom: 20rpx;
&.mb0 {
margin-bottom: 0;
}
.flex-b {
align-items: center;
.lab {
font-size: 28rpx;
color: #333;
}
.btn {
width: 144rpx;
height: 56rpx;
background: #1989FA;
border-radius: 8rpx;
font-size: 28rpx;
color: #fff;
text-align: center;
line-height: 56rpx;
&.disable {
opacity: 0.3;
}
}
}
.date {
font-size: 28rpx;
color: #333;
}
}
.learnStatus {
.more {
display: flex;
align-items: center;
.txt {
font-size: 24rpx;
color: #686B73;
}
.moreIcon {
}
}
.bg {
background: rgba(25,137,250,0.1);
border-radius: 16rpx;
margin-top: 22rpx;
padding: 20rpx 20rpx 0 20rpx;
.row {
padding-bottom: 20rpx;
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
&.oneBtn {
justify-content: center;
}
}
.text {
color: $themC;
font-size: 28rpx;
}
}
}
.tpsLine {
font-size: 24rpx;
color: #ADADAD;
border-top: 1px solid #E8E9EC;
margin-top: 20rpx;
padding-top: 18rpx;
}
.cancel {
font-size: 28rpx;
font-weight: 400;
color: #ADADAD;
margin-top: 22rpx;
text-decoration: underline;
}

62
pages/tabbar/learnCar/comp/subject0.vue
View File

@ -0,0 +1,62 @@
<template>
<view class="comp">
<!-- 学习内容 -->
<view class="learnCon">
<view class="h1">学习内容</view>
<view class="card mb0">
<view class="flex-b">
<view class="lab">模拟器训练预约</view>
<view class="btn">去预约</view>
</view>
</view>
</view>
<!-- 学习状态 -->
<view class="learnStatus">
<view class="flex-b">
<view class="h1">学习状态</view>
<view class="more">
<view class="txt">查看全部</view>
<view class="moreIcon">
<u-icon name="arrow-right" color="#686B73" size="12"></u-icon>
</view>
</view>
</view>
<view class="card">
<view class="flex-b">
<view class="lab">模拟器训练学时报审</view>
<view class="date">2023/08/09 22:52:12</view>
</view>
<view class="flex-b bg">
<view class="row">
<view class="text">评价模拟器教学老师</view>
<view class="btn">去评价</view>
</view>
</view>
</view>
<view class="card">
<view class="flex-b">
<view class="lab">模拟器训练已预约</view>
<view class="date">2023/08/09 22:52:12</view>
</view>
<view class="bg">
<view class="row">
<view class="text">模拟驾驶馆：某某模拟驾驶馆</view>
</view>
<view class="row">
<view class="text">模拟器编号：00001</view>
</view>
<view class="row">
<view class="text">预约时间：2023/08/23 10:00:00</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
@import './comp.scss';
</style>

83
pages/tabbar/learnCar/comp/subject1.vue
View File

@ -0,0 +1,83 @@
<template>
<view class="comp">
<!-- 学习内容 -->
<view class="learnCon">
<view class="h1">学习内容</view>
<view class="card">
<view class="flex-b">
<view class="lab">理论学习</view>
<view class="btn">去学习</view>
</view>
</view>
<view class="card">
<view class="flex-b">
<view class="lab">理论VIP题库模拟</view>
<view class="btn disable">去学习</view>
</view>
<view class="tpsLine">待学时达标后方可学习</view>
</view>
<view class="card mb0">
<view class="flex-b">
<view class="lab">安全警示教育在线视频学习</view>
<view class="btn">去学习</view>
</view>
</view>
</view>
<!-- 学习状态 -->
<view class="learnStatus">
<view class="flex-b">
<view class="h1">学习状态</view>
<view class="more">
<view class="txt">查看全部</view>
<view class="moreIcon">
<u-icon name="arrow-right" color="#686B73" size="12"></u-icon>
</view>
</view>
</view>
<view class="card">
<view class="flex-b">
<view class="lab">科目一考试成绩已通过</view>
<view class="date">2023/08/09 22:52:12</view>
</view>
<view class="flex-b bg">
<view class="row">
<view class="text">考试成绩：97分</view>
</view>
</view>
</view>
<view class="card">
<view class="flex-b">
<view class="lab">科目一考试预约受理中</view>
<view class="date">2023/08/09 22:52:12</view>
</view>
<view class="bg">
<view class="row">
<view class="text">考试场地：南昌交安科目一考场</view>
</view>
<view class="row">
<view class="text">考试时间：2023/08/02 第一场 22</view>
</view>
</view>
</view>
<view class="card">
<view class="flex-b">
<view class="lab">科目一学时已通过</view>
<view class="date">2023/07/24 03:12:20</view>
</view>
<view class="flex-b bg">
<view class="row">
<view class="text">前往“12123”APP预约考试</view>
<view class="btn">去预约</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
@import './comp.scss';
</style>

104
pages/tabbar/learnCar/comp/subject2.vue
View File

@ -0,0 +1,104 @@
<template>
<view class="comp">
<!-- 学习内容 -->
<view class="learnCon">
<view class="h1">学习内容</view>
<view class="card">
<view class="flex-b">
<view class="lab">实操训练</view>
<view class="btn">去预约</view>
</view>
</view>
<view class="card mb0">
<view class="flex-b">
<view class="lab">考场模拟训练</view>
<view class="btn disable">去预约</view>
</view>
</view>
</view>
<!-- 学习状态 -->
<view class="learnStatus">
<view class="flex-b">
<view class="h1">学习状态</view>
<view class="more">
<view class="txt">查看全部</view>
<view class="moreIcon">
<u-icon name="arrow-right" color="#686B73" size="12"></u-icon>
</view>
</view>
</view>
<view class="card">
<view class="flex-b">
<view class="lab">科目二考试成绩已通过</view>
<view class="date">2023/08/09 22:52:12</view>
</view>
<view class="flex-b bg">
<view class="row">
<view class="text">考试成绩：100分</view>
<view class="btn">去评价</view>
</view>
</view>
</view>
<view class="card">
<view class="flex-b">
<view class="lab">科目二考试预约成功</view>
<view class="date">2023/08/09 22:52:12</view>
</view>
<view class="bg">
<view class="row">
<view class="text">考试场地：某某科目二考场</view>
</view>
<view class="row">
<view class="text">考试时间：2023/08/23 10:00:00</view>
</view>
</view>
</view>
<view class="card">
<view class="flex-b">
<view class="lab">科目二学习进度已通过</view>
<view class="date">2023/07/24 03:12:20</view>
</view>
<view class="flex-b bg">
<view class="row">
<view class="text">前往“12123”APP预约考试</view>
<view class="btn">去预约</view>
</view>
</view>
</view>
<view class="card">
<view class="flex-b">
<view class="lab">科目二模拟训练已预约</view>
<view class="date">2023/07/24 03:12:20</view>
</view>
<view class="bg">
<view class="row">
<view class="text">预约科目：科目二</view>
</view>
<view class="row">
<view class="text">预约考场：某某考场</view>
</view>
<view class="row">
<view class="text">学驾车型：C1</view>
</view>
<view class="row">
<view class="text">车辆编号：2号车（浙A99988）</view>
</view>
<view class="row">
<view class="text">预约时间：2023/08/16 14:00</view>
</view>
<view class="row">
<view class="text">核销时间：2023/08/16 14:00</view>
</view>
</view>
<view class="cancel">取消预约</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
@import './comp.scss';
</style>

103
pages/tabbar/learnCar/comp/subject3.vue
View File

@ -0,0 +1,103 @@
<template>
<view class="comp">
<!-- 学习内容 -->
<view class="learnCon">
<view class="h1">学习内容</view>
<view class="card">
<view class="flex-b">
<view class="lab">实操训练</view>
<view class="btn">去预约</view>
</view>
</view>
<view class="card mb0">
<view class="flex-b">
<view class="lab">考场模拟训练</view>
<view class="btn disable">去预约</view>
</view>
</view>
</view>
<!-- 学习状态 -->
<view class="learnStatus">
<view class="flex-b">
<view class="h1">学习状态</view>
<view class="more">
<view class="txt">查看全部</view>
<view class="moreIcon">
<u-icon name="arrow-right" color="#686B73" size="12"></u-icon>
</view>
</view>
</view>
<view class="card">
<view class="flex-b">
<view class="lab">科目三考试成绩已通过</view>
<view class="date">2023/08/09 22:52:12</view>
</view>
<view class="flex-b bg">
<view class="row">
<view class="text">考试成绩：100分</view>
<view class="btn">去评价</view>
</view>
</view>
</view>
<view class="card">
<view class="flex-b">
<view class="lab">科目三考试预约成功</view>
<view class="date">2023/08/09 22:52:12</view>
</view>
<view class="bg">
<view class="row">
<view class="text">考试场地：某某科目二考场</view>
</view>
<view class="row">
<view class="text">考试时间：2023/08/23 10:00:00</view>
</view>
</view>
</view>
<view class="card">
<view class="flex-b">
<view class="lab">科目三模拟训练已核销</view>
<view class="date">2023/07/24 03:12:20</view>
</view>
<view class="flex-b bg">
<view class="row oneBtn">
<view class="btn">去评价</view>
</view>
</view>
</view>
<view class="card">
<view class="flex-b">
<view class="lab">科目三模拟训练已预约</view>
<view class="date">2023/07/24 03:12:20</view>
</view>
<view class="bg">
<view class="row">
<view class="text">预约科目：科目三</view>
</view>
<view class="row">
<view class="text">预约考场：某某考场</view>
</view>
<view class="row">
<view class="text">学驾车型：C1</view>
</view>
<view class="row">
<view class="text">车辆编号：2号车（浙A99988）</view>
</view>
<view class="row">
<view class="text">预约时间：2023/08/16 14:00</view>
</view>
<view class="row">
<view class="text">核销时间：2023/08/16 14:00</view>
</view>
</view>
<view class="cancel">取消预约</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
@import './comp.scss';
</style>

75
pages/tabbar/learnCar/comp/subject4.vue
View File

@ -0,0 +1,75 @@
<template>
<view class="comp">
<!-- 学习内容 -->
<!-- <view class="learnCon">
<view class="h1">学习内容</view>
<view class="card">
<view class="flex-b">
<view class="lab">实操训练</view>
<view class="btn">去预约</view>
</view>
</view>
<view class="card mb0">
<view class="flex-b">
<view class="lab">考场模拟训练</view>
<view class="btn disable">去预约</view>
</view>
</view>
</view> -->
<!-- 学习状态 -->
<view class="learnStatus">
<view class="flex-b">
<view class="h1">学习状态</view>
<view class="more">
<view class="txt">查看全部</view>
<view class="moreIcon">
<u-icon name="arrow-right" color="#686B73" size="12"></u-icon>
</view>
</view>
</view>
<view class="card">
<view class="flex-b">
<view class="lab">恭喜你！可以拿证啦！</view>
<view class="date">2023/08/09 22:52:12</view>
</view>
<view class="flex-b bg">
<view class="row oneBtn">
<view class="btn">领证宣誓</view>
</view>
</view>
</view>
<view class="card">
<view class="flex-b">
<view class="lab">科目三安全文明常识成绩<br>已通过</view>
<view class="date">2023/08/09 22:52:12</view>
</view>
<view class="bg">
<view class="row">
<view class="text">考试成绩：98分</view>
</view>
</view>
</view>
<view class="card">
<view class="flex-b">
<view class="lab">科目三安全文明常识考试<br>预约成功</view>
<view class="date">2023/07/24 03:12:20</view>
</view>
<view class="bg">
<view class="row">
<view class="text">考试场地：某某科目三理论考场</view>
</view>
<view class="row">
<view class="text">考试时间：2023/08/22 16:00:00</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
@import './comp.scss';
</style>

149
pages/tabbar/learnCar/index.vue
View File

@ -1,16 +1,68 @@
<template>
<view class="content">
学车
{{$store.state.user.vuex_userInfo.name}}
<button @click="clickFn"> 打我啊 </button>
<!-- <UserTab selectedIndex ='1'></UserTab> -->
<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>
<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>
</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() {
@ -19,10 +71,8 @@
// uni.hideTabBar();
},
methods: {
clickFn() {
uni.navigateTo({
url: '/pages/userCenter/login/loginByPhone'
})
changeNav(id) {
this.currentNav = id
}
}
}
@ -31,6 +81,85 @@
<style lang="scss" scoped>
.content {
width: 100vw;
height: 100vh;
min-height: 100vh;
// background: url('../../../static/images/bigImg/topbg.png') #F6F6F6 no-repeat;
background-size: 100% 362rpx;
padding: 0 32rpx;
.title {
font-size: 36rpx;
font-weight: 600;
color: #fff;
padding: 10rpx 0 48rpx 00rpx;
}
.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>

266
pages/tabbar/mine/index.vue
View File

@ -5,35 +5,58 @@
<view class="flex">
<view class="userName">Hi，大乔</view>
<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 class="scanCode">
<image src="../../../static/images/userCenter/loginTopBg.png" mode=""></image>
<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">
<view class="li" v-for="(item,index) in myPageEntry" :key="index">
<view class="icon">
<image src="../../../static/logo.png" mode=""></image>
<image :src="item.icon" mode=""></image>
</view>
<view class="text">我的预约</view>
<view class="text">{{ item.text }}</view>
</view>
</view>
<!-- 业务办理 -->
<view class="business ">
<view class="h1">业务办理</view>
<view class="card">
<view class="item">
<view class="item" v-for="(item,index) in businessEntry" :key="index">
<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 class="text">学时查询</view>
</view>
</view>
</view>
@ -45,6 +68,54 @@
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() {
@ -61,60 +132,213 @@
<style lang="scss" scoped>
.content {
width: 100vw;
min-height: 100vh;
background: url('../../../static/images/bigImg/topbg.png') no-repeat;
background-size: 100% 362rpx;
}
.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;
}
}
}

BIN
static/images/index/chain.png
View File

Side by Side

After

Width: 28  |  Height: 100  |  Size: 1.2 KiB

0
static/images/userCenter/home_icon_biangen@2x.png → static/images/userCenter/biangen.png
View File

Side by Side Swipe Overlay

Before

Width: 48  |  Height: 48  |  Size: 2.2 KiB

After

Width: 48  |  Height: 48  |  Size: 2.2 KiB

0
static/images/userCenter/btn_xueche_nor@2x.png → static/images/userCenter/btn_xueche_nor.png
View File

Side by Side Swipe Overlay

Before

Width: 56  |  Height: 56  |  Size: 1.8 KiB

After

Width: 56  |  Height: 56  |  Size: 1.8 KiB

0
static/images/userCenter/ic_chaxun@2x.png → static/images/userCenter/ic_chaxun.png
View File

Side by Side Swipe Overlay

Before

Width: 48  |  Height: 48  |  Size: 1.0 KiB

After

Width: 48  |  Height: 48  |  Size: 1.0 KiB

0
static/images/userCenter/ic_dingdan@2x.png → static/images/userCenter/ic_dingdan.png
View File

Side by Side Swipe Overlay

Before

Width: 68  |  Height: 68  |  Size: 2.1 KiB

After

Width: 68  |  Height: 68  |  Size: 2.1 KiB

0
static/images/userCenter/ic_erweima@2x.png → static/images/userCenter/ic_erweima.png
View File

Side by Side Swipe Overlay

Before

Width: 40  |  Height: 40  |  Size: 1.4 KiB

After

Width: 40  |  Height: 40  |  Size: 1.4 KiB

BIN
static/images/userCenter/ic_gengduo.png
View File

Side by Side

After

Width: 40  |  Height: 40  |  Size: 902 B

0
static/images/userCenter/ic_hetong@2x.png → static/images/userCenter/ic_hetong.png
View File

Side by Side Swipe Overlay

Before

Width: 68  |  Height: 68  |  Size: 2.2 KiB

After

Width: 68  |  Height: 68  |  Size: 2.2 KiB

0
static/images/userCenter/ic_pingjia@2x.png → static/images/userCenter/ic_pingjia.png
View File

Side by Side Swipe Overlay

Before

Width: 68  |  Height: 68  |  Size: 2.3 KiB

After

Width: 68  |  Height: 68  |  Size: 2.3 KiB

0
static/images/userCenter/ic_shenghuo@2x.png → static/images/userCenter/ic_shenghuo.png
View File

Side by Side Swipe Overlay

Before

Width: 68  |  Height: 68  |  Size: 3.0 KiB

After

Width: 68  |  Height: 68  |  Size: 3.0 KiB

0
static/images/userCenter/ic_shoucang@2x.png → static/images/userCenter/ic_shoucang.png
View File

Side by Side Swipe Overlay

Before

Width: 68  |  Height: 68  |  Size: 3.1 KiB

After

Width: 68  |  Height: 68  |  Size: 3.1 KiB

0
static/images/userCenter/ic_shuju@2x.png → static/images/userCenter/ic_shuju.png
View File

Side by Side Swipe Overlay

Before

Width: 68  |  Height: 68  |  Size: 2.8 KiB

After

Width: 68  |  Height: 68  |  Size: 2.8 KiB

0
static/images/userCenter/ic_yuyue@2x.png → static/images/userCenter/ic_yuyue.png
View File

Side by Side Swipe Overlay

Before

Width: 68  |  Height: 68  |  Size: 3.1 KiB

After

Width: 68  |  Height: 68  |  Size: 3.1 KiB

0
static/images/userCenter/home_icon_shenqingtuixue@2x.png → static/images/userCenter/shenqingtuixue.png
View File

Side by Side Swipe Overlay

Before

Width: 48  |  Height: 48  |  Size: 705 B

After

Width: 48  |  Height: 48  |  Size: 705 B

0
static/images/userCenter/home_icon_tgzhuanxiao@2x.png → static/images/userCenter/tgzhuanxiao.png
View File

Side by Side Swipe Overlay

Before

Width: 48  |  Height: 48  |  Size: 865 B

After

Width: 48  |  Height: 48  |  Size: 865 B

Write Preview
Loading…
Cancel
Save