<template>
  <div class="content">
    <NavBar />
    <!-- 展览图片 -->
    <div
      class="
        content-item
        display-detail_imgs
        wow
        animate__animated animate__fadeInDownBig
      "
      ref="imgs"
      v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
    >
      <el-image
        :src="
          $getFullUrl(
            displayDetail.faceImagePressUrl || displayDetail.faceImageUrl
          )
        "
        fit="cover"
      ></el-image>
    </div>
    <div class="wrapper wow animate__animated animate__fadeInUpBig">
      <div class="inner">
        <!-- 展览基本信息 -->
        <div class="content-item display-detail_basic_info">
          <div class="info-container">
            <div
              class="
                info-container-left
                wow
                animate__animated animate__fadeInLeft
              "
            >
              <el-carousel>
                <el-carousel-item
                  v-for="(item, index) in displayDetail.imagesVo"
                  :key="index"
                  class="imagesVo-image-container"
                >
                  <div
                    class="img-container"
                    @click="handelPreviewImages(displayDetail.imagesVo)"
                  >
                    <img
                      :src="$getFullUrl(item.pressUrl)"
                      alt="点击查看大图"
                      srcset=""
                    />
                  </div>
                  <div
                    class="enlarge"
                    @click="handelPreviewImages(displayDetail.imagesVo)"
                  >
                    <img src="@/assets/imgs/enlarge-s.png" alt="" />
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div
              class="
                info-container-right
                wow
                animate__animated animate__fadeInRight
              "
            >
              <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="15" 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">
                      <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="9" 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'"
                      :iconSize="24"
                    />
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div
            class="audio wow animate__animated animate__fadeInRight"
            :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_intro">
          <div class="intro-content wow animate__animated animate__fadeInLeft">
            <div class="intro-title">
              <svg-icon icon-class="jianjie"></svg-icon>
              <span>展览简介</span>
            </div>
            <div
              class="intro-content-container"
              v-html="displayDetail.intro"
            ></div>
          </div>
          <div
            class="intro-video wow animate__animated animate__fadeInRight"
            v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
          >
            <el-carousel :interval="4000" type="card" indicator-position="none">
              <el-carousel-item
                v-for="item in displayDetail.videosVo"
                :key="item.fileId"
              >
                <Video :url="$getFullUrl(item.url)" theme="blue" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <!--展览单元  -->
        <div
          class="content-item display-detail_units"
          ref="units"
          v-if="displayDetail.exhibitionUnits.length > 0"
        >
          <div class="custom_title wow animate__animated animate__fadeInUp">
            <div class="desc">
              <div class="divider"></div>
              <img
                src="@/assets/imgs/display/normal/title-desc.png"
                class="modify"
                alt=""
              />
            </div>
            <div class="center">
              <svg-icon icon-class="unit"></svg-icon>
              <span class="title">展览单元</span>
            </div>
            <div class="desc">
              <img
                src="@/assets/imgs/display/normal/title-desc.png"
                class="modify"
                alt=""
              />
              <div class="divider"></div>
            </div>
          </div>
          <div class="unit-container">
            <div
              class="
                unit-content-menu
                wow
                animate__animated animate__fadeInLeft
              "
            >
              <!-- 只能单开 unique-opened -->
              <!-- <menu-list
                :items="displayDetail.exhibitionUnits"
                :isCollapse="false"
                @open="handleOpenUnit"
                style="height: 100%"
              ></menu-list> -->
              <el-tree
                :data="displayDetail.exhibitionUnits"
                node-key="euId"
                default-expand-all
              >
                <div
                  class="exhibition-units-tree-node"
                  slot-scope="{ node, data }"
                >
                  <div class="title" @click="handleOpenUnit(data)">
                    {{ data.title }}
                  </div>
                </div>
              </el-tree>
            </div>
            <div
              class="unit-content wow animate__animated animate__fadeInRight"
            >
              <div
                class="text-indent unit-content_intro"
                v-if="curUnit.intro"
                v-html="curUnit.intro"
              >
                <!-- {{ curUnit.intro }} -->
              </div>
              <div
                class="unit-content_images"
                v-if="curUnit.imagesVo && curUnit.imagesVo.length > 0"
              >
                <el-carousel
                  indicator-position="outside"
                  :autoplay="false"
                  height="600px"
                  :loop="false"
                >
                  <el-carousel-item
                    v-for="item in curUnit.imagesVo"
                    :key="item.euId"
                  >
                    <div class="unit-content_images_container">
                      <el-image
                        :src="$getFullUrl(item.pressUrl)"
                        fit="contain"
                        class="images_img"
                      ></el-image>
                      <div
                        class="enlarge"
                        @click="handelPreviewImages(curUnit.imagesVo)"
                      >
                        <img src="@/assets/imgs/enlarge-s.png" alt="" />
                      </div>
                      <div class="desc">
                        {{ item.name.split(".")[0] }}
                      </div>
                    </div>
                  </el-carousel-item>
                </el-carousel>

                <!-- <el-col
                  :span="24 / curUnit.imagesVo.length"
                  v-for="item in curUnit.imagesVo"
                  :key="item.euId"
                  class="margin-bottom-32 unit-content_images_container"
                >
                  <img :src="$getFullUrl(item.pressUrl)" width="100%" />

                  <div
                    class="enlarge"
                    @click="handelPreviewImages(curUnit.imagesVo)"
                  >
                    <img src="@/assets/imgs/enlarge-s.png" alt="" />
                  </div>
                  <div class="unit-content_images_desc">
                    {{ item.name }}
                  </div>
                </el-col> -->
              </div>
              <div
                class="unit-content_videos"
                v-if="curUnit.videosVo && curUnit.videosVo.length > 0"
              >
                <el-row :gutter="20">
                  <el-col
                    :span="24 / curUnit.videosVo.length"
                    v-for="item in curUnit.videosVo"
                    :key="item.euId"
                  >
                    <Video :url="$getFullUrl(item.url)" />
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>

        <!--展览相关文物  -->
        <div
          class="content-item display-detail_relateRc"
          ref="units"
          v-if="
            displayDetail.culturalRelicVo &&
            displayDetail.culturalRelicVo.length > 0
          "
        >
          <el-row :gutter="26">
            <el-col
              :span="index == 0 ? 12 : 4"
              v-for="(item, index) in displayDetail.culturalRelicVo"
              :key="index"
            >
              <div
                class="img-container wow animate__animated animate__fadeInUp"
                @click="handleToCr(item)"
              >
                <img :src="$getFullUrl(item.faceImagePressUrl)" alt="" />
                <div class="cr-name-intro" v-if="index == 0">
                  <div class="cr-name">{{ item.name }}</div>
                  <div class="cr-intro">{{ item.intro }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 相关文献 -->
        <div
          class="content-item display-detail_lts"
          v-if="
            displayDetail.literatureVo && displayDetail.literatureVo.length > 0
          "
        >
          <!-- <div class="wrapper"> -->
          <div class="custom_title wow animate__animated animate__fadeInUp">
            <div class="desc">
              <div class="divider"></div>
              <img
                src="@/assets/imgs/display/normal/title-desc.png"
                class="modify"
                alt=""
              />
            </div>
            <div class="center">
              <svg-icon icon-class="wenxian"></svg-icon>
              <span class="title">相关文献</span>
            </div>
            <div class="desc">
              <img
                src="@/assets/imgs/display/normal/title-desc.png"
                class="modify"
                alt=""
              />
              <div class="divider"></div>
            </div>
          </div>
          <div class="lts-content wow animate__animated animate__fadeInUp">
            <el-table
              :data="displayDetail.literatureVo"
              :header-cell-style="{
                background: '#eeeeee',
                color: '#333',
              }"
              :row-style="tableRowStyle"
            >
              <el-table-column
                prop="name"
                label="名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="authors"
                label="作者"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="date"
                label="出版时间"
                align="center"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="source"
                label="出版所在刊物"
              ></el-table-column>
              <el-table-column label="阅读" align="center">
                <template slot-scope="scope">
                  <div class="pdf-img">
                    <img src="@/assets/imgs/display/ch/pdf-icon.png" />
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <el-image-viewer
      v-if="imgViewerVisible"
      :on-close="closeImgViewer"
      :url-list="imgList"
    />
    <Footer />
  </div>
