<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"
                :imgKey="'middleUrl'"
                v-if="
                  displayDetail.imagesVo && displayDetail.imagesVo.length > 0
                "
              />
              <SlideImage
                :imgList="[{ middleUrl: displayDetail.faceImagePressUrl }]"
                :imgKey="'middleUrl'"
                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" v-if="dicts.displayType">
                      <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.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="reload"
                    />
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div
            class="audio"
            :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
            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
              :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"
              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-content">
            <div class="player">
              <!-- <video-player
                v-if="currentVideo && currentVideo.url"
                :src="$getFullUrl(currentVideo.url)"
                class="video-player"
              >
              </video-player> -->
              <Video
                :url="$getFullUrl(currentVideo.url)"
                class="video-player"
              />
            </div>
            <div class="video-name-list">
              <div class="title">播放列表</div>
              <el-row>
                <el-col
                  :span="12"
                  :class="[
                    'name',
                    item.fileId == currentVideo.fileId ? 'active' : '',
                  ]"
                  v-for="(item, index) in displayDetail.videosVo"
                  :key="index"
                  @click.native="handleChangeCurrentVideo(item)"
                >
                  {{ item.name.split(".")[0] }}</el-col
                >
              </el-row>
            </div>
          </div>
        </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"
            >
              <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 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 videoPlayer from "@/components/VideoPlayer";
import Video from "@/components/Video";

export default {
  name: "NormalStyle",
  components: {
    AudioPlayer,
    ReaderOperations,
    Video,
    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: {},
      page: null,
      currentVideo: {},
      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",
        },
      ],
      guideList: [
        {
          name: "首页",
          path: "/",
        },
        {
          name: "展览展示",
          path: "/display",
        },
      ],
    };
  },
  async mounted() {
    this.loadDetail();
  },
  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();
        }
      });
    },

    // 点击音频
    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");
    },

    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;

.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: $deepBlue;
    }

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

    .title {
      font-size: 26px;
      font-weight: 400;
      color: $deepBlue;
      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: $nav-height;
  z-index: 99;
}

/**公共样式结束 */

/**样式开始 */

.breadcrumb {
  width: 1200px;
  padding: 60px 0;
  position: relative;
  z-index: 999;
}
.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: $deepBlue;
                  }
                }
              }
            }
          }
        }

        .audio {
          position: absolute;
          right: -120px;
          top: 34px;
          cursor: pointer;
          animation: audioRotate 8s linear infinite;
          transform-origin: center center;
          border: 2px solid $deepBlue;
          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: $deepBlue;
            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: 40px;
          color: $deepBlue;
          font-size: 24px;
          font-family: $titleFontFamily;
          cursor: pointer;
          position: relative;

          &:hover {
            color: $deepBlue;

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

          &::after {
            display: none;
          }
        }

        .active {
          color: $deepBlue;

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

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

      /**简介和视频 */
      .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: $deepBlue;
          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: $deepBlue;
          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($deepBlue, 10%);
        }
      }

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

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

          i {
            font-size: 28px;
            margin-right: 10px;
          }
        }
        .video-content {
          display: flex;
          .player {
            flex: 1;
            margin-right: 20px;
            height: 600px;
          }

          .video-name-list {
            width: 300px;
            & > .title {
              font-size: 18px;
              font-weight: bold;
              color: #333;
              margin-bottom: 8px;
            }
            .name {
              padding: 8px;
              // border-radius: 4px;
              color: $deepBlue;
              cursor: pointer;
              text-overflow: ellipsis;
              overflow: hidden;
              width: 100%;
              white-space: nowrap;
              border: 1px solid $deepBlue;
              font-size: 14px;
              &:hover {
                background: $deepBlue;
                color: $yellow;
              }
              &:not(&:last-child) {
                border-bottom: none;
              }
              // margin-bottom: 12px;
            }

            .active {
              background: $deepBlue;
              color: $yellow;
            }
          }
        }

        // .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: $deepBlue;
        //     font-weight: bolder;
        //     font-size: 28px;
        //     transform: translateY(-6px);
        //   }

        //   .swiper-container {
        //     width: 90%;

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

        //     .active {
        //       background: $deepBlue;
        //       color: #fff;
        //     }
        //   }
        // }

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

          .video-player {
            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: $deepBlue;
          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: $deepBlue;
            cursor: pointer;
          }
        }
      }
    }
  }
}

// 修改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: $deepBlue;
    }

    padding-left: 16px !important;
  }

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

@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>
