194 lines
4.1 KiB
Vue
194 lines
4.1 KiB
Vue
<template>
|
|
<view class="content">
|
|
|
|
|
|
<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 class="query" @tap='showPicker=true'>
|
|
<view class="" style="margin-right: 10rpx;">
|
|
{{query}} (100户)
|
|
</view>
|
|
|
|
<u--image src="/static/img/CKGD.png" width="35.04rpx" height="35.04rpx"></u--image>
|
|
</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">
|
|
<view class="">
|
|
种养殖类别: 100户
|
|
</view>
|
|
<view class="">
|
|
土地面积: 100户
|
|
</view>
|
|
</view>
|
|
|
|
<view class="border">
|
|
|
|
</view>
|
|
<view class="">
|
|
更新时间: 2023-10-11
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
<!-- 组件 -->
|
|
<u-picker :show="showPicker" @close="showPicker=false" :columns="columns" @confirm="pickerConfirmFn"
|
|
@cancel='showPicker=false' :closeOnClickOverlay='true'></u-picker>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
reactive
|
|
} from "vue"
|
|
const showMore = ref(false)
|
|
const showPicker = ref(false)
|
|
const columns = reactive([
|
|
['全部 ', '1队农户', '2队农户', '3队农户', '4队农户', '5队农户', '6队农户']
|
|
]);
|
|
const pickerConfirmFn = (e) => {
|
|
query.value = e.value[0]
|
|
showPicker.value = false
|
|
}
|
|
const query = ref("全部")
|
|
</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;
|
|
}
|
|
|
|
.query {
|
|
margin-bottom: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style> |