113 lines
2.7 KiB
Vue
113 lines
2.7 KiB
Vue
<template>
|
||
<centerMap :dialog-title="'土地类型'" @mapclick="doMapclick">
|
||
<template #header>
|
||
<div class="land-map-pop-header">
|
||
<div class="title">土地类型</div>
|
||
<div class="value">总：{{ all + unit }}</div>
|
||
</div>
|
||
</template>
|
||
<template #dialogContent>
|
||
<div class="land-map-pop-content">
|
||
<div v-for="(n, index) in list" :key="index" class="list-item">
|
||
<div class="title">
|
||
<div class="before">
|
||
<div class="b-content" :style="{ background: n.color }"></div>
|
||
</div>
|
||
<span class="title-val"> {{ n.title }}</span>
|
||
</div>
|
||
<div class="value">{{ n.value }}{{ unit }}</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</centerMap>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, reactive, computed } from 'vue';
|
||
|
||
const unit = ref('万亩');
|
||
const list = reactive([
|
||
{ title: '望天田', value: '60.8', color: '#01FEFD' },
|
||
{ title: '菜地', value: '60.8', color: '#FEF906' },
|
||
{ title: '水浇地', value: '60.8', color: '#02FD94' },
|
||
{ title: '果园', value: '60.8', color: '#FE7F03' },
|
||
{ title: '灌溉水田', value: '60.8', color: '#41BDFC' },
|
||
{ title: '旱地', value: '60.8', color: '#FC0003' },
|
||
]);
|
||
function doMapclick() {
|
||
list.forEach((v) => {
|
||
v.value = Number(v.value) + 1 * (Math.floor(Math.random() * (6 - 2 + 1)) + 2.12).toFixed(0);
|
||
});
|
||
}
|
||
const all = computed(() => {
|
||
let n = 0;
|
||
list.forEach((v) => {
|
||
n += v.value;
|
||
});
|
||
return n;
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.land-map-pop-header {
|
||
display: inline-flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
margin-top: 3px;
|
||
.title,
|
||
.value {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
color: $color-white;
|
||
}
|
||
.title {
|
||
font-size: 18px;
|
||
}
|
||
.value {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
.land-map-pop-content {
|
||
width: 100%;
|
||
gap: 10px;
|
||
display: inline-flex;
|
||
justify-content: flex-start;
|
||
flex-wrap: wrap;
|
||
.list-item {
|
||
width: calc((100% - 10px) / 2);
|
||
display: inline-flex;
|
||
justify-content: space-between;
|
||
padding: 6px 0;
|
||
.title {
|
||
display: inline-flex;
|
||
justify-content: flex-start;
|
||
.before {
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
.b-content {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
}
|
||
.before,
|
||
.title-val {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
padding: 0 5px 0 2px;
|
||
color: $color-white;
|
||
}
|
||
}
|
||
|
||
.value {
|
||
display: inline-block;
|
||
text-align: right;
|
||
color: $color-white;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|