property/user_ui/pages/index.vue

<template>
  <view :style="'padding-top:'+nvaHeight+'px;'">
		<view class="navbox">
			<uni-nav-bar  color="#ffffff" leftWidth='400rpx'  :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">
				<block slot="left">
					<view class="topl flexc">
						<image :src="adrimg" ></image>
						<view class="over">{{city}}</view>
					</view>
				</block>
			</uni-nav-bar>
		</view>
		<!-- 主体 -->
		<image :src="navbg" class="navbg"></image>
		<view class="wymain" >
			<view class="adrbox">
				<view class="flexc mb14">
					<image :src="adraimg" class="adr"></image>
					<view class="adrtit">智慧<text>社区</text></view>
				</view>
				<view class="adrtxt flexc mb4">
					<view class="over">嗨~刘源禧!</view><text>经理</text>
				</view>
				<view class="adrtip">幸福小区物业办公室</view>
				<image :src="adrbgimg" class="adrbgimg"></image>
			</view>
			<view class="mb22">
				<notice :noticelist="noticelist"  :autoplay='autoplay' @getNoticeDet="getNoticeDet"></notice>
			</view>
			<!-- 统计 -->
			<view class="contbox">
				<view class="cont flexc">
					<image :src="conta"></image>
					<view>今日数据统计</view>
				</view>
				<view class="lists">
					<view class="list">
						<view class="tit">21</view>
						<view class="txt">空闲车位</view>
					</view>
					<view class="list">
						<view class="tit">21</view>
						<view class="txt">空闲充电桩</view>
					</view>
					<view class="list">
						<view class="tit">21</view>
						<view class="txt">进入车辆</view>
					</view>
					<view class="list">
						<view class="tit">21</view>
						<view class="txt">离开车辆</view>
					</view>
					<view class="list">
						<view class="tit">21</view>
						<view class="txt">外来车辆</view>
					</view>
					<view class="list">
						<view class="tit">21</view>
						<view class="txt">违停登记</view>
					</view>
					<view class="list">
						<view class="tit">21</view>
						<view class="txt">外来人员</view>
					</view>
					<view class="list">
						<view class="tit">21</view>
						<view class="txt">进入人员</view>
					</view>
					<block v-if="zhanflag">
						<view class="list">
							<view class="tit ca">21</view>
							<view class="txt">已巡更</view>
						</view>
						<view class="list">
							<view class="tit ca">21</view>
							<view class="txt">未巡更</view>
						</view>
						<view class="list">
							<view class="tit cb">21</view>
							<view class="txt">家政订单</view>
						</view>
						<view class="list">
							<view class="tit cb">21</view>
							<view class="txt">完成订单</view>
						</view>
						<view class="list">
							<view class="tit cc">21</view>
							<view class="txt">今日报修</view>
						</view>
						<view class="list">
							<view class="tit cc">21</view>
							<view class="txt">已派报修</view>
						</view>
						<view class="list">
							<view class="tit cc">21</view>
							<view class="txt">投诉建议</view>
						</view>
						<view class="list">
							<view class="tit cc">21</view>
							<view class="txt">已回投诉</view>
						</view>
					</block>
				</view>
				<view class="upbox" @click="getZhanFn">
					<image :src="upimg" :class="zhanflag?'':'zhe'"></image>
					<view>{{zhanflag?'收起':'展开'}}</view>
				</view>
			</view>
			<view class="contbox mb16">
				<view class="cont flexc mb9">
					<image :src="contb"></image>
					<view>物业管理</view>
				</view>
				<view class="lists">
					<view class="list bimga" @click="getCarFn">
						<view class="imgs"><image :src="htaba" class="imga"></image></view>
						<view class="txt">车辆管控</view>
					</view>
					<view class="list bimga" @click="getCarKuFn">
						<view class="imgs"><image :src="htabb" class="imgb"></image></view>
						<view class="txt">车库管理</view>
					</view>
					<view class="list bimga" @click="getCarCheckFn">
						<view class="imgs"><image :src="htabc" class="imgc"></image></view>
						<view class="txt">外来车辆登记</view>
					</view>
					<view class="list bimga" @click="getillegalParkFn">
						<view class="imgs"><image :src="htabd" class="imgd"></image></view>
						<view class="txt">违停管理</view>
					</view>
					<view class="list bimga">
						<view class="imgs"><image :src="htabe" class="imge"></image></view>
						<view class="txt">人员管理</view>
					</view>
					<view class="list bimga">
						<view class="imgs"><image :src="htabf" class="imgf"></image></view>
						<view class="txt">来访管理</view>
					</view>
					<view class="list bimga">
						<view class="imgs"><image :src="htabg" class="imgd"></image></view>
						<view class="txt">物业费管理</view>
					</view>
					<view class="list bimga">
						<view class="imgs"><image :src="htabh" class="imgd"></image></view>
						<view class="txt">房屋管理</view>
					</view>
				</view>
			</view>
			<view class="contbox mb16">
				<view class="cont flexc mb9">
					<image :src="contc"></image>
					<view>物业服务</view>
				</view>
				<view class="lists">
					<view class="list bimga">
						<view class="imgs"><image :src="htabi" class="imgg"></image></view>
						<view class="txt">今日巡更</view>
					</view>
					<view class="list bimga">
						<view class="imgs"><image :src="htabj" class="imgb"></image><view class="tips">3</view>
						</view>
						<view class="txt">物业报修</view>
					</view>
					<view class="list bimga">
						<view class="imgs"><image :src="htabk" class="imgb"></image></view>
						<view class="txt">维修人员管理</view>
					</view>
					<view class="list bimga">
						<view class="imgs"><image :src="htabl" class="imga"></image><view class="tips">1</view></view>
						<view class="txt">投诉建议</view>
					</view>
				</view>
			</view>
			<view class="contbox mb16">
				<view class="cont flexc mb9">
					<image :src="contd"></image>
					<view>社区管理</view>
				</view>
				<view class="lists">
					<view class="list bimga">
						<view class="imgs"><image :src="htabm" class="imgh"></image></view>
						<view class="txt">党建信息</view>
					</view>
					<view class="list bimga">
						<view class="imgs"><image :src="htabn" class="imgi"></image><view class="tips">27</view></view>
						<view class="txt">社区资讯</view>
					</view>
					<view class="list bimga">
						<view class="imgs"><image :src="htabo" class="imgf"></image></view>
						<view class="txt">员工培训</view>
					</view>
					<view class="list bimga">
						<view class="imgs"><image :src="htabp" class="imgi"></image></view>
						<view class="txt">社区资产</view>
					</view>
				</view>
			</view>
		</view>
	<loading></loading>
	 <footers v-if="isfootflag"  :footerindex="footerindex"></footers>
  </view>
