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

<template>
	<view>
		<view class="head">
			<view class="shang">
				<view class="shangItem">
					<text>冷水阀</text>
					<text>94%</text>
				</view>
				<view class="shangItem">
					<text style="margin-left: 6rpx;">电加热</text>
					<view class="buttonItem">
						<button class="but">一</button>
						<button class="but">二</button>
						<button class="but">三</button>
					</view>
				</view>
				<view class="shangItem">
					<text>加湿器</text>
					<text>0%</text>
				</view>

			</view>


			<view class="comp"></view>


			<view class="xia">
				<view class="xiaItem">
					<text>初效滤网</text>
					<view class="xiaBut">
						<button class="xiaButton">正常</button>
					</view>
				</view>
				<view class="xiaItem">
					<text>热水阀</text>
					<text>87%</text>
				</view>
				<view class="xiaItem">
					<text>高温报警</text>
					<view class="xiaBut">
						<button class="xiaButton">正常</button>
					</view>
				</view>
				<view class="xiaItem">
					<text>缺风压差</text>
					<view class="xiaBut">
						<button class="xiaButton">正常</button>
					</view>
				</view>
				<view class="xiaItem">
					<text>中效滤网</text>
					<view class="xiaBut">
						<button class="xiaButton">正常</button>
					</view>
				</view>

			</view>
		</view>

		<view class="hold">
			<view class="tiao">
				<text class="tiaoText">CK-1</text>
			</view>
			<view class="param">
				<view class="paramItem">
					<text class="name">温度</text>
					<text class="value">22.5℃</text>
				</view>
				<view class="paramItem">
					<text class="name">湿度</text>
					<text class="value">59.7%</text>
				</view>
				<view class="paramItem">
					<text class="name">含湿量</text>
					<text class="value">10.2g/kg</text>
				</view>

			</view>
		</view>

		<view class="hold">
			<view class="tiao">
				<text class="tiaoText">CK-2</text>
			</view>
			<view class="param">
				<view class="paramItem">
					<text class="name">温度</text>
					<text class="value">22.5℃</text>
				</view>
				<view class="paramItem">
					<text class="name">湿度</text>
					<text class="value">59.7%</text>
				</view>
				<view class="paramItem">
					<text class="name">含湿量</text>
					<text class="value">10.2g/kg</text>
				</view>

			</view>
		</view>

		<view class="stop">
			<view class="stopTiao">
				<text class="stopTiaoText">停机延时：180S</text>
			</view>
			<view class="param">
				<view class="paramItem1">
					<text class="name1">排风温度设定</text>
					<text class="value">22.5℃</text>
				</view>
				<view class="paramItem1">
					<text class="name1">排风湿度设定</text>
					<text class="value">55%</text>
				</view>
				<view class="paramItem1">
					<text class="name1">排风含湿量设定</text>
					<text class="value">9.6g/kg</text>
				</view>

			</view>
		</view>

		<view class="stopButton">
			<button class="button">停止按钮</button>
		</view>

		<view class="anniu" @tap="back">
			<image class="anniu" src="../../static/设备菜单/前往列表@2x.png"></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;
	}

	.button {
		background-color: #E12A1F;
		color: white;
		width: 654rpx;
		margin-left: 48rpx;
		margin-top: 44rpx;
	}

	.name1 {
		color: #848586;
		font-size: 24rpx;
	}

	.name {
		color: #848586;
		font-size: 30rpx;

	}

	.value {
		font-size: 38rpx;
		color: #444546;
	}

	.paramItem {
		display: flex;
		flex-direction: column;
		margin-left: 58rpx;
		margin-right: 58rpx;
	}

	.paramItem1 {
		display: flex;
		flex-direction: column;
		margin-left: 40rpx;
		margin-right: 40rpx;
	}

	.param {
		display: flex;
		flex-direction: row;
		margin-left: 24rpx;
		align-items: center;
		justify-content: center;
		width: 702rpx;
		height: 140rpx;
		background-color: white;
		border-bottom-right-radius: 8rpx;
		border-bottom-left-radius: 8rpx;
	}

	.tiaoText {
		margin-left: 44rpx;
		font-size: 34rpx;
		font-weight: 550;

	}

	.stopTiaoText {
		margin-left: 44rpx;
		font-size: 36rpx;
		font-weight: 550;
	}

	.tiao {
		margin-top: 26rpx;
		border-top-left-radius: 8rpx;
		border-top-right-radius: 8rpx;
		margin-left: 24rpx;
		width: 702rpx;
		height: 60px;
		background: #EAF1FE;
		font-size: 30rpx;
		color: #007AFF;
		display: flex;
		align-items: center;
	}

	.stopTiao {
		margin-top: 26rpx;
		border-top-left-radius: 8rpx;
		border-top-right-radius: 8rpx;
		margin-left: 24rpx;
		width: 702rpx;
		height: 60px;
		background: #007AFF;
		font-size: 38rpx;
		color: white;
		display: flex;
		align-items: center;
	}

	.xia {

		display: flex;
		flex-direction: row;
	}

	.xiaItem {
		color: white;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		margin-right: 20rpx;
		align-items: center;
		justify-content: center;
		margin-bottom: 16rpx;
	}

	.shang {

		display: flex;
		flex-direction: row;
	}

	.shangItem {
		color: white;
		display: flex;
		flex-direction: column;
		margin-left: 30rpx;
		margin-right: 30rpx;
		align-items: center;
		justify-content: center;
		margin-bottom: 16rpx;
	}

	.buttonItem {
		display: flex;
		flex-direction: row;
		font-size: 20rpx;
		color: #444546;
	}

	.but {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
		margin-top: 5rpx;
		font-size: 24rpx;

	}

	.xiaBut {
		display: flex;
		flex-direction: row;
		font-size: 20rpx;
		color: #444546;
	}

	.xiaButton {
		width: 100rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
		margin-top: 5rpx;
		font-size: 24rpx;
	}

	.head {
		font-size: 26rpx;
		height: 300px;
		background: linear-gradient(180deg, #2A8FFB 0%, #0467FB 100%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.comp {
		background-color: #D6D6D6;
		width: 702rpx;
		height: 200rpx;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}
</style>