pbl-teacher-table/src/components/pages/testStudent/index.vue

<template>
  <div class="pb_content" style="height: auto; width: 94%; margin: 10px auto;background: unset;">
    <div style="width:100%;padding:0 21px;background:#fff;border-radius: 5px;box-sizing: border-box;">
      <div class="pb_head top">
        <div>
          <span>表单中心</span>
        </div>
        <div class="student_button">
          <el-button type="primary" class="bgColor" @click="open()">个人中心</el-button>
        </div>
      </div>
      <div class="student_head">
        <div class="choose">
          <div class="all_choose" v-for="(item, index) in CourseType[0]" :key="index">
            <span v-if="CourseTypeJson[item.id].length">{{ item.name }}</span>
            <el-select v-if="CourseTypeJson[item.id].length" v-model="courseTypeId[item.id]" placeholder="请选择"
              @change="getTypeName">
              <el-option label="全部" value="1">全部</el-option>
              <el-option v-for="item1 in CourseTypeJson[item.id]" :key="item1.id" :label="item1.name" :value="item1.id">
              </el-option>
            </el-select>
          </div>
          <div class="student_search" v-if="typeArray.length">
            <span>类型</span>
            <el-select v-model="typeCheck" placeholder="请选择" clearable @change="search">
              <el-option v-for="(item, index) in typeArray" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="student_search">
            <span>状态</span>
            <el-select v-model="groupA" @change="search">
              <el-option value="0" label="全部"></el-option>
              <el-option value="1" label="已完成"></el-option>
              <el-option value="2" label="未完成"></el-option>
              <el-option value="4" label="逾期"></el-option>
              <!-- <el-option value="3" label="已批改"></el-option> -->
            </el-select>
            <!-- <el-select v-model="groupA" @change="search" v-else>
                <el-option value="4" label="全部"></el-option>
              </el-select> -->
          </div>
          <div @click="clear" class="clear" v-if="CourseType.length">重置</div>
        </div>

        <div class="student_right">
          <div class="head_left">
            <el-input v-model="courseName" class="student_input" placeholder="请输入项目名称"></el-input>
            <el-button class="course_button" @click="searchCourse">查询</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="pb_content_body" style="height: 100%;width:100%;">
      <div class="student_table" v-loading="isLoading">
        <div class="course_box">
          <!-- <div class="out_box" v-for="(item, index) in course" :key="index">
            <div class="bottom_box">
              <div class="title">
                <el-tooltip :content="item.title" placement="top" effect="dark">
                  <span>{{ item.title }}</span>
                </el-tooltip>
                <span
                  :class="{ is: (item.type == 1 && item.testCount > 1) || (item.type != 1 && item.testCount > 0), no: item.testCount == 0, isR: item.type == 3, isS: item.type == 1 && item.testCount == 1 }">{{
                    item.testCount > 0 ? item.type == 3 ? "已批改" : (item.type == 1 && item.testCount == 1) ? "已保存" : "已完成" :
                    "未完成" }}</span>
              </div>
              <div class="kc_t">创建人：{{ item.uname }}</div>
              <div class="kc_time">
                <span style="color: #4b4b4b">创建日期:</span>{{ item.time }}
              </div>
              <div class="kc_time">
                <span style="color: #4b4b4b">修改日期:</span>{{ item.utime }}
              </div>
            </div>
            <div class="three_bottom">
              <div @click="checkTest(item.courseId)" v-if="item.type == 3 || item.type == 2">查看答题</div>
              <div @click="goToCourse2(item.courseId)">{{ item.testCount > 0 ? item.type == 1 ? '继续答题' : '继续答题' : '进入答题'
              }}</div>
            </div>
          </div> -->
          <div class="test_box" v-for="(item, index) in course" :key="index">
            <div class="test_top">
              <div class="test_top_img" v-if="!item.typeN"></div>
              <el-tooltip :content="item.typeN" placement="top" effect="dark" v-else>
                <div class="test_top_img"
                  :class="{ gr: item.typeid == 'afc3f97f-2429-408d-8dcd-5e63a44d355a', md: item.typeid == '478bcccd-e3a1-472b-aa29-3ed7bc479469', js: item.typeid == '178a377a-b4f1-4a75-b3c3-2787a7c98784', yy: item.typeid == 'dda9728e-5f11-469e-89ee-aca518daf223', bj: item.typeid == 'afc3f97f-2429-408d-8dcd-5e63a44d355c' }">
                </div>
              </el-tooltip>
              <div class="test_top_title">
                <span>{{ item.title }}</span>
                <span>创建人：{{ item.uname }}</span>
              </div>
            </div>
            <div class="test_time">
              <span><span>创建日期</span></span><span>{{ item.time }}</span>
            </div>
            <div class="test_time">
              <span><span>修改日期</span></span><span>{{ item.utime }}</span>
            </div>
            <div class="test_time">
              <span><span>截止日期</span></span><span>{{ item.overtime ? item.overtime : '未设置' }}</span>
            </div>
            <div class="test_time">
              <span><span>填写范围</span></span><el-tooltip :content="item.juriP ? item.juriP : '所有人'" placement="top"
                effect="dark">
                <!-- content to trigger tooltip here -->
                <span>{{ item.juriP ? item.juriP : '所有人' }}</span>
              </el-tooltip>
            </div>
            <div class="test_time tset_type" v-if="typeArray.length">
              <span><span>类型</span></span>
              <span v-if="!item.typeN">未设置类型</span>
              <span v-else>{{ item.typeN }}</span>
            </div>
            <!-- <div class="test_time tset_type">
              <span><span>分类</span></span>
              <span v-if="!item.typename">未设置分类</span>
              <el-tooltip :content="item.typename" placement="top" effect="dark" v-else>
                <span>{{ item.typename }}</span>
              </el-tooltip>
            </div> -->
            <div class="test_btn">
              <div class="test_o_btn">
              </div>
              <div class="test_type"
                :class="{ is: (item.type == 1 && item.testCount > 1) || (item.type != 1 && item.testCount > 0), no: item.testCount == 0, isR: item.type == 3, isS: item.type == 1 && item.testCount == 1 }">
                <span>{{
                  item.testCount > 0 ? item.type == 3 ? "已批改" : (item.type == 1 && item.testCount == 1) ? "已保存" : "已完成" :
                  "未完成" }}</span>
              </div>
            </div>
            <div class="three_bottom">
              <!-- <div @click="checkTest(item.courseId)" v-if="item.type == 3 || item.type == 2">查看答题</div> -->
              <div @click="goToCourse2(item.courseId)">{{ item.testCount > 0 ? item.type == 1 ? '再次答题' : '再次答题' : '开始答题'
              }}</div>
            </div>
          </div>
          <div class="course_empty" v-if="course.length == 0">暂无数据</div>
        </div>
      </div>
    </div>
    <div class="student_page">
      <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total"
        v-if="page && course.length" style="padding-bottom: 20px" @current-change="handleCurrentChange"></el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible1" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
    <el-dialog title="查看提问" :visible.sync="dialogVisible" :append-to-body="true" width="750px" :before-close="handleClose"
      class="dialog_diy">
      <div>
        <div class="a_addBox">
          <CourseProblem :problemCourse="problemCourse"></CourseProblem>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="查看协同项目" :visible.sync="dialogVisibleCourse" :append-to-body="true" width="850px"
      :before-close="handleClose" class="dialog_diy">
      <div class="ct_box">
        <div class="out_box" v-for="(item, index) in courseTeam" :key="index" style="margin-left: 15px">
          <div class="tup">
            <img :src="item.cover != null && item.cover != ''
              ? JSON.parse(item.cover).length > 0
                ? JSON.parse(item.cover)[0].url
                : mr
              : mr
              " alt />
          </div>
          <div class="bottom_box">
            <div>{{ item.title }}</div>
            <div class="kc_t">创建人：{{ item.uname }}</div>
            <div class="kc_time">{{ item.time }}</div>
          </div>
          <div class="three_bottom">
            <!-- <div @click="jump(item.courseId)">查看内容</div> -->
            <div @click="
              goTo(
                '/studentAddCourse?cid=' +
                item.courseId +
                '&userid=' +
                userid +
                '&oid=' +
                oid +
                '&org=' +
                org +
                '&role=' +
                role
              )
              ">
              编辑
            </div>
          </div>
        </div>
        <div class="course_empty" v-if="courseTeam.length == 0">暂无数据</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleCourse = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
