card style md

src/assets/styles/card-design.scss

@@ -56,7 +56,8 @@
   }
   // page-box
   .page-box {
-    box-shadow: $--shadow-light;
+    // box-shadow: $--shadow-light;
+    box-shadow: 0 0 1px #333;
     &::before {
       content: "";
       position: absolute;
@@ -353,6 +354,10 @@
     &:hover {
       border-color: $--color-primary;
     }
+
+    &:not(:first-child) {
+      margin-left: 10px;
+    }
   }
 }
 // element-prop-edit

src/assets/styles/card-preview.scss

@@ -14,7 +14,6 @@
   padding: 0;
 
   .page-box {
-    // height: 296.5mm;
     margin: 0 auto;
     box-shadow: none;
     page-break-after: always;
@@ -44,7 +43,7 @@
           width: 430px;
         }
         &:not(:first-child) {
-          width: calc((100% - 430px) / 2);
+          width: 508.5px;
         }
       }
     }
@@ -54,7 +53,7 @@
           width: 430px;
         }
         &:not(:first-child) {
-          width: calc((100% - 430px) / 3);
+          width: 335.5px;
         }
       }
     }
@@ -83,7 +82,7 @@
   height: 100%;
   top: 0;
   left: 0;
-  padding: 50px 30px;
+  padding: 106px 80px;
   z-index: 9;
   font-size: 0;
 }
@@ -182,10 +181,10 @@
 // locator
 .page-locators {
   position: absolute;
-  top: 50px;
-  left: 30px;
-  right: 30px;
-  bottom: 50px;
+  top: 106px;
+  left: 80px;
+  right: 80px;
+  bottom: 106px;
   z-index: 8;
 
   &-4 {
@@ -221,27 +220,27 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 30px;
+  width: 24px;
   &:first-child {
     left: 0;
   }
   &:nth-of-type(2) {
     left: 50%;
-    margin-left: -15px;
+    margin-left: -12px;
   }
   &:last-child {
     right: 0;
   }
   li {
     position: absolute;
-    width: 30px;
-    border-bottom: 15px solid #000;
+    width: 24px;
+    border-bottom: 16px solid #000;
     z-index: 99;
     &:first-child {
-      top: -20px;
+      top: -46px;
     }
     &:last-child {
-      bottom: -20px;
+      bottom: -46px;
     }
   }
 }
@@ -259,6 +258,28 @@
     padding: 10px;
   }
 }
