YFYC2-H5/src/view/bldgModel/index.vue

<script setup lang="ts">
import { useRouter } from "vue-router";
import ModelList, { baseURL } from "@/assets/data/Model/index.ts";
import { useModel } from "@/store/Model";
import { ModelType } from "@/types/Model/index";
import Tabbar from "@/components/Tabbar.vue";

const router = useRouter();
const store = useModel();

const baseImageUrl = computed(() => {
  return baseURL + "/image/bldgModel/";
});

// 跳转到模型详情页
const goDetail = (code: string) => {
  console.log("code", code);
  const current = ModelList.find((item: ModelType) => {
    return item.code === code;
  });
  store.currentScene = current!;
  router.push({
    name: "modelDetail",
    query: {
      code: code,
    },
  });
};

const goChange = () => {
  router.push({
    name: "modelChange",
  });
};

onMounted(() => {
  //   store.list = ModelList;
  setTimeout(() => {
    window.scrollTo({
      top: 560,
      left: 0,
      behavior: "smooth",
    });
  });
});
</script>

<template>
  <div class="model">
    <!-- <div class="map-top">芜湖市优秀文物建筑</div> -->
    <img class="model-bg" :src="baseImageUrl + 'home.jpg'" alt="" />
    <!-- 点击位置 -->
    <!-- 大教堂 -->
    <div
      class="click-box"
      v-for="(item, index) in ModelList"
      :key="index"
      :style="{
        top: item.top,
        left: item.left,
      }"
      @click="goDetail(item.code)"
    ></div>
    <div class="plate-box" @click="goChange"></div>
  </div>
  <Tabbar />
</template>

<style lang="less" scoped>
.model {
  overflow: auto;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  position: relative;
  .map-top {
    width: 100%;
    height: 8vh;
    background: var(--color-bg);
    font-size: 1rem;
    text-align: center;
    line-height: 8vh;
    letter-spacing: 3px;
    color: #4d4d4d;
  }
  .model-bg {
    width: 100%;
    background-size: cover;
  }
  .click-box {
    width: 70%;
    height: 12rem;
    position: absolute;
    // background: #017c01a1;
  }
  .plate-box {
    width: 30%;
    height: 10%;
    top: 10%;
    right: 5%;
    position: absolute;
    background: #017c0100;
  }
}
</style>