pbl-teacher-table/src/components/pages/liyuan/page/safeTest.vue

<template>
    <div class="i_body_box" style="padding: 0 90px;">
        <backPage style="padding: 40px 0 0;" tit="安全巡查"></backPage>
        <div class="check_nav" >
            <!-- <div class="nav all" v-show="this.ExamineBase.length > 0" :class="{ active: type == '1' }" @click="checkType('1')">
                年度考核
            </div> -->
            <div class="nav all" :class="{ active: checkTypeValue == typeListStr }" 
            @click="changeShowType(typeListStr)">
                全部
            </div>
            <div class="nav" v-for="item in typeList" :key="item.id" :class="{ active: checkTypeValue == item.id,all:['8bfa67ce-e82a-11ef-b508-005056924926','9d3289d2-e82a-11ef-b508-005056924926','a824c728-e82a-11ef-b508-005056924926','8085418b-e82a-11ef-b508-005056924926'].includes(item.id)}" 
            @click="changeShowType(item.id,item)">{{ item.name }}</div>
           
        </div>
        <div class="check_box" v-loading="loading" >
            <!-- <examine v-if="type==1"></examine> -->
            <div class="noneData"  v-if="!worksArray.length && type!=1" style="text-align: center; margin-top: 20px;">
                暂无数据
            </div>
            <template  v-if="type!=1">
                <div class="test_panel" v-for="(item, index) in worksArray" :key="index">
                    <div class="test_panel_title">
                        <div class="title" :style="{paddingLeft: (item.array.length > 0 || item.carray.length > 0) ? '0' : '30px'}" @click="openWork(index)">
                            <span class="open" :class="{active: item.open}" v-if="item.array.length > 0 || item.carray.length > 0"></span>
                            <el-tooltip :content="item.title" placement="top" effect="dark">
                                <span class="titleN">{{ item.title }}</span>
                            </el-tooltip>
                        </div>
                        <div class="state">
                            <span :class="{ is: item.array.length > 0, no: !item.array.length }">{{ item.array.length > 0 ? "已完成" : "未完成" }}</span>
                        </div>
                        <div class="time">
                            <span v-if="item.overtime" :class="{isDead: isDeadlinePassed(item.overtime)}">截止时间：{{ item.overtime }}</span>
                            <span v-else></span>
                        </div>
                        <div class="creator" :style="{paddingRight:(!item.carray.length > 0) ? '0' : '0px'}">
                            <el-tooltip :content="item.username" placement="top" effect="dark">
                                <span>创建者：{{ item.username }}</span>
                            </el-tooltip>
                        </div>
                        <div class="editBtn2" :style="`${item.open?'display:flex':''}`" v-if="!item.carray.length > 0">
                            <span v-if="item.array.length === 0">去填写</span>
                            <span v-else>再填一份</span>
                        </div>
                        <div @click="doTest2(item.courseid)" class="editBtn" :style="`${item.open?'display:flex':''}`" v-if="!item.carray.length > 0">
                            <span v-if="item.array.length === 0">去填写</span>
                            <span v-else>再填一份</span>
                        </div>
                    </div>
                    <div class="test_panel_box" v-if="item.open">
                        <div class="test_add_box"
                            v-if="item.array">
                            <div class="test" v-for="(test, index) in item.array" :key="test.id">
                                <div class="time">
                                    <span>提交记录{{item.array.length - index}}</span>
                                </div>
                                <!-- <img @click="deleteTest(test.id)" class="delete"
                                    src="../../../../assets/icon/test/delete.png" alt="" /> -->
                                <div class="utime">
                                    <span>{{ test.utime }}</span>
                                </div>
                                <div class="mask">
                                    <div @click="doTest(test.courseid, test.id)">
                                        <span>编辑</span>
                                    </div>
                                    <div @click="deleteTest(test.id)" class="delete">
                                        <span>删除</span>
                                    </div>
                                    <!-- <div @click="checkTest(test.courseid, test.id)">
                                        <span></span><span>查看</span>
                                    </div>
                                    <div @click="copyTest(test.id)">
                                        <span></span><span>复制</span>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                        <div class="test_add_box"
                            v-else-if="item.carray" v-loading="!item.carray.length">
                            <!-- <div class="courseLength" v-for="(course, index) in item.carray" :key="index" @click="doTest3(item, course)">
                                <span class="finish" :class="{is: course.array.length}"></span>
                                <span>{{ index+1 }}、</span>
                                <span>{{ course.title }}</span>
                                <span>{{ course.username }}</span>
                            </div> -->
                            <div class="test courseLength" v-for="(course, index) in item.carray" :key="index">
                                <div class="time">
                                    <el-tooltip :content="course.title+'-'+course.username" placement="top" effect="dark">
                                        <span>{{ course.title }}-{{ course.username }}</span>
                                    </el-tooltip>
                                </div>
                                <div class="finishBox" :class="{is: course.array.length}">
                                    <span class="finish"></span>
                                    <span v-if="course.array.length">已评分</span>
                                    <span v-else>未评分</span>
                                </div>
                                <div class="utime" style="margin-left: 30px;">
                                    <span v-if="course.array.length">{{ course.array[0].utime }}</span>
                                    <span v-else></span>
                                </div>
                                <div class="mask">
                                    <div @click="doTest3(item, course)">
                                        <span>评分</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            
        </div>
    </div>
