zc_saas_pc/src/pages/goods-detail/course-detail.vue

<template>
  <div class="goods-detail">
    <Header></Header>
    <section class="section">
      <div class="container">
        <div class="section__header">
          <div class="container">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/index' }"
                >首页</el-breadcrumb-item
              >
              <el-breadcrumb-item>商品详情</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
        <div class="section__body">
          <div class="container">
            <div class="goods-info">
              <div class="goods-info__header">
                <div class="img">
                  <img
                    :src="$tools.splitImgHost(goodsDetail.coverUrl, true)"
                    alt=""
                  />
                </div>
                <div class="text">
                  <div class="title">
                    {{ goodsDetail.goodsName }}
                  </div>
                  <div class="desc">
                    {{ courseList.length }} 课程
                    {{ goodsDetail.classHours }}学时
                  </div>
                  <div class="price" v-if="goodsDetail.standPrice">
                    ${{ goodsDetail.standPrice | toFixed }}
                  </div>
                  <div class="btns">
                    <div class="buynow" @click="buyNow()">立即购买</div>
                    <div class="add" @click="addCart()">加入购物车</div>
                  </div>
                </div>
              </div>
              <div class="goods-info__body">
                <el-tabs v-model="activeName">
                  <el-tab-pane label="课程详情" name="1">
                    <div class="detail" v-html="goodsDetail.pcDetailHtml"></div>
                  </el-tab-pane>
                  <el-tab-pane label="章节目录" name="2">
                    <div class="goods-menu clearfix">
                      <div class="left-box">
                        <div class="left-box__body">
                          <div
                            class="course-list-item"
                            v-for="(course, index) in courseList"
                            :key="index"
                          >
                            <div
                              class="course-list-item__title"
                              @click="openCourse(course)"
                            >
                              <i
                                :class="{
                                  'el-icon-caret-right': !course.showList,
                                  'el-icon-caret-bottom': course.showList,
                                }"
                              ></i>
                              {{ course.courseName }}
                            </div>
                            <template v-if="course.showList">
                              <div
                                class="item"
                                v-for="(item, index) in course.list"
                                :key="index"
                              >
                                <template v-if="item.type == 1">
                                  <div
                                    class="item__title"
                                    @click="openModule(item)"
                                  >
                                    <i
                                      :class="{
                                        'el-icon-caret-right': !item.showList,
                                        'el-icon-caret-bottom': item.showList,
                                      }"
                                    ></i>
                                    {{ item.name }}
                                  </div>
                                  <div class="item__content">
                                    <div
                                      class="bank-chapter"
                                      v-if="item.showList"
                                    >
                                      <div
                                        class="bank-chapter__item"
                                        v-for="(
                                          chapter, chapterIndex
                                        ) in item.list"
                                        :key="chapterIndex"
                                      >
                                        <div
                                          class="bank-chapter__item__text"
                                          @click="openChapter(chapter)"
                                        >
                                          <i
                                            :class="{
                                              'el-icon-caret-right':
                                                !chapter.showList,
                                              'el-icon-caret-bottom':
                                                chapter.showList,
                                            }"
                                          ></i
                                          >{{ chapter.name }}
                                        </div>

                                        <div
                                          class="bank-section"
                                          v-if="chapter.showList"
                                        >
                                          <div
                                            class="bank-section__item"
                                            v-for="(
                                              section, sectionIndex
                                            ) in chapter.list"
                                            :key="sectionIndex"
                                          >
                                            <div
                                              class="bank-section__item__text"
                                            >
                                              {{ section.name }}
                                            </div>
                                            <div
                                              v-if="section.tryListen"
                                              @click="toDo(section)"
                                              class="btn"
                                            >
                                              试看
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </template>

                                <template v-if="item.type == 2">
                                  <div class="item__content">
                                    <div class="bank-chapter">
                                      <div class="bank-chapter__item">
                                        <div
                                          class="bank-chapter__item__text"
                                          @click="openChapter(item)"
                                        >
                                          <i
                                            :class="{
                                              'el-icon-caret-right':
                                                !item.showList,
                                              'el-icon-caret-bottom':
                                                item.showList,
                                            }"
                                          ></i
                                          >{{ item.name }}
                                        </div>

                                        <div
                                          class="bank-section"
                                          v-if="item.showList"
                                        >
                                          <div
                                            class="bank-section__item"
                                            v-for="(
                                              section, sectionIndex
                                            ) in item.list"
                                            :key="sectionIndex"
                                          >
                                            <div
                                              class="bank-section__item__text"
                                            >
                                              {{ section.name }}
                                            </div>
                                            <div
                                              v-if="section.tryListen"
                                              @click="toDo(section)"
                                              class="btn"
                                            >
                                              试看
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </template>

                                <template v-if="item.type == 3">
                                  <div class="item__content">
                                    <div class="bank-section">
                                      <div class="bank-section__item">
                                        <div class="bank-section__item__text">
                                          {{ item.name }}
                                        </div>
                                        <div
                                          v-if="item.tryListen"
                                          @click="toDo(item)"
                                          class="btn"
                                        >
                                          试看
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </template>
                              </div>
                            </template>
                          </div>
                        </div>
                      </div>
                      <div class="right-box">
                        <div class="title">
                          推荐题库
                          <span class="more">更多></span>
                        </div>
                        <ul class="list">
                          <li
                            class="course-item"
                            v-for="(item, index) in 5"
                            :key="index"
                            @click="goodsDetail()"
                          >
                            <div class="course-item__img">
                              <div class="note">2022</div>
                            </div>
                            <div class="course-item__title">
                              2022年二建建设工程法规及相关知识（黄金基础班）
                            </div>
                            <div class="course-item__desc">
                              <div class="price">￥100</div>
                              <a class="add">加购物车</a>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="学员须知" name="3">
                    {{ goodsDetail.buyNote }}
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
        </div>

        <div class="section__footer">
          <div class="recommend">
            <div class="recommend__header">
              <div class="title">相关推荐</div>
            </div>
            <div class="recommend__body">
              <ul class="list clearfix">
                <li
                  class="recommend-item"
                  v-for="(item, index) in 4"
                  :key="index"
                >
                  <div class="recommend-item__img">
                    <div class="note">2022</div>
                  </div>
                  <div class="recommend-item__title">
                    2022年二建建设工程法规及相关知识（黄金基础班）
                  </div>
                  <div class="recommend-item__desc">
                    <div class="price">￥100</div>
                    <a class="add">加购物车</a>
                  </div>
                </li>
              </ul>
            </div>

            <div class="recommend__footer">
              <div class="btn">查看更多</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <el-dialog
      width="800px"
      class="video-modal"
      :visible.sync="videoModalShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="video-modal__content">
        <a class="video-modal__close" @click="videoModalShow = false">X</a>

        <div class="video-modal__header">课程试看</div>
        <div class="video-modal__body">
          <div class="video">
            <div class="video__title">1、这是课程的第一节试看标题</div>
            <div class="video__wrap">
              <div v-show="vid" id="player"></div>
              <div v-show="vidzb" id="playerzb"></div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      width="800px"
      class="select-class"
      :visible.sync="selectClassModal"
    >
      <div class="select-class__content">
        <div
          class="selection"
          v-if="
            goodsDetail.templateType == 'class' && goodsDetail.goodsType == 1
          "
        >
          <el-select
            class="select"
            v-model="gradeId"
            placeholder="请选择班级"
            size="small"
            @click.native="selectClick(goodsDetail, 'class')"
          >
            <el-option
              v-for="item in gradeList"
              :key="item.gradeId"
              :label="
                item.classEndTime
                  ? `${item.className} 有效期至：${$tools.timestampToTime(
                      item.classEndTime
                    )}，本班还剩${$tools.GetRTime(
                      item.classEndTime
                    )}天将结束学习`
                  : `${item.className}`
              "
              :value="item.gradeId"
            >
            </el-option>
          </el-select>
        </div>

        <div
          class="selection"
          v-if="
            goodsDetail.templateType == 'apply' && goodsDetail.goodsType == 1
          "
        >
          <el-select
            v-model="educationId"
            placeholder="请选择考期"
            size="small"
            @click.native="selectClick(goodsDetail, 'exam')"
          >
            <el-option
              v-for="item in examineList"
              :key="item.educationId"
              :label="item.examineName"
              :value="item.educationId"
            >
            </el-option>
          </el-select>
          <el-cascader
            size="small"
            :props="props"
            ref="cascader"
            :options="provinceList"
            v-model="examArea"
            @change="areaChange(goodsDetail)"
            clearable
            placeholder="请选择报考地区"
          ></el-cascader>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="pay">确 定</el-button>
      </div>
    </el-dialog>

    <ToolBar></ToolBar>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/footer/index";
