wszhyWx/pages/editSite/editSite.vue

<template>
	<view class="editSite">
		<u-navbar :background="background" :is-back='true' back-icon-color='#FFFFFF' :border-bottom="false" title="编辑站点"
			title-color='#FFFFFF' :title-bold='true' title-size='32'></u-navbar>

		<view class="content">
			<view class="siteInfo">
				<u-field v-model="childSite" label="子站点" required :clearable='false' label-width='163'
					input-align='right' placeholder-style='color:#DDDDDD' :auto-height='false'>
				</u-field>
				<u-field v-model="siteName" label="站点名称" required :clearable='false' label-width='163'
					input-align='right' placeholder-style='color:#DDDDDD' :auto-height='false'>
				</u-field>
				<u-field v-model="sort" label="排序" :clearable='false' label-width='163' input-align='right'
					placeholder-style='color:#DDDDDD' :auto-height='false'>
				</u-field>
				<u-field v-model="siteDescribe" label="站点描述" :clearable='false' label-width='163' input-align='right'
					placeholder-style='color:#DDDDDD' :auto-height='false'>
				</u-field>
			</view>

			<view class="greenhouse_controller">
				<view class="title">
					温室控制器
				</view>
				<view class="input">
					<u-input v-model="value" :type="type" :border="border" :auto-height='false' :clearable='false' />
				</view>
				<view class="btn">
					<view class="edit">
						<image src="../../static/edit.png" mode=""></image>
						<text>编辑</text>
					</view>
					<view class="delete">
						删除
					</view>
				</view>
			</view>
			
			<view class="camera">
				<text class="left">摄像机</text>
				<view class="right">
					<image src="../../static/add_camera.png" mode=""></image>
					<text>摄像机</text>
				</view>
			</view>
			
			<view class="deviceInfo">
				<view class="title">
					<text>设备名称</text>
					<text>设备类型</text>
					<text>品牌</text>
					<text>操作</text>
				</view>
				<view class="detail">
					<text>摄像机#2</text>
					<text>网络摄像机</text>
					<text>海康威视</text>
					<view class="controlBtn">
						<text class="editBtn">编辑</text>
						<text class="deleteBtn">删除</text>
					</view>
				</view>
			</view>
			
			<view class="main_camera">
				<text class="left">主摄像机</text>
				<view class="right">
					摄像机#2
					<image src="../../static/downArrow.png" mode=""></image>
				</view>
			</view>
			
			
		</view>
		
		<view class="save">
			<view class="save_btn">
				<image src="../../static/save_image.png" mode=""></image>
				保存
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 头部导航背景
				background: {
					backgroundColor: '#24B383',
				},

				childSite: '1111111',
				siteName: '温室#1',
				sort: '01',
				siteDescribe: '温室#2描述信息'
			};
		}
	}
</script>

<style lang="scss" scoped>
	.editSite {
		width: 100%;
		min-height: 100vh;
		background-color: #F5F6FA;

		.content {
			box-sizing: border-box;
			padding: 21rpx 30rpx 0 30rpx;

			.siteInfo {
				width: 690rpx;
				// height: 412rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
				border-radius: 20rpx;
				box-sizing: border-box;
				padding-left: 30rpx;
			}

			.greenhouse_controller {
				width: 690rpx;
				height: 280rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 20rpx 30rpx;
				margin-top: 30rpx;

				.title {
					font-size: 30rpx;
					font-family: PingFang-SC-Bold;
					font-weight: bold;
					color: #333333;
				}

				.input {
					width: 630rpx;
					height: 80rpx;
					background: #F5F6FA;
					border: 2px solid #E1E2E6;
					border-radius: 10rpx;
					margin: 20rpx 0 30rpx;
				}

				.btn {
					display: flex;
					
					.edit {
						width: 140rpx;
						height: 60rpx;
						background: linear-gradient(0deg, #57CFA6, #25B383);
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 20rpx;

						>image {
							width: 25rpx;
							height: 26rpx;
							margin-right: 10rpx;
						}

						>text {
							font-size: 24rpx;
							font-family: PingFang-SC-Bold;
							font-weight: bold;
							color: #FFFFFF;
						}
					}

					.delete {
						width: 140rpx;
						height: 60rpx;
						background: #FFEFEF;
						border: 2px solid rgba(255, 99, 99, 0.3);
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						font-family: PingFang-SC-Bold;
						font-weight: bold;
						color: #FF6363;
					}
				}

			}
			
			.camera{
				width: 690rpx;
				height: 100rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153,153,153,0.1);
				border-radius: 20rpx;
				margin-top: 30rpx;
				box-sizing: border-box;
				padding: 0rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.left{
					font-size: 30rpx;
					font-family: PingFang-SC-Bold;
					font-weight: bold;
					color: #333333;
				}
				
				.right{
					width: 140rpx;
					height: 60rpx;
					background: linear-gradient(0deg, #57CFA6, #25B383);
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					
					>image{
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
					>text{
						font-size: 24rpx;
						font-family: PingFang-SC-Bold;
						font-weight: bold;
						color: #FFFFFF;
					}
				}
			}
			
			.deviceInfo{
				width: 690rpx;
				height: 200rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153,153,153,0.1);
				border-radius: 20rpx;
				margin-top: 30rpx;
				box-sizing: border-box;
				padding: 30rpx;
				
				.title{
					width: 630rpx;
					height: 60rpx;
					background: #F5F6FA;
					display: flex;
					align-items: center;
					justify-content: space-around;
					>text{
						width: 25%;
						text-align: center;
					}
				}
				
				.detail{
					width: 630rpx;
					// height: 60rpx;
					display: flex;
					align-items: center;
					padding: 20rpx 0;
					
					>text{
						width: 25%;
						text-align: center;
					}
					
					.controlBtn{
						width: 25%;
						display: flex;
						text-align: center;
						
						.editBtn{
							width: 80rpx;
							height: 54rpx;
							background: linear-gradient(0deg, #57CFA6, #25B383);
							border-radius: 10rpx;
							font-size: 24rpx;
							font-family: PingFang-SC-Bold;
							font-weight: bold;
							color: #FFFFFF;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 20rpx;
						}
						
						.deleteBtn{
							width: 80rpx;
							height: 54rpx;
							background: #FFEFEF;
							border: 2px solid rgba(255,99,99,0.3);
							border-radius: 10rpx;
							font-size: 24rpx;
							font-family: PingFang-SC-Bold;
							font-weight: bold;
							color: #FF6363;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
			
			.main_camera{
				width: 690rpx;
				height: 100rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153,153,153,0.1);
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;
				
				.left,.right{
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
				.right{
					display: flex;
					align-items: center;
					>image{
						width: 16rpx;
						height: 8rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
		
		.save{
			width: 750rpx;
			height: 180rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 32rpx 4rpx rgba(216,221,230,0.75);
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.save_btn{
				width: 660rpx;
				height: 110rpx;
				background: linear-gradient(0deg, #57CFA6, #25B383);
				box-shadow: 0rpx 3rpx 15rpx 0rpx rgba(36,179,131,0.35);
				border-radius: 15rpx;
				font-size: 38rpx;
				font-family: PingFang-SC-Bold;
				font-weight: bold;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				
				>image{
					width: 38rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
			}
		}
	}
</style>