浏览代码

样式问题

zengyicheng 3 年之前
父节点
当前提交
74630f51bb
共有 3 个文件被更改,包括 120 次插入254 次删除
  1. 二进制
      src/assets/icon/works/noImg.png
  2. 7 8
      src/components/index.vue
  3. 113 246
      src/components/study.vue

二进制
src/assets/icon/works/noImg.png


+ 7 - 8
src/components/index.vue

@@ -118,7 +118,7 @@
                     <div>{{ item.typename }}</div>
                   </el-tooltip>
 
-                  <div style="padding-right: 10px;min-width: 55px;">
+                  <div style="min-width: 50px;">
                     {{ JSON.parse(item.chapters).length }}阶段
                   </div>
                 </div>
@@ -407,6 +407,7 @@ export default {
   width: 100%;
   height: 100%;
   cursor: pointer;
+  object-fit: cover;
 }
 
 .top {
@@ -460,7 +461,8 @@ export default {
   flex-direction: column;
   flex-wrap: nowrap;
   margin: 0px 1% 20px;
-  width: 16%;
+  width: 300px;
+  height:260px;
   /*border: 1px solid #cecece; */
   border-radius: 10px;
   overflow: hidden;
@@ -511,7 +513,7 @@ export default {
 }
 .body_student {
   margin: 10px auto;
-  width: 92%;
+  width: 91.5%;
   height: 100%;
 }
 .student_head {
@@ -540,10 +542,6 @@ export default {
   justify-content: center;
 }
 
-.choose > div:nth-child(3) > span {
-  letter-spacing: 0 !important;
-}
-
 .choose {
   display: flex;
   flex-direction: column;
@@ -601,7 +599,8 @@ export default {
 .cName {
   cursor: pointer;
   margin: 0 10px;
-  color: #c3c1c3;
+  color: #B9B6B9;
+  min-width: 50px;
 }
 
 .reBox {

+ 113 - 246
src/components/study.vue

@@ -58,12 +58,12 @@
       <div class="body_student">
         <div
           class="new_top"
-          style="position: fixed; top: 0; width: 77%; z-index: 999"
+          style="position: fixed; top: 0; left: 20.7%; width: 80%; z-index: 999"
         >
-          <div class="before"></div>
           <div class="courseIndex">
             <div>第{{ courseType - 0 + 1 }}阶段</div>
             <div>{{ chapInfoList[courseType].dyName }}</div>
+            <div>任务{{ taskCount + 1 }}</div>
           </div>
           <div class="btnAll">
             <div class="returnBtn" @click="nextOrpreSteps(0)">上一步</div>
@@ -71,6 +71,7 @@
             <div class="returnBtn" @click="allScrell">全屏</div>
             <div
               class="returnBtn"
+              style="background: #225bc7"
               @click.stop="
                 goTo(
                   '/courseDetail?userid=' +
@@ -447,15 +448,11 @@
                     .chapterInfo[0].taskJson[taskCount].toolChoose"
                   :key="toolIndex"
                 >
-                  <div
-                    style="
-                      font-size: 20px;
-                      font-weight: bold;
-                      padding: 0 0 10px 10px;
-                    "
-                  >
-                    步骤{{ toolIndex + 1 }}
+                  <div class="bzBox">
+                    <div></div>
+                    <div>步骤{{ toolIndex + 1 }}</div>
                   </div>
+
                   <div class="toolBox">
                     <div>
                       <!-- v-for="(itemTool, indexTool) in toolTypeList"
@@ -636,13 +633,6 @@
                     v-if="tType && tType == 1 && tool.tool.indexOf(16) != -1"
                     class="worksBox"
                   >
-                    <div
-                      class="worksBTitle"
-                      v-if="worksStudent[toolIndex].length > 0"
-                    >
-                      <div class="greenBox"></div>
-                      作业提交情况
-                    </div>
                     <div
                       style="padding-top: 15px; font-size: 18px"
                       v-if="worksStudent[toolIndex].length > 0"
@@ -655,7 +645,7 @@
                     >
                       <div
                         class="works"
-                        style="width: 200px; height: 140px; padding-top: 25px"
+                        style="width: 240px; height: 170px"
                         v-for="(w, wIndex) in worksStudent[toolIndex]"
                         :key="wIndex"
                       >
@@ -674,21 +664,11 @@
                           />
                         </div>
                         <div class="worksName">
-                          姓名:
-                          <span>{{ w.sName }}</span>
+                          <div>{{ w.sName }}</div>
                         </div>
                       </div>
                     </div>
-                    <div
-                      style="
-                        padding-top: 15px;
-                        padding-bottom: 15px;
-                        border-bottom: 1px solid #eeeeee;
-                        font-size: 18px;
-                      "
-                    >
-                      未提交
-                    </div>
+                    <div style="padding-top: 15px; font-size: 18px">未提交</div>
                     <div class="noWorksS">
                       <div
                         v-for="(s, sIndex) in noWorksS[toolIndex]"
@@ -703,13 +683,6 @@
                     v-if="tType && tType == 2 && tool.tool.indexOf(16) != -1"
                     class="worksBox"
                   >
-                    <div
-                      class="worksBTitle"
-                      v-if="workStudent[toolIndex].length > 0"
-                    >
-                      <div class="greenBox"></div>
-                      作业提交情况
-                    </div>
                     <div
                       style="padding-top: 15px; font-size: 18px"
                       v-if="workStudent[toolIndex].length > 0"
@@ -722,7 +695,7 @@
                     >
                       <div
                         class="works"
-                        style="width: 200px; height: 140px; padding-top: 25px"
+                        style="width: 240px; height: 170px"
                         v-for="(w, wIndex) in workStudent[toolIndex]"
                         :key="wIndex"
                       >
@@ -741,8 +714,7 @@
                           />
                         </div>
                         <div class="worksName">
-                          姓名:
-                          <span>{{ w.sName }}</span>
+                          <div>{{ w.sName }}</div>
                         </div>
                       </div>
                     </div>
@@ -751,13 +723,6 @@
                     v-if="tType && tType == 1 && tool.tool.indexOf(4) != -1"
                     class="worksBox"
                   >
-                    <div
-                      class="worksBTitle"
-                      v-if="worksStudent[toolIndex].length > 0"
-                    >
-                      <div class="greenBox"></div>
-                      作业提交情况
-                    </div>
                     <div
                       style="padding-top: 15px; font-size: 18px"
                       v-if="worksStudent[toolIndex].length > 0"
@@ -772,7 +737,13 @@
                       >
                         <div
                           class="works"
-                          style="width: 200px; height: 140px"
+                          style="
+                            width: 240px;
+                            height: 170px;
+                            border: 1px solid #f8f8f8;
+                            border-radius: 10px;
+                            box-shadow: 0 0 6px 1px #dfdada;
+                          "
                           v-for="(w, wIndex) in worksStudent[toolIndex]"
                           :key="wIndex"
                         >
@@ -787,8 +758,8 @@
                             />
                           </div>
                           <div class="worksName">
-                            姓名:
-                            <span>{{ w.sName }}</span>
+                            <div>{{ w.sName }}</div>
+                            <div>{{ w.time }}</div>
                           </div>
                         </div>
                       </div>
@@ -799,16 +770,7 @@
                       ></AskStatic>
                     </div>
 
-                    <div
-                      style="
-                        padding-top: 15px;
-                        padding-bottom: 15px;
-                        border-bottom: 1px solid #eeeeee;
-                        font-size: 18px;
-                      "
-                    >
-                      未提交
-                    </div>
+                    <div style="padding-top: 15px; font-size: 18px">未提交</div>
                     <div class="noWorksS">
                       <div
                         v-for="(s, sIndex) in noWorksS[toolIndex]"
@@ -823,13 +785,6 @@
                     v-if="tType && tType == 2 && tool.tool.indexOf(4) != -1"
                     class="worksBox"
                   >
-                    <div
-                      class="worksBTitle"
-                      v-if="workStudent[toolIndex].length > 0"
-                    >
-                      <div class="greenBox"></div>
-                      作业提交情况
-                    </div>
                     <div
                       style="padding-top: 15px; font-size: 18px"
                       v-if="workStudent[toolIndex].length > 0"
@@ -842,7 +797,13 @@
                     >
                       <div
                         class="works"
-                        style="width: 200px; height: 140px; padding-top: 25px"
+                        style="
+                          width: 240px;
+                          height: 170px;
+                          border: 1px solid #f8f8f8;
+                          border-radius: 10px;
+                          box-shadow: 0 0 6px 1px #dfdada;
+                        "
                         v-for="(w, wIndex) in workStudent[toolIndex]"
                         :key="wIndex"
                       >
@@ -854,8 +815,8 @@
                           />
                         </div>
                         <div class="worksName">
-                          姓名:
-                          <span>{{ w.sName }}</span>
+                          <div>{{ w.sName }}</div>
+                          <div>{{ w.time }}</div>
                         </div>
                       </div>
                     </div>
@@ -864,13 +825,6 @@
                     v-if="tType && tType == 1 && tool.tool.indexOf(15) != -1"
                     class="worksBox"
                   >
-                    <div
-                      class="worksBTitle"
-                      v-if="worksStudent[toolIndex].length > 0"
-                    >
-                      <div class="greenBox"></div>
-                      作业提交情况
-                    </div>
                     <div
                       style="padding-top: 15px; font-size: 18px"
                       v-if="worksStudent[toolIndex].length > 0"
@@ -908,16 +862,7 @@
                         </div>
                       </div>
                     </div>
-                    <div
-                      style="
-                        padding-top: 15px;
-                        padding-bottom: 15px;
-                        border-bottom: 1px solid #eeeeee;
-                        font-size: 18px;
-                      "
-                    >
-                      未提交
-                    </div>
+                    <div style="padding-top: 15px; font-size: 18px">未提交</div>
                     <div class="noWorksS">
                       <div
                         v-for="(s, sIndex) in noWorksS[toolIndex]"
@@ -932,13 +877,6 @@
                     v-if="tType && tType == 2 && tool.tool.indexOf(15) != -1"
                     class="worksBox"
                   >
-                    <div
-                      class="worksBTitle"
-                      v-if="workStudent[toolIndex].length > 0"
-                    >
-                      <div class="greenBox"></div>
-                      作业提交情况
-                    </div>
                     <div
                       style="padding-top: 15px; font-size: 18px"
                       v-if="workStudent[toolIndex].length > 0"
@@ -981,13 +919,6 @@
                     v-if="tType && tType == 1 && tool.tool.indexOf(1) != -1"
                     class="worksBox"
                   >
-                    <div
-                      class="worksBTitle"
-                      v-if="worksStudent[toolIndex].length > 0"
-                    >
-                      <div class="greenBox"></div>
-                      作业提交情况
-                    </div>
                     <div
                       style="padding-top: 15px; font-size: 18px"
                       v-if="worksStudent[toolIndex].length > 0"
@@ -1013,21 +944,11 @@
                           />
                         </div>
                         <div class="worksName">
-                          姓名:
-                          <span>{{ w.sName }}</span>
+                          <div>{{ w.sName }}</div>
                         </div>
                       </div>
                     </div>
-                    <div
-                      style="
-                        padding-top: 15px;
-                        padding-bottom: 15px;
-                        border-bottom: 1px solid #eeeeee;
-                        font-size: 18px;
-                      "
-                    >
-                      未提交
-                    </div>
+                    <div style="padding-top: 15px; font-size: 18px">未提交</div>
                     <div class="noWorksS">
                       <div
                         v-for="(s, sIndex) in noWorksS[toolIndex]"
@@ -1042,13 +963,6 @@
                     v-if="tType && tType == 2 && tool.tool.indexOf(1) != -1"
                     class="worksBox"
                   >
-                    <div
-                      class="worksBTitle"
-                      v-if="workStudent[toolIndex].length > 0"
-                    >
-                      <div class="greenBox"></div>
-                      作业提交情况
-                    </div>
                     <div
                       style="padding-top: 15px; font-size: 18px"
                       v-if="workStudent[toolIndex].length > 0"
@@ -1073,8 +987,7 @@
                           />
                         </div>
                         <div class="worksName">
-                          姓名:
-                          <span>{{ w.sName }}</span>
+                          <div>{{ w.sName }}</div>
                         </div>
                       </div>
                     </div>
@@ -1083,13 +996,6 @@
                     v-if="tType && tType == 1 && tool.tool.indexOf(3) != -1"
                     class="worksBox"
                   >
-                    <div
-                      class="worksBTitle"
-                      v-if="worksStudent[toolIndex].length > 0"
-                    >
-                      <div class="greenBox"></div>
-                      作业提交情况
-                    </div>
                     <div
                       style="padding-top: 15px; font-size: 18px"
                       v-if="worksStudent[toolIndex].length > 0"
@@ -1115,21 +1021,11 @@
                           />
                         </div>
                         <div class="worksName">
-                          姓名:
-                          <span>{{ w.sName }}</span>
+                          <div>{{ w.sName }}</div>
                         </div>
                       </div>
                     </div>
-                    <div
-                      style="
-                        padding-top: 15px;
-                        padding-bottom: 15px;
-                        border-bottom: 1px solid #eeeeee;
-                        font-size: 18px;
-                      "
-                    >
-                      未提交
-                    </div>
+                    <div style="padding-top: 15px; font-size: 18px">未提交</div>
                     <div class="noWorksS">
                       <div
                         v-for="(s, sIndex) in noWorksS[toolIndex]"
@@ -1144,13 +1040,6 @@
                     v-if="tType && tType == 2 && tool.tool.indexOf(3) != -1"
                     class="worksBox"
                   >
-                    <div
-                      class="worksBTitle"
-                      v-if="workStudent[toolIndex].length > 0"
-                    >
-                      <div class="greenBox"></div>
-                      作业提交情况
-                    </div>
                     <div
                       style="padding-top: 15px; font-size: 18px"
                       v-if="workStudent[toolIndex].length > 0"
@@ -1175,8 +1064,7 @@
                           />
                         </div>
                         <div class="worksName">
-                          姓名:
-                          <span>{{ w.sName }}</span>
+                          <div>{{ w.sName }}</div>
                         </div>
                       </div>
                     </div>
@@ -1185,13 +1073,6 @@
                     v-if="tType && tType == 1 && tool.tool.indexOf(6) != -1"
                     class="worksBox"
                   >
-                    <div
-                      class="worksBTitle"
-                      v-if="worksStudent[toolIndex].length > 0"
-                    >
-                      <div class="greenBox"></div>
-                      作业提交情况
-                    </div>
                     <div
                       style="padding-top: 15px; font-size: 18px"
                       v-if="worksStudent[toolIndex].length > 0"
@@ -1217,21 +1098,11 @@
                           />
                         </div>
                         <div class="worksName">
-                          姓名:
-                          <span>{{ w.sName }}</span>
+                          <div>{{ w.sName }}</div>
                         </div>
                       </div>
                     </div>
-                    <div
-                      style="
-                        padding-top: 15px;
-                        padding-bottom: 15px;
-                        border-bottom: 1px solid #eeeeee;
-                        font-size: 18px;
-                      "
-                    >
-                      未提交
-                    </div>
+                    <div style="padding-top: 15px; font-size: 18px">未提交</div>
                     <div class="noWorksS">
                       <div
                         v-for="(s, sIndex) in noWorksS[toolIndex]"
@@ -1246,13 +1117,6 @@
                     v-if="tType && tType == 2 && tool.tool.indexOf(6) != -1"
                     class="worksBox"
                   >
-                    <div
-                      class="worksBTitle"
-                      v-if="workStudent[toolIndex].length > 0"
-                    >
-                      <div class="greenBox"></div>
-                      作业提交情况
-                    </div>
                     <div
                       style="padding-top: 15px; font-size: 18px"
                       v-if="workStudent[toolIndex].length > 0"
@@ -1277,8 +1141,7 @@
                           />
                         </div>
                         <div class="worksName">
-                          姓名:
-                          <span>{{ w.sName }}</span>
+                          <div>{{ w.sName }}</div>
                         </div>
                       </div>
                     </div>
@@ -1287,13 +1150,6 @@
                     v-if="tType && tType == 1 && tool.tool.indexOf(7) != -1"
                     class="worksBox"
                   >
-                    <div
-                      class="worksBTitle"
-                      v-if="worksStudent[toolIndex].length > 0"
-                    >
-                      <div class="greenBox"></div>
-                      作业提交情况
-                    </div>
                     <div
                       style="padding-top: 15px; font-size: 18px"
                       v-if="worksStudent[toolIndex].length > 0"
@@ -1319,21 +1175,11 @@
                           />
                         </div>
                         <div class="worksName">
-                          姓名:
-                          <span>{{ w.sName }}</span>
+                          <div>{{ w.sName }}</div>
                         </div>
                       </div>
                     </div>
-                    <div
-                      style="
-                        padding-top: 15px;
-                        padding-bottom: 15px;
-                        border-bottom: 1px solid #eeeeee;
-                        font-size: 18px;
-                      "
-                    >
-                      未提交
-                    </div>
+                    <div style="padding-top: 15px; font-size: 18px">未提交</div>
                     <div class="noWorksS">
                       <div
                         v-for="(s, sIndex) in noWorksS[toolIndex]"
@@ -1348,13 +1194,6 @@
                     v-if="tType && tType == 2 && tool.tool.indexOf(7) != -1"
                     class="worksBox"
                   >
-                    <div
-                      class="worksBTitle"
-                      v-if="workStudent[toolIndex].length > 0"
-                    >
-                      <div class="greenBox"></div>
-                      作业提交情况
-                    </div>
                     <div
                       style="padding-top: 15px; font-size: 18px"
                       v-if="workStudent[toolIndex].length > 0"
@@ -1379,8 +1218,7 @@
                           />
                         </div>
                         <div class="worksName">
-                          姓名:
-                          <span>{{ w.sName }}</span>
+                          <div>{{ w.sName }}</div>
                         </div>
                       </div>
                     </div>
@@ -2203,12 +2041,14 @@ export default {
                       works: b[j].content,
                       sName: b[j].name,
                       type: 1,
+                      time: b[j].time,
                     });
                   } else {
                     this.workStudent[i].push({
                       works: b[j].content,
                       sName: b[j].name,
                       type: 0,
+                      time: b[j].time,
                     });
                   }
                 } else {
@@ -2216,28 +2056,12 @@ export default {
                     works: b[j].content,
                     sName: b[j].name,
                     type: 2,
+                    time: b[j].time,
                   });
                 }
               }
             }
           }