</template>

<script>
import backPage from '../components/backPage.vue'
export default {
    
    components:{
        backPage
    },
    data() {
        return {
            userid: this.$route.query.userid,
            oid: this.$route.query.oid,
            type: "",
            typeId:'fb2a14c5-e828-11ef-b508-005056924926',
            typeList:[],
            ExamineBase: [],
            typeArray: [],
            typeArrayCheck: [],
            worksArray: [],
            org: this.$route.query.org,
            role: this.$route.query.role,
            loading: false,
            checkTypeValue:""
        };
    },
    computed: {
        getNum() {
            return function (array) {
                let _array = JSON.parse(array);
                let num = 0;
                _array.forEach(el => {
                    if ((el.ttype == 3 || el.ttype == 2) && el.array.length > 0) {
                        el.array.forEach(item => {
                            if (item.ttype == 2 && item.array.length > 0) {
                                item.array.forEach(item2 => {
                                    if (item2.ttype == 1 && item2.json) {
                                        num++;
                                    }
                                });
                            } else if (item.ttype == 1 && item.json) {
                                num++;
                            }
                        });
                    } else if (el.ttype == 1 && el.json) {
                        num++;
                    }
                });
                return num;
            };
        },
        getScore() {
            return function (array) {
                // let _array = JSON.parse(array)
                let _score = 0;
                let scoreArray = [];
                for (var i = 0; i < array.length; i++) {
                    let _array = JSON.parse(array[i].courseJson);
                    let score = 0;
                    for (var j = 0; j < _array.length; j++) {
                        let el = _array[j];
                        if ((el.ttype == 3 || el.ttype == 2) && el.array.length > 0) {
                            for (var k = 0; k < el.array.length; k++) {
                                let item = el.array[k];
                                if (item.ttype == 2 && item.array.length > 0) {
                                    for (var z = 0; z < item.array.length; z++) {
                                        let item2 = item.array[z];
                                        if (item2.ttype == 1 && item2.json && item2.json.score2) {
                                            score += parseInt(item2.json.score2);
                                        }
                                    }
                                } else if (item.ttype == 1 && item.json && item.json.score2) {
                                    score += parseInt(item.json.score2);
                                }
                            }
                        } else if (el.ttype == 1 && el.json && el.json.score2) {
                            score += parseInt(el.json.score2);
                        }
                    }
                    scoreArray.push(score);
                }
                scoreArray.forEach(el => {
                    _score += el;
                });
                console.log(scoreArray);
                return _score ? _score / scoreArray.length : 0;
            };
        },
        getImg() {
            return function (array) {
                let _array = JSON.parse(array);
                let _img = "";
                s: for (var j = 0; j < _array.length; j++) {
                    let el = _array[j];
                    if ((el.ttype == 3 || el.ttype == 2) && el.array.length > 0) {
                        for (var k2 = 0; k2 < el.array.length; k2++) {
                            let item = el.array[k2];
                            console.log(k2);
                            if (item.ttype == 2 && item.array.length > 0) {
                                for (var z = 0; z < item.array.length; z++) {
                                    let item2 = item.array[z];
                                    if (
                                        item2.ttype == 1 &&
                                        item2.type == 5 &&
                                        item2.json &&
                                        item2.json.file &&
                                        item2.json.file.length > 0
                                    ) {
                                        for (var k4 = 0; k4 < item2.json.file.length; k4++) {
                                            let ik = item2.json.file[k4];
                                            if (ik.type == 3) {
                                                _img = ik.url;
                                                break s;
                                            }
                                        }
                                    }
                                }
                            } else if (
                                item.ttype == 1 &&
                                item.type == 5 &&
                                item.json &&
                                item.json.file &&
                                item.json.file.length > 0
                            ) {
                                for (var k3 = 0; k3 < item.json.file.length; k3++) {
                                    let ik = item.json.file[k3];
                                    if (ik.type == 3) {
                                        _img = ik.url;
                                        break s;
                                    }
                                }
                            }
                        }
                    } else if (
                        el.ttype == 1 &&
                        el.type == 5 &&
                        el.json &&
                        el.json.file &&
                        el.json.file.length > 0
                    ) {
                        for (var k = 0; k < el.json.file.length; k++) {
                            let ik = el.json.file[k];
                            if (ik.type == 3) {
                                _img = ik.url;
                                break s;
                            }
                        }
                    }
                }
                return _img;
            };
        },
        typeListStr(){
          let _result = "";

          if(this.typeList.length){
            _result = this.typeList.map(i=>i.id)
            _result.push(this.typeId);
            _result = _result.join(',')
          }

          return _result;
        }
    },
    watch:{
      typeId(newValue){
        this.changeShowType(newValue)
      }
    },
    methods: {
        getNavType() {
            let params = {
                oid: "",//this.oid
            };
            this.ajax
                .get(this.$store.state.api + "selectTestType", params)
                .then(res => {
                    let _data = res.data[0];
                    console.log('_data',_data);
                    // _data.fliter(e=>{

                    // })
                    this.typeList = _data.filter(function(item, index) {
                        return item.pid == 'fb2a14c5-e828-11ef-b508-005056924926';
                    });
                    this.changeShowType(this.typeListStr)

                    //  = _data.fliter(e =>{ return e.pid == 'e18d88b3-e828-11ef-b508-005056924926'})
                    console.log('this.typeList',this.typeList);

                    
                })
                .catch(err => {
                    console.log(err);
                });
        },
        getPageBase(type = 1) {
            let params = {
                typ: type,
                org: this.org,
                oid: this.oid
            };
            this.ajax
                .get(this.$store.state.api + "selectTestExamineBase", params)
                .then(res => {
                this.ExamineBase = res.data[0];
                if(type == 1 && !res.data[0].length){
                    this.getPageBase(2)
                }
                // console.log("selectTestExamineBase", res.data);
                })
                .catch(error => {
                console.log(error);
            });
        },
        isDeadlinePassed(deadline) {
            let _line = new Date(deadline)
            const currentDate = new Date();
            return currentDate > _line;
        },
        checkType(type) {
            this.type = type;
            this.getWorks();
        },
        selectTestType(type) {
            let params = {
                oid: this.oid
            };
            this.ajax
                .get(this.$store.state.api + "selectTestType", params)
                .then(res => {
                    this.typeArray = res.data[0];
                    if(type == 1){
                        this.type = ''
                        // if (this.typeArray.length) {
                        //     this.type = this.typeArray[0].id;
                        // } else {
                        //     this.type = '0';
                        // }
                    }
                    this.getWorks()
                })
                .catch(err => {
                    console.error(err);
                });
        },
        getWorks() {
            this.loading = true;
            let params = {
                uid: this.userid,
                typeid: this.checkTypeValue
            };
            this.ajax
                .get(this.$store.state.api + "getTestWorksPerson_2type", params)
                .then(res => {
                    let array = res.data[0];
                    let array2 = res.data[1];
                    // 用于存储归类后的数据的对象
                    let worksArray = {};

                    // 遍历原始数据，根据 parentId 进行分组
                    array2.forEach(item => {
                        // console.log(item.chapters);
                        worksArray[item.courseId] = {
                            id: item.id,
                            courseid: item.courseId,
                            title: item.title,
                            time: item.time,
                            utime: item.utime,
                            overtime: item.overtime,
                            username: item.username,
                            chapters: item.chapters,
                            brief: item.brief,
                            typeid: item.typeid,
                            array: item.typeid == 'dda9728e-5f11-469e-89ee-aca518daf123' ? 0 : [],
                            carray: [],
                            open: false
                        };
                    });
                    worksArray = Object.values(worksArray);
                    worksArray.forEach(async el => {
                        if (el.typeid == 'dda9728e-5f11-469e-89ee-aca518daf123') {
                            let courseJson = this.returnCourseJSON(el.chapters)
                            if(courseJson && courseJson.courses.length){
                                let courses = courseJson.courses.join(',')
                                let _res = await this.getAllCourse(courses)
                                console.log(_res);
                                let _carray = []
                                for(var i=0;i<_res.length;i++){
                                    _carray.push({
                                        courseid: _res[i].courseId,
                                        title: _res[i].title,
                                        username: _res[i].username,
                                        array: []
                                    })
                                }
                                el.carray = _carray
                            }
                        }

                        array.forEach(el2 => {
                            if (el.courseid == el2.courseid && el.typeid != 'dda9728e-5f11-469e-89ee-aca518daf123') {
                                el.array.push(el2);
                            }

                            if(el.courseid == el2.courseid && el.typeid == 'dda9728e-5f11-469e-89ee-aca518daf123'){
                                let courseid = this.returnCourseId(el2.courseJson)
                                for(var c = 0; c<el.carray.length;c++){
                                    if(el.carray[c].courseid == courseid){
                                        el.carray[c].array.push(el2);
                                        break
                                    }
                                }
                            }
                        });
                    });
                    // worksArray[item.courseid].array.push(item);

                    this.worksArray = worksArray;
                    this.loading = false;

                    this.$forceUpdate();
                })
                .catch(err => {
                    this.loading = false;
                    console.error(err);
                });
        },
        openWork(index){
            if(this.worksArray[index].array.length === 0 && this.worksArray[index].carray.length === 0){
                return
            }
            this.worksArray[index].open = !this.worksArray[index].open
            this.$forceUpdate()
        },
        returnA() {
            this.$router.push(
                "/testStudent?userid=" +
                this.userid +
                "&oid=" +
                this.oid +
                "&org=" +
                this.org +
                "&role=" +
                this.role
            );
        },
        checkTest(cid, tid) {
            this.$router.push(
                "/checkTest?cid=" +
                cid +
                "&tid=" +
                tid +
                "&userid=" +
                this.userid +
                "&oid=" +
                this.oid +
                "&org=" +
                this.org +
                "&type=3" +
                "&role=" +
                this.role
            );
        },
        doTest(cid, tid) {
            this.$router.push(
                "/doTest?cid=" +
                cid +
                "&tid=" +
                tid +
                "&userid=" +
                this.userid +
                "&oid=" +
                this.oid +
                "&org=" +
                this.org +
                "&type=3" +
                "&role=" +
                this.role
            );
        },
        doTest2(cid) {
            this.$router.push(
                "/doTest?cid=" +
                cid +
                "&userid=" +
                this.userid +
                "&oid=" +
                this.oid +
                "&org=" +
                this.org +
                "&type=3" +
                "&role=" +
                this.role
            );
        },
        doTest3(item, course){
            if(course.array.length){
                this.$router.push(
                    "/doTest?cid=" +
                    item.courseid +
                    "&tid=" +
                    course.array[0].id +
                    "&userid=" +
                    this.userid +
                    "&oid=" +
                    this.oid +
                    "&org=" +
                    this.org +
                    "&type=3" +
                    "&role=" +
                    this.role
                );
            }else{
                this.$router.push(
                    "/doTest?cid=" +
                    item.courseid +
                    "&userid=" +
                    this.userid +
                    "&oid=" +
                    this.oid +
                    "&org=" +
                    this.org +
                    "&type=3" +
                    "&courseid=" +
                    course.courseid +
                    "&role=" +
                    this.role
                );
            }
        },
        copyTest(tid) {
            let params = [
                {
                    tid: tid,
                    uid: this.userid
                }
            ];
            this.ajax
                .post(this.$store.state.api + "copyTestWorks", params)
                .then(res => {
                    this.$message.success("复制成功");
                    this.getWorks();
                })
                .catch(err => {
                    console.error(err);
                });
        },
        deleteTest(tid) {
            let _this = this;
            _this
                .$confirm("确定删除此填写的表单么？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    let params = [
                        {
                            tid: tid
                        }
                    ];
                    _this.ajax
                        .post(_this.$store.state.api + "deleteTestCourseWorks", params)
                        .then(res => {
                            _this.$message.success("删除成功");
                            _this.getWorks();
                        })
                        .catch(err => {
                            console.error(err);
                        });
                })
                .catch(() => {
                    return;
                });
        },
        returnCourseJSON(array) {
            let _array = JSON.parse(array);
            let courseJson = '';
            s: for (var j = 0; j < _array.length; j++) {
                let el = _array[j];
                if ((el.ttype == 3 || el.ttype == 2) && el.array.length > 0) {
                    for (var k2 = 0; k2 < el.array.length; k2++) {
                        let item = el.array[k2];
                        console.log(k2);
                        if (item.ttype == 2 && item.array.length > 0) {
                            for (var z = 0; z < item.array.length; z++) {
                                let item2 = item.array[z];
                                if (
                                    item2.ttype == 1 &&
                                    item2.type == 6 &&
                                    item2.json
                                ) {
                                    courseJson = item2.json
                                    break s;
                                }
                            }
                        } else if (
                            item.ttype == 1 &&
                            item.type == 6 &&
                            item.json
                        ) {
                            courseJson = item.json
                                    break s;
                        }
                    }
                } else if (
                    el.ttype == 1 &&
                    el.type == 6 &&
                    el.json
                ) {
                    courseJson = el.json
                                    break s;
                }
            }
            return courseJson;
        },
        returnCourseId(array) {
            let _array = JSON.parse(array);
            let courseJson = '';
            s: for (var j = 0; j < _array.length; j++) {
                let el = _array[j];
                if ((el.ttype == 3 || el.ttype == 2) && el.array.length > 0) {
                    for (var k2 = 0; k2 < el.array.length; k2++) {
                        let item = el.array[k2];
                        console.log(k2);
                        if (item.ttype == 2 && item.array.length > 0) {
                            for (var z = 0; z < item.array.length; z++) {
                                let item2 = item.array[z];
                                if (
                                    item2.ttype == 1 &&
                                    item2.type == 6 &&
                                    item2.json && item2.json.answer2
                                ) {
                                    courseJson = item2.json.answer2
                                    break s;
                                }
                            }
                        } else if (
                            item.ttype == 1 &&
                            item.type == 6 &&
                            item.json && item.json.answer2
                        ) {
                            courseJson = item.json.answer2
                                    break s;
                        }
                    }
                } else if (
                    el.ttype == 1 &&
                    el.type == 6 &&
                    el.json  && el.json.answer2
                ) {
                    courseJson = el.json.answer2
                                    break s;
                }
            }
            return courseJson;
        },
        async getAllCourse(id) {
            let params = {
                cid: id,
            };
            let res = await this.ajax.get(this.$store.state.api + "getCourseInfoTestAll", params)
            return res.data[0]
        },
        changeShowType(value){
            console.log('value',value);
            
          this.checkTypeValue = value;
          this.getWorks();
        }
    },
    mounted() {
        // this.selectTestType(1);
        // this.getPageBase()
        this.getNavType()
        
        console.log('this.typeListStr',this.typeListStr);
        
        // if(this.typeListStr){
        //   this.changeShowType(this.typeListStr)
          // this.checkTypeValue = this.typeId
        // }
    },
    // activated(){
    //     // this.selectTestType(2);
    //     if(this.typeListStr){
    //       this.changeShowType(this.typeListStr)
    //       // this.checkTypeValue = this.typeId
    //     }
    // },
};
</script>

