<template>
  <div class="content">
    <div class="wrapper">
      <div class="inner">
        <!-- 展览基本信息 -->
        <div class="content-item display-detail_basic_info">
          <div class="info-container">
            <div v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0" class="info-container-left">
              <SlideImage :imgList="displayDetail.imagesVo" v-if="
                displayDetail.imagesVo && displayDetail.imagesVo.length > 0
              " />
              <SlideImage :imgList="[{ pressUrl: displayDetail.faceImagePressUrl }]"
                v-else-if="displayDetail.faceImagePressUrl" />
            </div>
            <div class="info-container-right">
              <div class="info-title">
                <span>{{ displayDetail.title }} </span>
                <div class="view-count">
                  <svg-icon icon-class="view"></svg-icon>
                  <span>{{ displayDetail.browseCount }}</span>
                </div>
              </div>

              <el-row :span="20">
                <el-col :span="24" class="left">
                  <div class="basic-info">
                    <div class="body-item">
                      <span class="label">
                        <!-- <svg-icon icon-class="keyword"></svg-icon> -->
                        关键词：
                      </span>
                      <span class="value">{{
                          displayDetail.keyword || "暂无"
                      }}</span>
                    </div>
                    <div class="body-item">
                      <span class="label">
                        <!-- <svg-icon icon-class="zllx"></svg-icon> -->
                        展览类型：
                      </span>
                      <span class="value">{{
                          dicts.displayType[displayDetail.type] || "暂无"
                      }}</span>
                    </div>
                    <div class="body-item" v-if="(dicts && dicts.displayCharacter)">
                      <span class="label">
                        <!-- <svg-icon icon-class="zlxz"></svg-icon> -->
                        展览性质：
                      </span>
                      <span class="value">
                        {{ dicts.displayCharacter[displayDetail.displayCharacter] || '暂无'
                        }}</span>
                    </div>
                    <div class="body-item">
                      <span class="label">
                        <!-- <svg-icon icon-class="zldw"></svg-icon> -->
                        展览单位：
                      </span>
                      <span class="value">{{
                          displayDetail.deptName || "暂无"
                      }}</span>
                    </div>
                    <div class="body-item">
                      <span class="label">
                        <!-- <svg-icon icon-class="zldq"></svg-icon> -->
                        展览地区：
                      </span>
                      <span class="value">{{
                          displayDetail.regionName || "暂无"
                      }}</span>
                    </div>
                  </div>
                </el-col>
                <el-col :span="24" class="right">
                  <div class="qrcode">
                    <!-- <img
                      src="@/assets/imgs/display/normal/test-qrcode.png"
                      alt=""
                    /> -->
                  </div>
                  <div class="tools">
                    <ReaderOperations :loveCount="displayDetail.loveCount"
                      :loveCountStatus="Boolean(displayDetail.loveCountStatus)"
                      :collectCount="displayDetail.collectCount" :collectCountStatus="
                        Boolean(displayDetail.collectCountStatus)
                      " :sourceId="displayDetail.exhibitionId" :title="displayDetail.title"
                      :sourceType="'biz_exhibition'" @reload="() => { }" />
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="audio" :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
            @click="handleClickAudio" v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0">
            <img src="@/assets/imgs/display/normal/music.png" alt="" />
            <!-- <svg-icon icon-class="music"></svg-icon> -->
            <AudioPlayer style="display: none" :url="$getFullUrl(displayDetail.audiosVo[0].url)" ref="AudioPlayer" />
          </div>
        </div>
        <div class="content-item display-detail_tabbar" id="tabbar" :class="{ isFixed: isFixed }">
          <span v-for="(item, index) in tabbarData" :key="index">
            <span @click="handleClickTabItem(item)" :class="[
              'tab-item',
              currentTab && currentTab.domId == item.domId ? 'active' : '',
            ]" v-html="item.name" v-if="
  displayDetail[item.domId] &&
  displayDetail[item.domId].length > 0
