<script setup>
// import CommonHeader from "@/components/CommonHeader/index.vue";;
import img_lczs1 from "~/assets/zbktssys/1.png";
import img_lczs2 from "~/assets/zbktssys/2.png";
import img_lczs3 from "~/assets/zbktssys/3.png";
import img_lczs from "~/assets/zbktssys/bar.png";
import img_tx from "~/assets/zbktssys/tx.png";
import { ArrowRight, ArrowLeft } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import QrcodeVue from "qrcode.vue";
import { zbkt_dg, zbkt_pjList, zbkt_pj } from "./api";
import { ref } from "vue";
import { useRoute } from "vue-router";
const size = ref("92");
const activeName = ref("evaluate");
const https = ref(window.GLOBAL_CONFIG.api);
const route = useRoute();

let isMaster = ref(false);
let toolLink = ref("");

var player = "";

  function videoPlay(data, isLive) {
    // debugger
    // console.log(data.live_src.student.high.rts);
    // console.log(videoURL.value.high);
    // 初始化播放器 开始
    player = new Aliplayer(
      {
        id: "player-con",
        source: data.live_src.student.high.rts,
        width: "100%",
        height: "100%",
        autoplay: true,
        isLive: isLive == 3 ? true : false,
        cover: data.img, //修改 直播封面
        rePlay: false,
        playsinline: true,
        preload: true,
        controlBarVisibility: "hover",
        showBarTime: 5000,
        useH5Prism: true,
        skinLayout: [
          {
            name: "bigPlayButton",
            align: "blabs",
            x: 30,
            y: 80,
          },
          {
            name: "errorDisplay",
            align: "tlabs",
            x: 0,
            y: 0,
          },
          {
            name: "infoDisplay",
          },
          {
            name: "controlBar",
            align: "blabs",
            x: 0,
            y: 0,
            children: [
              {
                name: "liveDisplay",
                align: "tlabs",
                x: 15,
                y: 6,
              },
              {
                name: "fullScreenButton",
                align: "tr",
                x: 10,
                y: 10,
              },
              {
                name: "subtitle",
                align: "tr",
                x: 15,
                y: 12,
              },
              {
                name: "setting",
                align: "tr",
                x: 15,
                y: 12,
              },
              {
                name: "volume",
                align: "tr",
                x: 5,
                y: 10,
              },
              {
                name: "snapshot",
                align: "tr",
                x: 10,
                y: 12,
              },
            ],
          },
        ],
      },
      (player) => {
        player.on("error", (e) => {
          if (player != "") {
            player.dispose(); //销毁
          }
          liveState.value = 5;
          let cur_time = Date.parse(new Date()) / 1000;
          if (cur_time + 300 > data.starttime && cur_time < data.endtime) {
            let liveSRC = data.live_src.student;
            videoURL.value = {
              high: liveSRC.high.rts,
              middle: liveSRC.medium.rts,
              low: liveSRC.low.rts,
              hls: liveSRC.high.hls,
            };
            console.log(videoURL.value.high);
            req.open("GET", videoURL.value.hls, false);
            req.send(null);
            if (req.status == 200) {
              liveState.value = 3;
              videoPlay(data, liveState.value);
              clearInterval(time_live);
            } else {
              time_live = setInterval(() => {
                req.open("GET", videoURL.value.hls, false);
                req.send(null);
                if (req.status == 200) {
                  liveState.value = 3;
                  videoPlay(data, liveState.value);
                  clearInterval(time_live);
                }
              }, 30000);
            }
          } else if (cur_time > data.endtime) {
            liveState.value = 4;
            // console.log(liveState.value);
          }
        });
      }
    );
    /* h5截图按钮, 截图成功回调 */
    player.on("snapshoted", function (data) {
      var pictureData = data.paramData.base64;
      var downloadElement = document.createElement("a");
      downloadElement.setAttribute("href", pictureData);
      var fileName = "Aliplayer" + Date.now() + ".png";
      downloadElement.setAttribute("download", fileName);
      downloadElement.click();
      pictureData = null;
    });
  }
  // 详情
  let dgData = {
    // id: "10161",
    site:'tyyx',
    id:route.params.id,
  };
  var req = new XMLHttpRequest();
  var time_live = "";
  let videoURL = ref({});
  let liveState = ref(null);
  var dgMsg = ref({});
  function getDgDetail() {
    zbkt_dg(dgData)
      .then((res) => {
        dgMsg.value = res.data.one_info;
        // 判断当前用户是否为主讲人
        var locData = window.localStorage.getItem("userInfo");
        var isWho = JSON.parse(locData).user_role_id;
        var user_id = JSON.parse(locData).user_id; //老师的role_id
        console.log(user_id);
        // console.log(dgMsg.value);
        if (isWho == "75" && user_id == dgMsg.value.master_user_id) {
          isMaster.value = true;
          toolLink.value =
            "LiteLiveClass://push_screen://" +
            dgMsg.value.live_src.teacher.desktop;
          // console.log(toolLink);
        }
        // toolLink.value =
        //   "LiteLiveClass://push_screen://" + dgMsg.value.live_src.teacher.desktop;
        // 判断当前直播状态
        if (dgMsg.value.live_src.video == "") {
          let cur_time = Date.parse(new Date()) / 1000;
          if (cur_time + dgMsg.value.ahead_min * 60 < dgMsg.value.starttime) {
            liveState.value = 1;
          } else if (
            cur_time + 300 > dgMsg.value.starttime &&
            cur_time < dgMsg.value.endtime
          ) {
            let liveSRC = dgMsg.value.live_src.student;
            videoURL.value = {
              high: liveSRC.high.rts,
              middle: liveSRC.medium.rts,
              low: liveSRC.low.rts,
              hls: liveSRC.high.hls,
            };
            req.open("GET", videoURL.value.hls, false);
            req.send(null);
            // req.status
            if (req.status == 200) {
              liveState.value = 3;
              videoPlay(dgMsg.value, liveState.value);
              clearInterval(time_live);
            } else {
              liveState.value = 2;
              time_live = setInterval(() => {
                req.open("GET", videoURL.value.hls, false);
                req.send(null);
                if (req.status == 200) {
                  liveState.value = 3;
                  if (player != "") {
                    player.dispose(); //销毁
                  }
                  setTimeout(() => {
                    videoPlay(dgMsg.value, liveState.value);
                    clearInterval(time_live);
                  }, 1000);
                }
              }, 30000);
            }
          } else if (cur_time > dgMsg.value.endtime) {
            req.open("GET", videoURL.value.hls, false);
            req.send(null);
            if (req.status == 200) {
              liveState.value = 3;
              videoPlay(dgMsg.value, liveState.value);
            } else {
              liveState.value = 4;
            }
          }
        } else {
          videoPlay(dgMsg.value, dgMsg.value.status);
        }
      })
      .catch((err) => {
        console.log(err);
        alert("请刷新");
      });
  }

