gd-earth/src/components/HotLandmark.vue

<template>
  <div>
    <div
      v-show="!showit"
      class="switch"
      style="position: absolute; top: -40px; right: 0; z-index: 99; cursor: pointer"
      @click="showLandmark"
    >
      <img class="icon" src="../assets/toup.png" />
    </div>
    <div
      v-show="showit"
      class="switch"
      style="position: absolute; top: -50px; right: 0; z-index: 99; cursor: pointer"
      @click="showLandmark"
    >
      <img class="icon" src="../assets/todown.png" />
    </div>
    <div class="landmark">
      <table v-if="showit">
        <thead>
          <tr>
            <th>景点名称</th>
            <th>经度</th>
            <th>纬度</th>
            <th>访问景点</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in landmarkArr" :key="index">
            <td>{{ item ? item.landmark : index + 1 }}</td>
            <td>{{ item ? item.position.lng : "" }}</td>
            <td>{{ item ? item.position.lat : "" }}</td>
            <td>
              <button style="cursor: pointer" @click="write(item.position)">访问</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { usePositionStore } from "/@/stores/position";
import { landmarkArr } from "/@/information/landmark";

let showit = ref(false);

const showLandmark = () => {
  showit.value = !showit.value;
};

const position = usePositionStore();

const write = (myposition) => {
  position.set(myposition);
};
</script>

<style scoped>
.landmark {
  max-height: 360px;
  overflow-y: scroll;
}

.switch {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #fff;
  padding-top: 9px;
  padding-left: 3px;
}

.icon {
  width: 36px;
}

table {
  color: #ffffff;
  background-color: #242424;
  padding: 10px;
  border-radius: 7px;
  border-collapse: separate;
  border-spacing: 2px;
  text-align: center;
}

table th:first-child {
  width: 120px;
}

table th:not(:first-child) {
  width: 100px;
}

table thead tr {
  background-color: rgba(84, 84, 84, 0.8);
}

table tbody tr:nth-child(even) {
  background-color: rgba(84, 84, 84, 0.8);
}

table tbody tr:nth-child(odd) {
  background-color: rgba(84, 84, 84, 0.25);
}

table th,
table td {
  padding: 3px 5px;
}
</style>