<template>
  <div class="red-style">
    <div class="content" id="content">
      <div class="e-imgs">
        <swiper
          class="swiper gallery-top"
          :options="swiperOption"
          ref="swiperTop"
        >
          <swiper-slide
            class="slide-item"
            v-for="(item, index) in displayDetail.imagesVo"
            :key="index"
          >
            <img :src="$getFullUrl(item.middleUrl)" alt="" />
          </swiper-slide>
          <div
            class="swiper-button-next swiper-button-white"
            slot="button-next"
          >
            <i class="el-icon-arrow-right"></i>
          </div>
          <div
            class="swiper-button-prev swiper-button-white"
            slot="button-prev"
          >
            <i class="el-icon-arrow-left"></i>
          </div>
        </swiper>
      </div>
      <div class="e-name">
        {{ displayDetail.title }}
      </div>
      <div class="e-tools">
        <ReaderOperations
          :info="displayDetail"
          :sourceType="'biz_exhibition'"
          @reload="reload"
        />
      </div>
      <div class="e-info">
        <div class="info-item">
          <span class="label"> 关键词： </span>
          <span class="value">{{ displayDetail.keyword || "暂无" }}</span>
        </div>
        <div class="info-item" v-if="dicts.displayType">
          <span class="label"> 展览类型： </span>
          <span class="value">{{
            dicts.displayType[displayDetail.type] || "暂无"
          }}</span>
        </div>
        <div class="info-item" v-if="dicts.displayCharacter">
          <span class="label"> 展览性质： </span>
          <span class="value">{{
            dicts.displayCharacter[displayDetail.displayCharacter] || "暂无"
          }}</span>
        </div>
        <div class="info-item">
          <span class="label"> 展览单位： </span>
          <span class="value">{{ displayDetail.deptName || "暂无" }}</span>
        </div>
        <div class="info-item">
          <span class="label"> 展览地区： </span>
          <span class="value">{{ displayDetail.regionName || "暂无" }}</span>
        </div>
      </div>
      <div class="e-intro">
        <div class="face-image">
          <img :src="displayDetail.faceImageMiddleUrl" />
        </div>

        <div class="intro-text">
          <div class="title">展览简介</div>
          <div class="text" v-html="displayDetail.intro"></div>
        </div>
      </div>
      <div
        class="e-units wow animate__animated animate__fadeInUp"
        ref="units"
        v-if="displayDetail.exhibitionUnits.length > 0"
      >
        <div class="units-title">展览单元</div>
        <div class="units-content" v-if="currentUnit">
          <div class="left">
            <div
              class="line"
              :style="{
                height: (displayDetail.exhibitionUnits.length - 1) * 130 + 'px',
              }"
            ></div>
            <div class="dots">
              <div
                class="dot-item"
                v-for="(item, index) in displayDetail.exhibitionUnits"
                :key="index"
                :style="{ top: index * 130 - 17 + 'px' }"
                @click="handleClickUnitTitle(item)"
                @mouseenter="handleMouseEnterUnit(item)"
                @mouseleave="handleMouseLeaveUnit"
              >
                <div
                  class="circle"
                  :style="{
                    'background-image': `url(${require(`@/assets/imgs/display/red/${
                      currentUnit.title == item.title ? 'circle-s' : 'circle'
                    }.png`)})`,
                  }"
                ></div>
                <div
                  :class="{
                    title: true,
                    active: currentUnit.title == item.title,
                  }"
                >
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>
          <div class="right-content">
            <div class="unit-content">
              <div
                class="unit-content-container"
                v-for="(unitValue, unitTitle) in currentUnit.expandUnitInfo"
                :key="unitTitle"
              >
                <div class="unit-content-title">
                  {{ unitTitle }}
                </div>
                <div
                  class="text-indent unit-content_intro"
                  v-if="currentUnit.intro"
                  v-html="unitValue.intro"
                ></div>
                <div
                  class="unit-content_images"
                  v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0"
                >
                  <!-- <div class="imgs-title">单元图片</div> -->
                  <div class="unit-imgs">
                    <SlideImageGroup
                      :imgList="unitValue.imagesVo"
                      :needEnlarge="true"
                      v-if="unitValue.imagesVo.length > 3"
                    >
                      <template slot-scope="{ item }" slot="img">
                        <img
                          :src="$getFullUrl(item.middleUrl)"
                          alt=""
                          style="width: 100%; height: 100%; object-fit: contain"
                        />
                      </template>
                    </SlideImageGroup>
                    <el-row
                      v-if="
                        unitValue.imagesVo.length > 0 &&
                        unitValue.imagesVo.length < 4
                      "
                      :gutter="10"
                    >
                      <el-col
                        v-for="(item, index) in unitValue.imagesVo"
                        :key="index"
                        :span="24 / unitValue.imagesVo.length"
                        style="height: 300px"
                      >
                        <img
                          :src="$getFullUrl(item.middleUrl)"
                          alt=""
                          style="
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                            cursor: pointer;
                          "
                          @click="handelPreviewImages(unitValue.imagesVo)"
                        />
                      </el-col>
                    </el-row>
                  </div>
                </div>

                <div
                  class="unit-content_crs"
                  v-if="
                    unitValue.culturalRelics &&
                    unitValue.culturalRelics.length > 0
                  "
                >
                  <div class="imgs-title">单元文物</div>
                  <SlideImageGroup :imgList="unitValue.culturalRelics">
                    <template slot-scope="{ item }" slot="img">
                      <img
                        :src="$getFullUrl(item.faceImageMiddleUrl)"
                        alt=""
                        style="
                          width: 100%;
                          height: 100%;
                          object-fit: fill;
                          cursor: pointer;
                        "
                        @click="handleToCr(item)"
                      />
                    </template>
                    <template slot-scope="{ item }" slot="info">
                      <div class="name">{{ item.name }}</div>
                    </template>
                  </SlideImageGroup>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="e-video wow animate__animated animate__fadeInRight"
        v-if="currentVideo.url"
      >
        <div class="video-title">展览视频</div>
        <div class="video-content">
          <video-player
            v-if="currentVideo"
            :src="$getFullUrl(currentVideo.url)"
            class="video-box"
          ></video-player>
          <div class="video-names">
            <div
              :class="{
                'video-item': true,
                active: currentVideo && item.fileId == currentVideo.fileId,
              }"
              v-for="(item, index) in displayDetail.videosVo"
              :key="index"
              @click="handleChangeCurrentVideo(item)"
            >
              {{ item.name.split(".")[0] }}
            </div>
          </div>
        </div>
      </div>
      <div class="e-virtual" v-if="displayDetail.virtualVo.length > 0">
        <div class="virtual-title">虚拟展厅</div>
        <div class="wrapper">
          <div
            class="img-container"
            @click="handleToVR(item)"
            v-for="(item, index) in displayDetail.virtualVo"
            :key="index"
          >
            <img :src="item.faceImagePressUrl" alt="" />
            <div class="modal">
              <svg-icon icon-class="360"></svg-icon>
              <div class="name">点击进入{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>

      <div
        class="e-lts"
        v-if="
          displayDetail.literatureVo && displayDetail.literatureVo.length > 0
        "
      >
        <div class="lts-title">相关文献</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>

    <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 Video from "@/components/Video";
import { debounce } from "@/utils/index";
import { previewFile } from "@/utils/file";
import ChStyleUnit from "./ChStyleUnit.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import videoPlayer from "@/components/VideoPlayer";
import SlideImage from "@/components/SlideImage";
import SlideImageGroup from "@/components/SlideImageGroup";
import Breadcrumb from "@/components/Breadcrumb/index";
export default {
  components: {
    AudioPlayer,
    ReaderOperations,
    Video,
    ChStyleUnit,
    swiper,
    swiperSlide,
    videoPlayer,
    SlideImage,
    SlideImageGroup,
    Breadcrumb,
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },
  props: {
    displayDetail: {
      type: Object,
      default: () => ({}),
    },
    dicts: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      imgViewerVisible: false,
      relateRelics: [],
      audioPlaying: true,
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        effect: "fade",
        fadeEffect: {
          crossFade: true,
        },
        grabCursor: true,
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      currentUnit: null,
      currentVideo: {},
      guideList: [
        {
          name: "首页",
          path: "/",
        },
        {
          name: "展览展示",
          path: "/display",
        },
      ],
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  async mounted() {
    this.loadDetail();
    // let units = this.$refs.
  },
  updated() {
    let p = document.getElementsByTagName("p");
    let arr = [...p];
    arr.map((item) => {
      item.style.color = "#fff";
    });
  },
  methods: {
    async loadDetail() {
      this.guideList.push({
        name: this.displayDetail.title,
        path: `/display/${this.displayDetail.exhibitionId}`,
      });
      processUnit(this.displayDetail.exhibitionUnits);
      this.currentUnit =
        this.displayDetail.exhibitionUnits.length > 0
          ? this.displayDetail.exhibitionUnits[0]
          : null;
      this.expandUnitInfo();
      function processUnit(list) {
        for (let o of list || []) {
          if (o.children) {
            if (o.children.length == 0) {
              o.children = null;
            } else {
              processUnit(o.children);
            }
          }
        }
      }

      if (
        this.displayDetail.videosVo &&
        this.displayDetail.videosVo.length > 0
      ) {
        this.currentVideo = this.displayDetail.videosVo[0];
      }
      this.$nextTick(() => {
        // if (
        //   this.displayDetail.videosVo &&
        //   this.displayDetail.videosVo.length > 0
        // ) {
        //   this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
        //   this.$refs.AudioPlayer.play();
        // }
        // this.replaceFaceImage();
      });
    },

    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;
        }
      };
    },

    // 关联文献的行样式调整
    tableRowStyle({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return {
          background: "#f9f9f9 !important",
        };
      } else {
        return {
          background: "#fff !important",
        };
      }
    },

    // 预览关联文献
    handleViewLt(item) {
      previewFile(item.files[0].url, item.files[0].name);
    },

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

    handleClickUnitTitle(item) {
      this.currentUnit = item;
      this.expandUnitInfo();
    },
    handleMouseEnterUnit(item) {
      this.currentUnit = item;
      this.expandUnitInfo();
    },
    handleMouseLeaveUnit() {
      // this.currentUnit = {};
    },

    expandUnitInfo() {
      // 将每个单元下的所有数据变成key-value形式，方便遍历
      let newUnits = {};
      traveseUnits(this.currentUnit);
      this.$set(
        this.currentUnit,
        "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);
          });
        }
      }
    },

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

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