//判断是老师登录还是学生(76)
// function isWhoLogin() {
//   //学生
//   var locData = window.localStorage.getItem("userInfo");
//   isWho = JSON.parse(locData).user_role_id;
//   var user_id = JSON.parse(locData).user_id; //老师的role_id
//   console.log(dgMsg.value);
//   //  if (isWho == "75" && user_id == dgMsg.value.master_user_id) {
//   //   isMaster.value = true;
//   //   toolLink.value =
//   //     "LiteLiveClass://push_screen://" + dgMsg.value.live_src.teacher.desktop;
//   //     console.log(toolLink);
//   // } else {
//   //   // isMaster.value = false;

//   // }
//   // toolLink.value =
//   //     "LiteLiveClass://push_screen://" + dgMsg.value.live_src.teacher.desktop;
//   //     console.log(toolLink);
// }

// 评价列表
let plMsg = ref([]);
let pjList = {
  cq_key_id: route.params.id,
  cq_key_type: "1",
  site: "tyyx",
};
let dgCode = "";
function getPjList() {
  zbkt_pjList(pjList).then((res) => {
    plMsg.value = res.data.page_data;
    dgCode = res.code;
  });
}
getPjList();

let starNum = ref(null);
let star;
function starChange() {
  star = starNum.value;
}
// 评价
let pjData = {
  site: "tyyx",
  comment_question: {
    cq_key_id: route.params.id,
    cq_key_type: 1,
    cq_content: "",
  },
};
function pingjia() {
  Object.assign(pjData.comment_question, {
    cq_star: star,
  });
  zbkt_pj(pjData).then((res) => {
    getPjList();
    starNum.value = null;
  });
}
// const data_zy = $ref([
//   {
//     img: img_lczs1,
//     title: "走进生肖文化——寅虎卯兔",
//     bfl: 100,
//     desc: "领略生肖传奇，品味传统文化！",
//     nj: "四年级",
//     xk: "美术",
//     ls: "尚老师",
//     tx: img_tx,
//     zt: "1",
//   },
//   {
//     img: img_lczs2,
//     title: "走进生肖文化——寅虎卯兔",
//     bfl: 100,
//     desc: "领略生肖传奇，品味传统文化！",
//     nj: "四年级",
//     xk: "美术",
//     ls: "尚老师",
//     tx: img_tx,
//     zt: "",
//   },
//   {
//     img: img_lczs3,
//     title: "走进生肖文化——寅虎卯兔",
//     bfl: 100,
//     desc: "领略生肖传奇，品味传统文化！",
//     nj: "四年级",
//     xk: "美术",
//     ls: "尚老师",
//     tx: img_tx,
//     zt: "",
//   },
// ]);

