ParkApp/pages/index/index.vue

<template>
	<view style="min-height: 100vh;background-color: #FFFFFF;">
		<!-- 头部 -->
		<u-navbar :border-bottom="false" :is-back="false" title=" ">
			<view class="slot-wrap">
				<picker @change="ganderChange" range-key="name" :value="ganderIndex" :range="ganderArray">
				  <view class="padding-left-40 ">
				  	<text class="padding-right-10" style="font-size: 34rpx;">{{gander?gander:'暂无园区信息'}}</text>
					<u-icon  name="arrow-down-fill" top="-5" size="20" color="#7f7f7f"></u-icon>
				  </view>
				</picker>
			</view>
		</u-navbar>
		<!-- banner -->
		<swiper   class="screen-swiper square-dot "  :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in bannerList" :key="index">
				<image   :src="item.image" mode="aspectFill" ></image>
			</swiper-item>
		</swiper>
		<!-- 公告 -->
		<view class="">
			<view class="bg-white" style="height: 10rpx;"></view>
			<hotConsult   :swiperTexts="noticeList"></hotConsult>
		</view>
		
		<!-- 园区服务 -->
		<view class="bg-white">
			<view  style="padding: 30rpx 30rpx 0 30rpx; ">
				<text class="cuIcon-titles text-blue"></text>
				<text class="text-bold text-lg">园区服务</text>
			</view>
			<view class="nav-list  padding-top-30" >
				<view hover-class="none"
					@click="jump(item.index)"
					class="nav-li light"  :style="{backgroundColor:item.color}" 
					v-for="(item,index) in elements" :key="index">
					<view class="nav-title" style="color: #000000;font-size: 28rpx;">{{item.title}}</view>
					<view class="" style="padding-top: 10rpx;font-size: 24rpx;color: #acacac;">{{item.name}}</view>
					<image :src="item.icon" mode=""></image>
				</view>
			</view>
		</view>
		<view class="bg-white">
			<view  style="padding: 30rpx 30rpx 0 30rpx; ">
				<text class="cuIcon-titles text-blue"></text>
				<text class="text-bold text-lg">消防服务</text>
			</view>
			<view class="nav-list  padding-top-30" >
				<view hover-class="none"
					@click="jump(item.index)"
					class="nav-li light" navigateTo :style="{backgroundColor:item.color}" 
					v-for="(item,index) in fireList" :key="index">
					<view class="nav-title" style="color: #000000;font-size: 28rpx;">{{item.title}}</view>
					<view class="" style="padding-top: 10rpx;font-size: 24rpx;color: #acacac;">{{item.name}}</view>
					<image :src="item.icon" mode=""></image>
				</view>
			</view>
		</view>
		<!-- <u-divider bg-color="#f1f1f1" color="#62a3dc" border-color="#62a3dc"  height="100">查看更多</u-divider> -->
	</view>
</template>

<script>
import hotConsult from "@/components/hot-consult/hot-consult.vue"
export default {
	components:{
		hotConsult
	},
	data() {
		return {
		
			//园区 label
			gander:'新邻产业园',
			//默认选中下标
			ganderIndex:0, 
			//园区列表
			ganderArray:[], 
			
			//banner
			bannerList: [],
			// 公告
			noticeList:[],
			//消防服务
			fireList:[],
			//园区服务
		    elements: [],
			
		};
	},
	onLoad() {
		this.fetchStaticData()
	},
	methods:{
		ganderChange(e){
			console.log(e);
		},
		jump(index){
			let url=''
			if (index==1) {
				//我的企业
				url='/pages/company/company'
			}else if(index==2){
				//人员认证
				url="/pages/auth/auth"
			}else if (index==3) {
				//我的测温
				url="/pages/index/my-temperature/my-temperature"
			}else if (index==4) {
				//通行记录
				url="/pages/index/access-record/access-record"
			}
			if (!this.$isEmpty(url)) {
				uni.navigateTo({
					url:url
				})
			}
		},
		fetchStaticData(){
			this.bannerList=[
				{
				  'image': "http://139.9.103.171:1888/miniofile/xlyq/banner01.jpg"
				},
			]
			
			this.ganderArray=[
				{
					name:'新邻产业园',
					value:'1'
				},
				{
					name:'新邻工业园',
					value:'2'
				}
			]
			this.noticeList=[
				{
					title:'疫情期间，出入小区请佩戴好口罩，配合门卫大叔做好测温登记工作。谢谢大家的配合。'
				},
				{
					title:'停水停电通知。市政通水设施突发性故障抢修，本小区供水压力暂受影响，敬请做好储水准备，预约影响时间2020年11月28号22时至11月29号16时，由此给您带来不便，敬请谅解。'
				},
				{
					title:'2020年10月1日-2020年10月8日，中秋 国庆节放假，假期间需注意,祝国庆节玩的开心。'
				},
				{
					title:'疫情期间，出入小区请佩戴好口罩，配合门卫大叔做好测温登记工作。谢谢大家的配合。'
				}
			]
			
			this.elements=[
				{
					title: '我的企业',
					name: 'My business',
					color: '#f9f4f1',
					icon: '../../static/index/gander/qiye.png',
					index:1
				},
				{
					title: '人员认证',
					name: 'Personnel certification',
					color: '#ecf3f9',
					icon: '../../static/index/gander/renzheng.png',
					index:2
				}, 
				{
					title: '我的测温',
					name: 'My temperature',
					color: '#f0f3ff',
					icon: '../../static/index/gander/cewen1.png',
					index:3
				}, 
				{
					title: '通行记录',
					name: 'Access records',
					color: '#f7f7f5',
					icon: '../../static/index/gander/tongxing.png',
					index:4
				}
			]
			this.fireList=[
				{
					title: '烟感报警',
					name: 'Smoke alarm',
					color: '#f2f0fd',
					icon: '../../static/index/fire/yangan.png',
					index:5
				},
				{
					title: '燃气告警',
					name: 'Gas alarm',
					color: '#fffaf8',
					icon: '../../static/index/fire/ranqi.png',
					index:6
				}, 
				{
					title: '消防水压',
					name: 'Fire water pressure',
					color: '#ecf3f9',
					icon: '../../static/index/fire/xiaofang.png',
					index:7
				}, 
				{
					
				},
			]
		}
	}
};
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
		min-height: 100vh;
	}
	
	//四宫格 begin
	.nav-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.nav-li {
		padding: 30upx 30rpx;
		border-radius: 12upx;
		width: 44%;
		margin: 10rpx 2% 10upx;
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}
	.nav-li::after {
		content: "";
		position: absolute;
		z-index: -1;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10upx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}
	.nav-li.cur {
		color: #fff;
		background: rgb(94, 185, 94);
		box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
	}
	.nav-title {
		font-size: 32upx;
		font-weight: 300;
	}
	.nav-title::first-letter {
		font-size: 40upx;
		margin-right: 4upx;
	}
	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		margin-top: 20upx;
		position: relative;
	}
	.nav-name::before {
		content: "";
		position: absolute;
		display: block;
		width: 40upx;
		height: 6upx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}
	.nav-name::after {
		content: "";
		position: absolute;
		display: block;
		width: 100upx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40upx;
		opacity: 0.3;
	}
	.nav-name::first-letter {
		font-weight: bold;
		font-size: 36upx;
		margin-right: 1px;
	}
	.nav-li image {
		position: absolute;
		right: 30upx;
		top: 22upx;
		width: 66upx;
		height: 66upx;
	}
	//四宫格 end
	
</style>