</template>

<script>
import footers from '@/components/footer/footer.vue'
import notice from '@/components/swiper/notice.vue'
  export default {
	components:{footers,notice},
	data(){
		return{
			footerindex:'home',
			isfootflag:true,
			nvaHeight:44,
			// activeColor:'#A7CDF9',
			// nactiveColor:'#DADADA',
			backgroundColor: "transparent",
			navbg:require("@/static/images/navbg.png"),
			adrimg:require("@/static/images/home/adr.png"),
			adraimg:require("@/static/images/home/adra.png"),
			adrbgimg:require("@/static/images/home/adrbg.png"),
			conta:require("@/static/images/home/conta.png"),
			contb:require("@/static/images/home/contb.png"),
			contc:require("@/static/images/home/contc.png"),
			contd:require("@/static/images/home/contd.png"),
			htaba:require("@/static/images/home/htaba.png"),
			htabb:require("@/static/images/home/htabb.png"),
			htabc:require("@/static/images/home/htabc.png"),
			htabd:require("@/static/images/home/htabd.png"),
			htabe:require("@/static/images/home/htabe.png"),
			htabf:require("@/static/images/home/htabf.png"),
			htabg:require("@/static/images/home/htabg.png"),
			htabh:require("@/static/images/home/htabh.png"),
			htabi:require("@/static/images/home/htabi.png"),
			htabj:require("@/static/images/home/htabj.png"),
			htabk:require("@/static/images/home/htabk.png"),
			htabl:require("@/static/images/home/htabl.png"),
			htabm:require("@/static/images/home/htabm.png"),
			htabn:require("@/static/images/home/htabn.png"),
			htabo:require("@/static/images/home/htabo.png"),
			htabp:require("@/static/images/home/htabp.png"),
			upimg:require("@/static/images/home/up.png"),
			city:'幸福大街',
			autoplay:false,
			zhanflag:true,
			noticelist:[{noticeTitle:"您有1条报修信息，请及时查看处理！",num:'4'},{noticeTitle:"您有1条报修信息，请及时查看处理！",num:'12'}]
		}
	},
	onPageScroll(e) {
		var scrollTop = Number(e.scrollTop);
		if (scrollTop > 0) {
			this.backgroundColor = '#C3EDFF'
		} else {
			this.backgroundColor = 'transparent'
		}
	},
    onLoad: function() {
		uni.getSystemInfo({
			success: (e) => {
				this.nvaHeight = Number(e.statusBarHeight)+44;
			}
		})
    },
	methods:{
		getNoticeDet(){
			
		},
		getZhanFn(){
			this.zhanflag=!this.zhanflag
		},
		getCarFn(){//车辆管控
			this.$tab.navigateTo(`/work/pages/car/index`) 
		},
		getCarKuFn(){//车库管理
			this.$tab.navigateTo(`/work/pages/car/carku`) 
		},
		getCarCheckFn(){//外来车辆登记
			this.$tab.navigateTo(`/work/pages/car/carcheck`) 
		},
		getillegalParkFn(){//违停管理
			this.$tab.navigateTo(`/work/pages/car/illegalParking`) 
		},
	}
  }
