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

<script setup lang="ts">
import "swiper/swiper-bundle.css";
import Tabbar from "@/components/Tabbar.vue";
// import Music from "@/components/Music.vue";
import ModelList, { baseURL } from "@/assets/data/Model";
import Swiper from "swiper";
// import { baseURL } from "@/assets/data/Model";

import DownIcon from "@/assets/img/map/down.png";
import UpIcon from "@/assets/img/map/up.png";
import { useMap } from "@/store/Map";

const route = useRoute();
// 隐藏轮播
const isShow = ref(true);
const store = useMap()

const swiperRef = ref({});

const router = useRouter();

const goDetail = (code: string) => {
  router.push({
    path: "/bldgMap/detail",
    query: {
      code: code,
    },
  });
};

const viewTop = ref("");
const viewLeft = ref("");

const startY = ref();
const startX = ref();

// 手指滑动
const touchMove = (event: any) => {
  let moveEndX = event.changedTouches[0].pageX;
  let X = moveEndX - startX.value; //如果值为正,则代表手指下滑,反则则为上滑,为0则表示点击

  let moveEndY = event.changedTouches[0].pageY;
  let Y = moveEndY - startY.value; //如果值为正,则代表手指下滑,反则则为上滑,为0则表示点击

  // console.log(X, Y);
  if (X > 20) {
    viewTop.value = parseFloat(viewTop.value) - 0.6 + "%";
  }
  if (X < -20) {
    viewTop.value = parseFloat(viewTop.value) + 0.6 + "%";
  }
  if (Y > 20) {
    // console.log("上滑", viewTop.value, viewLeft.value);
    viewLeft.value = parseFloat(viewLeft.value) - 0.6 + "%";
  }
  if (Y < -20) {
    // console.log("下滑", viewTop.value, viewLeft.value);
    viewLeft.value = parseFloat(viewLeft.value) + 0.6 + "%";
  }
};

// 开始滑动
const handletouchstart = (event: any) => {
  startX.value = event.changedTouches[0].pageX;
  startY.value = event.changedTouches[0].pageY;
};

const getAssetURL = (image: string) => {
  return new URL(`../../assets/img/map/nornal/${image}`, import.meta.url).href;
};

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

const currentScene = ref(ModelList[0]);

onMounted(() => {
  const swiperRef = new Swiper(".swiper-container", {
    slidesPerView: 1.7,
    spaceBetween: 20,
    effect: "coverflow",
    centeredSlides: true,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    initialSlide: store.currentIndex ? store.currentIndex : 0,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    on: {
      slideChange: function (swiper: any) {
        nextTick(() => {
          currentScene.value = ModelList[swiper.activeIndex];
          store.currentIndex = swiper.activeIndex;
          viewTop.value = currentScene.value.viewTop;
          viewLeft.value = currentScene.value.viewLeft;
        });
      },
    },
  });
  if (route.query.name) {
    viewLeft.value = "80%";
    viewTop.value = "40%";
  } else {
    viewLeft.value = ModelList[0].viewLeft;
    viewTop.value = ModelList[0].viewTop;
  }
});
</script>

