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.
69 lines
1.5 KiB
Vue
69 lines
1.5 KiB
Vue
<!--
|
|
* @Author: chris
|
|
* @Date: 2025-08-25 15:42:45
|
|
* @LastEditors: chris
|
|
* @LastEditTime: 2025-10-15 16:00:17
|
|
-->
|
|
<script setup>
|
|
import ModuleTitle from './moduleTitle.vue';
|
|
import { baseInfoDict } from '../config.js';
|
|
|
|
const prop = defineProps({
|
|
info: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
})
|
|
|
|
const infoItems = [ 'plantingArea', 'terrain', 'variety', 'plantingNum' ]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="orchard-brief-info">
|
|
<ModuleTitle title="果园概况" icon="nongchangguanli" />
|
|
<div class="list">
|
|
<div class="info-item" v-for="key in infoItems" :key="key">
|
|
<div class="item-icon-box">
|
|
<svg-icon class="item-icon" :icon-class="baseInfoDict[key].svg" color="#2b9908"/>
|
|
</div>
|
|
<p class="item-text">{{ baseInfoDict[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>
|