leshan_museum/src/components/detail/ThreeDetail.vue

<template>
  <div class="two-hp">
    <div class="content">
      <img class="bg" :src="popImg" alt="">
      <div class="inner">
        <div class="left">
          <video ref="video$" muted autoplay :poster="videoPostImg" class="initial-video" playsinline="true"
            x5-playsinline="true" webkit-playsinline="true"
            src="https://culture.4dage.com/demo/gaoxinqu/source/videos/video.mp4" @mousedown.passive.stop
            @touchstart.passive.stop @wheel.passive.stop />
        </div>
        <div class="right">
          <h2>明蓝釉女陶侍俑</h2>
          <p>年代：汉朝 </p>
          <p>尺寸：长19，宽17.5，高33厘米</p>
          <swiper class="dir-body" :modules="modules" :space-between="10" :scrollbar="{ draggable: true }"
            :freeMode="true" :slides-per-view="'auto'" :observer="true" :mousewheel="true">
            <swiper-slide v-for="item in 5" :key="item.id">
              <div class="db-slide" @click="showIfr = true">
                <img src="https://4dscene.4dage.com/culturalrelics/FJBWG/images/fj01.jpg" alt="">
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
      <img class="close" @click="$emit('close')" :src="closeImg" alt="">
    </div>

    <Transition>
      <div class="ifrcontent" v-if="showIfr">
        <div class="title">明蓝釉女陶侍俑</div>
        <iframe src="https://4dscene.4dage.com/culturalrelics/FJBWG/Model2.html?m=fj01" frameborder="0"></iframe>
        <img class="close" @click="showIfr = false" :src="close_thin" alt="">
      </div>
    </Transition>
    
  </div>
</template>

<script setup>
import { ref } from "vue"
import { Grid, FreeMode, Mousewheel } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';

import 'swiper/css';
import 'swiper/css/grid';
import 'swiper/css/free-mode';
import 'swiper/css/mousewheel';


const popImg = utils.getImageUrl(`hp_bg.jpg`)
const closeImg = utils.getImageUrl(`close.png`)
const close_thin = utils.getImageUrl(`close_thin.png`)
const showIfr = ref(false)

const modules = [Grid, FreeMode, Mousewheel]

</script>

<style lang="less" scoped>
.two-hp {
  position: fixed;
  top: 0;
  z-index: 999;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(190, 180, 166, 0.8);
  backdrop-filter: blur(20px);

  .content,
  .ifrcontent {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    border-radius: 10px;
    overflow: hidden;

    .inner {
      display: flex;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 30px;

      .left {
        width: 60%;
        flex-shrink: 0;
        padding: 10px;
        border: 3px solid #83796F;

        >video {
          width: 100%;
        }
      }

      .right {
        padding-left: 30px;
        width: 33%;
        box-sizing: border-box;

        >h2 {
          color: #911927;
          font-size: 30px;
          line-height: 1.5;
          margin-bottom: 10px;
        }

        >p {
          font-size: 26px;
          color: #7A6553;
          line-height: 1.5;
        }

        .dir-body {
          position: relative;
          margin-top: 40%;

          .swiper-wrapper {
            width: 100%;

            .swiper-slide {
              width: 50%;
              border-radius: 5px;
              overflow: hidden;

              .db-slide {
                width: 100%;
                cursor: pointer;
                >img {
                  width: 100%;
                }
              }
            }
          }

        }
      }
    }

    .bg {
      width: 100%;
    }

    .close {
      position: absolute;
      right: 20px;
      top: 20px;
      z-index: 99;
      cursor: pointer;
      width: 50px;
    }
  }

  .ifrcontent {
    z-index: 1;
    width: 80%;
    height: 80%;
    background: rgba(0, 0, 0, 0.5);

    .title {
      position: absolute;
      left: 20px;
      color: #fff;
      line-height: 45px;
      height: 45px;
      padding: 0 40px 0 20px;
      top: 20px;
      z-index: 99;
      background-image: linear-gradient(90deg, #911927, rgba(145, 25, 39, 0));
    }

    >iframe {
      width: 100%;
      height: 100%;
    }

    .close {
      width: 40px;
    }
  }
}</style>