</script>
<style lang="scss" scoped>
.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;	}
.navbg{width: 100%;height: 782rpx;}
.wymain{z-index: 2;position: relative;padding: 0 24rpx;}
.topl{overflow: hidden;padding-left: 16rpx;
	image{width: 18rpx;height: 22rpx;margin-right: 14rpx;flex: 0 0 auto;}
	view{font-weight: bold;font-size: 26rpx;color: #272727;}
}
.adrbox{position: relative;padding:8rpx 240rpx 16rpx 36rpx;margin-bottom: 14rpx;
	.adr{width: 36rpx;height: 34rpx;margin-right: 14rpx;}
	.adrtit{font-size: 17px;color: #272727;font-weight: bold;
		text{color: #0256FD;}
	}
	.adrtxt{font-size: 16px;color: #272727;font-weight: bold;
		text{font-size: 10px;color: #3F7EFD;display: inline-flex;background: rgba(119, 171, 184, 0.3);margin-left: 22rpx;min-width: 66rpx;height: 30rpx;padding: 0 14rpx;box-sizing: border-box;flex: 0 0 auto;border-radius: 8px;align-items: center;justify-content: center;}
	}
	.adrtip{font-weight: 500;font-size: 24rpx;color: #828282;}

	.adrbgimg{width: 212rpx;height: 236rpx;position: absolute;right: 20rpx;top: -70rpx;}
}
.contbox{
	.cont{padding-left: 24rpx;margin-bottom: 12rpx;
		image{width: 32rpx;height: 32rpx;margin-right: 16rpx;}
		view{font-size: 15px;color: #272727;font-weight: bold;}
	}
	.lists{
		display: flex;align-items: center;flex-wrap: wrap;
		.list{padding: 8rpx 0;
			width: 25%;display: flex;flex-direction: column;align-items: center;
			.tit{font-weight: bold;font-size: 30rpx;color: #3565ED;line-height: 60rpx;font-style: italic;margin-bottom: 8rpx;
				&.ca{color: #FF7E00;}
				&.cb{color: #28C529;}
				&.cc{color: #FF3737;}
			}
			.txt{font-weight: 500;font-size: 26rpx;color: #272727;}
			&.bimga{padding: 16rpx 0;}
			.imgs{display: flex;align-items: center;justify-content: center;width: 48rpx;height: 48rpx;margin-bottom: 18rpx;position: relative;
				.imga{width: 48rpx;height: 38rpx;}
				.imgb{width: 48rpx;height: 46rpx;}
				.imgc{width: 44rpx;height: 48rpx;}
				.imgd{width: 48rpx;height: 42rpx;}
				.imge{width: 46rpx;height: 46rpx;}
				.imgf{width: 48rpx;height: 48rpx;}
				.imgg{width: 42rpx;height: 48rpx;}
				.imgh{width: 44rpx;height: 44rpx;}
				.imgi{width: 48rpx;height: 44rpx;}
				.tips{position: absolute;min-width: 20rpx;top: -4rpx;left: 36rpx;box-sizing: border-box;
height: 20rpx;padding: 0 4rpx;display: flex;align-items: center;justify-content: center;font-weight: bold;font-size: 16rpx;color: #FCF9F1;background: #D32C26;border-radius: 10rpx;
				}
			}
		}
	}
	.upbox{display: flex;align-items: center;justify-content: center;flex-direction: column;margin-top: 8rpx;padding-top: 8rpx;margin-bottom: 6rpx;
		image{width: 24rpx;height: 20rpx;margin-bottom: 8rpx;transition: all 0.3s;
			&.zhe{transform: rotate(-180deg);}
		}
		view{font-weight: 500;font-size: 22rpx;color: #AAAAAA;}
	}
}
</style>