jp-housekeep-electric/pages/mine/myApps.vue

<template>
	<view>
		<u-navbar title="我的应用" title-color="#101010"></u-navbar>
		<!-- 用电管理 -->
		<view class="apps-content">
			<view class="title">
				用电管理
			</view>
			<view class="apps-groups">
				<view class="item">
					<view class="item-icon">
						<image class="img" src="@/assets/img/iconPark-wallet.svg" mode=""></image>
					</view>
					<view class="item-name">
						设备数据监控
					</view>
				</view>
				<view class="item">
					<view class="item-icon item-icon2">
						<image class="img" src="@/assets/img/iconPark-order.svg" mode=""></image>
					</view>
					<view class="item-name">
						设备用电量
					</view>
				</view>
				<view class="item">
					<view class="item-icon item-icon3">
						<image class="img" src="@/assets/img/iconPark-wallet.svg" mode=""></image>
					</view>
					<view class="item-name">
						设备信息
					</view>
				</view>
				<view class="item">
					<view class="item-icon item-icon4">
						<image class="img" src="@/assets/img/iconPark-order.svg" mode=""></image>
					</view>
					<view class="item-name">
						异常告警记录
					</view>
				</view>
				<view class="item">
					<view class="item-icon item-icon5">
						<image class="img" src="@/assets/img/iconPark-wallet.svg" mode=""></image>
					</view>
					<view class="item-name">
						异常设备排名
					</view>
				</view>
			</view>
		</view>
		<!-- 工单管理 -->
		<view class="apps-content">
			<view class="title">
				工单管理
			</view>
			<view class="apps-groups">
				<view class="item">
					<view class="item-icon">
						<image class="img" src="@/assets/img/iconPark-wallet.svg" mode=""></image>
					</view>
					<view class="item-name">
						工单统计
					</view>
				</view>
				<view class="item">
					<view class="item-icon item-icon6">
						<image class="img" src="@/assets/img/iconPark-wallet.svg" mode=""></image>
					</view>
					<view class="item-name">
						故障上报
					</view>
				</view>
				
				
				
			</view>
		</view>
		
		<energyCenterTabbar :current="1"></energyCenterTabbar>
	</view>
</template>

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

<style lang="scss" scoped>
	.apps-content{
		background-color: #fff;
		margin-bottom: 24rpx;
		.title{
			padding: 32rpx;
			color: rgb(51,51,51);
			font-size: 36rpx;
			font-weight: bold;
			border-bottom: 1px solid #f2f4f6;
		}
		
		.apps-groups{
			display: flex;
			flex-wrap: wrap;
			.item{
				width: 50%;
				display: flex;
				padding: 32rpx 24rpx;
				align-items: center;
				border-right: 1px solid #f2f4f6;
				.item-icon{
					border-radius: 8px;
					background: linear-gradient(180deg, rgba(93,155,255,1) 0%,rgba(0,97,255,1) 100%);
                    width: 72rpx;
					height: 72rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.img{
						width: 48rpx;
						height: 48rpx;
						
					}
				}
				.item-icon2{
					background: linear-gradient(178.44deg, rgba(122,232,227,1) 3.96%,rgba(57,182,182,1) 100.6%)
				}
				.item-icon3{
					background: linear-gradient(179.2deg, rgba(168,178,238,1) 6.28%,rgba(123,123,240,1) 96.94%);
				}
				.item-icon4{
					background: linear-gradient(180.29deg, rgba(255,124,112,1) 0.9%,rgba(255,79,63,1) 100.4%);
				}
				.item-icon5{
					background: linear-gradient(181.79deg, rgba(117,213,224,1) -1.13%,rgba(53,153,203,1) 94.2%);
				}
				.item-icon6{
					background: linear-gradient(180.4deg, rgba(127,213,151,1) 2.1%,rgba(67,176,116,1) 101.21%);
				}
				.item-name{
					color: rgba(51,51,51,1);
					font-size: 36rpx;
					margin-left: 16rpx;
					font-weight: bold;
					
				}
			}
		}
	}

</style>