|
|
<template> <view class="main pageBg"> <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> --> <view class="TopCon"> <view class="status_bar"></view> <!-- 地址、扫一扫 --> <view class="flex-b"> <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 class="scan" @click="scanCodeFn"> <image src="@/static/images/index/scan.png" mode=""></image> </view> </view> <!-- 搜索 --> <view class="searchCon"> <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" @click="goPageSection(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="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> </view> </view> <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="swiperInfo" :current="current" :mode="mode" style="height: 230rpx;" :dots-styles="dotsStyles" field="content"> <swiper class="swiper-box" @change="change" :current="swiperDotIndex" style="height: 230rpx;"> <swiper-item v-for="(item, index) in swiperInfo" :key="index" @click="$goPage('/pages/indexEntry/examines/newsDetail/newsDetail')"> <view class="swiper-item" :class="'swiper-item' + index"> <view class="flex-b"> <view class="imgBox"> <image src="../../../static/images/logo.png" mode=""></image> </view> <view class="rightText"> <view class="text towRowText">{{ item.text }}</view> <view class="date">{{ item.date}}</view> </view> </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"> <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> </view> </view> </view> <view style="height: 20rpx;width: 100%;"></view> </view> <u-popup :show="showPrivacy" mode="center" :round="20" > <privacyPopup @disagree="showPrivacy=false" @agree="showPrivacy=false"></privacyPopup> </u-popup> </view></template>
<script> export default { data() { return { showPrivacy: false, keywords: '', entrySection: [{ text: '我要报名', icon: require('../../../static/images/index/ic_baoming.png'), }, { text: '找驾校', icon: require('../../../static/images/index/ic_jiaxiao.png'), url: '/pages/indexEntry/findShcool/findShcool' }, { text: '找考场', icon: require('../../../static/images/index/ic_kaochang.png'), url: '/pages/indexEntry/examines/examines' }, { text: '找陪练', icon: require('../../../static/images/index/ic_peilian.png'), }, { text: '理论学习', icon: require('../../../static/images/index/ic_lilun.png'), url: '/pages/indexEntry/theory/theory' }, ], serviceSector: [{ text: '学车指南', tps: '政府平台 一站服务', icon: require('../../../static/images/index/img_1@2x.png'), url: '' }, { text: '公益视频', tps: '立体呈现 学驾无忧', icon: require('../../../static/images/index/img_2@2x.png'), url: '' }, { text: '合格率排行', tps: '官方数据 阳光透明', icon: require('../../../static/images/index/img_3@2x.png'), url: '' }, { text: '行业政策', tps: '权威发布 精准解读', icon: require('../../../static/images/index/img_4@2x.png'), url: '' }, { text: '质量信誉排行', tps: '官方数据 阳光透明', icon: require('../../../static/images/index/img_5@2x.png'), url: '' }, { text: '咨询投诉', tps: '畅达沟通 听取民声', icon: require('../../../static/images/index/img_6@2x.png'), url: '' }, ], swiperDotIndex: 1, current: 1, mode: 'default', swiperInfo: [{ img: require('../../../static/images/index/ic_lilun.png'), text: '2023年6月份江西省机动车驾驶培训机构考试合格率的通报', date: '2023/08/09' }, { img: require('../../../static/images/index/ic_lilun.png'), text: '2023年6月份江西省机动车驾驶培训机构考试合格率的通报', date: '2023/08/10' }, { img: require('../../../static/images/index/ic_lilun.png'), text: '2023年6月份江西省机动车驾驶培训机构考试合格率的通报', date: '2023/08/11' }, ], dotsStyles: { backgroundColor: '#E8E9EC', border: '1px #E8E9EC solid', color: '#fff', selectedBackgroundColor: '#1989FA', selectedBorder: '1px #1989FA solid' }, bgColor: 'transparent' } }, async onLoad() { // await this.$store.dispatch('getCity')
// console.log('有 啦')
// console.log(this.$store.state.user.vuex_cityInfo.city)
},
onShow() {
}, computed: { // joe() {
// return '我的名字'
// }
}, methods: { close() { }, goPageSection(item) { uni.navigateTo({ url:item.url }) }, // 扫码
scanCodeFn() { let _this = this uni.scanCode({ success: function(res) { console.log('条码类型：' + res.scanType); console.log('条码内容：' + res.result); _this.$store.commit('updateWebVeiwUrl', res.result) uni.navigateTo({ url: '/pages/other/webView/webView' }) } }); }, clickItem(e) { this.swiperDotIndex = e }, change(e) { this.current = e.detail.current }, goPage() { uni.navigateTo({ url: '/pages/userCenter/login/loginByPhone' }) }, initFn() { uni.requestSubscribeMessage({ tmplIds: ['0yaIdyI9NlHvGYwb3IIaIQq6uBhulYGN-rGVnJk4hZ4'], success(res) { console.log('消息是否有权限呢') console.log(res) } }) } } }</script>
<style lang="scss" scoped> .main { width: 100%;
.flex { .adrsIcon { width: 26rpx; height: 38rpx; margin-top: 4rpx; }
.adr { padding-left: 14rpx; font-size: 28rpx; color: #fff; } }
.rightScan { padding-right: 190rpx; }
.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;
background-size: 100% 100%; position: relative;
.flex-b { padding: 10rpx 212rpx 0 50rpx;
}
.searchCon { position: absolute; left: 0; bottom: 68rpx; padding: 0 28rpx; width: 100%;
} }
.card { background: #FFFFFF; border-radius: 16rpx; margin-bottom: 20rpx;
&.traTop { // transform: translateY(-40rpx);
margin-top: -40rpx; position: relative; z-index: 9; }
.ul { height: 236rpx; display: flex; justify-content: space-between; align-items: center; padding: 0 20rpx;
.li { flex: 1; display: flex; align-items: center; flex-direction: column;
.icon { width: 92rpx; height: 92rpx; }
.name { font-size: 26rpx; color: #333; padding-top: 20rpx; 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-bottom: 20rpx;
.h1 { font-size: 28rpx; color: #333; padding: 0 0 0 20rpx; font-weight: 500; line-height: 90rpx; }
.ul2 { padding: 0 20rpx; display: flex; flex-wrap: wrap; justify-content: space-between;
.li2 { width: 48.8%; 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%); }
.icon { width: 80rpx; height: 80rpx; }
.textCon { // flex: 1;
padding-left: 16rpx;
.text { font-size: 32rpx; color: #333; font-weight: 500; }
.tps { margin-top: 6rpx; font-size: 20rpx; color: #949494; } } } } } }</style>
|
