wit-uniapp/pages/Workorder/Workorder.vue

<template>
	<view class="management">
		<view class="topnames" >
					工作台
				</view>
		<view class="managelind">
			<view class="managename" @click="Tenantbill"  v-if="$has('app:TenantBill')">
				<view class="managename1">

					<u--image  mode="widthFix"  :src="srczuhu" width="48rpx" height="48rpx"></u--image>
				</view>
				<view class="managename2">
					租户账单
				</view>
			</view>
			<view class="managename" @click="Remotecontrol"  v-if="$has('app:RemoteControl')">
				<view class="managename1">
					<!-- <img :src='srcyuanc' alt=""> -->
						<u--image  mode="widthFix"  :src="srcyuanc" width="48rpx" height="48rpx"></u--image>
				</view>
				<view class="managename2">
					远程管控
				</view>
			</view>

	<view class="managename" @click="Videosurveillance"  v-if="$has('app:Videosurveillance')">
				<view class="managename1">
					<!-- <img :src='srcyuanc' alt=""> -->
				<u--image  mode="widthFix"  :src="srcshipin" width="48rpx" height="48rpx"></u--image>
				</view>
				<view class="managename2">
					视频监控
				</view>
			</view>

			<view class="managename" @click="AccessControl"  v-if="$has('app:AccessControl')">
				<view class="managename1">
					<!-- <img :src='srcyuanc' alt=""> -->
					<u--image  mode="widthFix"  :src="srcshipin" width="48rpx" height="48rpx"></u--image>
				</view>
				<view class="managename2">
					门禁管理
				</view>
			</view>

			<!-- v-if="$has('app:Arrearsrecord')" -->
			<!--<view class="managename" @click="Arrearsrecord" >-->
				<!--<view class="managename1">-->
					<!--&lt;!&ndash; <img :src='srcyuanc' alt=""> &ndash;&gt;-->
						<!--<u&#45;&#45;image  mode="widthFix"  :src="srcjilu" width="48rpx" height="48rpx"></u&#45;&#45;image>-->
				<!--</view>-->
				<!--<view class="managename2">-->
					<!--欠费记录-->
				<!--</view>-->
			<!--</view>-->

			<!-- <view class="managename" @click="pay">
				<view class="managename1">
					 <img :src='srcyuanc' alt="">
						<u--image  mode="widthFix"  :src="srcyuanc" width="48rpx" height="48rpx"></u--image>
				</view>
				<view class="managename2">
					支付功能
				</view>
			</view> -->
		</view>

<!-- 
		<u-tabbar
				:value="value1"
				:fixed="true"
				:placeholder="true"
				@change="name => value1 = name"
				activeColor="#2E69EB"
				:safeAreaInsetBottom="true"
		>
			<u-tabbar-item text="首页" icon="home" @click="click1" ></u-tabbar-item>
			<u-tabbar-item  v-if="$has('app:worktable')"  text="工作台" icon="list" @click="click2" ></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account" @click="click3" ></u-tabbar-item>
		</u-tabbar> -->
		
		<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 v-if="$has('app:worktable')" text="工作台"  @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="我的" @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: 1,
					srczuhu: require('@/static/management/zd.png'),
					srcyuanc: require('@/static/management/yc.png'),
					srcjilu: require('@/static/management/jl.png'),
					srcshipin: require('@/static/management/sp.png'),
			}
		},
		methods: {
			click1(){
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			click2(){
				uni.navigateTo({
					url: '/pages/Workorder/Workorder'
				})
			},
			click3(){
				uni.navigateTo({
					url: '/pages/my/my'
				})
			},

			Tenantbill(){
				uni.navigateTo({
					url: '/pages/Workorder/Tenantbill/Tenantbill'
				})
			},
			Remotecontrol(){
				uni.navigateTo({
					url: '/pages/Workorder/Remotecontrol/Remotecontrol'
				})
			},
			// Arrearsrecord(){
			// 	uni.navigateTo({
			// 		url: '/pages/Workorder/Arrearsrecord/Arrearsrecord'
			// 	})
			// },
			Videosurveillance(){
				uni.navigateTo({
					url: '/pages/Workorder/Videosurveillance/Videosurveillance'
				})
			},
			
			AccessControl(){
				uni.navigateTo({
					url: '/pages/Workorder/AccessControl/AccessControl'
				})
			},

			// pay(){
			// 	uni.navigateTo({
			// 		url: '/pages/Workorder/pay/pay'
			// 	})
			// },
		}
	}
</script>

<style>
	.u-page__item__slot-icon {
		width: 40rpx;
		height: 40rpx;
	}
.management{}
.managelind{
	display: flex;
	//justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	width: 690rpx;
	min-height: 130rpx;
	margin: 20rpx auto;
	background: #fff;
	border-radius: 10px;
}
.managename{
	width: 345rpx;
	height: 170rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.managename1 img{
		width: 40rpx;
		height: 40rpx;
}
.managename2{
	padding-top: 15rpx;
	color: #666;
	font-size: 20rpx;
}


</style>