样式修改

src/assets/elementTheme.scss

@@ -32,12 +32,22 @@
 }
 
 /* 加载条加宽 */
-.el-loading-spinner .path {
-   stroke-width: 4;
+.el-loading-spinner {
+   margin-top: 0;
+   transform: translateY(-50%);
+   .path {
+      stroke-width: 4;
+   }
 }
 
-/* 滚动条颜色 */
-.el-scrollbar__thumb {
-   opacity: 1;
-   background-color: #ececec;
+/* 滚动条 */
+.el-scrollbar {
+   .el-scrollbar__bar.is-vertical {
+      right: 1px;
+      width: 5px;
+      .el-scrollbar__thumb {
+         opacity: 1;
+         background-color: #dbd6d2;
+      }
+   }
 }

src/views/cloudTextbooks/cloudTextbooks.vue

@@ -177,10 +177,6 @@ function handleClick(id: string) {
          .el-scrollbar__wrap {
             overflow-x: hidden;
          }
-         .el-scrollbar__bar.is-vertical {
-            width: 4px;
-            right: 0;
-         }
       }
       .cloudTextbooksBox {
          display: flex;

src/views/coursewarePlay/components/courseCollapse/courseCollapse.vue

@@ -9,26 +9,25 @@
          <template #title>
             <div class="courseCollapseHead">
                <div class="courseCollapseHeadArrow">
-                  <div class="headArrow">
-                     <img src="@/img/coursewarePlay/jtr.png" />
-                  </div>
-                  <div class="headArrowActive">
-                     <img src="@/img/coursewarePlay/jtb.png" />
-                  </div>
+                  <div class="headArrow"></div>
+                  <div class="headArrowActive"></div>
                </div>
                <div class="courseCollapseHeadTit">
-                  <template v-if="props.titleType === 'round'">
-                     <ellipsisScroll :title="item.name" />
-                  </template>
-                  <ellipsisScroll v-else :title="item.name" />
+                  <ellipsisScroll :title="item.name" />
                </div>
             </div>
          </template>
-         <div class="courseCollapseCon">
+         <div class="courseCollapseCon" :class="{ courseListCon: item.materialList }">
             <template v-if="item.materialList">
-               <div class="courseList" v-for="i in item.materialList" :key="i.id" @click="handleClick(i)">
-                  <div class="courseTitleCon">
-                     <img :src="require(`@/img/coursewarePlay/${i.typeCode || i.type}.png`)" />
+               <div
+                  class="courseList"
+                  :class="{ isActive: activeCollapse?.id === i.id }"
+                  v-for="i in item.materialList"
+                  :key="i.id"
+                  @click="handleClick(i)"
+               >
+                  <div class="courseTitleCon" :class="i.typeCode || i.type">
+                     <div class="imgIcon"></div>
                      <div class="ellipsisBox">
                         <ellipsisScroll :title="i.name" />
                      </div>
@@ -38,13 +37,7 @@
                   </div>
                </div>
             </template>
-            <courseCollapse
-               v-else
-               :courseList="item.children || []"
-               :activeCollapse="activeCollapse"
-               :titleType="'round'"
-               @handleClick="handleClick"
-            />
+            <courseCollapse v-else :courseList="item.children || []" :activeCollapse="activeCollapse" @handleClick="handleClick" />
          </div>
       </el-collapse-item>
    </el-collapse>
@@ -67,16 +60,11 @@ type courseListType = {
    children: courseListType | null
 }[]
 
-const props = withDefaults(
-   defineProps<{
-      activeCollapse: undefined | Record<string, any>
-      courseList: courseListType
-      titleType?: "default" | "round"
-   }>(),
-   {
-      titleType: "default"
-   }
-)
+const props = defineProps<{
+   activeCollapse: undefined | Record<string, any>
+   courseList: courseListType
+}>()
+
 const emits = defineEmits<{
    (e: "handleClick", value: any): void
 }>()
@@ -102,11 +90,11 @@ function handleClick(value: any) {
 <style lang="scss" scoped>
 .courseCollapse.el-collapse {
    --el-collapse-border-color: #f2f2f2;
-   --el-collapse-header-height: 62px;
+   --el-collapse-header-height: 56px;
    border: none;
    & > :deep(.el-collapse-item) {
       > .el-collapse-item__wrap > .el-collapse-item__content {
-         padding-bottom: 2px;
+         padding-bottom: 0px;
       }
       &:last-child {
          > .el-collapse-item__wrap {
@@ -120,13 +108,17 @@ function handleClick(value: any) {
          display: none;
       }
       &.is-active > .el-collapse-item__header {
-         border-bottom-color: var(--el-collapse-border-color);
-         > .courseCollapseHead .courseCollapseHeadArrow {
-            > .headArrow {
-               display: none;
+         > .courseCollapseHead {
+            .courseCollapseHeadTit {
+               color: #333333;
             }
-            > .headArrowActive {
-               display: flex;
+            .courseCollapseHeadArrow {
+               > .headArrow {
+                  display: none;
+               }
+               > .headArrowActive {
+                  display: block;
+               }
             }
          }
       }
@@ -152,59 +144,86 @@ function handleClick(value: any) {
          .headArrowActive {
             width: 14px;
             height: 14px;
-            display: flex;
-            align-items: center;
          }
-         .headArrow > img {
-            width: 8px;
-            height: 12px;
-         }
-         .headArrowActive > img {
-            width: 14px;
-            height: 14px;
+         .headArrow {
+            background: url("@/img/coursewarePlay/jtr.png") no-repeat;
+            background-size: 100% 100%;
          }
          .headArrowActive {
             display: none;
-            color: #ff8057;
+            background: url("@/img/coursewarePlay/jtb.png") no-repeat;
+            background-size: 100% 100%;
          }
       }
    }
    .courseCollapseCon {
       padding-left: 20px;
+      &.courseListCon {
+         padding-left: 0;
+      }
       .courseList {
          display: flex;
          justify-content: space-between;
          align-items: center;
-         height: 68px;
-         border-bottom: 1px solid #f2f2f2;
+         padding: 0 10px 0 24px;
+         margin-bottom: 6px;
          cursor: pointer;
-         &:last-child {
-            border-bottom: initial;
+         &.isActive {
+            background: #f0f0f0;
+            border-radius: 7px;
+            .courseTitleCon {
+               color: #f67146;
+               &.VIDEO .imgIcon {
+                  background: url("@/img/coursewarePlay/VIDEO.png") no-repeat;
+                  background-size: 100% 100%;
+               }
+               &.IMG .imgIcon {
+                  background: url("@/img/coursewarePlay/IMG.png") no-repeat;
+                  background-size: 100% 100%;
+               }
+               &.SONG.imgIcon {
+                  background: url("@/img/coursewarePlay/SONG.png") no-repeat;
+                  background-size: 100% 100%;
+               }
+            }
          }
          .courseTitleCon {
+            padding: 6px 0;
             flex-grow: 1;
             overflow: hidden;
             margin-right: 8px;
             display: flex;
             align-items: center;
             font-weight: 400;
-            font-size: 18px;
+            font-size: 13px;
             color: #333333;
             > .ellipsisBox {
                flex-grow: 1;
                overflow: hidden;
             }
-            > img {
+            > .imgIcon {
                flex-shrink: 0;
-               width: 33px;
-               height: 33px;
+               width: 15px;
+               height: 15px;
                margin-right: 10px;
             }
+            &.VIDEO .imgIcon {
+               background: url("@/img/coursewarePlay/VIDEO1.png") no-repeat;
+               background-size: 100% 100%;
+            }
+            &.IMG .imgIcon {
+               background: url("@/img/coursewarePlay/IMG1.png") no-repeat;
+               background-size: 100% 100%;
+            }
+            &.SONG.imgIcon {
+               background: url("@/img/coursewarePlay/SONG1.png") no-repeat;
+               background-size: 100% 100%;
+            }
          }
          .iconArrow {
             flex-shrink: 0;
-            width: 35px;
-            height: 35px;
+            width: 13px;
+            height: 13px;
             > img {
                width: 100%;
                height: 100%;

src/views/coursewarePlay/coursewarePlay.vue

@@ -414,16 +414,12 @@ function handleCoursewareEnd() {
          overflow: hidden;
          & > .elScrollbar {
             .el-scrollbar__view {
-               padding: 0 20px;
+               padding: 0 22px;
                width: 100%;
             }
             .el-scrollbar__wrap {
                overflow-x: hidden;
             }
-            .el-scrollbar__bar.is-vertical {
-               width: 4px;
-               right: 0;
-            }
          }
       }
    }

src/views/curriculum/curriculum.vue

@@ -168,10 +168,6 @@ function getCurriculumByMonth(month: string) {
             padding: 50px 50px 0 20px;
          }
       }
-      > .el-scrollbar__bar.is-vertical {
-         width: 4px;
-         right: 0;
-      }
    }
    .calendarCon {
       flex-shrink: 0;
@@ -201,10 +197,6 @@ function getCurriculumByMonth(month: string) {
                padding: 0 30px;
             }
          }
-         > .el-scrollbar__bar.is-vertical {
-            width: 4px;
-            right: 0;
-         }
       }
       & > :deep(.empty) {
          height: 100%;

src/views/curriculum/curriculumDetail.vue

@@ -270,10 +270,6 @@ function handleCourseClick(item: any) {
                   .el-scrollbar__wrap {
                      overflow-x: hidden;
                   }
-                  .el-scrollbar__bar.is-vertical {
-                     width: 5px;
-                     right: 1px;
-                  }
                }
                &:deep(.empty) {
                   position: absolute;

src/views/curriculum/setUpCourseware.vue

@@ -156,10 +156,6 @@ function chunkArray(array: any[], size: number) {
       .el-scrollbar__wrap {
          overflow-x: hidden;
       }
-      .el-scrollbar__bar.is-vertical {
-         width: 4px;
-         right: 0;
-      }
    }
    .cloudTextbooksBox {
       display: flex;

src/views/homePage/homePage.vue

@@ -220,10 +220,6 @@ function handleRouterCurriculum() {
       .el-scrollbar__wrap {
          overflow-x: hidden;
       }
-      .el-scrollbar__bar.is-vertical {
-         width: 4px;
-         right: 0;
-      }
    }
    .classTypes {
       flex-grow: 1;