|
|
|
@ -1,117 +1,77 @@ |
|
|
|
<template> |
|
|
|
<view class="main pageBg"> |
|
|
|
<!-- <button @click="$goPage('/pages/userCenter/login/face')">进入人脸识别</button> --> |
|
|
|
<view style="background-color: #2170FD; width: 100%;height: 20rpx;"></view> |
|
|
|
<!-- <u-navbar title=" " :bgColor="bgColor" :autoBack="false"> |
|
|
|
<view class="" slot="left"> |
|
|
|
<view class="flex"> |
|
|
|
<view class="adrsIcon"> |
|
|
|
<image src="@/static/images/index/dingwei.png" mode=""></image> |
|
|
|
</view> |
|
|
|
<view class="adr">{{ vuex_cityInfo.city }} </view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="rightScan" slot="right"> |
|
|
|
<view class="scan" @click="scanCodeFn"> |
|
|
|
<image src="@/static/images/index/scan.png" mode=""></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</u-navbar> --> |
|
|
|
<!-- <button @click="refereshFn">刷新token</button> --> |
|
|
|
<view class="TopCon" :style="{ backgroundImage: `url(${imgUrl})`, backgroundSize: backgroundSize }"> |
|
|
|
<view class="status_bar"></view> |
|
|
|
<view class="TopCon pad" > |
|
|
|
<!-- 地址、扫一扫 --> |
|
|
|
<!-- #ifdef MP-WEIXIN --> |
|
|
|
<view class="flex-b"> |
|
|
|
<view class="flex"> |
|
|
|
<view class="adrsCon"> |
|
|
|
<view class="adrsIcon"> |
|
|
|
<image src="@/static/images/index/dingwei.png" mode=""></image> |
|
|
|
</view> |
|
|
|
<view class="adr">{{ vuex_cityInfo.city || '杭州' }} </view> |
|
|
|
</view> |
|
|
|
<view class="scan" @click="scanCodeFn"> |
|
|
|
<image src="@/static/images/index/scan.png" mode=""></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- #endif --> |
|
|
|
<!-- 搜索 --> |
|
|
|
<view class="searchCon" @click.capture="$goPage('/pages/indexEntry/findShcool/searchShcool/searchShcool')"> |
|
|
|
<searchRow placeholder="搜索驾校、教练…" :disable="true"></searchRow> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="pad"> |
|
|
|
<!-- 精钢区 --> |
|
|
|
<view class="card traTop"> |
|
|
|
<view class="ul"> |
|
|
|
<view class="li" v-for="(item,index) in entrySection" :key="index" @tap="entrySectionClick(item)"> |
|
|
|
<view class="icon"> |
|
|
|
<image :src="item.icon" mode=""></image> |
|
|
|
</view> |
|
|
|
<view class="name">{{ item.text }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 更多入口 --> |
|
|
|
<view class="card"> |
|
|
|
<view class="ul3"> |
|
|
|
<view class="li3" v-for="(item,index) in moreSection" :key="index"> |
|
|
|
<view class="icon"> |
|
|
|
<image :src="item.icon" mode=""></image> |
|
|
|
</view> |
|
|
|
<view class="name">{{ item.text }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 行业资讯 --> |
|
|
|
<view class="card"> |
|
|
|
<view class="information"> |
|
|
|
<view class="flex-b border"> |
|
|
|
<view class="h1">行业资讯</view> |
|
|
|
<view class="more" @click="$goPage('/pages/indexEntry/iIndustryInfo/iIndustryInfo')"> |
|
|
|
<view class="text">更多</view> |
|
|
|
<view class="icon"> |
|
|
|
<u-icon name="arrow-right"></u-icon> |
|
|
|
<view class="scan" @click="scanCodeFn"> |
|
|
|
<image src="@/static/images/index/scan.png" mode="aspectFill"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 海报 --> |
|
|
|
<view class="banner"> |
|
|
|
<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="swiperInfo" v-if="swiperInfo.length" |
|
|
|
:current="current" :mode="mode" style="height: 230rpx;" :dots-styles="dotsStyles" |
|
|
|
:current="current" :mode="mode" :dots-styles="dotsStyles" |
|
|
|
field="content"> |
|
|
|
<swiper class="swiper-box" @change="change" :current="swiperDotIndex" style="height: 230rpx;"> |
|
|
|
<swiper class="swiper-box" @change="change" :current="swiperDotIndex" > |
|
|
|
<swiper-item v-for="(item, index) in swiperInfo" :key="index" @click="$goPage('/pages/indexEntry/iIndustryInfo/detail/detail?id='+ item.id)"> |
|
|
|
<view class="swiper-item" :class="'swiper-item' + index"> |
|
|
|
<view class="flex-b"> |
|
|
|
<view class="imgBox"> |
|
|
|
<image :src="item.picture" mode="aspectFill"></image> |
|
|
|
</view> |
|
|
|
<view class="rightText"> |
|
|
|
<view class="text towRowText">{{ item.title }}</view> |
|
|
|
<view class="date">{{ $u.timeFormat(item.createTime, 'yyyy/mm/dd') }}</view> |
|
|
|
</view> |
|
|
|
<image :src="item.picture" mode="widthFix"></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</swiper-item> |
|
|
|
</swiper> |
|
|
|
</uni-swiper-dot> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<!-- 服务专区 --> |
|
|
|
<view class="card serviceCon"> |
|
|
|
<view class="h1">服务专区</view> |
|
|
|
<view class="ul2"> |
|
|
|
<view class="li2" v-for="(item,index) in serviceSector" :key="index" :class="'li2Bg' + index" @click="goServiceSector(item)"> |
|
|
|
|
|
|
|
<view class="pad"> |
|
|
|
<!-- 精钢区 --> |
|
|
|
<view class="card traTop"> |
|
|
|
<view class="ul"> |
|
|
|
<view class="li" v-for="(item,index) in entrySection" :key="index" @tap="entrySectionClick(item)"> |
|
|
|
<view class="icon"> |
|
|
|
<image :src="item.icon" mode=""></image> |
|
|
|
</view> |
|
|
|
<view class="textCon"> |
|
|
|
<view class="text">{{ item.text }}</view> |
|
|
|
<view class="tps">{{ item.tps}}</view> |
|
|
|
<view class="name">{{ item.text }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 优质驾校 --> |
|
|
|
<view class="schoolCon"> |
|
|
|
<view class="h1" style="margin: 28rpx 0;">优质驾校</view> |
|
|
|
<view class="li" v-for="(item,index) in 3" :key="index"> |
|
|
|
<schoolItem/> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view style="height: 20rpx;width: 100%;"></view> |
|
|
|
|
|
|
|
<!-- 行业资讯，政策法规 --> |
|
|
|
<view class="information"> |
|
|
|
<view class="tabs"> |
|
|
|
<view class="tab active">行业资讯</view> |
|
|
|
<view class="tab">政策法规</view> |
|
|
|
</view> |
|
|
|
<view class="ul"> |
|
|
|
<view class="li" v-for="(item,index) in 3" :key="index"> |
|
|
|
<informaItem/> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<u-popup :show="showPrivacy" mode="center" :round="20" > |
|
|
|
<privacyPopup @disagree="showPrivacy=false" @agree="showPrivacy=false"></privacyPopup> |
|
|
|
</u-popup> |
|
|
|
@ -121,7 +81,10 @@ |
|
|
|
<script> |
|
|
|
import { imgUrl } from '@/config/site.config' |
|
|
|
import { getarticleList } from '@/config/api.js' |
|
|
|
import schoolItem from './comp/schoolItem' |
|
|
|
import informaItem from './comp/informaItem' |
|
|
|
export default { |
|
|
|
components: { schoolItem, informaItem }, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
showPrivacy: false, |
|
|
|
@ -129,7 +92,7 @@ |
|
|
|
backgroundSize: '100% 100%', |
|
|
|
keywords: '', |
|
|
|
entrySection: [{ |
|
|
|
text: '我要报名', |
|
|
|
text: '学车报名', |
|
|
|
icon: require('../../../static/images/index/ic_baoming.png'), |
|
|
|
url: '/pages/indexEntry/enroll/enroll', |
|
|
|
goPage: function (){ |
|
|
|
@ -146,7 +109,7 @@ |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: '找考场', |
|
|
|
text: '找教练', |
|
|
|
icon: require('../../../static/images/index/ic_kaochang.png'), |
|
|
|
url: '/pages/indexEntry/examines/examines', |
|
|
|
goPage: ((item)=>{ |
|
|
|
@ -154,7 +117,7 @@ |
|
|
|
}) |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: '找驾驶馆', |
|
|
|
text: '理论学习', |
|
|
|
icon: require('../../../static/images/index/ic_jsg.png'), |
|
|
|
url: '/pages/carEntry/simulateAppointment/simulateAppointment', |
|
|
|
goPage: ((item)=>{ |
|
|
|
@ -162,45 +125,12 @@ |
|
|
|
}) |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: '找陪练', |
|
|
|
text: '签到签退', |
|
|
|
icon: require('../../../static/images/index/ic_peilian.png'), |
|
|
|
goPage: ((item)=>{ |
|
|
|
this.$u.toast('正在开发中，敬请期待...') |
|
|
|
}) |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: '理论学习', |
|
|
|
icon: require('../../../static/images/index/ic_lilun.png'), |
|
|
|
url: '/pages/indexEntry/theory/theory', |
|
|
|
goPage: ((item)=>{ |
|
|
|
this.$goPage(item.url) |
|
|
|
}) |
|
|
|
}, |
|
|
|
], |
|
|
|
moreSection: [{ |
|
|
|
text: '摩托车业务', |
|
|
|
icon: require('../../../static/images/index/btn_motuoche.png'), |
|
|
|
url: '/pages/indexEntry/enroll/enroll' |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: '考试预约', |
|
|
|
icon: require('../../../static/images/index/btn_yuyue.png'), |
|
|
|
url: '/pages/indexEntry/findShcool/findShcool' |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: '交通求助', |
|
|
|
icon: require('../../../static/images/index/btn_jiuzhu.png'), |
|
|
|
url: '/pages/indexEntry/examines/examines' |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: '学驾保险', |
|
|
|
icon: require('../../../static/images/index/btn_baoxian.png'), |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: '更多', |
|
|
|
icon: require('../../../static/images/index/btn_gengduo.png'), |
|
|
|
url: '/pages/indexEntry/theory/theory' |
|
|
|
}, |
|
|
|
} |
|
|
|
], |
|
|
|
serviceSector: [{ |
|
|
|
text: '学车指南', |
|
|
|
@ -306,13 +236,7 @@ |
|
|
|
} |
|
|
|
this.$goPage(item.url) |
|
|
|
}, |
|
|
|
async goServiceSector(item) { |
|
|
|
if(item.text=='咨询投诉') { |
|
|
|
const res = this.$store.dispatch('checkLogin') |
|
|
|
if(!res) return |
|
|
|
} |
|
|
|
this.$goPage(item.url) |
|
|
|
}, |
|
|
|
|
|
|
|
async getarticleListFn() { |
|
|
|
const {data: res} = await getarticleList(this.params) |
|
|
|
this.swiperInfo = res.list[0].articleManagementDO |
|
|
|
@ -397,7 +321,23 @@ |
|
|
|
.main { |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.flex { |
|
|
|
.scan { |
|
|
|
width: 64rpx; |
|
|
|
height: 64rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.TopCon { |
|
|
|
width: 100%; |
|
|
|
height: 120rpx; |
|
|
|
.flex-b { |
|
|
|
display: flex; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
.adrsCon { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
width: 180rpx; |
|
|
|
height: 100%; |
|
|
|
.adrsIcon { |
|
|
|
width: 26rpx; |
|
|
|
height: 38rpx; |
|
|
|
@ -407,40 +347,24 @@ |
|
|
|
.adr { |
|
|
|
padding-left: 14rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #fff; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.rightScan { |
|
|
|
padding-right: 190rpx; |
|
|
|
.searchCon { |
|
|
|
flex:1; |
|
|
|
} |
|
|
|
|
|
|
|
.scan { |
|
|
|
width: 64rpx; |
|
|
|
height: 64rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.TopCon { |
|
|
|
width: 100%; |
|
|
|
height: 476rpx; |
|
|
|
// background: url('../../../static/images/bigImg/index_banner.png') no-repeat; |
|
|
|
// background: url('http://192.168.1.20:81/zhili/image/20230809/e7086ccf82ed4aa09d156f2590a50fba.png') no-repeat; |
|
|
|
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
.flex-b { |
|
|
|
padding: 10rpx 212rpx 0 50rpx; |
|
|
|
|
|
|
|
width: 100rpx; |
|
|
|
background-color: #ddd; |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
|
align-items: center; |
|
|
|
image { |
|
|
|
width: 90rpx; |
|
|
|
height: 90rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.searchCon { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
bottom: 68rpx; |
|
|
|
padding: 0 28rpx; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -451,13 +375,6 @@ |
|
|
|
border-radius: 16rpx; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
|
|
|
|
&.traTop { |
|
|
|
// transform: translateY(-40rpx); |
|
|
|
margin-top: -40rpx; |
|
|
|
position: relative; |
|
|
|
z-index: 9; |
|
|
|
} |
|
|
|
|
|
|
|
.ul { |
|
|
|
height: 236rpx; |
|
|
|
display: flex; |
|
|
|
@ -484,174 +401,18 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.ul3 { |
|
|
|
height: 128rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
padding: 0 30rpx; |
|
|
|
border: 2rpx solid #E8E9EC; |
|
|
|
border-radius: 16rpx; |
|
|
|
.li3 { |
|
|
|
// flex: 1; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
.icon { |
|
|
|
width: 52rpx; |
|
|
|
height: 52rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.name { |
|
|
|
font-size: 22rpx; |
|
|
|
color: #686B73; |
|
|
|
padding-top: 2rpx; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.information { |
|
|
|
padding: 0 20rpx; |
|
|
|
height: 320rpx; |
|
|
|
|
|
|
|
.border { |
|
|
|
height: 86rpx; |
|
|
|
border-bottom: 2px dashed #E8E9EC; |
|
|
|
|
|
|
|
.h1 { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
|
|
|
|
.more { |
|
|
|
font-size: 24rpx; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
.text { |
|
|
|
// margin-right: 8rpx; |
|
|
|
color: #686B73; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.swiper-item { |
|
|
|
height: 148rpx; |
|
|
|
|
|
|
|
.flex-b { |
|
|
|
padding: 30rpx 0 28rpx 0; |
|
|
|
|
|
|
|
.imgBox { |
|
|
|
width: 184rpx; |
|
|
|
height: 148rpx; |
|
|
|
background: linear-gradient(180deg, rgba(0, 122, 255, 0.5) 0%, #007AFF 100%); |
|
|
|
border-radius: 6rpx; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.rightText { |
|
|
|
flex: 1; |
|
|
|
padding: 0 0 0 30rpx; |
|
|
|
height: 148rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
.text { |
|
|
|
font-size: 24rpx; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
|
|
|
|
.date { |
|
|
|
text-align: right; |
|
|
|
font-size: 20rpx; |
|
|
|
color: #686B73; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.serviceCon { |
|
|
|
width: 100%; |
|
|
|
padding: 0 20rpx 20rpx 20rpx; |
|
|
|
|
|
|
|
.h1 { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #333; |
|
|
|
padding: 0 0 0 20rpx; |
|
|
|
font-weight: 500; |
|
|
|
line-height: 90rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.ul2 { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
.li2 { |
|
|
|
width: 48.8%; |
|
|
|
.tabs { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding: 14rpx 0 14rpx 14rpx; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
border-radius: 16rpx; |
|
|
|
height: 160rpx; |
|
|
|
|
|
|
|
&.li2Bg0 { |
|
|
|
background: linear-gradient(180deg, #F7FBFF 0%, #EFF6FF 100%); |
|
|
|
} |
|
|
|
|
|
|
|
&.li2Bg1 { |
|
|
|
background: linear-gradient(180deg, #FFFAF3 0%, #FFF4EA 100%); |
|
|
|
} |
|
|
|
|
|
|
|
&.li2Bg2 { |
|
|
|
background: linear-gradient(180deg, #F4FFF5 0%, #F3FFED 100%); |
|
|
|
} |
|
|
|
|
|
|
|
&.li2Bg3 { |
|
|
|
background: linear-gradient(180deg, #EFFFF9 0%, #E3FFF5 100%); |
|
|
|
} |
|
|
|
|
|
|
|
&.li2Bg4 { |
|
|
|
background: linear-gradient(180deg, #FAF9FF 0%, #F9F5FF 100%); |
|
|
|
} |
|
|
|
|
|
|
|
&.li2Bg5 { |
|
|
|
background: linear-gradient(180deg, #FCF9FB 0%, #FFF5F8 100%); |
|
|
|
} |
|
|
|
&.li2Bg6 { |
|
|
|
background: linear-gradient(180deg, #FDFFF3 0%, #F5FFE1 100%); |
|
|
|
} |
|
|
|
&.li2Bg7 { |
|
|
|
background: linear-gradient(180deg, #EDF7FF 0%, #F3F1FF 100%); |
|
|
|
} |
|
|
|
.icon { |
|
|
|
width: 80rpx; |
|
|
|
height: 80rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.textCon { |
|
|
|
// flex: 1; |
|
|
|
padding-left: 10rpx; |
|
|
|
|
|
|
|
.text { |
|
|
|
font-size: 32rpx; |
|
|
|
padding: 20rpx 0 10rpx 0; |
|
|
|
.tab { |
|
|
|
font-size: 30rpx; |
|
|
|
color: #333; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.tps { |
|
|
|
margin-top: 6rpx; |
|
|
|
font-size: 20rpx; |
|
|
|
color: #949494; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
margin-right: 20rpx; |
|
|
|
&.active { |
|
|
|
border-bottom: 4px solid $themC |
|
|
|
} |
|
|
|
} |
|
|
|
} |
