题卡修改

src/modules/card/assets/styles/card-preview.scss

@@ -22,6 +22,11 @@
       display: none;
     }
   }
+  .elem-fill-question .option-item,
+  .page-number-rect-list li,
+  .card-head .head-dynamic-rect {
+    border-width: 0.5pt;
+  }
 }
 
 // page-box
@@ -67,6 +72,11 @@
           padding: 60px 60px 86px;
         }
       }
+      .page-main-noside + .page-main-outer {
+        .page-number-rect {
+          left: 27%;
+        }
+      }
     }
     &.page-box-1 {
       .page-main-inner {
@@ -158,6 +168,10 @@
         }
       }
     }
+
+    .page-number-rect {
+      left: 50%;
+    }
   }
 
   &-8K {
@@ -180,6 +194,11 @@
           padding: 40px 40px 66px;
         }
       }
+      .page-main-noside + .page-main-outer {
+        .page-number-rect {
+          left: 26.5%;
+        }
+      }
     }
     &.page-box-1 {
       .page-main-inner {
@@ -256,18 +275,30 @@
         border-bottom: 14px solid #000;
 
         &:nth-of-type(1) {
-          left: 40px;
+          left: 0;
         }
         &:nth-of-type(2) {
           right: 86px;
         }
       }
     }
+    &.page-box-1 {
+      .page-locator {
+        &-item {
+          &:nth-of-type(1) {
+            left: 86px;
+          }
+          &:nth-of-type(2) {
+            right: 0;
+          }
+        }
+      }
+    }
 
     .page-number {
       &-rect {
         bottom: 20px;
-        left: 260px;
+        left: 25%;
       }
       &-rect-list {
         li {
@@ -488,10 +519,10 @@
   z-index: 8;
 
   &-top {
-    top: 40px;
+    top: 30px;
   }
   &-bottom {
-    bottom: 40px;
+    bottom: 30px;
   }
 
   &-item {
@@ -501,36 +532,57 @@
     top: 0;
 
     &:nth-of-type(1) {
-      left: 50px;
+      left: 0;
     }
     &:nth-of-type(2) {
       right: 96px;
     }
   }
 }
+.page-box-1 {
+  .page-locator {
+    &-bottom {
+      .page-locator-item:nth-of-type(1) {
+        right: 0;
+        left: auto;
+      }
+    }
+    &-item {
+      &:nth-of-type(1) {
+        left: 96px;
+      }
+      &:nth-of-type(2) {
+        right: 0;
+      }
+    }
+  }
+}
 
 // page-number
 .page-number {
   &-rect {
     position: absolute;
-    bottom: 40px;
-    left: 300px;
+    bottom: 30px;
+    left: 32%;
+    transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
   }
   &-rect-list {
     font-size: 0;
+    height: 16px;
 
     li {
       display: inline-block;
       vertical-align: top;
       font-size: 14px;
-      width: 30px;
-      height: 20px;
+      width: 24px;
+      height: 16px;
       border: 1px solid #000;
       margin-right: 10px;
       &.rect-li-act {
         height: 0;
         border: none;
-        border-bottom: 20px solid #000;
+        border-bottom: 16px solid #000;
       }
     }
   }
@@ -815,8 +867,9 @@
       }
       .head-dynamic-rect {
         display: inline-block;
-        width: 30px;
-        height: 15px;
+        vertical-align: middle;
+        width: 24px;
+        height: 12px;
         border: 1px solid #000;
       }
     }
@@ -832,6 +885,11 @@
   &-pad {
     padding-top: 10px;
   }
+  &-empty {
+    .elem-body {
+      border-top: none;
+    }
+  }
   h3 {
     font-size: 16px;
     height: 29px;
@@ -841,8 +899,8 @@
   }
   p {
     font-size: 12px;
-    height: 29px;
-    line-height: 29px;
+    height: 22px;
+    line-height: 22px;
     white-space: nowrap;
     overflow: hidden;
     // text-overflow: ellipsis;
@@ -1010,9 +1068,27 @@
     }
   }
 
