|
|
|
@ -1,28 +1,29 @@ |
|
|
|
<template> |
|
|
|
<view class="main pageBg"> |
|
|
|
<view class="main"> |
|
|
|
<view class="status_bar"></view> |
|
|
|
<view class="TopCon pad" > |
|
|
|
<!-- 地址、扫一扫 --> |
|
|
|
<view class="flex-b"> |
|
|
|
<!-- 地址、 --> |
|
|
|
<view class="adrsCon"> |
|
|
|
<view class="adr">{{ vuex_cityInfo.city || '杭州' }} </view> |
|
|
|
<view class="adrsIcon"> |
|
|
|
<image src="@/static/images/index/dingwei.png" mode=""></image> |
|
|
|
<image src="@/static/images/icon/down.png" mode=""></image> |
|
|
|
</view> |
|
|
|
<view class="adr">{{ vuex_cityInfo.city || '杭州' }} </view> |
|
|
|
</view> |
|
|
|
<view class="flex-b"> |
|
|
|
<!-- 搜索 --> |
|
|
|
<view class="searchCon" @click.capture="$goPage('/pages/indexEntry/findShcool/searchShcool/searchShcool')"> |
|
|
|
<searchRow placeholder="搜索驾校、教练…" :disable="true"></searchRow> |
|
|
|
<searchRow placeholder="搜索驾校、教练…" :disable="true" bg="#fff"></searchRow> |
|
|
|
</view> |
|
|
|
<!-- 扫一扫 --> |
|
|
|
<view class="scan" @click="scanCodeFn"> |
|
|
|
<image src="@/static/images/index/scan.png" mode="aspectFill"></image> |
|
|
|
<image src="@/static/images/indexIcon/sancode.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" |
|
|
|
<view class="pad"> |
|
|
|
<uni-swiper-dot class="uni-swiper-dot-box bannerCon" @clickItem=clickItem :info="swiperInfo" v-if="swiperInfo.length" |
|
|
|
:current="current" :mode="mode" :dots-styles="dotsStyles" |
|
|
|
field="content"> |
|
|
|
<swiper class="swiper-box" @change="change" :current="swiperDotIndex" > |
|
|
|
@ -39,7 +40,7 @@ |
|
|
|
|
|
|
|
<view class="pad"> |
|
|
|
<!-- 精钢区 --> |
|
|
|
<view class="card traTop"> |
|
|
|
<view class="card"> |
|
|
|
<view class="ul"> |
|
|
|
<view class="li" v-for="(item,index) in entrySection" :key="index" @tap="entrySectionClick(item)"> |
|
|
|
<view class="icon"> |
|
|
|
@ -51,25 +52,71 @@ |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 优质驾校 --> |
|
|
|
<view class="schoolCon"> |
|
|
|
<view class="h1" style="margin: 28rpx 0;">优质驾校</view> |
|
|
|
<view class="schoolCon card"> |
|
|
|
<view class="h1_row"> |
|
|
|
<view class="h1" style="margin: 28rpx 0;"><text class="active">优质驾校</text></view> |
|
|
|
<moreRight text="查看全部"/> |
|
|
|
</view> |
|
|
|
<view class="li" v-for="(item,index) in 3" :key="index"> |
|
|
|
<schoolItem/> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 推荐教练 --> |
|
|
|
<view class="coachCon"> |
|
|
|
<view class="h1_row"> |
|
|
|
<view class="h1" style="margin: 28rpx 0;"><text class="active">推荐教练</text></view> |
|
|
|
<moreRight text="查看全部"/> |
|
|
|
</view> |
|
|
|
|
|
|
|
<scroll-view style="width: 100%;" scroll-x="true" scroll-with-animation > |
|
|
|
<view class="ul3"> |
|
|
|
<view class="li3" v-for="item in 6" :key="item"> |
|
|
|
<coachItem/> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 行业资讯，政策法规 --> |
|
|
|
<view class="information"> |
|
|
|
<view class="card"> |
|
|
|
<view class="h1_row"> |
|
|
|
<view class="tabs"> |
|
|
|
<view class="tab active">行业资讯</view> |
|
|
|
<view class="tab">政策法规</view> |
|
|
|
<view class="h1 "><text class="active">行业资讯</text></view> |
|
|
|
<view class="h1"><text>政策法规</text></view> |
|
|
|
</view> |
|
|
|
<view class="ul"> |
|
|
|
<view class="li" v-for="(item,index) in 3" :key="index"> |
|
|
|
<moreRight text="查看全部"/> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="ul2"> |
|
|
|
<view class="li2" v-for="(item,index) in 3" :key="index"> |
|
|
|
<informaItem/> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 服务专区 --> |
|
|
|
<view class="card"> |
|
|
|
<view class="h1" style="margin-top: 20rpx;"><text class="active">服务专区</text></view> |
|
|
|
<view class="severCon"> |
|
|
|
<view class="severItem"> |
|
|
|
<view class="tit">学车指南</view> |
|
|
|
<view class="tps">查看详细的学车流程</view> |
|
|
|
<view class="go"> |
|
|
|
<view class="goTxt">GO</view> |
|
|
|
<u-icon name="arrow-right" color="#fff" size="14"></u-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="severItem tow"> |
|
|
|
<view class="tit">学车指南</view> |
|
|
|
<view class="tps">查看详细的学车流程</view> |
|
|
|
<view class="go"> |
|
|
|
<view class="goTxt">GO</view> |
|
|
|
<u-icon name="arrow-right" color="#fff" size="14"></u-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<u-popup :show="showPrivacy" mode="center" :round="20" > |
|
|
|
@ -83,8 +130,9 @@ |
|
|
|
import { getarticleList } from '@/config/api.js' |
|
|
|
import schoolItem from './comp/schoolItem' |
|
|
|
import informaItem from './comp/informaItem' |
|
|
|
import coachItem from './comp/coachItem' |
|
|
|
export default { |
|
|
|
components: { schoolItem, informaItem }, |
|
|
|
components: { schoolItem, informaItem, coachItem }, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
showPrivacy: false, |
|
|
|
@ -93,7 +141,7 @@ |
|
|
|
keywords: '', |
|
|
|
entrySection: [{ |
|
|
|
text: '学车报名', |
|
|
|
icon: require('../../../static/images/index/ic_baoming.png'), |
|
|
|
icon: require('../../../static/images/indexIcon/entryIcon (3).png'), |
|
|
|
url: '/pages/indexEntry/enroll/enroll', |
|
|
|
goPage: function (){ |
|
|
|
console.log(666) |
|
|
|
@ -102,7 +150,7 @@ |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: '找驾校', |
|
|
|
icon: require('../../../static/images/index/ic_jiaxiao.png'), |
|
|
|
icon: require('../../../static/images/indexIcon/entryIcon (4).png'), |
|
|
|
url: '/pages/indexEntry/findShcool/findShcool', |
|
|
|
goPage: (item)=>{ |
|
|
|
this.$goPage(item.url) |
|
|
|
@ -110,27 +158,27 @@ |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: '找教练', |
|
|
|
icon: require('../../../static/images/index/ic_kaochang.png'), |
|
|
|
icon: require('../../../static/images/indexIcon/entryIcon (1).png'), |
|
|
|
url: '/pages/indexEntry/examines/examines', |
|
|
|
goPage: ((item)=>{ |
|
|
|
this.$goPage(item.url) |
|
|
|
}) |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: '理论学习', |
|
|
|
icon: require('../../../static/images/index/ic_jsg.png'), |
|
|
|
url: '/pages/carEntry/simulateAppointment/simulateAppointment', |
|
|
|
text: '签到签退', |
|
|
|
icon: require('../../../static/images/indexIcon/entryIcon (5).png'), |
|
|
|
goPage: ((item)=>{ |
|
|
|
this.$goPage(item.url) |
|
|
|
this.$u.toast('正在开发中，敬请期待...') |
|
|
|
}) |
|
|
|
}, |
|
|
|
{ |
|
|
|
text: '签到签退', |
|
|
|
icon: require('../../../static/images/index/ic_peilian.png'), |
|
|
|
text: '理论学习', |
|
|
|
icon: require('../../../static/images/indexIcon/entryIcon (2).png'), |
|
|
|
url: '/pages/carEntry/simulateAppointment/simulateAppointment', |
|
|
|
goPage: ((item)=>{ |
|
|
|
this.$u.toast('正在开发中，敬请期待...') |
|
|
|
this.$goPage(item.url) |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
], |
|
|
|
serviceSector: [{ |
|
|
|
text: '学车指南', |
|
|
|
@ -184,7 +232,10 @@ |
|
|
|
swiperDotIndex: 0, |
|
|
|
current: 1, |
|
|
|
mode: 'default', |
|
|
|
swiperInfo: [], |
|
|
|
swiperInfo: [ |
|
|
|
{picture: require('../../../static/images/bigImg/banner.jpg')}, |
|
|
|
{picture: require('../../../static/images/bigImg/banner2.jpg')} |
|
|
|
], |
|
|
|
dotsStyles: { |
|
|
|
backgroundColor: '#E8E9EC', |
|
|
|
border: '1px #E8E9EC solid', |
|
|
|
@ -213,13 +264,14 @@ |
|
|
|
// console.log(this.$store.state.user.vuex_cityInfo) |
|
|
|
}, |
|
|
|
onPullDownRefresh() { |
|
|
|
this.getarticleListFn() |
|
|
|
|
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
this.$store.dispatch('getUserInfo') |
|
|
|
if(!this.swiperInfo.length) { |
|
|
|
this.getarticleListFn() |
|
|
|
// this.getarticleListFn() |
|
|
|
} |
|
|
|
this.getarticleListFn() |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
|
|
|
|
@ -239,7 +291,7 @@ |
|
|
|
|
|
|
|
async getarticleListFn() { |
|
|
|
const {data: res} = await getarticleList(this.params) |
|
|
|
this.swiperInfo = res.list[0].articleManagementDO |
|
|
|
// this.swiperInfo = res.list[0].articleManagementDO |
|
|
|
}, |
|
|
|
async refereshFn() { |
|
|
|
const res = await this.$store.dispatch('refreshToken') |
|
|
|
@ -318,57 +370,80 @@ |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.main { |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.scan { |
|
|
|
width: 64rpx; |
|
|
|
height: 64rpx; |
|
|
|
.h1_row { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding-right: 20rpx; |
|
|
|
} |
|
|
|
.h1 { |
|
|
|
padding-top: 10rpx; |
|
|
|
.active { |
|
|
|
&::before { |
|
|
|
// width: 54rpx; |
|
|
|
// height: 12rpx; |
|
|
|
background: url('../../../static/images/icon/h1Active.png') #F6F7FA no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
.ul2 { |
|
|
|
padding: 10rpx 20rpx 0 20rpx; |
|
|
|
} |
|
|
|
.main { |
|
|
|
width: 100%; |
|
|
|
background: url('../../../static/images/bigImg/homeBg.png') #F6F7FA no-repeat; |
|
|
|
background-size: 100% 600rpx; |
|
|
|
.TopCon { |
|
|
|
width: 100%; |
|
|
|
height: 120rpx; |
|
|
|
// height: 120rpx; |
|
|
|
.flex-b { |
|
|
|
display: flex; |
|
|
|
height: 100%; |
|
|
|
height: 72rpx; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
} |
|
|
|
.adrsCon { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
width: 180rpx; |
|
|
|
height: 100%; |
|
|
|
height: 88rpx; |
|
|
|
.adrsIcon { |
|
|
|
width: 26rpx; |
|
|
|
height: 38rpx; |
|
|
|
width: 17rpx; |
|
|
|
height: 17rpx; |
|
|
|
margin-top: 4rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.adr { |
|
|
|
padding-left: 14rpx; |
|
|
|
padding-right: 14rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #333; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.searchCon { |
|
|
|
flex:1; |
|
|
|
|
|
|
|
} |
|
|
|
.scan { |
|
|
|
width: 100rpx; |
|
|
|
background-color: #ddd; |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
|
align-items: center; |
|
|
|
image { |
|
|
|
width: 90rpx; |
|
|
|
height: 90rpx; |
|
|
|
width: 52rpx; |
|
|
|
height: 52rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.bannerCon { |
|
|
|
border-radius: 20rpx; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.card { |
|
|
|
background: #FFFFFF; |
|
|
|
@ -376,7 +451,7 @@ |
|
|
|
margin-bottom: 20rpx; |
|
|
|
|
|
|
|
.ul { |
|
|
|
height: 236rpx; |
|
|
|
height: 164rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
@ -389,8 +464,8 @@ |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
.icon { |
|
|
|
width: 92rpx; |
|
|
|
height: 92rpx; |
|
|
|
width: 72rpx; |
|
|
|
height: 72rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.name { |
|
|
|
@ -407,13 +482,52 @@ |
|
|
|
.tabs { |
|
|
|
display: flex; |
|
|
|
padding: 20rpx 0 10rpx 0; |
|
|
|
.tab { |
|
|
|
font-size: 30rpx; |
|
|
|
color: #333; |
|
|
|
margin-right: 20rpx; |
|
|
|
&.active { |
|
|
|
border-bottom: 4px solid $themC |
|
|
|
|
|
|
|
} |
|
|
|
.severCon { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 40rpx 20rpx 20rpx 20rpx; |
|
|
|
} |
|
|
|
.severItem { |
|
|
|
width: 320rpx; |
|
|
|
height: 186rpx; |
|
|
|
background: url('../../../static/images/indexIcon/xccard.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
padding: 30rpx 20rpx; |
|
|
|
font-size: 24rpx; |
|
|
|
color: #fff; |
|
|
|
&.tow { |
|
|
|
background: url('../../../static/images/indexIcon/zxcard.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
.go { |
|
|
|
background: #2AB188; |
|
|
|
} |
|
|
|
} |
|
|
|
.tit { |
|
|
|
font-size: 32rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.tps { |
|
|
|
opacity: 0.8; |
|
|
|
margin: 12rpx 0; |
|
|
|
} |
|
|
|
|
|
|
|
.go { |
|
|
|
width: 70rpx; |
|
|
|
height: 38rpx; |
|
|
|
background: #1A61FB; |
|
|
|
border-radius: 10rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
.goTxt { |
|
|
|
padding-left: 4rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.ul3 { |
|
|
|
display: flex; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
} |
|
|
|
</style> |
