airconditioner/sources/client/vrv-moblie/pages/parameterSetting/parameterSetting.vue

<template>
	<view>
		<view class="white">

			<view class="title">
				<text class="param">参数设定</text>
				<view class="tiao"></view>
			</view>


			<view class="setmenu">
				<view class="setItem">
					<view class="text">
						<text>排风温度设定</text>
					</view>
					<view class="input">
						<input style="margin-left: 20rpx;" placeholder="请输入" />
						<view class="danwei">
							<text style="margin-left: 10rpx;">℃</text>
						</view>
					</view>
				</view>
				<view class="setItem">
					<view class="text">
						<text>排风湿度设定</text>
					</view>
					<view class="input">
						<input style="margin-left: 20rpx;" placeholder="请输入" />
						<view class="danwei"> <text style="margin-left: 14rpx;">%</text></view>
					</view>
				</view>
				<view class="setItem">
					<view class="text">
						<text>停机延时设定</text>
					</view>
					<view class="input">
						<input style="margin-left: 20rpx;" placeholder="请输入" />
						<view class="danwei"> <text style="margin-left: 20rpx;">S</text></view>
					</view>
				</view>
			</view>


			<view class="buttonItem">
				<view class="item">
					<view class="text">
						<text>控制选择模式</text>
					</view>
					<button class="button">CK-1</button>
				</view>
				<view class="item">
					<view class="text">
						<text>控制模式复位</text>
					</view>
					<button class="button">复位</button>
				</view>
			</view>
		</view>

		<view class="xiabu">

			<view class="title">
				<text class="param">运行状态</text>
				<view class="tiao"></view>
			</view>

			<view class="head">
				<text>设备名称</text>
				<text style="margin-left: 30rpx">控制模式</text>
				<text>手动命令</text>
				<text>实时反馈</text>
			</view>
			<view class="whiteItem">
				<text class="text1">空调送风机</text>
				<button class="auto">自动</button>
				<button class="stop">停止</button>
				<text class="four">运行</text>
			</view>
			<view class="grayItem">
				<text class="text1">空调送风机</text>
				<button class="auto">自动</button>
				<button class="stop">停止</button>
				<text class="four">运行</text>
			</view>
			<view class="whiteItem">
				<text class="text1">一级电加热</text>
				<button class="auto">自动</button>
				<button class="stop">停止</button>
				<text class="four">开启</text>
			</view>
			<view class="grayItem">
				<text class="text1">二级电加热</text>
				<button class="auto">自动</button>
				<button class="stop">停止</button>
				<text class="four">开启</text>
			</view>
			<view class="whiteItem">
				<text class="text1">三级电加热</text>
				<button class="auto">自动</button>
				<button class="stop">停止</button>
				<text class="four">运行</text>
			</view>
			<view class="grayItem">
				<text class="text1">空调送风阀</text>
				<button class="auto">自动</button>
				<button class="stop">停止</button>
				<text class="four">开启</text>
			</view>
			<view class="whiteItem">
				<text class="text1">空调排水阀</text>
				<button class="auto">自动</button>
				<button class="stop">停止</button>
				<text class="four">开启</text>
			</view>
			<view class="grayItem">
				<text class="text1">空调冷水阀</text>
				<button class="auto">自动</button>
				<view style="display: flex;flex-direction: row;align-items: center;">
					<button class="three">100</button>%
				</view>

				<view class="four1">
					<text>76%</text>
				</view>
			</view>
			<view class="whiteItem">
				<text class="text1">空调热水阀</text>
				<button class="auto">自动</button>
				<view style="display: flex;flex-direction: row;align-items: center;">
					<button class="three">0</button>%
				</view>
				<view class="four1">
					<text>87%</text>
				</view>
			</view>
			<view class="grayItem">
				<text class="text1">空调加湿器</text>
				<button class="auto">自动</button>
				<view style="display: flex;flex-direction: row;align-items: center;">
					<button class="three">0</button>%
				</view>
				<view class="four1">
					<text>98%</text>
				</view>
			</view>
		</view>

		<view class="anniu">
			<image class="anniu" src="../../static/设备菜单/前往列表@2x.png" @tap="back"></image>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			back() {
				uni.navigateTo({
					url: '/pages/device/deviceInfo/deviceInfo'
				})
			}
		}
	}
</script>
<style>
	.anniu {
		width: 116rpx;
		height: 116rpx;
		float: right;
		margin-right: 10rpx;
	}

	.four1 {
		margin-right: 60rpx;
		margin-left: 40rpx;
	}

	.four {
		margin-right: 60rpx;
	}

	.whiteItem {
		height: 60px;
		background: white;
		border-radius: 4px;
		font-size: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #444546;
	}

	.grayItem {
		height: 60px;
		background: #F6F7FB;
		border-radius: 4px;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		color: #444546;
	}

	.text1 {
		margin-left: 20rpx;
		font-size: 30rpx;
		color: #444546;
	}

	.auto {
		width: 60px;
		height: 33px;
		background: #007AFF;
		border-radius: 4px;
		font-size: 30rpx;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.three {
		margin-right: 10rpx;
		margin-left: 0rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #007AFF;
		width: 60px;
		height: 33px;
		border-radius: 4px;
		border: 1px solid #007AFF;
	}

	.stop {
		margin-right: 75rpx;
		margin-left: 0rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #007AFF;
		width: 60px;
		height: 33px;
		border-radius: 4px;
		border: 1px solid #007AFF;
	}

	.head {
		height: 60px;
		background: #EAF1FE;
		border-radius: 4px;
		font-size: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #444546;
	}

	.xiabu {
		margin-left: 24rpx;
		margin-top: 24rpx;
		background-color: white;
		width: 702rpx;
		height: 1420rpx;
		border-radius: 10rpx;
	}

	.buttonItem {
		display: flex;
		flex-direction: row;
		margin-top: 5rpx;
	}

	.button {
		width: 320rpx;
		height: 98rpx;
		margin-top: 20rpx;
		background-color: #007AFF;
		color: white;
		font-size: unset;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.item {
		margin-left: 20rpx;
	}

	.setmenu {
		display: flex;
		flex-wrap: wrap;
	}

	.setItem {
		margin-left: 20rpx;
	}

	.text {
		margin-top: 40rpx;
		margin-bottom: 16rpx;
		color: #444546;
		font-size: 26rpx;
	}

	.input {
		width: 320rpx;
		height: 98rpx;
		background-color: #eaeaea;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-radius: 5rpx;
		border: 1px solid #eaeaea;
	}

	.danwei {
		width: 78rpx;
		height: 98rpx;
		background-color: white;
		display: flex;
		align-items: center;
	}

	.white {
		width: 702rpx;
		height: 711rpx;
		background-color: white;
		margin-left: 24rpx;
		margin-top: 26rpx;
	}

	.title {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tiao {
		width: 60px;
		height: 3px;
		margin-top: 20rpx;
		background: #007AFF;
	}

	.param {
		font-size: 38rpx;
		font-weight: 550;
		margin-top: 40rpx;
	}
</style>