function hrefTo(href) {
  window.open(href, "_blank");
}

// let activeTap = $ref("pj");

function changeActiveName(val) {
  activeName.value = val;
}
const loading = ref(true);
const fullscreenLoading = ref(false);
fullscreenLoading.value = true;
setTimeout(() => {
  fullscreenLoading.value = false;
  if (!dgMsg) {
  }
}, 3000);

onMounted(() => {
  getDgDetail();
  initUserInfo();
  // isWhoLogin();
});

let isStudent = $ref(false);
function initUserInfo() {
  let userInfo = localStorage.getItem("userInfo");
  let userData = JSON.parse(userInfo);
  isStudent = userData.user_role_id < 76 ? false : true;
}

  function command(j) {
    if(j.is_xf == 2) {
      request({
        url: '/yzy/zy_zbkc/xiafa',
        data: {
          kzk_id: dgMsg.value.id,
          yzz_id: j.yzz_id
        }
      }).then(res => {
        if (res.code == 1) {
          ElMessage.success("下达成功!");
          j.is_xf = 1;
        }
      })
    }
  }


let dialogVisible = $ref(false);
let currentRow = ref({});
let problemData = ref([]);
function handleOpenDialog(j) {
  currentRow.value = j;
  let data = JSON.parse(j.yzz_content_json);
  if (j.answerd == 2) {
    data.map((item) => {
      item.result = item.problemType != 1 ? "" : [];
    })
  } else {
    data.map((item, index) => {
      currentRow.value.yzkd_xsda.map((value, i) => {
        if (index == i) {
          item.result = item.problemType != 1 ? value.yzzd_xsda : value.yzzd_xsda.split(",");
          item.right_percent = value.right_percent;
        }
      })
    })
  }
  problemData.value = data;
  dialogVisible = true;
}
const problemTypeData = ["单选题", "多选题", "判断题"];

function commitData() {
  problemData.value.map(item => {
    if (item.problemType == 1) {
      item.answer = item.result.join(",");
    } else {
      item.answer = item.result;
    }
  })
  let yzy_zy_zbkc_dtjl = {
    yzzd_name: currentRow.value.yzz_name,
    yzzd_ckda: currentRow.value.yzz_content_json,
    yzzd_xsda: JSON.stringify(problemData.value),
    kz_id: dgMsg.value.kz_id,
    kzk_id: dgMsg.value.id,
    yzz_id: currentRow.value.yzz_id,
    yzzx_id: currentRow.value.yzzx_id
  }
  request({
    url: '/yzy/zy_zbkc_dtjl/add',
    data: {
      yzy_zy_zbkc_dtjl: yzy_zy_zbkc_dtjl
    }
  }).then(res => {
    if (res.code == 1) {
      ElMessage.success("提交成功!");
      // currentRow.value.answerd = 1;
      handleClose();
      getDgDetail();
    }
  })
}

function handleClose() {
  dialogVisible = false;
}

