wszhyWx/pages/add_irrigation_group/add_irrigation_group.vue

<template>
	<view class="add_irrigation_group">
		<!-- 添加灌溉组 -->
		<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="content_item">
				<view class="item" v-for="(item,index) in 20" :key="index">
					<text>{{ index + 1 }}#灌溉组</text>
					<u-checkbox v-model="checked" :disabled="false" active-color="#28B485" shape="circle"></u-checkbox>
				</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',
				},
				
				checked: false,
				
			};
		}
	}
</script>

<style lang="scss" scoped>
.add_irrigation_group{
	width: 100%;
	min-height: 100vh;
	background-color: #F5F6FA;
	
	.content{
		width: 100%;
		height: calc(100vh - 364rpx);
		overflow-y: auto;
		box-sizing: border-box;
		padding: 30rpx;
		
		.content_item{
			width: 690rpx;
			min-height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153,153,153,0.1);
			border-radius: 20rpx;
			box-sizing: border-box;
			padding-left: 30rpx;
			.item{
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #DDDDDD;
				
				>text{
					font-size: 30rpx;
					font-family: PingFang-SC-Bold;
					font-weight: bold;
					color: #333333;
				}
			}
		}
		
		
	}
	
	.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>