gd-earth/src/components/HotLandmark.vue

<template>
  <div>
    <div
      v-show="!showit"
      class="switch"
      style="position: absolute; top: -2.5rem; right: 0; z-index: 99; cursor: pointer"
      @click="showLandmark"
    >
      <img class="icon" src="../assets/up.png" />
    </div>
    <div
      v-show="showit"
      class="switch"
      style="position: absolute; top: -2.5rem; right: 0; z-index: 99; cursor: pointer"
      @click="showLandmark"
    >
      <img class="icon" src="../assets/down.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 { useFlytoStore } from "/@/stores/flyto";
import { landmarkArr } from "/@/information/landmark";

let showit = ref(false);

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

const flyto = useFlytoStore();

const write = (flytoLand) => {
  flyto.set(flytoLand);
};
</script>

<style scoped>
.landmark {
  max-height: 18rem;
  overflow-y: auto;
}

.switch {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}

.icon {
  width: 2.5rem;
}

table {
  color: #ffffff;
  background-color: #242424;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border-collapse: separate;
  border-spacing: 0.1rem;
  text-align: center;
}

table th:first-child {
  width: 6rem;
}

table th:not(:first-child) {
  width: 5rem;
}

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: 0.2rem 0.2rem;
}
</style>