<style scoped>
.i_body_box {
    height: calc(100% - 10px);
    padding: 10px 0 0;
    box-sizing: border-box;
}

.check_nav {
    display: flex;
    height: 50px;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
    width: 100%;
    overflow: auto;
}

.check_nav>.nav {
    width: 120px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(167, 167, 167);
    /* background: #000000; */
    cursor: pointer;
    min-width: fit-content;
    margin-right: 10px;
}

.check_nav>.active {
    color: #3681fc;
    background: rgb(248, 250, 254);
    border-radius: 10px 10px 0 0;
}

.check_nav>.all::before,
.check_nav>.gr::before,
.check_nav>.md::before,
.check_nav>.jy::before,
.check_nav>.bj::before,
.check_nav>.yy::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-size: 100% 100%;
    margin-right: 5px;
}

.check_nav>.all::before {

    background-image: url('../../../../assets/icon/test/all_icon.png');
}

.check_nav>.active.all::before {
    background-image: url('../../../../assets/icon/test/all_icon_active.png');
}

.check_nav>.gr::before {
    background-image: url('../../../../assets/icon/test/gr_icon.png');
}

.check_nav>.active.gr::before {
    background-image: url('../../../../assets/icon/test/gr_icon_active.png');
}

.check_nav>.md::before {
    background-image: url('../../../../assets/icon/test/md_icon.png');
}