function downloadEvt(z) {
  let mywin = window.open("", "_self");
  mywin.location.href = z.kkw_url;
  // var a = document.createElement("a");
  // a.href = z.kkw_url;
  // a.download = z.kkw_name+'xls';
  // a.style.display = "none";
  // document.body.appendChild(a);
  // a.click();
  // a.remove();
}
// 复制链接
const shareLink = window.location.href;
async function copyLink() {
  await navigator.clipboard.writeText(shareLink);
  ElMessage.success("已复制");
}
function shareToQq(url) {
  // 分享到腾讯QQ
  var shareqqstring =
    "https://connect.qq.com/widget/shareqq/index.html?url=" +
    encodeURIComponent(url);
  window.open(shareqqstring);
}
function shareToQqzone(url) {
  // 分享到QQ空间
  var shareqqzonestring =
    "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
    encodeURIComponent(url);
  window.open(shareqqzonestring);
}
function shareToSina(url) {
  // 分享到新浪微博
  var sharesinastring =
    "http://v.t.sina.com.cn/share/share.php?url=" +
    encodeURIComponent(url) +
    "&searchPic=true#_loginLayer_1639641926022";
  window.open(sharesinastring);
}
  </script>

  <template>
  <common-header />
  <div v-loading.fullscreen.lock="fullscreenLoading" type="primary" class="w-full flex items-center justify-center shadow h-60px bg-hex-fff">
    <div class="w-1400px flex items-center">
      <div class="text-lg text-hex-050026">内容</div>
      <el-divider direction="vertical" />
      <div class="text-sm">
        <span class="text-hex-949494">直播课堂</span>
        <span class="text-hex-949494"> - 网络直播</span>
        <span> - 内容</span>
      </div>
    </div>
  </div>
  <!-- bg-gradient-to-b from-hex-00A3FF via-hex-DDFEEE to-hex-FFF7E4 opacity-60 bg-opacity-60 blur-50px -->
  <div class="w-full flex items-center justify-center bg-hex-FCFEFF">
    <div class="w-1400px flex flex-col">
      <div class="flex items-center justify-start h-60px px-4">
        <div class="text-lg text-hex-050026 font-bold">{{ dgMsg.title }}</div>

        <el-popover placement="bottom" :width="410" trigger="hover">
          <template #reference>
            <div class="
                  cursor-pointer
                  text-hex-00A3FF
                  ml-8
                  flex
                  items-center
                  text-sm
                ">
              <i-fluent:share-28-regular class="mr-1" />分享
            </div>
          </template>

          <div class="w-full">
            <div class="w-full text-center">呼唤小伙伴们前来围观吧</div>
            <div class="flex justify-around m-10" style="position:relative">
              <div class="cursor-pointer weibo" @click="shareToSina(shareLink)">
                <img src="../../../assets/zbktwlzb/weibo.png" alt="" />
              </div>
              <div class="qq cursor-pointer" @click="shareToQq(shareLink)">
                <img src="../../../assets/zbktwlzb/QQ.png" alt="" />
              </div>
              <div class="qqkj cursor-pointer" @click="shareToQqzone(shareLink)">
                <img src="../../../assets/zbktwlzb/QQzone.png" alt="" />
              </div>
              <qrcode-vue :value="shareLink" :size="size" level="H" />
              <div style="position:absolute;bottom:-20px;right:17px">微信扫码分享</div>
            </div>
            <el-divider></el-divider>
            <div class="text-hex-00a3ff mb-2">直播间地址</div>
            <div class="flex">
              <div class="bg-hex-F7F7F7 p-2 flex-auto mr-4 truncate">
                {{ shareLink }}
              </div>
              <div class="
                    text-sm
                    bg-hex-0A8AFF
                    text-white
                    w-100px
                    h-40px
                    flex_center
                    rounded
                    cursor-pointer
                    copy
                  " @click="copyLink">
                复制链接
              </div>
            </div>
          </div>
        </el-popover>
      </div>

      <div class="w-full shadow bg-white rounded-lg flex items-center mb-4 p-4">
        <el-avatar :size="dgMsg.master_user_avatar" src="" />
        <div class="flex-auto p-4 flex flex-col justify-center">
          <div>
            <div class="font-bold">{{ dgMsg.master_teacher }}</div>
          </div>
          <div class="h-20px"></div>
        </div>
        <a :href="toolLink" target="_blank" class="live-tool-link" v-show="isMaster"></a>
        <div class="
              text-sm
              bg-hex-0A8AFF
              text-white
              w-100px
              h-40px
              flex_center
              rounded
              cursor-pointer
              focus
            ">
          关注
        </div>
      </div>

      <div class="w-full h-800px mb-4 bg-hex-CEE5FB video">
        <div class="prism-player" id="player-con"></div>
        <div class="live-not-start" v-if="liveState == 1">
          直播时间是{{ dgMsg.time }}
        </div>
        <div class="live-not-start" v-if="liveState == 2">
          直播视频获取中，请稍后...
        </div>
        <div class="live-back" v-if="liveState == 4">
          <img :src="dgMsg.img" alt="" />
          <h3 class="live-back-title">直播回看视频处理中，请稍候访问回看……</h3>
        </div>
        <div class="live-not-start" v-if="liveState == 5">
          网络异常请稍后或点击页面刷新
        </div>
        <!-- <div class="prism-player" ></div> -->
        <div v-if="dgMsg.slave_teacher" class="slave">助教：{{ dgMsg.slave_teacher }}</div>
        <div class="watch">当前观看人数：{{ dgMsg.lll }}人</div>
      </div>

      <div class="activityContent">
        <div class="activityItem" @click="changeActiveName('evaluate')" :class="activeName == 'evaluate' ? 'activityItem-active' : ''">
          评价
        </div>
        <div @click="changeActiveName('job')" :class="activeName == 'job' ? 'activityItem-active' : ''" class="activityItem">
          作业
        </div>
        <div @click="changeActiveName('resource')" :class="activeName == 'resource' ? 'activityItem-active' : ''" class="activityItem">
          资源
        </div>
      </div>

      <div class="w-full p-8">
        <div class="evaluate" v-show="activeName == 'evaluate'">
          <el-rate @change="starChange" v-model="starNum"></el-rate>
          <div @click="pingjia" class="
                text-sm
                bg-hex-0A8AFF
                text-white
                w-111px
                h-32px
                flex_center
                rounded-full
                cursor-pointer
                pingjia
              ">
            评价
          </div>

          <div class="my-1" v-for="p in plMsg" :key="p">
            <div class="flex items-end">
              <div class="text-sm font-bold text-hex-171721 mr-4">
                {{ p.user_realname }}
              </div>
              <div class="text-xs text-hex-8083A3">
                {{ p.create_dateline_format }}
              </div>
            </div>
            <el-rate :model-value="p.cq_star" disabled class="my-2"></el-rate>
          </div>
        </div>
        <div class="job" v-show="activeName == 'job'">
          <div v-for="j in dgMsg.kzkt_kczy" :key="j" class="homework">
            <div class="job-nav">{{ j.yzz_name }}</div>
            <div v-if="!isStudent" class="
                  text-xs
                  border border-hex-00a3ff
                  text-hex-00a3ff
                  w-60px
                  h-24px
                  rounded-full
                  cursor-pointer
                  down-load
                " @click="command(j)">
              {{j.is_xf == 2 ? "下达" : "已下达"}}
            </div>
            <div v-if="isStudent" class="
                  text-xs
                  border border-hex-00a3ff
                  text-hex-00a3ff
                  w-60px
                  h-24px
                  rounded-full
                  cursor-pointer
                  down-load
                " @click="handleOpenDialog(j)">
              {{j.answerd == 2 ? "答题" : "查看"}}
            </div>
          </div>
        </div>
        <div class="resource" v-show="activeName == 'resource'">
          <div v-for="z in dgMsg.kzkt_kcwj" :key="z" class="my-1 ziyuan">
            <div class="flex items-end">
              <div class="text-sm font-bold text-hex-171721 mr-4">
                {{ z.name }}
              </div>
              <div class="text-xs text-hex-8083A3">
                {{ z.kkw_datetime }} 上传
              </div>
            </div>
            <div class="flex justify-between items-center my-2">
              <div class="text-hex-171721 text-sm">{{ z.kkw_name }}</div>
              <div class="
                    text-xs
                    border border-hex-00a3ff
                    text-hex-00a3ff
                    w-60px
                    h-24px
                    flex_center
                    rounded-full
                    cursor-pointer
                    down-load
                  " @click="downloadEvt(z)">
                下载
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- <div class="w-full flex items-center justify-center mt-4">
      <div class="w-1400px flex flex-col">

        <div class="w-full h-530px mb-4 bg-light-500">
          <video class="w-full h-full" src=""></video>
        </div>

        <div class="w-full flex justify-between items-center">
          <el-button type="primary" :icon="ArrowLeft" circle size="large" />

          <div class="flex-auto flex justify-start items-center">
            <div class="w-19/100 mx-4 flex flex-col cursor-pointer" v-for="i in data_zy">
              <div class="w-full flex-none overflow-hidden  rounded-xl">
                <img :src="i.img" alt="" class="w-full h-full">
              </div>
              <div class="p-2">
                {{  i.title  }}
              </div>
            </div>
          </div>

          <el-button type="primary" :icon="ArrowRight" circle size="large" />
        </div>

      </div>
    </div> -->
  <el-dialog width="1280px" v-model="dialogVisible" center @close="handleClose" :close-on-click-modal="false">
    <div class="content">
      <div class="problemContent">
        <div class="title">{{currentRow.yzz_name}}</div>
        <div class="problemList">
          <div v-for="(item, index) in problemData" :key="index">
            <div class="problem-list">
              <div>
                <div class="pro-title">{{index+1}}、{{item.problem}}【{{problemTypeData[item.problemType]}}】</div>
                <el-radio-group :disabled="currentRow.answerd==1?true:false" v-if="item.problemType==0" v-model="item.result" size="large">
                  <el-radio style="width: 100%;" v-for="(value, i) in item.options" :key="i" :label="(i+1)+''">{{item.options[i]}}</el-radio>
                </el-radio-group>
                <el-checkbox-group :disabled="currentRow.answerd==1?true:false" v-if="item.problemType==1" v-model="item.result" size="large">
                  <el-checkbox style="width: 100%;" v-for="(value, i) in item.options" :key="i" :label="(i+1)+''">{{item.options[i]}}</el-checkbox>
                </el-checkbox-group>
                <el-radio-group :disabled="currentRow.answerd==1?true:false" v-if="item.problemType==2" v-model="item.result" size="large">
                  <el-radio label="1">对</el-radio>
                  <el-radio label="2">错</el-radio>
                </el-radio-group>
              </div>
              <div class="flex" style="margin-left: 50px;" v-if="currentRow.answerd==1">
                <span class="nowrap">全市作答正确率：</span>
                <el-progress type="circle" :width="72" :stroke-width="12" color="#4BBC88" :percentage="item.right_percent" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template #footer v-if="currentRow.answerd==2">
      <span class="dialog-footer">
        <el-button type="primary" @click="commitData">提交</el-button>
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

  <style lang="scss" scoped>
