jp-housekeep-hall/pages/remoteControl/remoteControl.vue

<template>
	<view>
		<u-navbar title="远程控制"  title-color="#101010" >
			<view class="u-nav-slot" slot="right" >
				 操作日志
			</view>
		</u-navbar>
		
		<!-- 标签-->
		<view class="tabs-box">
			<view class="tabs">
				<u-tabs :list="list" bg-color="#F2F4F6" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
			<view class="icon">
				<u-icon name="arrow-down" color="#777777" size="28"></u-icon>
			</view>
		</view>
		
		<view class="main">
			<view class="switch" >
				<view class="switch-name">
					<view class="name">
						大厅空调
					</view>
					<view class="place">
						一楼大厅
					</view>
				</view>
				<view class="switch-icon">
					<image class="img" src="@/assets/img/switch-open.png" ></image>
				</view>
			</view>
			<view class="switch" >
				<view class="switch-name">
					<view class="name">
						大厅灯控
					</view>
					<view class="place">
						一楼大厅
					</view>
				</view>
				<view class="switch-icon">
					<image class="img" src="@/assets/img/switchClose.png" ></image>
				</view>
			</view>
			<view class="switch" >
				<view class="switch-name">
					<view class="name">
						道闸
					</view>
					<view class="place">
						门房
					</view>
				</view>
				<view class="switch-icon">
					<image class="img" src="@/assets/img/switch-open.png" ></image>
				</view>
			</view>
			<view class="switch" >
				<view class="switch-name">
					<view class="name">
						地下车库灯控
					</view>
					<view class="place">
						门房
					</view>
				</view>
				<view class="switch-icon">
					<image class="img" src="@/assets/img/switchClose.png" ></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '一楼大厅'
				}, {
					name: '门房',
					
				}, {
					name: '八楼',
					
				}, {
					name: '九楼',
					
				}],
				current: 0
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-nav-slot {
		margin-right: 32rpx;
	}
  // 标签
  .tabs-box{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 24rpx 32rpx 24rpx 0;
	  .tabs{
		  width: 92%;
	  }
  }
  .main{
	    padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	  .switch{
		  width: 332rpx;
		  background-color: #fff;
		  border-radius: 12px;
		  padding: 32rpx 24rpx;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  margin-bottom: 24rpx;
	  }
	  .switch-name{
		  .name{
			  color: rgba(51,51,51,1);
			  font-size: 32rpx;
			  font-weight: bold;
		  }
		  .place{
			  color: rgba(119,119,119,1);
			  font-size: 24rpx;
		  }
	  }
	  .switch-icon{
		  .img{
			  width: 64rpx;
			  height: 64rpx;
		  }
	  }
  }
</style>