101 lines
2.0 KiB
Vue
101 lines
2.0 KiB
Vue
<template>
|
||
<centerMap :dialog-title="'投入品'" @mapclick="doMapclick">
|
||
<template #header>
|
||
<div class="land-map-pop-header">
|
||
<div class="title">{{ currentRegion?.name || '投入品' }}</div>
|
||
<!-- <a class="view-case" @click.prevent="handleViewCase">查看案件 ></a>-->
|
||
</div>
|
||
</template>
|
||
<template #dialogContent>
|
||
<div class="land-map-pop-content">
|
||
<div class="section-title">投入品管控情况：</div>
|
||
<div class="main-content">
|
||
<div class="item">
|
||
<div class="label">巡检次数</div>
|
||
<div class="value green">562次</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="label">案件次数</div>
|
||
<div class="value red">22次</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</centerMap>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
|
||
let currentRegion = ref(null);
|
||
const doMapclick = (data) => {
|
||
currentRegion.value = data;
|
||
};
|
||
|
||
const handleViewCase = () => {
|
||
// 跳转查看案件逻辑
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.land-map-pop-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 6px;
|
||
margin-top: 3px;
|
||
|
||
.title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #00f9ff;
|
||
}
|
||
|
||
.view-case {
|
||
font-size: 16px;
|
||
color: #00ff99;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.land-map-pop-content {
|
||
width: 100%;
|
||
padding: 4px 10px;
|
||
color: #ffffff;
|
||
|
||
.section-title {
|
||
margin-bottom: 12px;
|
||
font-size: 15px;
|
||
text-align: left;
|
||
}
|
||
|
||
.main-content {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
|
||
.item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 16px;
|
||
|
||
.label {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.value {
|
||
&.green {
|
||
color: #01ffb1;
|
||
}
|
||
|
||
&.red {
|
||
color: #ff4242;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|