css 标签定位指向

效果展示：

css:

源码参考：

<template>
  <div>
    <div style="position: relative; width: 100%; z-index: 1">
      <div
        @click="goDetail('居住环境')"
        style="
          position: absolute;
          width: 100px;
          top: 20vh;
          left: 5vh;
          z-index: 2;
          text-align: center;

          opacity: 0.85;
          padding: 5px;
          border-radius: 5px;

          color: aqua;
        "
      >
        <el-icon><Location /></el-icon>

        <span style="color: black; background-color: aqua; padding: 3px">居住环境</span>

        <span
          style="
            position: absolute;
            width: 100px;
            height: 1px;
            background-color: aqua;

            margin-left: 5px;
            left: 10px;
            top: 30px;
          "
        ></span>

        <span
          style="
            position: absolute;
            width: 50px;
            height: 1px;
            background-color: aqua;
            transform: rotate(45deg);
            margin-left: 5px;
            left: 103px;
            top: 48px;
          "
        ></span>

        <span
          style="
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: aqua;
            border-radius: 50%;
            left: 143px;
            top: 60px;
          "
        ></span>
      </div>

      <div
        @click="goDetail('商业街')"
        style="
          position: absolute;
          width: 100px;
          top: 40vh;
          left: 5vh;
          z-index: 2;
          text-align: center;

          opacity: 0.85;
          padding: 5px;
          border-radius: 5px;

          color: aqua;
        "
      >
        <el-icon><Location /></el-icon>
        <span style="color: black; background-color: aqua; padding: 3px">商业街</span>

        <span
          style="
            position: absolute;
            width: 100px;
            height: 1px;
            background-color: aqua;

            margin-left: 5px;
            left: 10px;
            top: 30px;
          "
        ></span>

        <span
          style="
            position: absolute;
            width: 50px;
            height: 1px;
            background-color: aqua;
            transform: rotate(45deg);
            margin-left: 5px;
            left: 103px;
            top: 48px;
          "
        ></span>

        <span
          style="
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: aqua;
            border-radius: 50%;
            left: 143px;
            top: 60px;
          "
        ></span>
      </div>

      <div
        @click="goDetail('历史古迹')"
        style="
          position: absolute;
          width: 100px;
          top: 30vh;
          right: 10vh;
          z-index: 2;
          text-align: center;

          opacity: 0.85;
          padding: 5px;
          border-radius: 5px;

          color: aqua;
        "
      >
        <el-icon><Location /></el-icon>

        <span style="color: black; background-color: aqua; padding: 3px">历史古迹</span>

        <span
          style="
            position: absolute;
            width: 100px;
            height: 1px;
            background-color: aqua;
            margin-left: 5px;
            left: 10px;
            top: 30px;
          "
        ></span>

        <span
          style="
            position: absolute;
            width: 50px;
            height: 1px;
            background-color: aqua;
            transform: rotate(-45deg);
            margin-left: 5px;
            left: -32px;
            top: 48px;
          "
        ></span>

        <span
          style="
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: aqua;
            border-radius: 50%;
            left: -26px;
            top: 60px;
          "
        ></span>
      </div>
    </div>

    <div class="next-page">
      <h2>建设优美人文自然环境</h2>
      <!-- 显示从上一页传递过来的图片 -->
      <img src="/waitan.jpg" alt="外滩" class="captured-photo" />
      <!-- <img v-if="photo" :src="photo" alt="Captured Photo" class="captured-photo" /> -->

      <p style="padding: 10px">
        城市建设是城市管理的重要组成部分。城市建设以规划为依据，通过建设工程对城市人居环境进行改造，对城市系统内各物质设施进行建设，城市建设的内容包括城市系统内各个物质设施的实物形态，是为管理城市创造良好条件的基础性、阶段性工作，是过程性和周期性比较明显的一种特殊经济工作。城市经过规划、建设后投入运行并发挥功能，提供服务，真正为市民创造良好的人居环境，保障市民正常生活，服务城市经济社会发展。因此，城市建设是以城市规划为依据最终服务于城市运行。其中分为城市精神文明建设和建筑实物建设。
      </p>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Location } from "@element-plus/icons-vue";
export default {
  name: "NextPage",
  components: {
    Location,
  },
  setup() {
    const route = useRoute();
    const photo = ref(route.query.photo);
    const router = useRouter();

    const goDetail = (title) => {
      router.push({
        name: "SitePage",
        query: {
          photo: photo.value,
          title: title,
        },
      });
    };

    return {
      photo,
      goDetail,
    };
  },
};
</script>

<style scoped>
.next-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;
  background-color: #f9f9f9;
}

h1 {
  margin-bottom: 20px;
}

.captured-photo {
  width: 95%;
  height: 60vh;
  border-radius: 8px;
}
</style>