airConditionerWebManager/src/views/systemSet/index.vue

<template>
	<div class="app-container">
		<el-row>
			<el-col :span="24">
				<div class="cell">
					<div class="cell-title">
						<div class="title-left">
							<div class="title">系统设置</div>
						</div>
					</div>
					<div class="cell-body">
						<el-row>
							<el-col :span="24">
								<div>空调开启半小时不足1小时为</div>
								<el-input placeholder="请输入金额" v-model="less_than_an_hour"></el-input>
								<div>元</div>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<div>空调开启每小时为</div>
								<el-input placeholder="请输入金额" v-model="per_hour"></el-input>
								<div>元</div>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<div>自动扣款</div>
								<el-switch v-model="withhold" active-color="#2B4CFE">
								</el-switch>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<div>账户余额少于</div>
								<el-input placeholder="请输入金额" v-model="balance_less_than"></el-input>
								<div>元，不能开启空调</div>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<div>每隔</div>
								<el-input placeholder="请输入小时数" v-model="hour"></el-input>
								<div>小时，系统自动发送通知给操作员</div>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<div>每天</div>
								<el-input placeholder="请输入时间" v-model="every_day"></el-input>
								<div>为截止时间，系统自动发送通知给操作员</div>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="24">
								<div>使用问题联系方式</div>
								<el-input class="contact-style" placeholder="请输入手机号" v-model="contact"></el-input>
							</el-col>
						</el-row>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				less_than_an_hour: 3, // 半小时不足1小时
				per_hour: 5, // 每小时
				withhold: true,
				balance_less_than: 5,
				hour: 1,
				every_day: '19:00',
				contact: '13677985689'
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		background-color: #EFF2F7;
		padding: 10px;

		.el-row {

			.el-col {
				padding: 10px;

				.cell {
					padding: 30px;
					border-radius: 10px;
					background-color: #FFFFFF;

					.cell-title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 30px;
						padding-bottom: 30px;
						border-bottom: 1px solid #CCCCCC;

						.title {
							font-size: 22px;
							font-family: Microsoft YaHei-3970(82674968);
							font-weight: bold;
							color: #1A202B;
						}
					}

					.cell-body {
						height: 630px;

						.el-row {

							.el-col {
								display: flex;
								align-items: center;
								white-space: nowrap;

								::v-deep .el-input,
								::v-deep .el-input__inner {
									width: 90px;
									text-align: center;
									font-size: 18px;
									font-family: Microsoft YaHei-3970(82674968);
									color: #46515E;
								}

								::v-deep .el-input {
									margin: 0 10px;
								}

								::v-deep .contact-style.el-input .el-input__inner {
									width: 150px;
								}

								.el-switch {
									margin: 0 10px;
								}
							}
						}
					}
				}
			}
		}
	}
</style>