wit-uniapp/pages/Workorder/Workorder.vue

<template>
	<view class="content">
		<u-cell-group class="toptemplate">
			<view style="height: 20px;"></view>
			<u-cell title="跨境电商" :border="false">
				<u-icon slot="icon" size="40" color="#fff" name="map"></u-icon>
			</u-cell>
		</u-cell-group>
		<view class="managelind">
			<view class="managename" >
				<u-cell title="电表" :isLink="true" arrow-direction="right" :border="false"
					style="margin: -10px -15px;"></u-cell>
				<u--image mode="widthFix" :src="elec"  width="96rpx" height="96rpx" style="align-items: center;margin:16rpx 0;"></u--image>
				<view class="status">
					<view><text class="circle"></text>在线</view>
					<view><text class="circle on"></text>离线</view>
				</view>
			</view>
			<view class="managename">
				<u-cell title="水表" :isLink="true" arrow-direction="right" :border="false"
					style="margin: -10px -15px;"></u-cell>
				<u--image mode="widthFix" :src="water"  width="96rpx" height="96rpx" style="align-items: center;margin:16rpx 0;"></u--image>
				<view class="status">
					<view><text class="circle"></text>在线</view>
					<view><text class="circle on"></text>离线</view>
				</view>
			</view>
			<view class="managename" @click="Remotecontrol(1)" v-if="$has('app:TenantBill')">
				<u-cell title="空调" :isLink="true" arrow-direction="right" :border="false"
					style="margin: -10px -15px;"></u-cell>
				<u--image mode="widthFix" :src="ac"  width="96rpx" height="96rpx" style="align-items: center;margin:16rpx 0;"></u--image>
				<view class="status">
					<view><text class="circle"></text>开启</view>
					<view><text class="circle on"></text>关闭</view>
				</view>
			</view>
			<view class="managename" @click="Remotecontrol(2)" v-if="$has('app:TenantBill')">
				<u-cell title="照明" :isLink="true" arrow-direction="right" :border="false"
					style="margin: -10px -15px;"></u-cell>
				<u--image mode="widthFix" :src="light"  width="96rpx" height="96rpx" style="align-items: center;margin:16rpx 0;"></u--image>
				<view class="status">
					<view><text class="circle"></text>开启</view>
					<view><text class="circle on"></text>关闭</view>
				</view>
			</view>
			<view class="managename" @click="AccessControl" v-if="$has('app:TenantBill')">
				<u-cell title="门禁" :isLink="true" arrow-direction="right" :border="false"
					style="margin: -10px -15px;"></u-cell>
				<u--image mode="widthFix" :src="door"  width="96rpx" height="96rpx" style="align-items: center;margin:16rpx 0;"></u--image>
				<view class="status">
					<view><text class="circle"></text>在线</view>
					<view><text class="circle on"></text>离线</view>
				</view>
			</view>
			<view class="managename" @click="Intelligentdoorlock" v-if="$has('app:TenantBill')">
				<u-cell title="智能门锁" :isLink="true" arrow-direction="right" :border="false"
					style="margin: -10px -15px;"></u-cell>
				<u--image mode="widthFix" :src="lock"  width="96rpx" height="96rpx" style="align-items: center;margin:16rpx 0;"></u--image>
				<view class="status">
					<view><text class="circle"></text>在线</view>
					<view><text class="circle on"></text>离线</view>
				</view>
			</view>
			<view class="managename"  @click="Videosurveillance" v-if="$has('app:TenantBill')">
				<u-cell title="视频监控" :isLink="true" arrow-direction="right" :border="false"
					style="margin: -10px -15px;"></u-cell>
				<u--image mode="widthFix" :src="video"  width="96rpx" height="96rpx" style="align-items: center;margin:16rpx 0;"></u--image>
				<view class="status">
					<view><text class="circle"></text>在线</view>
					<view><text class="circle on"></text>离线</view>
				</view>
			</view>
		</view>
		<u-tabbar class="tabberall" :value="value1" :fixed="true" :placeholder="true" @change="name => value1 = name"
			:safeAreaInsetBottom="true">
			<u-tabbar-item text="首页" @click="click1">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="tabimg1"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="tabimg2"></image>
			</u-tabbar-item>

			<u-tabbar-item  text="租户账单" v-if="$has('app:TenantBill')"  @click="click2">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="tabimg3"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="tabimg4"></image>

			</u-tabbar-item>
			<u-tabbar-item text="远程管控" v-if="$has('app:RemoteControl')" @click="click3">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="tabimg5"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="tabimg6"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabimg1: require('@/static/tab/h2.png'),
				tabimg2: require('@/static/tab/h1.png'),
				tabimg3: require('@/static/tab/w2.png'),
				tabimg4: require('@/static/tab/w1.png'),
				tabimg5: require('@/static/tab/y2.png'),
				tabimg6: require('@/static/tab/y1.png'),
				value1: 2,
				elec: require('@/static/imgs/elec.png'),
				water: require('@/static/imgs/water.png'),
				ac: require('@/static/imgs/ac.png'),
				light: require('@/static/imgs/light.png'),
				door: require('@/static/imgs/door.png'),
				lock: require('@/static/imgs/lock.png'),
				video: require('@/static/imgs/video.png')
			}
		},
		methods: {
			click1() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			click2() {
				uni.navigateTo({
					url: '/pages/Workorder/Tenantbill/Tenantbill'
				})
			},
			click3() {
				uni.navigateTo({
					url: '/pages/Workorder/Workorder'
				})
			},
			Remotecontrol(v) {
				uni.navigateTo({
					url: '/pages/Workorder/Remotecontrol/Remotecontrol?type='+v
				})
			},
			Intelligentdoorlock() {
				uni.navigateTo({
					url: '/pages/Workorder/Intelligentdoorlock/Intelligentdoorlock'
				})
			},
			Videosurveillance() {
				uni.navigateTo({
					url: '/pages/Workorder/Videosurveillance/Videosurveillance'
				})
			},
			AccessControl() {
				uni.navigateTo({
					url: '/pages/Workorder/AccessControl/AccessControl'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.toptemplate {
		color: #fff;
	}

	.u-page__item__slot-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.managelind {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 32rpx;
		justify-content: space-between;
		.managename {
			padding: 24rpx 32rpx;
			width: 50%;
			min-width: 328rpx;
			max-width: 328rpx;
			background: #fff;
			flex: 1;
			margin-bottom: 32rpx;
		
			&:nth-child(2n+1) {
				margin-right: 30rpx;
			}
		
			.status {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
		
				.circle {
					display: inline-block;
					width: 8rpx;
					height: 8rpx;
					border-radius: 100%;
					background-color: #999;
					vertical-align: middle;
					margin-right: 3px;
		
					&.on {
						background-color: #09C700;
					}
				}
		
			}
		}

	}
</style>