You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
1.8 KiB
Vue
92 lines
1.8 KiB
Vue
2 months ago
|
<!--
|
||
|
|
* @Author: chris
|
||
|
|
* @Date: 2025-08-25 15:42:45
|
||
|
|
* @LastEditors: chris
|
||
|
|
* @LastEditTime: 2025-09-02 16:28:57
|
||
|
|
-->
|
||
|
|
<script setup>
|
||
|
|
import ModuleTitle from './moduleTitle.vue';
|
||
|
|
const itemDict = {
|
||
|
|
acreage: {
|
||
|
|
svg: 'nongshi',
|
||
|
|
text: '种植面积（亩）'
|
||
|
|
},
|
||
|
|
terrain: {
|
||
|
|
svg: 'dixing',
|
||
|
|
text: '地形'
|
||
|
|
},
|
||
|
|
typeNum: {
|
||
|
|
svg: 'pinzhong',
|
||
|
|
text: '种植品种（种）'
|
||
|
|
},
|
||
|
|
type: {
|
||
|
|
svg: 'dapengzhongmiaoguanli',
|
||
|
|
text: '主要品种'
|
||
|
|
},
|
||
|
|
lichee: {
|
||
|
|
svg: 'shuguo',
|
||
|
|
text: '种植荔枝（棵）'
|
||
|
|
},
|
||
|
|
yield: {
|
||
|
|
svg: 'caizhaiguanli',
|
||
|
|
text: '去年产量（吨）'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const prop = defineProps({
|
||
|
|
info: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="orchard-brief-info">
|
||
|
|
<ModuleTitle title="果园概况" icon="nongchangguanli" />
|
||
|
|
<div class="list">
|
||
|
|
<div class="info-item" v-for="key in Object.keys(prop.info)" :key="key">
|
||
|
|
<div class="item-icon-box">
|
||
|
|
<svg-icon class="item-icon" :icon-class="itemDict[key].svg" color="#2b9908"/>
|
||
|
|
</div>
|
||
|
|
<p class="item-text">{{ itemDict[key].text }}</p>
|
||
|
|
<p class="item-value">{{ prop.info[key] }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
$main-font-color: #2b9908;
|
||
|
|
$main-bg-color: rgba(174, 227, 158, 0.2);
|
||
|
|
$font-color: #9ca3af;
|
||
|
|
.orchard-brief-info {
|
||
|
|
@apply p-20px;
|
||
|
|
|
||
|
|
.list {
|
||
|
|
@apply flex flex-wrap w-100% justify-between py-10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-item {
|
||
|
|
@apply w-50% p-10px my-16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-icon-box {
|
||
|
|
@apply float-left m-r-10px w-50px h-50px flex justify-center items-center rounded-50%;
|
||
|
|
background-color: rgba(174, 227, 158, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-icon {
|
||
|
|
@apply w-20px h-20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-text {
|
||
|
|
@apply m-b-5px font-size-14px color-#9ca3af;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-value {
|
||
|
|
@apply font-size-20px font-600;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|