GCLS_Page_Book/src/views/TextbookDetail.vue

<template>
  <!-- 教材详情 -->
  <div class="TextbookDetail" v-if="TextbookData && isData">
    <div class="nav">
      <!-- 登录导航 -->
      <Header />
      <div class="shade"></div>
    </div>
    <!-- 教材详情 744 -->
    <HeaderOne text="123" :title="$t('Key744')" name="" />
    <template v-if="TextbookData.is_deleted == 'false'">
      <template v-if="bookIsBuy == 'true' || TextbookData.publish_status == 1">
        <div class="main" v-loading="loading">
          <div class="bookDetail" v-if="detailSHow">
            <div class="rightUp">
              <span>HOT</span>
            </div>
            <div class="img">
              <img :src="TextbookData.picture_url" alt="" />
            </div>
            <div class="text">
              <p class="p1">{{ TextbookData.name }}</p>
              <p class="p2">{{ TextbookData.org_name }}</p>
              <p class="p2">{{ TextbookData.author }}</p>
              <p class="p3">
                {{ TextbookData.description }}
              </p>
              <div class="operation">
                <span class="price">
                  ￥<span
                    class="price_1"
                    v-html="changePrice(TextbookData.price, 24, 16)"
                  ></span>
                </span>
                <button @click="getPurchase" class="get">
                  <!-- Key390-去学习 Key72-购买 -->
                  {{
                    bookIsBuy == "true" ? this.$t("Key390") : this.$t("Key72")
                  }}
                </button>
                <!-- <button   class="acquired">
              ACQUIRED
            </button> -->
                <span class="enshrine" @click="enshrineEvent">
                  <img
                    v-if="enshrine == 'false'"
                    src="../assets/textBookDetail/enshrine2.png"
                    alt=""
                  />
                  <img
                    v-else
                    src="../assets/textBookDetail/enshrine1.png"
                    alt=""
                  />
                </span>
              </div>
            </div>
          </div>
          <!-- <div class="more"  v-if="detailSHow">
        <div class="moreTitle">更多推荐</div>
        <div class="moreList">
          <div class="moreOne">
            <div>
              <img src="../assets/textBookDetail/Rectangle 905.png" alt="" />
            </div>
            <div class="text">
              <p class="p1">Learn Chinese with Ease-Learn Chinese with Ease</p>
              <p>Beijing language and Culture University</p>
              <p>Esther Howard</p>
              <div class="operation">
                <span class="price">
                  ￥
                  <span
                    class="price_1"
                    v-text="changePrice('19.99')"
                  ></span>
                  <span
                    class="price_2"
                    v-text="changePrice('19.99')"
                  ></span>
                </span>
                <button class="get">GET</button>
              </div>
            </div>
          </div>
          <div class="moreOne">
            <div>
              <img src="../assets/textBookDetail/Rectangle 906.png" alt="" />
            </div>
            <div class="text">
              <p class="p1">Learn Chinese with Ease-Learn Chinese with Ease</p>
              <p>Beijing language and Culture University</p>
              <p>Esther Howard</p>
              <div class="operation">
                <span class="price">
                  ￥
                  <span
                    class="price_1"
                    v-text="changePrice('19.99')"
                  ></span>
                  <span
                    class="price_2"
                    v-text="changePrice('19.99')"
                  ></span>
                </span>
                <button class="get">GET</button>
              </div>
            </div>
          </div>
          <div class="moreOne">
            <div>
              <img src="../assets/textBookDetail/Rectangle 907.png" alt="" />
            </div>
            <div class="text">
              <p class="p1">Learn Chinese with Ease-Learn Chinese with Ease</p>
              <p>Beijing language and Culture University</p>
              <p>Esther Howard</p>
              <div class="operation">
                <span class="price">
                  ￥
                  <span
                    class="price_1"
                    v-text="changePrice('1', '19.99')"
                  ></span>
                  <span
                    class="price_2"
                    v-text="changePrice('2', '19.99')"
                  ></span>
                </span>
                <button class="get">GET</button>
              </div>
            </div>
          </div>
        </div>
      </div> -->
          <div class="cutDownOrimg" v-if="detailSHow">
            <div class="sele">
              <div
                @click="SelectShowEvent('1')"
                :class="SelectShow == '1' ? 'select' : ''"
                v-if="SelectFirstShow"
              >
                <!-- 目录 -->{{ $t("Key612") }}
              </div>
              <!-- 资源 -->
              <div
                @click="SelectShowEvent('2')"
                :class="SelectShow == '1' ? '' : 'select'"
                v-if="
                  fileListVideo.length > 0 ||
                  fileListAudio.length > 0 ||
                  fileListOtheraudio.length > 0 ||
                  fileListDoc.length > 0
                "
              >
                {{ $t("Key613") }}
              </div>
            </div>
          </div>
          <div v-if="SelectShow == '1'" class="Catalogue">
            <BookView
              :bookId="TextBookId"
              @bookdetailShow="bookdetailShow"
              :bookIsBuy="bookIsBuy"
              :bookFontSize="TextbookData.font_size"
            ></BookView>
          </div>
          <div v-else class="Resources">
            <!--没有数据-->
            <!-- <div>
          <img src="../assets/textBookDetail/fileType1.png" alt="" />
          <span> 文件名 </span>
          <img src="../assets/textBookDetail/upload.png" alt="" />
        </div> -->
            <div class="resource-content" v-if="fileListVideo.length > 0">
              <!-- 视频资源 736 -->
              <h2 class="video-title">{{ $t("Key736") }}</h2>
              <ul class="video-list">
                <li
                  v-for="(item, index) in fileListVideo"
                  :key="index"
                  @click="handleJumpVideo(index)"
                >
                  <div
                    class="video-img"
                    :style="{
                      background:
                        'url(' + item.preview_image_file_url + ') no-repeat',
                      'background-size': 'cover',
                    }"
                  >
                    <img class="video" />
                    <img src="../assets/common/play-one.png" class="play-one" />
                  </div>
                  <p class="video-name">{{ item.file_name }}</p>
                </li>
              </ul>
            </div>
            <div
              class="resource-content"
              v-if="fileListAudio.length > 0 || fileListOtheraudio.length > 0"
            >
              <!-- 音频资源737 -->
              <h2 class="video-title">{{ $t("Key737") }}</h2>
              <div class="audio-content" v-if="fileListAudio.length > 0">
                <!-- 课文资源 738 -->
                <p class="audio-type">{{ $t("Key738") }}</p>
                <div class="audio-line-box">
                  <AudioLine
                    :audioId="'fileListAudio'"
                    :mp3List="fileListAudio"
                    type="audioLine"
                    ref="audioLine"
                  />
                </div>
              </div>
              <div class="audio-content" v-if="fileListOtheraudio.length > 0">
                <!-- 自学音频 739 -->
                <p class="audio-type">{{ $t("Key739") }}</p>
                <div class="audio-line-box">
                  <AudioLine
                    :audioId="'fileListOtheraudio'"
                    :mp3List="fileListOtheraudio"
                    type="audioLine"
                    ref="audioLine"
                  />
                </div>
              </div>
              <div class="audio-content">
                <!-- 资源下载 740 -->
                <p class="audio-type">{{ $t("Key740") }}</p>
                <div class="download">
                  <div class="book-open" @click="handleDownloadAudio">
                    <img
                      src="../assets/common/download.png"
                      class="book-open-img"
                    />
                    <!-- 音频 -->
                    <span class="book-open-text">{{ $t("Key400") }}</span>
                  </div>
                  <!-- <div class="book-open">
              <img
                src="../assets/common/download.png"
                class="book-open-img"
              />
              <span class="book-open-text">互动课件</span>
            </div> -->
                </div>
              </div>
            </div>
            <div class="resource-content" v-if="fileListDoc.length > 0">
              <!-- 试读PDF 741 -->
              <h2 class="video-title">{{ $t("Key741") }}</h2>
              <ul class="PDF-list">
                <li
                  v-for="(item, index) in fileListDoc"
                  :key="index"
                  @click="handleJumpPdf(index)"
                >
                  <b>{{ index + 1 }}.</b>
                  <p class="PDF-name">{{ item.file_name }}</p>
                  <span>{{ item.fileSize }}</span>
                  <img
                    src="../assets/common/download.png"
                    class="book-open-img"
                    @click="handleDownload(item.file_id)"
                  />
                </li>
              </ul>
            </div>
          </div>
        </div>
      </template>
    </template>
    <template v-if="TextbookData.is_deleted == 'true'">
      <div class="noview-msg-box">
        <!-- 无法查看，教材已被删除 742 -->
        <div class="noview-msg">{{ $t("Key742") }}</div>
      </div>
    </template>
    <template
      v-if="
        TextbookData.is_deleted == 'false' &&
        bookIsBuy == 'false' &&
        TextbookData.publish_status == 0
      "
    >
      <div class="noview-msg-box">
        <!-- 无法查看，教材已下架 743 -->
        <div class="noview-msg">{{ $t("Key743") }}</div>
      </div>
    </template>
    <!-- 商品详情 -->
    <el-dialog
      class="buyWindow"
      :title="$t('Key52')"
      :visible.sync="NopymentShow"
      width="720px"
      :before-close="closeNoPyment"
    >
      <Confirmorder
        :data="TextbookData"
        :goods_type="101"
        :changeOrderNumber="changeOrderNumber"
        ref="Confirmorder"
      />
    </el-dialog>
    <!-- 订单号 -->
    <el-dialog
      :title="$t('Key472') + '：' + orderNumber"
      :visible.sync="PymentShow"
      width="720px"
      :before-close="closePyment"
    >
      <Payment
        :data="TextbookData"
        :orderNumber="orderNumber"
        :closePyment="closePyment"
      />
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "@/components/inputModules/common/Header";
import HeaderOne from "@/components/inputModules/common/HeaderOne";
import {
  TextbookAPI,
  LearnWebSI,
  getContent,
  getContentFile,
} from "@/api/ajax";
import Confirmorder from "@/components/pyment/Confirmorder";
import Payment from "@/components/pyment/Payment";
import BookView from "@/views/bookView"; // 教材预览
import { updateWordPack } from "@/utils/i18n";
import AudioLine from "@/components/inputModules/common/AudioLine";
import { getToken } from "@/utils/auth";
import { Base64 } from "js-base64";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Header,
    HeaderOne,
    Confirmorder,
    Payment,
    BookView,
    AudioLine,
  },
  props: {},
  data() {
    //这里存放数据
    return {
      enshrine: "false",
      IsPurchase: false,
      SelectShow: "1", //选择展示课程资源还是下载
      SelectFirstShow: true,
      TextBookId: null,
      TextbookData: null,
      loading: false,
      NopymentShow: false, //添加订单弹窗
      PymentShow: false, //支付订单弹窗
      orderNumber: null, //订单号
      IsDownload: false, //是否可以下载
      detailSHow: true, // 除教材预览外其他内容是否显示
      bookIsBuy: "false", // 教材是否已购买
      isData: false,
      fileListVideo: [], // 教材资源视频数组
      fileListAudio: [], // 教材资源视频数组
      fileListOtheraudio: [],
      fileListDoc: [], // 教材资源视频数组
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    closeNoPyment() {
      this.NopymentShow = false;
      this.$refs.Confirmorder.clearData();
    },
    closePyment(str) {
      this.PymentShow = false;
      this.$refs.Confirmorder.clearData();
      if (str == "支付成功") {
        this.getdetail();
      }
    },
    // 生成订单 同时切换到支付弹窗
    changeOrderNumber(
      val,
      back_discount_code,
      discount_money,
      receivables_money
    ) {
      this.orderNumber = val;
      this.NopymentShow = false;
      this.TextbookData.back_discount_code = back_discount_code;
      this.TextbookData.discount_money = discount_money;
      this.TextbookData.receivables_money = receivables_money;
      this.PymentShow = true;
      this.isConfirmorder = false;
    },
    // 选择课程资源还是下载
    SelectShowEvent(num) {
      this.SelectShow = num;
    },
    changePrice(price, fontSize1, fontSize2) {
      price = price ? price : 0;
      price = price.toFixed(2);
      price = price.toString();
      let arr = price.split(".");
      let str = `<span style="font-size: ${fontSize1 ? fontSize1 : 16}px;">${
        arr[0]
      }</span>.<span style="font-size: ${fontSize2 ? fontSize2 : 16}px;">${
        arr[1]
      }</span>`;

      return str;
    },

    // 收藏
    enshrineEvent() {
      //   this.enshrine = !this.enshrine;
      if (this.enshrine == "false") {
        let Mname = "order-collection_manager-AddMyCollection";
        let data = {
          goods_id: this.TextBookId,
          goods_type: 101,
          goods_name: this.TextbookData.name,
          goods_person_name_desc: this.TextbookData.author,
          goods_picture_id: this.TextbookData.picture_id,
          goods_price: this.TextbookData.price,
        };
        LearnWebSI(Mname, data).then((res) => {
          this.enshrine = "true";
          this.$message.success(this.$t("Key575")); //"收藏成功"
        });
      } else {
        let Mname = "order-collection_manager-CancelMyGoodsCollection";
        let data = {
          goods_type: 101,
          goods_id_list: [this.TextBookId],
        };
        LearnWebSI(Mname, data).then((res) => {
          this.enshrine = "false";
          this.$message.success(this.$t("Key396")); //"取消收藏成功"
        });
      }
    },
    // 购买
    getPurchase() {
      if (this.bookIsBuy == "true") {
        this.$router.push("/courseview?bookId=" + this.TextBookId);
      } else {
        this.NopymentShow = true;
      }
    },
    bookdetailShow(flag) {
      this.detailSHow = flag;
    },
    //获取当前书籍是否已购买
    handleIsBuy() {
      let Mname = "order-order_manager-CheckMyGoodsBuyStatus";
      let data = {
        goods_type: 101,
        goods_id: this.TextBookId,
      };
      LearnWebSI(Mname, data).then((res) => {
        this.bookIsBuy = res.is_buy;
      });
    },
    // 获取当前书籍是否已收藏
    handleIsEnshrine() {
      let Mname = "order-collection_manager-CheckMyGoodsCollectionStatus";
      let data = {
        goods_type: 101,
        goods_id: this.TextBookId,
      };
      LearnWebSI(Mname, data).then((res) => {
        this.enshrine = res.is_collection;
      });
    },
    getdetail() {
      this.loading = true;
      this.TextBookId = this.$route.query.goods_id;
      let Mname = "book-book_manager-GetBook";
      // 获取课程详情
      TextbookAPI(Mname, {
        id: this.TextBookId,
      })
        .then((res) => {
          this.TextbookData = res;
          this.loading = false;
          sessionStorage.setItem("Bookdetail", JSON.stringify(res));
        })
        .catch((res) => {
          this.loading = false;
        });
      this.handleIsBuy();
      this.handleIsEnshrine();
      this.getBookSource();
      this.getBookStructList();
    },
    // 教材资源
    getBookSource() {
      let MethodNames = "book-resource_manager-GetBookResourceList";
      let datas = {
        book_id: this.TextBookId,
      };
      getContent(MethodNames, datas).then((res) => {
        if (res.status == 1) {
          this.fileListVideo = res.video_list;
          this.fileListAudio = res.audio_list;
          this.fileListOtheraudio = res.otheraudio_list;
          this.fileListDoc = res.doc_list;
          this.fileListDoc.forEach((item) => {
            if (item.file_size > 1024 * 1024) {
              if (item.file_size / 1024 / 1024 / 1024 > 1) {
                item.fileSize =
                  (item.file_size / 1024 / 1024 / 1024).toFixed(2) + "GB";
              } else {
                item.fileSize =
                  (item.file_size / 1024 / 1024).toFixed(2) + "MB";
              }
            } else {
              item.fileSize = (item.file_size / 1024).toFixed(2) + "KB";
            }
          });
        }
      });
    },
    // 章节树
    getBookStructList() {
      let MethodName = "book-book_manager-GetBookChapterStruct";
      let data = {
        book_id: this.TextBookId,
      };
      getContent(MethodName, data).then((res) => {
        this.SelectFirstShow = res.nodes ? true : false;
        this.SelectShow = res.nodes ? "1" : "2";
      });
    },
    // 打包下载全部音频
    handleDownloadAudio() {
      let _this = this;
      _this.loading = true;
      // 拿到当前课的所有文件id
      let userInfor = JSON.parse(getToken());
      let UserCode = "",
        UserType = "",
        SessionID = "";
      if (userInfor) {
        UserCode = userInfor.user_code;
        UserType = userInfor.user_type;
        SessionID = userInfor.session_id;
      }
      let FileID = null;
      let data = {
        SessionID,
        UserCode,
        UserType,
        FileID,
      };
      let arr = [];
      this.fileListAudio.forEach((item) => {
        arr.push(item.file_id);
      });
      this.fileListOtheraudio.forEach((item) => {
        arr.push(item.file_id);
      });
      let MethodName = "file_store_manager-StartCreateFileCompressPack";
      getContentFile(MethodName, {
        file_id_list: arr,
      })
        .then((res) => {
          let MethodName2 = "file_store_manager-GetFileCompressTaskProgress";
          let timer = setInterval(() => {
            getContentFile(MethodName2, {
              file_compress_task_id: res.file_compress_task_id,
            })
              .then((res) => {
                if (res.is_finish == "true") {
                  data.FileID = res.compress_pack_file_id;
                  clearInterval(timer);
                  timer = null;
                  location.href =
                    process.env.VUE_APP_BASE_API +
                    `/GCLSFileServer/WebFileDownload?UserCode=${data.UserCode}&UserType=${data.UserType}&SessionID=${data.SessionID}&FileID=${data.FileID}`;
                  _this.loading = false;
                }
              })
              .catch((res) => {
                this.loading = false;
              });
          }, 1000);
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    // 下载单个文件
    handleDownload(fileId) {
      let userInfor = JSON.parse(getToken());
      let UserCode = "",
        UserType = "",
        SessionID = "";
      if (userInfor) {
        UserCode = userInfor.user_code;
        UserType = userInfor.user_type;
        SessionID = userInfor.session_id;
      }
      let FileID = fileId;
      let data = {
        SessionID,
        UserCode,
        UserType,
        FileID,
      };
      location.href =
        process.env.VUE_APP_BASE_API +
        `/GCLSFileServer/WebFileDownload?UserCode=${data.UserCode}&UserType=${data.UserType}&SessionID=${data.SessionID}&FileID=${data.FileID}`;
    },
    // 跳转预览PDF
    handleJumpPdf(index) {
      this.$router.push(
        "/TextbookDetailPdf?id=" +
          this.TextBookId +
          "&url=" +
          Base64.encodeURL(this.fileListDoc[index].file_url) +
          "&invok_module=" +
          this.$route.query.invok_module +
          "&fileId=" +
          Base64.encodeURL(this.fileListDoc[index].file_id) +
          "&relativePath=" +
          Base64.encodeURL(this.fileListDoc[index].file_relative_path)
      );
    },
    // 跳转预览视频
    handleJumpVideo(index) {
      this.$router.push(
        "/TextbookDetailVideo?id=" +
          this.TextBookId +
          "&invok_module=" +
          this.$route.query.invok_module +
          "&activeIndex=" +
          Base64.encodeURL(index)
      );
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    await updateWordPack({
      word_key_list: [
        "Key9",
        "Key38",
        "Key39",
        "Key52",
        "Key53",
        "Key54",
        "Key55",
        "Key72",
        "Key94",
        "Key108",
        "Key109",
        "Key116",
        "Key390",
        "Key396",
        "Key400",
        "Key472",
        "Key473",
        "Key474",
        "Key475",
        "Key575",
        "Key612",
        "Key613",
        "Key744",
        "Key736",
        "Key737",
        "Key738",
        "Key739",
        "Key740",
        "Key741",
        "Key742",
        "Key743",
      ],
    });
    this.isData = true;
    this.getdetail();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.TextbookDetail {
  // height: 100%;

  .price_1 {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 150%;
    color: #ffffff;
    .num1 {
      font-size: 24px;
    }
    .num2 {
      font-size: 16px;
    }
  }
  .nav {
    background: url("../assets/textBookDetail/Homebg2.png") no-repeat center;
    background-size: 100% 100%;
    // height: 60px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    position: relative;
    .shade {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      color: #fff;
      font-weight: bold;
      font-size: 18px;
      justify-content: space-around;
      align-items: center;
      .el-menu-demo {
        background: rgba(0, 0, 0, 0);
      }
      // 取消组件默认的样式
      .el-menu.el-menu--horizontal {
        border-bottom: none;
        li:hover {
          background: none;
        }
        li {
          background: none;
        }
      }
      .nav_title {
        text-align: left;
      }
      .seek {
        input {
          width: 450px;
          height: 46px;
          background: #979797;
          border: none;
          outline: none;
          color: white;
          font-size: 18px;
          opacity: 0.5;
        }
        img {
          position: relative;
          right: 40px;
          top: 8px;
          cursor: pointer;
        }
      }
    }
  }
  .headerone {
    // margin-top: 10px;
  }
  .main {
    min-height: 100%;
    padding-top: 52px;
    background: #e5e5e5;
    padding-bottom: 20px;

    .bookDetail {
      width: 1240px;
      margin: 0 auto;
      background: #6e767c;
      border-radius: 8px;
      display: flex;
      position: relative;
      overflow: hidden;
      padding: 40px;
      box-sizing: border-box;
      .img {
        margin-right: 32px;
        img {
          width: 168px;
          height: 224px;
        }
      }
      .rightUp {
        margin: 0;
        width: 72px;
        height: 72px;
        background: url("../assets/textBookDetail/Rectangle903.png");
        position: absolute;
        right: 0;
        top: 0;
        // text-align: right;
        span {
          display: inline-block;
          color: #fff;
          transform: rotateZ(45deg);
          position: absolute;
          left: 30px;
          top: 15px;
        }
      }

      .text {
        width: 900px;
        color: white;
        p {
          font-size: 16px;
          margin: 0;
        }
        .p1 {
          font-size: 40px;
          font-weight: normal;
          font-size: 40px;
          line-height: 150%;
          color: #ffffff;
        }
        > :not(.p1) {
          margin-top: 16px;
        }
        .p2 {
          font-weight: 600;
          font-size: 16px;
          line-height: 150%;
          color: #ffffff;
        }
        .p3 {
          font-weight: normal;
          font-size: 16px;
          line-height: 150%;
          color: #ffffff;
        }

        .price {
          font-size: 24px;
          .price_2 {
            font-size: 16px;
          }
        }
        .operation {
          display: flex;
          align-items: center;
          margin-top: 16px;
        }
        .get {
          min-width: 120px;
          height: 40px;
          background: #ff9900;
          border-radius: 4px;
          border: none;
          outline: none;
          color: white;
          font-size: 20px;
          margin-left: 30px;
          cursor: pointer;
        }
        .acquired {
          width: 120px;
          height: 40px;
          background: #d5d5d5;
          border-radius: 4px;
          border: none;
          outline: none;
          color: white;
          font-size: 16px;
          margin-left: 30px;
          cursor: pointer;
        }
        .enshrine {
          margin-left: 30px;
          img {
            width: 24px;
            cursor: pointer;
          }
        }
      }
    }
    .more {
      width: 1240px;
      margin: 0 auto;
      margin-top: 30px;
      .moreTitle {
        font-weight: 600;
        font-size: 20px;
        color: #000000;
      }
      .moreTitle::before {
        content: "|";
        background: #ff9900;
        color: #ff9900;
        margin-right: 16px;
      }
      .moreList {
        width: 1300px;
        margin: 0 auto;
        // margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        // overflow-y: hidden;
        // overflow-x: scroll;
        .moreOne {
          margin-right: 20px;
          margin-top: 20px;
          width: 598px;
          height: 236px;
          background: #ffffff;
          border-radius: 8px;
          display: flex;
          > div {
            margin-left: 32px;
            margin-top: 32px;
            img {
              width: 120px;
              height: 160px;
            }
          }
          .text {
            width: 390px;
            margin-right: 23px;
            > p:not(.p1) {
              font-size: 16px;
              color: #2c2c2c;
              opacity: 0.7;
              margin-top: 10px;
            }
            .p1 {
              font-weight: 600;
              font-size: 20px;
              color: #2c2c2c;
            }
            .operation {
              margin-top: 10px;
              text-align: right;
            }
            .get {
              min-width: 120px;
              height: 40px;
              background: #ff9900;
              border-radius: 4px;
              border: none;
              outline: none;
              color: white;
              font-size: 20px;
              margin-left: 30px;
              cursor: pointer;
            }
            .acquired {
              width: 120px;
              height: 40px;
              background: #d5d5d5;
              border-radius: 4px;
              border: none;
              outline: none;
              color: white;
              font-size: 16px;
              margin-left: 30px;
              cursor: pointer;
            }
            .price {
              font-size: 24px;
              .price_2 {
                font-size: 16px;
              }
            }
          }
        }
      }
    }
    .cutDownOrimg {
      width: 1240px;
      margin: 0 auto;
      margin-top: 24px;
      .sele {
        width: fit-content; //318px;
        height: 48px;
        background: #ebebeb;
        border-radius: 30px;
        color: #9f9f9f;
        font-size: 20px;
        display: flex;
        align-items: center;
        > div {
          width: 158px;
          height: 48px;
          border-radius: 30px;
          line-height: 48px;
          text-align: center;
          cursor: pointer;
        }
        .select {
          background: #ff9900;
          color: white;
          box-shadow: 0px 2px 8px rgba(255, 153, 0, 0.15);
        }
      }
    }
    .Catalogue {
      margin: 24px auto;
      width: 1240px;
      height: 710px;
      background: #ffffff;
      display: flex;
      .left {
        width: 340px;
        height: 710px;
        border-right: 1px solid #d9d9d9;
        .title {
          width: 80%;
          margin: 29px auto;
          font-weight: 600;
          font-size: 24px;
          color: #000000;
          cursor: pointer;
        }
        .subtitle {
          width: 80%;
          margin: 0 auto;
          height: 44px;
          line-height: 44px;
          font-weight: bold;
          font-size: 14px;
          color: #000000;
          cursor: pointer;
        }
      }
      .right {
        width: 860px;
        height: 710px;
      }
    }
    .Resources {
      margin: 24px auto;
      width: 1240px;
      min-height: 710px;
      //   background: #ffffff;
      //   display: flex;
      box-sizing: border-box;
      padding: 20px 0;
      div {
        // height: 40px;
        // margin: 12px 8px;
        // border: 1px solid rgba(44, 44, 44, 0.15);
        // border-radius: 4px;
        // padding: 0 10px;
        // display: flex;
        // justify-content: center;
        // align-items: center;
        // cursor: pointer;
        img {
          width: 24px;
          margin-right: 10px;
        }
      }
    }
  }
  .resource-content {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 26px 24px 8px;
    background: #ffffff;
    border-radius: 8px;
    margin-bottom: 24px;
    .video-title {
      font-size: 24px;
      line-height: 32px;
      font-weight: 700;
      margin-bottom: 40px;
      margin-top: 0;
    }
    .video-list {
      padding: 0 36px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      list-style: none;
      > li {
        margin: 0 12px 16px 12px;
        cursor: pointer;
        .video-img {
          // background: #ff9900;
          position: relative;
          width: 256px;
          height: 144px;
          border-radius: 8px;
          margin-bottom: 8px;
          overflow: hidden;
          .video-bg {
            width: 256px;
            height: 144px;
            border-radius: 8px;
          }
          .play-one {
            position: absolute;
            left: 108px;
            top: 52px;
            width: 40px;
            height: 40px;
            display: block;
            margin: 0;
          }
        }
        .video-name {
          font-size: 16px;
          line-height: 150%;
          color: #000000;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
    .PDF-list {
      width: 1096px;
      margin: 0 auto;
      padding-bottom: 90px;
      li {
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        border-radius: 8px;
        display: flex;
        padding: 8px 12px;
        align-items: center;
        margin-bottom: 8px;
        b {
          width: 24px;
          font-size: 16px;
          line-height: 24px;
          font-weight: normal;
          margin-right: 16px;
        }
        p {
          margin: 0;
          width: 920px;
          cursor: pointer;
          font-size: 16px;
          line-height: 24px;
        }
        span {
          width: 80px;
          text-align: right;
        }
        img {
          width: 16px;
          margin-left: 16px;
          cursor: pointer;
        }
      }
    }
    .audio-content {
      padding: 0 28px;
      margin: 0 auto 24px auto;
      width: 1152px;
      .audio-type {
        margin-bottom: 10px;
      }
      .download {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .book-open {
          width: fit-content;
          margin-right: 16px;
          border: 1px solid rgba(0, 0, 0, 0.1);
          box-sizing: border-box;
          border-radius: 8px;
          padding: 8px 16px;
          display: flex;
          align-items: center;
          cursor: pointer;
          .book-open-text {
            line-height: 24px;
          }
        }
      }
    }
    .audio-line-box {
      width: 100%;
      height: 56px;
      box-sizing: border-box;
      padding: 7px 12px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      border-radius: 8px;
    }
  }
  .noview-msg-box {
    width: 100%;
    position: absolute;
    top: 200px;
    left: 0;
    z-index: 9999;
  }
  .noview-msg {
    width: fit-content;
    margin: 0 auto;
    padding: 8px;
    background: #fcf5f5;
    border: 1px solid #e65959;
    box-sizing: border-box;
    border-radius: 4px;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #e55959;
  }
}
</style>
<style lang="scss">
.buyWindow {
  .el-dialog__body {
    padding: 20px 32px;
  }
  .el-dialog__header {
    padding: 20px 32px 10px;
  }
}
</style>