.check_nav>.active.md::before {
    background-image: url('../../../../assets/icon/test/md_icon_active.png');
}

.check_nav>.jy::before {
    background-image: url('../../../../assets/icon/test/jy_icon.png');
}

.check_nav>.active.jy::before {
    background-image: url('../../../../assets/icon/test/jy_icon_active.png');
}

.check_nav>.yy::before {
    background-image: url('../../../../assets/icon/test/yy_icon.png');
}

.check_nav>.active.yy::before {
    background-image: url('../../../../assets/icon/test/yy_icon_active.png');
}

.check_nav>.bj::before {
    background-image: url('../../../../assets/icon/test/bj_icon.png');
}

.check_nav>.active.bj::before {
    background-image: url('../../../../assets/icon/test/bj_icon_active.png');
}


.check_box {
    height: calc(100% - 130px);
    overflow: auto;
    padding: 0 0 20px;
    box-sizing: border-box;
    background: rgb(248, 250, 254);
}

.test_panel {
    width: calc(100% - 40px);
    margin: 20px auto 0;
    background: #fff;
    border-radius: 10px;
    /* height: 300px; */
    overflow: hidden;
    box-shadow: 0 2px 5px 1px #0001;
}

.test_panel:hover{
	box-shadow: 0 0 2px 1px #3681FC;
}

