<template>
  <CommonHeader />
  <div class="allPageWidthBg movPage">
    <div class="withShadow">
      <div class="likeBread">
        <div class="likeBread_left">{{ sourceDetailData.kf_name }}</div>
        <div class="likeBread_right">
          <span>课程资源</span>- <span>查看详情</span>-
          <span>{{ sourceDetailData.kf_name }}</span>
        </div>
      </div>
    </div>
    <div class="common1280 vedioMain">
      <div class="vedio_titel">
        <div class="vedio_titel_left">{{ sourceDetailData.kf_name }}</div>
        <div class="vedio_titel_right" @mouseenter="showTrue" @mouseleave="showFalse">
          <img src="../assets/kczy/shareIcon.png" alt="" /> 分享
          <div class="qrcodeAll" v-if="shareSwitch">
            <p class="bigTit">呼唤小伙伴们前来围观吧</p>
            <div class="shareCover">
              <div class="sinaShare" @click="sinaWeiBo">
                <img src="../assets/zbktwlzb/weibo.png" alt="" />
              </div>
              <div class="QQShare" @click="shareQQ">
                <img src="../assets/zbktwlzb/QQ.png" alt="" />
              </div>
              <div class="zoneShare" @click="qZone">
                <img src="../assets/zbktwlzb/QQzone.png" alt="" />
              </div>
              <div class="wechatShare">
                <div class="mainInQR">
                  <qrcode-vue :value="shareLink" :size="size" level="H" />
                </div>
                <p class="textS">微信扫码分享</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="vedioMainContent">
        <div class="vedioMainContent_left">
          <div class="vedioMainContent_left_top">
            <div class="nicBaseInfo_avator">
              <el-avatar :src="userInfoData.user_avatar" v-if="userInfoData.user_avatar" />
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" v-else />
            </div>
            <div class="nicBaseInfo_text">
              <div class="nicBaseInfo_text_top" style="height: 50%">
                <span class="fir">{{ userInfoData.user_name }}</span>
                <span class="middle"><img src="../assets/kczy/fireIcon.png" alt="" /></span>
                <span class="sec" v-if="userInfoData.ext">{{
                userInfoData.ext.ue_hot
                }}</span>
              </div>
              <div class="nicBaseInfo_text_bottom" style="height: 50%">
                <span class="markLableOne">金牌讲师</span>
                <span class="markLableTwo">YYDS</span>
              </div>
            </div>
            <div class="nicBaseInfo_action">
              <div class="coverC" @click="finger">
                <img class="posiA posi1" v-if="fingerSwitch == '0'" src="../assets/kczy/zanIcon.png" />
                <img class="posiA posi1" v-else src="../assets/kczy/zanIcon_full.png" />
                <span class="posiA posi2">{{ fingerNum }}</span>
              </div>
              <div class="coverC" @click="loveIcon">
                <img class="posiA posi3" v-if="loveSwitch == '0'" src="../assets/kczy/collectIcon.png" />
                <img class="posiA posi3" v-else src="../assets/kczy/collectIcon_full.png" />
                <span class="posiA posi4">{{ loveNum }}</span>
              </div>
            </div>
            <div class="nicBaseInfo_forceBtn" v-show="false">
              <span>关注</span>
            </div>
          </div>
          <div class="vedioMainContent_left_bottom" v-if="transIconType == 'mp4'">
            <video ref="urlResouce" controls :src="sourceDetailData.kf_path">
              <!-- <source :src="sourceDetailData.kf_path" type="video/ogg" /> -->
            </video>
            <!-- <div class="assi">助教：沈老师</div> -->
            <div class="watchingNum">
              浏览量：{{ sourceDetailData.kf_view_num }}
            </div>
          </div>

          <div class="vedioMainContent_left_bottom" v-else>
            <audio ref="urlResouce" controls :src="sourceDetailData.kf_path">
              <!-- <source :src="prefixImg+sourceDetailData.kf_path" type="audio/mp3"> -->
            </audio>
            <!-- <div class="assi">助教：沈老师</div> -->
            <div class="watchingNum">
              浏览量：{{ sourceDetailData.kf_view_num }}
            </div>
          </div>
        </div>
        <div class="vedioMainContent_right">
          <div class="vedioMainContent_right_top" v-show="false">
            <div class="titleChapter">
              <span class="titleBorder-title">相关章节</span>
              <span class="titleBorder-line"></span>
            </div>
            <div class="detailChapter">
              <ul>
                <li>02 课时 行程问题</li>
                <li>03 课时 过桥问题</li>
                <li>04 课时 流水问题</li>
                <li>05 课时 行程问题</li>
              </ul>
            </div>
          </div>
          <div class="vedioMainContent_right_bottom">
            <div class="tabTitle">
              <ul>
                <li :class="{'activein': num==index}" v-for="(item,index) in sliderTab" :key="index" @click="handleSwitch(index)">
                  <p>{{item}}</p>
                  <span></span>
                </li>
              </ul>
            </div>
            <div class="comList" v-show="num==0">
              <div>
                <el-rate v-model="starsValue" :texts="['极差', '失望', '普通', '优秀', '惊艳']" show-text />
              </div>
              <div class="rateBtn" @click="evalua()"><button>评价</button></div>
              <div class="allCommonList" v-if="evaluaListData && evaluaListData.length > 0">
                <div class="singleList" v-for="(item, index) in evaluaListData" :key="index">
                  <p class="item1">
                    {{ item.ke_user_realname
                    }}<span class="itemSon1">{{ item.create_dateline }}</span>
                  </p>
                  <div class="starListS">
                    <img src="../assets/kczy/stars.png" v-for="(itemsec, index) in Number(item.ke_star)" :key="index"
                      alt="" />
                  </div>
                </div>
              </div>

              <div class="NOdata" style="padding-top: 40%" v-else>
                <img src="../assets/kczy/noData4.png" alt="" />
                <p class="NOdata_p">暂无数据~</p>
              </div>
            </div>
            <div class="comList" v-show="num==1">
              <div class="allCommonList allCommonListSec">
                <div class="singleList" v-for="(item, index) in sourceData" :key="index">
                  <p class="item1">
                    上传者
                    <span class="itemSon1">{{ item.create_dateline }}</span>
                  </p>
                  <div class="fileAll">
                    <div class="fileAll_left">
                      <img :src="'../assets/kczy/'+item.kf_ext+'.png'" alt="" />
                    </div>
                    <div class="fileAll_middle">{{item.kf_name}}</div>
                    <div class="fileAll_right" @click="downloadFile(item)">下载</div>
                  </div>
                </div>
              </div>  

            </div>
            <div class="comList" v-show="num==2">
              <div class="allCommonList allCommonListSec">
                <div class="singleList" v-for="(item, index) in homeWorkList" :key="index">
                  <div class="fileAll">
                      <div class="fileAll_middle">{{item.yzk_name}}</div>
                      <div class="fileAll_right" @click="diglogaAnswer(item)">答题</div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- dialog  -->
    <el-dialog v-model="dialogVisible" title="" width="50%" center>
      <div class="dialogSTY">
        <h4 >{{dialogT}}</h4>
        <div>
          <div class="singleOption" v-for="(item,index) in singleAnswer" :key="index">
            <div class="titleShow">{{item.problem}}
              <span v-if="item.problemType==0">【单选题】</span>
              <span v-else-if="item.problemType==1">【多选题】</span>
              <span v-else>【判断题】</span>
            </div>
            <div class="answerOption" v-if="item.problemType==0">
              <el-radio-group v-model="form.v1">
                <el-radio :label="item" v-for="(item,index) in item.options" :key="index" />
              </el-radio-group>
            </div>
            <div class="answerOption" v-else-if="item.problemType==1">
              <el-checkbox-group v-model="form.v1">
                <el-checkbox name="type" :label="item" v-for="(item,index) in item.options" :key="index" />
              </el-checkbox-group>
            </div>
            <div class="answerOption" v-else>
              <el-radio-group v-model="form.v1">
                <el-radio :label="item" v-for="(item,index) in item.options" :key="index" />
              </el-radio-group>
            </div>
            <div class="chartsShow">
              <div class="normalT">全市作答正确率：</div>
              <div class="circleMap">
                <el-progress type="circle" :percentage="54" :stroke-width="10" :width="73" :height="73" :color="colors" />
              </div>
            </div>
          </div>
          
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer" align="center">
          <el-button @click="dialogVisible = false">提交</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >取消</el-button
          >
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import CommonHeader from "@/components/CommonHeader/index.vue";
import { _debounce, _throttle } from "../utils/throttleWithDebounce";
import {
  courseSourceDetail,
  evaluaList,
  evaluaAdd,
  likeApi_add,
  likeApi_del,
  collectApi_add,
  collectApi_del,
  userInfoDetail,
  sourceList,
  homeWorkList
} from "./kczy/allApi.js";
import { user } from "@/store/user.js";
import QrcodeVue from "qrcode.vue";
export default {
  name: "moviePage",
  components: {
    CommonHeader,
    QrcodeVue,
  },
  data() {
    return {
      starsValue: "",
      transIconType: "",
      transKfId:'',
      transKfId: "",
      sourceDetailData: "",
      typeKind: "",
      prefixImg: "https://tyyxopenapi.bozedu.top/",
      evaluaListData: [],
      userInfoData: "",
      shareLink: "",
      shareSwitch: false,
      transKkId:'',
      fingerNum: 0, //点赞数
      fingerSwitch: 0, //0：关 1：开
      loveNum: 0, //关注
      loveSwitch: 0, //0：关 1：开
      sliderTab: [
        '评价', '资源','作业'
      ],
      num:0,
      dialogVisible: false,
      form:{
        v1: '',
        v2:[],
      },
      sourceData: [],
      homeWorkList: [],
      dialogT:'',
      singleAnswer:'',
      colors:[
        { color: '#4BBC88', percentage: 20 },
        { color: '#4BBC88', percentage: 40 },
        { color: '#4BBC88', percentage: 60 },
        { color: '#4BBC88', percentage: 80 },
        { color: '#4BBC88', percentage: 100 },
      ],
    };
  },

  mounted() {
    this.initData();
    this.initEvaluaList();
    this.initUserInfoDetail();
  },
  methods: {
    /**初始化数据*/
    initData() {
      this.transIconType = this.$route.query.icon;
      this.transKfId = this.$route.query.kfId;
      this.transKkId = this.$route.query.kkID;
      let transObj = {
        token: user.token,
        kf_id: this.transKfId,
      };
      courseSourceDetail(transObj)
        .then((res) => {
          if (res.code == "1") {
            this.sourceDetailData = res.data.one_info;
            let tempD = res.data.one_info.kf_path;
            this.typeKind = tempD.substr(tempD.lastIndexOf(".") + 1);
            this.$refs.urlResouce.src = res.data.one_info.kf_path;

            this.fingerNum = res.data.one_info.kf_like_num; //点赞数
            this.fingerSwitch = res.data.one_info.is_like; //0：关 1：开
            this.loveNum = res.data.one_info.kf_fav_num; //关注
            this.loveSwitch = res.data.one_info.is_fav; //0：关 1：开
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    /**初始化评论*/
    initEvaluaList() {
      let transObj = {
        token: user.token,
        kf_id: this.transKfId,
      };
      evaluaList(transObj)
        .then((res) => {
          if (res.code == "1") {
            this.evaluaListData = res.data.page_data;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    /**课程用户信息*/
    initUserInfoDetail() {
      let transObj = {
        token: user.token,
        user_id: user.user_id,
      };
      userInfoDetail(transObj)
        .then((res) => {
          if (res.code == "1") {
            this.userInfoData = res.data;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    /**初始化资源列表*/
    initSourceList() {
      let transObj = {
        token: user.token,
        kk_id: this.transKkId
      };
      sourceList(transObj)
        .then(res => {
          if (res.code == '1') {
            this.sourceData = res.data.page_data;

          }
          console.log(res,"00")
        })
        .catch(error => { console.log(error) })
    },
    /**初始化作业列表*/
    initHomeworkList() {
      let transObj = {
        limit: 20,
        yzk_ids:this.transKkId
      }
      homeWorkList(transObj)
        .then(res => {
          if (res.code == 1) {
            this.homeWorkList = res.data.page_data;
          }
      })
      .catch(error=>{console.log(console.log(error))})
    },
    /**切换*/
    handleSwitch(index) {
      this.num = index;
      switch (index) {
        case 0:
          this.initEvaluaList();
        break;
        case 1:
          this.initSourceList();
          break;
        case 2:
          this.initHomeworkList();
        break;
      }
    },
    /**作业-答题*/
    diglogaAnswer(item) {
      this.dialogVisible = true;
      this.dialogT = item.yzk_name;
      this.singleAnswer = JSON.parse(item.yzk_content_json);
      console.log(JSON.parse(item.yzk_content_json))
    },
    /**资源-下载*/
    downloadFile(item) {
      let downFileUrl =item.kf_path;
        window.open(downFileUrl);
    },
    /**评价*/
    evalua() {
      let prefiexOBJ = {
        ke_star: this.starsValue,
        ke_user_realname: user.user_realname,
        kk_id: this.transKkId,
        kf_id: this.transKfId,
      };
      let transObj = {
        token: user.token,
        kczy_evaluate: prefiexOBJ,
      };
      evaluaAdd(transObj)
        .then((res) => {
          if (res.code == "1") {
            ElMessage({
              message: res.msg,
              type: "success",
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    /**增加赞或取消*/
    finger() {
      if (this.fingerSwitch == "1") {
        //去掉赞
        let transObj = {
          kf_id: this.transKfId,
        };
        likeApi_del(transObj)
          .then((res) => {
            if (res.code == "1") {
              ElMessage({
                message: res.msg,
                type: "success",
              });
            } else {
              ElMessage({
                message: res.msg,
                type: "waring",
              });
            }
          })
          .catch((error) => {
            console.log(error);
          });
      } else {
        let transObj = {
          kczy_files_like: {
            kf_id: this.transKfId,
            kt_id: this.transKkId,
          },
        };
        likeApi_add(transObj)
          .then((res) => {
            if (res.code == "1") {
              ElMessage({
                message: res.msg,
                type: "success",
              });
            } else {
              ElMessage({
                message: res.msg,
                type: "waring",
              });
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
      this.initData();
    },
    /**增加收藏或取消*/
    loveIcon() {
      if (this.loveSwitch == 1) {
        //去掉收藏
        let transObj = {
          kf_id: this.transKfId,
        };
        collectApi_del(transObj)
          .then((res) => {
            console.log(res);
          })
          .catch((error) => {
            console.log(error);
          });
      } else {
        let transObj = {
          kczy_files_fav: {
            kf_id: this.transKfId,
            kt_id: this.transKkId,
          },
        };
        collectApi_add(transObj)
          .then((res) => {
            if (res.code == "1") {
              ElMessage({
                message: res.msg,
                type: "success",
              });
            } else {
              ElMessage({
                message: res.msg,
                type: "waring",
              });
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
      this.initData();
    },
    /**创建二维码*/
    showTrue() {
      this.shareSwitch = true;
      //地址栏参数
      this.shareLink = window.location.href;
    },
    showFalse() {
      this.shareSwitch = false;
    },
    //分享大全
    shareQQ(title, url, pic) {
      var p = {
        url: this.shareLink /*获取URL，可加上来自分享到QQ标识，方便统计*/,
        desc: "来自桐乡艺校的分享" /*分享理由(风格应模拟用户对话),支持多分享语随机展现（使用|分隔）*/,
        title: "优质课程一起围观~" /*分享标题(可选)*/,
        summary: "优质课程一起围观~" /*分享描述(可选)*/,
        pics: pic /*分享图片(可选)*/,
        flash: "" /*视频地址(可选)*/,
        //commonClient : true, /*客户端嵌入标志*/
        site: "桐乡艺校" /*分享来源 (可选) ，如：QQ分享*/,
      };
      var s = [];
      for (var i in p) {
        s.push(i + "=" + encodeURIComponent(p[i] || ""));
      }
      var target_url =
        "http://connect.qq.com/widget/shareqq/iframe_index.html?" + s.join("&");
      window.open(target_url, "qq", "height=520, width=720");
    },
    qZone(title, pic) {
      var p = {
        url: this.shareLink,
        showcount: "1" /*是否显示分享总数,显示：'1'，不显示：'0' */,
        desc: "这篇文章不错,分享一下~~" /*默认分享理由(可选)*/,
        summary: "" /*分享摘要(可选)*/,
        title: "优质课程一起围观~" /*分享标题(可选)*/,
        site: "桐乡艺校" /*分享来源 如：腾讯网(可选)summary*/,
        pics: pic /*分享图片的路径(可选)*/,
        style: "101",
        width: 199,
        height: 30,
      };
      var s = [];
      for (var i in p) {
        s.push(i + "=" + encodeURIComponent(p[i] || ""));
      }
      var target_url =
        "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?" +
        s.join("&");
      window.open(target_url, "qZone", "height=430, width=400");
    },
    weixin() {
      var target_url =
        "http://qr.liantu.com/api.php?text=http://test.qicheyitiao.com";
      window.open(target_url, "weixin", "height=320, width=320");
    },
    sinaWeiBo(title, url, pic) {
      var param = {
        url: this.shareLink,
        type: "3",
        count: "1" /** 是否显示分享数，1显示(可选)*/,
        appkey: "桐乡艺校" /** 您申请的应用appkey,显示分享来源(可选)*/,
        title:
          "优质课程一起围观~" /** 分享的文字内容(可选，默认为所在页面的title)*/,
        pic: pic,
        /**分享图片的路径(可选)*/
        ralateUid: "",
        /**关联用户的UID，分享微博会@该用户(可选)*/ rnd: new Date().valueOf(),
      };
      var temp = [];
      for (var p in param) {
        temp.push(p + "=" + encodeURIComponent(param[p] || ""));
      }
      var target_url =
        "http://service.weibo.com/share/share.php?" + temp.join("&");
      window.open(target_url, "sinaweibo", "height=430, width=400");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../styles/common_resource.scss";
.vedio_titel {
  display: flex;
  height: 40px;
  line-height: 40px;

  .vedio_titel_left {
    font-size: 20px;
    font-weight: 800;
    text-align: left;
    color: #000000;
  }

  .vedio_titel_right {
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    color: #00a3ff;
    margin-left: 20px;
    position: relative;

    img {
      display: inline-block !important;
      width: 16px;
    }

    .qrcodeAll {
      position: absolute;
      left: 10px;
      top: 32px;
      z-index: 14;
      width: 408px;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 10px;
      background-color: rgb(255, 255, 255);

      .bigTit {
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        color: #000000;
        margin-bottom: 20px;
      }

      .shareCover {
        display: flex;

        .sinaShare,
        .QQShare,
        .zoneShare {
          width: 20%;
          height: 115px;
          line-height: 115px;
          text-align: center;
          cursor: pointer;

          img {
            width: 50%;
          }
        }

        .wechatShare {
          width: 40%;
          text-align: center;
          cursor: pointer;

          .mainInQR {
            height: 100px;
          }

          .textS {
            font-size: 14px;
            font-weight: 400;
            text-align: center;
            color: #000000;
          }
        }
      }
    }
  }
}
.vedioMainContent {
  display: flex;
  justify-content: space-between;

  .vedioMainContent_left {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .vedioMainContent_left_top {
      display: flex;
      height: 100px;
      background: #ffffff;
      border-radius: 10px;
      box-shadow: 2px 10px 24px 0px rgba(161, 153, 168, 0.18);
      margin-bottom: 10px;
      justify-content: space-between;

      .nicBaseInfo_avator {
        width: 10%;
        line-height: 100px;
        position: relative;

        span {
          width: 77px;
          height: 77px;
          border-radius: 50%;
          display: inline-block;
          background-color: #cacaca;
          position: absolute;
          left: 50%;
          top: 50%;
          z-index: 13;
          transform: translate(-50%, -50%);
        }
      }

      .nicBaseInfo_text {
        width: 50%;

        .nicBaseInfo_text_top {
          line-height: 70px;
          display: flex;

          span.middle {
            display: inline-block;
            margin-left: 10px;
            margin-right: 3px;
            box-sizing: border-box;
            padding-top: 4%;

            img {
              width: 19px;
              height: 22px;
            }
          }

          span.fir {
            font-size: 16px;
            font-weight: 800;
            text-align: left;
            color: #000000;
          }

          span.sec {
            font-size: 14px;
            font-weight: 400;
            text-align: left;
            color: #949494;
            background: url("../assets/images/kczy/fireIcon1.png");
            background-size: 100% 100%;
          }
        }

        .nicBaseInfo_text_bottom {
          line-height: 30px;

          .markLableOne {
            background: #190006;
            border: 1px solid #f1c342;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 400;
            text-align: center;
            color: #ffffff;
            padding: 5px 8px;
            margin-right: 10px;
          }

          .markLableTwo {
            background: linear-gradient(90deg, #00a3ff 1%, #57c38f);
            border-radius: 12px;
            font-size: 12px;
            font-weight: 400;
            text-align: center;
            color: #ffffff;
            padding: 5px 8px;
          }
        }
      }

      .nicBaseInfo_action {
        width: 30%;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        color: #00a3ff;
        position: relative;

        .coverC {
          cursor: pointer;
        }

        .posiA {
          position: absolute;
          z-index: 12;
        }

        .posi1 {
          left: 0px;
          top: 50%;
          transform: translate(0, -50%);
        }

        .posi2 {
          margin: 0 2px;
          left: 10%;
          top: 50%;
          transform: translate(0, -50%);
        }

        .posi3 {
          left: 33%;
          top: 50%;
          transform: translate(0, -50%);
        }

        .posi4 {
          margin: 0 2px;
          left: 43%;
          top: 50%;
          transform: translate(0, -50%);
        }

        .zan {
          background: url("../assets/kczy/zanIcon.png") no-repeat left center;
          background-size: 21px 20px;
          box-sizing: border-box;
          padding: 3px 0 3px 25px;
          cursor: pointer;
        }

        .collect {
          background: url("../assets/kczy/collectIcon.png") no-repeat left center;
          background-size: 21px 20px;
          box-sizing: border-box;
          padding: 3px 0 3px 25px;
          margin-left: 30px;
          cursor: pointer;
        }
      }

      .nicBaseInfo_forceBtn {
        width: 10%;
        text-align: left;
        line-height: 100px;

        span {
          font-size: 16px;
          font-weight: 400;
          text-align: center;
          color: #ffffff;
          background: rgba(0, 131, 197, 0.8);
          border-radius: 6px;
          padding: 7px 20px;
          cursor: pointer;
        }
      }
    }

    .vedioMainContent_left_bottom {
      height: 504px;
      background: #cee5fb;
      border-radius: 10px;
      overflow: hidden;
      position: relative;

      video {
        width: 100%;
        height: 100%;
      }

      audio {
        width: 100%;
        height: 100%;
      }

      .assi {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 13;
        width: 176px;
        height: 48px;
        line-height: 48px;
        background: #ffffff;
        border-bottom-right-radius: 10px;
        font-size: 16px;
        font-weight: 400;
        text-align: center;
        color: #00a3ff;
      }

      .watchingNum {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 13;
        width: 190px;
        height: 38px;
        line-height: 38px;
        background-color: rgba(255, 255, 255, 0.5);
        border-bottom-left-radius: 10px;
        width: 166px;
        font-size: 16px;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
      }
    }
  }

  .vedioMainContent_right {
    width: 28%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .vedioMainContent_right_top {
      width: 100%;
      height: 459px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 2px 10px 24px 0px rgba(161, 153, 168, 0.18);
      box-sizing: border-box;
      padding: 33px 18px;

      .titleChapter {
        width: 100%;
        height: 50px;
        position: relative;

        .titleBorder-title {
          font-size: 16px;
          font-weight: 500;
          text-align: left;
          color: #222222;
          position: absolute;
          left: 5px;
          top: 13%;
          z-index: 14;
        }

        .titleBorder-line {
          width: 72px;
          height: 6px;
          opacity: 0.2;
          background: #6c5dd3;
          border-radius: 3px;
          position: absolute;
          left: 0;
          top: 42%;
          z-index: 13;
        }
      }

      .detailChapter {
        overflow: auto;

        ul {
          li {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background: #f3faff;
            border-radius: 16px 16px 0px 0px;
            margin-bottom: 20px;
            box-sizing: border-box;
            padding-left: 24px;
          }
        }
      }
    }

    .vedioMainContent_right_bottom {
      width: 100%;
      // min-height: 578px;
      height: 100%;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 2px 10px 24px 0px rgba(161, 153, 168, 0.18);
      box-sizing: border-box;
      padding: 18px;

      .tabTitle {
        ul {
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 0 5%;

          li {
            width:100%;
            height: 32px;
            line-height: 32px;
            font-size: 16px;
            font-weight: 500;
            text-align: left;
            color: #a09dbb;
            cursor: pointer;
            position:relative;
            p{
              width:100%;
              height: 100%;
              position:absolute;
              left:0%;
              top:0%;
              z-index:13;
              text-align: center;
            }
          }
        }
      }

      .comList {
        box-sizing: border-box;
        padding: 25px 0 0 0;

        .rateBtn {
          margin-top: 20px;

          button {
            width: 111px;
            height: 32px;
            line-height: 32px;
            background: linear-gradient(90deg, #00a3ff 1%, #57c38f);
            border-radius: 38px;
            font-size: 14px;
            font-weight: 400;
            text-align: center;
            color: #ffffff;
            letter-spacing: 0.6px;
          }
        }
        .allCommonListSec{
          height: 495px!important;
        }
        .allCommonList {
          margin-top: 25px;
          height: 412px;
          overflow-y: auto;

          .singleList {
            min-height: 70px;
            border-bottom: 1px dashed #6e58c5;
            box-sizing: border-box;
            padding-top: 10px;
            .item1 {
              height: 20px;
              line-height: 20px;
              font-size: 14px;
              font-weight: 600;
              text-align: left;
              color: #171721;
              .itemSon1 {
                font-size: 12px;
                font-weight: 400;
                text-align: left;
                color: #8083a3;
                margin-left: 15px;
              }
            }
            .starListS {
              margin: 10px 0;
              box-sizing: border-box;
              padding: 0 10%;

              img {
                display: inline;
                margin-left: 2%;
              }
            }
            .fileAll{
              display:flex;
              height: 25px;
              line-height: 25px;
              box-sizing:border-box;
              padding:0 10% 0 4%;
              margin:10px 0 15px 0;
              .fileAll_left{
                width:30px;
                img{
                  width:20px;
                  height:25px;
                }
              }
              .fileAll_middle{
                flex:1;
                font-size: 14px;
                font-weight: 400;
                text-align: left;
                color: #171721;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
              }
              .fileAll_right{
                width: 58px;
                height: 25px;
                border: 1px solid #00a3ff;
                border-radius: 12px;
                font-size: 12px;
                font-family: PingFangSC, PingFangSC-Regular;
                font-weight: 400;
                text-align: center;
                color: rgba(0,131,197,0.80);
                cursor: pointer;
              }

            }

          }
        }
      }
    }
  }
}
.activein {
  color: #222222 !important;
  span{
    position:absolute;
    left:50%;
    top:80%;
    transform: translate(-50%,-50%);
    z-index:12;
    width:50%;
    height:6px;
    border-radius:3px;
    background-color: #E2E0F6;
  }
}
.allCommonList::-webkit-scrollbar {
  width: 5px;
  // height: 10px; // 高度写不写，都不影响，因为会根据内容的长度自动计算
}
.allCommonList::-webkit-scrollbar-thumb {
  background: #ccc; // 滑块颜色
  border-radius: 3px; // 滑块圆角
}
.allCommonList::-webkit-scrollbar-thumb:hover {
  background:#019FF9; // 鼠标移入滑块变红
}
.dialogSTY{
  h4{
    height: 28px;
    line-height: 28px;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    color: #00101a;
  }
  .singleOption{
    margin-top:48px;
    position:relative;
    .titleShow{
      height: 18px;
      line-height: 18px;
      font-size: 14px;
      font-weight: 500;
      text-align: left;
      color: #00101a;
    }
    .answerOption{
      margin-top:10px;
    }
    .chartsShow{
      position:absolute;
      right:0;
      top:0;
      z-index:14;
      width:190px;
      display:flex;
      .normalT{
        flex:1;
        line-height:73px;
      }
      .circleMap{
        width:73px;
        height:73px;
      }
     
    }
  }
  .singleOption:first-child{
    margin-top:0!important;
  }
}

// 百分比样式
::v-deep .circleMap .el-progress__text {
    color: #A3DDC5;
    font-size:16px;
}
::v-deep .circleMap .el-progress {
    margin-left: 0;
}
// 百进度条底色
::v-deep .circleMap .el-progress-bar__outer {
    background-color: rgba(0, 0, 0, 0.15);
}
// 百进度条颜色
::v-deep .circleMap .el-progress-bar__inner {
    background-color: #4BBC88;
}
::v-deep .circleMap .el-progress-circle__track {
    stroke: #A3DDC5;
}
::v-deep .el-dialog__footer{
   text-align: center;
}

</style>
