baozhida-monitoring-host/pages/basicSetup/systemsControl.vue

<template>
	<!-- 系统控制 -->
	<view>
		<view style="display: flex;align-items: center;">
			<view class="title_name">主机名</view>
			<input class="name_input" v-model="hostName" type="text" placeholder="主机名" />
		</view>
		<view class="title_name" style="margin-top: 20rpx;">系统参数</view>
		<view class="card_parameter">
			<view class="card_item_second">
				<view class="title_name title_width">数据保存间隔</view>
				<input class="name_input" v-model="numbver" type="text" />
				<view class="title_name left_10">秒</view>
			</view>
			<view class="card_item_second">
				<view class="title_name title_width">超时报警间隔</view>
				<input class="name_input" v-model="numbver" type="text" />
				<view class="title_name left_10">秒</view>
			</view>
			<view class="card_item_second">
				<view class="title_name title_width">市电断电报警间隔</view>
				<input class="name_input" v-model="numbver" type="text" />
				<view class="title_name left_10">秒</view>
			</view>
			<view class="card_item_second">
				<view class="title_name title_width">传感器掉线报警间隔</view>
				<input class="name_input" v-model="numbver" type="text" />
				<view class="title_name left_10">秒</view>
			</view>
			<view class="card_item_second">
				<view class="title_name title_width">温湿度预警间隔</view>
				<input class="name_input" v-model="numbver" type="text" />
				<view class="title_name left_10">秒</view>
			</view>
			<view class="card_item_second">
				<view class="title_name title_width">预警延时</view>
				<input class="name_input" v-model="numbver" type="text" />
				<view class="title_name left_10">秒</view>
			</view>
		</view>
		<view class="center_in">
			<view style="margin-top: 10rpx;width: 40%;">
				<u-button size="mini" type="primary" text="保存"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hostName: '新管理主机TCP',
				numbver: null,
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title_name {
		font-size: 18rpx;
		margin-right: 10rpx;
	}

	.name_input {
		flex: 1;
		font-size: 18rpx;
		border: 1rpx solid #e7e6e4;
		padding: 4rpx 10rpx;
		border-radius: 4rpx;
	}

	.card_parameter {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 6rpx;
		border: 1rpx solid #e7e6e4;
		padding: 30rpx 10rpx;
		border-radius: 4rpx;
	}

	.card_item_second {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
		width: calc(50% - 20rpx);
		margin: 5rpx 20rpx 5rpx 0rpx;
	}
	.title_width{
		width: 180rpx;
	}
	.left_10 {
		margin-left: 10rpx;
	}
</style>