pbl-teacher-table/src/components/pages/liveRoom.vue

<template>
  <div style="background: #d0d6e4; width: 100%; margin: 0; position: relate">
    <!-- <div class="pb_content_body" style="height: 100%">
    </div>-->
    <div class="blackBottom">
      <div
        style="
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: stretch;
          padding-left: 10px;
        "
      >
        <div class="logoLive">
          <img src="../../assets/icon/logo.png" alt />
        </div>
        <div style="color: #fff; line-height: 45px; padding-left: 15px">
          湖心亭看雪可可乐博模拟展示课件
        </div>
      </div>
    </div>
    <div class="isNoOther">
      <div class="imgMiddle" :class="isBlock > 0 ? 'imghalf' : 'imgMiddle'">
        <!-- <img src="../../assets/icon/kc1.png" alt /> -->
        <!-- <iframe
          style="width: 100%; height: 100%; border: none"
          src="https://view.officeapps.live.com/op/view.aspx?src=https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0701%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656644341323.pptx"
        ></iframe>-->
        <pdf
          :pdfUrl="pdfUrl"
          style="width: 100%; height: 100%"
          :getPage="getPage"
        ></pdf>
      </div>
      <div
        style="
          background: #d0d6e4;
          height: 100%;
          min-width: 40%;
          max-width: 40%;
          overflow: auto;
          padding: 0px 0 50px;
        "
        v-if="isBlock == 1 || isBlock == 2 || isBlock == 6"
      >
        <div
          style="background: #fff; height: 92%; width: 96%; margin: 10px auto"
        >
          <div
            style="color: #bfbfbf; padding: 15px 0 20px 25px; font-size: 20px"
          >
            答题查看
          </div>

          <div class="answerBox" v-if="isBlock == 1">
            <div class="answerTimuBox" v-for="item in 1" :key="item">
              <div class="choose_style">
                <!-- {{
                  item
                }}、小明有3本不同的语文书，2本不同的数学书，4本不同的英语书，小明整理书架时，要把这些书放在同一层，且相同科目的书要相邻摆放，问共有多少种摆放方式？-->
                <span>A</span>
                <span>B</span>
                <span>C</span>
                <span>D</span>
              </div>
              <el-button style="margin: 0 auto" @click="showMember(item)"
                >开始答题</el-button
              >
            </div>
          </div>
          <div class="answerBox" v-if="isBlock == 2 || isBlock == 6">
            <div class="memberBox" v-if="isBlock == 2">
              <div
                :class="{ pAnswer: item.is == 2 }"
                v-for="(item, index) in studentArray"
                :key="index"
              >
                {{ item.name }}
              </div>
            </div>
            <div class="memberBox" v-if="isBlock == 6">
              <div
                :class="{ pAnswer: item.is == 2 }"
                v-for="(item, index) in studentArray2"
                :key="index"
                @click="whoAnswer(item, index)"
              >
                {{ item.name }}
              </div>
            </div>
            <div style="color: #948bdc; padding-top: 15px" v-if="isBlock == 2">正在答题......</div>
            <div class="viewSta" @click="isBlock = 3" v-if="isBlock == 2">查看数据统计</div>
            <span slot="footer" class="dialog-footer sztFooter" v-if="isBlock == 6">
            <el-button type="primary" @click="isBlock = 0">关闭</el-button>
            <!-- <el-button type="primary" @click="isBlock = 2">返回</el-button> -->
          </span>
          </div>
        </div>
      </div>
      <div
        style="
          background: #d0d6e4;
          height: 92%;
          min-width: 40%;
          max-width: 40%;
          overflow: auto;
          padding: 0px 0 50px;
        "
        v-if="isBlock == 3"
      >
        <div
          style="
            background: #fff;
            width: 96%;
            margin: 10px auto;
            position: relative;
          "
        >
          <div class="close" @click="isBlock = 0">
            <img src="../../assets/icon/close.png" alt />
          </div>
          <div style="color: #bfbfbf; padding: 15px 0 20px 25px">数据统计</div>
          <div style="padding-left: 25px">
            目前A选项
            <span class>{{ answerJson.A }}票</span>、B选项
            <span>{{ answerJson.B }}票</span>、C选项
            <span>{{ answerJson.C }}票</span>、D选项
            <span>{{ answerJson.D }}票</span>
          </div>
          <div class="szt">
            <!-- <img src="../../assets/szt.png" alt /> -->
            <AnswerData :problemJson="answerJson"></AnswerData>
          </div>
          <span slot="footer" class="dialog-footer sztFooter">
            <el-button type="primary" @click="isBlock = 0">关闭</el-button>
            <el-button type="primary" @click="isBlock = 2">返回</el-button>
          </span>
        </div>
      </div>
      <div
        class="answerBox"
        style="
          width: 38.5%;
          max-width: 38.5%;
          overflow: auto;
          background: rgb(255, 255, 255);
          height: 91.5%;
          position: relative;
          margin: 10px 15px;
        "
        v-if="isBlock == 5"
      >
        <!-- <div
          style="
            border-bottom: 3px solid rgb(44, 131, 238);
            width: 70px;
            padding-bottom: 3px;
            text-align: center;
            margin-bottom: 20px;
          "
        >
          选择工具
        </div>-->

        <div
          v-if="toolsList[0].tools.length == 1"
          style="height: 100%; width: 100%"
        >
          <div
            v-if="toolsList[0].tools[0] == 9"
            style="height: 90%; width: 100%"
          >
            选择题
          </div>
          <div
            v-if="toolsList[0].tools[0] == 10"
            style="height: 90%; width: 100%"
          >
            倒计时
          </div>
          <div
            v-if="toolsList[0].tools[0] == 11"
            style="height: 90%; width: 100%"
          >
            问答题
          </div>
          <div
            v-if="toolsList[0].tools[0] == 12"
            style="height: 90%; width: 100%"
          >
            选人回答
          </div>
          <div
            v-if="toolsList[0].tools[0] == 13"
            style="height: 90%; width: 100%"
          >
            分小组
          </div>
          <div
            v-if="toolsList[0].tools[0] == 14"
            style="height: 90%; width: 100%"
          >
            作业评价
          </div>
          <div class="nextStepOne" @click="isBlock = 0">关闭</div>
        </div>
        <div v-else style="height: 100%; width: 100%">
          <div
            v-if="toolsList[0].tools[howTools] == 1"
            style="height: 90%; width: 100%"
          >
            <iframe
              style="width: 100%; height: 100%; border: none"
              src="https://iwb.cocorobo.cn/"
            ></iframe>
          </div>
          <div
            v-if="toolsList[0].tools[howTools] == 2"
            style="height: 90%; width: 100%"
          >
            <iframe
              style="width: 100%; height: 100%; border: none"
              src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/note"
            ></iframe>
          </div>
          <div
            v-if="toolsList[0].tools[howTools] == 3"
            style="height: 90%; width: 100%"
          >
            <iframe
              style="width: 100%; height: 100%; border: none"
              src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
            ></iframe>
          </div>
          <div
            v-if="toolsList[0].tools[howTools] == 4"
            style="height: 90%; width: 100%"
          >
            <iframe
              style="width: 100%; height: 100%; border: none"
              src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/ask"
            ></iframe>
          </div>
          <div
            v-if="toolsList[0].tools[howTools] == 6"
            style="height: 90%; width: 100%"
          >
            <iframe
              style="width: 100%; height: 100%; border: none"
              src="https://cloud.cocorobo.cn/Office/Word/WordEditArea.htm"
            ></iframe>
          </div>
          <div
            v-if="toolsList[0].tools[howTools] == 7"
            style="height: 90%; width: 100%"
          >
            <iframe
              style="width: 100%; height: 100%; border: none"
              src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
            ></iframe>
          </div>
          <div
            v-if="toolsList[0].tools[howTools] == 8"
            style="height: 90%; width: 100%"
          >
            <iframe
              style="width: 100%; height: 100%; border: none"
              src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/library"
            ></iframe>
          </div>
          <div
            v-if="toolsList[0].tools[howTools] == 10"
            style="height: 90%; width: 100%"
          >
            <div>倒计时</div>
          </div>
          <div
            v-if="toolsList[0].tools[howTools] == 13"
            style="height: 90%; width: 100%"
          >
            <div>分小组</div>
          </div>
          <div class="nextStepOne" @click="nextTool">下一步</div>
        </div>
        <!-- <div v-if="toolCount == 0" style="height: 90%">
          <iframe
            style="width: 100%; height: 100%; border: none"
            src="https://pbl.cocorobo.cn/pbl-teacher-table/dist/#/Grid"
          ></iframe>
        </div>
        <div v-if="toolCount == 1" style="height: 90%">
          <iframe
            style="width: 100%; height: 100%; border: none"
            src="https://iwb.cocorobo.cn/"
          ></iframe>
        </div>
        <div v-if="toolCount == 2" style="height: 90%">
          <iframe
            style="width: 100%; height: 100%; border: none"
            src="https://cloud.cocorobo.cn/kityminder-editor/dist/index.html"
          ></iframe>
        </div> -->
        <!-- <div class="nextStepOne" @click="nextTool">下一步</div> -->
      </div>

      <div
        class="answerBox"
        style="
          width: 38.5%;
          max-width: 38.5%;
          overflow: auto;
          background: rgb(255, 255, 255);
          height: 91.5%;
          position: relative;
          margin: 10px 15px;
        "
        v-if="isBlock == 4"
      >
        <div
          style="
            color: #b7b7b7;
            border-left: 5px solid #a5b6e2;
            padding-left: 7px;
            height: 25px;
            line-height: 25px;
          "
        >
          查看作业
        </div>
        <div class="workBox">
          <div class="works" v-for="(w, wIndex) in worksList" :key="wIndex">
            <div class="workImg">
              <img :src="w.upload.upImg ? w.upload.upImg[0].url : mr" alt />
            </div>
            <div class="workDetail">
              <div class="workLeft">
                <div class="workTx">
                  <img src="../../assets/avatar.png" alt />
                </div>
                <div class="workName">{{ w.sName }}</div>
              </div>
              <div class="workRight">{{ w.time }}</div>
            </div>
          </div>
        </div>
        <div class="returnButton" @click="isBlock = 0">关闭</div>
      </div>
    </div>

    <div class="blackBottomB">
      <div style="display: flex">
        <div class="blackButton" @click="answerWork" v-if="steps == 3">
          开始答题
        </div>
        <div
          class="blackButton"
          @click="isBlock = 5"
          v-if="4 <= steps && steps <= 12 && steps != 8 && steps != 11 && steps != 12"
        >
          查看工具
        </div>
        <div class="blackButton" @click="checkStudentAnswer" v-if="steps == 8">选择学生回答</div>
        <div class="blackButton" @click="isBlock = 4" v-if="steps == 11 || steps == 12">查看作业</div>
      </div>
      <!-- <div
        class="blackButton"
        style="margin-right: 10px"
        @click="dialogVisible2 = true"
      >
        查看报告
      </div>-->
    </div>
    <el-dialog
      title="选择答题"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
        是否让“{{ answerStudent }}”同学进行单独答题？
      </div>
      <div
        style="
          width: 200px;
          background: #4d8ae0;
          height: 35px;
          margin: 0 auto;
          text-align: center;
          line-height: 35px;
          color: #fff;
          border-radius: 5px;
          cursor: pointer;
        "
        @click="dialogVisible = false"
      >
        确定
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisible1"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
        正在开发中！
      </div>
      <div
        style="
          width: 200px;
          background: #4d8ae0;
          height: 35px;
          margin: 0 auto;
          text-align: center;
          line-height: 35px;
          color: #fff;
          border-radius: 5px;
          cursor: pointer;
        "
        @click="dialogVisible1 = false"
      >
        确定
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogVisible2"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <div style="text-align: center; padding: 20px 0 50px 0; font-size: 18px">
        课程结束后才有报告！
      </div>
      <div
        style="
          width: 200px;
          background: #4d8ae0;
          height: 35px;
          margin: 0 auto;
          text-align: center;
          line-height: 35px;
          color: #fff;
          border-radius: 5px;
          cursor: pointer;
        "
        @click="dialogVisible2 = false"
      >
        确定
      </div>
    </el-dialog>
  </div>
