|
|
<template> <view class="main pageBg"> <view style="background-color: #2170FD; width: 100%;height: 20rpx;"></view> <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">南昌市</view> </view> <view class="scan" @click="scanCodeFn"> <image src="@/static/images/index/scan.png" mode=""></image> </view> </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> </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="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"> <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"> <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> </view></template>
<script>
export default { data() { return { keywords: '', entrySection: [ {text: '我要报名', icon: require('../../../static/images/index/ic_baoming.png'), }, {text: '找驾校', icon: require('../../../static/images/index/ic_jiaxiao.png'), }, {text: '找考场', icon: require('../../../static/images/index/ic_kaochang.png'), }, {text: '找陪练', icon: require('../../../static/images/index/ic_peilian.png'), }, {text: '理论学习', icon: require('../../../static/images/index/ic_lilun.png'), }, ], 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' }, } }, onLoad() { }, onShow() { // this.initFn()
}, methods: { // 扫码
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%; .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; .flex { .adrsIcon { width: 26rpx; height: 38rpx; margin-top: 4rpx; }
.adr { padding-left: 14rpx; font-size: 28rpx; color: #fff; } }
.scan { width: 64rpx; height: 64rpx; } }
.searchCon { position: absolute; left: 0; bottom: 68rpx; 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; } } } } }
.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>
|
