From f5ffd93860c6ddfc82930c0c71a11e7dba6abf6d Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期一, 20 五月 2024 18:11:34 +0800
Subject: [PATCH] 人物时空地图

---
 src/pages/characterMap/characterMap.vue |   83 +++++++++++++++++++++++------------------
 1 files changed, 47 insertions(+), 36 deletions(-)

diff --git a/src/pages/characterMap/characterMap.vue b/src/pages/characterMap/characterMap.vue
index 763f48f..84100fd 100644
--- a/src/pages/characterMap/characterMap.vue
+++ b/src/pages/characterMap/characterMap.vue
@@ -1,38 +1,28 @@
 <template>
   <view>
-    <headNav
-      :idIndex="idIndex"
-      text="涓尰浜虹墿鏁版嵁搴�"
-    />
-    <el-button
-      class="getBack"
-      @click="getBack"
-    >杩斿洖</el-button>
-    <view
-      class=""
-      style="position: relative"
-    >
+    <headNav :idIndex="idIndex" text="涓尰浜虹墿鏁版嵁搴�" />
+    <el-button class="getBack" @click="getBack">杩斿洖</el-button>
+    <view class="" style="position: relative">
       <!-- 鍦板浘 -->
       <!-- <view id="spaceTime" style="height: 90vh;width: 100%;position: relative;"></view> -->
       <div id="map"></div>
 
       <!-- 璇︽儏 -->
-      <el-dialog
-        class="particulars"
-        :visible.sync="menuNav"
-        :modal="false"
-      >
+      <el-dialog class="particulars" :visible.sync="menuNav" :modal="false">
         <view
           class="font-family"
           style="font-size: 0.26rem; padding-top: 0.16rem; font-weight: bold"
-        >{{ activityInfo.participants }}</view>
-        <ul style="
+          >{{ activityInfo.participants }}</view
+        >
+        <ul
+          style="
             border-bottom: 0.01rem solid #d8d8d8;
             padding: 0.16rem 0;
             font-size: 0.14rem;
             font-weight: 400;
             line-height: 0.28rem;
-          ">
+          "
+        >
           <li>鍑虹敓浜巤{ basicInfo.nativePlace }}</li>
           <li>
             {{
@@ -44,12 +34,14 @@
             }}
           </li>
         </ul>
-        <ul style="
+        <ul
+          style="
             margin: 0.31rem 0 0.11rem 0;
             font-size: 0.14rem;
             font-weight: 400;
             line-height: 0.28rem;
-          ">
+          "
+        >
           <li>娲诲姩鍚嶇О锛歿{ activityInfo.activityName }}</li>
           <li>娲诲姩鍦扮偣锛歿{ activityInfo.activityAddr }}</li>
           <li>娲诲姩鍖洪棿锛歿{ activityInfo.time }}</li>
@@ -61,14 +53,10 @@
           src="https://img0.baidu.com/it/u=1845740325,2917001370&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1711731600&t=0b208ab46e1d33aa81ac31dd6bf627be"
           alt=""
         /> -->
-        <div
-          class="box"
-          style="width: 80%"
-        >
-          <span
-            class="span"
-            :style="{ marginLeft: spanML + 'rem' }"
-          >{{ span }}骞�</span>
+        <div class="box" style="width: 80%">
+          <span class="span" :style="{ marginLeft: spanML + 'rem' }"
+            >{{ span }}骞�</span
+          >
           <div class="scales">
             <view
               v-for="(item, index) in yearArr"
@@ -78,10 +66,7 @@
             ></view>
           </div>
           <div class="MX"></div>
-          <div
-            class="cursor"
-            :style="{ marginLeft: cursorML + 'rem' }"
-          ></div>
+          <div class="cursor" :style="{ marginLeft: cursorML + 'rem' }"></div>
         </div>
       </el-dialog>
     </view>
@@ -153,7 +138,7 @@
         popupAnchor: [1, -24], // 璇ョ偣鏄浉瀵逛簬iconAnchor寮瑰嚭淇℃伅鐨勪綅缃�  杩欎釜鏄垜鎵嬪姩璋冨嚭鏉ョ殑锛屾枃妗ｉ粯璁ゅ師濮嬪�兼槸[-1锛�-76]锛屾垜鏄幓涓�鍗婂�硷紝鍙栦竴鍗婂�艰皟鍑烘潵鐨�
       });
       let icon = L.divIcon({
-        html: "<div class='map-circle-name'></div>",
+        html: "<div class='map-circle-name ripple'></div>",
         iconSize: [80, 80],
         className: "map-circle",
       });
@@ -607,6 +592,32 @@
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  background-color: #2070bc;
+  background-color: rgb(222, 142, 102);
+}
+
+::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