样式修改

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

@@ -8,34 +8,27 @@
       <el-collapse-item v-for="item in props.courseList" :key="item.id" :name="item.id">
          <template #title>
             <div class="courseCollapseHead">
-               <div class="courseCollapseHeadTit">
-                  <template v-if="props.titleType === 'round'">
-                     <div class="roundCon">
-                        <img src="@/img/curriculum/yuan.png" />
-                        <div class="ellipsisBox">
-                           <ellipsisScroll :title="item.name" />
-                        </div>
-                     </div>
-                  </template>
-                  <ellipsisScroll v-else :title="item.name" />
-               </div>
                <div class="courseCollapseHeadArrow">
                   <div class="headArrow">
-                     <div>展开</div>
-                     <img src="@/img/curriculum/xiangxia.png" />
+                     <img src="@/img/coursewarePlay/jtr.png" />
                   </div>
                   <div class="headArrowActive">
-                     <div>收起</div>
-                     <img src="@/img/curriculum/xiangshang.png" />
+                     <img src="@/img/coursewarePlay/jtb.png" />
                   </div>
                </div>
+               <div class="courseCollapseHeadTit">
+                  <template v-if="props.titleType === 'round'">
+                     <ellipsisScroll :title="item.name" />
+                  </template>
+                  <ellipsisScroll v-else :title="item.name" />
+               </div>
             </div>
          </template>
          <div class="courseCollapseCon">
             <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/curriculum/${i.typeCode || i.type}.png`)" />
+                     <img :src="require(`@/img/coursewarePlay/${i.typeCode || i.type}.png`)" />
                      <div class="ellipsisBox">
                         <ellipsisScroll :title="i.name" />
                      </div>
@@ -146,42 +139,29 @@ function handleClick(value: any) {
       align-items: center;
       .courseCollapseHeadTit {
          text-align: left;
-         margin-right: 8px;
+         margin-left: 10px;
          flex-grow: 1;
-         font-weight: 500;
-         font-size: 18px;
-         color: #333333;
+         font-weight: 400;
+         font-size: 16px;
+         color: #777777;
          overflow: hidden;
-         .roundCon {
-            display: flex;
-            align-items: center;
-            color: #f67146;
-            > .ellipsisBox {
-               flex-grow: 1;
-               overflow: hidden;
-            }
-            > img {
-               flex-shrink: 0;
-               width: 8px;
-               height: 8px;
-               margin-right: 10px;
-            }
-         }
       }
       .courseCollapseHeadArrow {
          flex-shrink: 0;
          .headArrow,
          .headArrowActive {
+            width: 14px;
+            height: 14px;
             display: flex;
             align-items: center;
-            font-weight: 400;
-            font-size: 17px;
-            color: #999999;
-            > img {
-               margin-left: 5px;
-               width: 12px;
-               height: 8px;
-            }
+         }
+         .headArrow > img {
+            width: 8px;
+            height: 12px;
+         }
+         .headArrowActive > img {
+            width: 14px;
+            height: 14px;
          }
          .headArrowActive {
             display: none;

src/views/coursewarePlay/coursewarePlay.vue

@@ -399,7 +399,7 @@ function handleCoursewareEnd() {
          overflow: hidden;
          & > .elScrollbar {
             .el-scrollbar__view {
-               padding: 0 22px;
+               padding: 0 20px;
                width: 100%;
             }
             .el-scrollbar__wrap {