wszhyWx/pages/add_irrigation_group/add_irrigation_group.vue

116 lines
2.3 KiB
Vue
Raw Normal View History

2023-10-05 02:26:25 +00:00
<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>