<style lang="scss">
	page{
		&>.content{
			background:#F6F6F6;
			min-height:100%;
			.u-navbar{
				margin-bottom:28rpx;
			}
			
			&>.search{
				display:flex;
				align-items: center;
				background:#fff;
				margin:30rpx 30rpx;
				border-radius: 40rpx;
				padding:6rpx;
				height:60rpx;
				.u-icon{
					margin:0 14rpx;
					flex-shrink: 0;
				}
				input{
					flex-grow: 1;
				}
				.u-button{
					flex-shrink: 0;
					width:max-content;
				}
			}
			&>.item{
				display:flex;
				&>image{
					flex-shrink: 0;
					width:220rpx;
					height:220rpx;
					border-radius: 16rpx;
					margin-right:24rpx;
				}
				&>.info{
					flex-grow: 1;
					.title{
						display:flex;
						align-items: center;
						font-weight: bold;
						text{
							margin-left:auto;
							color:#333;
						}
					}
					.code,.area{
						color:#999;
						font-size:24rpx;
						margin-top:14rpx;
					}
					.data{
						margin-top:16rpx;
						display:flex;
						align-items: center;
						text{
							&:first-child{
								color:#10C176;
								font-size:32rpx;
								font-weight: bold;
								&:after{
									content:"亩";
								}
							}
							&:nth-child(2){
								color:#F8CB36;
								font-size:24rpx;
								margin-left:16rpx;
							}
						}
					}
					.btns{
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-top:2rpx solid #D8D8D8;
						padding-top:16rpx;
						margin-top:20rpx;
						text{
							color:#999;
							font-size:24rpx;
							&:before{
								color:#10C176;
								margin-right:8rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
<template>
	<view class="content">
		<cu-navbar style="--bg:#10C176;--c:#fff;" text="地块管理">
			<text class="plant-xinjian" slot="right" @click="$u.route({url:'pages/massif/info'})"/>
		</cu-navbar>
		
		<view class="search">
			<u-icon name="search" color="#999999" size="20"/>
			<input placeholder="请输入搜索内容"/>
			<u-button type="primary" shape="circle" color="#10C176" text="搜索" size="mini"></u-button>
		</view>
		
		<view class="card item" v-for="i in 10" :key="i" @click="$u.route({url:'pages/massif/detail'})">
			<image src="https://ts1.cn.mm.bing.net/th?id=OIP-C.wc_dCG_KbIKZwMdtD3gL2QHaEt&w=313&h=199&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"/>
			<view class="info">
				<view class="title">西南角1号仓库 <text class="plant-youbian"/></view>
				<view class="code">编号：A000001</view>
				<view class="area">地块面积：652亩</view>
				<view class="data">
					<text>453</text> <text>(在用面积)</text>
				</view>
				<view class="btns">
					<text class="plant-xiugai">修改</text>
					<text class="plant-shanchu">删除</text>
					<text class="plant-xinzeng" @click.stop="$u.route({url:'pages/massif/mana/index'})">地块管理</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default{
		methods:{
			rightClick(){}
		},
	}
</script>
