androidCnToWechatGrt/pagesInspection/index.vue

<template>
	<view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='智能巡检' :showback='false' bgColor='transparent'></cus-header>
		<image class="topbg" :src="imgBase+'inspection/inspection_top_bg.png'" mode="widthFix"></image>
		<div class="top">
			<div class="box">
				<image :src="imgBase+'inspection/inspection_img_xsbx.png'"></image>
				<text>线上报修</text>
			</div>
			<div class="box">
				<image :src="imgBase+'inspection/inspection_img_xjjl.png'"></image>
				<text>巡检记录</text>
			</div>
			<div class="box">
				<image :src="imgBase+'inspection/inspection_img_kjjl.png'"></image>
				<text>扣缴记录</text>
			</div>
		</div>
		<div class="card">
			<div class="title">
				<div class="left">工单待办</div>
				<div class="right">
					<text>立即查看</text>
					<u-icon name="arrow-right" color="#198CFF" size="28"></u-icon>
				</div>
			</div>
			<div class="info">
				<div class="pre">
					<text>{{3}}</text>
					<p>待指派</p>
				</div>
				<div class="pre">
					<text>{{2}}</text>
					<p>待维修</p>
				</div>
				<div class="pre">
					<text>{{1}}</text>
					<p>已维修</p>
				</div>
			</div>
		</div>
		<div class="card">
			<div class="title">
				<div class="left">设备</div>
				<div class="right">
					<text>立即查看</text>
					<u-icon name="arrow-right" color="#198CFF" size="28"></u-icon>
				</div>
			</div>
			<div class="info">
				<div class="pre">
					<text>{{3}}</text>
					<p>设备总数</p>
				</div>
				<div class="pre">
					<text>{{2}}</text>
					<p>正常设备</p>
				</div>
				<div class="pre">
					<text>{{1}}</text>
					<p>异常设备</p>
				</div>
			</div>
		</div>
		<Tabbar :tabbarIndex="1"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/CusTabbar/index.vue'
	export default {
		components:{
			Tabbar
		},
		data(){
			return {
				
			}
		},
		methods:{
			
		}
	}
</script>

<style scoped lang="less">
	.tabPage{
		width: 100%;
		padding: 0 24rpx 188rpx;
		box-sizing: border-box;
		background: #F4F8FB;
		
		.topbg{
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 0;
		}
		
		.top{
			width: 100%;
			position: relative;
			display: flex;
			justify-content: space-around;
			margin-top: 20rpx;
			.box{
				width: calc(100% / 3 - 10rpx);
				padding: 36rpx 0 40rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					width: 98rpx;
					height: 98rpx;
				}
				text{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					line-height: 28rpx;
					text-align: center;
					margin-top: 20rpx;
				}
			}
		}
		
		.card{
			width: 100%;
			position: relative;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 36rpx 0 40rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			.title{
				width: 100%;
				padding: 0 24rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
					line-height: 36rpx;
					text-align: left;
				}
				.right{
					display: flex;
					align-content: center;
					text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #198CFF;
						line-height: 28rpx;
						text-align: left;
					}
				}
			}
			.info{
				width: 100%;
				margin-top: 64rpx;
				display: flex;
				.pre{
					width: calc(100% / 3);
					display: flex;
					flex-direction: column;
					align-items: center;
					text{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 36rpx;
						color: #333333;
						line-height: 36rpx;
					}
					p{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
						line-height: 28rpx;
						text-align: center;
						margin-top: 20rpx;
					}
				}
			}
		}
	}
</style>