update 表格

src/components/Adult/preview/HeaderSeparate.vue

@@ -15,10 +15,7 @@
             v-for="({ text, english }, i) in curQue.tableData.headers"
             :key="`th-${i}`"
           >
-            <div
-              class="thead-content"
-              :style="theadStyle"
-            >
+            <div class="thead-content" :style="theadStyle">
               <span class="chs">{{ text }}</span><span class="english">{{ english }}</span>
             </div>
           </th>
@@ -27,7 +24,7 @@
 
       <tbody
         :style="{
-          'text-align': `${curQue.textAlign}`
+          'text-align': `${curQue.textAlign}`,
         }"
       >
         <tr v-for="(row, i) in curQue.tableData.body" :key="`tr-${i}`">
@@ -35,8 +32,14 @@
             v-for="(col, j) in row.content"
             :key="`td-${j}`"
             :class="[
-              `${j === 0 ? 'mb' : j === row.content.length - 1 ? 'mbr' : 'mc'}`,
-              `${curQue.firstColAligin === 'center' ? 'col-center' : ''}`
+              `${
+                j === 0
+                  ? 'bor-l'
+                  : j === row.content.length - 1
+                    ? 'bor-r'
+                    : 'bor-c'
+              }`,
+              `${curQue.firstColAligin === 'center' ? 'col-center' : ''}`,
             ]"
           >
             <template v-if="col.type === 'content'">
@@ -63,21 +66,19 @@
               <div>
                 <span
                   v-for="({ pinyin, chs }, k) in col.sentence_data.wordsList"
-                  :key="
-                    `${
-                      curQue.pinyinPosition === 'top' ||
-                      curQue.pinyinPosition === 'left'
-                        ? 'pinyin'
-                        : 'chs'
-                    }-${k}`
-                  "
+                  :key="`${
+                    curQue.pinyinPosition === 'top' ||
+                    curQue.pinyinPosition === 'left'
+                      ? 'pinyin'
+                      : 'chs'
+                  }-${k}`"
                   :class="[
                     `${
                       curQue.pinyinPosition === 'top' ||
                       curQue.pinyinPosition === 'left'
                         ? 'pinyin'
                         : 'chs'
-                    }`
+                    }`,
                   ]"
                 >
                   {{
@@ -91,21 +92,19 @@
               <div>
                 <span
                   v-for="({ pinyin, chs }, k) in col.sentence_data.wordsList"
-                  :key="
-                    `${
-                      curQue.pinyinPosition === 'top' ||
-                      curQue.pinyinPosition === 'left'
-                        ? 'chs'
-                        : 'pinyin'
-                    }-${k}`
-                  "
+                  :key="`${
+                    curQue.pinyinPosition === 'top' ||
+                    curQue.pinyinPosition === 'left'
+                      ? 'chs'
+                      : 'pinyin'
+                  }-${k}`"
                   :class="[
                     `${
                       curQue.pinyinPosition === 'top' ||
                       curQue.pinyinPosition === 'left'
                         ? 'chs'
                         : 'pinyin'
-                    }`
+                    }`,
                   ]"
                 >
                   {{
@@ -129,41 +128,41 @@ export default {
   props: {
     curQue: {
       type: Object,
-      required: true
+      required: true,
     },
     themeColor: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
   data() {
     return {
-      isAnswerMode: false
+      isAnswerMode: false,
     };
   },
   computed: {
     theadStyle() {
       const hp = this.curQue.headerEnglishPosition;
-      if (hp === 'top') {
+      if (hp === "top") {
         return {
-          'flex-direction': 'column-reverse'
+          "flex-direction": "column-reverse",
         };
       }
-      if (hp === 'right') {
+      if (hp === "right") {
         return {
-          'flex-direction': 'row',
-          'column-gap': '8px'
+          "flex-direction": "row",
+          "column-gap": "8px",
         };
       }
-      if (hp === 'bottom') {
+      if (hp === "bottom") {
         return {
-          'flex-direction': 'column'
+          "flex-direction": "column",
         };
       }
-      if (hp === 'left') {
+      if (hp === "left") {
         return {
-          'flex-direction': 'row-reverse',
-          'column-gap': '8px'
+          "flex-direction": "row-reverse",
+          "column-gap": "8px",
         };
       }
     },
@@ -171,28 +170,28 @@ export default {
       let pyPos = this.curQue.pinyinPosition;
       if (pyPos === "left") {
         return {
-          "column-gap": "16px"
+          "column-gap": "16px",
         };
       }
 
       if (pyPos === "top") {
         return {
-          "flex-direction": "column"
+          "flex-direction": "column",
         };
       }
 
       if (pyPos === "right") {
         return {
-          "column-gap": "16px"
+          "column-gap": "16px",
         };
       }
 
       if (pyPos === "bottom") {
         return {
-          "flex-direction": "column"
+          "flex-direction": "column",
         };
       }
-    }
+    },
   },
   created() {
     const Bookanswer = this.curQue.Bookanswer;
@@ -211,10 +210,10 @@ export default {
       this.curQue.Bookanswer[`${i}-${j}`] = {
         col: i,
         row: j,
-        value
+        value,
       };
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -265,7 +264,7 @@ export default {
       font-family: "FZJCGFKTK";
     }
 
-    .mb {
+    .bor-l {
       border-left: 2px solid transparent;
       border-bottom-width: 1px;
       border-image: linear-gradient(
@@ -284,7 +283,7 @@ export default {
       }
     }
 
-    .mbr {
+    .bor-r {
       border-right: 2px solid transparent;
       border-bottom-width: 1px;
       border-image: linear-gradient(
@@ -299,7 +298,7 @@ export default {
       border-image-outset: 0 0 0 4px;
     }
 
-    .mc {
+    .bor-c {
       border-left: 2px solid transparent;
       border-right: 2px solid transparent;
       border-image: repeating-linear-gradient(
@@ -312,18 +311,18 @@ export default {
         2;
       border-image-outset: 0 4px 0 4px;
       position: relative;
-    }
 
-    .mc::after {
-      content: "";
-      position: absolute;
-      top: 100%;
-      left: 0;
-      width: 100%;
-      height: 1px;
-      display: inline-block;
-      background-color: #cecece;
-      box-shadow: 5px 0 #cecece, -5px 0 #cecece;
+      &::after {
+        content: "";
+        position: absolute;
+        top: 100%;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        display: inline-block;
+        background-color: #cecece;
+        box-shadow: 5px 0 #cecece, -5px 0 #cecece;
+      }
     }
   }
 }