<template>
  <div id="background" class="map" :style="{
    backgroundPosition: `${viewTop} ${viewLeft}`,
  }" @touchmove="touchMove" @touchstart="handletouchstart">
    <!-- 头部 -->
    <!-- <div class="map-top">芜湖市优秀文物建筑</div> -->
    <!-- 行政区选择 -->
    <div class="region-btn" @click="goChange()">
      <div class="region-btn-name">镜湖区</div>
      <div class="region-btn-dics">[选择行政区]</div>
    </div>
    <!-- 轮播图 -->
    <div class="swiper-box" v-show="isShow">
      <div class="swiper-container" ref="swiperRef">
        <div class="swiper-wrapper">
          <div class="swiper-slide option-item" v-for="(item, index) in ModelList" :key="index"
            @click="goDetail(item.code)">
            <!-- 边框图片 -->
            <img class="border-img" :src="`${baseURL}/thumbnail/border.png`" alt="" />
            <!-- 普通图片 -->
            <img class="nornal-img" :src="getAssetURL(`${item.name}.png`)" alt="" />
            <div class="disc-box">
              <div class="disc-box-title">
                <span>·</span>{{ item.fullName }}
              </div>
              <div class="disc-box-content">{{ item.disc }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <img class="img-icon" :src="isShow ? DownIcon : UpIcon" alt="" @click="() => {
        isShow = !isShow;
      }
      " />
    <!-- 建筑列表 -->
    <!-- <img
      class="architecture-img"
      :src="getAssetURL(`${item.name}.png`)"
      alt=""
      v-for="(item, index) in MapData"
      :key="index"
      :style="{ top: item.mapTop, left: item.mapLeft }"
    /> -->
  </div>
  <Tabbar />
  <!-- <Music /> -->
</template>

<style lang="less" scoped>
.map {
  min-width: 100%;
  min-height: 100vh;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  background-image: url(../../assets/img/map/home/mapBg2.jpg);
  background-size: 450%;
  // background-position: 20% 0%;
  overflow: hidden;
  position: relative;
  -webkit-user-drag: element;
  user-drag: element;

  &-top {
    width: 100%;
    height: 8vh;
    background: var(--color-bg);
    font-size: 1rem;
    text-align: center;
    line-height: 8vh;
    letter-spacing: 3px;
    color: #4d4d4d;
  }

  .region-btn {
    width: 45%;
    margin: 10px;

    height: 5vh;
    background-image: url(/src\assets\img\map\regionBg.jpg);
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    &-name {
      font-size: 0.9rem;
      font-weight: bold;
      color: #62573f;
      margin-right: 5px;
      letter-spacing: 2px;
    }

    &-dics {
      font-size: 0.6rem;
      color: #948973;
      font-weight: 600;
      letter-spacing: 2px;
    }
  }

  .swiper-box {
    width: 100%;
    background: linear-gradient(to top, #0c0c0c45, #ffffff00);
    position: fixed;
    bottom: 0;

    img {
      width: 100%;
      height: 100%;
      // object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
    }

    .border-img {
      width: 100%;
      height: 100%;
      z-index: 2;
    }

    .nornal-img {
      border-radius: 40px;
    }

    .disc-box {
      width: 85%;
      // background: red;
      color: white;
      position: absolute;
      font-size: 0.6rem;
      bottom: 5vw;
      left: 8%;

      &-title {
        font-weight: bold;
        font-size: 1rem;

        span {
          font-size: 1.5rem;
          margin-right: 5px;
        }
      }

      // &-title:before {
      //   content: "";
      //   position: absolute;
      //   left: -10px;
      //   top: 6%;
      //   transform: translateY(-6%);
      //   width: 10px;
      //   height: 10px;
      //   border-radius: 50%;
      //   background: blue;
      // }
      &-content {
        width: 100%;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        /* 这里是超出几行省略 */
        letter-spacing: 2px;
      }
    }
  }

  .img-icon {
    width: 8vw;
    height: 8vw;
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.architecture-img {
  width: 20%;
  position: relative;
}

.swiper-container {
  width: 100%;
  height: 80vw;
  margin: 0;
  padding: 0;
  perspective: 1200px;
}

.swiper-slide {
  // background: #fff;
  border-radius: 10px;
  // box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transform-style: preserve-3d;
  transform-origin: center bottom;
  transition: transform 0.5s;
}

.swiper-slide-active {
  transform: translate3d(0, -130px, 0);
  // height: 43vh;
}

.swiper-slide-next,
.swiper-slide-prev {
  opacity: 0.6;
  // height: 40vh;
  transform: translate3d(0, 0, -200px);
}

.swiper-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.swiper-button-next {
  right: 10px;
}

.swiper-button-prev {
  left: 10px;
}
</style>