">
            </span>
          </span>
        </div>
        <!-- 展览简介 -->
        <div class="content-item display-detail_intro" id="intro">
          <div class="intro-title">
            <!-- <svg-icon icon-class="jianjie"></svg-icon> -->
            <!-- <i class="el-icon-tickets"></i> -->
            <span>展览简介</span>
          </div>
          <div class="intro-content">
            <div class="left-box">简介</div>
            <div class="intro-content-container" v-html="displayDetail.intro"></div>
          </div>
        </div>

        <div class="display-detail_virtual content-item" v-if="displayDetail.virtualVo.length > 0" id="virtualVo">
          <div class="custom_title">
            <div class="center">
              <!-- <svg-icon icon-class="wenxian"></svg-icon> -->
              <span class="title">虚拟展厅</span>
            </div>
          </div>
          <div class="vr-content">
            <div class="img-container" @click="handleToVR(item)" v-for="(item, index) in displayDetail.virtualVo"
              :key="index">
              <img :src="$getFullUrl(item.faceImagePressUrl)" alt="" />
              <div class="modal">
                <svg-icon icon-class="360"></svg-icon>
                <div class="name">点击进入{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 展览视频 -->
        <div id="videosVo" class="content-item videos"
          v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0">
          <div class="video-title">
            <!-- <i class="el-icon-video-camera"></i> -->
            展览视频
          </div>
          <div class="video-names">
            <swiper class="swiper video-swiper" :options="videoSwiperOption" ref="unitSwiper" v-if="currentVideo">
              <swiper-slide :class="[
                'slide-item',
                item.fileId == currentVideo.fileId ? 'active' : '',
              ]" v-for="(item, index) in displayDetail.videosVo" :key="index"
                @click.native="handleChangeCurrentVideo(item)">
                {{ item.name.split(".")[0] }}
              </swiper-slide>
            </swiper>
            <div class="swiper-button-prev video-swiper-button-prev" slot="button-prev">
              <i class="el-icon-arrow-left"></i>
            </div>
            <div class="swiper-button-next video-swiper-button-next" slot="button-next">
              <i class="el-icon-arrow-right"></i>
            </div>
            <!-- <div class="video-item" v-for="(item, index) in displayDetail.videosVo" :key="index"
              @click="handleChangeCurrentVideo(item)">
              <div :class="[
                'name',
                currentVideo && item.fileId == currentVideo.fileId
                  ? 'active'
                  : '',
              ]">
                {{ item.name.split(".")[0] }}
              </div>
            </div> -->


          </div>
          <div class="video-container">
            <video v-if="currentVideo && currentVideo.url" :src="$getFullUrl(currentVideo.url)"
              :controls="true"></video>
          </div>
          <!-- <VideoCustomPlayer v-if="currentVideo && currentVideo.url" :src="$getFullUrl(currentVideo.url)" class="video-box" /> -->
        </div>

        <!--展览单元  -->
        <div class="content-item display-detail_units" ref="units" v-if="displayDetail.exhibitionUnits.length > 0"
          id="exhibitionUnits">
          <div class="custom_title">
            <div class="center">
              <span class="title">展览单元</span>
            </div>
          </div>
          <NormalStyleUnit :curUnit="curUnit" :exhibitionUnits="displayDetail.exhibitionUnits"
            @handleClickUnit="handleClickUnit" @handelPreviewImages="handelPreviewImages" @handleToCr="handleToCr" />
        </div>

        <!--展览相关文物  -->
        <div class="content-item display-detail_relateRc" ref="units" v-if="
          displayDetail.culturalRelicVo &&
          displayDetail.culturalRelicVo.length > 0
        " id="culturalRelicVo">
          <div class="cr-title">展览文物</div>
          <SlideImageGroup :imgList="displayDetail.culturalRelicVo">
            <template slot-scope="{ item }" slot="img">
              <img :src="$getFullUrl(item.faceImagePressUrl)" alt="" style="
                  width: 100%;
                  height: 100%;
                  object-fit: fill;
                  cursor: pointer;
                " />
            </template>
            <template slot-scope="{ item }" slot="info">
              <div class="name">{{ item.name }}</div>
            </template>
          </SlideImageGroup>
        </div>
        <!-- 相关文献 -->
        <div class="content-item display-detail_lts" v-if="
          displayDetail.literatureVo && displayDetail.literatureVo.length > 0
        " id="literatureVo">
          <div class="custom_title">
            <div class="center">
              <!-- <svg-icon icon-class="wenxian"></svg-icon> -->
              <span class="title">相关文献</span>
            </div>
          </div>
          <div class="lts-content">
            <div class="lt-item" v-for="(item, index) in displayDetail.literatureVo" :key="index"
              @click="handleViewLt(item)">
              <span class="lt-order">[{{ index + 1 }}]</span>
              <span class="lt-authors" v-if="item.authors">{{ item.authors }}.</span>
              <span class="lt-name" v-if="item.name">{{ item.name }}.</span>
              <span class="lt-source" v-if="item.source">{{ item.source }}.</span>
              <span class="lt-date" v-if="item.date">{{ item.date }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
  </div>
</template>

<script>
import AudioPlayer from "@/components/AudioPlayer";
import ReaderOperations from "@/components/ReaderOperations";
import { previewFile } from "@/utils/file";
import SlideImage from "@/components/SlideImage";
import SlideImageGroup from "@/components/SlideImageGroup";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import { isElementInViewport2 } from "@/utils/index";
import NormalStyleUnit from './NormalStyleUnit.vue'
import VideoCustomPlayer from "@/components/VideoPlayer";
export default {
  name: "NormalStyle",
  components: {
    AudioPlayer,
    ReaderOperations,
    VideoCustomPlayer,
    NormalStyleUnit,
    SlideImage,
    SlideImageGroup,
    swiper,
    swiperSlide,
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },
  props: {
    displayDetail: {
      type: Object,
      default: () => ({}),
    },
    dicts: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    let vm = this;
    return {
      imgViewerVisible: false,
      relateRelics: [],
      audioPlaying: true,
      curUnit: {},
      dotImg: require("@/assets/imgs/display/normal/mz-dot.png"),
      dotImgS: require("@/assets/imgs/display/normal/mz-dot-s.png"),
      page: null,
      currentVideo: null,
      videoSwiperOption: {
        loop: false,
        loopedSlides: 8, // looped slides should be the same
        spaceBetween: 10,
        slidesPerView: 4,
        navigation: {
          nextEl: ".video-swiper-button-next",
          prevEl: ".video-swiper-button-prev",
        },
      },
      isFixed: false,
      currentTab: null,
      offsetTop: null,
      tabbarData: [
        {
          name: "展览简介",
          domId: "intro",
        },
        {
          name: "虚拟展厅",
          domId: "virtualVo",
        },
        {
          name: "展览视频",
          domId: "videosVo",
        },

        {
          name: "展览单元",
          domId: "exhibitionUnits",
        },

        {
          name: "展览文物",
          domId: "culturalRelicVo",
        },
        {
          name: "相关文献",
          domId: "literatureVo",
        },
      ],
    };
  },
  async mounted() {
    this.loadDetail();
    this.$nextTick(() => {
      window.addEventListener("scroll", this.initHeight);
      this.offsetTop = document.querySelector("#tabbar").offsetTop; //距离offsetParent的高度
      this.tabbarData.map((item) => {
        let dom = document.getElementById(item.domId);
        if (dom) {
          item.position = dom.offsetTop - 320; //100navbar 55tabbar
        }
      });
    });
  },
  beforeRouteLeave(to, form, next) {
    // 离开路由移除滚动事件
    window.removeEventListener("scroll", this.initHeight);
    next();
  },
  methods: {
    async loadDetail() {
      if (
        this.displayDetail.exhibitionUnits &&
        this.displayDetail.exhibitionUnits.length > 0
      ) {
        this.curUnit = this.displayDetail.exhibitionUnits[0];
        this.expandUnitInfo()
      }

      processUnit(this.displayDetail.exhibitionUnits);

      if (
        this.displayDetail.videosVo &&
        this.displayDetail.videosVo.length > 0
      ) {
        this.currentVideo = this.displayDetail.videosVo[0];
      }

      if (this.displayDetail.intro) {
        this.currentTab = {
          name: "展览简介",
          domId: "intro",
        };
      }


      function processUnit(list) {
        for (let o of list || []) {
          if (o.children) {
            if (o.children.length == 0) {
              o.children = null;
            } else {
              processUnit(o.children);
            }
          }
        }
      }
      this.$nextTick(() => {
        // this.replaceFaceImage();
        if (
          this.displayDetail.audiosVo &&
          this.displayDetail.audiosVo.length > 0
        ) {
          this.$message.info("正在播放当前文物讲解音频，点击旋转按钮可关闭");
          this.$refs.AudioPlayer.play();
        }
      });
    },

    replaceFaceImage() {
      var img = new Image(); //新建一个图片对象
      let url; //最终显示的大图
      if (this.displayDetail.faceImagePressUrl) {
        url = this.$getFullUrl(this.displayDetail.faceImageUrl);
      } else if (this.displayDetail.imagesVo.length > 0) {
        url = this.$getFullUrl(this.displayDetail.imagesVo[0].url);
      }
      let faceImage = document.getElementById("faceImage");
      img.src = url;
      img.onload = function () {
        faceImage.src = url;
      };
    },
    //节流函数
    throttle(fn, gapTime) {
      let _this = this;
      return function () {
        let _nowTime = +new Date();
        if (_nowTime - _this._lastTime > gapTime || !_this._lastTime) {
          fn(...arguments); // 函数可以带参数
          _this._lastTime = _nowTime;
        }
      };
    },


    // 预览关联文献
    handleViewLt(item) {
      if (item.files[0].url) {
        previewFile(item.files[0].url, item.files[0].name);
      } else {
        this.$message.info('当前文献暂不支持在线浏览')
      }
    },

    // 点击音频
    handleClickAudio() {
      this.audioPlaying = !this.audioPlaying;
      if (this.audioPlaying) {
        this.$refs["AudioPlayer"].play();
        // console.log(this.$refs['audioContainer']);
      } else {
        this.$refs["AudioPlayer"].pause();
      }
    },

    reload() {
      this.$emit("reload");
    },

    handelPreviewImages(images) {
      this.imgViewerVisible = true;
      this.imgList = images.map((item) => this.$getFullUrl(item.url));
    },

    closeImgViewer() {
      this.imgViewerVisible = false;
    },

    handleClickUnit(item) {
      this.curUnit = item;
      this.expandUnitInfo()
    },

    handleToCr(item) {
      console.log(item);
      // return;
      const { crId } = item;
      const newPage = this.$router.resolve({
        path: "/culturalRelic/" + crId,
      });
      window.open(newPage.href, "_blank");
    },

    handleToVR(item) {
      window.open(item.url);
    },

    handleChangeCurrentVideo(video) {
      this.currentVideo = video;
    },

    handleClickTabItem(item) {
      this.currentTab = item;
      if (item.position) {
        document.documentElement.scrollTop = item.position;
      }
    },

    initHeight() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.isFixed = scrollTop > this.offsetTop - 155 ? true : false; //100为navbar的高度，55为tabbar的高度
      this.tabbarData.map((item) => {
        let content = document.getElementById(item.domId);
        if (content && isElementInViewport2(content)) {
          this.currentTab = item;
        }
      });
    },

    expandUnitInfo() {
      // 将每个单元下的所有数据变成key-value形式，方便遍历
      let newUnits = {}
      traveseUnits(this.curUnit)
      this.$set(this.curUnit, 'expandUnitInfo', JSON.parse(JSON.stringify(newUnits)))
      function traveseUnits(obj) {
        newUnits[obj.title] = obj
        if (obj.children && obj.children.length > 0) {
          obj.children.map(item => {
            traveseUnits(item)
          })
        }
      }
    }
  },
};
</script>

