字词卡片调整样式

src/views/wordcard/cread.vue

@@ -32,19 +32,24 @@
       <template v-else>
         <h3>{{ saveName }}</h3>
         <div class="btn-box">
+          <el-button @click="changeRowLength">{{ showRoeText[showRowLength] }}</el-button>
           <el-button small @click="editCardflag = true"><i class="el-icon-edit"></i>编辑</el-button>
           <el-button small @click="download2"><img src="../../assets/teacherdev/word-eyes.png" alt="" />打印</el-button>
         </div>
       </template>
     </div>
-    <div class="content" :class="[editCardflag ? '' : 'content-flex']">
+    <div
+      class="content"
+      :class="[editCardflag ? '' : 'content-flex content-flex-' + showRowLength]"
+      :style="{ minHeight: innerHeight - 172 + 'px' }"
+    >
       <div v-for="(item, index) in newEditTable" :key="index" :class="[editCardflag ? '' : 'item-flex']">
         <writeTable
           :editCardflag="editCardflag"
           :dataConfig="writeTableData"
           :data="item"
           :pageNumber="index + 1"
-          :totalNumber="newEditTable.length"
+          :totalNumber="showRowLength"
           :isPreview="true"
           @handleDelItem="handleDelItem"
         />
@@ -139,6 +144,14 @@ export default {
         // },
       ],
       showLeft: true,
+      showRowLength: 1, // 一页展示几个，有一行一列，一行两列，一行三列和两行两列
+      showRoeText: {
+        1: '一行一列',
+        2: '一行两列',
+        3: '一行三列',
+        4: '多行两列',
+      },
+      innerHeight: window.innerHeight,
     };
   },
   //计算属性 类似于data概念