.test_panel:hover>.test_panel_title>.title{
	color:#5996FD
}

.test_panel_title:hover>.editBtn{
	display: flex;
}
.test_panel_title:hover>.editBtn2{
	display: flex;
}


.test_panel+.test_panel {
    margin-top: 15px;
}

.test_panel_title {
    height: 50px;
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    /* justify-content: space-between; */
    /* padding: 0 20px; */
    box-sizing: border-box;
    /* border-bottom: 2px solid #f0f0f0; */
}

.test_panel_title>.title {
    display: flex;
    align-items: center;
    width: 300px;
    margin-left: 20px;
    cursor: pointer;
}

.test_panel_title>.title>.open{
    width: 20px;
    height:20px;
    margin-right: 10px;
    background-image: url('../../../../assets/icon/test/chevron-right.png');
    background-size: 100% 100%;
    cursor:pointer;
    transition:all .3s;
    opacity: .5;
}

.test_panel_title>.title>.open.active{
    transform: rotate(90deg);
    opacity: 1;
}

.test_panel_title>.state{
    margin-left: auto;
    min-width: fit-content;
}

.test_panel_title>.state > span {
    font-size: 14px;
    padding: 5px 8px;
    border-radius: 5px;
    margin-right: 0;
}

.test_panel_title>.state>.is:nth-child(1) {
    color: #17C469;
    background: #EFFCF5;
    border: 1px solid #EFFCF5;
}

