组件布局样式调整

src/views/book/courseware/preview/components/audio/Audio.vue

@@ -157,12 +157,12 @@ export default {
 
     .view_list {
       display: flex;
+      flex-wrap: wrap;
       gap: 32px 28px;
       width: 100%;
 
       > li {
-        width: 25%;
-        min-width: 120px;
+        width: 23%;
         height: 46px;
       }
     }
@@ -175,10 +175,11 @@ export default {
       :deep .el-carousel {
         flex: 1;
         max-height: 500px;
-        padding: 20%;
+        padding: 20% 13px;
         background-color: #d9d9d9;
 
         &__container {
+          max-width: 500px;
           height: 100px;
           max-height: 500px;
           margin: 0 auto;
@@ -193,9 +194,10 @@ export default {
         display: flex;
         flex-direction: column;
         row-gap: 2px;
-        min-width: 200px;
+        width: 20%;
+        min-width: 110px;
         max-height: 500px;
-        overflow: auto;
+        overflow-y: auto;
       }
     }
   }

src/views/book/courseware/preview/components/picture/Picture.vue

@@ -1,17 +1,6 @@
 <template>
-  <div class="picture_area">
-    <div
-      v-show="data.property.sn_position.includes('top')"
-      class="top"
-      :style="getJustifyContentStyle(data.property.sn_position)"
-    >
-      {{ data.property.serial_number }}
-    </div>
-    <div
-      v-show="data.property.sn_position.includes('left')"
-      class="left"
-      :style="getJustifyContentStyle(data.property.sn_position)"
-    >
+  <div class="picture_area" :style="getAreaStyle()">
+    <div class="sn-position" :style="getJustifyContentStyle()">
       {{ data.property.serial_number }}
     </div>
     <div class="main">
@@ -39,20 +28,6 @@
         </ul>
       </div>
     </div>
-    <div
-      v-show="data.property.sn_position.includes('right')"
-      class="right"
-      :style="getJustifyContentStyle(data.property.sn_position)"
-    >
-      {{ data.property.serial_number }}
-    </div>
-    <div
-      v-show="data.property.sn_position.includes('bottom')"
-      class="bottom"
-      :style="getJustifyContentStyle(data.property.sn_position)"
-    >
-      {{ data.property.serial_number }}
-    </div>
   </div>
 </template>
 
@@ -79,16 +54,44 @@ export default {
     },
 
     /**
-     * 得到位置样式
-     * @param {string} position 位置
+     * 得到序号外部样式
      */
-    getJustifyContentStyle(position) {
+    getAreaStyle() {
+      const position = this.data.property.sn_position;
+      let grid = '';
+
+      if (position.includes('right')) {
+        grid = `"main position" / 1fr auto`;
+      } else if (position.includes('left')) {
+        grid = `"position main" / auto 1fr`;
+      } else if (position.includes('top')) {
+        grid = `"position" auto "main" 1fr`;
+      } else if (position.includes('bottom')) {
+        grid = `"main" 1fr "position" auto`;
+      }
+
+      return {
+        grid,
+      };
+    },
+    /**
+     * 得到序号位置样式
+     */
+    getJustifyContentStyle() {
+      const position = this.data.property.sn_position;
+      let placeSelf = '';
+
       if (position.includes('start')) {
-        return 'justify-content: start';
+        placeSelf = 'flex-start';
       } else if (position.includes('end')) {
-        return 'justify-content: end';
+        placeSelf = 'flex-end';
+      } else {
+        placeSelf = 'center';
       }
-      return 'justify-content: center';
+
+      return {
+        placeSelf,
+      };
     },
   },
 };
@@ -97,14 +100,14 @@ export default {
 <style lang="scss" scoped>
 .picture_area {
   display: grid;
-  grid:
-    'top top top'
-    'left main right'
-    'bottom bottom bottom';
-  grid-template-columns: 1fr 28fr 1fr;
-  width: 100%;
-
-  > div {
+  gap: 6px;
+  padding: 8px;
+
+  .sn-position {
+    grid-area: position;
+  }
+
+  > .main {
     display: flex;
     margin: 4px auto;
 
@@ -113,16 +116,6 @@ export default {
     }
   }
 
-  .top {
-    grid-area: top;
-    width: 92%;
-  }
-
-  .left {
-    flex-direction: column;
-    grid-area: left;
-  }
-
   .main {
     grid-area: main;
     width: 100%;
@@ -153,6 +146,8 @@ export default {
 
       .view_list {
         display: flex;
+        flex-wrap: wrap;
+        row-gap: 14px;
 
         li::before {
           display: inline-block;
@@ -164,7 +159,7 @@ export default {
           display: flex;
           align-items: center;
           justify-content: center;
-          width: 14%;
+          width: 13%;
           background-color: #d9d9d9;
         }
 
@@ -174,15 +169,5 @@ export default {
       }
     }
   }
-
-  .right {
-    flex-direction: column;
-    grid-area: right;
-  }
-
-  .bottom {
-    grid-area: bottom;
-    width: 92%;
-  }
 }
 </style>

src/views/book/courseware/preview/components/video/Video.vue

@@ -1,17 +1,6 @@
 <template>
-  <div class="video_area">
-    <div
-      v-show="data.property.sn_position.includes('top')"
-      class="top"
-      :style="getJustifyContentStyle(data.property.sn_position)"
-    >
-      {{ data.property.serial_number }}
-    </div>
-    <div
-      v-show="data.property.sn_position.includes('left')"
-      class="left"
-      :style="getJustifyContentStyle(data.property.sn_position)"
-    >
+  <div class="video_area" :style="getAreaStyle()">
+    <div class="sn-position" :style="getJustifyContentStyle()">
       {{ data.property.serial_number }}
     </div>
     <div class="main">
@@ -50,20 +39,6 @@
         </ul>
       </div>
     </div>
-    <div
-      v-show="data.property.sn_position.includes('right')"
-      class="right"
-      :style="getJustifyContentStyle(data.property.sn_position)"
-    >
-      {{ data.property.serial_number }}
-    </div>
-    <div
-      v-show="data.property.sn_position.includes('bottom')"
-      class="bottom"
-      :style="getJustifyContentStyle(data.property.sn_position)"
-    >
-      {{ data.property.serial_number }}
-    </div>
   </div>
 </template>
 
@@ -108,17 +83,47 @@ export default {
         this.curVideoIndex = this.data.file_id_list.length - 1;
       }
     },
+
+    /**
+     * 得到序号外部样式
+     */
+    getAreaStyle() {
+      const position = this.data.property.sn_position;
+      let grid = '';
+
+      if (position.includes('right')) {
+        grid = `"main position" / 1fr auto`;
+      } else if (position.includes('left')) {
+        grid = `"position main" / auto 1fr`;
+      } else if (position.includes('top')) {
+        grid = `"position" auto "main" 1fr`;
+      } else if (position.includes('bottom')) {
+        grid = `"main" 1fr "position" auto`;
+      }
+
+      return {
+        grid,
+      };
+    },
+
     /**
-     * 得到位置样式
-     * @param {string} position 位置
+     * 得到序号位置样式
      */
-    getJustifyContentStyle(position) {
+    getJustifyContentStyle() {
+      const position = this.data.property.sn_position;
+      let placeSelf = '';
+
       if (position.includes('start')) {
-        return 'justify-content: start';
+        placeSelf = 'flex-start';
       } else if (position.includes('end')) {
-        return 'justify-content: end';
+        placeSelf = 'flex-end';
+      } else {
+        placeSelf = 'center';
       }
-      return 'justify-content: center';
+
+      return {
+        placeSelf,
+      };
     },
   },
 };
@@ -127,14 +132,14 @@ export default {
 <style lang="scss" scoped>
 .video_area {
   display: grid;
-  grid:
-    'top top top'
-    'left main right'
-    'bottom bottom bottom';
-  grid-template-columns: 1fr 28fr 1fr;
-  width: 100%;
-
-  > div {
+  gap: 6px;
+  padding: 8px;
+
+  .sn-position {
+    grid-area: position;
+  }
+
+  > .main {
     display: flex;
     margin: 4px auto;
 
@@ -143,16 +148,6 @@ export default {
     }
   }
 
-  .top {
-    grid-area: top;
-    width: 92%;
-  }
-
-  .left {
-    flex-direction: column;
-    grid-area: left;
-  }
-
   .main {
     grid-area: main;
     width: 100%;
@@ -171,9 +166,11 @@ export default {
       display: flex;
       column-gap: 3%;
       width: 100%;
+      height: 100%;
 
       :deep .el-carousel {
-        width: 90%;
+        flex: 1;
+        width: 75%;
         background-color: #d9d9d9;
 
         &__container {
@@ -181,6 +178,7 @@ export default {
           max-height: 500px;
           padding: 2px;
           margin: 0 auto;
+          overflow: auto;
         }
 
         &__item {
@@ -192,21 +190,11 @@ export default {
         display: flex;
         flex-direction: column;
         row-gap: 20px;
-        width: 25%;
+        width: 23%;
         max-height: 500px;
         overflow: auto;
       }
     }
   }
-
-  .right {
-    flex-direction: column;
-    grid-area: right;
-  }
-
-  .bottom {
-    grid-area: bottom;
-    width: 92%;
-  }
 }
 </style>