import Header from "@/components/header/index";
import ToolBar from "@/components/toolbar/index";
import { mapMutations } from "vuex";
export default {
  name: "GoodsDetail",
  components: {
    Footer,
    Header,
    ToolBar,
  },
  data() {
    return {
      questionList: [],
      goodsExamConfig: [],
      goodsDetail: {},
      courseList: [],
      goodsId: "",
      checked: false,
      textarea: "",
      selectClassModal: false,
      videoModalShow: false,
      activeName: "1",
      questionModalData: {
        activeName: "0",
        num: 0, //试做题数
        current: 0,
      },
      judge: ["错误", "正确"],
      ast: ["A", "B", "C", "D", "E", "F", "G"],
      goodsAuditionConfigIdList: [], //试听列表
      listenConfigList: [],
      vid: "",
      vidzb: "",
      player: "",
      playerzb: "",
      activeId: "", //当前选中ID
      vodPlayerJs: "https://player.polyv.net/script/player.js",
      playerJs:
        "https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js",
      uidzb: "egsxlptzdq",
      gradeList: [],
      gradeId: "",
      examineList: [],
      examArea: [],
      educationId: "",
      props: {
        lazy: true,
        lazyLoad: this.lazyLoad,
      },
      applyAreas: [],
      provinceList: [],
    };
  },
  mounted() {
    this.goodsId = this.$route.params.goodsId;
    this.getGoodsDetail();
    this.goodsCourseList();
    if (this.$tools.isLogin()) {
      this.getProvinceList();
    }
  },
  methods: {
    ...mapMutations(["setCheckGoodsList", "setCurrentRouter"]),
    /**
     * 点击课程大目录
     */
    openCourse(course) {
      course.showList = !course.showList;

      if (!course.list.length) {
        this.getMenuList(course);
      }
    },

    /**
     * 获取模块列表
     */
    getMenuList(item) {
      this.$request.menuList({ courseId: item.courseId }).then((res) => {
        for (let i = 0; i < res.rows.length; i++) {
          let item = res.rows[i];
          item.showList = false;
          item.id = item.menuId;
          item.name = item.menuName;

          if (item.type == 3) {
            //判断是否试听
            item.tryListen = false;
            if (this.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
              item.tryListen = true;
            }
          } else {
            item.list = [];
          }
        }
        item.list = res.rows;
      });
    },
    /**
     * @param {Object}
     * 单选点击确认
     */
    radioSelect(question, questionIndex, optionsId) {
      if (this.questionList[questionIndex].ques) return;
      this.$set(this.questionList[questionIndex], "ques", optionsId);
    },

    /**
     * @param {Object}
     * 案例单选点击
     */
    radioSelectChild(questionIndex, jsonIndex, optionsId) {
      if (this.questionList[questionIndex].ques[jsonIndex]) return;
      this.$set(this.questionList[questionIndex].ques, jsonIndex, optionsId);
    },
    /**
     * 多选点击确认
     */
    checkboxSubmit(question, questionIndex) {
      if (this.questionList[questionIndex].ques) return;
      let arr = [];
      this.questionList[questionIndex].jsonStr.forEach((item) => {
        if (item.checked) {
          arr.push(item.optionsId);
        }
      });
      if (!arr.length) {
        this.$message({
          type: "warning",
          message: "请选择答案",
        });
        return;
      }
      this.$set(this.questionList[questionIndex], "ques", arr);
    },
    /**
     * @param {Object}
     * 案例多选确认
     */
    checkboxSubmitChild(questionIndex, ansIndex) {
      if (this.questionList[questionIndex].ques[ansIndex]) return;
      let arr = [];
      this.questionList[questionIndex].jsonStr[ansIndex].optionsList.forEach(
        (item) => {
          if (item.checked) {
            arr.push(item.optionsId);
          }
        }
      );

      if (!arr.length) {
        this.$message({
          type: "warning",
          message: "请选择答案",
        });
        return;
      }

      this.$set(this.questionList[questionIndex].ques, ansIndex, arr);
    },
    /**
     * 判断点击确认
     */
    judgeSelect(question, questionIndex, index) {
      if (question.ques) return;
      this.$set(this.questionList[questionIndex], "ques", index + "");
    },
    judgeSelectChild(questionIndex, jsonIndex, index) {
      console.log(this.questionList[questionIndex].ques[jsonIndex]);
      if (this.questionList[questionIndex].ques[jsonIndex]) return;
      this.$set(this.questionList[questionIndex].ques, jsonIndex, index + "");
    },

    /**
     * 上传图片
     */
    uploadImg(e, question, questionIndex) {
      var file = e.target.files[0];
      if (file.size > 2 * 1024 * 1024) {
        this.$message.warn("图片不得大于2000kb");
        return;
      }
      var type = e.target.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "gif"
      ) {
        this.$message.error("上传格式需为：.jpg/.png/.jpeg/gif");
        e.target.value = "";
        return;
      }

      this.$upload.upload(file, 0).then((res) => {
        question.ansText.imageList.push(res);
      });
    },

    /**
     * 案例上传图片
     */
    uploadImgChild(e, questionIndex, jsonIndex) {
      var file = e.target.files[0];
      if (file.size > 2 * 1024 * 1024) {
        this.$message.warn("图片不得大于2000kb");
        return;
      }
      var type = e.target.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "gif"
      ) {
        this.$message.error("上传格式需为：.jpg/.png/.jpeg/gif");
        e.target.value = "";
        return;
      }

      this.$upload.upload(file, 0).then((res) => {
        this.questionList[questionIndex].jsonStr[
          jsonIndex
        ].ansText.imageList.push(res);
      });
    },
    isOver(item, index) {
      if (this.questionList[index].ques) {
        if (item.type == 4) {
          //案例题
          let isOver = item.jsonStr.every((jsonItem, indexs) => {
            if (
              jsonItem.type == 1 ||
              jsonItem.type == 2 ||
              jsonItem.type == 3
            ) {
              if (item.ques[indexs]) {
                return true;
              } else {
                return false;
              }
            } else if (jsonItem.type == 5) {
              if (
                item.ques[indexs] &&
                (item.ques[indexs].text || item.ques[indexs].imageList.length)
              ) {
                console.log("chil");
                return true;
              } else {
                return false;
              }
            }
          });

          if (isOver) {
            return true;
          } else {
            return false;
          }
        } else if (item.type == 5) {
          //简答题
          //每一项都相等
          if (item.ques && (item.ques.imageList.length || item.ques.text)) {
            return true;
          }
          //判断
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    ansSubmit(question, questionIndex) {
      if (!question.ansText.text && !question.ansText.imageList.length) {
        this.$message({
          type: "warning",
          message: "请输入内容或上传图片",
        });
        return;
      }

      question.ques.imageList = question.ansText.imageList;
      question.ques.text = question.ansText.text;

      console.log(question.ques);
    },
    ansSubmitChild(question, questionIndex, jsonIndex) {
      if (
        !this.questionList[questionIndex].jsonStr[jsonIndex].ansText.text &&
        !this.questionList[questionIndex].jsonStr[jsonIndex].ansText.imageList
          .length
      ) {
        this.$message({
          type: "warning",
          message: "请输入内容或上传图片",
        });
        return;
      }

      this.$set(this.questionList[questionIndex].ques, jsonIndex, {
        imageList:
          this.questionList[questionIndex].jsonStr[jsonIndex].ansText
            .imageList || [],
        text:
          this.questionList[questionIndex].jsonStr[jsonIndex].ansText.text ||
          "",
      });
    },
    /**
     * 试看
     */
    toDo(section) {
      this.videoModalShow = true;
      this.initVideo(section);
    },

    async initVideo(option) {
      await this.clears();
      console.log(option);
      if (option.sectionType === 2) {
        this.vidzb = option.liveUrl;
        this.loadPlayerScriptzb(this.loadPlayerzb);
      } else {
        this.vid = option.recordingUrl;
        this.loadPlayerScript(this.loadPlayer);
      }
    },
    loadPlayerzb() {
      const polyvLivePlayer = window.polyvLivePlayer;
      this.playerzb = polyvLivePlayer({
        wrap: "#playerzb",
        width: 800,
        height: 450,
        uid: this.uidzb,
        vid: this.vidzb,
      });
    },
    loadPlayer() {
      var self = this;
      const polyvPlayer = window.polyvPlayer;
      self.$request.obtainpolyvvideosign(self.vid).then((res) => {
        self.player = polyvPlayer({
          wrap: "#player",
          width: 800,
          height: 450,
          vid: self.vid,
          teaser_show: 0,
          ts: res.data.ts,
          sign: res.data.sign,
          playsafe: function (vid, next) {
            next();
          },
        });
      });
    },
    /**
     * @param {String} 直播预览
     */
    loadPlayerScriptzb(callback) {
      if (!window.polyvLivePlayer) {
        const myScript = document.createElement("script");
        myScript.setAttribute("src", this.playerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    },
    loadPlayerScript(callback) {
      if (!window.polyvPlayer) {
        const myScript = document.createElement("script");
        myScript.setAttribute("src", this.vodPlayerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    },
    /**
     * @param {String} 关闭视频窗口-销毁实例
     */
    clears() {
      return new Promise((resolve, reject) => {
        this.vid = "";
        this.vidzb = "";
        if (this.player) {
          this.player.destroy();
        }
        if (this.playerzb) {
          this.playerzb.destroy();
        }
        resolve();
      });
    },
    changeIndex(index) {
      if (index <= this.questionModalData.num - 1) {
        this.questionModalData.current = index;
      } else {
        this.$message({
          type: "warning",
          message: "试做题目已经结束~",
        });
      }
    },
    nextQuestion() {
      if (this.questionModalData.current >= this.questionModalData.num - 1) {
        this.$message({
          type: "warning",
          message: "试做题目已经结束~",
        });
        return;
      } else {
        this.questionModalData.current++;
      }
    },
    prevQuestion() {
      if (this.questionModalData.current == 0) {
        return;
      } else {
        this.questionModalData.current--;
      }
    },
    isRight(item, index) {
      //单选
      if (this.questionList[index].ques) {
        if (item.type == 1) {
          console.log(
            this.questionList[index].ques == this.questionList[index].ans
          );
          return this.questionList[index].ques == this.questionList[index].ans;
          //多选
        } else if (item.type == 2) {
          //每一项都相等
          return this.questionList[index].ans.every((item, i) => {
            return item == this.questionList[index].ques[i];
          });
          //判断
        } else if (item.type == 3) {
          return this.questionList[index].ques == this.questionList[index].ans;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },

    isWrong(item, index) {
      if (this.questionList[index].ques) {
        //单选
        if (item.type == 1) {
          return this.questionList[index].ques != this.questionList[index].ans;
          //多选
        } else if (item.type == 2) {
          //每一项都相等
          return this.questionList[index].ans.some((item, i) => {
            return item != this.questionList[index].ques[i];
          });
          //判断
        } else if (item.type == 3) {
          return this.questionList[index].ques != this.questionList[index].ans;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    right(bankIndex, ansIndex, option) {
      if (
        this.questionList[bankIndex].ques[ansIndex] &&
        this.questionList[bankIndex].ans[ansIndex]
      ) {
        if (
          this.questionList[bankIndex].ques[ansIndex].indexOf(
            option.optionsId
          ) != -1 ||
          this.questionList[bankIndex].ans[ansIndex].indexOf(
            option.optionsId
          ) != -1
        ) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },

    wrong(bankIndex, ansIndex, option) {
      if (
        this.questionList[bankIndex].ques[ansIndex] &&
        this.questionList[bankIndex].ans[ansIndex]
      ) {
        if (
          this.questionList[bankIndex].ques[ansIndex].indexOf(
            option.optionsId
          ) != -1 &&
          this.questionList[bankIndex].ans[ansIndex].indexOf(
            option.optionsId
          ) == -1
        ) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },

    /**
     * 获取已经回答的题目数
     * hasSpecail (是否包含简答和案例)
     */
    questionOverNum(hasSpecail) {
      let count = 0;
      this.questionList.forEach((item) => {
        if (item.type == 1 || item.type == 2 || item.type == 3) {
          if (item.ques) {
            count++;
          }
        } else if (item.type == 4) {
          //案例题
          if (hasSpecail) {
            let isOver = item.jsonStr.every((jsonItem, index) => {
              if (
                jsonItem.type == 1 ||
                jsonItem.type == 2 ||
                jsonItem.type == 3
              ) {
                if (item.ques[index]) {
                  return true;
                } else {
                  return false;
                }
              } else if (jsonItem.type == 5) {
                if (
                  item.ques[index] &&
                  (item.ques[index].text || item.ques[index].imageList.length)
                ) {
                  return true;
                } else {
                  return false;
                }
              }
            });

            if (isOver) {
              count++;
              console.log(item, 444);
            }
          }
        } else if (item.type == 5) {
          //简答题
          if (hasSpecail) {
            if (item.ques && (item.ques.text || item.ques.imageList.length)) {
              console.log(5, item);
              count++;
            }
          }
        }
      });

      return count;
    },
    /**
     * 展开模块卷
     */
    openModule(Module) {
      Module.showList = !Module.showList;
      if (!Module.list.length) {
        this.getChapterList(Module);
      }
    },
    getChapterList(Module) {
      this.$request.chapterList(Module.id).then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          let item = res.data[i];
          item.id = item.chapterId;
          item.showList = false;
          item.list = [];
          item.menuType = 2;
        }
        Module.list = res.data;
      });
    },
    /**
     * 展开章卷
     */
    openChapter(chapter) {
      chapter.showList = !chapter.showList;

      if (!chapter.list.length) {
        this.getSectionList(chapter);
      }
    },

    lazyLoad(node, resolve) {
      const { level } = node;
      console.log(node);
      if (level == 0) {
      } else if (level == 1) {
        this.$request.getCityList({ parentId: node.value }).then((res) => {
          const nodes = res.rows.map((item) => ({
            value: item.areaId,
            label: `${item.areaName}`,
            leaf: level >= 1,
          }));
          resolve(nodes);
        });
      }
    },

    getSectionList(chapter) {
      this.$request.sectionList(chapter.id).then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          let item = res.data[i];
          item.id = item.sectionId;
          item.menuType = 3;
          //判断是否试听
          item.tryListen = false;
          if (this.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
            item.tryListen = true;
          }
        }
        chapter.list = res.data;
      });
    },
    selectClick(goodsDetail, type) {
      if (type == "class") {
        //选择班级
        if (!this.gradeList.length) {
          this.$request
            .goodsGradeList({ goodsId: goodsDetail.goodsId })
            .then((res) => {
              this.gradeList = res.rows;
              if (this.gradeList.length == 0) {
                let item = {
                  className: "系统分班",
                  gradeId: 0,
                };

                this.gradeList.push(item);
              }
            });
        }
      } else if (type == "apply") {
        //选择考试地点
      } else if (type == "exam") {
        //选择考期
        this.$request
          .getExamineList({ projectId: goodsDetail.projectId })
          .then((res) => {
            this.examineList = res.rows;
          });
      }
    },
    /**
     * 获取所有省份
     */
    getProvinceList() {
      this.$request.getProvinceList().then((res) => {
        this.provinceList = res.rows.map((item) => ({
          value: item.areaId,
          label: `${item.areaName}`,
          leaf: false,
        }));
      });
    },
    areaChange() {
      let node = this.$refs["cascader"].getCheckedNodes()[0]; //选中的根节点
      console.log(node);
      this.applyAreas = {
        areaName: node.parent.label,
        areaId: node.parent.value,
        cityId: node.value,
        cityName: node.label,
      };
    },
    buyNow() {
      if (this.$tools.isLogin()) {
        this.selectClassModal = true;
      } else {
        this.setCurrentRouter(this.$route);
        this.$router.push({
          path: "/login",
        });
      }
    },
    pay() {
      if (
        this.goodsDetail.templateType == "class" &&
        this.goodsDetail.goodsType == 1
      ) {
        if (!this.gradeId && this.gradeId !== 0) {
          this.$message({
            message: "请选择班级",
            type: "warning",
          });
          return;
        }
      }

      if (
        this.goodsDetail.templateType == "apply" &&
        this.goodsDetail.goodsType == 1
      ) {
        // if (!item.applyAreas.areaName) {
        // 	uni.showModal({
        // 		title: '提示',
        // 		content: '请选择报考地区',
        // 		showCancel: false
        // 	});
        // 	return false;
        // }
        if (!this.educationId) {
          this.$message({
            message: "请选择考期",
            type: "warning",
          });
          return false;
        }
      }

      let selectGoodsList = JSON.parse(JSON.stringify([this.goodsDetail]));
      selectGoodsList.forEach((item) => {
        if (item.goodsType == 1) {
          if (item.templateType == "class") {
            let goodsInputData = {
              type: "class",
              gradeId: this.gradeId,
              gradeJson: JSON.stringify(
                this.gradeList.find((grade) => grade.gradeId == this.gradeId)
              ),
            };
            item.goodsInputData = goodsInputData;
          }
          if (item.templateType == "apply") {
            let goodsInputData = {
              type: "apply",
              applyAreasJson: JSON.stringify(this.applyAreas),
              examDateJson: JSON.stringify(
                this.examineList.find(
                  (exam) => exam.educationId == this.educationId
                )
              ),
            };
            item.goodsInputData = goodsInputData;
          }
        }
      });

      this.setCheckGoodsList(selectGoodsList);

      this.$router.push({
        path: "/payment",
      });
    },
    addCart() {
      if (!this.$tools.isLogin()) {
        this.setCurrentRouter(this.$route);
        this.$router.push({
          path: "/login",
        });
        return;
      }
      this.$request
        .addCart({ goodsId: this.goodsId })
        .then((res) => {
          this.$message({
            message: "加入购物车成功",
            type: "success",
          });
        })
        .catch((err) => {
          if (err.code == 500) {
            this.$message({
              message: err.msg,
              type: "warning",
            });
          }
        });
    },
    /**
     * 获取商品详情
     */
    getGoodsDetail() {
      this.$request.commonGoodsDetail(this.goodsId).then((res) => {
        if (res.data.pcDetailHtml) {
          res.data.pcDetailHtml = res.data.pcDetailHtml.replace(
            /<img/gi,
            '<img style="max-width:100%;"'
          );
        }
        this.goodsDetail = res.data;
        this.goodsExamConfig = JSON.parse(res.data.goodsExamConfig);

        // this.courseBusiness();
        if (this.goodsDetail.goodsAuditionConfig) {
          this.listenConfigList = JSON.parse(
            this.goodsDetail.goodsAuditionConfig
          );
          for (var itemChild of this.listenConfigList) {
            this.goodsAuditionConfigIdList.push(itemChild.sectionId); //存储试听节ID
          }
        }
      });
    },
    /**
     * 是否是试做
     */
    isTest(id) {
      return this.goodsExamConfig.find((item) => item.examId == id);
    },
    /**
     * 获取课程章节列表
     */
    goodsCourseList() {
      this.$request.goodsCourseList(this.goodsId).then((res) => {
        res.rows.forEach((item) => {
          item.showList = false;
          item.list = [];
        });
        this.courseList = res.rows;
      });
    },
    collect() {
      this.$message({
        message: "试做题目，不支持收藏~",
        type: "warning",
      });
      return;
    },
    examSubmit() {
      this.$confirm("当前为试用做题不可交卷，购买题卷后方可交卷", "提示", {
        confirmButtonText: "继续作答",
        cancelButtonText: "返回详情",
        closeOnClickModal: false,
        closeOnPressEscape: false,
        distinguishCancelAndClose: false,
        showClose: false,
      })
        .then((_) => {})
        .catch((_) => {
          this.questionModalShow = false;
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.goods-detail {
  .section {
    &__header {
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0 20px;
    }

    &__body {
      .goods-info {
        &__header {
          width: 100%;
          height: 288px;
          background: #f5f7fa;
          border-radius: 10px;
          padding: 20px;
          display: flex;

          .img {
            width: 442px;
            height: 248px;
            border-radius: 10px;
            overflow: hidden;

            img {
              max-width: 100%;
              max-height: 100%;
              width: 100%;
              height: 100%;
            }
          }

          .text {
            flex: 1;
            margin-left: 24px;
            .title {
              font-size: 18px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
              line-height: 24px;
            }

            .desc {
              padding: 1px 5px;
              display: inline-block;
              border: 1px solid #333333;
              border-radius: 4px;
              font-size: 12px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
            }

            .price {
              margin-top: 10px;
              font-size: 24px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #ff2d55;
              line-height: 24px;
            }

            .btns {
              margin-top: 154px;
              display: flex;

              .buynow {
                cursor: pointer;
                margin-right: 16px;
                width: 160px;
                height: 40px;
                background: #3f8dfd;
                border-radius: 20px;
                text-align: center;
                line-height: 40px;
                color: #fff;
              }

              .add {
                cursor: pointer;
                width: 128px;
                height: 40px;
                background: #ffffff;
                border: 1px solid #3f8dfd;
                border-radius: 20px;
                text-align: center;
                line-height: 40px;
                color: #3f8dfd;
              }
            }
          }
        }

        &__body {
          /deep/ .el-tabs__item {
            padding: 0 20px !important;
            height: 80px;
            line-height: 80px;
          }

          .detail {
            img {
              max-width: 100% !important;
            }
          }

          .goods-img {
            width: 100%;
          }

          .goods-menu {
            margin-top: 15px;
            .left-box {
              width: 948px;
              float: left;

              &__body {
                .course-list-item {
                  margin-top: 24px;
                  padding: 16px;
                  background: #f5f7fa;
                  border-radius: 10px;
                  &__title {
                    font-size: 18px;
                    color: #333;
                    font-weight: bold;
                    cursor: pointer;
                  }

                  .item {
                    overflow: hidden;
                    background: #fff;
                    margin-top: 12px;
                    &__title {
                      padding: 10px 0;
                      cursor: pointer;
                      font-size: 16px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #333333;

                      .note {
                        display: inline-block;
                        margin-left: 20px;
                        width: 40px;
                        height: 24px;
                        border: 1px solid #ff3b30;
                        border-radius: 8px;
                        line-height: 22px;
                        color: #ff3b30;
                        text-align: center;
                      }
                    }

                    &__content {
                      background: #fff;

                      .bank-chapter {
                        margin-left: 4px;

                        &__item {
                          padding-top: 20px;
                          padding-bottom: 20px;
                          border-bottom: 1px solid #eeeeee;
                          font-size: 16px;

                          &__text {
                            cursor: pointer;
                            flex: 1;
                          }
                        }
                      }

                      .bank-section {
                        margin-left: 40px;

                        &__item {
                          padding-top: 20px;
                          padding-bottom: 20px;
                          border-bottom: 1px solid #eeeeee;
                          font-size: 16px;
                          display: flex;

                          &__text {
                            flex: 1;
                          }

                          .btn {
                            margin-right: 20px;
                            width: 40px;
                            height: 24px;
                            border: 1px solid #ff3b30;
                            border-radius: 8px;
                            line-height: 22px;
                            color: #ff3b30;
                            text-align: center;
                            cursor: pointer;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }

            .right-box {
              width: 323px;
              float: right;
              .title {
                margin-left: 10px;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                text-shadow: 0px 6px 6px rgba(85, 158, 255, 0.08);
                position: relative;

                .more {
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #999999;
                  position: absolute;
                  right: 10px;
                  top: 0;
                }
              }

              .list {
                .course-item {
                  margin: 110px 9px 0;
                  width: 300px;
                  height: 178px;
                  background: #ffffff;
                  box-shadow: 0px 10px 13px 3px rgba(63, 141, 253, 0.1);
                  border-radius: 10px;
                  position: relative;
                  background: #fff;
                  padding-top: 100px;

                  &__img {
                    width: 280px;
                    height: 178px;
                    background: #ffffff;
                    box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.08);
                    border-radius: 10px;
                    position: absolute;
                    left: 10px;
                    top: -78px;
                    background: rgba(122, 136, 246, 1);
                    overflow: hidden;

                    .note {
                      width: 80px;
                      height: 24px;
                      background: #d94404;
                      box-shadow: 0px 1px 1px 0px rgba(248, 78, 5, 0.4);
                      border-radius: 10px 0px 20px 0px;
                      text-align: center;
                      line-height: 24px;
                      color: #fff;
                    }
                  }

                  &__title {
                    margin: 0 8px;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #333333;
                    line-height: 24px;
                  }

                  &__desc {
                    height: 32px;
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin-left: 8px;
                    display: flex;
                    justify-content: space-between;

                    .price {
                      font-size: 18px;
                      font-family: Microsoft YaHei;
                      font-weight: bold;
                      color: #ff2d55;
                      line-height: 32px;
                    }

                    .add {
                      display: block;
                      width: 118px;
                      height: 32px;
                      line-height: 30px;
                      background: #f2f4f7;
                      border-radius: 10px 0px 10px 0px;
                      font-size: 16px;
                      color: #3f8dfd;
                      text-align: center;

                      &:hover {
                        background: #3f8dfd;
                        color: #f2f4f7;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    &__footer {
      .recommend {
        padding-top: 40px;

        &__header {
          display: flex;
          align-items: center;

          .title {
            font-size: 24px;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            color: #333333;
            text-shadow: 0px 6px 6px rgba(249, 113, 13, 0.08);
          }
        }

        &__body {
          .list {
            width: 100%;

            .recommend-item {
              float: left;
              margin: 100px 9px 0;
              width: 300px;
              height: 178px;
              background: #ffffff;
              box-shadow: 0px 10px 13px 3px rgba(63, 141, 253, 0.1);
              border-radius: 10px;
              position: relative;
              background: #fff;
              padding-top: 100px;

              &__img {
                width: 280px;
                height: 178px;
                background: #ffffff;
                box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.08);
                border-radius: 10px;
                position: absolute;
                left: 10px;
                top: -78px;
                background: rgba(122, 136, 246, 1);
                overflow: hidden;

                .note {
                  width: 80px;
                  height: 24px;
                  background: #d94404;
                  box-shadow: 0px 1px 1px 0px rgba(248, 78, 5, 0.4);
                  border-radius: 10px 0px 20px 0px;
                  text-align: center;
                  line-height: 24px;
                  color: #fff;
                }
              }

              &__title {
                margin: 0 8px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                line-height: 24px;
              }

              &__desc {
                height: 32px;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                margin-left: 8px;
                display: flex;
                justify-content: space-between;

                .price {
                  font-size: 18px;
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                  color: #ff2d55;
                  line-height: 32px;
                }

                .add {
                  display: block;
                  width: 118px;
                  height: 32px;
                  line-height: 30px;
                  background: #f2f4f7;
                  border-radius: 10px 0px 10px 0px;
                  font-size: 16px;
                  color: #3f8dfd;
                  text-align: center;

                  &:hover {
                    background: #3f8dfd;
                    color: #f2f4f7;
                  }
                }
              }
            }
          }
        }

        &__footer {
          overflow: hidden;
          .btn {
            cursor: pointer;
            width: 146px;
            height: 40px;
            background: #e3eaf7;
            border-radius: 8px;
            margin: 20px auto 40px;
            color: #3f8dfd;
            text-align: center;
            line-height: 40px;

            &:hover {
              color: #fff;
              box-shadow: 0px 8px 4px 0px rgba(7, 82, 208, 0.08);
              background: #3f8dfd;
            }
          }
        }
      }
    }
  }

  .question-modal {
    /deep/ .el-dialog__header {
      display: none;
    }
    /deep/ .el-dialog__body {
      padding: 0;
      overflow: unset;
    }

    &__close {
      position: absolute;
      right: 0;
      top: -28px;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      color: #eee;
      border: 1px solid #eee;
      border-radius: 50%;
    }

    &__content {
      width: 800px;
      height: 530px;
      position: relative;
      box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.04);
      border-radius: 8px;

      .left-box {
        float: left;
        width: 500px;
        border-right: 1px solid #eee;

        &__header {
          height: 40px;
          padding-left: 12px;
          border-bottom: 1px solid #eeeeee;
          display: flex;
          align-items: center;

          .progress {
            width: 200px;
          }

          .text {
            margin-left: 15px;
            font-size: 16px;
            span {
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #3f8dfd;
              line-height: 24px;
            }
          }
        }

        &__body {
          height: 450px;
          border-bottom: 1px solid #eee;

          .question {
            padding: 12px 0 0 12px;
            display: flex;
            flex-direction: column;
            height: 100%;

            &__title {
              padding-left: 12px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
              line-height: 24px;
            }

            &__desc {
              padding-left: 12px;
              margin-top: 20px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #666666;
              line-height: 24px;
            }

            &__content {
              flex: 1;
              overflow-y: scroll;

              &::-webkit-scrollbar {
                width: 6px;
              }
              &::-webkit-scrollbar-track {
                background-color: #fff;
                -webkit-border-radius: 2em;
                -moz-border-radius: 2em;
                border-radius: 2em;
              }
              &::-webkit-scrollbar-thumb {
                background-color: #eeeeee;
                -webkit-border-radius: 2em;
                -moz-border-radius: 2em;
                border-radius: 2em;
              }

              /deep/ .el-tabs__item {
                padding: 0 20px !important;
                height: 40px;
                line-height: 40px;
              }

              .question__content {
                height: auto;
                overflow: auto;
              }

              .question-list {
                padding: 24px 0 0 24px;
                .checkbox,
                .radio {
                  cursor: pointer;
                  margin-right: 24px;
                  padding: 0 24px;
                  display: flex;
                  align-items: center;
                  margin-top: 2px;
                  min-height: 40px;
                  padding-top: 10px;
                  padding-bottom: 10px;
                  background: #f5f9ff;
                  border-radius: 8px;
                  box-sizing: border-box;

                  &.right {
                    background: #37c65b;
                  }
                  &.wrong {
                    background: #ff3a30;
                  }
                }
                &.textarea {
                  margin-right: 12px;

                  .upload {
                    margin-top: 10px;

                    &__imgs {
                      margin-right: 10px;
                      width: 80px;
                      height: 80px;
                      background: #ffffff;
                      border: 1px solid #eeeeee;
                      border-radius: 4px;
                      position: relative;
                      display: flex;
                      float: left;
                      align-items: center;
                      justify-content: center;

                      img {
                        max-width: 100%;
                        max-height: 100%;
                      }
                    }
                    &__btn {
                      margin-right: 10px;
                      width: 80px;
                      height: 80px;
                      background: #ffffff;
                      border: 1px solid #eeeeee;
                      border-radius: 4px;
                      position: relative;
                      display: flex;
                      float: left;
                      align-items: center;
                      justify-content: center;
                      flex-direction: column;

                      .icon {
                        font-size: 20px;
                        color: #3f8dfd;
                      }

                      p {
                        font-size: 12px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #999999;
                        line-height: 24px;
                      }

                      input {
                        position: absolute;
                        left: 0;
                        top: 0;
                        display: block;
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                      }
                    }
                  }
                }

                /deep/ .el-checkbox {
                  white-space: pre-wrap;
                }
              }

              .answer-list {
                height: 40px;
                border-top: 1px solid #eee;
                border-bottom: 1px solid #eee;
                margin-top: 24px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 24px;

                &__left {
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #333333;
                  line-height: 24px;
                }

                &__right {
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #333333;
                  line-height: 24px;
                }
              }

              .explain-list {
                padding: 12px 24px;

                &__header {
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                  color: #666666;
                  line-height: 24px;
                }

                &__body {
                  margin-top: 12px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #666666;
                  line-height: 24px;
                }

                .upload {
                  margin-top: 10px;

                  &__imgs {
                    margin-right: 10px;
                    width: 80px;
                    height: 80px;
                    background: #ffffff;
                    border: 1px solid #eeeeee;
                    border-radius: 4px;
                    position: relative;
                    display: flex;
                    float: left;
                    align-items: center;
                    justify-content: center;

                    img {
                      max-width: 100%;
                      max-height: 100%;
                    }
                  }
                }
              }
            }

            &__btns {
              position: relative;
              height: 32px;
              .submit {
                cursor: pointer;
                margin: 0 auto;
                width: 140px;
                height: 32px;
                background: #3f8dfd;
                box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
                border-radius: 16px;
                text-align: center;
                line-height: 32px;
                color: #fff;
                font-size: 16px;
              }

              .collect {
                cursor: pointer;
                position: absolute;
                right: 0;
                top: 5px;
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #3f8dfd;
                line-height: 24px;
              }
            }
          }
        }

        &__footer {
          height: 40px;
          display: flex;
          justify-content: space-around;
          align-items: center;

          .btn {
            cursor: pointer;
            width: 140px;
            height: 32px;
            background: #ffffff;
            border: 1px solid #3f8dfd;
            border-radius: 16px;
            line-height: 32px;
            text-align: center;
            color: #3f8dfd;
          }
        }
      }

      .right-box {
        float: right;
        width: 300px;

        &__header {
          height: 40px;
          line-height: 40px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #333333;
          text-align: center;
          border-bottom: 1px solid #eeeeee;
        }

        &__body {
          height: 450px;
          border-bottom: 1px solid #eee;

          .card {
            &__note {
              display: flex;
              height: 40px;
              align-items: center;
              border-bottom: 1px solid #eee;

              .item {
                display: flex;
                align-items: center;
                margin-left: 10px;

                .box {
                  margin-right: 5px;
                  width: 16px;
                  height: 16px;
                  border-radius: 4px;

                  &.white {
                    background: #ffffff;
                    border: 1px solid #eeeeee;
                  }

                  &.green {
                    background: #37c65b;
                  }

                  &.red {
                    background: #ff3a30;
                  }

                  &.blue {
                    background: #3f8dfd;
                  }
                }
              }
            }

            &__content {
              height: 410px;
              overflow-y: scroll;

              &::-webkit-scrollbar {
                width: 6px;
              }
              &::-webkit-scrollbar-track {
                background-color: #fff;
                -webkit-border-radius: 2em;
                -moz-border-radius: 2em;
                border-radius: 2em;
              }
              &::-webkit-scrollbar-thumb {
                background-color: #eeeeee;
                -webkit-border-radius: 2em;
                -moz-border-radius: 2em;
                border-radius: 2em;
              }
              .list {
                display: flex;
                flex-wrap: wrap;

                .item {
                  width: 40px;
                  height: 40px;
                  border-radius: 10px;
                  text-align: center;
                  line-height: 40px;
                  margin-left: 16px;
                  margin-top: 16px;
                  cursor: pointer;

                  &.white {
                    line-height: 38px;
                    color: #333333;
                    background: #ffffff;
                    border: 1px solid #eeeeee;
                  }

                  &.green {
                    color: #fff;
                    background: #37c65b;
                  }

                  &.red {
                    color: #fff;
                    background: #ff3a30;
                  }

                  &.blue {
                    border: 1rpx solid #eeeeee;
                    color: #fff;
                    background: #3f8dfd;
                  }

                  &.disabled {
                    cursor: not-allowed;
                    line-height: 38px;
                    color: #eeeeee;
                    background: #ffffff;
                    border: 1px solid #eeeeee;
                  }
                }
              }
            }
          }
        }

        &__footer {
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;

          .submit {
            cursor: pointer;
            width: 140px;
            height: 32px;
            background: #3f8dfd;
            box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
            border-radius: 16px;
            line-height: 32px;
            text-align: center;
            color: #fff;
            font-size: 16px;
          }
        }
      }
    }
  }

  .video-modal {
    /deep/ .el-dialog__header {
      display: none;
    }
    /deep/ .el-dialog__body {
      padding: 0;
      overflow: unset;
    }

    &__close {
      position: absolute;
      right: 0;
      top: -28px;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      color: #eee;
      border: 1px solid #eee;
      border-radius: 50%;
    }

    &__header {
      height: 40px;
      border-bottom: 1px solid #eee;
      line-height: 40px;
      color: #ff3b30;
      padding-left: 24px;
    }

    &__body {
      width: 100%;
      position: relative;
      box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.04);
      border-radius: 8px;
      .video {
        &__title {
          padding-left: 24px;
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
        }

        &__wrap {
          height: 450px;
          video {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .select-class {
    &__content {
      .selection {
        .el-select {
          width: 100%;
        }
      }
    }
  }
}
</style>