+// grid
+.grid-container {
+  margin-left: -10px;
+  margin-right: -10px;
+}
+.grid-row {
+  display: table;
+  width: 100%;
+  border-spacing: 10px 5px;
+  border-collapse: separate;
+
+  .grid-col {
+    display: table-cell;
+    width: 50%;
+    vertical-align: top;
+    border: 1px solid #333;
+    &-dash {
+      border-style: dashed;
+      vertical-align: middle;
+    }
+  }
+}
 // card-head
 .card-head {
   &-top {
@@ -273,7 +294,8 @@
   &-subtitle {
     textarea,
     > p {
-      height: 50px;
+      height: 55px;
+      padding: 0 10px;
       font-size: 14px;
       font-family: $--font-family;
       font-weight: bold;
@@ -282,6 +304,7 @@
       border-color: transparent;
       background-color: transparent;
       color: #000;
+      overflow: hidden;
     }
   }
   &-body {
@@ -291,15 +314,9 @@
       padding-bottom: 5px;
     }
     &-spin {
-      height: 100%;
       padding: 5px 12px;
       white-space: normal;
       word-break: break-all;
-      border: 1px solid #000;
-
-      &-dash {
-        border-style: dotted;
-      }
     }
     .stdinfo-item {
       height: 34px;
@@ -352,22 +369,32 @@
       }
     }
     .head-stdno {
-      position: relative;
+      height: 100%;
       padding: 0;
       .stdno-empty {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 100%;
-        left: 0;
-        z-index: auto;
         font-weight: bold;
-        text-align: center;
         letter-spacing: 3px;
       }
       .stdno-fill {
         min-height: 286px;
         height: 100%;
+        position: relative;
+
+        &-rect {
+          font-size: 0;
+          height: 27px;
+          border-bottom: 1px solid #333;
+        }
+        &-number {
+          display: inline-block;
+          vertical-align: top;
+          width: 7.692%;
+          height: 100%;
+          &:not(:last-child) {
+            border-right: 1px solid #333;
+          }
+        }
+
         &-head {
           position: absolute;
           width: 100%;
@@ -386,30 +413,22 @@
         }
 
         &-body {
-          display: flex;
-          height: 100%;
+          position: absolute;
+          top: 0;
+          bottom: 0;
           padding-top: 51px;
+          overflow: hidden;
+          display: table;
+          width: 100%;
         }
         &-list {
+          display: table-cell;
           width: 7.692%;
-          display: flex;
           padding: 3px 0;
-          flex-direction: column;
-          justify-content: space-around;
-        }
-        &-rect {
-          display: flex;
-          height: 27px;
-          border-bottom: 1px solid #333;
-        }
-        &-number {
-          width: 7.692%;
-          &:not(:last-child) {
-            border-right: 1px solid #333;
-          }
         }
         &-option {
-          margin: auto 6px;
+          margin: 8px auto;
+          width: 20px;
           height: 14px;
           font-size: 12px;
           line-height: 1;
@@ -419,17 +438,10 @@
         }
       }
       .stdno-auto {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 100%;
-        left: 0;
-        z-index: auto;
-        text-align: center;
-
         &-barcode {
           height: 80px;
           padding: 10px 0;
+          text-align: center;
 
           > img {
             height: 100%;
@@ -481,6 +493,8 @@
     .head-dynamic {
       padding: 0;
       font-size: 12px;
+      border-spacing: 0;
+      border-collapse: collapse;
 
       &-part:not(:last-child) {
         border-bottom: 1px solid #000;
@@ -495,17 +509,17 @@
         }
       }
       &-missfill {
-        display: flex;
+        display: table;
+        width: 100%;
       }
       &-miss {
-        width: 140px;
         padding: 10px;
+        display: table-cell;
+        vertical-align: middle;
+        width: 133px;
         border-right: 1px solid #000;
-        display: flex;
-        align-items: center;
         .head-dynamic-content {
           height: 32px;
-          width: 100%;
         }
 
         span {
@@ -517,21 +531,17 @@
         }
         .dynamic-miss-body {
           margin-left: 32px;
-          height: 100%;
           padding-top: 8px;
-          .head-dynamic-rect {
-            margin: 0 auto;
-          }
+          text-align: center;
         }
       }
       &-fill {
-        width: 228px;
-        padding: 5px 10px;
-        display: flex;
-        align-items: center;
+        display: table-cell;
+        vertical-align: middle;
+        padding: 10px;
 
         p {
-          line-height: 22px;
+          line-height: 18px;
           word-wrap: normal;
 
           > span,
@@ -589,80 +599,61 @@
         }
       }
       &-rect {
-        display: block;
-        width: 40px;
-        height: 16px;
+        display: inline-block;
+        width: 30px;
+        height: 14px;
         border: 1px solid #000;
-        box-sizing: border-box;
-        font-size: 14px;
+        font-size: 12px;
         text-align: center;
-        line-height: 18px;
+        line-height: 1;
         color: #666;
+        margin: 0 5px;
       }
       &-aorb {
-        height: 50px;
-        &-auto {
-          .dynamic-aorb-title {
-            border-right: 1px solid #000;
+        display: table;
+        width: 100%;
+        .dynamic-aorb-item {
+          display: table-cell;
+          vertical-align: middle;
+          text-align: center;
+          &:not(:last-child) {
+            border-right: 1px solid #333;
+          }
+        }
+        &-fill {
+          .dynamic-aorb-item:first-child {
+            border: none;
           }
         }
 
         .dynamic-aorb-title {
-          width: 100px;
-          height: 100%;
-          padding: 10px;
-          float: left;
+          width: 83px;
         }
-        .dynamic-aorb-body {
-          margin-left: 100px;
-          height: 100%;
-          overflow: hidden;
-
-          > span {
+        .dynamic-aorb-info {
+          width: 50px;
+          font-size: 16px;
+        }
+        .dynamic-aorb-barcode {
+          img {
             display: block;
-            float: left;
-            height: 100%;
-          }
-          span.dynamic-aorb-rect {
-            width: 50%;
+            padding: 10px 0;
             position: relative;
-            .head-dynamic-rect {
-              position: absolute;
-              top: 50%;
-              left: 50%;
-              transform: translate(-50%, -50%);
-            }
-          }
-
-          span.dynamic-aorb-type {
-            width: 40px;
-            border-right: 1px solid #000;
-            font-size: 16px;
-          }
-          span.dynamic-aorb-barcode {
-            float: none;
-            margin-left: 40px;
-            > img {
-              padding: 5px 0;
-              position: relative;
-              margin: 0 auto;
-              top: 50%;
-              left: 50%;
-              transform: translate(-50%, -50%);
-              height: 32px;
-            }
+            margin: 0 auto;
+            height: 32px;
           }
         }
-      }
-      .center-cont {
-        display: block;
-        text-align: center;
-        position: relative;
-        top: 50%;
-        transform: translateY(-50%);
+        .dynamic-aorb-rects {
+          padding: 10px;
+        }
       }
     }
   }
+  &-part {
+    border: 1px solid #333;
+    &:not(:last-child) {
+      margin-bottom: 10px;
+    }
+  }
   &-normal {
     .head-dynamic {
       &-1 {
@@ -670,24 +661,16 @@
           height: 100%;
         }
       }
-      &-2 {
-        .head-dynamic-part {
-          height: 50%;
-        }
-        .head-dynamic-write {
-          height: 97px;
-
-          + .head-dynamic-part {
-            height: calc(100% - 97px);
-          }
-        }
-      }
     }
   }
-
   &-narrow {
     .head-stdno {
       height: 138px;
+      .stdno-auto {
+        position: relative;
+        top: 50%;
+        margin-top: -40px;
+      }
     }
   }
 
@@ -715,9 +698,6 @@
     .head-dynamic-part {
       height: auto;
     }
-    .head-dynamic-aorb {
-      height: 60px;
-    }
   }
 
   &::before {
@@ -736,9 +716,14 @@
     }
 
     &-item {
+      border: 1px solid #333;
       &:nth-of-type(2) {
         margin-top: 10px;
       }
+      &-none {
+        border: none;
+        margin: 0 !important;
+      }
     }
   }
 }
@@ -853,12 +838,15 @@
 // elem-fill-question
 .elem-fill-question {
   white-space: normal;
+  .elem-body {
+    padding: 10px 20px;
+  }
 
   .group-item {
     display: inline-block;
     vertical-align: top;
     font-size: 0;
-    padding: 0 20px 0 0;
+    margin-bottom: 30px;
   }
   .question-item {
     font-size: 0;
@@ -871,7 +859,7 @@
     display: inline-block;
     vertical-align: middle;
     padding: 0;
-    width: 32px;
+    width: 24px;
     height: 14px;
     text-align: center;
     font-size: 12px;
@@ -881,11 +869,10 @@
     box-sizing: border-box;
 
     &:first-child {
-      padding-right: 5px;
-      padding-left: 5px;
       text-align: right;
       border-color: transparent;
       font-size: 12px;
+      margin-right: 20px !important;
       color: #000;
     }
     &:last-child {
@@ -985,7 +972,7 @@
   }
   .elem-explain-no {
     position: absolute;
-    left: 30px;
+    left: 20px;
     top: 10px;
     font-size: 12px;
     z-index: 9;

src/assets/styles/element-ui-costom.scss

@@ -118,7 +118,19 @@
     border: 1px solid $--color-border !important;
   }
 }
+.el-button--default {
+  color: $--color-text-secondary;
+  background: $--color-background;
+  border: 1px solid $--color-border;
+  &:hover,
+  &:focus {
+    color: $--color-text-secondary;
+    background: $--color-white;
+    border: 1px solid $--color-border;
+  }
+}
 .el-button--primary {
+  color: $--color-white;
   border-color: $--color-primary;
   background-image: linear-gradient(
     -90deg,
@@ -128,6 +140,7 @@
 
   &:hover,
   &:focus {
+    color: $--color-white;
     border-color: $--color-primary;
     background-image: linear-gradient(
       -90deg,
@@ -137,6 +150,7 @@
   }
 }
 .el-button--warning {
+  color: $--color-white;
   border-color: $--color-warning-lighter;
   background-image: linear-gradient(
     -90deg,
@@ -146,6 +160,7 @@
 
   &:hover,
   &:focus {
+    color: $--color-white;
     border-color: $--color-warning-lighter;
     background-image: linear-gradient(
       -90deg,
@@ -154,17 +169,6 @@
     );
   }
 }
-.el-button--default {
-  color: $--color-text-secondary;
-  background: $--color-background;
-  border: 1px solid $--color-border;
-  &:hover,
-  &:focus {
-    color: $--color-text-secondary;
-    background: $--color-white;
-    border: 1px solid $--color-border;
-  }
-}
 
 .el-button + .popover-button,
 .popover-button + .el-button {

src/modules/card/card.temp.json

@@ -21,6 +21,42 @@
             "h": "",
             "id": "locator-0-01"
           }
+        ],
+        [
+          {
+            "type": "LOCATOR",
+            "x": "",
+            "y": "",
+            "w": "",
+            "h": "",
+            "id": "locator-1-00"
+          },
+          {
+            "type": "LOCATOR",
+            "x": "",
+            "y": "",
+            "w": "",
+            "h": "",
+            "id": "locator-1-01"
+          }
+        ],
+        [
+          {
+            "type": "LOCATOR",
+            "x": "",
+            "y": "",
+            "w": "",
+            "h": "",
+            "id": "locator-2-00"
+          },
+          {
+            "type": "LOCATOR",
+            "x": "",
+            "y": "",
+            "w": "",
+            "h": "",
+            "id": "locator-2-01"
+          }
         ]
       ],
       "globals": [],
@@ -69,7 +105,7 @@
                 "客观题部分必须使用2B铅笔填涂，主观题部分请使用黑色签字笔写在指定的答题区内。",
                 "保持卡面清洁，不破损。"
               ],
-              "columnNumber": 2,
+              "columnNumber": 3,
               "isSimple": false,
               "sign": "head",
               "pageSize": "A3",
@@ -82,6 +118,15 @@
             }
           ]
         },
+        {
+          "type": "COLUMN",
+          "x": "",
+          "y": "",
+          "w": "",
+          "h": "",
+          "isFull": false,
+          "elements": []
+        },
         {
           "type": "COLUMN",
           "x": "",
@@ -95,7 +140,7 @@
     },
     {
       "type": "PAGE",
-      "columnGap": 20,
+      "columnGap": 10,
       "locators": [
         [
           {
@@ -127,6 +172,15 @@
           "isFull": false,
           "elements": []
         },
+        {
+          "type": "COLUMN",
+          "x": "",
+          "y": "",
+          "w": "",
+          "h": "",
+          "isFull": false,
+          "elements": []
+        },
         {
           "type": "COLUMN",
           "x": "",
@@ -141,8 +195,8 @@
   ],
   "cardConfig": {
     "pageSize": "A3",
-    "columnNumber": 2,
-    "columnGap": 20,
+    "columnNumber": 3,
+    "columnGap": 10,
     "aOrB": true,
     "showForbidArea": true,
     "missAndFill": true,

src/modules/card/components/elementEdit/CardHead.vue

@@ -19,23 +19,24 @@
 
     <template v-if="data.columnNumber === 2">
       <div class="card-head-body" v-if="data.examNumberType !== 'fill'">
-        <!-- TODO:预览时，剔除row/col -->
-        <el-row :gutter="10" type="flex">
-          <el-col :span="12">
-            <head-stdno :data="data"></head-stdno>
-          </el-col>
-          <el-col :span="12">
-            <head-stdinfo :data="data"></head-stdinfo>
-          </el-col>
-        </el-row>
-        <el-row :gutter="10" type="flex" v-if="!data.isSimple">
-          <el-col :span="12">
-            <head-notice :data="data"></head-notice>
-          </el-col>
-          <el-col :span="12">
-            <head-dynamic :data="data"></head-dynamic>
-          </el-col>
-        </el-row>
+        <div class="grid-container">
+          <div class="grid-row">
+            <div class="grid-col grid-col-dash">
+              <head-stdno :data="data"></head-stdno>
+            </div>
+            <div class="grid-col">
+              <head-stdinfo :data="data"></head-stdinfo>
+            </div>
+          </div>
+          <div class="grid-row">
+            <div class="grid-col">
+              <head-notice :data="data"></head-notice>
+            </div>
+            <div class="grid-col">
+              <head-dynamic :data="data"></head-dynamic>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="card-head-body" v-else>
         <card-head-body-auto-resize>
@@ -53,40 +54,28 @@
 
     <template v-if="data.columnNumber > 2">
       <div class="card-head-body" v-if="data.examNumberType !== 'fill'">
-        <el-row :gutter="10">
-          <el-col :span="24">
-            <head-stdno :data="data"></head-stdno>
-          </el-col>
-          <el-col :span="24">
-            <head-stdinfo :data="data"></head-stdinfo>
-          </el-col>
-        </el-row>
-        <el-row :gutter="10" v-if="!data.isSimple">
-          <el-col :span="24" v-if="hasDynamicArea">
-            <head-dynamic :data="data"></head-dynamic>
-          </el-col>
-          <el-col :span="24">
-            <head-notice :data="data"></head-notice>
-          </el-col>
-        </el-row>
+        <head-stdno class="card-head-part" :data="data"></head-stdno>
+        <head-stdinfo class="card-head-part" :data="data"></head-stdinfo>
+        <head-dynamic
+          class="card-head-part"
+          :data="data"
+          v-if="!data.isSimple && hasDynamicArea"
+        ></head-dynamic>
+        <head-notice
+          class="card-head-part"
+          :data="data"
+          v-if="!data.isSimple"
+        ></head-notice>
       </div>
       <div class="card-head-body" v-else>
-        <el-row :gutter="10">
-          <el-col :span="24">
-            <head-stdinfo :data="data"></head-stdinfo>
-          </el-col>
-          <el-col :span="24">
-            <head-stdno :data="data"></head-stdno>
-          </el-col>
-        </el-row>
-        <el-row :gutter="10">
-          <el-col :span="24" v-if="!data.isSimple && hasDynamicArea">
-            <head-dynamic :data="data"></head-dynamic>
-          </el-col>
-          <el-col :span="24">
-            <head-notice :data="data"></head-notice>
-          </el-col>
-        </el-row>
+        <head-stdinfo class="card-head-part" :data="data"></head-stdinfo>
+        <head-stdno class="card-head-part" :data="data"></head-stdno>
+        <head-dynamic
+          class="card-head-part"
+          :data="data"
+          v-if="!data.isSimple && hasDynamicArea"
+        ></head-dynamic>
+        <head-notice class="card-head-part" :data="data"></head-notice>
       </div>
     </template>
   </div>

src/modules/card/components/elementEdit/CardHeadBodyAutoResize.vue

@@ -25,7 +25,7 @@
         <slot name="stdno"></slot>
       </div>
       <div
-        class="rect-col-item"
+        :class="['rect-col-item', { 'rect-col-item-none': !$slots.dynamic }]"
         ref="dynamicContainer"
         :style="{ height: heights.dynamic + 'px' }"
       >
@@ -68,8 +68,6 @@ export default {
   },
   methods: {
     initStyles() {
-      console.log("11");
-
       this.isOrg = true;
       this.$nextTick(() => {
         const containers = ["stdinfo", "notice", "stdno", "dynamic"];

src/modules/card/components/elementEdit/cardHeadSpin/HeadDynamic.vue

@@ -1,5 +1,6 @@
 <template>
   <div :class="classes">
+    <!-- write -->
     <div
       class="head-dynamic-part head-dynamic-write"
       v-if="data.examNumberType !== 'fill' && data.writeSign"
@@ -13,6 +14,7 @@
         注意：签名则表示您认可答题卡提供的信息与您本人信息相符；如签名与信息不符或者未签名，试卷作废。
       </p>
     </div>
+    <!-- miss-fill -->
     <div
       class="head-dynamic-part head-dynamic-missfill"
       v-if="data.missAndFill"
@@ -37,6 +39,7 @@
         </div>
       </div>
     </div>
+    <!-- aorb -->
     <div
       :class="[
         'head-dynamic-part',
@@ -46,29 +49,42 @@
       id="head-dynamic-aorb"
       v-if="data.aOrB"
     >
-      <div class="dynamic-aorb-title">
-        <i class="center-cont">试卷类型：</i>
+      <div class="dynamic-aorb-item dynamic-aorb-title">
+        <p class="dynamic-aorb-content">试卷类型：</p>
       </div>
-      <div class="dynamic-aorb-body" v-if="data.aOrBType === 'fill'">
-        <span class="dynamic-aorb-rect"
-          ><i class="head-dynamic-rect">A</i></span
-        >
-        <span class="dynamic-aorb-rect"
-          ><i class="head-dynamic-rect">B</i></span
-        >
+      <div
+        class="dynamic-aorb-item dynamic-aorb-rects"
+        v-if="data.aOrBType === 'fill'"
+      >
+        <div class="dynamic-aorb-content">
+          <i class="head-dynamic-rect">A</i>
+          <i class="head-dynamic-rect">B</i>
+        </div>
+      </div>
+      <div
+        class="dynamic-aorb-item dynamic-aorb-info"
+        v-if="data.aOrBType === 'auto'"
+      >
+        <div class="dynamic-aorb-content">
+          <i>A</i>
+        </div>
       </div>
-      <div class="dynamic-aorb-body" v-else>
-        <span class="dynamic-aorb-type"><i class="center-cont">A</i></span>
-        <span class="dynamic-aorb-barcode" id="dynamic-aorb-barcode">
+      <div
+        class="dynamic-aorb-item dynamic-aorb-barcode"
+        v-if="data.aOrBType === 'auto'"
+      >
+        <div class="dynamic-aorb-content" id="dynamic-aorb-barcode">
           <img :src="aorbBarcodeSrc" alt="条形码" v-if="aorbBarcodeSrc" />
           <img src="@/assets/images/barcode-sample.png" alt="条形码" v-else />
-        </span>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { calcSum } from "@/plugins/utils";
+
 export default {
   name: "head-dynamic",
   props: {
@@ -92,7 +108,26 @@ export default {
       return ["head-dynamic", "card-head-body-spin", `head-dynamic-${partNum}`];
     }
   },
-  mounted() {},
-  methods: {}
+  mounted() {
+    this.initStyles();
+  },
+  methods: {
+    initStyles() {
+      if (this.data.examNumberType === "fill" || this.data.columnNumber !== 2)
+        return;
+      const parentHeight = this.$el.parentNode.offsetHeight;
+      this.$el.style.height = parentHeight + "px";
+      const childrenCount = this.$el.children.length;
+      if (childrenCount > 1) {
+        let heights = [];
+        for (let i = 0; i < childrenCount; i++) {
+          heights[i] = this.$el.children[i].offsetHeight;
+        }
+        const lastChildHeight = parentHeight - calcSum(heights.slice(0, -1));
+        this.$el.children[childrenCount - 1].style.height =
+          lastChildHeight + "px";
+      }
+    }
+  }
 };
 </script>

src/modules/card/components/elementEdit/cardHeadSpin/HeadStdno.vue

@@ -47,11 +47,7 @@ export default {
   },
   computed: {
     classes() {
-      return [
-        "head-stdno",
-        "card-head-body-spin",
-        { "card-head-body-spin-dash": this.data.examNumberType !== "fill" }
-      ];
+      return ["head-stdno", "card-head-body-spin"];
     }
   },
   mounted() {},

src/modules/card/components/elementPreview/ExplainChildren.vue

@@ -36,11 +36,10 @@ export default {
   },
   computed: {
     explainBodyStyle() {
-      const firstHeight =
+      const height =
         this.data.explainNumber === this.data.parent.startNumber
           ? this.data.h - 30
           : this.data.h;
-      const height = this.data.h ? firstHeight : 481;
       return {
         height: height + "px"
       };

src/modules/card/components/elementPreview/FillQuestion.vue

@@ -44,8 +44,7 @@ export default {
     },
     groupGapStyles() {
       return {
-        marginRight: this.data.groupGap + "px",
-        marginBottom: this.data.groupGap / 2 + "px"
+        marginRight: this.data.groupGap + "px"
       };
     },
     questionGapStyles() {

src/modules/card/elementModel.js

@@ -163,8 +163,8 @@ const FILL_QUESTION_PROP = {
   questionCountPerGroup: 5,
   optionDirection: "horizontal",
   questionGap: 10,
-  groupGap: 10,
-  optionGap: 20,
+  groupGap: 80,
+  optionGap: 10,
   isSelect: true,
   isMultiply: false,
   fontSize: "14px"
@@ -189,12 +189,12 @@ const FILL_LINE_PROP = {
   x: 0,
   y: 0,
   w: 0,
-  h: 200,
+  h: 180,
   sign: "subjective",
   topicName: "",
   startNumber: 1,
-  questionsCount: 2,
-  questionNumberPerLine: 1,
+  questionsCount: 4,
+  questionNumberPerLine: 2,
   lineNumberPerQuestion: 1,
   numberPre: ""
 };
@@ -214,7 +214,7 @@ const EXPLAIN_CHILDREN_PROP = {
   x: 0,
   y: 0,
   w: 0,
-  h: 481,
+  h: 425,
   sign: "subjective",
   // 小题序号
   explainNumber: 0,
@@ -382,9 +382,9 @@ const getExplainChildren = explainModel => {
 const getNewPage = (pageNo, columnNumber = 2) => {
   let npage = deepCopy(PAGE);
   if (columnNumber === 4) {
-    npage.columnGap = 2;
+    npage.columnGap = 10;
   }
-  npage.locators = getNumList(1).map((item, index) => {
+  npage.locators = getNumList(3).map((item, index) => {
     return [
       {
         ...LOCATOR,

src/modules/card/store/index.js → src/modules/card/store.js

@@ -3,7 +3,7 @@ import {
   getNewPage,
   getTopicHead,
   getElementId
-} from "../elementModel";
+} from "./elementModel";
 import { deepCopy, calcSum } from "@/plugins/utils";
 
 const state = {

src/modules/card/views/CardDesign.vue

@@ -246,7 +246,6 @@ import ElementPropEdit from "../components/elementPropEdit/ElementPropEdit";
 import RightClickMenu from "../components/RightClickMenu";
 import CardHeadSample from "../components/elementEdit/CardHeadSample";
 import SavePage from "../components/SavePage";
-import card from "../card.temp.json";
 
 export default {
   name: "card-design",
@@ -276,8 +275,8 @@ export default {
   },
   mounted() {
     // this.initCard();
-    this.$store.commit("card/setPages", card.pages);
-    this.$store.commit("card/setCardConfig", card.cardConfig);
+    // this.$store.commit("card/setPages", card.pages);
+    // this.$store.commit("card/setCardConfig", card.cardConfig);
   },
   methods: {
     ...mapMutations("card", [