+  &-boolean {
+    .option-item {
+      &:nth-of-type(2) i {
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAItJREFUOE/Vk9ERgCAMQ8M+GUInEyfTITKQV065KuDh8SWftHkNAQIGVxjU44cAkhHAAmCVFD8dwYktulnS3g2oiY2SAdZglmq34sS7pNn3JADJCcAGoGggaftWL2qFgzOc3OjEKbCau1sG3uo51TRN8c3BRX+E9SquAlwmU8t2EeLIf+h+B60hw4ADyTE7EWzzfYYAAAAASUVORK5CYII=);
+        background-size: 100% 100%;
+        width: 10px;
+        height: 10px;
+        margin-top: -1px;
+      }
+      &:nth-of-type(3) i {
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAIVJREFUOE+tk9sNwCAIRa/7MES7WTerQ7BPGxolCpKmVT+Fe3gnTL40qUcHIKKNmXMEFTsA8TmqjwKK8SyG3YIiewQQjkKMGMysOlcCgJrFAykZdX9tdq6JNprphyttOIUA4sQCXw+YKmEg/tZEIrqapoVjbEe8bpEk8tsqj3zWHtOfy7wB41tXEXo/wKEAAAAASUVORK5CYII=);
+        background-size: 100% 100%;
+        width: 8px;
+        height: 8px;
+      }
+    }
+  }
+
   .elem-body {
-    padding: 18px 0 18px 16px;
-    font-size: 0px;
+    padding: 10px 5px;
+    font-size: 0;
   }
 
   .group-item {
@@ -1030,10 +1106,10 @@
     vertical-align: middle;
     padding: 0;
     width: 18px;
-    height: 14px;
+    height: 10px;
     text-align: center;
     font-size: 12px;
-    line-height: 1;
+    line-height: 8px;
     // border-rect
     border: 1px solid #000;
     color: #000;
@@ -1042,6 +1118,7 @@
     > i {
       display: inline-block;
       transform: scale(0.67, 0.67);
+      -webkit-transform: scale(0.67, 0.67);
     }
 
     &:first-child {
@@ -1051,6 +1128,7 @@
       color: #000;
       > i {
         transform: scale(1, 1);
+        -webkit-transform: scale(0.9, 0.9);
       }
     }
     &:last-child {
@@ -1059,6 +1137,9 @@
   }
 
   &-vertical {
+    .elem-body {
+      padding: 10px 20px;
+    }
     .question-item {
       display: inline-block;
       vertical-align: top;
@@ -1149,6 +1230,7 @@
           padding-bottom: 5px;
           padding-right: 3px;
           transform: translateY(-100%);
+          -webkit-transform: translateY(-100%);
         }
       }
       &.elem-fill-comma {
@@ -1157,6 +1239,7 @@
         right: -10px;
         z-index: 9;
         transform: translateY(-100%);
+        -webkit-transform: translateY(-100%);
         width: 10px;
         padding-bottom: 4px;
         background-color: #fff;
@@ -1276,6 +1359,7 @@
       > i {
         display: inline-block;
         transform: scale(0.67, 0.67);
+        -webkit-transform: scale(0.67, 0.67);
       }
     }
   }
@@ -1380,12 +1464,14 @@
     top: 50%;
     left: 0;
     transform: translateY(-50%);
+    -webkit-transform: translateY(-50%);
 
     > span {
       display: block;
       padding: 5px;
       line-height: 20px;
       transform: rotate(-90deg);
+      -webkit-transform: rotate(-90deg);
     }
   }
 }

src/modules/card/assets/styles/card-temp.css

@@ -21,13 +21,18 @@
 .card-print .elem-fill-question-first .fill-question-sign {
   display: none;
 }
