人物时空地图

杨磊

2024-05-20 f5ffd93860c6ddfc82930c0c71a11e7dba6abf6d

人物时空地图

 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>