From 42c8c76b00027995e01cbe692198831fbe019f38 Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期二, 02 十二月 2025 17:11:49 +0800
Subject: [PATCH] fix: 数据看板
---
src/views/DataBoard/components/DataBoardCenterMapMark.vue | 56 +++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 39 insertions(+), 17 deletions(-)
diff --git a/src/views/DataBoard/components/DataBoardCenterMapMark.vue b/src/views/DataBoard/components/DataBoardCenterMapMark.vue
index 1a1ed8f..2d4ee90 100644
--- a/src/views/DataBoard/components/DataBoardCenterMapMark.vue
+++ b/src/views/DataBoard/components/DataBoardCenterMapMark.vue
@@ -1,11 +1,13 @@
<template>
- <div class="data-board-center-map-mark">
+ <div class="data-board-center-map-mark" :class="{ active: innerChoose }">
<div class="data-board-center-map-mark-item init" v-if="!innerChoose">
<img :src="DataBoardMapInit" alt="" />
</div>
<div class="data-board-center-map-mark-item choose" v-else>
- <div class="data-board-center-map-mark-item-park">{{ parkName }}</div>
- <img :src="DataBoardMapChoose" alt="" />
+ <div class="data-board-center-map-mark-item-park">
+ <div class="data-board-center-map-mark-item-park-name">{{ parkName }}</div>
+ </div>
+ <img class="data-board-center-map-mark-item-img" :src="DataBoardMapChoose" alt="" />
</div>
</div>
</template>
@@ -45,6 +47,10 @@
@use '@/style/common.scss' as *;
.data-board-center-map-mark {
+ &.active {
+ z-index: 10;
+ }
+
.data-board-center-map-mark-item {
display: flex;
justify-content: center;
@@ -61,22 +67,38 @@
&.choose {
position: relative;
-
- img {
- width: 100%;
- height: 100%;
- }
+ display: flex;
+ flex-direction: column;
.data-board-center-map-mark-item-park {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- font-size: 24px;
- line-height: 50px;
- font-family: YouSheBiaoTiHei Regular;
- text-align: center;
- color: #ffffff;
+ padding: 2px;
+ border-radius: 8px;
+ background-image: linear-gradient(
+ to bottom,
+ rgba(248, 255, 156, 0.5),
+ rgba(193, 245, 6, 0.5)
+ );
+
+ .data-board-center-map-mark-item-park-name {
+ padding: 12px 26px;
+ font-size: 24px;
+ font-family: YouSheBiaoTiHei Regular;
+ border-radius: 8px;
+ text-align: center;
+ color: #ffffff;
+ background: linear-gradient(
+ 180deg,
+ rgba(255, 176, 29, 0.8) 0%,
+ rgba(255, 210, 92, 0.8) 100%
+ );
+ line-height: 1;
+ word-break: keep-all;
+ }
+ }
+
+ .data-board-center-map-mark-item-img {
+ width: 96px;
+ height: 54px;
}
}
}
--
Gitblit v1.9.1