.copy {
  text-align: center;
  line-height: 40px;
}
.focus {
  line-height: 40px;
  text-align: center;
}
.live-tool-link {
  width: 100px;
  height: 28px;
  margin-right: 30px;
  background: url("../../../assets/zbktwlzb/icon-tool.png") center no-repeat;
}
.video {
  position: relative;
  .slave {
    position: absolute;
    top: 0;
    left: 0px;
    width: 185px;
    height: 51px;
    line-height: 51px;
    opacity: 0.5;
    background: #ffffff;
    border-radius: 0px 10px 10px 0px;
    font-size: 16px;
    color: #00a3ff;
    text-align: center;
  }
  .watch {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background: rgba(106, 115, 144, 0.5);
    border-radius: 10px 0px 0px 10px;
  }
  .live-not-start {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
  }
  .live-back {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
  }
  .live-back img {
    width: 100%;
    height: 100%;
  }
  .live-back-title {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -210px;
    margin-top: -20px;
    width: 420px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    font-weight: normal;
    text-align: center;
    color: #fff;
    background: #fa2443;
    border-radius: 20px;
  }
}
.activityContent {
  background: #ffffff;
  margin: auto;
  padding: 10px 8px;
  box-sizing: border-box;
  display: flex;
  .activityItem {
    margin: 0 20px;
    text-align: center;
    background: #fff;
    font-size: 16px;
    font-weight: 500;
    color: #a09dbb;
    border-radius: 10px;
    cursor: pointer;
  }
  .activityItem-active {
    color: #222;
    position: relative;
  }
  .activityItem-active::after {
    position: absolute;
    content: "";
    height: 10px;
    width: 125%;
    border-radius: 10px;
    background-color: #6c5dd3;
    opacity: 0.4;
    bottom: 0;
    left: -5px;
  }
}
.evaluate {
  .pingjia {
    text-align: center;
    line-height: 32px;
    background: linear-gradient(90deg, #00a3ff 1%, #57c38f);
    margin: 15px 0;
  }
}
.resource {
  .ziyuan {
    height: 70px;
    border-bottom: 1px dashed #b8ade3;
    padding: 0 20px;
  }
}
.down-load {
  text-align: center;
  line-height: 24px;
  vertical-align: middle;
}
.homework {
  display: flex;
  height: 55px;
  line-height: 55px;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px dashed #e4e6e8;
  .down-load {
    margin-top: 15px;
  }
  .job-nav {
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: 600;
    color: #000000;
  }
}

.problemContent {
  .flex {
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  .nowrap {
    white-space: nowrap;
  }
  .title {
    text-align: center;
  }
  .problemList {
    margin-top: 40px;
    .problem-list {
      padding: 0 20px;
      margin-bottom: 40px;
      display: flex;
      justify-content: space-between;
      .pro-title {
        font-size: 14px;
        color: #00101a;
      }
      ::v-deep .el-progress {
        .el-progress__text {
          color: #4bbc88;
          font-size: 16px !important;
          font-weight: 600;
        }
      }
    }
  }
}
</style>
