优化预览样式

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

@@ -1,18 +1,26 @@
 <template>
   <div class="audio_area">
     <div class="top">
-      <span v-show="'top-start' === data.property.sn_position">{{ data.property.serial_number }}</span>
-      <span v-show="'top' === data.property.sn_position" style="justify-content: center">{{
-        data.property.serial_number
-      }}</span>
-      <span v-show="'top-end' === data.property.sn_position">{{ data.property.serial_number }}</span>
+      <span v-show="'top-start' === data.property.sn_position" style="justify-content: start">
+        {{ data.property.serial_number }}
+      </span>
+      <span v-show="'top' === data.property.sn_position" style="justify-content: center">
+        {{ data.property.serial_number }}
+      </span>
+      <span v-show="'top-end' === data.property.sn_position" style="justify-content: end">
+        {{ data.property.serial_number }}
+      </span>
     </div>
     <div class="left">
-      <span v-show="'left-start' === data.property.sn_position">{{ data.property.serial_number }}</span>
-      <span v-show="'left' === data.property.sn_position" style="justify-content: center">{{
-        data.property.serial_number
-      }}</span>
-      <span v-show="'left-end' === data.property.sn_position">{{ data.property.serial_number }}</span>
+      <span v-show="'left-start' === data.property.sn_position" style="justify-content: start">
+        {{ data.property.serial_number }}
+      </span>
+      <span v-show="'left' === data.property.sn_position" style="justify-content: center">
+        {{ data.property.serial_number }}
+      </span>
+      <span v-show="'left-end' === data.property.sn_position" style="justify-content: end">
+        {{ data.property.serial_number }}
+      </span>
     </div>
     <div class="main">
       <ul v-if="'list' === data.property.view_method" class="view_list">
@@ -55,18 +63,26 @@
       </div>
     </div>
     <div class="right">
-      <span v-show="'right-start' === data.property.sn_position">{{ data.property.serial_number }}</span>
-      <span v-show="'right' === data.property.sn_position" style="justify-content: center">{{
-        data.property.serial_number
-      }}</span>
-      <span v-show="'right-end' === data.property.sn_position">{{ data.property.serial_number }}</span>
+      <span v-show="'right-start' === data.property.sn_position" style="justify-content: start">
+        {{ data.property.serial_number }}
+      </span>
+      <span v-show="'right' === data.property.sn_position" style="justify-content: center">
+        {{ data.property.serial_number }}
+      </span>
+      <span v-show="'right-end' === data.property.sn_position" style="justify-content: end">
+        {{ data.property.serial_number }}
+      </span>
     </div>
     <div class="bottom">
-      <span v-show="'bottom-start' === data.property.sn_position">{{ data.property.serial_number }}</span>
-      <span v-show="'bottom' === data.property.sn_position" style="justify-content: center">{{
-        data.property.serial_number
-      }}</span>
-      <span v-show="'bottom-end' === data.property.sn_position">{{ data.property.serial_number }}</span>
+      <span v-show="'bottom-start' === data.property.sn_position" style="justify-content: start">
+        {{ data.property.serial_number }}
+      </span>
+      <span v-show="'bottom' === data.property.sn_position" style="justify-content: center">
+        {{ data.property.serial_number }}
+      </span>
+      <span v-show="'bottom-end' === data.property.sn_position" style="justify-content: end">
+        {{ data.property.serial_number }}
+      </span>
     </div>
   </div>
 </template>