+.card-print .elem-fill-question .option-item,
+.card-print .page-number-rect-list li,
+.card-print .card-head .head-dynamic-rect {
+  border-width: 0.5pt;
+}
 
 .page-box {
   position: relative;
   background: #fff;
   margin: 0 auto;
   font-weight: normal;
-  font-family: "宋体", "宋体-简", Arial, sans-serif;
+  font-family: "Times New Roman", "宋体", "宋体-简", Arial, sans-serif;
   line-height: 20px;
 }
 .page-box .page-main {
@@ -55,6 +60,9 @@
 .page-box-A3.page-box-0 .page-main-inner.page-main-noside {
   padding: 60px 60px 86px;
 }
+.page-box-A3.page-box-0 .page-main-noside + .page-main-outer .page-number-rect {
+  left: 27%;
+}
 .page-box-A3.page-box-1 .page-main-inner {
   padding: 60px 160px 86px 40px;
 }
@@ -122,6 +130,9 @@
   -webkit-transform: rotate(-70.5109deg);
   transform: rotate(-70.5109deg);
 }
+.page-box-A4 .page-number-rect {
+  left: 50%;
+}
 .page-box-8K {
   width: 1399px;
   height: 964px;
@@ -139,6 +150,9 @@
 .page-box-8K.page-box-0 .page-main-inner.page-main-noside {
   padding: 40px 40px 66px;
 }
+.page-box-8K.page-box-0 .page-main-noside + .page-main-outer .page-number-rect {
+  left: 26.5%;
+}
 .page-box-8K.page-box-1 .page-main-inner {
   padding: 40px 130px 66px 20px;
 }
@@ -198,14 +212,20 @@
   border-bottom: 14px solid #000;
 }
 .page-box-8K .page-locator-item:nth-of-type(1) {
-  left: 40px;
+  left: 0;
 }
 .page-box-8K .page-locator-item:nth-of-type(2) {
   right: 86px;
 }
+.page-box-8K.page-box-1 .page-locator-item:nth-of-type(1) {
+  left: 86px;
+}
+.page-box-8K.page-box-1 .page-locator-item:nth-of-type(2) {
+  right: 0;
+}
 .page-box-8K .page-number-rect {
   bottom: 20px;
-  left: 260px;
+  left: 25%;
 }
 .page-box-8K .page-number-rect-list li {
   width: 24px;
@@ -400,10 +420,10 @@
   z-index: 8;
 }
 .page-locator-top {
-  top: 40px;
+  top: 30px;
 }
 .page-locator-bottom {
-  bottom: 40px;
+  bottom: 30px;
 }
 .page-locator-item {
   position: absolute;
@@ -412,33 +432,47 @@
   top: 0;
 }
 .page-locator-item:nth-of-type(1) {
-  left: 50px;
+  left: 0;
 }
 .page-locator-item:nth-of-type(2) {
   right: 96px;
 }
 
+.page-box-1 .page-locator-bottom .page-locator-item:nth-of-type(1) {
+  right: 0;
+  left: auto;
+}
+.page-box-1 .page-locator-item:nth-of-type(1) {
+  left: 96px;
+}
+.page-box-1 .page-locator-item:nth-of-type(2) {
+  right: 0;
+}
+
 .page-number-rect {
   position: absolute;
-  bottom: 40px;
-  left: 300px;
+  bottom: 30px;
+  left: 32%;
+  transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
 }
 .page-number-rect-list {
   font-size: 0;
+  height: 16px;
 }
 .page-number-rect-list li {
   display: inline-block;
   vertical-align: top;
   font-size: 14px;
-  width: 30px;
-  height: 20px;
+  width: 24px;
+  height: 16px;
   border: 1px solid #000;
   margin-right: 10px;
 }
 .page-number-rect-list li.rect-li-act {
   height: 0;
   border: none;
-  border-bottom: 20px solid #000;
+  border-bottom: 16px solid #000;
 }
 .page-number-text-cont {
   height: 16px;
@@ -689,8 +723,9 @@
 }
 .card-head-model-two .card-head-dynamic .head-dynamic-rect {
   display: inline-block;
-  width: 30px;
-  height: 15px;
+  vertical-align: middle;
+  width: 24px;
+  height: 12px;
   border: 1px solid #000;
 }
 
@@ -704,6 +739,9 @@
 .elem-topic-head-pad {
   padding-top: 10px;
 }
