androidCnToWechatGrt/pagesHome/index.vue

<template>
	<view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='首页' :titleStyle="{color:'transparent'}" :showback='false' bgColor='transparent'></cus-header>
		<image class="topbg" :src="imgBase+'home/home_top_bg.png'" mode="widthFix"></image>
		<div class="header">
			<div class="top">
				<div class="left">
					<div class="title">
						<text>谷锐特</text>
						<u-icon name="arrow-right" color="#FFFFFF" size="32"></u-icon>
					</div>
					<div class="tip">{{time}}，天气{{weatherInfo.wea||''}}，共有{{deviceNum}}个设备正在运行</div>
				</div>
				<div class="right">
					<image :src="avatar"></image>
				</div>
			</div>
			<div class="weather">
				<div class="item line">
					<div class="text">{{weatherInfo.air_level||''}}</div>
					<p>空气质量</p>
				</div>
				<div class="item line">
					<div class="text">{{weatherInfo.tem||''}}<span>℃</span></div>
					<p>温度</p>
				</div>
				<div class="item">
					<div class="text">{{weatherInfo.humidity||''}}<span>%</span></div>
					<p>湿度</p>
				</div>
			</div>
		</div>
		<div class="boxs">
			<div class="box">
				<div class="left">
					<image :src="imgBase+'home/home_icon_spjk.png'"></image>
					<text>视频监控</text>
				</div>
				<div class="right">
					<div class="num">{{18}}</div>
					<div class="wz">设备</div>
				</div>
			</div>
			<div class="box">
				<div class="left">
					<image :src="imgBase+'home/home_icon_zhkt.png'"></image>
					<text>智慧空调</text>
				</div>
				<div class="right">
					<div class="num">{{18}}</div>
					<div class="wz">设备</div>
				</div>
			</div>
			<div class="box">
				<div class="left">
					<image :src="imgBase+'home/home_icon_mjgl.png'"></image>
					<text>门禁管理</text>
				</div>
				<div class="right">
					<div class="num">{{18}}</div>
					<div class="wz">设备</div>
				</div>
			</div>
			<div class="box">
				<div class="left">
					<image :src="imgBase+'home/home_icon_yggl.png'"></image>
					<text>员工管理</text>
				</div>
				<div class="right">
					<div class="num">{{18}}</div>
					<div class="wz">设备</div>
				</div>
			</div>
			<div class="box">
				<div class="left">
					<image :src="imgBase+'home/home_icon_nhfx.png'"></image>
					<text>能耗分析</text>
				</div>
				<div class="right">
					<div class="num">{{18}}</div>
					<div class="wz">设备</div>
				</div>
			</div>
			<div class="box">
				<div class="left">
					<image :src="imgBase+'home/home_icon_db.png'"></image>
					<text>电表</text>
				</div>
				<div class="right">
					<div class="num">{{18}}</div>
					<div class="wz">设备</div>
				</div>
			</div>
		</div>
		<Tabbar :tabbarIndex="0"></Tabbar>
	</view>
</template>

<script>
	var amapFile = require('@/utils/amap-wx.130.js');
	import Tabbar from '@/components/CusTabbar/index.vue'
	export default {
		components:{
			Tabbar
		},
		data(){
			return {
				avatar:this.$imgBase+'home/home_avator.png',
				time:'早上好',
				deviceNum:0,
				weatherInfo:{}
			}
		},
		onLoad() {
			this.getTime();
			this.getWeather();
		},
		methods:{
			getTime(){
				let hours = new Date().getHours()+1;
				if(hours<=8) this.time = '早上好';
				else if(hours<=11) this.time = '上午好';
				else if(hours<=13) this.time = '中午好';
				else if(hours<=18) this.time = '下午好';
				else if(hours<=24) this.time = '晚上好';
			},
			getWeather(){
				uni.request({
					url:'http://gfeljm.tianqiapi.com/free/v2030?appid=31449887&appsecret=7F6JCrvB&adcode=340100000000',
					success:res=>{
						this.weatherInfo = res.data;
						this.weatherInfo.humidity = this.weatherInfo.humidity.replace('%','')
					}
				})
				var myAmapFun = new amapFile.AMapWX({key:'f83be04fc5f239edfa9f1201e4bc7c47key'});
				myAmapFun.getWeather({
					success: function(data) {
						console.log(data);
					}
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.tabPage{
		width: 100%;
		padding: 0 0 188rpx;
		box-sizing: border-box;
		background: #F4F8FB;
		
		.topbg{
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 0;
		}
		
		.header{
			width: 100%;
			position: relative;
			
			.top{
				width: 100%;
				padding: 26rpx 40rpx 0;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					.title{
						display: flex;
						align-items: center;
						text{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 48rpx;
							color: #FFFFFF;
							line-height: 48rpx;
							text-align: left;
							letter-spacing: 2rpx;
							margin-right: 20rpx;
						}
					}
					.tip{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 30rpx;
						text-align: left;
						margin-top: 20rpx;
					}
				}
				.right{
					width: 90rpx;
					height: 90rpx;
					background: #FFFFFF;
					padding: 2rpx;
					box-sizing: border-box;
					border-radius: 50%;
					image{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}
			
			.weather{
				width: 100%;
				margin-top: 50rpx;
				display: flex;
				.item{
					width: calc(100% / 3);
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
					&::after{
						content: '';
						width: 1rpx;
						height: 64rpx;
						background: #CCCCCC;
						position: absolute;
						top:10rpx;
						right: 0;
					}
					.text{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 44rpx;
						color: #FFFFFF;
						line-height: 44rpx;
						span{
							font-weight: 400;
							font-size: 20rpx;
						}
					}
					p{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 24rpx;
						text-align: center;
						margin-top: 16rpx;
					}
				}
			}
		}
		
		.boxs{
			width: calc(100% - 48rpx);
			margin: 20rpx 24rpx 0;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			position: relative;
			.box{
				width: calc(50% - 11rpx);
				padding: 36rpx 25rpx 40rpx 22rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 8rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				margin-top: 20rpx;
				.left{
					display: flex;
					flex-direction: column;
					image{
						width: 90rpx;
						height: 88rpx;
					}
					text{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						line-height: 28rpx;
						text-align: left;
						margin-top: 24rpx;
						padding-left: 2rpx;
					}
				}
				.right{
					display: flex;
					flex-direction: column;
					align-items: center;
					.num{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
						line-height: 32rpx;
						text-align: center;
					}
					.wz{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 24rpx;
						text-align: center;
						margin-top: 24rpx;
					}
				}
			}
		}
	}
</style>