<style lang="scss">
.unit-content_intro {
  p {
    // color: red !important;
    font-family: $defaultFontFamily !important;
    font-size: 22px;
    text-indent: 44px;
    // color: #fff !important;
  }
}
</style>
<style lang="scss" scoped>
$deepBlue: #a30e0c;

// 中国风主题样式
/**公共样式开始 */

.custom-title {
  width: 50px;
  background-color: $deepBlue;
  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;
  font-family: SourceHanSerifCN-Bold;
}

.units {
  background-image: linear-gradient(to bottom, #660d04, #520002);
  min-height: 400px;
}

.content-item {
  width: 100%;
}

.enlarge {
  position: absolute;
  bottom: 40px;
  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;
  }
}

/**公共样式结束 */

/**样式开始 */

.red-style {
  overflow: hidden;
  background-image: url("~@/assets/imgs/display/red/bg2.png");
  background-size: 100%;
  background-color: #651c14;
  position: relative;
  // height: 100%;
  padding-bottom: 73px;

  .content {
    width: 100%;
    overflow: hidden;
    background-image: url("~@/assets/imgs/display/red/bg.png");
    background-repeat: no-repeat;
    background-size: 100%;

    /**轮播图 */
    .e-imgs {
      padding: 200px 0 0;
      display: flex;
      justify-content: center;
      position: relative;
      .breadcrumb {
        // display: flex;
        // padding: 200px 13% 60px;
        // position: relative;
        // z-index: 999;
        position: absolute;
        left: 13%;
        top: 160px;
      }
      .slide-item {
        display: flex;
        justify-content: center;
        height: 414px;

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

      .swiper-button-next,
      .swiper-button-prev {
        background-image: none;
        border: 2px solid #fff;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: bolder;
        transform: translateY(-72px);
        font-size: 26px !important;
      }
    }

    .e-name {
      font-size: 66px;
      font-weight: bold;
      color: #ffffff;
      text-shadow: 0px 4px 5px #3b130b;
      display: flex;
      justify-content: center;
      margin-top: 70px;
    }

    .e-tools {
      display: flex;
      justify-content: center;
      margin-top: 45px;
    }

    .e-info {
      display: flex;
      color: #fff;
      padding: 0 13%;
      display: flex;
      justify-content: space-between;
      font-size: 18px;
      margin-top: 86px;
    }

    .e-intro {
      margin: 80px;
      padding: 80px;
      display: flex;
      background-color: rgba(#591d11, 0.8);
      // justify-content: space-between;
      width: 100%;
      .face-image {
        height: 414px;
        width: 40%;
        border: 4px solid #f3cf40;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          display: inline-block;
        }
      }

      .intro-text {
        color: #fff;

        flex: 1;
        padding: 40px;
        margin-left: 40px;
        & > .title {
          font-size: 46px;
          font-family: PingFang;
          font-weight: 800;
          color: #ffffff;
          line-height: 53px;
          text-shadow: 0px 4px 0px #7d1813;
          margin-bottom: 40px;
        }

        & > .text {
          font-size: 24px;
          font-family: PingFang;
          font-weight: 500;
          color: #ffffff;
          line-height: 48px;
          // text-indent: 48px;
        }
      }
    }

    .e-units {
      color: #fff;
      padding: 0 10% 35px;
      width: 100%;
      margin-top: 204px;

      .units-title {
        display: flex;
        justify-content: center;
        font-size: 48px;
        font-family: PingFang;
        font-weight: 800;
        color: #ffffff;
        line-height: 53px;
        text-shadow: 0px 4px 0px #7d1813;
        margin-bottom: 185px;
      }

      .units-content {
        display: flex;
        width: 100%;
        justify-content: space-between;

        .left {
          position: relative;
          width: 35%;

          .line {
            background-image: url("~@/assets/imgs/display/red/line.png");
            width: 1px;
            background-size: 100%;
          }

          .dots {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;

            .dot-item {
              position: absolute;
              display: flex;
              align-items: center;
              left: -17px;
              cursor: pointer;
              width: 100%;

              .circle {
                width: 35px;
                height: 35px;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                margin-right: 30px;
              }

              .title {
                font-size: 32px;
                font-family: PingFang;
                font-weight: bold;
                color: #ffffff;
                line-height: 48px;
                opacity: 0.5;
                width: calc(100% - 67px);
                // overflow: hidden;
                // text-overflow: ellipsis;
                // white-space: nowrap;
              }

              .active {
                color: #e5b87d;
                opacity: 1;
              }
            }
          }
        }

        .right-content {
          // flex: 1;
          // width: 58vw;
          width: 50%;

          .unit-content {
            width: 100%;
            position: relative;
            top: -35px;
            color: #fff;

            .unit-content-container {
              .unit-content-title {
                font-family: PingFang;
                line-height: 48px;
                font-size: 24px;
                display: flex;
                justify-content: center;
              }

              &:nth-child(1) {
                .unit-content-title {
                  font-size: 32px;
                  font-weight: bold;
                  margin-bottom: 16px;
                }
              }
            }

            .unit-content_intro {
              font-size: 16px;
              font-weight: 400;
              line-height: 36px;
              // text-indent: 32px;
              margin-bottom: 20px;

              p {
                color: #fff !important;
              }
            }

            .unit-content_images {
              position: relative;

              .unit-content_images_container {
                height: 100%;
                display: flex;
                flex-direction: column;
                background-color: #f5f5f9;

                .images_img {
                  flex: 1;
                }

                .desc {
                  display: flex;
                  justify-content: center;
                  height: 40px;
                  align-items: center;
                }
              }
            }

            //单元文物和单元图片公共样式
            .imgs-title {
              margin: 16px 0;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 20px;
              font-family: SourceHanSerifCN-Bold;

              i {
                margin: 0 10px;
                font-size: 18px;
              }
            }

            .unit-imgs {
              // height: 300px;
            }

            .unit-content_crs {
              position: relative;

              .el-row {
                .el-col {
                  margin-bottom: 10px;

                  .img-container {
                    background-color: #f5f5f9;
                    height: 250px;

                    .images_img {
                      height: 100%;
                      width: 100%;
                      position: relative;
                      cursor: pointer;
                    }
                  }
                }
              }

              .desc {
                display: flex;
                justify-content: center;
                padding: 10px;
                align-items: center;
                color: #333;
                font-size: 14px;
              }
            }

            .buttons {
              display: flex;
              justify-content: flex-end;

              .btn {
                display: flex;
                align-content: center;
                padding: 8px 10px;
                // border: 1px solid $deepBlue;
                color: #666;
                cursor: pointer;

                &:hover {
                  color: $deepBlue;
                }

                .svg-icon {
                  font-size: 22px;
                  margin: 0 4px;
                }
              }
            }
          }
        }
      }
    }

    .e-video {
      margin-top: 140px;
      width: 100%;
      padding: 0 13%;

      .video-title {
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 48px;
        font-family: PingFang;
        font-weight: 800;
        color: #ffffff;
        line-height: 53px;
        text-shadow: 0px 4px 0px #7d1813;
        margin-bottom: 50px;
      }

      .video-content {
        display: flex;

        .video-names {
          width: 20%;
          background-color: rgba(89, 29, 17, 0.8);
          color: #fff;
          padding: 24px 0;

          .video-item {
            font-size: 18px;
            margin: 8px 30px;
            cursor: pointer;
            transition: all ease 0.5s;

            &:hover {
              transform: translateX(-10%);
            }
          }

          .active {
            color: $yellow;
          }
        }

        .video-box {
          height: 600px;
          flex: 1;
          margin-right: 16px;

          .video-player {
            height: 100%;
          }
        }
      }
    }

    .e-virtual {
      margin-top: 140px;
      justify-content: center;
      padding: 0 13%;

      .virtual-title {
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 48px;
        font-family: PingFang;
        font-weight: 800;
        color: #ffffff;
        line-height: 53px;
        text-shadow: 0px 4px 0px #7d1813;
        margin-bottom: 50px;
      }

      .wrapper {
        width: 100%;
        // display: flex;

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

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

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

          .modal {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            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;
            }
          }
        }
      }
    }

    /**关联文献 */
    .e-lts {
      color: #333;
      margin-top: 140px;
      padding: 0 13%;

      .lts-title {
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 48px;
        font-family: PingFang;
        font-weight: 800;
        color: #ffffff;
        line-height: 53px;
        text-shadow: 0px 4px 0px #7d1813;
        margin-bottom: 50px;
      }

      .lts-content {
        color: #fff;
        padding: 40px 0;
      }

      .lt-item {
        border-bottom: 1px dashed #fff;
        padding: 10px 0;
        cursor: pointer;

        &:hover {
          color: #dbb645;
        }

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

// ::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%;
}

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

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

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

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

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