<style lang="scss" >
// 自定义分页器样式
#page {
  height: 30px;
  display: flex;
  justify-content: center;
}

.page-item {
  cursor: pointer;
}

.display-detail_intro {
  .intro-content {
    p {
      // font-family: $defaultFontFamily !important;
    }
  }
}
</style>


<style lang="scss" scoped>
// 中国风主题样式
/**公共样式开始 */
$titleFontFamily: SourceHanSerifCN-Bold;
$themeColor: #132c33;

.custom-title {
  width: 50px;
  background-color: #d72f3f;
  min-height: 300px;
  color: #fff;
  font-size: 28px;
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px;
  letter-spacing: 10px;
}

.content {
  background-color: #f3f3f3;
  min-height: 50vh;
}

.content-item {
  width: 100%;
  background-color: #fff;
}

.custom_title {
  padding: 50px 0 40px 0;

  .center {
    padding: 0 40px;
    display: flex;
    align-items: center;

    i {
      margin-right: 10px;
      font-size: 28px;
      color: $themeColor;
    }

    .svg-icon {
      font-size: 32px;
      color: $themeColor;
      margin-right: 10px;
    }

    .title {
      font-size: 26px;
      font-weight: 400;
      color: $themeColor;
      font-family: "SourceHanSerifCN-Bold";
    }
  }
}

