分类及样式

src/components/index.vue

@@ -48,11 +48,18 @@
             :key="index"
           >
             <span>{{ item.name }}:</span>
+            <div
+              class="cName"
+              @click="getCourse(item.name, '', item.id, 1)"
+              :class="typeE.indexOf(item.id) != -1 ? 'isCType' : ''"
+            >
+              全部
+            </div>
             <div
               v-for="item1 in CourseTypeJson[item.id]"
               :key="item1.id"
               :label="item1.id"
-              @click="getCourse(item.name, item1.id)"
+              @click="getCourse(item.name, item.id, item1.id, 2)"
             >
               <div
                 class="cName"
@@ -105,13 +112,13 @@
                   <el-tooltip
                     class="typeN"
                     effect="light"
-                    :content="item.typename ? item.typename : '暂无'"
+                    :content="item.typename"
                     placement="top"
                   >
-                    <div>{{ item.typename ? item.typename : "暂无" }}</div>
+                    <div>{{ item.typename }}</div>
                   </el-tooltip>
 
-                  <div style="padding-right: 10px">
+                  <div style="padding-right: 10px;min-width: 55px;">
                     {{ JSON.parse(item.chapters).length }}阶段
                   </div>
                 </div>
@@ -151,7 +158,11 @@
             </div>
           </div>
         </div>
-        <div class="student_page" style="margin: 15px 0 0" v-if="zoneClass.length > 0">
+        <div
+          class="student_page"
+          style="margin: 15px 0 0"
+          v-if="zoneClass.length > 0"
+        >
           <el-pagination
             background
             layout="prev, pager, next"
@@ -199,6 +210,7 @@ export default {
       typea: "",
       typeb: "",
       typed: "",
+      typeE: [],
     };
   },
   methods: {
@@ -239,24 +251,66 @@ export default {
           console.error(err);
         });
     },