.test_panel_title>.state>.no:nth-child(1) {
    color: #3681FC;
    background: #E0EAFB;
    border: 1px solid #E0EAFB;
}

.test_panel_title>.title>.titleN {
    font-size: 18px;
    font-weight: 600;
    max-width: calc(100% - 20px - 10px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.test_panel_title>.time {
    font-size: 16px;
    color: #a1a1a1;
    min-width: 160px;
    margin: 0 30px;
}

.test_panel_title>.creator {
    font-size: 16px;
    color: #a1a1a1;
    max-width: 160px;
    min-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.test_panel_title>.editBtn {
    font-size: 16px;
    color: #fff;
    background: #3681fc;
    height: 100%;
    display: none;
    align-items: center;
    padding: 0 15px;
    cursor: pointer;
    position: absolute;
    right: 0;
}
.test_panel_title>.editBtn2 {
    font-size: 16px;
    color: #fff;
    background: #3681fc;
    height: 100%;
    display: none;
    align-items: center;
    padding: 0 15px;
    cursor: pointer;
}

.test_panel_title>.time>span+span {
    margin-left: 10px;
}

.test_panel_box {
    border-top: 2px solid #f0f0f0;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 5px 20px;
    box-sizing: border-box;
}

.test_panel_box>.detail {
    width: calc(100% - 350px - 20px);
    margin-right: 20px;
    color: #a1a1a1;
    font-size: 14px;
    line-height: 24px;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.test_panel_box>.panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 350px;
    min-width: 350px;
}

.test_panel_box>.panel>.score {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid #dbdbdb;
    background: rgb(252, 252, 252);
    width: 120px;
    border-radius: 5px;
}

.test_panel_box>.panel>.score:nth-child(1) {
    display: flex;
}

.test_panel_box>.panel>.score>div:nth-child(1)>span:nth-child(1) {
    font-size: 30px;
    font-weight: 700;
}

.test_panel_box>.panel>.score>div:nth-child(1)>span:nth-child(2) {
    margin-left: 5px;
}

.test_panel_box>.panel>.score>div:nth-child(2) {
    font-size: 14px;
    margin-top: 10px;
    color: #a1a1a1;
}

.test_panel_box>.panel>.btn {
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.test_panel_box>.panel>.btn>div {
    display: flex;
    color: rgb(69, 141, 255);
    align-items: center;
    cursor: pointer;
    font-size: 14px;
}

/* .test_panel_box > .panel >.btn > div + div{
      margin: 15px 0 0 0;
    } */
.test_panel_box>.panel>.btn>div>span:nth-child(1) {
    display: block;
    width: 13px;
    height: 13px;
    background-size: 100% 100%;
    margin-right: 7px;
}

.test_panel_box>.panel>.btn>div:nth-child(1)>span:nth-child(1) {
    background-image: url('../../../../assets/icon/test/edit_icon.png');
}

.test_panel_box>.panel>.btn>div:nth-child(2)>span:nth-child(1) {
    background-image: url('../../../../assets/icon/test/check_icon.png');
}

.test_panel_box>.panel>.btn>div:nth-child(3)>span:nth-child(1) {
    background-image: url('../../../../assets/icon/test/paste_icon.png');
}

.test_add_box {
    width: 100%;
    box-sizing: border-box;
}


.test_add_box>.test {
    width: 100%;
    height: 40px;
    border-radius: 5px;
    display: flex;
    align-items: center;
}


.test_add_box>.test>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

.test_add_box>.test+.test {
    /* margin-left: 10px; */
}

.test_add_box>.test>.time {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    font-size: 14px;
    width: 300px;
    padding-left: 30px;
    box-sizing: border-box;
}

.test_add_box>.test>.time>span {
    /* margin-top: 5px; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.test_add_box>.test>.utime {
    font-size: 14px;
    width: 160px;
    min-width: 160px;
    margin: 0 30px 0 auto;
}
.test_add_box>.test>.mask {
    display: flex;
    align-items: center;
    padding-right: 58px;
    max-width: 160px;
    min-width: 160px;
}

.test_add_box>.test>.delete {
    position: absolute;
    width: 20px;
    height: 20px;
    right: -5px;
    top: -5px;
    cursor: pointer;
    z-index: 2;
    display: none;
}

.test_add_box>.test>.mask>div {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #3681FC;
}

.test_add_box>.test>.mask>.delete {
    color: #EE3E3E;
}

.test_add_box>.test>.mask>div+div {
    /* margin: 10px 0 0 0; */
    margin-left: 15px;
}

/*
.test_add_box>.test>.mask>div>span:nth-child(1) {
  display: block;
  width: 13px;
  height: 13px;
  background-size: 100% 100%;
  margin-right: 7px;
}

.test_add_box>.test>.mask>div:nth-child(1)>span:nth-child(1) {
  background-image: url('../../../../assets/icon/test/edit_icon.png');
}

.test_add_box>.test>.mask>div:nth-child(2)>span:nth-child(1) {
  background-image: url('../../../../assets/icon/test/check_icon.png');
}

.test_add_box>.test>.mask>div:nth-child(3)>span:nth-child(1) {
  background-image: url('../../../../assets/icon/test/paste_icon.png');
} */

.bgColor {
    background: #466b99;
}

/* .courseLength{
    width: 100%;
    cursor: pointer;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.courseLength > span + span{
    margin-left: 10px;
} */
.courseLength > .finishBox {
    display: flex;
    color: #a1a1a1;
    font-size: 14px;
    margin-left: auto;
    align-items: center;
}
.courseLength > .finishBox > .finish{
    width: 15px;
    height: 15px;
    background-image: url('../../../../assets/icon/test/icon_course.png');
    background-size: 100% 100%;
    margin-right: 5px;
}
.courseLength > .finishBox.is > .finish{
    background-image: url('../../../../assets/icon/test/icon_course_check.png');
}
.courseLength > .finishBox.is{
    color: #000
}

.isDead{
    color:#EE3E3E;
}
</style>