update

src/views/course/components/AudioComponent.vue

@@ -61,7 +61,7 @@ export default {
           error => {
             _this.isRecord = false
             // _this.$message.error(`${error.name} : ${error.message}`);
-            _this.$message.error(`没有找到可使用的麦克风，或者您没有允许此网页使用麦克风`)
+            _this.$toast({ message: '没有找到可使用的麦克风，或者您没有允许此网页使用麦克风', type: 'fail' })
             // 出错了
             console.log(`${error.name} : ${error.message}`)
           }
@@ -95,7 +95,7 @@ export default {
      * */
     getMp3Data() {
       if (!recorder.fileSize) {
-        this.$message.error('请录音后在上传语音')
+        this.$toast({ message: '请录音后在上传语音', type: 'fail' })
         return
       }
       const mp3Blob = this.convertToMp3(recorder.getWAV())
@@ -194,7 +194,7 @@ export default {
             if (err) {
               var a = _this.$refs.upload1.uploadFiles
               a.splice(a.length - 1, a.length)
-              _this.$message.error('上传失败')
+              _this.$toast({ message: '上传失败', type: 'fail' })
             } else {
               if (type === 3) {
                 _this.LuAudioUrl = data.Location
@@ -221,20 +221,24 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
+
   .audio-box {
-    height: 100%;
+    // height: 100%;
     width: 100%;
     display: flex;
     // flex-direction: column;
     justify-content: center;
     align-items: center;
+
+    position: absolute;
+    bottom: 40%;
     > div {
       font-size: 14px;
       padding: 10px 20px;
       background: #409eff;
       color: #fff;
       border-radius: 5px;
-      margin-top: 20px;
       & + div {
         margin-left: 10px;
       }

src/views/course/components/commentPanel.vue

@@ -8,10 +8,10 @@
     <div class="cp-box">
       <div class="type-nav">
         <div class="type-nav-box" :class="{ active: type == 1 }" @click="setType(1)">
-          <span>文本</span>
+          <img src="@/assets/images/course/text.png" />
         </div>
         <div class="type-nav-box" :class="{ active: type == 2 }" @click="setType(2)">
-          <span>音频</span>
+          <img src="@/assets/images/course/audio.png" />
         </div>
       </div>
       <div class="cp-conent" v-if="type == 1">
@@ -25,7 +25,6 @@
 </template>
 
 <script>
-
 import AudioComponent from './AudioComponent.vue'
 import { addPz2 } from '@/api/course'
 
@@ -124,10 +123,10 @@ export default {
       cursor: pointer;
     }
     .title {
-      font-size: 0.5rem;
+      font-size: 20px;
     }
     .btn {
-      font-size: 0.4rem;
+      font-size: 14px;
       transform: translateY(-50%);
       top: 50%;
       right: 0.8rem;
@@ -140,40 +139,40 @@ export default {
     width: 100%;
     height: calc(100% - 1.5rem);
     .type-nav {
-      height: 1rem;
+      height: 60px;
       width: 100%;
       display: flex;
       align-items: center;
-      padding: 0 0.5rem;
+      padding: 10px 0.5rem;
       box-sizing: border-box;
 
       .type-nav-box {
         height: 100%;
-        display: flex;
-        font-size: 0.4rem;
-        align-items: center;
-        box-sizing: border-box;
-        padding-bottom: 2px;
+        opacity: 0.5;
+        transition: all 0.5s;
 
         + .type-nav-box {
           margin-left: 1rem;
         }
 
         &.active {
-          padding-bottom: 0;
-          color: rgb(73, 161, 241);
-          border-bottom: 2px solid rgb(73, 161, 241);
+          opacity: 1;
         }
         > img {
-          width: 0.5rem;
-          height: 0.5rem;
-          object-fit: cover;
+          height: 100%;
         }
       }
     }
     .cp-conent {
-      height: calc(100% - 1rem);
+      height: calc(100% - 60px);
       overflow: auto;
+      font-size: 14px;
+      width: 100%;
+    }
+    .cp-audio {
+      height: calc(100% - 60px);
+      position: relative;
+      width: 100%;
     }
   }
 }

src/views/course/components/courseTitle.vue

@@ -37,7 +37,7 @@ export default {
 .ct-container {
   background: #fff;
   width: 100%;
-  padding: 0.2rem;
+  padding: 15px;
   box-sizing: border-box;
   .ct-title {
     width: 100%;
@@ -46,13 +46,13 @@ export default {
     overflow: hidden;
     .ct-chap {
       border-left: 3px solid rgb(43, 93, 183);
-      font-size: 0.5rem;
+      font-size: 18px;
       font-weight: bold;
       padding: 0 0 0 0.2rem;
       min-width: fit-content;
     }
     .ct-chap-title {
-      font-size: 0.5rem;
+      font-size: 18px;
       margin: 0 0.3rem 0 0.5rem;
       @include textoverflow(1);
     }

src/views/course/components/navBox.vue

@@ -210,7 +210,7 @@ export default {
       align-items: center;
       height: 1.2rem;
       justify-content: center;
-      font-size: 16px;
+      font-size: 18px;
       font-weight: bold;
       border-bottom: 1px solid #d8d8d8;
 
@@ -325,7 +325,7 @@ export default {
       .navTaskname {
         @include textoverflow();
         padding-left: 5px;
-        font-size: 16px;
+        font-size: 14px;
       }
 
       .openTaskActive {
@@ -347,7 +347,7 @@ export default {
         text-align: center;
         height: 20px;
         line-height: 26px;
-        font-size: 14px;
+        font-size: 12px;
       }
     }
   }

src/views/course/components/stepsBox.vue

@@ -5,7 +5,14 @@
         <div class="step">
           <span>步骤{{ stepI + 1 }}</span>
         </div>
-        <div class="do" v-if="worksStudent[stepI] && worksStudent[stepI].length > 6">收缩</div>
+        <div
+          class="do"
+          v-if="isCloseList[stepI] && worksStudent[stepI] && worksStudent[stepI].length > 4"
+          @click="contract(stepI)"
+          :class="{ close: isCloseList[stepI] && isCloseList[stepI].isClose == '1' }"
+        >
+          {{ isCloseList[stepI].isClose == '1' ? '展开' : '收缩' }}
+        </div>
       </div>
       <div class="tool-box" v-if="tools[step.tool[0]]">
         <div class="tool-img"><img :src="tools[step.tool[0]].img" /></div>
@@ -17,7 +24,14 @@
       >
         <div class="title">作业预览</div>
         <div class="works">
-          <Works class="work" v-for="(work, workI) in worksStudent[stepI]" :key="stepI + '-' + workI" :work="work">
+          <Works
+            class="work"
+            v-for="(work, workI) in isCloseList[stepI].isClose == 0
+              ? worksStudent[stepI]
+              : worksStudent[stepI].slice(0, 4)"
+            :key="stepI + '-' + workI"
+            :work="work"
+          >
           </Works>
         </div>
       </div>
@@ -637,6 +651,14 @@ export default {
         .catch(err => {
           console.log(err)
         })
+    },
+    contract(i) {
+      if (this.isCloseList[i].isClose === 0) {
+        this.isCloseList[i].isClose = 1
+      } else {
+        this.isCloseList[i].isClose = 0
+      }
+      this.$forceUpdate()
     }
   },
   mounted() {
@@ -649,18 +671,18 @@ export default {
 .sb-container {
   width: 100%;
   box-sizing: border-box;
-  padding: 0 0.3rem;
+  padding: 0 15px;
   .steps-box {
     width: 100%;
     border-bottom: 1px solid rgb(239, 239, 239);
-    padding: 0.3rem 0;
+    padding: 15px 0;
     .step-title {
       display: flex;
       align-items: center;
       justify-content: space-between;
       height: 0.8rem;
       .step {
-        font-size: 0.45rem;
+        font-size: 18px;
         font-weight: bold;
         display: flex;
         height: 100%;
@@ -674,6 +696,28 @@ export default {
           background-image: linear-gradient(180deg, #2c5cbd, #a1cff4);
         }
       }
+      .do {
+        font-size: 14px;
+        color: #b9b9b9;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        &::after {
+          content: '';
+          width: 5px;
+          height: 5px;
+          border-top: 2px solid #b9b9b9;
+          border-left: 2px solid #b9b9b9;
+          transform: rotate(-135deg);
+          transition: all 0.5s;
+          margin-left: 5px;
+        }
+        &.close {
+          &::after {
+            transform: rotate(-45deg);
+          }
+        }
+      }
     }
   }
   .tool-box {
@@ -694,13 +738,14 @@ export default {
       }
     }
     .tool-name {
+      font-size: 14px;
       margin-top: 5px;
     }
   }
 
   .works-box {
     .title {
-      font-size: 0.35rem;
+      font-size: 14px;
       color: #858585;
     }
     .works {
@@ -714,7 +759,7 @@ export default {
   .no-works-box {
     margin-top: 10px;
     .title {
-      font-size: 0.35rem;
+      font-size: 14px;
       color: #858585;
     }
     .no-works-box-students {

src/views/course/index.vue

@@ -155,7 +155,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 0.4rem;
+    font-size: 16px;
     > span {
       cursor: pointer;
     }
@@ -187,20 +187,20 @@ export default {
       width: 100%;
       display: flex;
       align-items: center;
-      padding: 0 0.5rem;
+      padding: 0 20px;
       box-sizing: border-box;
       border-bottom: 1px solid rgb(239, 239, 239);
     }
     .type-nav-box {
       height: 100%;
       display: flex;
-      font-size: 0.4rem;
+      font-size: 16px;
       align-items: center;
       box-sizing: border-box;
       padding-bottom: 2px;
 
       + .type-nav-box {
-        margin-left: 1rem;
+        margin-left: 1.5rem;
       }
 
       &.active {
@@ -209,6 +209,7 @@ export default {
         border-bottom: 2px solid rgb(73, 161, 241);
       }
       > img {
+        margin-right: 3px;
         width: 0.5rem;
         height: 0.5rem;
         object-fit: cover;