From 33ab34b1c52b8d2cad81105bbda76459a1b84e68 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期一, 20 五月 2024 18:31:30 +0800
Subject: [PATCH] 时空缩略图
---
src/pages/territory/territory.vue | 42 ++++++++++++++++++++++++++++++++++++++----
1 files changed, 38 insertions(+), 4 deletions(-)
diff --git a/src/pages/territory/territory.vue b/src/pages/territory/territory.vue
index 22219f4..e131ec5 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
@@ -193,9 +199,10 @@
<script>
import { loadBMap } from "@/static/map.js";
import L from "leaflet";
+import "leaflet.chinatmsproviders";
+
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
-import "leaflet.chinatmsproviders";
import { getRetrieval, getDynasty } from "@/api/index.js";
export default {
data() {
@@ -462,7 +469,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 +505,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 +745,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