+.elem-topic-head-empty .elem-body {
+  border-top: none;
+}
 .elem-topic-head h3 {
   font-size: 16px;
   height: 29px;
@@ -713,8 +751,8 @@
 }
 .elem-topic-head p {
   font-size: 12px;
-  height: 29px;
-  line-height: 29px;
+  height: 22px;
+  line-height: 22px;
   white-space: nowrap;
   overflow: hidden;
 }
@@ -864,9 +902,22 @@
 .elem-fill-question-first .fill-question-sign {
   display: block;
 }
+.elem-fill-question-boolean .option-item:nth-of-type(2) i {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAItJREFUOE/Vk9ERgCAMQ8M+GUInEyfTITKQV065KuDh8SWftHkNAQIGVxjU44cAkhHAAmCVFD8dwYktulnS3g2oiY2SAdZglmq34sS7pNn3JADJCcAGoGggaftWL2qFgzOc3OjEKbCau1sG3uo51TRN8c3BRX+E9SquAlwmU8t2EeLIf+h+B60hw4ADyTE7EWzzfYYAAAAASUVORK5CYII=);
+  background-size: 100% 100%;
+  width: 10px;
+  height: 10px;
+  margin-top: -1px;
+}
+.elem-fill-question-boolean .option-item:nth-of-type(3) i {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAIVJREFUOE+tk9sNwCAIRa/7MES7WTerQ7BPGxolCpKmVT+Fe3gnTL40qUcHIKKNmXMEFTsA8TmqjwKK8SyG3YIiewQQjkKMGMysOlcCgJrFAykZdX9tdq6JNprphyttOIUA4sQCXw+YKmEg/tZEIrqapoVjbEe8bpEk8tsqj3zWHtOfy7wB41tXEXo/wKEAAAAASUVORK5CYII=);
+  background-size: 100% 100%;
+  width: 8px;
+  height: 8px;
+}
 .elem-fill-question .elem-body {
-  padding: 18px 0 18px 16px;
-  font-size: 0px;
+  padding: 10px 5px;
+  font-size: 0;
 }
 .elem-fill-question .group-item {
   font-family: "Times New Roman", Arial, sans-serif;
@@ -882,10 +933,10 @@
   vertical-align: middle;
   padding: 0;
   width: 18px;
-  height: 14px;
+  height: 10px;
   text-align: center;
   font-size: 12px;
-  line-height: 1;
+  line-height: 8px;
   border: 1px solid #000;
   color: #000;
   -webkit-box-sizing: border-box;
@@ -893,8 +944,8 @@
 }
 .elem-fill-question .option-item > i {
   display: inline-block;
-  -webkit-transform: scale(0.67, 0.67);
   transform: scale(0.67, 0.67);
+  -webkit-transform: scale(0.67, 0.67);
 }
 .elem-fill-question .option-item:first-child {
   text-align: right;
@@ -903,12 +954,15 @@
   color: #000;
 }
 .elem-fill-question .option-item:first-child > i {
-  -webkit-transform: scale(1, 1);
   transform: scale(1, 1);
+  -webkit-transform: scale(0.9, 0.9);
 }
 .elem-fill-question .option-item:last-child {
   margin-right: 0 !important;
 }
