TraceabilityAPP/components/plant/landInfo.vue

174 lines
3.4 KiB
Vue

<template>
<view class="" style="margin-top: 15rpx;">
<view class="" style="display: flex;align-items: center;height: 50rpx;">
<u--image src="/static/main/index/dw.png" width="18.18rpx" height="24.47rpx"
style="margin-right: 10rpx;"></u--image>
<text style="color: #333333;font-size: 26rpx;">{{info.title}}</text>
</view>
<view class="info">
<view class="info-li" style="background-image: url('/static/main/index/tdmj1.png');">
当前种植
<view class="info-value">
{{info.kindarea|| info.total_area-info.residual_area}}
</view>
</view>
<view class="info-li" style="background-image: url('/static/main/index/tdmj1.png');">
土地面积
<view class="info-value">
{{info.total_area}}
</view>
</view>
<view class="info-li" style="background-image: url('/static/main/index/tdfzr.png');">
土地负责人
<view class="info-value">
{{info.master_name}}
</view>
</view>
<view class="info-li" style="background-image: url('/static/main/index/fzrdh.png');">
负责人电话
<view class="info-value">
{{info.master_phone}}
</view>
</view>
<view class="info-li" v-if="isDetail" style="background-image: url('/static/main/index/pin_pai.png');">
种植种类
<view class="info-value">
{{info.breed}}
</view>
</view>
<view class="info-li" v-if="isDetail" style="background-image: url('/static/main/index/dqzz.png');">
种植品种
<view class="info-value">
{{info.kind}}
</view>
</view>
</view>
</view>
<!-- <view class="card">
<view class="tit">
<view class="">
{{info.title}}
</view>
</view>
<view class="card-li">
<view class="" v-if="info.kindarea">
当前种植: {{info.kindarea}}亩
</view>
<view class="" v-else>
当前种植: {{info.total_area-info.residual_area}}亩
</view>
</view>
<view class="card-li" v-if="info.kind">
<view class="">
种植品种: {{info.kind}}
</view>
</view>
<view class="card-li" v-if="info.breed">
<view class="">
种植品牌: {{info.breed}}
</view>
</view>
<view class="card-li">
<view class="">
土地面积: {{info.total_area}}亩
</view>
</view>
<view class="card-li">
<view class="">
土地负责人: {{info.master_name}}
</view>
</view>
<view class="card-li">
<view class="">
联系方式: {{info.master_phone}}
</view>
</view> -->
<!-- </view> -->
</template>
<script setup>
import {
reactive,
watch
} from "vue";
const props = defineProps({
info: Object,
isDetail: Boolean
})
const perviewFn = (url) => {
uni.previewImage({
urls: [url]
})
}
</script>
<style lang="scss" scoped>
.info {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 10rpx;
.info-li {
width: 223rpx;
height: 105rpx;
border-radius: 10rpx;
background-size: 100% 100%;
// padding: 20rpx;
padding: 18rpx;
margin-bottom: 20rpx;
box-shadow: 1rpx 1rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
font-size: 26rpx;
color: #333333;
}
.info-value {
color: #7B7B7B;
font-size: 26rpx;
margin-top: 4rpx;
}
}
.card {
// width: 710rpx;
margin: 0 auto;
.tit {
display: flex;
justify-content: space-between;
padding-bottom: 20rpx;
border-bottom: 1px solid #EBF1EF;
}
.card-li {
margin-top: 20rpx;
display: flex;
justify-content: space-between;
}
}
</style>