<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"></div>
                <div class="text">
                  <div class="title">
                    {{ goodsDetail.goodsName }}
                  </div>
                  <div class="notes">
                    <div class="note">
                      共
                      {{ courseList.length }}科
                    </div>
                    <div class="note">{{ goodsDetail.classHours }} 学时</div>
                  </div>
                  <div class="price" v-if="goodsDetail.standPrice">
                    ${{ goodsDetail.standPrice | toFixed }}
                  </div>
                  <div class="btns">
                    <div class="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 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__header">
                          <swiper
                            ref="mySwiper"
                            @slideChangeTransitionStart="
                              slideChangeTransitionStart($event)
                            "
                            class=""
                            v-bind:options="swiperOptions"
                          >
                            <swiper-slide class="item canlearn">
                              可试看课程名称
                            </swiper-slide>
                            <swiper-slide
                              class="item"
                              v-for="(item, index) in 5"
                              v-bind:key="index"
                            >
                              不可试看课程名称
                            </swiper-slide>
                          </swiper>
                          <!-- <div
                            class="swiper-button-prev"
                            slot="button-prev"
                          ></div> -->
                          <div
                            class="swiper-button-next"
                            slot="button-next"
                          ></div>
                        </div>
                        <div class="left-box__body">
                          <div
                            class="item"
                            v-for="(item, index) in 4"
                            :key="index"
                          >
                            <div class="item__title">
                              这是课程的第一个模块标题

                              <a class="note" @click="videoModalShow = true"
                                >试看</a
                              >
                            </div>
                            <div class="item__content">
                              <el-tree
                                class="tree"
                                :highlight-current="false"
                                :data="data"
                                :props="defaultProps"
                                @node-click="handleNodeClick"
                              ></el-tree>
                            </div>
                          </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">学员须知</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="question-modal"
      :visible.sync="questionModalShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="question-modal__content">
        <a class="question-modal__close" @click="questionModalShow = false"
          >X</a
        >
        <div class="left-box">
          <div class="left-box__header">
            <el-progress
              class="progress"
              :text-inside="true"
              :stroke-width="26"
              :percentage="70"
            ></el-progress>
            <div class="text">已完成<span>30</span>/60道题</div>
          </div>
          <div class="left-box__body">
            <div class="question">
              <div class="question__title">4、多选题</div>
              <div class="question__desc">
                建造师职业资格注册的有效期一般为（ ）年。
              </div>
              <div class="question__content">
                <el-checkbox
                  class="checkbox"
                  v-for="(item, index) in 20"
                  :key="index"
                  v-model="checked"
                >
                  <div>备选项</div>
                </el-checkbox>
              </div>
              <div class="question__btns">
                <div class="submit">确认答案</div>
                <div class="collect">收藏本题</div>
              </div>
            </div>

            <div class="question" v-if="false">
              <div class="question__title">4、单选题</div>
              <div class="question__desc">
                建造师职业资格注册的有效期一般为（ ）年。
              </div>
              <div class="question__content">
                <el-radio
                  class="radio"
                  v-for="(item, index) in 4"
                  :key="index"
                  v-model="checked"
                >
                  <div>备选项</div>
                </el-radio>
              </div>
              <div class="question__btns">
                <div class="submit">确认答案</div>
                <div class="collect">收藏本题</div>
              </div>
            </div>

            <div class="question" v-if="false">
              <div class="question__title">4、判断题</div>
              <div class="question__desc">
                建造师职业资格注册的有效期一般为（ ）年。
              </div>
              <div class="question__content">
                <el-radio
                  class="radio"
                  v-for="(item, index) in 4"
                  :key="index"
                  v-model="checked"
                >
                  <div>备选项</div>
                </el-radio>
              </div>
              <div class="question__btns">
                <div class="submit">确认答案</div>
                <div class="collect">收藏本题</div>
              </div>
            </div>

            <div class="question" v-if="false">
              <div class="question__title">4、简答题</div>
              <div class="question__desc">
                建造师职业资格注册的有效期一般为（ ）年。
              </div>
              <div class="question__content">
                <el-input
                  type="textarea"
                  rows="10"
                  v-model="textarea"
                ></el-input>
              </div>
              <div class="question__btns">
                <div class="submit">确认答案</div>
                <div class="collect">收藏本题</div>
              </div>
            </div>
          </div>

          <div class="left-box__footer">
            <div class="btn">上一题</div>
            <div class="btn">下一题</div>
          </div>
        </div>
        <div class="right-box">
          <div class="right-box__header">答题卡</div>
          <div class="right-box__body">
            <div class="card">
              <div class="card__note">
                <div class="item">
                  <div class="box green"></div>
                  正确
                </div>
                <div class="item">
                  <div class="box red"></div>
                  错误
                </div>
                <div class="item">
                  <div class="box blue"></div>
                  已做未评改
                </div>
                <div class="item">
                  <div class="box white"></div>
                  未做
                </div>
              </div>
              <div class="card__content">
                <ul class="list">
                  <li class="item blue">1</li>
                  <li class="item green">2</li>
                  <li class="item red">3</li>
                  <li class="item white">4</li>
                  <li
                    class="item disabled"
                    v-for="(item, index) in 40"
                    :key="index"
                  >
                    {{ item }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="right-box__footer">
            <div class="submit" @click="examSubmit">交卷</div>
          </div>
        </div>
      </div>
    </el-dialog>

    <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">
              <video
                src="https://www.w3school.com.cn/i/movie.mp4"
                controls
              ></video>
            </div>
          </div>
        </div>
      </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 { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
export default {
  name: "GoodsDetail",
  components: {
    swiper,
    swiperSlide,
    Footer,
    Header,
    ToolBar,
  },
  data() {
    return {
      goodsDetail: {},
      courseList: [],
      goodsId: "",
      checked: false,
      textarea: "",
      questionModalShow: false,
      videoModalShow: false,
      activeName: "1",
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      swiperOptions: {
        slidesPerView: "auto",
        speed: 300,
        freeMode: {
          freeMode: true,
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
        },
      },
    };
  },
  mounted() {
    this.goodsId = this.$route.params.goodsId;
    this.getGoodsDetail();
    this.getGoodsCourseList();
  },
  methods: {
    addCart() {},
    /**
     * 获取商品详情
     */
    getGoodsDetail() {
      this.$request.commonGoodsDetail(this.goodsId).then((res) => {
        this.goodsDetail = res.data;
      });
    },
    /**
     * 获取课程列表
     */
    getGoodsCourseList() {
      this.$request.goodsCourseList(this.goodsId).then((res) => {
        this.courseList = res.rows;
        console.log(res);
      });
    },
    handleNodeClick(data) {
      console.log(data);
    },
    examSubmit() {
      this.$confirm("当前为试用做题不可交卷，购买题卷后方可交卷", "提示", {
        confirmButtonText: "继续作答",
        cancelButtonText: "返回详情",
      })
        .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;
            background: #ff9500;
            border-radius: 10px;
          }

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

            .notes {
              margin-top: 10px;
              .note {
                display: inline-block;
                padding: 2px 5px;
                border: 1px solid #333333;
                border-radius: 4px;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #333333;
                margin-right: 15px;
              }
            }

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

            .btns {
              margin-top: 100px;
              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;
          }

          .goods-img {
            width: 100%;
          }

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

              &__header {
                padding-right: 50px;
                position: relative;
                .item {
                  width: auto;
                  margin-right: 24px;
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #333333;
                  background: #eeeeee;
                  border-radius: 8px;
                  padding: 12px;
                  position: relative;

                  &.canlearn {
                    background: #3f8dfd;
                    color: #fff;
                  }
                }
              }

              &__body {
                .item {
                  margin-top: 24px;
                  padding: 16px;
                  background: #eee;
                  border-radius: 10px;

                  &__title {
                    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 {
                    margin-top: 12px;
                    background: #f5f7fa;

                    /deep/.el-tree-node:focus > .el-tree-node__content {
                      background: none;
                    }

                    /deep/ .el-tree-node:focus {
                      background: none;
                    }
                    /deep/ .el-tree-node:hover {
                      background: none;
                    }

                    /deep/ .el-tree-node__content:hover {
                      background: none;
                    }

                    /deep/ .el-tree-node__content:focus {
                      background: none;
                    }

                    /deep/ .el-tree-node__content {
                      padding-top: 20px;
                      padding-bottom: 20px;
                      border-bottom: 1px solid #eeeeee;
                      height: auto;
                    }
                  }
                }
              }
            }

            .right-box {
              width: 323px;
              float: right;
              .title {
                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: 0;
                  top: 10px;
                }
              }

              .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;

            &__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 {
              height: 340px;
              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;
              }

              .checkbox,
              .radio {
                margin-right: 12px;
                padding: 0 12px;
                display: flex;
                align-items: center;
                margin-top: 2px;
                height: 40px;
                background: #f5f9ff;
                border-radius: 8px;
              }

              .textarea {
                margin-right: 12px;
                height: 100%;
              }
            }

            &__btns {
              position: relative;
              .submit {
                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 {
                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 {
            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;

                  &.green {
                    background: #37c65b;
                  }

                  &.red {
                    background: #ff3a30;
                  }

                  &.blue {
                    background: #3f8dfd;
                  }

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

            &__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;

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

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

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

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

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

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

          .submit {
            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%;
          }
        }
      }
    }
  }
}
</style>