+.elem-fill-question-vertical .elem-body {
+  padding: 10px 20px;
+}
 .elem-fill-question-vertical .question-item {
   display: inline-block;
   vertical-align: top;
@@ -988,16 +1042,16 @@
   position: relative;
   padding-bottom: 5px;
   padding-right: 3px;
-  -webkit-transform: translateY(-100%);
   transform: translateY(-100%);
+  -webkit-transform: translateY(-100%);
 }
 .elem-fill-line .elem-fill-quesiton li.elem-fill-comma {
   position: absolute;
   top: 0;
   right: -10px;
   z-index: 9;
-  -webkit-transform: translateY(-100%);
   transform: translateY(-100%);
+  -webkit-transform: translateY(-100%);
   width: 10px;
   padding-bottom: 4px;
   background-color: #fff;
@@ -1100,8 +1154,8 @@
 }
 .elem-fill-number .fill-number-option > i {
   display: inline-block;
-  -webkit-transform: scale(0.67, 0.67);
   transform: scale(0.67, 0.67);
+  -webkit-transform: scale(0.67, 0.67);
 }
 
 .elem-fill-field {
@@ -1184,15 +1238,15 @@
   width: 100%;
   top: 50%;
   left: 0;
-  -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
 }
 .elem-gutter-content > span {
   display: block;
   padding: 5px;
   line-height: 20px;
-  -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
+  -webkit-transform: rotate(-90deg);
 }
 
 .card-free-preview:not(.card-print) {

src/modules/card/elements/fill-question/EditFillQuestion.vue

@@ -48,42 +48,6 @@
         <el-tag v-else-if="modalForm.isBoolean" effect="dark">判断</el-tag>
         <el-tag v-else effect="dark">单选</el-tag>
       </el-form-item>
-      <el-form-item v-if="modalForm.isBoolean">
-        <el-select
-          v-model="modalForm.booleanType"
-          style="width: 125px"
-          placeholder="请选择"
-          @change="booleanTypeChange"
-        >
-          <el-option
-            v-for="item in BOOLEAN_TYPE"
-            :key="item"
-            :label="item"
-            :value="item"
-          ></el-option>
-        </el-select>
-        <span>（备选是否配置）</span>
-      </el-form-item>
-      <el-form-item
-        v-if="modalForm.isBoolean"
-        prop="booleanType"
-        label="是否配置："
-      >
-        <span>是：</span>
-        <el-input
-          v-model.trim="booleanTypes.yes"
-          :maxlength="1"
-          placeholder="是"
-          style="margin-right: 20px; width: 60px"
-        ></el-input>
-        <span>否：</span>
-        <el-input
-          v-model.trim="booleanTypes.no"
-          :maxlength="1"
-          placeholder="否"
-          style="margin-right: 20px; width: 60px"
-        ></el-input>
-      </el-form-item>
     </el-form>
   </div>
 </template>
@@ -112,23 +76,6 @@ export default {
     },
   },
   data() {
-    const booleanTypeValidater = (rule, value, callback) => {
-      if (this.modalForm.isBoolean) {
-        if (
-          this.booleanTypes.yes &&
-          this.booleanTypes.no &&
-          this.booleanTypes.yes.length <= 2 &&
-          this.booleanTypes.no.length <= 2
-        ) {
-          callback();
-        } else {
-          callback(new Error("请设置是否配置，单个设置最多两个字符。"));
-        }
-      } else {
-        callback();
-      }
-    };
-
     return {
       modalForm: { ...initModalForm },
       BOOLEAN_TYPE,
@@ -152,13 +99,6 @@ export default {
             trigger: "change",
           },
         ],
-        booleanType: [
-          {
-            required: true,
-            validator: booleanTypeValidater,
-            trigger: "change",
-          },
-        ],
       },
     };
   },
