Procházet zdrojové kódy

新增内容列表和导航收缩功能

zengyicheng před 2 roky
rodič
revize
ebc5268743
3 změnil soubory, kde provedl 268 přidání a 163 odebrání
  1. binární
      src/assets/mlBtn.png
  2. binární
      src/assets/navBtn.png
  3. 268 163
      src/components/studyStudent.vue

binární
src/assets/mlBtn.png


binární
src/assets/navBtn.png


+ 268 - 163
src/components/studyStudent.vue

@@ -4,16 +4,35 @@
       class="pb_content_body"
       style="display: flex; height: 900px; position: relative"
     >
-      <div class="pb_left">
+      <div
+        class="pButton"
+        style="
+          left: 0;
+          background-image: linear-gradient(90deg, #477cd7, #65b9fc);
+        "
+        v-if="mlDialog == false"
+        @click="(mlDialog = true), getCourseDetail()"
+      >
+        <!-- 批 -->
+        <img src="../assets/mlBtn.png" style="width: 25px" alt="" />
+      </div>
+      <div class="pb_left" v-else>
         <!-- <div class="courseTitle">{{ courseDetail.title }}</div> -->
-        <el-tooltip
-          class="courseTitle"
-          effect="light"
-          :content="courseDetail.title"
-          placement="top"
-        >
-          <div>{{ courseDetail.title }}</div>
-        </el-tooltip>
+        <div class="courseTitle" @click="mlDialog = false">
+          <el-tooltip
+            effect="light"
+            :content="courseDetail.title"
+            placement="top"
+          >
+            <div>{{ courseDetail.title }}</div>
+          </el-tooltip>
+          <el-tooltip effect="light" content="收缩" placement="top">
+            <div class="mlImg">
+              <img src="../assets/mlBtn.png" alt="" />
+            </div>
+          </el-tooltip>
+        </div>
+
         <div class="ml">目录</div>
         <div class="cru_selectBox">
           <div v-for="(item, stageIndex) in navList" :key="stageIndex">
@@ -77,7 +96,7 @@
           </div>
         </div>
       </div>
-      <div class="body_student">
+      <div class="body_student" :class="{ navLeftCss: !mlDialog }">
         <div
           class="new_top"
           style="
@@ -88,6 +107,7 @@
             z-index: 999;
             box-shadow: 0px 9px 0 0 #f2f2f2;
           "
+          :class="{ navLeftCss: !mlDialog }"
         >
           <div class="courseIndex">
             <div>第{{ courseType - 0 + 1 }}阶段</div>
@@ -236,7 +256,11 @@
               </div>
               <div class="vedioTaskBox">
                 <div
-                  class="box_course"
+                  :class="
+                    contentDialog == false
+                      ? 'box_course isContentCss'
+                      : 'box_course'
+                  "
                   v-if="
                     vedio[taskCount].length > 0 ||
                     textList[taskCount].length > 0 ||
@@ -253,13 +277,14 @@
                       showType == 0
                     "
                   >
-                    <div class="workd_media" style="height: 100%">
+                    <div class="workd_media" style="height: 100%; width: 90%">
                       <video-player
                         class="video-player vjs-custom-skin"
+                        :class="contentDialog == false ? 'isAllWidth' : ''"
                         :playsinline="true"
                         :options="playerO[taskCount]"
                         @play="onPlayerPlay($event)"
-                        style="width: 90%; height: 100%; margin: 0 0 0 30px"
+                        style="width: 100%; height: 100%; margin: 0 0 0 30px"
                       ></video-player>
                     </div>
                   </div>
@@ -335,33 +360,57 @@
                       : ''
                   " -->
                 <div
-                  class="vedioList"
-                  v-if="
-                    (vedio.length &&
-                      vedio[taskCount] &&
-                      vedio[taskCount].length > 0) ||
-                    (textList.length &&
-                      textList[taskCount] &&
-                      textList[taskCount].length > 0) ||
-                    (lineList.length &&
-                      lineList[taskCount] &&
-                      lineList[taskCount].length > 0) ||
-                    (file.length &&
-                      file[taskCount] &&
-                      file[taskCount].length > 0)
+                  class="pButton"
+                  style="
+                    position: absolute;
+                    right: 20px;
+                    top: 0;
+                    background: #205cc6;
+                    z-index: 998;
                   "
-                  style="height: 605px"
+                  v-if="!contentDialog"
+                  @click="contentDialog = true"
                 >
-                  <div class="navTitile">内容列表:</div>
-                  <div class="navBox">
-                    <div
-                      v-show="
-                        vedio.length &&
+                  <!-- 批 -->
+                  <img src="../assets/navBtn.png" style="width: 25px" alt="" />
+                </div>
+                <div
+                  v-if="contentDialog == true"
+                  style="width: calc(100% - 83%); margin-right: 15px"
+                >
+                  <div
+                    class="vedioList"
+                    v-if="
+                      (vedio.length &&
                         vedio[taskCount] &&
-                        vedio[taskCount].length > 0
-                      "
-                    >
-                      <!-- <div
+                        vedio[taskCount].length > 0) ||
+                      (textList.length &&
+                        textList[taskCount] &&
+                        textList[taskCount].length > 0) ||
+                      (lineList.length &&
+                        lineList[taskCount] &&
+                        lineList[taskCount].length > 0) ||
+                      (file.length &&
+                        file[taskCount] &&
+                        file[taskCount].length > 0)
+                    "
+                    style="height: 605px"
+                  >
+                    <div class="navCorOpenBox">
+                      <div class="navTitile">内容列表:</div>
+                      <div class="navCorOpen" @click="contentDialog = false">
+                        <img src="../assets/navBtn.png" alt="" />
+                      </div>
+                    </div>
+                    <div class="navBox">
+                      <div
+                        v-show="
+                          vedio.length &&
+                          vedio[taskCount] &&
+                          vedio[taskCount].length > 0
+                        "
+                      >
+                        <!-- <div
                         class="vedioNav"
                         style="
                           width: 80px;
@@ -374,13 +423,13 @@
                       >
                         视频
                       </div> -->
-                      <div
-                        class="vedioTimeBox"
-                        v-for="(media, vedioIndex) in vedio[taskCount]"
-                        :key="vedioIndex + '1'"
-                        @click="lookVedio(media.url, vedioIndex)"
-                      >
-                        <!-- <div class="media" style="width: 90px; height: 60px; position: relative">
+                        <div
+                          class="vedioTimeBox"
+                          v-for="(media, vedioIndex) in vedio[taskCount]"
+                          :key="vedioIndex + '1'"
+                          @click="lookVedio(media.url, vedioIndex)"
+                        >
+                          <!-- <div class="media" style="width: 90px; height: 60px; position: relative">
                           <img style="height: 90px; width: 160px" :src="
                             media.cover != null && media.cover != ''
                               ? JSON.parse(media.cover).length > 0
@@ -389,35 +438,35 @@
                               : mr
                           " alt />
                         </div> -->
-                        <!-- <div class="vedioTime">
+                          <!-- <div class="vedioTime">
                             {{ vedioTime[vedioIndex] }}
                           </div> -->
-                        <!-- <div class="vedioName">{{ media.name }}</div> -->
-                        <div
-                          class="vedioName"
-                          :class="
-                            isClickNav == 'video' + vedioIndex
-                              ? 'isClickNav'
-                              : ''
-                          "
-                        >
-                          <span v-if="media.text">{{ media.text }}-</span
-                          >{{ media.name }}
+                          <!-- <div class="vedioName">{{ media.name }}</div> -->
+                          <div
+                            class="vedioName"
+                            :class="
+                              isClickNav == 'video' + vedioIndex
+                                ? 'isClickNav'
+                                : ''
+                            "
+                          >
+                            <span v-if="media.text">{{ media.text }}-</span
+                            >{{ media.name }}
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <div
-                      v-show="
-                        textList.length &&
-                        textList[taskCount] &&
-                        textList[taskCount].length > 0
-                      "
-                      class="newNav"
-                      v-for="(text, textIndex) in textList[taskCount]"
-                      :key="textIndex + '2'"
-                      @click="lookText(taskCount, textIndex)"
-                    >
-                      <!-- <div
+                      <div
+                        v-show="
+                          textList.length &&
+                          textList[taskCount] &&
+                          textList[taskCount].length > 0
+                        "
+                        class="newNav"
+                        v-for="(text, textIndex) in textList[taskCount]"
+                        :key="textIndex + '2'"
+                        @click="lookText(taskCount, textIndex)"
+                      >
+                        <!-- <div
                         class="vedioNav"
                         style="
                           width: 80px;
@@ -430,20 +479,22 @@
                       >
                         文档
                       </div> -->
-                      <div style="width: calc(100% - 0px)">
-                        <div
-                          class="navText"
-                          :class="
-                            isClickNav == 'text' + textIndex ? 'isClickNav' : ''
-                          "
-                        >
-                          {{
-                            textList[taskCount].length > 0 ? text.name : ""
-                          }}.doc
+                        <div style="width: calc(100% - 0px)">
+                          <div
+                            class="navText"
+                            :class="
+                              isClickNav == 'text' + textIndex
+                                ? 'isClickNav'
+                                : ''
+                            "
+                          >
+                            {{
+                              textList[taskCount].length > 0 ? text.name : ""
+                            }}.doc
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <!-- <div
+                      <!-- <div
                     v-show="
                       chapInfoList.length &&
                       chapToolList[taskCount] &&
@@ -465,18 +516,18 @@
                       </div>
                     </div>
                     </div>-->
-                    <div
-                      v-show="
-                        lineList.length &&
-                        lineList[taskCount] &&
-                        lineList[taskCount].length > 0
-                      "
-                      class="newNav"
-                      v-for="(lines, lineIndex) in lineList[taskCount]"
-                      :key="lineIndex + '4'"
-                      @click="doUrl(lines.url, lineIndex)"
-                    >
-                      <!-- <div
+                      <div
+                        v-show="
+                          lineList.length &&
+                          lineList[taskCount] &&
+                          lineList[taskCount].length > 0
+                        "
+                        class="newNav"
+                        v-for="(lines, lineIndex) in lineList[taskCount]"
+                        :key="lineIndex + '4'"
+                        @click="doUrl(lines.url, lineIndex)"
+                      >
+                        <!-- <div
                         class="vedioNav"
                         style="
                           width: 80px;
@@ -489,7 +540,7 @@
                       >
                         链接
                       </div> -->
-                      <!-- <div style="width: calc(100% - 0px)">
+                        <!-- <div style="width: calc(100% - 0px)">
                         <div
                           class="navText"
                           :class="isClickNav == lineIndex ? 'isClickNav' : ''"
@@ -501,29 +552,31 @@
                           >
                         </div>
                       </div> -->
-                      <div style="width: calc(100% - 0px)">
-                        <div
-                          class="navText"
-                          :class="
-                            isClickNav == 'line' + lineIndex ? 'isClickNav' : ''
-                          "
-                        >
-                          {{ lines.title ? lines.title : lines.url }}
+                        <div style="width: calc(100% - 0px)">
+                          <div
+                            class="navText"
+                            :class="
+                              isClickNav == 'line' + lineIndex
+                                ? 'isClickNav'
+                                : ''
+                            "
+                          >
+                            {{ lines.title ? lines.title : lines.url }}
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <div
-                      class="newNav"
-                      v-show="
-                        file.length &&
-                        file[taskCount] &&
-                        file[taskCount].length > 0
-                      "
-                      v-for="(f, fileIndex) in file[taskCount]"
-                      :key="fileIndex"
-                      @click="downFile(f, fileIndex)"
-                    >
-                      <!-- <div
+                      <div
+                        class="newNav"
+                        v-show="
+                          file.length &&
+                          file[taskCount] &&
+                          file[taskCount].length > 0
+                        "
+                        v-for="(f, fileIndex) in file[taskCount]"
+                        :key="fileIndex"
+                        @click="downFile(f, fileIndex)"
+                      >
+                        <!-- <div
                         class="vedioNav"
                         style="
                           width: 80px;
@@ -536,14 +589,17 @@
                       >
                         文档
                       </div> -->
-                      <div style="width: calc(100% - 0px)">
-                        <div
-                          class="navText"
-                          :class="
-                            isClickNav == 'word' + fileIndex ? 'isClickNav' : ''
-                          "
-                        >
-                          <span v-if="f.text">{{ f.text }}-</span>{{ f.name }}
+                        <div style="width: calc(100% - 0px)">
+                          <div
+                            class="navText"
+                            :class="
+                              isClickNav == 'word' + fileIndex
+                                ? 'isClickNav'
+                                : ''
+                            "
+                          >
+                            <span v-if="f.text">{{ f.text }}-</span>{{ f.name }}
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -2558,22 +2614,22 @@
                           />
                         </div>
                         <div
-                        class="corOpen"
-                        @click="contract(toolIndex)"
-                        v-if="
-                          worksStudent[toolIndex].length > 6 &&
-                          isCloseList[toolIndex].isClose == 0
-                        "
-                      >
-                        收缩
-                      </div>
-                      <div
-                        class="corOpen"
-                        @click="contract(toolIndex)"
-                        v-if="isCloseList[toolIndex].isClose == 1"
-                      >
-                        展开
-                      </div>
+                          class="corOpen"
+                          @click="contract(toolIndex)"
+                          v-if="
+                            worksStudent[toolIndex].length > 6 &&
+                            isCloseList[toolIndex].isClose == 0
+                          "
+                        >
+                          收缩
+                        </div>
+                        <div
+                          class="corOpen"
+                          @click="contract(toolIndex)"
+                          v-if="isCloseList[toolIndex].isClose == 1"
+                        >
+                          展开
+                        </div>
                         <!-- <div class="works" style="
                             width: 200px;
                             height: 140px;
@@ -2727,22 +2783,22 @@
                           />
                         </div>
                         <div
-                        class="corOpen"
-                        @click="contract(toolIndex)"
-                        v-if="
-                          worksStudent[toolIndex].length > 6 &&
-                          isCloseList[toolIndex].isClose == 0
-                        "
-                      >
-                        收缩
-                      </div>
-                      <div
-                        class="corOpen"
-                        @click="contract(toolIndex)"
-                        v-if="isCloseList[toolIndex].isClose == 1"
-                      >
-                        展开
-                      </div>
+                          class="corOpen"
+                          @click="contract(toolIndex)"
+                          v-if="
+                            worksStudent[toolIndex].length > 6 &&
+                            isCloseList[toolIndex].isClose == 0
+                          "
+                        >
+                          收缩
+                        </div>
+                        <div
+                          class="corOpen"
+                          @click="contract(toolIndex)"
+                          v-if="isCloseList[toolIndex].isClose == 1"
+                        >
+                          展开
+                        </div>
                       </div>
                     </div>
 
@@ -7614,6 +7670,8 @@ export default {
       sIsOpen: false,
       IsLookOpen: false,
       pzDialog: false,
+      contentDialog: false,
+      mlDialog: false,
       type: 1,
       sentenceList: [{ sentenceTitle: "", addSentence: [], rightAnswer: [] }],
       sentenceList1: [],
@@ -12436,6 +12494,8 @@ export default {
     this.selectCount();
     this.getHomeWork();
     this.selectCStudent();
+    this.contentDialog = true;
+    this.mlDialog = true;
     if (this.tType == 4) {
       this.pzDialog = true;
       this.selectPz();
@@ -12605,7 +12665,7 @@ export default {
 .wheel {
   width: 100%;
   /* height: 100%; */
-  height: 605px;
+  min-height: 605px;
 }
 
 .right_box {
@@ -12962,7 +13022,6 @@ export default {
   margin: 10px auto;
   height: 50px;
   color: #fff;
-  line-height: 50px;
   text-align: center;
   font-size: 20px;
   font-weight: bold;
@@ -12972,6 +13031,17 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 0 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.courseTitle >>> .el-tooltip {
+  width: 90%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
 }
 
 .ml {
@@ -13183,7 +13253,7 @@ export default {
   background: #f2f2f2;
   border: 1px solid #ececec;
   /* width: 38.8%; */
-  width: calc(100% - 83%);
+  width: 100%;
   height: 445px;
   border-radius: 10px;
   overflow: hidden;
@@ -13730,7 +13800,8 @@ export default {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-items: center;
+  align-items: flex-start;
+  position: relative;
 }
 
 .toolBox {
@@ -14041,12 +14112,9 @@ export default {
 
 .navTitile {
   padding: 0 0px 0 15px;
-  background: #1e5cc9;
   color: #fff;
   height: 40px;
   line-height: 40px;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
 }
 
 .isTypeOne {
@@ -14707,7 +14775,8 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0px 0 8px 0px #c5c5c5;
+  box-shadow: 0px 0 8px 2px #c5c5c5;
+  border-radius: 5px;
 }
 
 .pzClass {
@@ -15694,4 +15763,40 @@ ol {
 .corOpen:hover {
   color: #499eef;
 }
+.navCorOpenBox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: #1e5cc9;
+  justify-content: space-between;
+}
+.navCorOpen {
+  padding-right: 15px;
+  cursor: pointer;
+  width: 20px;
+}
+.navCorOpen > img {
+  width: 100%;
+  height: 100%;
+}
+.mlImg {
+  width: 25px !important;
+  cursor: pointer;
+  margin-top: 5px;
+}
+.mlImg > img {
+  width: 100%;
+  height: 100%;
+}
+
+.navLeftCss {
+  width: 100% !important;
+  left: 0 !important;
+}
+.isContentCss {
+  width: 100% !important;
+}
+.isAllWidth {
+  width: 100% !important;
+}
 </style>