<script>
import "../../../common/aws-sdk-2.235.1.min";
import EditorBar from "../../../components/tools/wangEnduit";
import CourseProblem from "../components/courseProblem";
export default {
  components: { EditorBar, CourseProblem },
  data() {
    return {
      itemCount: 1,
      courseTitle: "",
      courseText: "",
      courseTime: "",
      isLoading: false,
      fileList: [],
      fileList1: [],
      homeworkList: [{ name: "" }],
      formLabelWidth: "100px",
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisibleCourse: false,
      dialogImageUrl: "",
      group: "",
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      role: this.$route.query.role,
      classid: this.$route.query.classid,
      isN: this.$route.query.isN,
      tcid: this.$route.query.tcid,
      Juri: "",
      groupList: [],
      JuriList: [],
      page: 1,
      total: 0,
      pageSize: 20,
      tableData: [],
      now: "",
      courseDetail: {},
      addCourse: {},
      groupA: "0",
      classX: "",
      course: [],
      courseName: "",
      mr: require("../../../assets/icon/kc1.png"),
      CourseType: [],
      CourseTypeJson: {},
      courseTypeId: {},
      courseTypeSon: [],
      isChoose: 0,
      problemCourse: null, //查看提问的项目
      courseTeam: [],
      typeCheck: "",
      typeArray: [],
    };
  },
  methods: {
    change(val) {
      console.log(val);
    },
    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;
        }
      }
    },
    addHomeworkBox() {
      this.homeworkList.push({ name: "" });
      this.itemCount++;
    },
    reduceHomeworkBox() {
      var a = this.homeworkList;
      a.splice(a.length - 1);
      this.itemCount--;
    },
    goTo(path) {
      this.$router.push(path);
    },
    goToCourse(courseId) {
      if (courseId) {
        this.$router.push(
          "/studentAddCourse?cid=" +
          courseId +
          "&userid=" +
          this.userid +
          "&oid=" +
          this.oid +
          "&org=" +
          this.org +
          "&role=" +
          this.role
        );
      } else {
        this.$router.push(
          "/addTest?userid=" +
          this.userid +
          "&oid=" +
          this.oid +
          "&org=" +
          this.org +
          "&role=" +
          this.role
        );
      }
      // this.$router.push(path);
    },
    goToCourse2(cid) {
      this.$router.push(
        "/doTest?cid=" +
        cid +
        "&userid=" +
        this.userid +
        "&oid=" +
        this.oid +
        "&org=" +
        this.org +
        "&type=2" +
        "&role=" +
        this.role +
        "&isN=" +
        this.isN +
        "&tcid=" +
        this.tcid
      );
    },
    checkTest(cid) {
      this.$router.push(
        "/checkTest?cid=" +
        cid +
        "&userid=" +
        this.userid +
        "&oid=" +
        this.oid +
        "&org=" +
        this.org +
        "&type=2" +
        "&role=" +
        this.role
      );
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    jump(cid) {
      // window.open(
      //   "//pbl.cocorobo.cn/pbl-student-table/dist/#/courseDetail?courseId=" +
      //     cid +
      //     "&userid=" +
      //     this.userid
      // );
       window.topU.postMessage({ cid: cid, screenType: "2s" }, "*");
    },
    get(cid) {
       window.topU.postMessage({ cid: cid, screenType: "3s" }, "*");
    },
    getA(cid) {
      this.$router.push(
        "/courseProgress?cid=" +
        cid +
        "&userid=" +
        this.userid +
        "&oid=" +
        this.oid +
        "&org=" +
        this.org
      );
    },
    handle_remove(file, fileList) {
      var _tmp = this.fileList;
      for (var i = 0, len = _tmp.length; i < len; i++) {
        if (_tmp[i].uid == file.uid) {
          _tmp.splice(i, 1);
          break;
        }
        this.fileList = _tmp;
      }
    },
    handle_remove1(file, fileList) {
      var _tmp = this.fileList1;
      for (var i = 0, len = _tmp.length; i < len; i++) {
        if (_tmp[i].uid == file.uid) {
          _tmp.splice(i, 1);
          break;
        }
        this.fileList1 = _tmp;
      }
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
      this.getCourse();
    },
    init() { },
    handleClose(done) {
      done();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible1 = true;
    },
    onExceed() {
      this.$message.error("项目海报仅支持上传一张，请删除后再进行上传");
    },
    //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;
        }
      }
    },
    searchCourse() {
      this.page = 1;
      this.getCourse();
    },
    clear() {
      if (this.CourseType.length) {
        for (var i = 0; i < this.CourseType[0].length; i++) {
          this.courseTypeId[this.CourseType[0][i].id] = "";
        }
      }
      this.typeCheck = ''
      this.page = 1
      this.getCourse();
    },
    getCourse() {
      var typeE = [];
      var typea, typeb, typec, typed, typef;
      if (this.isChoose == 1) {
        for (var i = 0; i < this.CourseType[0].length; i++) {
          if (this.courseTypeId[this.CourseType[0][i].id] == "1") {
            typeE.push(this.CourseType[0][i].id);
          } else if (this.courseTypeId[this.CourseType[0][i].id] != "") {
            if (this.CourseType[0][i].name == "年级") {
              typea = this.courseTypeId[this.CourseType[0][i].id];
            } else if (this.CourseType[0][i].name == "学科") {
              typeb = this.courseTypeId[this.CourseType[0][i].id];
            } else if (this.CourseType[0][i].name == "栏目") {
              typeb = this.courseTypeId[this.CourseType[0][i].id];
            } else if (this.CourseType[0][i].name == "学院") {
              typeb = this.courseTypeId[this.CourseType[0][i].id];
            } else if (this.CourseType[0][i].name == "新技能") {
              typec = this.courseTypeId[this.CourseType[0][i].id];
            } else if (this.CourseType[0][i].name == "赛道") {
              typed = this.courseTypeId[this.CourseType[0][i].id];
            } else if (this.CourseType[0][i].name == "项目类型") {
              typed = this.courseTypeId[this.CourseType[0][i].id];
            } else if (this.CourseType[0][i].name == "主题") {
              // typef = this.courseTypeId[this.CourseType[0][i].id];
            }
            this.courseTypeSon.push(
              this.courseTypeId[this.CourseType[0][i].id]
            );
          }
        }
      }
      this.isLoading = true;
      let params = {
        type: this.groupA,
        uid: this.userid,
        oid: this.oid,
        org: this.org,
        typea: typea != undefined ? typea : "",
        typeb: typeb != undefined ? typeb : "",
        typec: typec != undefined ? typec : "",
        typed: typed != undefined ? typed : "",
        typef: this.typeCheck,
        typeE: typeE.join(","),
        cu: "",
        cn: this.courseName,
        page: this.page,
        pageSize: this.pageSize,
      };
      this.ajax
        .get(this.$store.state.api + "selectTesttCourseCenter", params)
        .then((res) => {
          this.isLoading = false;
          this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
          this.course = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getTypeName() {
      this.$forceUpdate();
      this.page = 1;
      this.isChoose = 1;
      this.getCourse();
    },
    // searchCourse() {
    //   this.isLoading = true;
    //   let params = {
    //     cu: "",
    //     cn: this.courseName,
    //     page: this.page,
    //   };
    //   this.ajax
    //     .get(this.$store.state.api + "searchCourse", params)
    //     .then((res) => {
    //       this.isLoading = false;
    //       this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
    //       this.course = res.data[0];
    //     })
    //     .catch((err) => {
    //       this.isLoading = false;
    //       console.error(err);
    //     });
    // },
    deleteCourse(cid) {
      // if (this.time()) {
      this.$confirm("确定删除此项目吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.isLoading = true;
          let params = {
            cid: cid,
          };
          this.ajax
            .get(this.$store.state.api + "deleteStudentCourse", params)
            .then((res) => {
              this.isLoading = false;
              this.$message.success("删除成功");
              this.getCourse();
            })
            .catch((err) => {
              console.error(err);
            });
        })
        .catch(() => {
          loading.close();
          this.isLoading = false;
          return;
        });
      // }
    },
    selectAllType() {
      let params = {
        org: this.org && this.org != "" ? this.org : "",
        oid: this.oid && this.oid != "" ? this.oid : "",
      };
      this.ajax
        .get(this.$store.state.api + "selectAllTypeT", params)
        .then((res) => {
          this.CourseType = res.data;

          for (var i = 0; i < res.data[0].length; i++) {
            if (res.data[0][i].id == "34629907-d02f-11ec-8c78-005056b86db5") {
              res.data[0][i].name = "学科";
            } else if (
              res.data[0][i].id == "34628934-d02f-11ec-8c78-005056b86db5"
            ) {
              res.data[0][i].name = "年级";
            }
            if (!this.cid) {
              this.courseTypeId[res.data[0][i].id] = "";
            }
            if (!this.CourseTypeJson[res.data[0][i].id]) {
              this.CourseTypeJson[res.data[0][i].id] = [];
            }

            if (res.data[2].length == 0 && res.data[3].length == 0) {
              // for (var j = 0; j < res.data[1].length; j++) {
              //   if (res.data[0][i].id == res.data[1][j].pid) {
              //     this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]); // 去除公共分类
              //   }
              // }
              // if(this.org == '150e3120-9195-11ed-b13d-005056b86db5'){
              for (var j = 0; j < res.data[1].length; j++) {
                if (res.data[0][i].id == res.data[1][j].pid) {
                  this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]); // 去除公共分类
                }
              }
              // }else{
              //   this.CourseType = []
              // }
            } else {
              if (res.data[2].length > 0) {
                for (var j = 0; j < res.data[2].length; j++) {
                  if (res.data[0][i].id == res.data[2][j].pid) {
                    this.CourseTypeJson[res.data[0][i].id].push(res.data[2][j]); // 去除公共分类
                  }
                }
              }
              if (res.data[3].length > 0) {
                for (var j = 0; j < res.data[3].length; j++) {
                  if (res.data[0][i].id == res.data[3][j].pid) {
                    this.CourseTypeJson[res.data[0][i].id].push(res.data[3][j]); // 去除公共分类
                  }
                }
              }
            }
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectTestType() {
      let params = {
        oid: this.oid,
      };
      this.ajax
        .get(this.$store.state.api + "selectTestType", params)
        .then((res) => {
          this.typeArray = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectType() {
      this.ajax
        .get(this.$store.state.api + "selectStudentType")
        .then((res) => {
          this.CourseType = res.data;
          for (var i = 0; i < res.data[0].length; i++) {
            if (!this.cid) {
              this.courseTypeId[res.data[0][i].id] = "";
            }
            if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
              if (res.data[0][i].name == "栏目") {
                this.CourseType[0][i].name = "主题";
              }
            }
            for (var j = 0; j < res.data[1].length; j++) {
              if (res.data[0][i].id == res.data[1][j].pid) {
                if (!this.CourseTypeJson[res.data[0][i].id]) {
                  this.CourseTypeJson[res.data[0][i].id] = [];
                }
                this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]); //去除公共分类
              }
            }
          }
          this.selectTypeByOid();
          this.selectTypeByOrg();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectTypeByOid() {
      let params = {
        oid: this.oid,
      };
      this.ajax
        .get(this.$store.state.api + "selectStudentTypeByOid", params)
        .then((res) => {
          for (var i = 0; i < res.data[0].length; i++) {
            for (var j = 0; j < res.data[1].length; j++) {
              if (res.data[0][i].id == res.data[1][j].pid) {
                if (!this.CourseTypeJson[res.data[0][i].id]) {
                  this.CourseTypeJson[res.data[0][i].id] = [];
                }
                this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]);
              }
            }
          }
          this.$forceUpdate();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectTypeByOrg() {
      let params = {
        oid: this.org,
      };
      this.ajax
        .get(this.$store.state.api + "selectStudentTypeByOid", params)
        .then((res) => {
          for (var i = 0; i < res.data[0].length; i++) {
            for (var j = 0; j < res.data[1].length; j++) {
              if (res.data[0][i].id == res.data[1][j].pid) {
                if (!this.CourseTypeJson[res.data[0][i].id]) {
                  this.CourseTypeJson[res.data[0][i].id] = [];
                }
                this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]);
              }
            }
          }
          this.$forceUpdate();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    open() {
      this.$router.push(
        "/testPerson?userid=" +
        this.userid +
        "&oid=" +
        this.oid +
        "&org=" +
        this.org +
        "&role=" +
        this.role
      );
    },
    openCourse() {
      this.dialogVisibleCourse = true;
      this.getTeamCourse();
    },
    getTeamCourse() {
      let params = {
        uid: this.userid,
        oid: this.oid,
      };
      this.ajax
        .get(this.$store.state.api + "selectCourseTeam", params)
        .then((res) => {
          this.courseTeam = res.data[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    search() {
      this.page = 1;
      this.getCourse();
    },
    checkProblem(res) {
      this.problemCourse = res;
      this.dialogVisible = true;
    },
    copyCourse(cid) {
      let params = [
        {
          cid: cid,
          uid: this.userid,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "copySCourse", params)
        .then((res) => {
          this.page = 1;
          if (this.role == "1") {
            this.groupA = "0";
          } else {
            this.groupA = "0";
          }
          this.$message.success("复制成功");
          this.clear();
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  created() {
    this.page = 1;
    // this.selectAllType();
    this.getCourse();
    this.selectTestType();
  },
};
</script>
  
<style scoped>
@media screen and (max-width: 1380px) {
  .test_box {
    width: calc(100% / 4 - (15px * 3) / 4) !important;
  }

  .test_box:nth-child(5n) {
    margin-right: 15px !important;
  }

  .test_box:nth-child(4n) {
    margin-right: 0 !important;
  }
}

@media screen and (max-width: 1080px) {
  .test_box {
    width: calc(100% / 3 - (15px * 2) / 3) !important;
  }

  .test_box:nth-child(5n) {
    margin-right: 15px !important;
  }

  .test_box:nth-child(4n) {
    margin-right: 15px !important;
  }

  .test_box:nth-child(3n) {
    margin-right: 0 !important;
  }
}

.dialog_diy>>>.el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}

.dialog_diy>>>.el-dialog__title {
  color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn {
  top: 19px;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog_diy>>>.el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}

.student_head>>>.el-button--primary {
  background-color: #3681fc;
}

.xls_button {
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  color: rgb(34, 104, 188);
}

.student_head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 0 15px;
}

.top {
  display: flex;
  justify-content: space-between;
  width: 100% !important;
  box-sizing: border-box;
  margin: 0px auto;
  padding: 10px 0;
  height: 54px;
}

.bgColor {
  background: #3681fc;
}

.student_search {
  display: flex;
  align-items: center;
  /* width: calc(100% / 3); */
  min-width: 95px;
}

.student_search span {
  margin: 0 10px 0 0;
  min-width: 50px;
  text-align-last: justify;
}

.student_button {
  display: flex;
  overflow: hidden;
  height: 40px;
}

.upload-demo {
  display: flex;
  flex-direction: column;
  align-items: end;
  /* position: relative; */
  width: 100px;
  overflow: hidden;
}

.student_table {
  padding: 0 0;
  height: 100%;
  /* overflow: auto; */
  min-height: 360px;
}

.student_empty {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-table>>>.even_row {
  background-color: #f1f1f1;
}

.time {
  font-size: 13px;
  color: #999;
}

.course_button {
  padding: 10px 20px;
}

.course_button_box {
  display: flex;
  margin-top: 5px;
  justify-content: space-between;
}

.course_rate {
  margin-top: 5px;
}

.course_view {
  display: flex;
  align-items: center;
  margin: 5px 0 0 0;
}

.course_view i {
  background-image: url("../../../assets/liulan.png");
  width: 25px;
  height: 25px;
  background-size: 100% 100%;
  /* margin-top: 1px; */
  line-height: 25px;
  vertical-align: text-top;
  background-repeat: no-repeat;
}

.image {
  width: 100%;
  height: 150px;
  display: block;
}

.course_box {
  display: flex;
  flex-wrap: wrap;
}

.student_page {
  width: 100%;
  margin: 0 auto;
}

.course_create_box {
  font-size: 18px;
}

.course_name {
  margin-top: 10px;
}

.course_name span {
  margin-bottom: 10px;
  display: block;
}

.homework_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.course_homework {
  width: 130px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 0 10px 10px 0;
}

.course_type {
  margin-top: 10px;
  display: flex;
}

.course_type1 span {
  margin-bottom: 10px;
  display: block;
}

.course_type2 {
  margin-left: 20px;
}

.course_type2 span {
  margin-bottom: 10px;
  display: block;
}

.course_empty {
  color: rgb(110, 110, 110);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el_cards>>>.el-card__body {
  height: 100%;
}

.courseBtnBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100% - 170px);
  padding: 10px;
}

.wordUpload {
  display: flex;
}

.wordUpload>.buttonUp {
  margin-right: 5px;
}

.out_box {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 250px;
  background: #fff;
  margin-right: 25px;
  border: 1px solid #ccc;
  height: fit-content;
  box-sizing: border-box;
  border-radius: 0px 0px 5px 5px;
  /* overflow: hidden; */
  margin-bottom: 15px;
  position: relative;
  padding-top: 10px;
}

.bottom_box {
  display: flex;
  padding: 0 0 10px 10px;
  flex-direction: column;
  box-sizing: border-box;
  height: 140px;
  flex-wrap: nowrap;
  justify-content: space-evenly;
}

.bottom_box>.title {
  width: 230px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bottom_box>.title>span:nth-child(1) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
  font-size: 18px;
  width: 100%;
}

.bottom_box>.title>span:nth-child(2) {
  font-size: 14px;
  min-width: 60px;
  border: 1px solid;
  text-align: center;
  padding: 3px 0;
  /* margin-left: 10px; */
}

.bottom_box>.title>.is {
  color: rgb(0, 182, 0);
}

.bottom_box>.title>.no {
  color: rgb(240, 66, 66);
}

.bottom_box>.title>.isR {
  color: #3681fc;
}

.bottom_box>.title>.isS {
  color: #ffad20;
}

.tup {
  width: 100%;
  height: 141.06px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.tup>img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kc_time {
  margin-top: 8px;
  font-size: 14px;
  color: #999;
}

.kc_t {
  margin-top: 5px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.three_bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 40px;
  align-items: center;
  background: #f5f4f4;
  font-size: 14px;
}

.three_bottom>div {
  cursor: pointer;
}

.three_bottom>div:hover {
  color: #79a2ff;
}

.head_left {
  display: flex;
  margin-top: 15px;
}

.student_input>>>.el-input__inner {
  height: 40px;
  width: 190px;
  font-size: 13px;
  padding: 0 10px;
}

.course_button {
  color: #fff;
  background: #3681fc;
  width: 75px;
  height: 40px;
  padding: 0 !important;
  font-size: 12px;
  line-height: 40px;
}

.all_choose {
  /* margin: 15px 0 10px;
  height: 20%; */
  display: flex;
  flex-direction: row;
  align-items: center;
  /* max-width: calc(100% / 4 - 50px); */
}

.all_choose>span {
  min-width: 50px;
  display: block;
  margin-right: 10px;
  text-align-last: justify;
}

.choose {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: space-between;
  height: 100%;
  justify-content: flex-start;
  /* width: 60%;
  min-width: 868px; */
  align-items: center;
}

.choose>div {
  margin-right: 10px;
  /* width: calc(100% / 4 - 50px) */
  width: 180px;
  margin-top: 15px;
}

.choose>.clear {
  width: 70px;
}

/* 
.choose>div:nth-child(3) {
  margin-left: 1%;
  width: 32.33333%;
}

.choose>div:nth-child(5) {
  margin: 5px 0 0 1%;
} */

.choose>div:nth-child(4)>span {
  /* width: 74px !important;
    min-width: 74px; */
}

.choose>div:nth-child(4)>>>.el-select {
  /* width: 217.5px;
    min-width: 215.06px; */
}

.clear {
  width: 70px;
  max-width: 70px;
  height: 35px;
  background: #3681fc;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  line-height: 35px;
  cursor: pointer;
  margin-left: 20px;
}

.ct_box {
  height: 500px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
}

.myCourse {
  position: absolute;
  background: #3c3c3c;
  width: 65px;
  height: 25px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  line-height: 25px;
  top: 0;
  right: 0;
}

.xtCourse {
  position: absolute;
  background: #3681fc;
  width: 70px;
  height: 30px;
  border-radius: 30px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  top: 5px;
  left: 5px;
}

.subClick {
  font-size: 16px;
  cursor: pointer;
  margin-left: 10px;
  /* color: #ab582f; */
  color: #409eff;
}

.more {
  position: relative;
}

.more:hover div {
  display: block;
  color: #000;
}

.more div {
  position: absolute;
  bottom: 0px;
  transform: translate(-50%, 100%);
  background: #f5f4f4;
  padding: 10px 20px;
  z-index: 99;
  width: 40px;
  border-radius: 5px;
  box-shadow: 0 0 3px 3px #80808020;
  display: none;
}

.more div>span+span {
  margin-top: 10px;
}

.more div>span {
  display: block;
  width: 100%;
  text-align: center;
}

.more div>span:hover {
  color: #79a2ff;
}

.test_box {
  width: calc(100% / 5 - (15px * 4) / 5);
  /* width: 250px; */
  background: #fff;
  margin-right: 25px;
  border-radius: 5px;
  padding: 20px;
  margin: 5px 15px 10px 0;
  box-sizing: border-box;
}

.test_box:nth-child(5n) {
  margin-right: 0;
}

.test_top {
  width: 100%;
  display: flex;
  align-items: center;
}

.test_top>.test_top_img {
  height: 40px;
  width: 40px;
  background: rgb(108 150 217);
  margin-right: 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.test_top>.gr {
  background: rgb(142, 189, 176);
}

.test_top>.md {
  background: rgb(139, 174, 227);
}

.test_top>.js {
  background: rgb(64, 149, 174);
}

.test_top>.yy {
  background: rgb(98, 102, 188);
}

.test_top>.bj {
  background: rgb(98, 158, 188);
}


.test_top>.test_top_img:after {
  content: '';
  display: block;
  width: 23px;
  height: 23px;
  background-size: 100% 100%;
  background-image: url('../../../assets/icon/test/all_icon_b.png');
}

.test_top>.gr:after {
  background-image: url('../../../assets/icon/test/gr_icon_b.png');
}

.test_top>.md:after {
  background-image: url('../../../assets/icon/test/md_icon_b.png');
}

.test_top>.js:after {
  background-image: url('../../../assets/icon/test/js_icon_b.png');
}

.test_top>.yy:after {
  background-image: url('../../../assets/icon/test/yy_icon_b.png');
}

.test_top>.bj:after {
  background-image: url('../../../assets/icon/test/bj_icon_b.png');
}

.test_top>.test_top_title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 40px;
  width: calc(100% - 40px - 10px)
}

.test_top>.test_top_title>span {
  width: 100;
  display: block;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.test_top>.test_top_title>span:nth-child(1) {
  font-size: 15px;
}

.test_top>.test_top_title>span:nth-child(2) {
  font-size: 14px;
  color: rgb(58, 131, 252);
}

.test_box>.test_time {
  margin-top: 10px;
  font-size: 14px;
  color: #a7a7a7;
  display: flex;
}

.test_box>.test_time>span:nth-child(1) {
  width: 70px;
  display: flex;
}


.test_box>.test_time>span:nth-child(1)>span {
  width: 100%;
  text-align-last: justify;
}

.test_box>.test_time>span:nth-child(1)::after {
  content: '：';
}

.test_box>.test_time>span:nth-child(2) {
  max-width: calc(100% - 70px);
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

.test_box>.test_btn {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.test_box>.test_btn>.test_o_btn {
  display: flex;
  align-items: center;
}


.test_box>.test_btn>.test_type {
  font-size: 12px;
  border-radius: 5px;
  border: 1.5px solid;
  padding: 3px 8px;
}

.test_box>.test_btn>.is {
  color: rgb(57, 204, 127);
  background-color: rgba(57, 204, 127, .1);
}

.test_box>.test_btn>.no {
  color: rgb(240, 66, 66);
  background-color: rgba(240, 66, 66, .1);
}



.test_box>.test_btn>.isR {
  color: rgb(0, 98, 255);
  background-color: rgba(0, 98, 255, .1);
}

.test_box>.test_btn>.isS {
  color: rgb(255, 173, 31);
  background-color: rgba(255, 173, 31, .1);
}

.test_box .three_bottom {
  margin-top: 10px;
}
</style>