</template>

<script>
import AudioPlayer from "@/components/AudioPlayer";
import ReaderOperations from "@/components/ReaderOperations";
import MenuList from "@/components/MenuList";
import Video from "@/components/Video";
import Card from "@/components/Card";
import ChStyleUnit from "./ChStyleUnit.vue";
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
export default {
  name: "BlueStyle",
  components: {
    AudioPlayer,
    ReaderOperations,
    Video,
    Card,
    ChStyleUnit,
    MenuList,
    NavBar,
    Footer,
    "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,
    };
  },
  async mounted() {
    this.loadDetail();
  },
  methods: {
    async loadDetail() {
      if (
        this.displayDetail.exhibitionUnits &&
        this.displayDetail.exhibitionUnits.length > 0
      ) {
        this.curUnit = this.displayDetail.exhibitionUnits[0];
      }
      processUnit(this.displayDetail.exhibitionUnits);
      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(() => {
        if (
          this.displayDetail.audiosVo &&
          this.displayDetail.audiosVo.length > 0
        ) {
          // this.$message.info("正在播放当前文物讲解音频，点击旋转按钮可关闭");
          // this.$refs.AudioPlayer.play();
        }
      });
    },

    //节流函数
    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",
        };
      }
    },

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

    handleOpenUnit(item) {
      this.curUnit = item;
    },

    handleToCr(item) {
      const { crId } = item;
      this.$router.push({
        path: "/culturalRelic/" + crId,
      });
    },
  },
};
</script>

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