</template>

<script>
import "../../common/aws-sdk-2.235.1.min";
import EditorBar from "../../components/tools/wangEnduit";
import AnswerData from "./components/answerData";
import pdf from "./components/pdf";
export default {
  components: { EditorBar, AnswerData, pdf },
  data() {
    return {
      pdfUrl:
        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/0629%E5%AE%9E%E6%97%B6%E8%AF%BE%E5%A0%82%E6%A8%A1%E6%8B%9F%E6%BC%94%E7%A4%BA%E8%AF%BE%E4%BB%B61656920880446.pdf",
      isLoading: false,
      formLabelWidth: "100px",
      userid: this.$route.query.userid,
      cid: this.$route.query.cid,
      oid: this.$route.query.oid,
      mr: require("../../assets/icon/kc1.png"),
      timu: [],
      // a: false,
      // b: false,
      // c: false,
      steps: 0,
      isBlock: 0,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      toolCount: 0,
      answerBox: "",
      answer: [
        { name: "A.1568" },
        { name: "B.720" },
        { name: "C.1728" },
        { name: "D.480" },
      ],
      studentArray: [
        { name: "张可松", is: 1 },
        { name: "陈佳佳", is: 1 },
        { name: "许琦基", is: 1 },
        { name: "洛维奇", is: 1 },
        { name: "罗伟", is: 1 },
        { name: "李孝雄", is: 1 },
        { name: "李琪琪", is: 1 },
        { name: "黄子韬", is: 1 },
        { name: "张嘉琪", is: 1 },
        { name: "陈家", is: 1 },
        { name: "张可", is: 1 },
        { name: "庄小小", is: 1 },
        { name: "梁思成", is: 1 },
        { name: "房小玲", is: 1 },
        { name: "李卫涛", is: 1 },
        { name: "李玫儿", is: 1 },
        { name: "张可梦", is: 1 },
        { name: "李琦", is: 1 },
        { name: "梁惠", is: 1 },
        { name: "许佳琪", is: 1 },
      ],
      studentArray2: [
        { name: "张可松", is: 1 },
        { name: "陈佳佳", is: 1 },
        { name: "许琦基", is: 1 },
        { name: "洛维奇", is: 1 },
        { name: "罗伟", is: 1 },
        { name: "李孝雄", is: 1 },
        { name: "李琪琪", is: 1 },
        { name: "黄子韬", is: 1 },
        { name: "张嘉琪", is: 1 },
        { name: "陈家", is: 1 },
        { name: "张可", is: 1 },
        { name: "庄小小", is: 1 },
        { name: "梁思成", is: 1 },
        { name: "房小玲", is: 1 },
        { name: "李卫涛", is: 1 },
        { name: "李玫儿", is: 1 },
        { name: "张可梦", is: 1 },
        { name: "李琦", is: 1 },
        { name: "梁惠", is: 1 },
        { name: "许佳琪", is: 1 },
      ],
      askCount: 0,
      answerJson: {
        A: 0,
        B: 0,
        C: 0,
        D: 0,
      },
      answerStudent: "",
      tools: [
        "",
        "",
        { tools: [9] }, //选择题
        { tools: [10] }, //倒计时
        { tools: [11] }, //问答题
        { tools: [11] }, //问答题
        { tools: [3, 1] }, //思维导图/电子白板
        { tools: [12] }, //选人回答
        { tools: [10, 13] }, //倒计时、分小组
        { tools: [3, 1, 7] }, //思维导图/电子白板/思维网格
        { tools: [14] }, //查看作业
        { tools: [14] }, //查看作业
        "", //查看作业
        //1、电子白板 2、便签 3、思维导图 4、问卷调查 5、量规评分 6、协同文档 7、思维网格 8、素材库 9、选择题 10、倒计时 11、问答题 12、选人回答 13、分小组 14、老师对提交作业进行评价
      ],
      howTools: 0,
      worksDetail: [],
      worksList: [],
      toolsList: [],
    };
  },
  methods: {
    change(val) {
      console.log(val);
    },
    goTo(path) {
      this.$router.push(path);
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    jump(cid) {
      window.parent.postMessage({ cid: cid, type: "1" }, "*");
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
    },
    init() {},
    handleClose(done) {
      done();
    },
    //uuid生成
    guid() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          var r = (Math.random() * 16) | 0,
            v = c == "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        }
      );
    },
    time() {
      if (!this.now) {
        this.now = new Date().getTime();
        return true;
      } else {
        let time = new Date().getTime();
        if (time - this.now > 3000) {
          this.now = time;
          return true;
        } else {
          return false;
        }
      }
    },
    randomNum(minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
          break;
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
          break;
        default:
          return 0;
          break;
      }
    },
    addTool(t) {
      if (t == 1) {
        window.parent.postMessage({ tools: "1" }, "*");
      } else if (t == 3) {
        window.parent.postMessage({ tools: "3" }, "*");
      } else if (t == 7) {
        window.parent.postMessage({ tools: "7" }, "*");
      }
    },
    nextTool() {
      if (this.howTools < this.toolsList[0].tools.length - 1) {
        this.howTools++;
      } else if (this.howTools == this.toolsList[0].tools.length - 1) {
        this.isBlock = 0;
      }
      // if (this.toolCount < 2) {
      //   this.toolCount++;
      // } else {
      //   this.steps = 0;
      //   this.type = 0;
      //   this.toolCount = 0;
      // }
    },
    answerWork() {
      this.isBlock = 1;
    },
    checkStudentAnswer() {
      this.isBlock = 6;
      for (var i = 0; i < this.studentArray.length; i++) {
        this.studentArray2[i].is = 1;
      }
    },
    showMember(i) {
      let _this = this;
      this.isBlock = 2;
      setTimeout(() => {
        for (var i = 0; i < 10; i++) {
          var a = _this.randomNum(0, _this.studentArray.length - 1);
          _this.studentArray[a].is = 2;
        }
        this.askCount = 0;
        for (var i in _this.studentArray) {
          if (_this.studentArray[i].is == 2) {
            _this.askCount++;
          }
        }
        i = 0;
        this.answerJson = {
          A: 0,
          B: 0,
          C: 0,
          D: 0,
        };
        for (var i = 0; i < _this.askCount; i++) {
          var a = _this.randomNum(0, 3);
          if (a === 0) {
            _this.answerJson.A++;
          } else if (a === 1) {
            _this.answerJson.B++;
          } else if (a === 2) {
            _this.answerJson.C++;
          } else if (a === 3) {
            _this.answerJson.D++;
          }
        }
      }, 2000);
    },
    whoAnswer(item, index) {
      for (var i = 0; i < this.studentArray.length; i++) {
        this.studentArray2[i].is = 1;
      }
      this.studentArray2[index].is = 2;
      this.answerStudent = item.name;
      this.dialogVisible = true;
    },
    howPage(page) {
      this.howTools = 0;
      if (this.toolsList.length > 0) {
        this.toolsList = [];
        this.toolsList.push({ tools: this.tools[page - 1].tools });
      } else {
        this.toolsList.push({ tools: this.tools[page - 1].tools });
      }
    },
    getPage(page) {
      console.log(page);
      let params = [
        {
          page: page,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "updatePptPage", params)
        .then((res) => {
          this.steps = page;
          this.isBlock = 0;
          if (page == 3) {
            this.howPage(page);
          } else if (page == 4) {
            this.howPage(page);
          } else if (page == 5) {
            this.howPage(page);
          } else if (page == 6) {
            this.howPage(page);
          } else if (page == 7) {
            this.howPage(page);
          } else if (page == 8) {
            this.howPage(page);
          } else if (page == 9) {
            this.howPage(page);
          } else if (page == 10) {
            this.howPage(page);
          } else if (page == 11) {
            this.howPage(page);
          } else if (page == 12) {
            this.howPage(page);
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectSWork() {
      let params = {
        uid: "",
        cid: this.cid,
      };
      this.ajax
        .get(this.$store.state.api + "selectSWork", params)
        .then((res) => {
          this.worksDetail = res.data[0];
          for (var i = 0; i < this.worksDetail.length; i++) {
            this.worksList.push({
              upload: JSON.parse(this.worksDetail[i].upload)[0],
              sName: this.worksDetail[i].username,
              time: this.worksDetail[i].time,
            });
          }
        })
        .catch((err) => {
          this.$message.error("查询失败");
          console.error(err);
        });
    },
  },
  created() {
    this.selectSWork();
  },
};
</script>

<style scoped>
.dialog_diy >>> .el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn {
  top: 9px;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.blackBottom {
  background: rgb(0, 0, 0);
  height: 45px;
  width: 100%;
}

.imgMiddle {
  width: 100%;
  height: calc(100% - 45px);
  max-height: 920px;
}

.imgMiddle > img,
.imghalf > img,
.szt > img,
.logoLive > img,
.close > img {
  width: 100%;
  height: 100%;
  max-height: 920px;
}

.blackBottomB {
  position: sticky;
  bottom: 0px;
  left: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  background: rgb(0, 0, 0);
  height: 45px;
  width: 100%;
}

.blackBottomB > div:nth-child(1) {
  margin-left: 10px !important;
}

.blackButton {
  color: #fff;
  background: #066ebe;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 0 5px;
  border-radius: 5px;
  font-size: 15px;
  cursor: pointer;
}

.isNoOther {
  width: 100%;
  height: 100%;
  display: flex;
}

.imghalf {
  width: 60% !important;
  height: calc(100% - 45px);
  max-height: 920px;
}
.answerBox {
  padding-left: 25px;
  padding: 25px;
  box-sizing: border-box;
  /* max-height: 800px;
  overflow: auto; */
}
.answerTimuBox {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  padding-bottom: 15px;
}
.memberBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.memberBox > div {
  background: rgb(79 213 163);
  width: 120px;
  color: #fff;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  margin: 0 15px 15px 0;
  cursor: pointer;
}

.memberBox .pAnswer {
  background: rgb(55 197 144);
}

.viewSta {
  background: rgb(97, 97, 97);
  color: #bebebe;
  margin: 20% auto 20px;
  width: 300px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  cursor: pointer;
}
.szt {
  width: 100%;
  margin: 20px auto;
}
.sztFooter {
  padding: 20px 10px 50px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}
.toolList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}
.tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}
.tools > div:nth-child(1) {
  width: 60px;
}
.tools > div:nth-child(1) > img,
.workImg > img,
.workTx > img {
  width: 100%;
  height: 100%;
}
.nextStepOne {
  background: #6b92c9;
  color: #fff;
  width: 110px;
  text-align: center;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  border-radius: 5px;
  position: absolute;
  bottom: 50px;
  left: 40%;
  cursor: pointer;
}
.logoLive {
  width: 35px;
}
.anserBoxCss {
  box-sizing: border-box;
  padding: 20px 0;
}
.anserBoxCss >>> .el-radio__label {
  font-size: 18px;
}
.anserBoxCss >>> .el-radio__inner {
  border-radius: 0px !important;
}

.choose_style {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 10px 0 30px;
}

.choose_style span {
  background: #f8f9ff;
  color: #677fff;
  border: 1px solid #95b5ff;
  padding: 15px 20px;
  font-size: 25px;
  border-radius: 18px;
  cursor: pointer;
}

.choose_style span + span {
  margin-left: 25px;
}

.choose_style .active {
  color: #fff;
  background: #5e78fa;
}
.close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 20px;
  cursor: pointer;
}
.workBox {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.works {
  width: 31%;
  border: 1px solid #ececec;
  height: 160px;
  margin: 0 10px 10px 0;
  /* cursor: pointer; */
}
.workImg {
  width: 214px;
  height: 117px;
}
.workDetail {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
}
.workLeft {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin-left: 5px;
}
.workTx {
  width: 25px;
}
.workName {
  font-size: 14px;
  padding-left: 5px;
}
.workRight {
  font-size: 14px;
  color: #ccc;
  padding-right: 10px;
}
.returnButton {
  position: absolute;
  bottom: 20px;
  width: 230px;
  background: #616161;
  left: 35%;
  color: #ababab;
  text-align: center;
  border-radius: 5px;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  cursor: pointer;
}
</style>