-
-          // for (var k = 0; k < b.length; k++) {
-          //   var data = b[k];
-          //   if (data.tool == 4) {
-          //     var checkL = JSON.parse(data.content)[0].anwer.split(",");
-          //     for (var z = 0; z < checkL.length; z++) {
-          //       this.checkJson.push({ checkCount: [], checkPerent: [] });
-          //       if (!this.checkJson[z].checkCount) {
-          //         this.checkJson[z].checkCount = [];
-          //         this.checkJson[z].checkCount.length = this.askJson.askJson[z].askItem;
-          //       }
-          //       this.checkJson[z].checkCount[parseInt(checkL[z])]
-          //         ? this.checkJson[z].checkCount[parseInt(checkL[z])]++
-          //         : (this.checkJson[z].checkCount[parseInt(checkL[z])] = 1);
-          //     }
-          //   }
-          // }
         })
         .catch((err) => {
           console.error(err);
@@ -2808,7 +2632,7 @@ export default {
               this.text = this.textList[this.taskCount][0];
             }
           }
-          
+
           this.selectStudent();
           this.selectSWorks();
           let _this = this;
@@ -3786,14 +3610,16 @@ export default {
   height: 100%;
 }
 .returnBtn {
-  background: rgb(238, 238, 238);
-  width: 58px;
+  background: #499eef;
+  width: 65px;
   height: 30px;
-  color: rgb(22, 22, 22);
+  color: #fff;
   text-align: center;
   line-height: 32px;
   margin-right: 20px;
   cursor: pointer;
+  border-radius: 5px;
+  font-size: 14px;
 }
 .tool {
   display: flex;
@@ -3904,21 +3730,36 @@ export default {
 .courseIndex {
   display: flex;
   flex-direction: row;
-  align-items: baseline;
+  align-items: center;
 }
 .courseIndex > div:nth-child(1) {
   margin: 0 20px;
-  padding-bottom: 5px;
-  color: #3c76c7;
-  font-size: 20px;
-  width: 80px;
+  padding-left: 5px;
+  font-size: 24px;
+  width: 100px;
   font-weight: bold;
-  border-bottom: 4px solid #4aabfc;
+  border-left: 4px solid #3363b9;
+  height: 35px;
   text-align: center;
+  line-height: 35px;
 }
 .courseIndex > div:nth-child(2) {
   font-size: 23px;
 }
+.courseIndex > div:nth-child(3) {
+  border-bottom: 1px solid #d7d7d7;
+  padding-bottom: 5px;
+  background: #49a0f0;
+  width: 55px;
+  min-width: 55px;
+  border-radius: 5px;
+  color: #fff;
+  text-align: center;
+  height: 20px;
+  line-height: 26px;
+  font-size: 14px;
+  margin: 0 0 0 10px;
+}
 .course_text {
   padding: 20px 0 0 15px;
   text-indent: 30px;
@@ -3937,11 +3778,11 @@ export default {
   margin: 10px 0 0 15px;
   border-bottom: 1px solid #d7d7d7;
   padding-bottom: 5px;
-  background: #d2e3ff;
+  background: #96d1ff;
   width: 55px;
   min-width: 55px;
   border-radius: 5px;
-  color: #4d97d6;
+  color: #fff;
   text-align: center;
   height: 20px;
   line-height: 26px;
@@ -4336,7 +4177,7 @@ export default {
 .study_top::-webkit-scrollbar-track,
 .textContent::-webkit-scrollbar {
   border-radius: 10px;
-  background-color: #eee;
+  background-color: #2c5ab3;
 }
 
 /*定义滑块 内阴影+圆角*/
@@ -4344,8 +4185,8 @@ export default {
 .study_top::-webkit-scrollbar-thumb,
 .textContent::-webkit-scrollbar-thumb {
   border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  background-color: rgba(0, 0, 0, 0.1);
+  -webkit-box-shadow: inset 0 0 6px #2c5ab3;
+  background-color: #2c5ab3;
 }
 
 .vedioBox {
@@ -4389,7 +4230,8 @@ export default {
   overflow: auto;
 }
 .worksBox {
-  padding: 80px 0 15px 10px;
+  padding: 30px 0 0 10px;
+  border-bottom: 1px solid #eeeeee;
 }
 .worksBTitle {
   font-size: 20px;
@@ -4414,20 +4256,19 @@ export default {
   padding-top: 30px;
 }
 .works {
-  padding: 0 10px 0 0;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   align-items: flex-start;
   justify-content: flex-start;
   align-content: center;
-  width: 260px;
-  height: 140px;
+  width: 240px;
+  height: 170px;
   margin-right: 10px;
 }
 .workImg {
   width: 100%;
-  height: calc(100% - 25px);
+  height: calc(100% - 40px);
 }
 .workImg > img {
   width: 100%;
@@ -4435,7 +4276,18 @@ export default {
 }
 
 .worksName {
-  margin: 5px 0 0 0;
+  height: 40px;
+  line-height: 40px;
+  display: flex;
+  width: 92%;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 10px;
+}
+.worksName > div:nth-child(2) {
+  color: #b7b4b5;
 }
 .noWorksS {
   padding: 15px 0;
@@ -4446,7 +4298,8 @@ export default {
   justify-content: flex-start;
 }
 .noWorksName {
-  background: #efefef;
+  background: #46a1eb;
+  color: #fff;
   width: 90px;
   height: 25px;
   text-align: center;
@@ -4567,6 +4420,20 @@ export default {
 }
 .isClick {
   background: #4d9def;
-  color: #fff;
+}
+.bzBox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.bzBox > div:nth-child(1) {
+  width: 4px;
+  height: 40px;
+  background-image: linear-gradient(180deg, #2c5cbd, #a1cff4);
+}
+.bzBox > div:nth-child(2) {
+  font-size: 23px;
+  font-weight: bold;
+  padding: 0px 0px 0 10px;
 }
 </style>