<style lang="scss" scoped>
// 中国风主题样式
/**公共样式开始 */
$blue: #2069c4;
.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;
}
.units {
  background-image: linear-gradient(to bottom, #660d04, #520002);
  min-height: 400px;
}
.content {
  background: url("~@/assets/imgs/display/normal/bg1.png");
}
.content-item {
  width: 100%;
}

.custom_title {
  display: flex;
  width: 100%;
  padding: 50px 0 40px 0;
  align-items: center;
  .center {
    width: 180px;
    margin: 0 10px;
    display: flex;
    align-items: center;
    .svg-icon {
      font-size: 50px;
      color: $blue;
      margin-right: 10px;
    }
    .title {
      font-size: 26px;
      font-weight: 400;
      color: $blue;
      line-height: 101px;
    }
  }
  .desc {
    flex: 1;
    display: flex;
    align-items: center;
    .modify {
      width: 16px;
      margin: 0 6px;
      img {
        width: 100%;
      }
    }
    .divider {
      flex: 1;
      height: 6px;
      background: url("~@/assets/imgs/display/normal/divider.png") 100% 100%
        repeat-x;
      img {
        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;
  }
}
/**公共样式结束 */

/**样式开始 */
.content {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /**轮播图 */
  .display-detail_imgs {
    height: 436px;
    .el-image {
      width: 100%;
      height: 100%;
    }
  }
  .wrapper {
    // width: 1200px;
    padding: 0 13%;
    width: 100%;
    display: flex;
    justify-content: center;
    .inner {
      width: 100%;
      box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 200px;
      position: relative;
      margin: 36px 0 70px;
      /**基本信息 */
      .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;
            margin-right: 50px;
            flex: 1;
            overflow: hidden;
            .imagesVo-image-container {
              // position: relative;
              .img-container {
                height: 280px;
                width: 100%;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }
            }
          }
          .info-container-right {
            flex: 1;
            min-height: 200px;

            .info-title {
              font-size: 28px;
              font-weight: bold;
              color: #444;
              padding-bottom: 20px;
              margin-bottom: 20px;
              border-bottom: 2px solid #f2f2f2;
              .view-count {
                font-size: 18px;
                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;
                .label {
                  display: flex;
                  align-items: center;
                  width: 140px;
                  // margin-right: 26px;
                  // margin-bottom: 10px;
                  font-weight: bold;
                  color: #858585;
                  .svg-icon {
                    width: 24px;
                    height: 24px;
                    margin-right: 16px;
                  }
                }
              }
            }

            .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: #2069c4;
                  }
                }
              }
            }
          }
        }
        .audio {
          position: absolute;
          right: -120px;
          top: 34px;
          cursor: pointer;
          // animation: audioRotate 8s linear infinite;
          transform-origin: center center;
          border: 2px solid #2069c4;
          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: #2069c4;
            font-size: 80px;
          }
          img {
            width: 60px;
            height: 60px;
          }
        }
      }

      /**简介和视频 */
      .display-detail_intro {
        background-image: url("~@/assets/imgs/display/normal/bg.png");
        background-size: 1%;
        display: flex;
        .intro-content,
        .intro-video {
          flex: 1;
        }
        .intro-content {
          padding: 20px;
          margin: 20px;
          line-height: 28px;
          .intro-title {
            font-size: 26px;
            font-weight: 400;
            color: #2069c4;
            line-height: 90px;
            .svg-icon {
              margin-right: 10px;
              font-size: 36px;
            }
          }
          .intro-content-container {
            text-indent: 34px;
          }
        }
      }

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

        .unit-container {
          // height: 100%;
          margin-bottom: 40px;
          display: flex;
        }
        .unit-content-menu {
          width: 360px;
          margin-right: 40px;
          background-image: url("~@/assets/imgs/display/normal/bg.png");
          background-size: 1%;
        }
        .unit-content {
          flex: 1;
          padding: 40px;
          background-image: url("~@/assets/imgs/display/normal/bg.png");
          background-size: 1%;

          .unit-content_intro {
            font-size: 16px;
            font-weight: 400;
            color: #444444;
            line-height: 36px;
            text-indent: 32px;
            margin-bottom: 20px;
          }
          .unit-content_images {
            position: relative;
            .unit-content_images_container {
              height: 100%;
              display: flex;
              flex-direction: column;
              .images_img {
                flex: 1;
              }
              .desc {
                display: flex;
                justify-content: center;
                height: 40px;
                align-items: center;
              }
            }
          }
        }
      }
      // 关联文物
      .display-detail_relateRc {
        height: 560px;
        background-image: url("~@/assets/imgs/display/normal/bg.png");
        background-size: 1%;
        padding: 50px 0;
        .el-col {
          &:first-child {
            .img-container {
              width: 100%;
              height: 460px;
              position: relative;

              .cr-name-intro {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                padding: 100px 28px 50px;

                background-image: linear-gradient(
                  to top,
                  rgba(0, 0, 0, 0.8),
                  rgba(0, 0, 0, 0.1)
                );
                .cr-name {
                  font-size: 48px;
                  font-weight: bold;
                  color: #ffffff;
                  text-align: center;
                  margin-bottom: 40px;
                }
                .cr-intro {
                  font-size: 16px;
                  font-weight: 400;
                  color: #ccc;
                  text-indent: 32px;
                  line-height: 40px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 5;
                  -webkit-box-orient: vertical;
                }
              }
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          &:not(&:first-child) {
            margin-bottom: 30px;
            .img-container {
              height: 214px;
            }
          }
        }
        .img-container {
          width: 100%;
          height: 100%;
          cursor: pointer;
          overflow: hidden;
          &:hover {
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            img {
              transform: scale(1.1);
            }
          }
          img {
            width: 100%;
            height: 214px;
            object-fit: cover;
            transition: all 0.5s ease;
          }
        }
      }

      /**关联文献 */
      .display-detail_lts {
        background-color: #fafafa;
        .lts-content {
          flex: 1;
        }
      }
    }
  }
}
::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: 50px;
    :hover {
      background: #fff;
      color: $blue;
    }
  }

.el-tree-node__expand-icon{
  // visibility: hidden;
}
  // .el-tree-node {
  //   &:hover {
  //     .el-tree-node__content {
  //       background: #fff;
  //       color: $blue;
  //     }
  //   }
  // }
}

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