<template>
	<view class="content">
		<view class="card">
			<view class="card-herd">
				<u--image src="/static/img/bg1.png" shape="circle" style="margin: 0 5rpx;" width="84.11rpx"
					height="84.11rpx"></u--image>
				<view class="">
					1号小组
				</view>
				<view class="">
					通滩指导养殖合作服务公司
				</view>
			</view>
		</view>

		<view class="serch">
			<view class="" style="margin-right: 61rpx;">
				监管土地
			</view>
			<u-search placeholder="搜索基地名称" :show-action="false" bgColor='white' v-model="keyword"></u-search>
		</view>

		<view class="card">
			<view class="card-tit">
				<view class="" style="display: flex; align-items: center;">
					<u--image src="/static/img/bg1.png" shape="circle" style="margin: 0 5rpx;" width="84.11rpx"
						height="84.11rpx"></u--image>
					<view class="" style="margin-left: 20rpx;">
						张队长
					</view>
				</view>
				<view class="">
					管辖: 会发生肯德基回复
				</view>
			</view>
			<view class="card-li" v-if="!showMore">
				<view class="">
					监管农户: 100hu1
				</view>
				<view class="">
					涉及土地面积: 100hu1
				</view>
			</view>
			<view class="border">

			</view>
			<view class="" v-if="showMore">
				<view class="card-li">
					<view class="">
						监管农户: 100hu1
					</view>
					<view class="">
						涉及土地面积: 100hu1
					</view>
				</view>
				<view class="card-li">
					<view class="">
						种植户: 100hu1
					</view>
					<view class="">
						占地面积: 100hu1
					</view>
				</view>
				<view class="card-li">
					<view class="">
						养殖户-大型动物: 100hu1
					</view>
					<view class="">
						占地面积: 100hu1
					</view>
				</view>
				<view class="card-li">
					<view class="">
						养殖户-禽类: 100hu1
					</view>
					<view class="">
						占地面积: 100hu1
					</view>
				</view>
				<view class="card-li">
					<view class="">
						养殖户-水产: 100hu1
					</view>
					<view class="">
						占地面积: 100hu1
					</view>
				</view>
				<view class="border">

				</view>
				<view class="detail" @click="showMore=!showMore">
					收起 <u--image src="/static/img/CKGD.png" style="margin-left: 5rpx;transform: rotate(270deg);"
						width="28.04rpx" height="28.04rpx"></u--image>
				</view>
			</view>
			<view class="detail" v-if="!showMore" @click="showMore=!showMore">
				查看监管详情 <u--image src="/static/img/CKGD.png" style="margin-left: 5rpx;transform: rotate(90deg)"
					width="28.04rpx" height="28.04rpx"></u--image>
			</view>


		</view>




	</view>

</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	const showMore = ref(true)
</script>

<style lang="scss" scoped>
	.card {
		padding: 30rpx;
	}

	.card-herd {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.serch {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.card-tit {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.card-li {
		display: flex;
		// margin: ;
		justify-content: space-between;
	}

	.border {
		border-bottom: 1px solid #F4F4F4;
		margin: 20rpx 0;
	}

	.detail {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>