@@ -120,20 +136,23 @@ export default {
 .audio_area {
   display: grid;
   grid:
-    'top top top top top'
-    'left main main main right'
-    'bottom bottom bottom bottom bottom';
+    'top top top'
+    'left main right'
+    'bottom bottom bottom';
+  grid-template-columns: 1fr 28fr 1fr;
+  width: 100%;
 
   > div {
-    display: flex;
-    justify-content: space-between;
-    margin: 0 auto;
-    text-align: center;
+    margin: 4px auto;
+
+    > span {
+      display: flex;
+    }
   }
 
   .top {
     grid-area: top;
-    width: 100%;
+    width: 92%;
   }
 
   .left {
@@ -144,29 +163,31 @@ export default {
   .main {
     grid-area: main;
     width: 100%;
-    height: 100%;
 
     .view_list {
       display: flex;
       gap: 32px 28px;
+      width: 100%;
 
       > li {
-        width: 250px;
+        width: 25%;
+        min-width: 120px;
         height: 46px;
       }
     }
 
     .view_independent {
       display: flex;
-      column-gap: 28px;
+      column-gap: 3%;
+      width: 100%;
 
       :deep .el-carousel {
-        width: 855px;
-        padding: 200px;
+        width: 90%;
+        padding: 20%;
         background-color: #d9d9d9;
 
         &__container {
-          height: 150px;
+          height: 100px;
           margin: 0 auto;
         }
 
@@ -179,8 +200,7 @@ export default {
         display: flex;
         flex-direction: column;
         row-gap: 2px;
-        width: 250px;
-        height: 46px;
+        width: 25%;
       }
     }
   }
@@ -192,7 +212,7 @@ export default {
 
   .bottom {
     grid-area: bottom;
-    width: 100%;
+    width: 92%;
   }
 }
 </style>

src/views/book/courseware/preview/components/common/AudioPlay.vue

@@ -202,7 +202,7 @@ export default {
 
   .audio-icon {
     display: flex;
-    column-gap: 80px;
+    column-gap: 15%;
     align-items: center;
     justify-content: end;
 
@@ -245,6 +245,7 @@ export default {
     display: flex;
     column-gap: 8px;
     align-items: center;
+    min-width: 110px;
     padding: 13px;
     background-color: #d9d9d9;
 

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

@@ -1,18 +1,26 @@
 <template>
   <div class="picture_area">
     <div class="top">
-      <span v-show="'top-start' === data.property.sn_position">{{ data.property.serial_number }}</span>
-      <span v-show="'top' === data.property.sn_position" style="justify-content: center">{{
-        data.property.serial_number
-      }}</span>
-      <span v-show="'top-end' === data.property.sn_position">{{ data.property.serial_number }}</span>
+      <span v-show="'top-start' === data.property.sn_position" style="justify-content: start">
+        {{ data.property.serial_number }}
+      </span>
+      <span v-show="'top' === data.property.sn_position" style="justify-content: center">
+        {{ data.property.serial_number }}
+      </span>
+      <span v-show="'top-end' === data.property.sn_position" style="justify-content: end">
+        {{ data.property.serial_number }}
+      </span>
     </div>
     <div class="left">
-      <span v-show="'left-start' === data.property.sn_position">{{ data.property.serial_number }}</span>
-      <span v-show="'left' === data.property.sn_position" style="justify-content: center">{{
-        data.property.serial_number
-      }}</span>
-      <span v-show="'left-end' === data.property.sn_position">{{ data.property.serial_number }}</span>
+      <span v-show="'left-start' === data.property.sn_position" style="justify-content: start">
+        {{ data.property.serial_number }}
+      </span>
+      <span v-show="'left' === data.property.sn_position" style="justify-content: center">
+        {{ data.property.serial_number }}
+      </span>
+      <span v-show="'left-end' === data.property.sn_position" style="justify-content: end">
+        {{ data.property.serial_number }}
+      </span>
     </div>
     <div class="main">
       <div class="view_area">
@@ -21,12 +29,18 @@
           ref="picture_carousel"
           class="view_independent"
           indicator-position="none"
+          :autoplay="false"
         >
           <el-carousel-item v-for="(file, i) in data.file_list" :key="i">
             <el-image :id="file.file_id" :src="file.file_url" fit="contain" />
           </el-carousel-item>
         </el-carousel>
-        <ul class="view_list">
+        <ul
+          class="view_list"
+          :style="{
+            columnGap: 'list' === data.property.view_method ? '1%' : '4%',
+          }"
+        >
           <li v-for="(file, i) in data.file_list" :key="i" @click="handleIndicatorClick(i)">
             <el-image :id="file.file_id" :src="file.file_url" fit="contain" />
           </li>
@@ -34,18 +48,26 @@
       </div>
     </div>
     <div class="right">
-      <span v-show="'right-start' === data.property.sn_position">{{ data.property.serial_number }}</span>
-      <span v-show="'right' === data.property.sn_position" style="justify-content: center">{{
-        data.property.serial_number
-      }}</span>
-      <span v-show="'right-end' === data.property.sn_position">{{ data.property.serial_number }}</span>
+      <span v-show="'right-start' === data.property.sn_position" style="justify-content: start">
+        {{ data.property.serial_number }}
+      </span>
+      <span v-show="'right' === data.property.sn_position" style="justify-content: center">
+        {{ data.property.serial_number }}
+      </span>
+      <span v-show="'right-end' === data.property.sn_position" style="justify-content: end">
+        {{ data.property.serial_number }}
+      </span>
     </div>
     <div class="bottom">
-      <span v-show="'bottom-start' === data.property.sn_position">{{ data.property.serial_number }}</span>
-      <span v-show="'bottom' === data.property.sn_position" style="justify-content: center">{{
-        data.property.serial_number
-      }}</span>
-      <span v-show="'bottom-end' === data.property.sn_position">{{ data.property.serial_number }}</span>
+      <span v-show="'bottom-start' === data.property.sn_position" style="justify-content: start">
+        {{ data.property.serial_number }}
+      </span>
+      <span v-show="'bottom' === data.property.sn_position" style="justify-content: center">
+        {{ data.property.serial_number }}
+      </span>
+      <span v-show="'bottom-end' === data.property.sn_position" style="justify-content: end">
+        {{ data.property.serial_number }}
+      </span>
     </div>
   </div>
 </template>
@@ -79,20 +101,23 @@ export default {
 .picture_area {
   display: grid;
   grid:
-    'top top top top top'
-    'left main main main right'
-    'bottom bottom bottom bottom bottom';
+    'top top top'
+    'left main right'
+    'bottom bottom bottom';
+  grid-template-columns: 1fr 28fr 1fr;
+  width: 100%;
 
   > div {
-    display: flex;
-    justify-content: space-between;
-    margin: 0 auto;
-    text-align: center;
+    margin: 4px auto;
+
+    > span {
+      display: flex;
+    }
   }
 
   .top {
     grid-area: top;
-    width: 100%;
+    width: 92%;
   }
 
   .left {
@@ -103,31 +128,50 @@ export default {
   .main {
     grid-area: main;
     width: 100%;
-    height: 100%;
 
     .view_area {
-      width: 1086px;
-      height: auto;
-      margin: 0 auto;
+      width: 100%;
 
       :deep .el-carousel {
         margin-bottom: 16px;
         background-color: #d9d9d9;
 
+        &__container::before {
+          display: inline-block;
+          padding-bottom: 55%;
+          content: '';
+        }
+
         &__container {
-          height: 598px;
+          height: 100%;
+        }
+
+        &__item {
+          display: flex;
+          justify-content: center;
+          text-align: center;
         }
       }
 
       .view_list {
         display: flex;
-        column-gap: 44px;
+
+        li::before {
+          display: inline-block;
+          padding-bottom: 100%;
+          content: '';
+        }
+
+        li {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 14%;
+          background-color: #d9d9d9;
+        }
 
         .el-image {
-          width: 144px;
-          height: 144px;
           cursor: pointer;
-          background-color: #d9d9d9;
         }
       }
     }
@@ -140,7 +184,7 @@ export default {
 
   .bottom {
     grid-area: bottom;
-    width: 100%;
+    width: 92%;
   }
 }
 </style>