From e8ef9ac64bbfd443d01f230da370bf5b9ecb14b7 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期一, 20 五月 2024 18:07:31 +0800
Subject: [PATCH] 地域图谱标点效果
---
src/pages/territory/territory.vue | 39 ++++++++++++++++++++++++++++++++++++---
1 files changed, 36 insertions(+), 3 deletions(-)
diff --git a/src/pages/territory/territory.vue b/src/pages/territory/territory.vue
index 22219f4..4d8a90b 100644
--- a/src/pages/territory/territory.vue
+++ b/src/pages/territory/territory.vue
@@ -150,7 +150,13 @@
<!-- 鏈濅唬 -->
<view
class="flex flex-center"
- style="width: 100%; position: fixed; bottom: 0.33rem; left: 0; z-index: 99;"
+ style="
+ width: 100%;
+ position: fixed;
+ bottom: 0.33rem;
+ left: 0;
+ z-index: 99;
+ "
>
<ul class="flex">
<li
@@ -462,7 +468,7 @@
});
let icon = L.divIcon({
- html: "<div class='map-circle-name'></div>",
+ html: "<div class='map-circle-name '></div>",
iconSize: [80, 80],
className: "map-circle",
});
@@ -498,7 +504,7 @@
break;
}
let icon = L.divIcon({
- html: `<div class='${currentClassName}'></div>`,
+ html: `<div class='${currentClassName} ripple'></div>`,
iconSize: [80, 80],
className: "map-circle",
});
@@ -738,4 +744,31 @@
font-size: 14px !important;
z-index: 10 !important;
}
+
+::v-deep .ripple {
+
+ border-radius: 50%;
+ position: relative;
+ overflow: hidden;
+}
+
+::v-deep .ripple::before {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 150%; /* Ensure it covers the entire parent */
+ height: 150%;
+ background: rgba(255, 255, 255, 0.5);
+ border-radius: 50%;
+ transform: translate(-50%, -50%) scale(1);
+ animation: ripple-animation 1s infinite linear;
+}
+
+@keyframes ripple-animation {
+ to {
+ transform: translate(-50%, -50%) scale(0);
+ opacity: 0;
+ }
+}
</style>
--
Gitblit v1.9.1