@@ -170,27 +110,11 @@ export default {
       const valInfo = val.parent;
       this.modalForm = this.$objAssign(initModalForm, valInfo);
       if (!valInfo.optionCount) this.modalForm.optionCount = undefined;
-      this.booleanTypeChange();
-    },
-    selectTypeChange(val) {
-      if (val) {
-        this.modalForm.booleanType = BOOLEAN_TYPE[0];
-        this.booleanTypeChange();
-      }
-    },
-    booleanTypeChange() {
-      const [yes, no] = this.modalForm.booleanType.split(",");
-      this.booleanTypes.yes = yes;
-      this.booleanTypes.no = no;
     },
     async submit() {
       const valid = await this.$refs.modalFormComp.validate().catch(() => {});
       if (!valid) return;
 
-      this.modalForm.booleanType = [
-        this.booleanTypes.yes,
-        this.booleanTypes.no,
-      ].join();
       this.modalForm.topicName = this.modalForm.topicName.trim();
       const data = this.$objAssign(this.instance.parent, this.modalForm);
       if (!data.optionCount) data.optionCount = null;

src/modules/card/elements/fill-question/model.js

@@ -14,7 +14,7 @@ const FILL_QUESTION_PROP = {
   questionCountPerGroup: 5,
   questionGap: 8,
   groupGap: 30,
-  optionGap: 12,
+  optionGap: 6,
   optionCount: null,
   isBoolean: false, // 是否是判断题
   booleanType: BOOLEAN_TYPE[0],
@@ -27,15 +27,15 @@ const MODEL = {
   x: 0,
   y: 0,
   w: 0,
-  h: 138,
-  minHeight: 138,
+  h: 114,
+  minHeight: 114,
   sign: "objective",
   topicName: "",
   topicNo: null,
   questionCountPerGroup: 5,
   questionGap: 8,
   groupGap: 30,
-  optionGap: 12,
+  optionGap: 6,
   questionGroup: [],
   isBoolean: false, // 是否是判断题
   booleanType: BOOLEAN_TYPE[0],
@@ -47,7 +47,7 @@ const MODEL = {
 
 function getChoiceList(data) {
   if (data.isBoolean) {
-    return data.booleanType.split(",");
+    return ["", ""];
   } else {
     return ALPHABET.slice(0, data.optionCount).split("");
   }
@@ -66,17 +66,17 @@ const getFullModel = (modelProp, { pageSize, columnNumber }) => {
   const childModel = objAssign(MODEL, parent);
 
   // 不同栏数，不同选项个数，每一行对应的组数
-  // 以一行4题，每题4选项为标准展示效果：选项序号占一个选项位置，即一行最多展示20个选项位置。
+  // 以一行4题，每题5选项为标准展示效果：选项序号占一个选项位置，即一行最多展示20个选项位置。
   // 可扩展其他分栏的最佳展示效果
   const lineMaxOptionCountConfig = {
     A3: {
-      2: 20,
+      2: 24,
     },
     "8K": {
-      2: 18,
+      2: 20,
     },
     A4: {
-      1: 20,
+      1: 24,
     },
   };
   const lineMaxOptionCount = lineMaxOptionCountConfig[pageSize][columnNumber];
@@ -141,9 +141,9 @@ const getFullModel = (modelProp, { pageSize, columnNumber }) => {
         ? childModel.questionCountPerGroup
         : questionGroup[0].length;
     const optionsHeight =
-      14 * maxOptionCountPerGroup +
+      10 * maxOptionCountPerGroup +
       (maxOptionCountPerGroup - 1) * childModel.questionGap +
-      36;
+      20;
 
     child.h = elements.length ? optionsHeight : optionsHeight + 34;
     child.minHeight = child.h;

src/modules/card/elements/topic-head/TopicHead.vue

@@ -1,8 +1,7 @@
 <template>
   <div :class="classes">
     <div class="elem-body">
-      <h3>{{ data.typeName }}答题区</h3>
-      <p>{{ data.content }}</p>
+      <p v-if="data.content">{{ data.content }}</p>
     </div>
   </div>
 </template>
@@ -25,7 +24,10 @@ export default {
     classes() {
       return [
         "elem-topic-head",
-        { "elem-topic-head-pad": !this.data.isColumnFirst },
+        {
+          "elem-topic-head-pad": !this.data.isColumnFirst,
+          "elem-topic-head-empty": !this.data.content,
+        },
       ];
     },
   },

src/modules/card/elements/topic-head/model.js

@@ -5,7 +5,7 @@ const MODEL = {
   x: 0,
   y: 0,
   w: 0,
-  h: 60,
+  h: 24,
   content: "",
   typeName: "",
   isColumnFirst: false,
@@ -19,9 +19,10 @@ const getModel = (content, type, isColumnFirst) => {
   element.typeName = typeName;
   element.content = content;
   element.isColumnFirst = isColumnFirst;
-  element.h = isColumnFirst ? element.h : element.h + 10;
   element.id = getElementId();
   element.key = randomCode();
+  if (!content) element.h = 0;
+  if (!isColumnFirst) element.h += 10;
   return element;
 };
 

src/modules/card/views/CardHeadEdit.vue

@@ -36,7 +36,7 @@
             v-model="modalForm.attention"
             maxlength="1000"
             type="textarea"
-            :rows="4"
+            :autosize="{ minRows: 4, maxRows: 10 }"
           ></el-input>
           <p class="tips-info">
             提示：换行之后，题卡注意事项会展示为多条内容，内容序号会被自动添加。