题卡修改-题头.选择题

card/assets/styles/card-preview.scss

@@ -1,1484 +1,1493 @@
-// card-preview
-.card-preview {
-  padding: 10px 0;
-  background-color: #f0f0f0;
-  color: #000;
-  .page-box {
-    margin: 10px auto;
-    box-shadow: 0 0 4px #ddd;
-  }
-}
-.card-print {
-  padding: 0;
-
-  .page-box {
-    margin: 0 auto;
-    box-shadow: none;
-    page-break-after: always;
-  }
-  // 印刷模式：隐藏客观题强调标记
-  .elem-fill-question-first {
-    &::before {
-      display: none;
-    }
-  }
-}
-
-// page-box
-.page-box {
-  position: relative;
-  background: #fff;
-  margin: 0 auto;
-  font-weight: normal;
-  font-family: "宋体", "宋体-简", Arial, sans-serif;
-
-  .page-main {
-    height: 100%;
-    position: relative;
-    white-space: nowrap;
-    margin: 0 -10px;
-
-    &-2 {
-      .page-column {
-        width: 50%;
-      }
-    }
-    &-3 {
-      .page-column {
-        width: 33.33%;
-      }
-    }
-    &-4 {
-      .page-column {
-        width: 25%;
-      }
-    }
-  }
-
-  &-A3 {
-    width: 1586px;
-    height: 1122px;
-
-    .page-main {
-      &-inner {
-        padding: 60px 80px 86px;
-      }
-
-      &-1 {
-        .page-column-forbid-area {
-          &::before {
-            width: 2000px;
-            transform: rotate(34.326deg);
-          }
-          &::after {
-            width: 2000px;
-            transform: rotate(-34.326deg);
-          }
-        }
-      }
-      &-2 {
-        .page-column-forbid-area {
-          &::before {
-            transform: rotate(54.216deg);
-          }
-          &::after {
-            transform: rotate(-54.216deg);
-          }
-        }
-      }
-
-      &-3 {
-        .page-column-forbid-area {
-          &::before {
-            transform: rotate(64.6555deg);
-          }
-          &::after {
-            transform: rotate(-64.6555deg);
-          }
-        }
-      }
-      &-4 {
-        .page-column-forbid-area {
-          &::before {
-            transform: rotate(70.3109deg);
-          }
-          &::after {
-            transform: rotate(-70.3109deg);
-          }
-        }
-      }
-    }
-  }
-  &-A4 {
-    width: 793px;
-    height: 1122px;
-
-    .page-main {
-      &-inner {
-        padding: 60px 45px 86px;
-      }
-
-      &-1 {
-        .page-column-forbid-area {
-          &::before {
-            transform: rotate(54.216deg);
-          }
-          &::after {
-            transform: rotate(-54.216deg);
-          }
-        }
-      }
-
-      &-2 {
-        .page-column-forbid-area {
-          &::before {
-            transform: rotate(70.5109deg);
-          }
-          &::after {
-            transform: rotate(-70.5109deg);
-          }
-        }
-      }
-    }
-  }
-
-  &-less {
-    .page-number-rect {
-      display: none;
-    }
-  }
-}
-
-// 分栏间距，默认20px
-// page-main-inner
-.page-main-inner {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  padding: 60px 80px 86px;
-  z-index: 9;
-  font-size: 0;
-}
-// page-main-outer
-.page-main-outer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 7;
-  background-color: transparent;
-  overflow: hidden;
-}
-
-.page-column {
-  display: inline-block;
-  vertical-align: middle;
-  position: relative;
-  height: 100%;
-  width: 100%;
-  font-size: 14px;
-  padding: 0 10px;
-
-  &-forbid-area {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    z-index: 1;
-    border: 1px solid #000;
-    overflow: hidden;
-    &::before {
-      content: "";
-      display: block;
-      position: absolute;
-      width: 1200px;
-      border-bottom: 1px solid rgba(172, 172, 172, 1);
-      top: 0;
-      left: 0;
-      transform: rotate(54.216deg);
-      transform-origin: left;
-      z-index: 1;
-    }
-    &::after {
-      content: "";
-      display: block;
-      position: absolute;
-      width: 1200px;
-      border-bottom: 1px solid rgba(172, 172, 172, 1);
-      bottom: 0;
-      left: 0;
-      transform: rotate(-54.216deg);
-      transform-origin: left;
-      z-index: 1;
-    }
-    > p {
-      padding: 20px;
-      position: absolute;
-      width: 260px;
-      height: 82px;
-      top: 50%;
-      left: 50%;
-      margin-top: -41px;
-      margin-left: -130px;
-      z-index: 9;
-      font-weight: bold;
-      font-size: 30px;
-      color: #999;
-      background-color: #fff;
-      text-align: center;
-    }
-  }
-  &-main {
-    position: relative;
-    height: 100%;
-  }
-  &-body {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 9;
-  }
-  &-element {
-    .element-item {
-      position: relative;
-
-      &-width {
-        width: 100% !important;
-      }
-
-      &::before {
-        content: "";
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        box-sizing: border-box;
-        z-index: 2;
-        border: 1px solid #000;
-        border-top: 0;
-      }
-
-      > div {
-        z-index: 9;
-        position: relative;
-      }
-      &-card-head {
-        &::before {
-          border: 0;
-        }
-      }
-
-      &-topic-head {
-        &::before {
-          border: 0;
-        }
-      }
-      &-fill-question,
-      &-fill-line {
-        &::before {
-          border-bottom: 0;
-        }
-      }
-      // 预览时，小题扩展答题区之间隐藏分割线
-      &-explain {
-        &::before {
-          border-bottom-color: transparent;
-        }
-      }
-      &-type-last {
-        &::before {
-          border-bottom: 1px solid #000;
-        }
-      }
-    }
-    &:last-child {
-      .element-item {
-        &::before {
-          border-bottom: 1px solid #000;
-        }
-      }
-      .element-item-card-head.element-item-type-pre {
-        &::before {
-          border-bottom: none;
-        }
-      }
-    }
-  }
-}
-
-// locator
-.page-locator {
-  position: absolute;
-  left: 80px;
-  right: 80px;
-  height: 16px;
-  z-index: 8;
-
-  &-top {
-    top: 40px;
-  }
-  &-bottom {
-    bottom: 40px;
-  }
-
-  &-item {
-    position: absolute;
-    width: 24px;
-    border-bottom: 16px solid #000;
-    top: 0;
-
-    &:nth-of-type(1) {
-      left: 0;
-    }
-    &:nth-of-type(2) {
-      right: 96px;
-    }
-  }
-}
-// page-number
-.page-number {
-  position: absolute;
-  bottom: 40px;
-  &-rect {
-    left: 252px;
-  }
-  &-rect-list {
-    font-size: 0;
-
-    li {
-      display: inline-block;
-      vertical-align: top;
-      font-size: 14px;
-      width: 24px;
-      height: 16px;
-      border: 1px solid #000;
-      margin-right: 10px;
-      &.rect-li-act {
-        height: 0;
-        border: none;
-        border-bottom: 16px solid #000;
-      }
-    }
-  }
-  &-text {
-    right: 25%;
-  }
-  &-text-cont {
-    height: 16px;
-    line-height: 16px;
-  }
-}
-
-// elem
-.elem {
-  &-title {
-    padding: 10px;
-    font-size: 14px;
-    color: rgba(0, 0, 0, 1);
-    line-height: 1;
-    white-space: normal;
-  }
-  &-body {
-    padding: 10px;
-  }
-}
-// grid
-.grid-container {
-  margin-left: -10px;
-  margin-right: -10px;
-}
-.grid-row {
-  display: table;
-  width: 100%;
-  border-spacing: 10px 0;
-  border-collapse: separate;
-
-  &:nth-of-type(2) {
-    margin-top: 10px;
-  }
-
-  .grid-col {
-    display: table-cell;
-    width: 50%;
-    vertical-align: top;
-    border: 1px solid #000;
-    &-dash {
-      border-style: dashed;
-      vertical-align: middle;
-    }
-  }
-}
-// card-head
-.card-head {
-  &-top {
-    text-align: center;
-    color: #000;
-  }
-  &-title {
-    font-size: 24px;
-    font-weight: bold;
-    overflow: hidden;
-
-    > h1 {
-      line-height: 33px;
-      white-space: nowrap;
-      letter-spacing: -1px;
-    }
-  }
-  &-subtitle {
-    height: 44px;
-    font-family: $--font-family;
-    font-size: 14px;
-    overflow: hidden;
-    white-space: normal;
-    margin-bottom: 10px;
-
-    > p {
-      padding: 0 10px;
-      line-height: 22px;
-      white-space: pre;
-    }
-  }
-  &-body {
-    font-weight: normal;
-    .el-col {
-      padding-top: 5px;
-      padding-bottom: 5px;
-    }
-    &-spin {
-      padding: 5px 12px;
-      white-space: normal;
-      word-break: break-all;
-    }
-    .stdinfo-item {
-      height: 30px;
-      line-height: 30px;
-      position: relative;
-      overflow: hidden;
-
-      &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        width: 100%;
-        border-bottom: 1px solid #000;
-        bottom: 6px;
-        left: 0;
-        z-index: 1;
-      }
-
-      > span {
-        z-index: 2;
-        display: block;
-        position: relative;
-        font-size: 14px;
-
-        &:first-child {
-          float: left;
-          background-color: #fff;
-          text-align: justify;
-
-          &::after {
-            content: "";
-            display: inline-block;
-            width: 100%;
-            height: 0;
-            line-height: 0;
-          }
-        }
-        &:nth-of-type(2) {
-          float: left;
-          width: 20px;
-          background-color: #fff;
-        }
-        &:last-child {
-          margin-left: 80px;
-          height: 100%;
-        }
-      }
-    }
-    .head-stdno {
-      height: 100%;
-      padding: 0;
-      .stdno-empty {
-        font-weight: bold;
-        letter-spacing: 3px;
-        text-align: center;
-      }
-      .stdno-fill {
-        min-height: 284px;
-        height: 100%;
-        position: relative;
-
-        &-rect {
-          font-size: 0;
-          height: 27px;
-          border-bottom: 1px solid #000;
-        }
-        &-number {
-          display: inline-block;
-          vertical-align: top;
-          width: 7.692%;
-          height: 100%;
-          &:not(:last-child) {
-            border-right: 1px solid #000;
-          }
-        }
-
-        &-head {
-          position: absolute;
-          width: 100%;
-          height: 51px;
-          top: 0;
-          left: 0;
-          z-index: 9;
-
-          > h5 {
-            border-bottom: 1px solid #000;
-            line-height: 24px;
-            font-size: 16px;
-            font-weight: bold;
-            text-align: center;
-          }
-        }
-
-        &-body {
-          position: absolute;
-          top: 0;
-          bottom: 0;
-          padding-top: 51px;
-          display: table;
-          width: 100%;
-        }
-        &-list {
-          display: table-cell;
-          width: 7.692%;
-          padding: 1px 0;
-        }
-        &-option {
-          margin: 8px auto;
-          width: 20px;
-          height: 14px;
-          font-size: 12px;
-          line-height: 1;
-          text-align: center;
-          color: #000;
-          // border-rect
-          border: 1px solid #000;
-          font-family: "Times New Roman", Arial, sans-serif;
-          > i {
-            display: inline-block;
-            transform: scale(0.67, 0.67);
-          }
-        }
-      }
-      .stdno-auto {
-        &-barcode {
-          height: 70px;
-          text-align: center;
-
-          > img {
-            display: block;
-            height: 50px;
-            width: 300px;
-            margin: 0 auto;
-          }
-          > p {
-            line-height: 20px;
-          }
-        }
-      }
-    }
-
-    .head-notice {
-      > h4 {
-        font-weight: normal;
-        margin-bottom: 8px;
-      }
-      &-cont {
-        line-height: 1.5;
-        font-size: 12px;
-        margin-bottom: 5px;
-
-        > span {
-          display: block;
-
-          &:first-child {
-            width: 20px;
-            white-space: nowrap;
-            float: left;
-          }
-          &:last-child {
-            margin-left: 20px;
-          }
-        }
-      }
-
-      &-exam-number-fill {
-        span {
-          display: inline;
-
-          &:first-child {
-            float: none;
-          }
-          &:last-child {
-            margin: 0;
-          }
-        }
-      }
-    }
-
-    .head-dynamic {
-      padding: 0;
-      font-size: 12px;
-      border-spacing: 0;
-      border-collapse: collapse;
-
-      &-part:not(:last-child) {
-        border-bottom: 1px solid #000;
-      }
-      &-write {
-        padding: 5px 12px;
-        .stdinfo-item {
-          margin-bottom: 0;
-        }
-        > p {
-          line-height: 18px;
-        }
-      }
-      &-missfill {
-        display: table;
-        width: 100%;
-      }
-      &-miss {
-        padding: 10px;
-        display: table-cell;
-        vertical-align: middle;
-
-        &:nth-of-type(2) {
-          border-left: 1px solid #000;
-        }
-        span {
-          display: block;
-        }
-        .dynamic-miss-title {
-          width: 54px;
-          float: left;
-        }
-        .dynamic-miss-body {
-          margin-left: 54px;
-          text-align: center;
-        }
-        .head-dynamic-rect {
-          margin: auto;
-          vertical-align: middle;
-        }
-      }
-      &-fill {
-        padding: 10px;
-
-        p {
-          display: inline-block;
-          vertical-align: middle;
-          line-height: 18px;
-          word-wrap: normal;
-
-          &:first-child {
-            margin-right: 20px;
-          }
-
-          > span,
-          > i {
-            display: inline-block;
-            vertical-align: middle;
-            box-sizing: border-box;
-          }
-          &:first-child {
-            i {
-              width: 28px;
-              height: 14px;
-              background-color: #000;
-            }
-          }
-          &:last-child {
-            > i {
-              width: 28px;
-              height: 14px;
-              border: 1px solid #000;
-              font-size: 14px;
-              font-weight: bold;
-              margin-right: 6px;
-              line-height: 12px;
-              text-align: center;
-
-              &:last-child {
-                margin-right: 0;
-              }
-              // wkhtmltopdf 工具无法渲染如下样式：
-              // &:nth-of-type(1) {
-              //   position: relative;
-              //   &::before {
-              //     content: "";
-              //     display: block;
-              //     position: absolute;
-              //     left: 30%;
-              //     top: 1px;
-              //     height: 5px;
-              //     width: 11px;
-              //     transform: rotate(-45deg);
-              //     border-left: 1px solid #000;
-              //     border-bottom: 1px solid #000;
-              //   }
-              // }
-              // &:nth-of-type(2) {
-              //   position: relative;
-              //   &::before {
-              //     content: "";
-              //     display: block;
-              //     position: absolute;
-              //     left: 7px;
-              //     top: 5px;
-              //     width: 11px;
-              //     transform: rotate(-45deg);
-              //     transform-origin: center center;
-              //     border-bottom: 1px solid #000;
-              //   }
-              //   &::after {
-              //     content: "";
-              //     display: block;
-              //     position: absolute;
-              //     left: 8px;
-              //     top: 5px;
-              //     width: 11px;
-              //     transform: rotate(45deg);
-              //     transform-origin: center center;
-              //     border-bottom: 1px solid #000;
-              //   }
-              // }
-
-              &:nth-of-type(3) {
-                &::before {
-                  content: "";
-                  display: inline-block;
-                  vertical-align: top;
-                  margin-left: -5px;
-                  height: 100%;
-                  width: 5px;
-                  background-color: #000;
-                }
-              }
-              &:nth-of-type(4) {
-                &::before {
-                  content: "";
-                  display: inline-block;
-                  margin-top: 1px;
-                  width: 10px;
-                  height: 10px;
-                  border-radius: 50%;
-                  background-color: #000;
-                }
-              }
-            }
-          }
-        }
-      }
-      &-rect {
-        display: inline-block;
-        width: 30px;
-        height: 14px;
-        // border-rect
-        border: 1px solid #000;
-        font-size: 12px;
-        text-align: center;
-        line-height: 1;
-        color: #000;
-        margin: 0 5px;
-        font-family: "Times New Roman", Arial, sans-serif;
-
-        > i {
-          display: inline-block;
-          transform: scale(0.67, 0.67);
-        }
-      }
-      &-aorb {
-        display: table;
-        width: 100%;
-        .dynamic-aorb-item {
-          display: table-cell;
-          vertical-align: middle;
-          text-align: center;
-          &:not(:last-child) {
-            border-right: 1px solid #000;
-          }
-        }
-        &-fill {
-          .dynamic-aorb-item:first-child {
-            border: none;
-          }
-        }
-
-        .dynamic-aorb-title {
-          width: 83px;
-        }
-        .dynamic-aorb-info {
-          width: 50px;
-          font-size: 16px;
-          position: relative;
-          overflow: hidden;
-          .dynamic-aorb-content {
-            position: absolute;
-            top: 50%;
-            left: 0;
-            width: 100%;
-            transform: translateY(-50%);
-            z-index: auto;
-          }
-        }
-        .dynamic-aorb-barcode {
-          img {
-            display: block;
-            position: relative;
-            margin: 0 auto;
-            width: 200px;
-            height: 26px;
-            padding: 7px 0;
-          }
-        }
-        .dynamic-aorb-rects {
-          padding: 16px 10px;
-        }
-      }
-    }
-  }
-  &-part {
-    border: 1px solid #000;
-    &:not(:last-child) {
-      margin-bottom: 10px;
-    }
-  }
-  &-normal {
-    .head-dynamic {
-      &-1 {
-        .head-dynamic-part {
-          height: 100%;
-        }
-      }
-    }
-  }
-  &-narrow {
-    .head-stdno {
-      height: 138px;
-      .stdno-auto {
-        position: relative;
-        top: 50%;
-        margin-top: -40px;
-      }
-    }
-  }
-
-  &-handle {
-    &.card-head-narrow {
-      .head-stdno {
-        height: 286px;
-      }
-    }
-  }
-}
-// card-head-body-auto-resize
-.card-head-body-auto-resize {
-  margin-left: -5px;
-  margin-right: -5px;
-  overflow: hidden;
-
-  &.col-item-auto-height {
-    .card-head-body-spin {
-      height: auto;
-    }
-  }
-
-  .head-dynamic-2 {
-    .head-dynamic-part {
-      height: auto;
-    }
-  }
-
-  .rect-col {
-    padding: 5px;
-    &:first-child {
-      float: left;
-      width: 289px;
-    }
-    &:last-child {
-      float: right;
-      width: 424px;
-    }
-
-    &-item {
-      border: 1px solid #000;
-      &:nth-of-type(2) {
-        margin-top: 10px;
-      }
-      &-none {
-        border: none;
-        margin: 0 !important;
-      }
-    }
-  }
-}
-// elem-topic-head
-.elem-topic-head {
-  text-align: center;
-  .elem-body {
-    padding: 0;
-    border: 1px solid #000;
-  }
-  &-pad {
-    padding-top: 10px;
-  }
-  h3 {
-    font-size: 16px;
-    height: 29px;
-    line-height: 28px;
-    border-bottom: 1px dotted #000;
-    font-weight: normal;
-  }
-  p {
-    font-size: 12px;
-    height: 29px;
-    line-height: 29px;
-    white-space: nowrap;
-    overflow: hidden;
-    // text-overflow: ellipsis;
-  }
-}
-// elem-line
-.elem-line-horizontal {
-  height: 100%;
-  line-height: 30px;
-  .line-body {
-    display: inline-block;
-    vertical-align: middle;
-    width: 100%;
-    border-bottom: 1px solid #000;
-  }
-}
-.elem-line-vertical {
-  height: 100%;
-  text-align: center;
-  .line-body {
-    display: inline-block;
-    vertical-align: top;
-    height: 100%;
-    border-left: 1px solid #000;
-  }
-}
-// elem-lines
-.elem-lines {
-  .line-item {
-    display: inline-block;
-    vertical-align: top;
-  }
-}
-// elem-rect
-.elem-rect {
-  .rect-body {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-  }
-}
-// elem-text
-.elem-text {
-  .text-body {
-    padding: 5px;
-    line-height: 1.4;
-
-    span {
-      white-space: pre-wrap;
-      word-wrap: normal;
-      word-break: break-all;
-      &.cont-variate {
-        color: #a0a0a0;
-        margin: 0 2px;
-      }
-    }
-  }
-}
-// elem-barcode
-.elem-barcode {
-  height: 100%;
-  border-color: transparent;
-  border-width: 1pt;
-  position: relative;
-  > img {
-    max-height: 100%;
-    max-width: 100%;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-  }
-}
-// elem-image
-.elem-image {
-  height: 100%;
-  border-color: transparent;
-  border-width: 1pt;
-  position: relative;
-  > p {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    display: table;
-    text-align: center;
-    color: #b0b0b0;
-    font-size: 30pt;
-
-    i {
-      display: table-cell;
-      vertical-align: middle;
-    }
-  }
-  > img {
-    max-height: 100%;
-    max-width: 100%;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-  }
-}
-// elem-girds
-.elem-grids {
-  > table {
-    table-layout: fixed;
-    border-spacing: 0;
-    border-collapse: collapse;
-    td {
-      border: 1px solid #000;
-    }
-  }
-  &-halving {
-    > table {
-      table-layout: auto;
-      width: 100%;
-    }
-  }
-}
-.elem-pane {
-  height: 100%;
-}
-// elem-fill-question
-.elem-fill-question {
-  white-space: normal;
-
-  // 客观题强调标记
-  &-first::before {
-    content: "";
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 99;
-    color: #fff;
-    padding: 6px 10px;
-    line-height: 1;
-    font-size: 18px;
-    border-bottom-left-radius: 10px;
-  }
-
-  &-first.elem-fill-question-simple {
-    &::before {
-      content: "单选";
-      background-color: mix(#fff, $--color-success, 20%);
-    }
-  }
-  &-first.elem-fill-question-multiply {
-    &::before {
-      content: "多选";
-      background-color: $--color-primary-light;
-    }
-  }
-  &-first.elem-fill-question-boolean {
-    &::before {
-      content: "判断";
-      background-color: mix(#fff, $--color-warning, 20%);
-    }
-  }
-
-  .elem-body {
-    padding: 18px 0 18px 16px;
-  }
-
-  .group-item {
-    font-family: "Times New Roman", Arial, sans-serif;
-    display: inline-block;
-    vertical-align: top;
-    font-size: 0;
-    // margin-bottom: 20px;
-  }
-  .question-item {
-    font-size: 0;
-  }
-  .option-item {
-    display: inline-block;
-    vertical-align: middle;
-    padding: 0;
-    width: 18px;
-    height: 14px;
-    text-align: center;
-    font-size: 12px;
-    line-height: 1;
-    // border-rect
-    border: 1px solid #000;
-    color: #000;
-    box-sizing: border-box;
-
-    > i {
-      display: inline-block;
-      transform: scale(0.67, 0.67);
-    }
-
-    &:first-child {
-      text-align: right;
-      border: none;
-      font-size: 12px;
-      color: #000;
-      > i {
-        transform: scale(1, 1);
-      }
-    }
-    &:last-child {
-      margin-right: 0 !important;
-    }
-  }
-
-  &-vertical {
-    .question-item {
-      display: inline-block;
-      vertical-align: top;
-      &:last-child {
-        margin-right: 0 !important;
-      }
-    }
-    .option-item {
-      display: block;
-
-      &:first-child {
-        padding: 0;
-        text-align: center;
-      }
-      &:last-child {
-        margin-bottom: 0 !important;
-      }
-    }
-  }
-}
-// elem-fill-area
-.elem-fill-area {
-  .option-item {
-    display: inline-block;
-    vertical-align: middle;
-    width: 30px;
-    height: 16px;
-    border: 1px solid #000;
-
-    &:last-child {
-      margin-right: 0 !important;
-    }
-  }
-
-  &-vertical {
-    .option-item {
-      display: block;
-      &:last-child {
-        margin-bottom: 0 !important;
-      }
-    }
-  }
-}
-// elem-fill-line
-.elem-fill-line {
-  white-space: normal;
-
-  .elem-body {
-    padding: 0 15px 0 10px;
-    font-size: 0;
-  }
-  .elem-fill-quesiton {
-    display: inline-block;
-    vertical-align: top;
-    position: relative;
-    padding: 0 1px;
-    font-size: 12px;
-
-    li {
-      &.elem-fill-line {
-        height: 40px;
-        position: relative;
-        margin: 0 10px 0 20px;
-        z-index: 8;
-        &::after {
-          content: "";
-          display: block;
-          position: absolute;
-          width: 100%;
-          border-bottom: 1px solid #000;
-          bottom: 8px;
-        }
-      }
-      &.elem-fill-no {
-        position: absolute;
-        top: 2px;
-        bottom: 2px;
-        left: 1px;
-        z-index: 9;
-        min-width: 20px;
-        text-align: left;
-        background-color: #fff;
-        border: none;
-
-        span {
-          display: block;
-          position: relative;
-          padding-bottom: 5px;
-          padding-right: 3px;
-          transform: translateY(-100%);
-        }
-      }
-      &.elem-fill-comma {
-        position: absolute;
-        top: 0;
-        right: -10px;
-        z-index: 9;
-        transform: translateY(-100%);
-        width: 10px;
-        padding-bottom: 4px;
-        background-color: #fff;
-        text-align: center;
-        border: none;
-      }
-    }
-  }
-}
-
-// elem-explain
-.elem-explain {
-  .elem-title {
-    padding-bottom: 0;
-  }
-  .elem-body {
-    min-height: 60px;
-    position: relative;
-  }
-  .elem-explain-no {
-    position: absolute;
-    left: 20px;
-    top: 10px;
-    font-size: 12px;
-    z-index: 9;
-  }
-  .elem-explain-elements {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: 8;
-  }
-  .elem-explain-element {
-    .explain-element-body {
-      position: absolute;
-    }
-  }
-}
-// .elem-composition
-.elem-composition {
-  .elem-title {
-    padding-bottom: 0;
-  }
-  .elem-body {
-    min-height: 60px;
-    position: relative;
-  }
-  &-elements {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: 8;
-  }
-
-  .elem-composition-element {
-    .composition-element-body {
-      position: absolute;
-      overflow: hidden;
-    }
-  }
-}
-// elem-fill-number
-.elem-fill-number {
-  border: 1px solid #000;
-  .fill-number {
-    &-rect {
-      font-size: 0;
-      height: 27px;
-      border-bottom: 1px solid #000;
-    }
-    &-number {
-      display: inline-block;
-      vertical-align: top;
-      width: 7.692%;
-      height: 100%;
-      &:not(:last-child) {
-        border-right: 1px solid #000;
-      }
-    }
-
-    &-head {
-      height: 51px;
-
-      > h5 {
-        border-bottom: 1px solid #000;
-        line-height: 24px;
-        font-size: 16px;
-        font-weight: bold;
-        text-align: center;
-      }
-    }
-
-    &-body {
-      display: table;
-      width: 100%;
-    }
-    &-list {
-      display: table-cell;
-      width: 7.692%;
-      padding: 1px 0;
-    }
-    &-option {
-      margin: 8px auto;
-      width: 20px;
-      height: 14px;
-      font-size: 12px;
-      line-height: 1;
-      text-align: center;
-      color: #000;
-      // border-rect
-      border: 1px solid #000;
-      font-family: "Times New Roman", Arial, sans-serif;
-      > i {
-        display: inline-block;
-        transform: scale(0.67, 0.67);
-      }
-    }
-  }
-}
-// elem-fill-field
-.elem-fill-field {
-  white-space: normal;
-  overflow: hidden;
-}
-.fill-field {
-  &-item {
-    display: inline-block;
-    padding: 0 10px;
-    width: 100%;
-  }
-  &-content {
-    height: 30px;
-    line-height: 26px;
-    overflow: hidden;
-    position: relative;
-
-    &::after {
-      content: "";
-      display: block;
-      position: absolute;
-      width: 100%;
-      border-bottom: 1px solid #000;
-      bottom: 2px;
-      left: 0;
-      z-index: 1;
-    }
-
-    > span {
-      z-index: 2;
-      display: inline-block;
-      position: relative;
-      font-size: 14px;
-      vertical-align: top;
-
-      &:first-child {
-        background-color: #fff;
-        text-align: justify;
-
-        &::after {
-          content: "";
-          display: inline-block;
-          width: 100%;
-          height: 0;
-          line-height: 0;
-        }
-      }
-      &:nth-of-type(2) {
-        width: 10px;
-        background-color: #fff;
-      }
-    }
-  }
-}
-
-// elem-fill-pane
-.elem-fill-pane {
-  font-size: 0;
-  white-space: normal;
-  overflow: hidden;
-  .fill-pane {
-    &-item {
-      display: inline-block;
-      vertical-align: top;
-      font-size: 14px;
-    }
-    &-cont {
-      border: 1px solid #000;
-    }
-  }
-}
-
-// card-free-preview
-.card-free-preview {
-  &:not(.card-print) {
-    padding: 10px 0;
-    background-color: #f0f0f0;
-
-    .page-box {
-      margin: 10px auto;
-      box-shadow: 0 0 4px #ddd;
-    }
-  }
-  .page-column-element {
-    .element-item {
-      position: absolute;
-
-      &::before {
-        display: none;
-      }
-    }
-  }
-}
+// card-preview
+.card-preview {
+  padding: 10px 0;
+  background-color: #f0f0f0;
+  color: #000;
+  .page-box {
+    margin: 10px auto;
+    box-shadow: 0 0 4px #ddd;
+  }
+}
+.card-print {
+  padding: 0;
+
+  .page-box {
+    margin: 0 auto;
+    box-shadow: none;
+    page-break-after: always;
+  }
+  // 印刷模式：隐藏客观题强调标记
+  .elem-fill-question-first {
+    &::before {
+      display: none;
+    }
+  }
+}
+
+// page-box
+.page-box {
+  position: relative;
+  background: #fff;
+  margin: 0 auto;
+  font-weight: normal;
+  font-family: "宋体", "宋体-简", Arial, sans-serif;
+
+  .page-main {
+    height: 100%;
+    position: relative;
+    white-space: nowrap;
+    margin: 0 -10px;
+
+    &-2 {
+      .page-column {
+        width: 50%;
+      }
+    }
+    &-3 {
+      .page-column {
+        width: 33.33%;
+      }
+    }
+    &-4 {
+      .page-column {
+        width: 25%;
+      }
+    }
+  }
+
+  &-A3 {
+    width: 1586px;
+    height: 1122px;
+
+    .page-main {
+      &-inner {
+        padding: 60px 80px 86px;
+      }
+
+      &-1 {
+        .page-column-forbid-area {
+          &::before {
+            width: 2000px;
+            transform: rotate(34.326deg);
+          }
+          &::after {
+            width: 2000px;
+            transform: rotate(-34.326deg);
+          }
+        }
+      }
+      &-2 {
+        .page-column-forbid-area {
+          &::before {
+            transform: rotate(54.216deg);
+          }
+          &::after {
+            transform: rotate(-54.216deg);
+          }
+        }
+      }
+
+      &-3 {
+        .page-column-forbid-area {
+          &::before {
+            transform: rotate(64.6555deg);
+          }
+          &::after {
+            transform: rotate(-64.6555deg);
+          }
+        }
+      }
+      &-4 {
+        .page-column-forbid-area {
+          &::before {
+            transform: rotate(70.3109deg);
+          }
+          &::after {
+            transform: rotate(-70.3109deg);
+          }
+        }
+      }
+    }
+  }
+  &-A4 {
+    width: 793px;
+    height: 1122px;
+
+    .page-main {
+      &-inner {
+        padding: 60px 45px 86px;
+      }
+
+      &-1 {
+        .page-column-forbid-area {
+          &::before {
+            transform: rotate(54.216deg);
+          }
+          &::after {
+            transform: rotate(-54.216deg);
+          }
+        }
+      }
+
+      &-2 {
+        .page-column-forbid-area {
+          &::before {
+            transform: rotate(70.5109deg);
+          }
+          &::after {
+            transform: rotate(-70.5109deg);
+          }
+        }
+      }
+    }
+  }
+
+  &-less {
+    .page-number-rect {
+      display: none;
+    }
+  }
+}
+
+// 分栏间距，默认20px
+// page-main-inner
+.page-main-inner {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  padding: 60px 80px 86px;
+  z-index: 9;
+  font-size: 0;
+}
+// page-main-outer
+.page-main-outer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 7;
+  background-color: transparent;
+  overflow: hidden;
+}
+
+.page-column {
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  font-size: 14px;
+  padding: 0 10px;
+
+  &-forbid-area {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+    border: 1px solid #000;
+    overflow: hidden;
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 1200px;
+      border-bottom: 1px solid rgba(172, 172, 172, 1);
+      top: 0;
+      left: 0;
+      transform: rotate(54.216deg);
+      transform-origin: left;
+      z-index: 1;
+    }
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 1200px;
+      border-bottom: 1px solid rgba(172, 172, 172, 1);
+      bottom: 0;
+      left: 0;
+      transform: rotate(-54.216deg);
+      transform-origin: left;
+      z-index: 1;
+    }
+    > p {
+      padding: 20px;
+      position: absolute;
+      width: 260px;
+      height: 82px;
+      top: 50%;
+      left: 50%;
+      margin-top: -41px;
+      margin-left: -130px;
+      z-index: 9;
+      font-weight: bold;
+      font-size: 30px;
+      color: #999;
+      background-color: #fff;
+      text-align: center;
+    }
+  }
+  &-main {
+    position: relative;
+    height: 100%;
+  }
+  &-body {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 9;
+  }
+  &-element {
+    .element-item {
+      position: relative;
+
+      &-width {
+        width: 100% !important;
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        box-sizing: border-box;
+        z-index: 2;
+        border: 1px solid #000;
+        border-top: 0;
+      }
+
+      > div {
+        z-index: 9;
+        position: relative;
+      }
+      &-card-head {
+        &::before {
+          border: 0;
+        }
+      }
+
+      &-topic-head {
+        &::before {
+          border: 0;
+        }
+      }
+      &-fill-question,
+      &-fill-line {
+        &::before {
+          border-bottom: 0;
+        }
+      }
+      // 预览时，小题扩展答题区之间隐藏分割线
+      &-explain {
+        &::before {
+          border-bottom-color: transparent;
+        }
+      }
+      &-type-last {
+        &::before {
+          border-bottom: 1px solid #000;
+        }
+      }
+    }
+    &:last-child {
+      .element-item {
+        &::before {
+          border-bottom: 1px solid #000;
+        }
+      }
+      .element-item-card-head.element-item-type-pre {
+        &::before {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+}
+
+// locator
+.page-locator {
+  position: absolute;
+  left: 80px;
+  right: 80px;
+  height: 16px;
+  z-index: 8;
+
+  &-top {
+    top: 40px;
+  }
+  &-bottom {
+    bottom: 40px;
+  }
+
+  &-item {
+    position: absolute;
+    width: 24px;
+    border-bottom: 16px solid #000;
+    top: 0;
+
+    &:nth-of-type(1) {
+      left: 0;
+    }
+    &:nth-of-type(2) {
+      right: 96px;
+    }
+  }
+}
+// page-number
+.page-number {
+  position: absolute;
+  bottom: 40px;
+  &-rect {
+    left: 252px;
+  }
+  &-rect-list {
+    font-size: 0;
+
+    li {
+      display: inline-block;
+      vertical-align: top;
+      font-size: 14px;
+      width: 24px;
+      height: 16px;
+      border: 1px solid #000;
+      margin-right: 10px;
+      &.rect-li-act {
+        height: 0;
+        border: none;
+        border-bottom: 16px solid #000;
+      }
+    }
+  }
+  &-text {
+    right: 25%;
+  }
+  &-text-cont {
+    height: 16px;
+    line-height: 16px;
+  }
+}
+
+// elem
+.elem {
+  &-title {
+    padding: 10px;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 1);
+    line-height: 1;
+    white-space: normal;
+  }
+  &-body {
+    padding: 10px;
+  }
+}
+// grid
+.grid-container {
+  margin-left: -10px;
+  margin-right: -10px;
+}
+.grid-row {
+  display: table;
+  width: 100%;
+  border-spacing: 10px 0;
+  border-collapse: separate;
+
+  &:nth-of-type(2) {
+    margin-top: 10px;
+  }
+
+  .grid-col {
+    display: table-cell;
+    width: 50%;
+    vertical-align: top;
+    border: 1px solid #000;
+    &-dash {
+      border-style: dashed;
+      vertical-align: middle;
+    }
+  }
+}
+// card-head
+.card-head {
+  &-top {
+    text-align: center;
+    color: #000;
+  }
+  &-title {
+    font-size: 24px;
+    font-weight: bold;
+    overflow: hidden;
+
+    > h1 {
+      line-height: 33px;
+      white-space: nowrap;
+      letter-spacing: -1px;
+    }
+  }
+  &-subtitle {
+    height: 44px;
+    font-family: $--font-family;
+    font-size: 14px;
+    overflow: hidden;
+    white-space: normal;
+    margin-bottom: 10px;
+
+    > p {
+      padding: 0 10px;
+      line-height: 22px;
+      white-space: pre;
+    }
+  }
+  &-body {
+    font-weight: normal;
+    .el-col {
+      padding-top: 5px;
+      padding-bottom: 5px;
+    }
+    &-spin {
+      padding: 5px 12px;
+      white-space: normal;
+      word-break: break-all;
+    }
+    .stdinfo-item {
+      height: 30px;
+      line-height: 30px;
+      position: relative;
+      overflow: hidden;
+
+      &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 100%;
+        border-bottom: 1px solid #000;
+        bottom: 6px;
+        left: 0;
+        z-index: 1;
+      }
+
+      > span {
+        z-index: 2;
+        display: block;
+        position: relative;
+        font-size: 14px;
+
+        &:first-child {
+          float: left;
+          background-color: #fff;
+          text-align: justify;
+
+          &::after {
+            content: "";
+            display: inline-block;
+            width: 100%;
+            height: 0;
+            line-height: 0;
+          }
+        }
+        &:nth-of-type(2) {
+          float: left;
+          width: 20px;
+          background-color: #fff;
+        }
+        &:last-child {
+          margin-left: 80px;
+          height: 100%;
+        }
+      }
+    }
+    .head-stdno {
+      height: 100%;
+      padding: 0;
+      .stdno-empty {
+        font-weight: bold;
+        letter-spacing: 3px;
+        text-align: center;
+      }
+      .stdno-fill {
+        min-height: 284px;
+        height: 100%;
+        position: relative;
+
+        &-rect {
+          font-size: 0;
+          height: 27px;
+          border-bottom: 1px solid #000;
+        }
+        &-number {
+          display: inline-block;
+          vertical-align: top;
+          width: 7.692%;
+          height: 100%;
+          &:not(:last-child) {
+            border-right: 1px solid #000;
+          }
+        }
+
+        &-head {
+          position: absolute;
+          width: 100%;
+          height: 51px;
+          top: 0;
+          left: 0;
+          z-index: 9;
+
+          > h5 {
+            border-bottom: 1px solid #000;
+            line-height: 24px;
+            font-size: 16px;
+            font-weight: bold;
+            text-align: center;
+          }
+        }
+
+        &-body {
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          padding-top: 51px;
+          display: table;
+          width: 100%;
+        }
+        &-list {
+          display: table-cell;
+          width: 7.692%;
+          padding: 1px 0;
+        }
+        &-option {
+          margin: 8px auto;
+          width: 20px;
+          height: 14px;
+          font-size: 12px;
+          line-height: 1;
+          text-align: center;
+          color: #000;
+          // border-rect
+          border: 1px solid #000;
+          font-family: "Times New Roman", Arial, sans-serif;
+          > i {
+            display: inline-block;
+            transform: scale(0.67, 0.67);
+          }
+        }
+      }
+      .stdno-auto {
+        &-barcode {
+          height: 70px;
+          text-align: center;
+
+          > img {
+            display: block;
+            height: 50px;
+            width: 300px;
+            margin: 0 auto;
+          }
+          > p {
+            line-height: 20px;
+          }
+        }
+      }
+    }
+
+    .head-notice {
+      > h4 {
+        font-weight: normal;
+        margin-bottom: 8px;
+      }
+      &-cont {
+        line-height: 1.5;
+        font-size: 12px;
+        margin-bottom: 5px;
+
+        > span {
+          display: block;
+
+          &:first-child {
+            width: 20px;
+            white-space: nowrap;
+            float: left;
+          }
+          &:last-child {
+            margin-left: 20px;
+          }
+        }
+      }
+
+      &-exam-number-fill {
+        span {
+          display: inline;
+
+          &:first-child {
+            float: none;
+          }
+          &:last-child {
+            margin: 0;
+          }
+        }
+      }
+    }
+
+    .head-dynamic {
+      padding: 0;
+      font-size: 12px;
+      border-spacing: 0;
+      border-collapse: collapse;
+
+      &-part:not(:last-child) {
+        border-bottom: 1px solid #000;
+      }
+      &-write {
+        padding: 5px 12px;
+        .stdinfo-item {
+          margin-bottom: 0;
+        }
+        > p {
+          line-height: 18px;
+        }
+      }
+      &-missfill {
+        display: table;
+        width: 100%;
+      }
+      &-miss {
+        padding: 10px;
+        display: table-cell;
+        vertical-align: middle;
+
+        &:nth-of-type(2) {
+          border-left: 1px solid #000;
+        }
+        span {
+          display: block;
+        }
+        .dynamic-miss-title {
+          width: 54px;
+          float: left;
+        }
+        .dynamic-miss-body {
+          margin-left: 54px;
+          text-align: center;
+        }
+        .head-dynamic-rect {
+          margin: auto;
+          vertical-align: middle;
+        }
+      }
+      &-fill {
+        padding: 10px;
+
+        p {
+          display: inline-block;
+          vertical-align: middle;
+          line-height: 18px;
+          word-wrap: normal;
+
+          &:first-child {
+            margin-right: 20px;
+          }
+
+          > span,
+          > i {
+            display: inline-block;
+            vertical-align: middle;
+            box-sizing: border-box;
+          }
+          &:first-child {
+            i {
+              width: 28px;
+              height: 14px;
+              background-color: #000;
+            }
+          }
+          &:last-child {
+            > i {
+              width: 28px;
+              height: 14px;
+              border: 1px solid #000;
+              font-size: 14px;
+              font-weight: bold;
+              margin-right: 6px;
+              line-height: 12px;
+              text-align: center;
+
+              &:last-child {
+                margin-right: 0;
+              }
+              // wkhtmltopdf 工具无法渲染如下样式：
+              // &:nth-of-type(1) {
+              //   position: relative;
+              //   &::before {
+              //     content: "";
+              //     display: block;
+              //     position: absolute;
+              //     left: 30%;
+              //     top: 1px;
+              //     height: 5px;
+              //     width: 11px;
+              //     transform: rotate(-45deg);
+              //     border-left: 1px solid #000;
+              //     border-bottom: 1px solid #000;
+              //   }
+              // }
+              // &:nth-of-type(2) {
+              //   position: relative;
+              //   &::before {
+              //     content: "";
+              //     display: block;
+              //     position: absolute;
+              //     left: 7px;
+              //     top: 5px;
+              //     width: 11px;
+              //     transform: rotate(-45deg);
+              //     transform-origin: center center;
+              //     border-bottom: 1px solid #000;
+              //   }
+              //   &::after {
+              //     content: "";
+              //     display: block;
+              //     position: absolute;
+              //     left: 8px;
+              //     top: 5px;
+              //     width: 11px;
+              //     transform: rotate(45deg);
+              //     transform-origin: center center;
+              //     border-bottom: 1px solid #000;
+              //   }
+              // }
+
+              &:nth-of-type(3) {
+                &::before {
+                  content: "";
+                  display: inline-block;
+                  vertical-align: top;
+                  margin-left: -5px;
+                  height: 100%;
+                  width: 5px;
+                  background-color: #000;
+                }
+              }
+              &:nth-of-type(4) {
+                &::before {
+                  content: "";
+                  display: inline-block;
+                  margin-top: 1px;
+                  width: 10px;
+                  height: 10px;
+                  border-radius: 50%;
+                  background-color: #000;
+                }
+              }
+            }
+          }
+        }
+      }
+      &-rect {
+        display: inline-block;
+        width: 30px;
+        height: 14px;
+        // border-rect
+        border: 1px solid #000;
+        font-size: 12px;
+        text-align: center;
+        line-height: 1;
+        color: #000;
+        margin: 0 5px;
+        font-family: "Times New Roman", Arial, sans-serif;
+
+        > i {
+          display: inline-block;
+          transform: scale(0.67, 0.67);
+        }
+      }
+      &-aorb {
+        display: table;
+        width: 100%;
+        .dynamic-aorb-item {
+          display: table-cell;
+          vertical-align: middle;
+          text-align: center;
+          &:not(:last-child) {
+            border-right: 1px solid #000;
+          }
+        }
+        &-fill {
+          .dynamic-aorb-item:first-child {
+            border: none;
+          }
+        }
+
+        .dynamic-aorb-title {
+          width: 83px;
+        }
+        .dynamic-aorb-info {
+          width: 50px;
+          font-size: 16px;
+          position: relative;
+          overflow: hidden;
+          .dynamic-aorb-content {
+            position: absolute;
+            top: 50%;
+            left: 0;
+            width: 100%;
+            transform: translateY(-50%);
+            z-index: auto;
+          }
+        }
+        .dynamic-aorb-barcode {
+          img {
+            display: block;
+            position: relative;
+            margin: 0 auto;
+            width: 200px;
+            height: 26px;
+            padding: 7px 0;
+          }
+        }
+        .dynamic-aorb-rects {
+          padding: 16px 10px;
+        }
+      }
+    }
+  }
+  &-part {
+    border: 1px solid #000;
+    &:not(:last-child) {
+      margin-bottom: 10px;
+    }
+  }
+  &-normal {
+    .head-dynamic {
+      &-1 {
+        .head-dynamic-part {
+          height: 100%;
+        }
+      }
+    }
+  }
+  &-narrow {
+    .head-stdno {
+      height: 138px;
+      .stdno-auto {
+        position: relative;
+        top: 50%;
+        margin-top: -40px;
+      }
+    }
+  }
+
+  &-handle {
+    &.card-head-narrow {
+      .head-stdno {
+        height: 286px;
+      }
+    }
+  }
+}
+// card-head-body-auto-resize
+.card-head-body-auto-resize {
+  margin-left: -5px;
+  margin-right: -5px;
+  overflow: hidden;
+
+  &.col-item-auto-height {
+    .card-head-body-spin {
+      height: auto;
+    }
+  }
+
+  .head-dynamic-2 {
+    .head-dynamic-part {
+      height: auto;
+    }
+  }
+
+  .rect-col {
+    padding: 5px;
+    &:first-child {
+      float: left;
+      width: 289px;
+    }
+    &:last-child {
+      float: right;
+      width: 424px;
+    }
+
+    &-item {
+      border: 1px solid #000;
+      &:nth-of-type(2) {
+        margin-top: 10px;
+      }
+      &-none {
+        border: none;
+        margin: 0 !important;
+      }
+    }
+  }
+}
+// elem-topic-head
+.elem-topic-head {
+  text-align: center;
+  .elem-body {
+    padding: 0;
+    border: 1px solid #000;
+  }
+  &-pad {
+    padding-top: 10px;
+  }
+  &-empty {
+    .elem-body {
+      border-top: none;
+    }
+  }
+  h3 {
+    font-size: 16px;
+    height: 29px;
+    line-height: 28px;
+    border-bottom: 1px dotted #000;
+    font-weight: normal;
+  }
+  p {
+    font-size: 12px;
+    height: 22px;
+    line-height: 22px;
+    white-space: nowrap;
+    overflow: hidden;
+    // text-overflow: ellipsis;
+  }
+}
+// elem-line
+.elem-line-horizontal {
+  height: 100%;
+  line-height: 30px;
+  .line-body {
+    display: inline-block;
+    vertical-align: middle;
+    width: 100%;
+    border-bottom: 1px solid #000;
+  }
+}
+.elem-line-vertical {
+  height: 100%;
+  text-align: center;
+  .line-body {
+    display: inline-block;
+    vertical-align: top;
+    height: 100%;
+    border-left: 1px solid #000;
+  }
+}
+// elem-lines
+.elem-lines {
+  .line-item {
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+// elem-rect
+.elem-rect {
+  .rect-body {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+}
+// elem-text
+.elem-text {
+  .text-body {
+    padding: 5px;
+    line-height: 1.4;
+
+    span {
+      white-space: pre-wrap;
+      word-wrap: normal;
+      word-break: break-all;
+      &.cont-variate {
+        color: #a0a0a0;
+        margin: 0 2px;
+      }
+    }
+  }
+}
+// elem-barcode
+.elem-barcode {
+  height: 100%;
+  border-color: transparent;
+  border-width: 1pt;
+  position: relative;
+  > img {
+    max-height: 100%;
+    max-width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+}
+// elem-image
+.elem-image {
+  height: 100%;
+  border-color: transparent;
+  border-width: 1pt;
+  position: relative;
+  > p {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: table;
+    text-align: center;
+    color: #b0b0b0;
+    font-size: 30pt;
+
+    i {
+      display: table-cell;
+      vertical-align: middle;
+    }
+  }
+  > img {
+    max-height: 100%;
+    max-width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+}
+// elem-girds
+.elem-grids {
+  > table {
+    table-layout: fixed;
+    border-spacing: 0;
+    border-collapse: collapse;
+    td {
+      border: 1px solid #000;
+    }
+  }
+  &-halving {
+    > table {
+      table-layout: auto;
+      width: 100%;
+    }
+  }
+}
+.elem-pane {
+  height: 100%;
+}
+// elem-fill-question
+.elem-fill-question {
+  white-space: normal;
+
+  // 客观题强调标记
+  &-first::before {
+    content: "";
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 99;
+    color: #fff;
+    padding: 6px 10px;
+    line-height: 1;
+    font-size: 18px;
+    border-bottom-left-radius: 10px;
+  }
+
+  &-first.elem-fill-question-simple {
+    &::before {
+      content: "单选";
+      background-color: mix(#fff, $--color-success, 20%);
+    }
+  }
+  &-first.elem-fill-question-multiply {
+    &::before {
+      content: "多选";
+      background-color: $--color-primary-light;
+    }
+  }
+  &-first.elem-fill-question-boolean {
+    &::before {
+      content: "判断";
+      background-color: mix(#fff, $--color-warning, 20%);
+    }
+  }
+
+  .elem-title {
+    padding-bottom: 0;
+  }
+
+  .elem-body {
+    padding: 10px 5px;
+  }
+
+  .group-item {
+    font-family: "Times New Roman", Arial, sans-serif;
+    display: inline-block;
+    vertical-align: top;
+    font-size: 0;
+    // margin-bottom: 20px;
+  }
+  .question-item {
+    font-size: 0;
+  }
+  .option-item {
+    display: inline-block;
+    vertical-align: middle;
+    padding: 0;
+    width: 18px;
+    height: 14px;
+    text-align: center;
+    font-size: 12px;
+    line-height: 1;
+    // border-rect
+    border: 1px solid #000;
+    color: #000;
+    box-sizing: border-box;
+
+    > i {
+      display: inline-block;
+      transform: scale(0.67, 0.67);
+    }
+
+    &:first-child {
+      text-align: right;
+      border: none;
+      font-size: 12px;
+      color: #000;
+      > i {
+        transform: scale(1, 1);
+      }
+    }
+    &:last-child {
+      margin-right: 0 !important;
+    }
+  }
+
+  &-vertical {
+    .question-item {
+      display: inline-block;
+      vertical-align: top;
+      &:last-child {
+        margin-right: 0 !important;
+      }
+    }
+    .option-item {
+      display: block;
+
+      &:first-child {
+        padding: 0;
+        text-align: center;
+      }
+      &:last-child {
+        margin-bottom: 0 !important;
+      }
+    }
+  }
+}
+// elem-fill-area
+.elem-fill-area {
+  .option-item {
+    display: inline-block;
+    vertical-align: middle;
+    width: 30px;
+    height: 16px;
+    border: 1px solid #000;
+
+    &:last-child {
+      margin-right: 0 !important;
+    }
+  }
+
+  &-vertical {
+    .option-item {
+      display: block;
+      &:last-child {
+        margin-bottom: 0 !important;
+      }
+    }
+  }
+}
+// elem-fill-line
+.elem-fill-line {
+  white-space: normal;
+
+  .elem-body {
+    padding: 0 15px 0 10px;
+    font-size: 0;
+  }
+  .elem-fill-quesiton {
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    padding: 0 1px;
+    font-size: 12px;
+
+    li {
+      &.elem-fill-line {
+        height: 40px;
+        position: relative;
+        margin: 0 10px 0 20px;
+        z-index: 8;
+        &::after {
+          content: "";
+          display: block;
+          position: absolute;
+          width: 100%;
+          border-bottom: 1px solid #000;
+          bottom: 8px;
+        }
+      }
+      &.elem-fill-no {
+        position: absolute;
+        top: 2px;
+        bottom: 2px;
+        left: 1px;
+        z-index: 9;
+        min-width: 20px;
+        text-align: left;
+        background-color: #fff;
+        border: none;
+
+        span {
+          display: block;
+          position: relative;
+          padding-bottom: 5px;
+          padding-right: 3px;
+          transform: translateY(-100%);
+        }
+      }
+      &.elem-fill-comma {
+        position: absolute;
+        top: 0;
+        right: -10px;
+        z-index: 9;
+        transform: translateY(-100%);
+        width: 10px;
+        padding-bottom: 4px;
+        background-color: #fff;
+        text-align: center;
+        border: none;
+      }
+    }
+  }
+}
+
+// elem-explain
+.elem-explain {
+  .elem-title {
+    padding-bottom: 0;
+  }
+  .elem-body {
+    min-height: 60px;
+    position: relative;
+  }
+  .elem-explain-no {
+    position: absolute;
+    left: 20px;
+    top: 10px;
+    font-size: 12px;
+    z-index: 9;
+  }
+  .elem-explain-elements {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 8;
+  }
+  .elem-explain-element {
+    .explain-element-body {
+      position: absolute;
+    }
+  }
+}
+// .elem-composition
+.elem-composition {
+  .elem-title {
+    padding-bottom: 0;
+  }
+  .elem-body {
+    min-height: 60px;
+    position: relative;
+  }
+  &-elements {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 8;
+  }
+
+  .elem-composition-element {
+    .composition-element-body {
+      position: absolute;
+      overflow: hidden;
+    }
+  }
+}
+// elem-fill-number
+.elem-fill-number {
+  border: 1px solid #000;
+  .fill-number {
+    &-rect {
+      font-size: 0;
+      height: 27px;
+      border-bottom: 1px solid #000;
+    }
+    &-number {
+      display: inline-block;
+      vertical-align: top;
+      width: 7.692%;
+      height: 100%;
+      &:not(:last-child) {
+        border-right: 1px solid #000;
+      }
+    }
+
+    &-head {
+      height: 51px;
+
+      > h5 {
+        border-bottom: 1px solid #000;
+        line-height: 24px;
+        font-size: 16px;
+        font-weight: bold;
+        text-align: center;
+      }
+    }
+
+    &-body {
+      display: table;
+      width: 100%;
+    }
+    &-list {
+      display: table-cell;
+      width: 7.692%;
+      padding: 1px 0;
+    }
+    &-option {
+      margin: 8px auto;
+      width: 20px;
+      height: 14px;
+      font-size: 12px;
+      line-height: 1;
+      text-align: center;
+      color: #000;
+      // border-rect
+      border: 1px solid #000;
+      font-family: "Times New Roman", Arial, sans-serif;
+      > i {
+        display: inline-block;
+        transform: scale(0.67, 0.67);
+      }
+    }
+  }
+}
+// elem-fill-field
+.elem-fill-field {
+  white-space: normal;
+  overflow: hidden;
+}
+.fill-field {
+  &-item {
+    display: inline-block;
+    padding: 0 10px;
+    width: 100%;
+  }
+  &-content {
+    height: 30px;
+    line-height: 26px;
+    overflow: hidden;
+    position: relative;
+
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 100%;
+      border-bottom: 1px solid #000;
+      bottom: 2px;
+      left: 0;
+      z-index: 1;
+    }
+
+    > span {
+      z-index: 2;
+      display: inline-block;
+      position: relative;
+      font-size: 14px;
+      vertical-align: top;
+
+      &:first-child {
+        background-color: #fff;
+        text-align: justify;
+
+        &::after {
+          content: "";
+          display: inline-block;
+          width: 100%;
+          height: 0;
+          line-height: 0;
+        }
+      }
+      &:nth-of-type(2) {
+        width: 10px;
+        background-color: #fff;
+      }
+    }
+  }
+}
+
+// elem-fill-pane
+.elem-fill-pane {
+  font-size: 0;
+  white-space: normal;
+  overflow: hidden;
+  .fill-pane {
+    &-item {
+      display: inline-block;
+      vertical-align: top;
+      font-size: 14px;
+    }
+    &-cont {
+      border: 1px solid #000;
+    }
+  }
+}
+
+// card-free-preview
+.card-free-preview {
+  &:not(.card-print) {
+    padding: 10px 0;
+    background-color: #f0f0f0;
+
+    .page-box {
+      margin: 10px auto;
+      box-shadow: 0 0 4px #ddd;
+    }
+  }
+  .page-column-element {
+    .element-item {
+      position: absolute;
+
+      &::before {
+        display: none;
+      }
+    }
+  }
+}

card/components/CardConfigPropEdit.vue

@@ -109,7 +109,7 @@ export default {
         aOrB: true,
         examAbsent: true,
         writeSign: true,
-        showForbidArea: true,
+        showForbidArea: false,
       },
     };
   },

card/components/PagePropEdit.vue

@@ -39,13 +39,13 @@
       <!-- <el-form-item label-width="0px">
         <el-checkbox v-model="form.aOrB" disabled>启用A/B卷</el-checkbox>
       </el-form-item> -->
-      <el-form-item label="禁答区域">
+      <!-- <el-form-item label="禁答区域">
         <el-checkbox
           v-model="form.showForbidArea"
           @change="showForbidAreaChange"
           >启用</el-checkbox
         >
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item label="大题顺序">
         <ul class="topicno-list" v-if="topicNoSeries.length">
           <li v-for="item in topicNoSeries" :key="item.id">

card/elements/fill-question/model.js

@@ -6,8 +6,8 @@ const MODEL = {
   x: 0,
   y: 0,
   w: 0,
-  h: 138,
-  minHeight: 138,
+  h: 114,
+  minHeight: 114,
   sign: "objective",
   topicName: "",
   topicNo: null,
@@ -20,7 +20,7 @@ const MODEL = {
   questionDirection: "vertical",
   questionGap: 8,
   groupGap: 30,
-  optionGap: 12,
+  optionGap: 6,
   isBoolean: false, // 是否是判断题
   booleanType: BOOLEAN_TYPE[0],
   isMultiply: false, // 是否是多选题
@@ -39,27 +39,38 @@ const getModel = () => {
 const getFullModel = (model, { pageSize, columnNumber }) => {
   const parent = { ...model };
   // 不同栏数，不同选项个数，每一行对应的组数
-  // 以一行4题，每题4选项为标准展示效果
+  // 以一行4题，每题5选项为标准展示效果
   const numberPerChildren = {
     A3: {
-      2: [0, 0, 6, 5, 4, 3, 3, 2, 2, 2, 2, 1, 1],
-      3: [0, 0, 4, 3, 2, 2, 2, 1],
-      4: [0, 0, 3, 2, 2, 1],
+      2: [0, 0, 7, 6, 5, 4, 3, 3, 3, 2, 2, 2, 2, 1],
+      3: [0, 0, 5, 4, 3, 2, 2, 2, 1],
+      4: [0, 0, 3, 3, 2, 2, 1],
     },
     A4: {
-      1: [0, 0, 6, 5, 4, 3, 3, 2, 2, 2, 2, 1, 1],
-      2: [0, 0, 3, 2, 2, 1],
+      1: [0, 0, 7, 6, 5, 4, 3, 3, 3, 2, 2, 2, 2, 1],
+      2: [0, 0, 3, 3, 2, 2, 1],
     },
   };
-  // 以一行4题，每题5选项为标准展示效果
-  // const numberPerChildren = {
-  //   2: [0, 0, 7, 5, 4, 4, 3, 3, 2, 2, 2, 2, 1],
-  //   3: [0, 0, 4, 3, 2, 2, 2, 2, 1],
-  //   4: [0, 0, 3, 2, 2, 2, 1]
-  // };
+  const groupGapSet = {
+    A3: {
+      2: [0, 0, 33, 28, 27, 40, 40, 40, 27, 40, 40],
+      3: [0, 0, 27, 27, 40, 40, 40, 40, 30],
+      4: [0, 0, 33, 27, 40, 30],
+    },
+    A4: {
+      1: [0, 0, 33, 28, 27, 40, 40, 40, 27, 40, 40],
+      2: [0, 0, 33, 27, 40, 30],
+    },
+  };
+  const groupGapList = groupGapSet[pageSize][columnNumber];
+  const groupGap =
+    model.optionCount >= groupGapList.length
+      ? groupGapList.pop()
+      : groupGapList[model.optionCount];
+
   const numList = numberPerChildren[pageSize][columnNumber];
   const groupPerLine =
-    model.optionCount > numList.length
+    model.optionCount >= numList.length
       ? numList.pop()
       : numList[model.optionCount];
   const numPerLine = groupPerLine * model.questionCountPerGroup;
@@ -70,6 +81,7 @@ const getFullModel = (model, { pageSize, columnNumber }) => {
       id: getElementId(),
       key: randomCode(),
       groupPerLine,
+      groupGap,
       startNumber: model.startNumber + i * numPerLine,
       questionsCount:
         i === total - 1 ? model.questionsCount - numPerLine * i : numPerLine,
@@ -81,8 +93,8 @@ const getFullModel = (model, { pageSize, columnNumber }) => {
         ? Math.min(child.questionsCount, model.questionCountPerGroup)
         : Math.ceil(child.questionsCount / groupPerLine);
     const optionsHeight =
-      14 * optionCount + (optionCount - 1) * model.questionGap + 36;
-    child.h = i ? optionsHeight : optionsHeight + 34;
+      14 * optionCount + (optionCount - 1) * model.questionGap + 20;
+    child.h = i ? optionsHeight : optionsHeight + 24;
     child.minHeight = child.h;
 
     elements[i] = child;

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>
@@ -22,7 +21,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,
+        },
       ];
     },
   },

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;
 };
 

card/views/CardEdit.vue

@@ -111,7 +111,7 @@ export default {
           pageSize: "A3",
           columnNumber: 2,
           columnGap: 20,
-          showForbidArea: true,
+          showForbidArea: false,
           cardDesc: "",
           makeMethod: this.prepareTcPCard.makeMethod,
         },

card/views/CardFreeEdit.vue

@@ -113,7 +113,7 @@ export default {
           pageSize: "A3",
           columnNumber: 2,
           columnGap: 20,
-          showForbidArea: true,
+          showForbidArea: false,
           cardDesc: "",
           makeMethod: this.prepareTcPCard.makeMethod,
         },

src/modules/base/api.js

@@ -180,7 +180,9 @@ export const cardRuleDetail = (id) => {
   return $postParam("/api/admin/basic/card_rule/get_one", { id });
 };
 export const saveCardRule = (datas) => {
-  return $post("/api/admin/basic/card_rule/save", datas);
+  return $post("/api/admin/basic/card_rule/save", datas, {
+    enableEmptyParam: true,
+  });
 };
 export const ableCardRule = ({ id, enable }) => {
   return $post("/api/admin/basic/card_rule/enable", { id, enable });

src/modules/base/components/ModifyCardRule.vue

@@ -297,7 +297,7 @@ export default {
         ],
         objectiveAttention: [
           {
-            required: true,
+            required: false,
             message: "请输入客观题注意事项",
             trigger: "change",
           },
@@ -309,7 +309,7 @@ export default {
         ],
         subjectiveAttention: [
           {
-            required: true,
+            required: false,
             message: "请输入主观题注意事项",
             trigger: "change",
           },

src/modules/card/pages/CardFreeEdit.vue

@@ -112,7 +112,7 @@ export default {
           pageSize: "A3",
           columnNumber: 2,
           columnGap: 20,
-          showForbidArea: true,
+          showForbidArea: false,
           cardDesc: "",
           makeMethod: this.prepareTcPCard.makeMethod,
         },

src/modules/card/pages/CardStandardEdit.vue

@@ -111,7 +111,7 @@ export default {
           pageSize: "A3",
           columnNumber: 2,
           columnGap: 20,
-          showForbidArea: true,
+          showForbidArea: false,
           cardDesc: "",
           makeMethod: this.prepareTcPCard.makeMethod,
         },

src/modules/card/views/CardEdit.vue

@@ -142,11 +142,12 @@ export default {
             pageSize: "A3",
             columnNumber: 2,
             columnGap: 20,
-            showForbidArea: true,
+            showForbidArea: false,
             cardDesc: "",
             makeMethod: this.prepareTcPCard.makeMethod,
           },
         };
+        config.fillNumber = data.examNumberDigit;
         config.aOrB = false; // 默认关闭A/B卷型，2023-01-31改
         config.requiredFields = JSON.parse(config.requiredFields);
         config.extendFields = JSON.parse(config.extendFields);
@@ -167,7 +168,7 @@ export default {
           pageSize: "A3",
           columnNumber: 2,
           columnGap: 20,
-          showForbidArea: true,
+          showForbidArea: false,
           cardDesc: "",
           requiredFields,
           extendFields: JSON.parse(extendFields),

src/modules/card/views/CardRulePreview.vue

@@ -51,7 +51,7 @@ export default {
           pageSize: "A3",
           columnNumber: 2,
           columnGap: 20,
-          showForbidArea: true,
+          showForbidArea: false,
           cardDesc: "",
         },
       };

src/plugins/axios.js

@@ -276,7 +276,7 @@ const $postParam = (url, datas, config = {}) => {
  */
 const $post = (url, datas, config = {}) => {
   let sqDatas = {};
-  if (datas.constructor === Object) {
+  if (datas.constructor === Object && !config["enableEmptyParam"]) {
     sqDatas = mdData(datas);
   } else {
     sqDatas = datas;