.enlarge {
  position: absolute;
  bottom: 20px;
  right: 40px;
  display: flex;
  z-index: 9;
  background-color: #c1925b;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  cursor: pointer;

  img {
    width: 24px;
    height: 24px;
  }
}

.isFixed {
  position: fixed;
  left: 0;
  top: 100px;
  z-index: 99;
}

/**公共样式结束 */

/**样式开始 */
.content {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  /**轮播图 */
  .display-detail_imgs {
    height: 436px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .wrapper {
    width: 1200px;
    // padding: 0 13%;
    // width: 100%;
    // width: 78%;
    display: flex;
    justify-content: center;

    .inner {
      width: 100%;
      // box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 200px;
      // position: relative;
      margin: 0 70px;
      padding-bottom: 56px;

      /**基本信息 */
      .display-detail_basic_info {
        position: relative;

        .info-container {
          display: flex;
          justify-content: space-between;
          padding: 60px 36px;
          height: 100%;
          background-color: #fff;

          .info-container-left {
            min-height: 200px;
            max-height: 460px;
            margin-right: 50px;
            flex: 1;
            overflow: hidden;

            .imagesVo-image-container {

              // position: relative;
              .img-container {
                height: 100%;
                width: 100%;
                background-color: #f5f5f9;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }
            }
          }

          .info-container-right {
            flex: 1;
            min-height: 200px;

            .info-title {
              font-size: 24px;
              font-weight: bold;
              color: #444;
              padding-bottom: 20px;
              margin-bottom: 20px;
              border-bottom: 2px solid #f2f2f2;

              .view-count {
                font-size: 14px;
                margin-top: 10px;
                color: #999;
                font-weight: normal;

                .svg-icon {
                  margin-right: 10px;
                }
              }
            }

            .basic-info {
              .body-item {
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                font-size: 18px;

                .label {
                  display: flex;
                  align-items: center;
                  width: 120px;
                  // margin-right: 26px;
                  // margin-bottom: 10px;
                  font-weight: bold;
                  color: #999;

                  .svg-icon {
                    width: 24px;
                    height: 24px;
                    margin-right: 16px;
                    font-size: 16px;
                  }
                }

                .value {
                  color: #666;
                  // font-weight: bold;
                }
              }
            }

            .right {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;

              .qrcode {
                margin-bottom: 28px;
                display: flex;
                justify-content: center;

                img {
                  width: 50%;
                  height: 100%;
                }
              }

              .tools {
                width: 100%;

                .tools-item {
                  color: #858585;
                  flex: 1;
                  display: flex;
                  align-items: center;
                  cursor: pointer;

                  .svg-icon {
                    width: 22px;
                    height: 22px;
                    margin-right: 8px;
                  }

                  .like {
                    color: #831122;
                  }

                  .collect {
                    color: $themeColor;
                  }
                }
              }
            }
          }
        }

        .audio {
          position: absolute;
          right: -120px;
          top: 34px;
          cursor: pointer;
          animation: audioRotate 8s linear infinite;
          transform-origin: center center;
          border: 2px solid $themeColor;
          padding: 10px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #fff;
          transition: all 0.5s ease;

          &:hover {
            box-shadow: 0 0 14px rgb(0 0 0 / 40%);
          }

          .svg-icon {
            color: $themeColor;
            font-size: 80px;
          }

          img {
            width: 60px;
            height: 60px;
          }
        }
      }

      .display-detail_tabbar {
        background-color: #fff;
        display: flex;
        justify-content: center;
        padding: 10px;
        border-bottom: 1px solid #f2f2f2;

        .tab-item {
          height: 100%;
          margin-right: 20px;
          color: $themeColor;
          font-size: 24px;
          font-family: $titleFontFamily;
          cursor: pointer;
          position: relative;


          &:hover {
            color: $themeColor;

            &::after {
              display: inline-block;
            }
          }

          &::after {
            display: none;
          }
        }

        .active {
          color: $themeColor;

          &::after {
            display: inline-block;
          }
        }

        .tab-item::after,
        .active::after {
          position: absolute;
          content: "";
          height: 4px;
          width: 100%;
          bottom: -10px;
          left: 0;
          background-color: $themeColor;
        }
      }

      /**简介和视频 */
      .display-detail_intro {
        // background-image: url("@/assets/imgs/display/normal/bg.png");
        // background-size: 1%;

        padding: 40px;

        .intro-title {
          font-size: 26px;
          font-weight: 400;
          color: $themeColor;
          font-family: "SourceHanSerifCN-Bold";
          display: flex;
          align-items: center;
          margin-bottom: 32px;

          i {
            margin-right: 10px;
          }

          .svg-icon {
            margin-right: 10px;
            font-size: 36px;
          }
        }

        .intro-content {
          line-height: 28px;
          display: flex;
        }

        .left-box {
          width: 60px;
          background-color: $themeColor;
          min-height: 200px;
          color: #fff;
          font-size: 28px;
          writing-mode: vertical-rl;
          display: flex;
          align-items: center;
          justify-content: center;
          letter-spacing: 10px;
          font-family: SourceHanSerifCN-Bold;
        }

        .intro-content-container {
          flex: 1;
          text-indent: 34px;
          padding: 16px 32px;
          background-color: rgba($themeColor, 10%);
        }
      }

      // 视频
      .videos {
        display: flex;
        flex-direction: column;
        margin-bottom: 40px;

        .video-title {
          display: flex;
          // justify-content: center;
          align-items: center;
          font-size: 24px;
          color: $themeColor;
          padding: 0 40px;
          margin-bottom: 32px;
          font-family: SourceHanSerifCN-Bold;

          i {
            font-size: 28px;
            margin-right: 10px;
          }
        }

        .video-names {
          display: flex;
          justify-content: center;
          margin-bottom: 30px;
          position: relative;


          .video-swiper-button-next,
          .video-swiper-button-prev {
            // background-color: rgba(0,0,0,0.2);
            // border-radius: 50%;
            background-image: none;
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: $themeColor;
            font-weight: bolder;
            font-size: 28px;
            transform: translateY(-6px);
          }

          .swiper-container {
            width: 90%;

            .slide-item {
              padding: 8px;
              border-radius: 4px;
              color: $themeColor;
              cursor: pointer;
              text-overflow: ellipsis;
              overflow: hidden;
              width: 100%;
              white-space: nowrap;
              border: 1px solid $themeColor;
            }

            .active {
              background: $themeColor;
              color: #fff;
            }

          }

          ::v-deep .swiper-wrapper{
            height: auto;
          }


          // .video-item {
          //   font-size: 18px;
          //   margin: 8px 30px;

          //   .name {
          //     color: #999;
          //     position: relative;
          //     cursor: pointer;

          //     &:hover {
          //       color: $themeColor;

          //       &::after {
          //         display: inline-block;
          //       }

          //       &::before {
          //         display: inline-block;
          //       }
          //     }
          //   }

          //   .active::after,
          //   .name::after {
          //     content: "";
          //     width: 50%;
          //     height: 1px;
          //     background-color: $themeColor;
          //     position: absolute;
          //     left: 0;
          //     bottom: -9px;
          //     left: 50%;
          //     transform: translateX(-50%);
          //     display: none;
          //   }

          //   .active::before,
          //   .name::before {
          //     content: "";
          //     width: 0;
          //     height: 0;
          //     border: 8px solid transparent;
          //     border-top-color: $themeColor;
          //     position: absolute;
          //     left: 50%;
          //     bottom: -25px;
          //     transform: translateX(-50%);
          //     display: none;
          //   }

          //   .active::after,
          //   .active::before {
          //     display: inline-block;
          //   }
          // }
        }



        .video-box {
          height: 600px;
          padding: 0 40px;

          .video-player {
            height: 100%;
          }
        }
        .video-container {
            width: 100%;
            height: 400px;

            video {
              width: 100%;
              height: 100%;
            }
          }

      }

      // 虚拟展
      .display-detail_virtual {
        margin-bottom: 56px;

        .vr-content {
          display: flex;
        }

        .img-container {
          // width: 800px;
          flex: 1;
          height: 400px;
          position: relative;
          cursor: pointer;
          overflow: hidden;

          &:hover {
            img {
              transform: scale(1.1);
            }
          }

          img {
            width: 100%;
            height: 400px;
            transition: all ease 0.5s;
            object-fit: cover;
          }

          .modal {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 400px;
            background: rgba(0, 0, 0, 0.4);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            &:hover {
              .name {
                opacity: 1;
              }
            }

            .svg-icon {
              font-size: 110px;
              color: #fff;
            }

            .name {
              color: #fff;
              font-size: 28px;
              font-family: "SourceHanSerifCN-Bold";
              opacity: 0;
              transition: all ease 0.5s;
            }
          }
        }
      }

      /**展览单元 */
      .display-detail_units {
        overflow-x: hidden;
      }

      // 关联文物
      .display-detail_relateRc {
        padding: 0 40px;
        margin-bottom: 56px;

        .cr-title {
          display: flex;
          align-items: center;
          font-size: 26px;
          color: $themeColor;
          font-family: SourceHanSerifCN-Bold;

          i {
            font-size: 28px;
            margin-right: 10px;
          }
        }

        .el-col {
          margin-bottom: 20px;

          .img-container {
            width: 100%;
            height: 460px;
            position: relative;
            background-color: #f5f5f9;
            margin-bottom: 10px;
            height: 214px;

            img {
              width: 100%;
              height: 100%;
              object-fit: fill;
            }
          }

          .cr-name-intro {
            .cr-name {
              // font-size: 38px;
              font-weight: bold;
              color: #333;
              text-align: left;
              margin-bottom: 40px;
              text-indent: 4px;
            }
          }
        }
      }

      /**关联文献 */
      .display-detail_lts {
        .lts-content {
          padding: 0 40px 40px;

          .lt-item {
            border-bottom: 1px dashed #ccc;
            padding-bottom: 9px;

            &>span {
              padding: 0 4px;
            }
          }

          .lt-name {
            color: $themeColor;
            cursor: pointer;
          }
        }
      }
    }
  }
}

::v-deep .el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

//有子节点 且未展开
::v-deep .el-tree .el-icon-caret-right:before {
  background: url("~@/assets/imgs/display/normal/tree-node.png") no-repeat 0 3px;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}

//有子节点 且已展开
::v-deep .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  background: url("~@/assets/imgs/display/normal/tree-node-s.png") no-repeat 0 3px;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}

//没有子节点
::v-deep .el-tree .el-tree-node__expand-icon.is-leaf::before {
  background: transparent;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}

// 修改tree icon
::v-deep .el-carousel__item--card {
  width: 100%;
  height: 100%;
  transform: translateX(0) scale(1) !important;
}

::v-deep .el-carousel {
  height: 100%;
}

::v-deep .el-carousel__container {
  height: 100%;
}

::v-deep .el-tree {
  background: transparent;

  .el-tree-node__content {
    height: 54px;

    &:hover {
      background-color: #fff;
      color: $themeColor;
    }

    padding-left: 16px !important;
  }

  .is-current {
    .el-tree-node__content {
      background-color: #fff;
      color: $themeColor;
    }
  }
}

@keyframes filmMoveLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-1200px);
  }
}

@keyframes filmMoveRight {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(1200px);
  }
}

@keyframes audioRotate {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

@-webkit-keyframes audioRotate {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

.animation-play-paused {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  /* Safari 和 Chrome */
}
</style>