-    getCourse(typeName, typeid) {
+    getCourse(typeName, ftypeId, typeid, type) {
       if (typeName == "年级") {
-        if (this.typea == typeid) {
-          this.typea = "";
+        if (type == 1) {
+          if (this.typeE.indexOf(typeid) != -1) {
+            this.typeE.splice(this.typeE.indexOf(typeid), 1);
+          } else {
+            this.typeE.push(typeid);
+            if(this.typea != ""){
+              this.typea = "";
+            }
+          }
         } else {
-          this.typea = typeid;
+          if (this.typea == typeid) {
+            this.typea = "";
+          } else {
+            this.typea = typeid;
+            if (this.typeE.indexOf(ftypeId) != -1) {
+              this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
+            }
+          }
         }
       } else if (typeName == "专栏") {
-        if (this.typeb == typeid) {
-          this.typeb = "";
+        if (type == 1) {
+          if (this.typeE.indexOf(typeid) != -1) {
+            this.typeE.splice(this.typeE.indexOf(typeid), 1);
+          } else {
+            this.typeE.push(typeid);
+            if(this.typeb != ""){
+              this.typeb = "";
+            }
+          }
         } else {
-          this.typeb = typeid;
+          if (this.typeb == typeid) {
+            this.typeb = "";
+          } else {
+            this.typeb = typeid;
+            if (this.typeE.indexOf(ftypeId) != -1) {
+              this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
+            }
+          }
         }
       } else if (typeName == "学科") {
-        if (this.typed == typeid) {
-          this.typed = "";
+        if (type == 1) {
+          if (this.typeE.indexOf(typeid) != -1) {
+            this.typeE.splice(this.typeE.indexOf(typeid), 1);
+          } else {
+            this.typeE.push(typeid);
+            if(this.typed != ""){
+              this.typed = "";
+            }
+          }
         } else {
-          this.typed = typeid;
+          if (this.typed == typeid) {
+            this.typed = "";
+          } else {
+            this.typed = typeid;
+            if (this.typeE.indexOf(ftypeId) != -1) {
+              this.typeE.splice(this.typeE.indexOf(ftypeId), 1);
+            }
+          }
         }
       }
       this.selectAll();
@@ -272,7 +326,7 @@ export default {
         typeb: this.typeb != undefined ? this.typeb : "",
         typec: "",
         typed: this.typed != undefined ? this.typed : "",
-        typeE: "",
+        typeE: this.typeE.join(","),
         cu: "",
         cn: this.sCourse,
         classid: this.classId,
@@ -408,7 +462,7 @@ export default {
   margin: 0px 1% 20px;
   width: 16%;
   /*border: 1px solid #cecece; */
-  border-radius: 5px;
+  border-radius: 10px;
   overflow: hidden;
   box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
     0px 2px 1px -1px rgb(0 0 0 / 12%);
@@ -507,8 +561,9 @@ export default {
   margin: 10px 0;
   width: 100%;
 }
+
 .all_choose > span {
-  width: 80px;
+  min-width: 80px;
   display: block;
   letter-spacing: 14px;
 }
@@ -546,6 +601,7 @@ export default {
 .cName {
   cursor: pointer;
   margin: 0 10px;
+  color: #c3c1c3;
 }
 
 .reBox {
@@ -557,6 +613,7 @@ export default {
   width: 90%;
   border-radius: 5px;
   padding-left: 20px;
+  min-width: 1050px;
 }
 .reTop {
   padding: 20px 0 0 0;
@@ -572,7 +629,7 @@ export default {
   font-weight: bold;
   width: 40px;
   border-bottom: 1px solid #205cc6;
-  padding-bottom: 10px;
+  padding-bottom: 20px;
   color: #205cc6;
   font-size: 20px;
 }
@@ -584,6 +641,7 @@ export default {
   width: 300px;
   border-radius: 8px;
   padding: 5px 0;
+  margin-bottom: 10px;
 }
 .search {
   width: 20px;

src/components/study.vue

@@ -31,11 +31,13 @@
                 >
                   <div
                     class="vedioNav"
-                    style="
-                      margin: 0;
-                      background: rgb(206 226 255);
-                      color: rgb(43 109 201);
-                    "
+                    :class="{
+                      isClick:
+                        navIndex == taskCount &&
+                        nav.id == navId &&
+                        stageIndex == courseType,
+                    }"
+                    style="margin: 0"
                   >
                     任务{{ navIndex + 1 }}
                   </div>
@@ -2264,7 +2266,7 @@ export default {
             for (var j = 0; j < b.length; j++) {
               var data = b[j];
               if (i == b[j].tool) {
-                if (data.tool == 4) {
+                if (data.type == 2) {
                   var checkL = JSON.parse(data.content)[0].anwer.split(",");
                   for (var z = 0; z < checkL.length; z++) {
                     if (!this.checkJson[i][z]) {
@@ -2321,7 +2323,7 @@ export default {
             for (var j = 0; j < b.length; j++) {
               var data = b[j];
               if (i == b[j].tool) {
-                if (data.tool == 4) {
+                if (data.type == 2) {
                   for (var z = 0; z < this.checkJson[i].length; z++) {
                     this.checkJson[i][z].checkPerent = [];
                     for (
@@ -2615,9 +2617,6 @@ export default {
 
       this.getHomeWork();
       this.getCourseDetail();
-      this.vedioTime = document.getElementsByClassName(
-        "vjs-duration-display"
-      )[0].textContent;
     },
 
     get(i) {
@@ -2809,7 +2808,7 @@ export default {
               this.text = this.textList[this.taskCount][0];
             }
           }
-
+          
           this.selectStudent();
           this.selectSWorks();
           let _this = this;
@@ -2838,6 +2837,11 @@ export default {
                 a - 100 + "px";
             }, 500);
           });
+          if (this.vedio[this.taskCount].length > 0) {
+            this.vedioTime = document.getElementsByClassName(
+              "vjs-duration-display"
+            )[0].textContent;
+          }
         })
         .catch((err) => {
           loading.close();
@@ -3766,7 +3770,7 @@ export default {
   border-radius: 5px;
 }
 .ml {
-  margin-left: 15px;
+  margin-left: 20px;
   color: #5b7dba;
   border-left: 3px solid #5b7dba;
   padding-left: 5px;
@@ -4265,6 +4269,7 @@ export default {
   transition: all 0.5s;
   overflow: hidden;
   height: 0;
+  background: #e7f3ff;
 }
 .twoChild > div:nth-child(1) {
   margin-top: 5px;
@@ -4288,7 +4293,6 @@ export default {
   justify-content: flex-start;
   padding: 0 10px;
   width: 100%;
-  background: #e7f3ff;
 }
 .navTaskname {
   white-space: nowrap;
@@ -4314,6 +4318,8 @@ export default {
 }
 .cru_selectBox {
   overflow: auto;
+  width: 96%;
+  margin: 0 auto;
   height: calc(100% - 40px - 21px - 20px);
 }
 .cru_selectBox::-webkit-scrollbar,
@@ -4559,4 +4565,8 @@ export default {
 .elist_input_box >>> .el-rate__icon {
   font-size: 24px;
 }
+.isClick {
+  background: #4d9def;
+  color: #fff;
+}
 </style>