@@ -223,6 +236,7 @@ export default {
             this.loading = false;
             this.editCardflag = false;
             this.$message.success('保存成功');
+            this.showRowLength = this.newEditTable.length > 3 ? 4 : this.newEditTable.length;
           })
           .catch((res) => {
             this.loading.close();
@@ -250,6 +264,7 @@ export default {
             this.loading = false;
             this.editCardflag = false;
             this.$message.success('保存成功');
+            this.showRowLength = this.newEditTable.length > 3 ? 4 : this.newEditTable.length;
           })
           .catch((res) => {
             this.loading.close();
@@ -266,9 +281,11 @@ export default {
         id: this.$route.query.id,
       })
         .then((res) => {
+          console.log(789);
           this.saveName = res.name;
           this.newEditTable = JSON.parse(res.content);
           this.loading = false;
+          this.showRowLength = this.newEditTable.length > 3 ? 4 : this.newEditTable.length;
         })
         .catch((res) => {
           this.loading = false;
@@ -405,6 +422,13 @@ export default {
     handleExceed(files) {
       this.$message.warning(`当前限制选择 9999 个文件，本次选择了 ${files.length} 个文件`);
     },
+    changeRowLength() {
+      if (this.showRowLength === 4) {
+        this.showRowLength = 1;
+      } else {
+        this.showRowLength++;
+      }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -548,13 +572,35 @@ export default {
     // padding-top: 88px;
     &-flex {
       display: flex;
-      width: 1218px;
+      width: 1470px;
       margin: 0 auto;
       flex-flow: wrap;
-      column-gap: 18px;
+      gap: 30px 50px;
+      justify-content: center;
+      align-content: center;
+      &-3,
+      &-4 {
+        .item-flex {
+          width: 450px !important;
+        }
+      }
+      &-2,
+      &-4 {
+        justify-content: start;
+      }
+      &-1 {
+        width: 500px;
+      }
+      &-2 {
+        width: 1060px;
+      }
+      &-4 {
+        width: 960px;
+      }
     }
     .item-flex {
-      width: 600px;
+      width: 500px;
+      flex-shrink: 0;
     }
   }
 }

src/views/wordcard/writeTableNew.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['writeTable', editCardflag ? '' : 'writeTable-preview']" v-if="data">
+  <div :class="['writeTable', editCardflag ? '' : 'writeTable-preview writeTable-preview-' + totalNumber]" v-if="data">
     <div class="writeTop" v-bind:class="{ flipped: isFlipped && !editCardflag }">
       <template v-if="editCardflag">
         <div class="left">
@@ -91,13 +91,19 @@
           <div class="item-image" v-if="data.left.fileList.length > 0">
             <el-image
               :style="{
-                width: '568px',
+                width: totalNumber < 3 ? '468px' : '418px',
                 height:
-                  data.left.con && (data.headerCon || data.label)
-                    ? '370px'
+                  totalNumber < 3
+                    ? data.left.con && (data.headerCon || data.label)
+                      ? '300px'
+                      : !data.left.con && (data.headerCon || data.label)
+                      ? '330px'
+                      : ' 340px'
+                    : data.left.con && !data.right.hideHanzi && (data.headerCon || data.label)
+                    ? '248px'
                     : !data.left.con && (data.headerCon || data.label)
-                    ? '402px'
-                    : ' 418px',
+                    ? '268px'
+                    : ' 268px',
               }"
               :src="data.left.fileList[0].fileUrl"
               :preview-src-list="[data.left.fileList[0].fileUrl]"
@@ -118,7 +124,14 @@
           v-if="(isPreview && !showLeft) || !isPreview"
           :style="{
             borderColor: data.borderColor,
-            paddingTop: data.right.collocation || data.right.exampleSent || data.right.definition ? '' : '130px',
+            paddingTop:
+              totalNumber < 3
+                ? data.right.collocation || data.right.exampleSent || data.right.definition
+                  ? ''
+                  : '90px'
+                : data.right.collocation || data.right.exampleSent || data.right.definition
+                ? ''
+                : '60px',
           }"
         >
           <div class="header-info-preview">
@@ -435,10 +448,10 @@ export default {
   box-sizing: border-box;
   perspective: 1000px;
   &-preview {
-    width: 600px;
+    width: 100%;
   }
   .writeTop {
-    min-height: 530px;
+    min-height: 422px;
     display: flex;
     column-gap: 8px;
     perspective: 1000px;
@@ -448,8 +461,8 @@ export default {
     position: relative;
     .left,
     .right {
-      width: 600px;
-      min-height: 450px;
+      width: 100%;
+      min-height: 360px;
       padding: 8px 12px 18px 12px;
       border-radius: 24px;
       background: #fff;
@@ -480,7 +493,7 @@ export default {
     }
     .left-preview {
       padding-top: 40px;
-      padding-bottom: 32px;
+      // padding-bottom: 32px;
       // position: absolute;
       backface-visibility: hidden;
     }
@@ -492,7 +505,7 @@ export default {
       z-index: 1;
       h5 {
         color: #000;
-        font-size: 24px;
+        font-size: 20px;
         font-weight: 400;
         line-height: 32px;
         padding: 0 12px;
@@ -505,7 +518,7 @@ export default {
         background: #fff;
         padding: 0px 16px 0px 8px;
         color: #fff;
-        font-size: 24px;
+        font-size: 20px;
         font-weight: 500;
         line-height: 150%;
       }
@@ -528,8 +541,8 @@ export default {
     }
     .overturn-btn {
       position: absolute;
-      right: 24px;
-      bottom: 24px;
+      right: 8px;
+      bottom: 8px;
       border-radius: 8px;
       background: #e0e0e0;
       padding: 8px;
@@ -590,7 +603,7 @@ export default {
       }
     }
     .right-preview {
-      padding: 36px 72px;
+      padding: 36px;
       display: block;
       .pinyin-box {
         color: #de4444;
@@ -613,7 +626,7 @@ export default {
             color: #de4444;
             font-feature-settings: 'cv01' on;
             font-family: League;
-            font-size: 24px;
+            font-size: 18px;
             line-height: 120%;
             margin-bottom: 8px;
           }
@@ -643,7 +656,7 @@ export default {
           p {
             width: 40px;
             color: #000;
-            font-size: 24px;
+            font-size: 18px;
             font-weight: 400;
             line-height: 150%;
           }
@@ -714,11 +727,11 @@ export default {
     }
 
     .con-preview {
-      margin-top: 16px;
+      margin-top: 8px;
       color: #000;
       text-align: center;
       font-family: 'FZJCGFKTK';
-      font-size: 64px;
+      font-size: 38px;
       font-weight: 400;
       line-height: 100%;
       &-big {
@@ -731,6 +744,13 @@ export default {
       justify-content: center;
     }
   }
+
+  &-preview-3,
+  &-preview-4 {
+    .writeTop {
+      min-height: 360px;
+    }
+  }
   .writeTop-nopadding {
     padding-top: 0;
     height: 842px;