bugfix

card/assets/styles/card-preview.scss

@@ -140,6 +140,12 @@
       }
     }
   }
+
+  &-less {
+    .page-number-rect {
+      display: none;
+    }
+  }
 }
 
 // 分栏间距，默认20px

card/assets/styles/card-temp.css

@@ -1,1257 +1,1227 @@
-.card-preview {
-  padding: 10px 0;
-  background-color: #f0f0f0;
-  color: #000;
-}
-.card-preview .page-box {
-  margin: 10px auto;
-  -webkit-box-shadow: 0 0 4px #ddd;
-  box-shadow: 0 0 4px #ddd;
-}
-
-.card-print {
-  padding: 0;
-}
-.card-print .page-box {
-  margin: 0 auto;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  page-break-after: always;
-}
-.card-print .elem-fill-question::before {
-  display: none;
-}
-
-.page-box {
-  position: relative;
-  background: #fff;
-  margin: 0 auto;
-  font-weight: normal;
-}
-.page-box .page-main {
-  height: 100%;
-  position: relative;
-  white-space: nowrap;
-  margin: 0 -10px;
-}
-.page-box .page-main-2 .page-column {
-  width: 50%;
-}
-.page-box .page-main-3 .page-column {
-  width: 33.33%;
-}
-.page-box .page-main-4 .page-column {
-  width: 25%;
-}
-.page-box-A3 {
-  width: 1586px;
-  height: 1122px;
-}
-.page-box-A3 .page-main-inner {
-  padding: 60px 80px 86px;
-}
-.page-box-A3 .page-main-1 .page-column-forbid-area::before {
-  width: 2000px;
-  -webkit-transform: rotate(34.326deg);
-  transform: rotate(34.326deg);
-}
-.page-box-A3 .page-main-1 .page-column-forbid-area::after {
-  width: 2000px;
-  -webkit-transform: rotate(-34.326deg);
-  transform: rotate(-34.326deg);
-}
-.page-box-A3 .page-main-2 .page-column-forbid-area::before {
-  -webkit-transform: rotate(54.216deg);
-  transform: rotate(54.216deg);
-}
-.page-box-A3 .page-main-2 .page-column-forbid-area::after {
-  -webkit-transform: rotate(-54.216deg);
-  transform: rotate(-54.216deg);
-}
-.page-box-A3 .page-main-3 .page-column-forbid-area::before {
-  -webkit-transform: rotate(64.6555deg);
-  transform: rotate(64.6555deg);
-}
-.page-box-A3 .page-main-3 .page-column-forbid-area::after {
-  -webkit-transform: rotate(-64.6555deg);
-  transform: rotate(-64.6555deg);
-}
-.page-box-A3 .page-main-4 .page-column-forbid-area::before {
-  -webkit-transform: rotate(70.3109deg);
-  transform: rotate(70.3109deg);
-}
-.page-box-A3 .page-main-4 .page-column-forbid-area::after {
-  -webkit-transform: rotate(-70.3109deg);
-  transform: rotate(-70.3109deg);
-}
-.page-box-A4 {
-  width: 793px;
-  height: 1122px;
-}
-.page-box-A4 .page-main-inner {
-  padding: 60px 45px 86px;
-}
-.page-box-A4 .page-main-1 .page-column-forbid-area::before {
-  -webkit-transform: rotate(54.216deg);
-  transform: rotate(54.216deg);
-}
-.page-box-A4 .page-main-1 .page-column-forbid-area::after {
-  -webkit-transform: rotate(-54.216deg);
-  transform: rotate(-54.216deg);
-}
-.page-box-A4 .page-main-2 .page-column-forbid-area::before {
-  -webkit-transform: rotate(70.5109deg);
-  transform: rotate(70.5109deg);
-}
-.page-box-A4 .page-main-2 .page-column-forbid-area::after {
-  -webkit-transform: rotate(-70.5109deg);
-  transform: rotate(-70.5109deg);
-}
-
-.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 {
-  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;
-}
-.page-column-forbid-area {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 1;
-  border: 1px solid #333;
-  overflow: hidden;
-}
-.page-column-forbid-area::before {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 1200px;
-  border-bottom: 1px solid #acacac;
-  top: 0;
-  left: 0;
-  -webkit-transform: rotate(54.216deg);
-  transform: rotate(54.216deg);
-  -webkit-transform-origin: left;
-  transform-origin: left;
-  z-index: 1;
-}
-.page-column-forbid-area::after {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 1200px;
-  border-bottom: 1px solid #acacac;
-  bottom: 0;
-  left: 0;
-  -webkit-transform: rotate(-54.216deg);
-  transform: rotate(-54.216deg);
-  -webkit-transform-origin: left;
-  transform-origin: left;
-  z-index: 1;
-}
-.page-column-forbid-area > 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;
-}
-.page-column-main {
-  position: relative;
-  height: 100%;
-}
-.page-column-body {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 9;
-}
-.page-column-element .element-item {
-  position: relative;
-}
-.page-column-element .element-item-width {
-  width: 100% !important;
-}
-.page-column-element .element-item::before {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  z-index: 2;
-  border: 1px solid #333;
-  border-top: 0;
-}
-.page-column-element .element-item > div {
-  z-index: 9;
-  position: relative;
-}
-.page-column-element .element-item-card-head::before {
-  border: 0;
-}
-.page-column-element .element-item-topic-head::before {
-  border: 0;
-}
-.page-column-element .element-item-fill-question::before,
-.page-column-element .element-item-fill-line::before {
-  border-bottom: 0;
-}
-.page-column-element .element-item-explain::before {
-  border-bottom-color: transparent;
-}
-.page-column-element .element-item-type-last::before {
-  border-bottom: 1px solid #333;
-}
-.page-column-element:last-child .element-item::before {
-  border-bottom: 1px solid #333;
-}
-.page-column-element:last-child
-  .element-item-card-head.element-item-type-pre::before {
-  border-bottom: none;
-}
-
-.page-locators {
-  position: absolute;
-  top: 60px;
-  left: 80px;
-  right: 80px;
-  bottom: 86px;
-  z-index: 8;
-}
-
-.page-locator-group {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 24px;
-}
-.page-locator-group:first-child {
-  left: 0;
-}
-.page-locator-group:nth-of-type(2) {
-  left: 50%;
-  margin-left: -12px;
-}
-.page-locator-group:last-child {
-  left: auto;
-  right: 96px;
-}
-.page-locator-group li {
-  position: absolute;
-  width: 24px;
-  border-bottom: 16px solid #000;
-  z-index: 99;
-}
-.page-locator-group li:first-child {
-  top: -20px;
-}
-.page-locator-group li:last-child {
-  bottom: -46px;
-}
-
-.page-box-1 .page-locator-group:first-child {
-  left: -30px;
-}
-
-.page-number {
-  position: absolute;
-  bottom: 40px;
-}
-.page-number-rect {
-  left: 152px;
-}
-.page-number-rect-list {
-  font-size: 0;
-}
-.page-number-rect-list li {
-  display: inline-block;
-  vertical-align: top;
-  font-size: 14px;
-  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: 16px solid #000;
-}
-.page-number-text {
-  right: 25%;
-}
-.page-number-text-cont {
-  height: 16px;
-  line-height: 16px;
-}
-
-.elem-title {
-  padding: 10px;
-  font-size: 14px;
-  color: black;
-  line-height: 1;
-  white-space: normal;
-}
-.elem-body {
-  padding: 10px;
-}
-
-.grid-container {
-  margin-left: -10px;
-  margin-right: -10px;
-}
-
-.grid-row {
-  display: table;
-  width: 100%;
-  border-spacing: 10px 0;
-  border-collapse: separate;
-}
-.grid-row:nth-of-type(2) {
-  margin-top: 10px;
-}
-.grid-row .grid-col {
-  display: table-cell;
-  width: 50%;
-  vertical-align: top;
-  border: 1px solid #333;
-}
-.grid-row .grid-col-dash {
-  border-style: dashed;
-  vertical-align: middle;
-}
-
-.card-head-top {
-  text-align: center;
-  color: #000;
-}
-.card-head-title {
-  font-size: 24px;
-  font-weight: bold;
-  overflow: hidden;
-}
-.card-head-title > h1 {
-  line-height: 33px;
-  white-space: nowrap;
-  letter-spacing: -1px;
-}
-.card-head-subtitle {
-  height: 44px;
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
-    "Microsoft YaHei", Arial, sans-serif;
-  font-size: 14px;
-  overflow: hidden;
-  white-space: normal;
-  margin-bottom: 10px;
-}
-.card-head-subtitle > p {
-  padding: 0 10px;
-  line-height: 22px;
-  white-space: pre;
-}
-.card-head-body {
-  font-weight: normal;
-}
-.card-head-body .el-col {
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-.card-head-body-spin {
-  padding: 5px 12px;
-  white-space: normal;
-  word-break: break-all;
-}
-.card-head-body .stdinfo-item {
-  height: 30px;
-  line-height: 30px;
-  position: relative;
-  overflow: hidden;
-}
-.card-head-body .stdinfo-item::after {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 100%;
-  border-bottom: 1px solid #333;
-  bottom: 6px;
-  left: 0;
-  z-index: 1;
-}
-.card-head-body .stdinfo-item > span {
-  z-index: 2;
-  display: block;
-  position: relative;
-  font-size: 14px;
-}
-.card-head-body .stdinfo-item > span:first-child {
-  float: left;
-  background-color: #fff;
-  text-align: justify;
-}
-.card-head-body .stdinfo-item > span:first-child::after {
-  content: "";
-  display: inline-block;
-  width: 100%;
-  height: 0;
-  line-height: 0;
-}
-.card-head-body .stdinfo-item > span:nth-of-type(2) {
-  float: left;
-  width: 20px;
-  background-color: #fff;
-}
-.card-head-body .stdinfo-item > span:last-child {
-  margin-left: 80px;
-  height: 100%;
-}
-.card-head-body .head-stdno {
-  height: 100%;
-  padding: 0;
-}
-.card-head-body .head-stdno .stdno-empty {
-  font-weight: bold;
-  letter-spacing: 3px;
-  text-align: center;
-}
-.card-head-body .head-stdno .stdno-fill {
-  min-height: 284px;
-  height: 100%;
-  position: relative;
-}
-.card-head-body .head-stdno .stdno-fill-rect {
-  font-size: 0;
-  height: 27px;
-  border-bottom: 1px solid #333;
-}
-.card-head-body .head-stdno .stdno-fill-number {
-  display: inline-block;
-  vertical-align: top;
-  width: 7.692%;
-  height: 100%;
-}
-.card-head-body .head-stdno .stdno-fill-number:not(:last-child) {
-  border-right: 1px solid #333;
-}
-.card-head-body .head-stdno .stdno-fill-head {
-  position: absolute;
-  width: 100%;
-  height: 51px;
-  top: 0;
-  left: 0;
-  z-index: 9;
-}
-.card-head-body .head-stdno .stdno-fill-head > h5 {
-  border-bottom: 1px solid #333;
-  line-height: 24px;
-  font-size: 16px;
-  font-weight: bold;
-  text-align: center;
-}
-.card-head-body .head-stdno .stdno-fill-body {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  padding-top: 51px;
-  display: table;
-  width: 100%;
-}
-.card-head-body .head-stdno .stdno-fill-list {
-  display: table-cell;
-  width: 7.692%;
-  padding: 1px 0;
-}
-.card-head-body .head-stdno .stdno-fill-option {
-  margin: 8px auto;
-  width: 20px;
-  height: 14px;
-  font-size: 12px;
-  line-height: 1;
-  text-align: center;
-  color: #000;
-  border: 1px solid #000;
-  font-family: "Times New Roman", Arial, sans-serif;
-}
-.card-head-body .head-stdno .stdno-fill-option > i {
-  display: inline-block;
-  -webkit-transform: scale(0.67, 0.67);
-  transform: scale(0.67, 0.67);
-}
-.card-head-body .head-stdno .stdno-auto-barcode {
-  height: 70px;
-  text-align: center;
-}
-.card-head-body .head-stdno .stdno-auto-barcode > img {
-  display: block;
-  height: 50px;
-  width: 300px;
-  margin: 0 auto;
-}
-.card-head-body .head-stdno .stdno-auto-barcode > p {
-  line-height: 20px;
-}
-.card-head-body .head-notice > h4 {
-  font-weight: normal;
-  margin-bottom: 8px;
-}
-.card-head-body .head-notice-cont {
-  line-height: 1.5;
-  font-size: 12px;
-  margin-bottom: 5px;
-}
-.card-head-body .head-notice-cont > span {
-  display: block;
-}
-.card-head-body .head-notice-cont > span:first-child {
-  width: 20px;
-  white-space: nowrap;
-  float: left;
-}
-.card-head-body .head-notice-cont > span:last-child {
-  margin-left: 20px;
-}
-.card-head-body .head-notice-exam-number-fill span {
-  display: inline;
-}
-.card-head-body .head-notice-exam-number-fill span:first-child {
-  float: none;
-}
-.card-head-body .head-notice-exam-number-fill span:last-child {
-  margin: 0;
-}
-.card-head-body .head-dynamic {
-  padding: 0;
-  font-size: 12px;
-  border-spacing: 0;
-  border-collapse: collapse;
-}
-.card-head-body .head-dynamic-part:not(:last-child) {
-  border-bottom: 1px solid #000;
-}
-.card-head-body .head-dynamic-write {
-  padding: 5px 12px;
-}
-.card-head-body .head-dynamic-write .stdinfo-item {
-  margin-bottom: 0;
-}
-.card-head-body .head-dynamic-write > p {
-  line-height: 18px;
-}
-.card-head-body .head-dynamic-missfill {
-  display: table;
-  width: 100%;
-}
-.card-head-body .head-dynamic-miss {
-  padding: 10px;
-  display: table-cell;
-  vertical-align: middle;
-}
-.card-head-body .head-dynamic-miss:nth-of-type(2) {
-  border-left: 1px solid #000;
-}
-.card-head-body .head-dynamic-miss span {
-  display: block;
-}
-.card-head-body .head-dynamic-miss .dynamic-miss-title {
-  width: 54px;
-  float: left;
-}
-.card-head-body .head-dynamic-miss .dynamic-miss-body {
-  margin-left: 54px;
-  text-align: center;
-}
-.card-head-body .head-dynamic-miss .head-dynamic-rect {
-  margin: auto;
-  vertical-align: middle;
-}
-.card-head-body .head-dynamic-fill {
-  padding: 10px;
-}
-.card-head-body .head-dynamic-fill p {
-  display: inline-block;
-  vertical-align: middle;
-  line-height: 18px;
-  word-wrap: normal;
-}
-.card-head-body .head-dynamic-fill p:first-child {
-  margin-right: 20px;
-}
-.card-head-body .head-dynamic-fill p > span,
-.card-head-body .head-dynamic-fill p > i {
-  display: inline-block;
-  vertical-align: middle;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.card-head-body .head-dynamic-fill p:first-child i {
-  width: 28px;
-  height: 14px;
-  background-color: #000;
-}
-.card-head-body .head-dynamic-fill p: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;
-}
-.card-head-body .head-dynamic-fill p:last-child > i:last-child {
-  margin-right: 0;
-}
-.card-head-body .head-dynamic-fill p:last-child > i:nth-of-type(3)::before {
-  content: "";
-  display: inline-block;
-  vertical-align: top;
-  margin-left: -5px;
-  height: 100%;
-  width: 5px;
-  background-color: #000;
-}
-.card-head-body .head-dynamic-fill p:last-child > i:nth-of-type(4)::before {
-  content: "";
-  display: inline-block;
-  margin-top: 1px;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background-color: #000;
-}
-.card-head-body .head-dynamic-rect {
-  display: inline-block;
-  width: 30px;
-  height: 14px;
-  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;
-}
-.card-head-body .head-dynamic-rect > i {
-  display: inline-block;
-  -webkit-transform: scale(0.67, 0.67);
-  transform: scale(0.67, 0.67);
-}
-.card-head-body .head-dynamic-aorb {
-  display: table;
-  width: 100%;
-}
-.card-head-body .head-dynamic-aorb .dynamic-aorb-item {
-  display: table-cell;
-  vertical-align: middle;
-  text-align: center;
-}
-.card-head-body .head-dynamic-aorb .dynamic-aorb-item:not(:last-child) {
-  border-right: 1px solid #333;
-}
-.card-head-body .head-dynamic-aorb-fill .dynamic-aorb-item:first-child {
-  border: none;
-}
-.card-head-body .head-dynamic-aorb .dynamic-aorb-title {
-  width: 83px;
-}
-.card-head-body .head-dynamic-aorb .dynamic-aorb-info {
-  width: 50px;
-  font-size: 16px;
-  position: relative;
-  overflow: hidden;
-}
-.card-head-body .head-dynamic-aorb .dynamic-aorb-info .dynamic-aorb-content {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 100%;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
-  z-index: auto;
-}
-.card-head-body .head-dynamic-aorb .dynamic-aorb-barcode img {
-  display: block;
-  position: relative;
-  margin: 0 auto;
-  width: 200px;
-  height: 26px;
-  padding: 7px 0;
-}
-.card-head-body .head-dynamic-aorb .dynamic-aorb-rects {
-  padding: 16px 10px;
-}
-.card-head-part {
-  border: 1px solid #333;
-}
-.card-head-part:not(:last-child) {
-  margin-bottom: 10px;
-}
-.card-head-normal .head-dynamic-1 .head-dynamic-part {
-  height: 100%;
-}
-.card-head-narrow .head-stdno {
-  height: 138px;
-}
-.card-head-narrow .head-stdno .stdno-auto {
-  position: relative;
-  top: 50%;
-  margin-top: -40px;
-}
-.card-head-handle.card-head-narrow .head-stdno {
-  height: 286px;
-}
-
-.card-head-body-auto-resize {
-  margin-left: -5px;
-  margin-right: -5px;
-  overflow: hidden;
-}
-.card-head-body-auto-resize.col-item-auto-height .card-head-body-spin {
-  height: auto;
-}
-.card-head-body-auto-resize .head-dynamic-2 .head-dynamic-part {
-  height: auto;
-}
-.card-head-body-auto-resize .rect-col {
-  padding: 5px;
-}
-.card-head-body-auto-resize .rect-col:first-child {
-  float: left;
-  width: 289px;
-}
-.card-head-body-auto-resize .rect-col:last-child {
-  float: right;
-  width: 424px;
-}
-.card-head-body-auto-resize .rect-col-item {
-  border: 1px solid #333;
-}
-.card-head-body-auto-resize .rect-col-item:nth-of-type(2) {
-  margin-top: 10px;
-}
-.card-head-body-auto-resize .rect-col-item-none {
-  border: none;
-  margin: 0 !important;
-}
-
-.elem-topic-head {
-  text-align: center;
-}
-.elem-topic-head .elem-body {
-  padding: 0;
-  border: 1px solid #333;
-}
-.elem-topic-head-pad {
-  padding-top: 10px;
-}
-.elem-topic-head h3 {
-  font-size: 16px;
-  height: 29px;
-  line-height: 28px;
-  border-bottom: 1px dotted #333;
-  font-weight: normal;
-}
-.elem-topic-head p {
-  font-size: 12px;
-  height: 29px;
-  line-height: 29px;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.elem-line-horizontal {
-  height: 100%;
-  line-height: 30px;
-}
-.elem-line-horizontal .line-body {
-  display: inline-block;
-  vertical-align: middle;
-  width: 100%;
-  border-bottom: 1px solid #000;
-}
-
-.elem-line-vertical {
-  height: 100%;
-  text-align: center;
-}
-.elem-line-vertical .line-body {
-  display: inline-block;
-  vertical-align: top;
-  height: 100%;
-  border-left: 1px solid #000;
-}
-
-.elem-lines .line-item {
-  display: inline-block;
-  vertical-align: top;
-}
-
-.elem-rect .rect-body {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-
-.elem-text .text-body {
-  padding: 5px;
-  line-height: 1.4;
-}
-.elem-text .text-body span {
-  white-space: pre-wrap;
-  word-wrap: normal;
-  word-break: break-all;
-}
-.elem-text .text-body span.cont-variate {
-  color: #a0a0a0;
-  margin: 0 2px;
-}
-
-.elem-barcode {
-  height: 100%;
-  border-color: transparent;
-  border-width: 1pt;
-  position: relative;
-}
-.elem-barcode > img {
-  max-height: 100%;
-  max-width: 100%;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-}
-
-.elem-image {
-  height: 100%;
-  border-color: transparent;
-  border-width: 1pt;
-  position: relative;
-}
-.elem-image > p {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  display: table;
-  text-align: center;
-  color: #b0b0b0;
-  font-size: 30pt;
-}
-.elem-image > p i {
-  display: table-cell;
-  vertical-align: middle;
-}
-.elem-image > img {
-  max-height: 100%;
-  max-width: 100%;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: auto;
-}
-
-.elem-grids > table {
-  table-layout: fixed;
-  border-spacing: 0;
-  border-collapse: collapse;
-}
-.elem-grids > table td {
-  border: 1px solid #333;
-}
-.elem-grids-halving > table {
-  table-layout: auto;
-  width: 100%;
-}
-
-.elem-fill-question {
-  white-space: normal;
-}
-.elem-fill-question::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;
-}
-.elem-fill-question-simple::before {
-  content: "单选";
-  background-color: #65d5ad;
-}
-.elem-fill-question-multiply::before {
-  content: "多选";
-  background-color: #617bea;
-}
-.elem-fill-question-boolean::before {
-  content: "判断";
-  background-color: #ffa952;
-}
-.elem-fill-question .elem-body {
-  padding: 18px 0 18px 16px;
-}
-.elem-fill-question .group-item {
-  font-family: "Times New Roman", Arial, sans-serif;
-  display: inline-block;
-  vertical-align: top;
-  font-size: 0;
-}
-.elem-fill-question .question-item {
-  font-size: 0;
-}
-.elem-fill-question .option-item {
-  display: inline-block;
-  vertical-align: middle;
-  padding: 0;
-  width: 18px;
-  height: 14px;
-  text-align: center;
-  font-size: 12px;
-  line-height: 1;
-  border: 1px solid #000;
-  color: #000;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.elem-fill-question .option-item > i {
-  display: inline-block;
-  -webkit-transform: scale(0.67, 0.67);
-  transform: scale(0.67, 0.67);
-}
-.elem-fill-question .option-item:first-child {
-  text-align: right;
-  border-color: transparent;
-  font-size: 12px;
-  color: #000;
-}
-.elem-fill-question .option-item:first-child > i {
-  -webkit-transform: scale(1, 1);
-  transform: scale(1, 1);
-}
-.elem-fill-question .option-item:last-child {
-  margin-right: 0 !important;
-}
-.elem-fill-question-vertical .question-item {
-  display: inline-block;
-  vertical-align: top;
-}
-.elem-fill-question-vertical .question-item:last-child {
-  margin-right: 0 !important;
-}
-.elem-fill-question-vertical .option-item {
-  display: block;
-}
-.elem-fill-question-vertical .option-item:first-child {
-  padding: 0;
-  text-align: center;
-}
-.elem-fill-question-vertical .option-item:last-child {
-  margin-bottom: 0 !important;
-}
-
-.elem-fill-area .option-item {
-  display: inline-block;
-  vertical-align: middle;
-  width: 30px;
-  height: 16px;
-  border: 1px solid #000;
-}
-.elem-fill-area .option-item:last-child {
-  margin-right: 0 !important;
-}
-.elem-fill-area-vertical .option-item {
-  display: block;
-}
-.elem-fill-area-vertical .option-item:last-child {
-  margin-bottom: 0 !important;
-}
-
-.elem-fill-line {
-  white-space: normal;
-}
-.elem-fill-line .elem-body {
-  padding: 0 15px 0 10px;
-  font-size: 0;
-}
-.elem-fill-line .elem-fill-quesiton {
-  display: inline-block;
-  vertical-align: top;
-  position: relative;
-  padding: 0 1px;
-  font-size: 12px;
-}
-.elem-fill-line .elem-fill-quesiton li.elem-fill-line {
-  height: 40px;
-  position: relative;
-  margin: 0 10px 0 20px;
-  z-index: 8;
-}
-.elem-fill-line .elem-fill-quesiton li.elem-fill-line::after {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 100%;
-  border-bottom: 1px solid #000;
-  bottom: 8px;
-}
-.elem-fill-line .elem-fill-quesiton li.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;
-}
-.elem-fill-line .elem-fill-quesiton li.elem-fill-no span {
-  display: block;
-  position: relative;
-  padding-bottom: 5px;
-  padding-right: 3px;
-  -webkit-transform: translateY(-100%);
-  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%);
-  width: 10px;
-  padding-bottom: 4px;
-  background-color: #fff;
-  text-align: center;
-  border: none;
-}
-
-.elem-explain .elem-title {
-  padding-bottom: 0;
-}
-.elem-explain .elem-body {
-  min-height: 60px;
-  position: relative;
-}
-.elem-explain .elem-explain-no {
-  position: absolute;
-  left: 20px;
-  top: 10px;
-  font-size: 12px;
-  z-index: 9;
-}
-.elem-explain .elem-explain-elements {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 8;
-}
-.elem-explain .elem-explain-element .explain-element-body {
-  position: absolute;
-}
-
-.elem-composition .elem-title {
-  padding-bottom: 0;
-}
-.elem-composition .elem-body {
-  min-height: 60px;
-  position: relative;
-}
-.elem-composition-elements {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 8;
-}
-.elem-composition .elem-composition-element .composition-element-body {
-  position: absolute;
-  overflow: hidden;
-}
-
-.elem-fill-number {
-  border: 1px solid #000;
-}
-.elem-fill-number .fill-number-rect {
-  font-size: 0;
-  height: 27px;
-  border-bottom: 1px solid #333;
-}
-.elem-fill-number .fill-number-number {
-  display: inline-block;
-  vertical-align: top;
-  width: 7.692%;
-  height: 100%;
-}
-.elem-fill-number .fill-number-number:not(:last-child) {
-  border-right: 1px solid #333;
-}
-.elem-fill-number .fill-number-head {
-  height: 51px;
-}
-.elem-fill-number .fill-number-head > h5 {
-  border-bottom: 1px solid #333;
-  line-height: 24px;
-  font-size: 16px;
-  font-weight: bold;
-  text-align: center;
-}
-.elem-fill-number .fill-number-body {
-  display: table;
-  width: 100%;
-}
-.elem-fill-number .fill-number-list {
-  display: table-cell;
-  width: 7.692%;
-  padding: 1px 0;
-}
-.elem-fill-number .fill-number-option {
-  margin: 8px auto;
-  width: 20px;
-  height: 14px;
-  font-size: 12px;
-  line-height: 1;
-  text-align: center;
-  color: #000;
-  border: 1px solid #000;
-  font-family: "Times New Roman", Arial, sans-serif;
-}
-.elem-fill-number .fill-number-option > i {
-  display: inline-block;
-  -webkit-transform: scale(0.67, 0.67);
-  transform: scale(0.67, 0.67);
-}
-
-.elem-fill-field {
-  white-space: normal;
-  overflow: hidden;
-}
-
-.fill-field-item {
-  display: inline-block;
-  padding: 0 10px;
-  width: 100%;
-}
-.fill-field-content {
-  height: 30px;
-  line-height: 26px;
-  overflow: hidden;
-  position: relative;
-}
-.fill-field-content::after {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 100%;
-  border-bottom: 1px solid #333;
-  bottom: 2px;
-  left: 0;
-  z-index: 1;
-}
-.fill-field-content > span {
-  z-index: 2;
-  display: inline-block;
-  position: relative;
-  font-size: 14px;
-  vertical-align: top;
-}
-.fill-field-content > span:first-child {
-  background-color: #fff;
-  text-align: justify;
-}
-.fill-field-content > span:first-child::after {
-  content: "";
-  display: inline-block;
-  width: 100%;
-  height: 0;
-  line-height: 0;
-}
-.fill-field-content > span:nth-of-type(2) {
-  width: 10px;
-  background-color: #fff;
-}
-
-.elem-fill-pane {
-  font-size: 0;
-  white-space: normal;
-  overflow: hidden;
-}
-.elem-fill-pane .fill-pane-item {
-  display: inline-block;
-  vertical-align: top;
-  font-size: 14px;
-}
-.elem-fill-pane .fill-pane-cont {
-  border: 1px solid #000;
-}
-
-.card-free-preview:not(.card-print) {
-  padding: 10px 0;
-  background-color: #f0f0f0;
-}
-.card-free-preview:not(.card-print) .page-box {
-  margin: 10px auto;
-  -webkit-box-shadow: 0 0 4px #ddd;
-  box-shadow: 0 0 4px #ddd;
-}
-.card-free-preview .page-column-element .element-item {
-  position: absolute;
-}
-.card-free-preview .page-column-element .element-item::before {
-  display: none;
-}
+.card-preview {
+  padding: 10px 0;
+  background-color: #f0f0f0;
+  color: #000;
+}
+.card-preview .page-box {
+  margin: 10px auto;
+  -webkit-box-shadow: 0 0 4px #ddd;
+  box-shadow: 0 0 4px #ddd;
+}
+.card-print {
+  padding: 0;
+}
+.card-print .page-box {
+  margin: 0 auto;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  page-break-after: always;
+}
+.card-print .elem-fill-question-first::before {
+  display: none;
+}
+.page-box {
+  position: relative;
+  background: #fff;
+  margin: 0 auto;
+  font-weight: normal;
+}
+.page-box .page-main {
+  height: 100%;
+  position: relative;
+  white-space: nowrap;
+  margin: 0 -10px;
+}
+.page-box .page-main-2 .page-column {
+  width: 50%;
+}
+.page-box .page-main-3 .page-column {
+  width: 33.33%;
+}
+.page-box .page-main-4 .page-column {
+  width: 25%;
+}
+.page-box-A3 {
+  width: 1586px;
+  height: 1122px;
+}
+.page-box-A3 .page-main-inner {
+  padding: 60px 80px 86px;
+}
+.page-box-A3 .page-main-1 .page-column-forbid-area::before {
+  width: 2000px;
+  -webkit-transform: rotate(34.326deg);
+  transform: rotate(34.326deg);
+}
+.page-box-A3 .page-main-1 .page-column-forbid-area::after {
+  width: 2000px;
+  -webkit-transform: rotate(-34.326deg);
+  transform: rotate(-34.326deg);
+}
+.page-box-A3 .page-main-2 .page-column-forbid-area::before {
+  -webkit-transform: rotate(54.216deg);
+  transform: rotate(54.216deg);
+}
+.page-box-A3 .page-main-2 .page-column-forbid-area::after {
+  -webkit-transform: rotate(-54.216deg);
+  transform: rotate(-54.216deg);
+}
+.page-box-A3 .page-main-3 .page-column-forbid-area::before {
+  -webkit-transform: rotate(64.6555deg);
+  transform: rotate(64.6555deg);
+}
+.page-box-A3 .page-main-3 .page-column-forbid-area::after {
+  -webkit-transform: rotate(-64.6555deg);
+  transform: rotate(-64.6555deg);
+}
+.page-box-A3 .page-main-4 .page-column-forbid-area::before {
+  -webkit-transform: rotate(70.3109deg);
+  transform: rotate(70.3109deg);
+}
+.page-box-A3 .page-main-4 .page-column-forbid-area::after {
+  -webkit-transform: rotate(-70.3109deg);
+  transform: rotate(-70.3109deg);
+}
+.page-box-A4 {
+  width: 793px;
+  height: 1122px;
+}
+.page-box-A4 .page-main-inner {
+  padding: 60px 45px 86px;
+}
+.page-box-A4 .page-main-1 .page-column-forbid-area::before {
+  -webkit-transform: rotate(54.216deg);
+  transform: rotate(54.216deg);
+}
+.page-box-A4 .page-main-1 .page-column-forbid-area::after {
+  -webkit-transform: rotate(-54.216deg);
+  transform: rotate(-54.216deg);
+}
+.page-box-A4 .page-main-2 .page-column-forbid-area::before {
+  -webkit-transform: rotate(70.5109deg);
+  transform: rotate(70.5109deg);
+}
+.page-box-A4 .page-main-2 .page-column-forbid-area::after {
+  -webkit-transform: rotate(-70.5109deg);
+  transform: rotate(-70.5109deg);
+}
+.page-box-less .page-number-rect {
+  display: none;
+}
+.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 {
+  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;
+}
+.page-column-forbid-area {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+  border: 1px solid #333;
+  overflow: hidden;
+}
+.page-column-forbid-area::before {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 1200px;
+  border-bottom: 1px solid #acacac;
+  top: 0;
+  left: 0;
+  -webkit-transform: rotate(54.216deg);
+  transform: rotate(54.216deg);
+  -webkit-transform-origin: left;
+  transform-origin: left;
+  z-index: 1;
+}
+.page-column-forbid-area::after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 1200px;
+  border-bottom: 1px solid #acacac;
+  bottom: 0;
+  left: 0;
+  -webkit-transform: rotate(-54.216deg);
+  transform: rotate(-54.216deg);
+  -webkit-transform-origin: left;
+  transform-origin: left;
+  z-index: 1;
+}
+.page-column-forbid-area > 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;
+}
+.page-column-main {
+  position: relative;
+  height: 100%;
+}
+.page-column-body {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9;
+}
+.page-column-element .element-item {
+  position: relative;
+}
+.page-column-element .element-item-width {
+  width: 100% !important;
+}
+.page-column-element .element-item::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  z-index: 2;
+  border: 1px solid #333;
+  border-top: 0;
+}
+.page-column-element .element-item > div {
+  z-index: 9;
+  position: relative;
+}
+.page-column-element .element-item-card-head::before {
+  border: 0;
+}
+.page-column-element .element-item-topic-head::before {
+  border: 0;
+}
+.page-column-element .element-item-fill-question::before,
+.page-column-element .element-item-fill-line::before {
+  border-bottom: 0;
+}
+.page-column-element .element-item-explain::before {
+  border-bottom-color: transparent;
+}
+.page-column-element .element-item-type-last::before {
+  border-bottom: 1px solid #333;
+}
+.page-column-element:last-child .element-item::before {
+  border-bottom: 1px solid #333;
+}
+.page-column-element:last-child
+  .element-item-card-head.element-item-type-pre::before {
+  border-bottom: 0;
+}
+.page-locators {
+  position: absolute;
+  top: 60px;
+  left: 80px;
+  right: 80px;
+  bottom: 86px;
+  z-index: 8;
+}
+.page-locator-group {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 24px;
+}
+.page-locator-group:first-child {
+  left: 0;
+}
+.page-locator-group:nth-of-type(2) {
+  left: 50%;
+  margin-left: -12px;
+}
+.page-locator-group:last-child {
+  left: auto;
+  right: 96px;
+}
+.page-locator-group li {
+  position: absolute;
+  width: 24px;
+  border-bottom: 16px solid #000;
+  z-index: 99;
+}
+.page-locator-group li:first-child {
+  top: -20px;
+}
+.page-locator-group li:last-child {
+  bottom: -46px;
+}
+.page-box-1 .page-locator-group:first-child {
+  left: -30px;
+}
+.page-number {
+  position: absolute;
+  bottom: 40px;
+}
+.page-number-rect {
+  left: 152px;
+}
+.page-number-rect-list {
+  font-size: 0;
+}
+.page-number-rect-list li {
+  display: inline-block;
+  vertical-align: top;
+  font-size: 14px;
+  width: 24px;
+  height: 16px;
+  border: 1px solid #000;
+  margin-right: 10px;
+}
+.page-number-rect-list li.rect-li-act {
+  height: 0;
+  border: 0;
+  border-bottom: 16px solid #000;
+}
+.page-number-text {
+  right: 25%;
+}
+.page-number-text-cont {
+  height: 16px;
+  line-height: 16px;
+}
+.elem-title {
+  padding: 10px;
+  font-size: 14px;
+  color: black;
+  line-height: 1;
+  white-space: normal;
+}
+.elem-body {
+  padding: 10px;
+}
+.grid-container {
+  margin-left: -10px;
+  margin-right: -10px;
+}
+.grid-row {
+  display: table;
+  width: 100%;
+  border-spacing: 10px 0;
+  border-collapse: separate;
+}
+.grid-row:nth-of-type(2) {
+  margin-top: 10px;
+}
+.grid-row .grid-col {
+  display: table-cell;
+  width: 50%;
+  vertical-align: top;
+  border: 1px solid #333;
+}
+.grid-row .grid-col-dash {
+  border-style: dashed;
+  vertical-align: middle;
+}
+.card-head-top {
+  text-align: center;
+  color: #000;
+}
+.card-head-title {
+  font-size: 24px;
+  font-weight: bold;
+  overflow: hidden;
+}
+.card-head-title > h1 {
+  line-height: 33px;
+  white-space: nowrap;
+  letter-spacing: -1px;
+}
+.card-head-subtitle {
+  height: 44px;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", Arial, sans-serif;
+  font-size: 14px;
+  overflow: hidden;
+  white-space: normal;
+  margin-bottom: 10px;
+}
+.card-head-subtitle > p {
+  padding: 0 10px;
+  line-height: 22px;
+  white-space: pre;
+}
+.card-head-body {
+  font-weight: normal;
+}
+.card-head-body .el-col {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+.card-head-body-spin {
+  padding: 5px 12px;
+  white-space: normal;
+  word-break: break-all;
+}
+.card-head-body .stdinfo-item {
+  height: 30px;
+  line-height: 30px;
+  position: relative;
+  overflow: hidden;
+}
+.card-head-body .stdinfo-item::after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 100%;
+  border-bottom: 1px solid #333;
+  bottom: 6px;
+  left: 0;
+  z-index: 1;
+}
+.card-head-body .stdinfo-item > span {
+  z-index: 2;
+  display: block;
+  position: relative;
+  font-size: 14px;
+}
+.card-head-body .stdinfo-item > span:first-child {
+  float: left;
+  background-color: #fff;
+  text-align: justify;
+}
+.card-head-body .stdinfo-item > span:first-child::after {
+  content: "";
+  display: inline-block;
+  width: 100%;
+  height: 0;
+  line-height: 0;
+}
+.card-head-body .stdinfo-item > span:nth-of-type(2) {
+  float: left;
+  width: 20px;
+  background-color: #fff;
+}
+.card-head-body .stdinfo-item > span:last-child {
+  margin-left: 80px;
+  height: 100%;
+}
+.card-head-body .head-stdno {
+  height: 100%;
+  padding: 0;
+}
+.card-head-body .head-stdno .stdno-empty {
+  font-weight: bold;
+  letter-spacing: 3px;
+  text-align: center;
+}
+.card-head-body .head-stdno .stdno-fill {
+  min-height: 284px;
+  height: 100%;
+  position: relative;
+}
+.card-head-body .head-stdno .stdno-fill-rect {
+  font-size: 0;
+  height: 27px;
+  border-bottom: 1px solid #333;
+}
+.card-head-body .head-stdno .stdno-fill-number {
+  display: inline-block;
+  vertical-align: top;
+  width: 7.692%;
+  height: 100%;
+}
+.card-head-body .head-stdno .stdno-fill-number:not(:last-child) {
+  border-right: 1px solid #333;
+}
+.card-head-body .head-stdno .stdno-fill-head {
+  position: absolute;
+  width: 100%;
+  height: 51px;
+  top: 0;
+  left: 0;
+  z-index: 9;
+}
+.card-head-body .head-stdno .stdno-fill-head > h5 {
+  border-bottom: 1px solid #333;
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+}
+.card-head-body .head-stdno .stdno-fill-body {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  padding-top: 51px;
+  display: table;
+  width: 100%;
+}
+.card-head-body .head-stdno .stdno-fill-list {
+  display: table-cell;
+  width: 7.692%;
+  padding: 1px 0;
+}
+.card-head-body .head-stdno .stdno-fill-option {
+  margin: 8px auto;
+  width: 20px;
+  height: 14px;
+  font-size: 12px;
+  line-height: 1;
+  text-align: center;
+  color: #000;
+  border: 1px solid #000;
+  font-family: "Times New Roman", Arial, sans-serif;
+}
+.card-head-body .head-stdno .stdno-fill-option > i {
+  display: inline-block;
+  -webkit-transform: scale(0.67, 0.67);
+  transform: scale(0.67, 0.67);
+}
+.card-head-body .head-stdno .stdno-auto-barcode {
+  height: 70px;
+  text-align: center;
+}
+.card-head-body .head-stdno .stdno-auto-barcode > img {
+  display: block;
+  height: 50px;
+  width: 300px;
+  margin: 0 auto;
+}
+.card-head-body .head-stdno .stdno-auto-barcode > p {
+  line-height: 20px;
+}
+.card-head-body .head-notice > h4 {
+  font-weight: normal;
+  margin-bottom: 8px;
+}
+.card-head-body .head-notice-cont {
+  line-height: 1.5;
+  font-size: 12px;
+  margin-bottom: 5px;
+}
+.card-head-body .head-notice-cont > span {
+  display: block;
+}
+.card-head-body .head-notice-cont > span:first-child {
+  width: 20px;
+  white-space: nowrap;
+  float: left;
+}
+.card-head-body .head-notice-cont > span:last-child {
+  margin-left: 20px;
+}
+.card-head-body .head-notice-exam-number-fill span {
+  display: inline;
+}
+.card-head-body .head-notice-exam-number-fill span:first-child {
+  float: none;
+}
+.card-head-body .head-notice-exam-number-fill span:last-child {
+  margin: 0;
+}
+.card-head-body .head-dynamic {
+  padding: 0;
+  font-size: 12px;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.card-head-body .head-dynamic-part:not(:last-child) {
+  border-bottom: 1px solid #000;
+}
+.card-head-body .head-dynamic-write {
+  padding: 5px 12px;
+}
+.card-head-body .head-dynamic-write .stdinfo-item {
+  margin-bottom: 0;
+}
+.card-head-body .head-dynamic-write > p {
+  line-height: 18px;
+}
+.card-head-body .head-dynamic-missfill {
+  display: table;
+  width: 100%;
+}
+.card-head-body .head-dynamic-miss {
+  padding: 10px;
+  display: table-cell;
+  vertical-align: middle;
+}
+.card-head-body .head-dynamic-miss:nth-of-type(2) {
+  border-left: 1px solid #000;
+}
+.card-head-body .head-dynamic-miss span {
+  display: block;
+}
+.card-head-body .head-dynamic-miss .dynamic-miss-title {
+  width: 54px;
+  float: left;
+}
+.card-head-body .head-dynamic-miss .dynamic-miss-body {
+  margin-left: 54px;
+  text-align: center;
+}
+.card-head-body .head-dynamic-miss .head-dynamic-rect {
+  margin: auto;
+  vertical-align: middle;
+}
+.card-head-body .head-dynamic-fill {
+  padding: 10px;
+}
+.card-head-body .head-dynamic-fill p {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 18px;
+  word-wrap: normal;
+}
+.card-head-body .head-dynamic-fill p:first-child {
+  margin-right: 20px;
+}
+.card-head-body .head-dynamic-fill p > span,
+.card-head-body .head-dynamic-fill p > i {
+  display: inline-block;
+  vertical-align: middle;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.card-head-body .head-dynamic-fill p:first-child i {
+  width: 28px;
+  height: 14px;
+  background-color: #000;
+}
+.card-head-body .head-dynamic-fill p: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;
+}
+.card-head-body .head-dynamic-fill p:last-child > i:last-child {
+  margin-right: 0;
+}
+.card-head-body .head-dynamic-fill p:last-child > i:nth-of-type(3)::before {
+  content: "";
+  display: inline-block;
+  vertical-align: top;
+  margin-left: -5px;
+  height: 100%;
+  width: 5px;
+  background-color: #000;
+}
+.card-head-body .head-dynamic-fill p:last-child > i:nth-of-type(4)::before {
+  content: "";
+  display: inline-block;
+  margin-top: 1px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background-color: #000;
+}
+.card-head-body .head-dynamic-rect {
+  display: inline-block;
+  width: 30px;
+  height: 14px;
+  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;
+}
+.card-head-body .head-dynamic-rect > i {
+  display: inline-block;
+  -webkit-transform: scale(0.67, 0.67);
+  transform: scale(0.67, 0.67);
+}
+.card-head-body .head-dynamic-aorb {
+  display: table;
+  width: 100%;
+}
+.card-head-body .head-dynamic-aorb .dynamic-aorb-item {
+  display: table-cell;
+  vertical-align: middle;
+  text-align: center;
+}
+.card-head-body .head-dynamic-aorb .dynamic-aorb-item:not(:last-child) {
+  border-right: 1px solid #333;
+}
+.card-head-body .head-dynamic-aorb-fill .dynamic-aorb-item:first-child {
+  border: 0;
+}
+.card-head-body .head-dynamic-aorb .dynamic-aorb-title {
+  width: 83px;
+}
+.card-head-body .head-dynamic-aorb .dynamic-aorb-info {
+  width: 50px;
+  font-size: 16px;
+  position: relative;
+  overflow: hidden;
+}
+.card-head-body .head-dynamic-aorb .dynamic-aorb-info .dynamic-aorb-content {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  z-index: auto;
+}
+.card-head-body .head-dynamic-aorb .dynamic-aorb-barcode img {
+  display: block;
+  position: relative;
+  margin: 0 auto;
+  width: 200px;
+  height: 26px;
+  padding: 7px 0;
+}
+.card-head-body .head-dynamic-aorb .dynamic-aorb-rects {
+  padding: 16px 10px;
+}
+.card-head-part {
+  border: 1px solid #333;
+}
+.card-head-part:not(:last-child) {
+  margin-bottom: 10px;
+}
+.card-head-normal .head-dynamic-1 .head-dynamic-part {
+  height: 100%;
+}
+.card-head-narrow .head-stdno {
+  height: 138px;
+}
+.card-head-narrow .head-stdno .stdno-auto {
+  position: relative;
+  top: 50%;
+  margin-top: -40px;
+}
+.card-head-handle.card-head-narrow .head-stdno {
+  height: 286px;
+}
+.card-head-body-auto-resize {
+  margin-left: -5px;
+  margin-right: -5px;
+  overflow: hidden;
+}
+.card-head-body-auto-resize.col-item-auto-height .card-head-body-spin {
+  height: auto;
+}
+.card-head-body-auto-resize .head-dynamic-2 .head-dynamic-part {
+  height: auto;
+}
+.card-head-body-auto-resize .rect-col {
+  padding: 5px;
+}
+.card-head-body-auto-resize .rect-col:first-child {
+  float: left;
+  width: 289px;
+}
+.card-head-body-auto-resize .rect-col:last-child {
+  float: right;
+  width: 424px;
+}
+.card-head-body-auto-resize .rect-col-item {
+  border: 1px solid #333;
+}
+.card-head-body-auto-resize .rect-col-item:nth-of-type(2) {
+  margin-top: 10px;
+}
+.card-head-body-auto-resize .rect-col-item-none {
+  border: 0;
+  margin: 0 !important;
+}
+.elem-topic-head {
+  text-align: center;
+}
+.elem-topic-head .elem-body {
+  padding: 0;
+  border: 1px solid #333;
+}
+.elem-topic-head-pad {
+  padding-top: 10px;
+}
+.elem-topic-head h3 {
+  font-size: 16px;
+  height: 29px;
+  line-height: 28px;
+  border-bottom: 1px dotted #333;
+  font-weight: normal;
+}
+.elem-topic-head p {
+  font-size: 12px;
+  height: 29px;
+  line-height: 29px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.elem-line-horizontal {
+  height: 100%;
+  line-height: 30px;
+}
+.elem-line-horizontal .line-body {
+  display: inline-block;
+  vertical-align: middle;
+  width: 100%;
+  border-bottom: 1px solid #000;
+}
+.elem-line-vertical {
+  height: 100%;
+  text-align: center;
+}
+.elem-line-vertical .line-body {
+  display: inline-block;
+  vertical-align: top;
+  height: 100%;
+  border-left: 1px solid #000;
+}
+.elem-lines .line-item {
+  display: inline-block;
+  vertical-align: top;
+}
+.elem-rect .rect-body {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.elem-text .text-body {
+  padding: 5px;
+  line-height: 1.4;
+}
+.elem-text .text-body span {
+  white-space: pre-wrap;
+  word-wrap: normal;
+  word-break: break-all;
+}
+.elem-text .text-body span.cont-variate {
+  color: #a0a0a0;
+  margin: 0 2px;
+}
+.elem-barcode {
+  height: 100%;
+  border-color: transparent;
+  border-width: 1pt;
+  position: relative;
+}
+.elem-barcode > img {
+  max-height: 100%;
+  max-width: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+.elem-image {
+  height: 100%;
+  border-color: transparent;
+  border-width: 1pt;
+  position: relative;
+}
+.elem-image > p {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: table;
+  text-align: center;
+  color: #b0b0b0;
+  font-size: 30pt;
+}
+.elem-image > p i {
+  display: table-cell;
+  vertical-align: middle;
+}
+.elem-image > img {
+  max-height: 100%;
+  max-width: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+.elem-grids > table {
+  table-layout: fixed;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+.elem-grids > table td {
+  border: 1px solid #333;
+}
+.elem-grids-halving > table {
+  table-layout: auto;
+  width: 100%;
+}
+.elem-fill-question {
+  white-space: normal;
+}
+.elem-fill-question-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;
+}
+.elem-fill-question-first.elem-fill-question-simple::before {
+  content: "单选";
+  background-color: #65d5ad;
+}
+.elem-fill-question-first.elem-fill-question-multiply::before {
+  content: "多选";
+  background-color: #617bea;
+}
+.elem-fill-question-first.elem-fill-question-boolean::before {
+  content: "判断";
+  background-color: #ffa952;
+}
+.elem-fill-question .elem-body {
+  padding: 18px 0 18px 16px;
+}
+.elem-fill-question .group-item {
+  font-family: "Times New Roman", Arial, sans-serif;
+  display: inline-block;
+  vertical-align: top;
+  font-size: 0;
+}
+.elem-fill-question .question-item {
+  font-size: 0;
+}
+.elem-fill-question .option-item {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0;
+  width: 18px;
+  height: 14px;
+  text-align: center;
+  font-size: 12px;
+  line-height: 1;
+  border: 1px solid #000;
+  color: #000;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.elem-fill-question .option-item > i {
+  display: inline-block;
+  -webkit-transform: scale(0.67, 0.67);
+  transform: scale(0.67, 0.67);
+}
+.elem-fill-question .option-item:first-child {
+  text-align: right;
+  border-color: transparent;
+  font-size: 12px;
+  color: #000;
+}
+.elem-fill-question .option-item:first-child > i {
+  -webkit-transform: scale(1, 1);
+  transform: scale(1, 1);
+}
+.elem-fill-question .option-item:last-child {
+  margin-right: 0 !important;
+}
+.elem-fill-question-vertical .question-item {
+  display: inline-block;
+  vertical-align: top;
+}
+.elem-fill-question-vertical .question-item:last-child {
+  margin-right: 0 !important;
+}
+.elem-fill-question-vertical .option-item {
+  display: block;
+}
+.elem-fill-question-vertical .option-item:first-child {
+  padding: 0;
+  text-align: center;
+}
+.elem-fill-question-vertical .option-item:last-child {
+  margin-bottom: 0 !important;
+}
+.elem-fill-area .option-item {
+  display: inline-block;
+  vertical-align: middle;
+  width: 30px;
+  height: 16px;
+  border: 1px solid #000;
+}
+.elem-fill-area .option-item:last-child {
+  margin-right: 0 !important;
+}
+.elem-fill-area-vertical .option-item {
+  display: block;
+}
+.elem-fill-area-vertical .option-item:last-child {
+  margin-bottom: 0 !important;
+}
+.elem-fill-line {
+  white-space: normal;
+}
+.elem-fill-line .elem-body {
+  padding: 0 15px 0 10px;
+  font-size: 0;
+}
+.elem-fill-line .elem-fill-quesiton {
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  padding: 0 1px;
+  font-size: 12px;
+}
+.elem-fill-line .elem-fill-quesiton li.elem-fill-line {
+  height: 40px;
+  position: relative;
+  margin: 0 10px 0 20px;
+  z-index: 8;
+}
+.elem-fill-line .elem-fill-quesiton li.elem-fill-line::after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 100%;
+  border-bottom: 1px solid #000;
+  bottom: 8px;
+}
+.elem-fill-line .elem-fill-quesiton li.elem-fill-no {
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  left: 1px;
+  z-index: 9;
+  min-width: 20px;
+  text-align: left;
+  background-color: #fff;
+  border: 0;
+}
+.elem-fill-line .elem-fill-quesiton li.elem-fill-no span {
+  display: block;
+  position: relative;
+  padding-bottom: 5px;
+  padding-right: 3px;
+  -webkit-transform: translateY(-100%);
+  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%);
+  width: 10px;
+  padding-bottom: 4px;
+  background-color: #fff;
+  text-align: center;
+  border: 0;
+}
+.elem-explain .elem-title {
+  padding-bottom: 0;
+}
+.elem-explain .elem-body {
+  min-height: 60px;
+  position: relative;
+}
+.elem-explain .elem-explain-no {
+  position: absolute;
+  left: 20px;
+  top: 10px;
+  font-size: 12px;
+  z-index: 9;
+}
+.elem-explain .elem-explain-elements {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 8;
+}
+.elem-explain .elem-explain-element .explain-element-body {
+  position: absolute;
+}
+.elem-composition .elem-title {
+  padding-bottom: 0;
+}
+.elem-composition .elem-body {
+  min-height: 60px;
+  position: relative;
+}
+.elem-composition-elements {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 8;
+}
+.elem-composition .elem-composition-element .composition-element-body {
+  position: absolute;
+  overflow: hidden;
+}
+.elem-fill-number {
+  border: 1px solid #000;
+}
+.elem-fill-number .fill-number-rect {
+  font-size: 0;
+  height: 27px;
+  border-bottom: 1px solid #333;
+}
+.elem-fill-number .fill-number-number {
+  display: inline-block;
+  vertical-align: top;
+  width: 7.692%;
+  height: 100%;
+}
+.elem-fill-number .fill-number-number:not(:last-child) {
+  border-right: 1px solid #333;
+}
+.elem-fill-number .fill-number-head {
+  height: 51px;
+}
+.elem-fill-number .fill-number-head > h5 {
+  border-bottom: 1px solid #333;
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+}
+.elem-fill-number .fill-number-body {
+  display: table;
+  width: 100%;
+}
+.elem-fill-number .fill-number-list {
+  display: table-cell;
+  width: 7.692%;
+  padding: 1px 0;
+}
+.elem-fill-number .fill-number-option {
+  margin: 8px auto;
+  width: 20px;
+  height: 14px;
+  font-size: 12px;
+  line-height: 1;
+  text-align: center;
+  color: #000;
+  border: 1px solid #000;
+  font-family: "Times New Roman", Arial, sans-serif;
+}
+.elem-fill-number .fill-number-option > i {
+  display: inline-block;
+  -webkit-transform: scale(0.67, 0.67);
+  transform: scale(0.67, 0.67);
+}
+.elem-fill-field {
+  white-space: normal;
+  overflow: hidden;
+}
+.fill-field-item {
+  display: inline-block;
+  padding: 0 10px;
+  width: 100%;
+}
+.fill-field-content {
+  height: 30px;
+  line-height: 26px;
+  overflow: hidden;
+  position: relative;
+}
+.fill-field-content::after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 100%;
+  border-bottom: 1px solid #333;
+  bottom: 2px;
+  left: 0;
+  z-index: 1;
+}
+.fill-field-content > span {
+  z-index: 2;
+  display: inline-block;
+  position: relative;
+  font-size: 14px;
+  vertical-align: top;
+}
+.fill-field-content > span:first-child {
+  background-color: #fff;
+  text-align: justify;
+}
+.fill-field-content > span:first-child::after {
+  content: "";
+  display: inline-block;
+  width: 100%;
+  height: 0;
+  line-height: 0;
+}
+.fill-field-content > span:nth-of-type(2) {
+  width: 10px;
+  background-color: #fff;
+}
+.elem-fill-pane {
+  font-size: 0;
+  white-space: normal;
+  overflow: hidden;
+}
+.elem-fill-pane .fill-pane-item {
+  display: inline-block;
+  vertical-align: top;
+  font-size: 14px;
+}
+.elem-fill-pane .fill-pane-cont {
+  border: 1px solid #000;
+}
+.card-free-preview:not(.card-print) {
+  padding: 10px 0;
+  background-color: #f0f0f0;
+}
+.card-free-preview:not(.card-print) .page-box {
+  margin: 10px auto;
+  -webkit-box-shadow: 0 0 4px #ddd;
+  box-shadow: 0 0 4px #ddd;
+}
+.card-free-preview .page-column-element .element-item {
+  position: absolute;
+}
+.card-free-preview .page-column-element .element-item::before {
+  display: none;
+}

card/components/CardDesign.vue

@@ -1,524 +1,525 @@
-<template>
-  <div class="card-design">
-    <div class="design-header">
-      <div class="design-steps">
-        <div class="step-item" v-for="(step, index) in steps" :key="index">
-          <i>{{ index + 1 }}</i>
-          <span>{{ step }}</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- actions -->
-    <div class="design-action">
-      <div class="design-logo">
-        <h1>
-          <i class="el-icon-d-arrow-left" @click="toExit" title="退出"></i>
-          答题卡制作
-        </h1>
-      </div>
-
-      <div class="action-part">
-        <div class="action-part-title"><h2>基本设置</h2></div>
-        <div class="action-part-body">
-          <page-prop-edit @init-page="initPageData"></page-prop-edit>
-        </div>
-      </div>
-      <div class="action-part">
-        <div class="action-part-title"><h2>试题配置</h2></div>
-        <div class="action-part-body">
-          <div class="type-list">
-            <div
-              class="type-item"
-              v-for="(item, index) in TOPIC_LIST"
-              :key="index"
-            >
-              <el-button @click="addNewTopic(item)"
-                ><i class="el-icon-plus"></i>{{ item.name }}</el-button
-              >
-            </div>
-          </div>
-          <p class="tips-info">提示：点击创建试题</p>
-        </div>
-      </div>
-      <div class="action-part">
-        <div class="action-part-title"><h2>插入元素</h2></div>
-        <div class="action-part-body">
-          <div class="type-list">
-            <div
-              class="type-item"
-              v-for="(item, index) in ELEMENT_LIST"
-              :key="index"
-              draggable="true"
-              @dragstart="dragstart(item)"
-            >
-              <el-button><i class="el-icon-plus"></i>{{ item.name }}</el-button>
-            </div>
-            <p class="tips-info">提示：拖动插入元素</p>
-          </div>
-          <!-- Develop btns -->
-          <!-- <card-config-prop-edit></card-config-prop-edit> -->
-        </div>
-        <!-- <br /><br /> -->
-        <!-- <el-button @click="initCard">新建页面</el-button> -->
-      </div>
-      <!-- <div class="action-part">
-          <div class="action-part-title"><h2>阅卷参数</h2></div>
-          <div class="action-part-body">
-            <el-button type="primary" @click="modifyParams"
-              >上传阅卷参数<span class="color-danger"
-                >（{{ paperParams["pageSumScore"] || 0 }}分）</span
-              ></el-button
-            >
-          </div>
-        </div> -->
-    </div>
-
-    <div class="design-main">
-      <!-- menus -->
-      <div class="design-control">
-        <div class="control-left tab-btns">
-          <el-button
-            v-for="(page, pageNo) in pages"
-            :key="pageNo"
-            :type="curPageNo === pageNo ? 'primary' : 'default'"
-            @click="swithPage(pageNo)"
-            >第{{ pageNo + 1 }}页</el-button
-          >
-        </div>
-        <div class="control-right">
-          <el-button
-            type="success"
-            :loading="isSubmit"
-            :disabled="!pages.length"
-            @click="toPreview"
-            >预览</el-button
-          >
-          <el-button
-            v-if="showSaveBtn"
-            type="primary"
-            :loading="isSubmit"
-            :disabled="canSave || !pages.length"
-            @click="toSave"
-            >暂存</el-button
-          >
-          <el-button type="primary" :loading="isSubmit" @click="toSubmit"
-            >提交</el-button
-          >
-        </div>
-      </div>
-
-      <!-- edit body -->
-      <div class="design-body">
-        <div
-          :class="[
-            'page-box',
-            `page-box-${cardConfig.pageSize}`,
-            `page-box-${curPageNo % 2}`
-          ]"
-          v-if="curPage.locators"
-        >
-          <div
-            :class="[
-              'page-locators',
-              `page-locators-${curPage.locators.length}`
-            ]"
-          >
-            <ul
-              class="page-locator-group"
-              v-for="(locator, iind) in curPage.locators"
-              :key="iind"
-            >
-              <li
-                v-for="(elem, eindex) in locator"
-                :key="eindex"
-                :id="elem.id"
-              ></li>
-            </ul>
-          </div>
-          <!-- inner edit area -->
-          <div class="page-main-inner">
-            <div
-              :class="['page-main', `page-main-${curPage.columns.length}`]"
-              :style="{ margin: `0 -${curPage.columnGap / 2}px` }"
-            >
-              <div
-                class="page-column"
-                v-for="(column, columnNo) in curPage.columns"
-                :key="columnNo"
-                :style="{ padding: `0 ${curPage.columnGap / 2}px` }"
-              >
-                <div
-                  class="page-column-main"
-                  :id="[`column-${curPageNo}-${columnNo}`]"
-                >
-                  <div class="page-column-body" v-if="column.elements.length">
-                    <topic-element-edit
-                      class="page-column-element"
-                      :data-h="element.h"
-                      v-for="element in column.elements"
-                      :key="element.id"
-                      :data="element"
-                    ></topic-element-edit>
-                  </div>
-                  <div class="page-column-body" v-else>
-                    <div
-                      class="page-column-forbid-area"
-                      v-if="cardConfig.showForbidArea"
-                    >
-                      <p>该区域严禁作答</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- outer edit area -->
-          <div class="page-main-outer">
-            <page-number
-              type="rect"
-              :total="pages.length"
-              :current="curPageNo + 1"
-            ></page-number>
-            <page-number
-              type="text"
-              :total="pages.length"
-              :current="curPageNo + 1"
-            ></page-number>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- all topics -->
-    <div class="topic-list">
-      <div :class="['page-box', `page-box-${cardConfig.pageSize}`]">
-        <div class="page-main-inner">
-          <div
-            :class="['page-main', `page-main-${cardConfig.columnNumber}`]"
-            :style="{ margin: `0 -${cardConfig.columnGap / 2}px` }"
-          >
-            <div
-              class="page-column"
-              :style="{ padding: `0 ${cardConfig.columnGap / 2}px` }"
-            >
-              <div class="page-column-main" id="topic-column">
-                <div class="page-column-body">
-                  <!-- card-head-sample -->
-                  <card-head-sample
-                    :data="cardHeadSampleData"
-                    id="simple-card-head"
-                    v-if="topics.length && cardHeadSampleData"
-                  ></card-head-sample>
-                  <!-- topic element -->
-                  <topic-element-preview
-                    class="page-column-element"
-                    v-for="element in topics"
-                    :key="element.id"
-                    :data="element"
-                  ></topic-element-preview>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- element-prop-edit -->
-    <element-prop-edit ref="ElementPropEdit"></element-prop-edit>
-    <!-- right-click-menu -->
-    <right-click-menu @inset-topic="insetNewTopic"></right-click-menu>
-    <!-- paper-params -->
-    <paper-params
-      :pages="pages"
-      :paper-params="paperParams"
-      @confirm="paperParamsModified"
-      ref="PaperParams"
-    ></paper-params>
-    <!-- topic select dialog -->
-    <topic-select-dialog
-      ref="TopicSelectDialog"
-      :topics="topicList"
-      @confirm="addNewTopic"
-    ></topic-select-dialog>
-  </div>
-</template>
-
-<script>
-import { mapState, mapMutations, mapActions } from "vuex";
-import {
-  getElementModel,
-  getCardHeadModel,
-  ELEMENT_LIST,
-  TOPIC_LIST
-} from "../elementModel";
-import { CARD_VERSION } from "../enumerate";
-// import CardConfigPropEdit from "../components/CardConfigPropEdit";
-import TopicElementEdit from "../components/TopicElementEdit";
-import TopicElementPreview from "../components/TopicElementPreview";
-import PagePropEdit from "../components/PagePropEdit";
-import ElementPropEdit from "../components/ElementPropEdit";
-import RightClickMenu from "../components/RightClickMenu";
-import PageNumber from "../components/PageNumber";
-import PaperParams from "../components/PaperParams";
-import CardHeadSample from "../elements/card-head/CardHead";
-import TopicSelectDialog from "../components/TopicSelectDialog";
-
-export default {
-  name: "card-design",
-  props: {
-    content: {
-      type: Object,
-      default() {
-        return {
-          pages: [],
-          cardConfig: {},
-          paperParams: {}
-        };
-      }
-    },
-    showSaveBtn: {
-      type: Boolean,
-      default: true
-    }
-  },
-  components: {
-    // CardConfigPropEdit,
-    TopicElementEdit,
-    TopicElementPreview,
-    PagePropEdit,
-    ElementPropEdit,
-    RightClickMenu,
-    CardHeadSample,
-    PageNumber,
-    PaperParams,
-    TopicSelectDialog
-  },
-  data() {
-    return {
-      ELEMENT_LIST,
-      TOPIC_LIST,
-      topicList: [],
-      steps: ["添加标题", "基本设置", "试题配置", "预览生成"],
-      columnWidth: 0,
-      isSubmit: false,
-      canSave: false
-    };
-  },
-  computed: {
-    ...mapState("card", [
-      "cardConfig",
-      "topics",
-      "pages",
-      "paperParams",
-      "curElement",
-      "curPage",
-      "curPageNo"
-    ]),
-    cardHeadSampleData() {
-      if (!this.cardConfig["pageSize"]) return;
-      const data = getCardHeadModel(this.cardConfig);
-      data.isSimple = true;
-      return data;
-    }
-  },
-  mounted() {
-    this.initCard();
-  },
-  methods: {
-    ...mapMutations("card", [
-      "addPage",
-      "setCurPage",
-      "setCurElement",
-      "setCardConfig",
-      "setOpenElementEditDialog",
-      "setCurDragElement",
-      "setPages",
-      "setPaperParams",
-      "setInsetTarget",
-      "initState"
-    ]),
-    ...mapActions("card", [
-      "resetTopicSeries",
-      "removePage",
-      "addElement",
-      "modifyCardHead",
-      "modifyElement",
-      "rebuildPages",
-      "initTopicsFromPages"
-    ]),
-    async initCard() {
-      const { cardConfig, pages, paperParams } = this.content;
-      this.setCardConfig(cardConfig);
-      this.setPaperParams(paperParams);
-
-      if (pages && pages.length) {
-        this.setPages(pages);
-        this.initTopicsFromPages();
-        this.resetTopicSeries();
-        this.setCurPage(0);
-      } else {
-        this.initPageData();
-      }
-      this.addWatch();
-    },
-    initPageData() {
-      this.modifyCardHead({
-        ...getCardHeadModel(this.cardConfig)
-      });
-      this.$nextTick(() => {
-        this.rebuildPages();
-        this.setCurPage(0);
-      });
-    },
-    addNewTopic(item) {
-      let element = getElementModel(item.type);
-      element.w = document.getElementById("topic-column").offsetWidth;
-
-      this.setCurElement(element);
-      this.$refs.ElementPropEdit.open();
-      // to elementPropEdit/ElementPropEdit open topic edit dialog
-    },
-    insetNewTopic({ id, type }) {
-      console.log(id, type);
-      this.setInsetTarget({ id, type });
-      if (type === "FILL_QUESTION") {
-        this.topicList = this.TOPIC_LIST;
-      } else {
-        this.topicList = this.TOPIC_LIST.filter(
-          item => item.type !== "FILL_QUESTION"
-        );
-      }
-      this.$refs.TopicSelectDialog.open();
-    },
-    // 元件编辑
-    dragstart(element) {
-      this.setCurDragElement(getElementModel(element.type));
-    },
-    addWatch() {
-      this.$watch("cardConfig", val => {
-        const element = getCardHeadModel(val);
-        this.modifyCardHead(element);
-        this.$nextTick(() => {
-          this.rebuildPages();
-        });
-      });
-    },
-    swithPage(pindex) {
-      if (this.curPageNo === pindex) return;
-      this.setCurPage(pindex);
-      this.setCurElement({});
-    },
-    // paper-params
-    modifyParams() {
-      this.$refs.PaperParams.open();
-    },
-    paperParamsModified(paperParams) {
-      this.setPaperParams(paperParams);
-    },
-    // save
-    getCardData(htmlContent = "", model = "") {
-      const data = {
-        title: this.cardConfig.cardTitle,
-        content: model,
-        htmlContent
-      };
-      return data;
-    },
-    checkElementCovered() {
-      let elements = [];
-      this.pages.forEach(page => {
-        page.columns.forEach(column => {
-          column.elements.forEach(element => {
-            if (element.isCovered) {
-              elements.push(element.id);
-            }
-          });
-        });
-      });
-      return elements.length;
-    },
-    checkCardValid() {
-      if (!this.cardConfig.cardTitle) {
-        this.$message.error("题卡标题不能为空！");
-        this.setCurPageNo(0);
-        setTimeout(() => {
-          document.getElementById("cardTitleInput").focus();
-        });
-        return false;
-      }
-      // if (!this.cardConfig.cardDesc) {
-      //   this.$message.error("题卡描述信息不能为空！");
-      //   this.setCurPage(0);
-      //   setTimeout(() => {
-      //     document.getElementById("cardDescInput").focus();
-      //   });
-      //   return false;
-      // }
-      if (this.checkElementCovered()) {
-        this.$message.error("题卡中存在被遮挡的元件，请注意调整！");
-        return false;
-      }
-
-      return true;
-    },
-    getCardJson() {
-      // 防止页面未渲染完成，各试题高度未及时更新，保存数据有误的问题
-      return new Promise(resolve => {
-        setTimeout(() => {
-          const data = JSON.stringify(
-            {
-              version: CARD_VERSION,
-              cardType: "STANDARD",
-              cardConfig: this.cardConfig,
-              paperParams: this.paperParams,
-              pages: this.pages
-            },
-            (k, v) => (k.startsWith("_") ? undefined : v)
-          );
-          resolve(data);
-        }, 100);
-      });
-    },
-    async toPreview() {
-      if (this.isSubmit) return;
-      this.isSubmit = true;
-      const model = await this.getCardJson();
-      const datas = this.getCardData("", model);
-      this.$emit("on-preview", datas);
-    },
-    async toSave() {
-      if (!this.checkCardValid()) return;
-
-      if (this.isSubmit) return;
-      this.isSubmit = true;
-      const model = await this.getCardJson();
-      const datas = this.getCardData("", model);
-      this.$emit("on-save", datas);
-    },
-    toSubmit() {
-      if (this.isSubmit) return;
-      if (!this.checkCardValid()) return;
-
-      this.$emit("on-submit", {
-        cardConfig: this.cardConfig,
-        pages: this.pages,
-        paperParams: this.paperParams
-      });
-    },
-    toExit() {
-      this.$emit("on-exit");
-    },
-    loading() {
-      this.isSubmit = true;
-    },
-    unloading() {
-      this.isSubmit = false;
-    }
-  },
-  beforeDestroy() {
-    this.initState();
-  }
-};
-</script>
+<template>
+  <div class="card-design">
+    <div class="design-header">
+      <div class="design-steps">
+        <div class="step-item" v-for="(step, index) in steps" :key="index">
+          <i>{{ index + 1 }}</i>
+          <span>{{ step }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- actions -->
+    <div class="design-action">
+      <div class="design-logo">
+        <h1>
+          <i class="el-icon-d-arrow-left" @click="toExit" title="退出"></i>
+          答题卡制作
+        </h1>
+      </div>
+
+      <div class="action-part">
+        <div class="action-part-title"><h2>基本设置</h2></div>
+        <div class="action-part-body">
+          <page-prop-edit @init-page="initPageData"></page-prop-edit>
+        </div>
+      </div>
+      <div class="action-part">
+        <div class="action-part-title"><h2>试题配置</h2></div>
+        <div class="action-part-body">
+          <div class="type-list">
+            <div
+              class="type-item"
+              v-for="(item, index) in TOPIC_LIST"
+              :key="index"
+            >
+              <el-button @click="addNewTopic(item)"
+                ><i class="el-icon-plus"></i>{{ item.name }}</el-button
+              >
+            </div>
+          </div>
+          <p class="tips-info">提示：点击创建试题</p>
+        </div>
+      </div>
+      <div class="action-part">
+        <div class="action-part-title"><h2>插入元素</h2></div>
+        <div class="action-part-body">
+          <div class="type-list">
+            <div
+              class="type-item"
+              v-for="(item, index) in ELEMENT_LIST"
+              :key="index"
+              draggable="true"
+              @dragstart="dragstart(item)"
+            >
+              <el-button><i class="el-icon-plus"></i>{{ item.name }}</el-button>
+            </div>
+            <p class="tips-info">提示：拖动插入元素</p>
+          </div>
+          <!-- Develop btns -->
+          <!-- <card-config-prop-edit></card-config-prop-edit> -->
+        </div>
+        <!-- <br /><br /> -->
+        <!-- <el-button @click="initCard">新建页面</el-button> -->
+      </div>
+      <!-- <div class="action-part">
+          <div class="action-part-title"><h2>阅卷参数</h2></div>
+          <div class="action-part-body">
+            <el-button type="primary" @click="modifyParams"
+              >上传阅卷参数<span class="color-danger"
+                >（{{ paperParams["pageSumScore"] || 0 }}分）</span
+              ></el-button
+            >
+          </div>
+        </div> -->
+    </div>
+
+    <div class="design-main">
+      <!-- menus -->
+      <div class="design-control">
+        <div class="control-left tab-btns">
+          <el-button
+            v-for="(page, pageNo) in pages"
+            :key="pageNo"
+            :type="curPageNo === pageNo ? 'primary' : 'default'"
+            @click="swithPage(pageNo)"
+            >第{{ pageNo + 1 }}页</el-button
+          >
+        </div>
+        <div class="control-right">
+          <el-button
+            type="success"
+            :loading="isSubmit"
+            :disabled="!pages.length"
+            @click="toPreview"
+            >预览</el-button
+          >
+          <el-button
+            v-if="showSaveBtn"
+            type="primary"
+            :loading="isSubmit"
+            :disabled="canSave || !pages.length"
+            @click="toSave"
+            >暂存</el-button
+          >
+          <el-button type="primary" :loading="isSubmit" @click="toSubmit"
+            >提交</el-button
+          >
+        </div>
+      </div>
+
+      <!-- edit body -->
+      <div class="design-body">
+        <div
+          :class="[
+            'page-box',
+            `page-box-${cardConfig.pageSize}`,
+            `page-box-${curPageNo % 2}`,
+            { 'page-box-less': pages.length <= 2 }
+          ]"
+          v-if="curPage.locators"
+        >
+          <div
+            :class="[
+              'page-locators',
+              `page-locators-${curPage.locators.length}`
+            ]"
+          >
+            <ul
+              class="page-locator-group"
+              v-for="(locator, iind) in curPage.locators"
+              :key="iind"
+            >
+              <li
+                v-for="(elem, eindex) in locator"
+                :key="eindex"
+                :id="elem.id"
+              ></li>
+            </ul>
+          </div>
+          <!-- inner edit area -->
+          <div class="page-main-inner">
+            <div
+              :class="['page-main', `page-main-${curPage.columns.length}`]"
+              :style="{ margin: `0 -${curPage.columnGap / 2}px` }"
+            >
+              <div
+                class="page-column"
+                v-for="(column, columnNo) in curPage.columns"
+                :key="columnNo"
+                :style="{ padding: `0 ${curPage.columnGap / 2}px` }"
+              >
+                <div
+                  class="page-column-main"
+                  :id="[`column-${curPageNo}-${columnNo}`]"
+                >
+                  <div class="page-column-body" v-if="column.elements.length">
+                    <topic-element-edit
+                      class="page-column-element"
+                      :data-h="element.h"
+                      v-for="element in column.elements"
+                      :key="element.id"
+                      :data="element"
+                    ></topic-element-edit>
+                  </div>
+                  <div class="page-column-body" v-else>
+                    <div
+                      class="page-column-forbid-area"
+                      v-if="cardConfig.showForbidArea"
+                    >
+                      <p>该区域严禁作答</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- outer edit area -->
+          <div class="page-main-outer">
+            <page-number
+              type="rect"
+              :total="pages.length"
+              :current="curPageNo + 1"
+            ></page-number>
+            <page-number
+              type="text"
+              :total="pages.length"
+              :current="curPageNo + 1"
+            ></page-number>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- all topics -->
+    <div class="topic-list">
+      <div :class="['page-box', `page-box-${cardConfig.pageSize}`]">
+        <div class="page-main-inner">
+          <div
+            :class="['page-main', `page-main-${cardConfig.columnNumber}`]"
+            :style="{ margin: `0 -${cardConfig.columnGap / 2}px` }"
+          >
+            <div
+              class="page-column"
+              :style="{ padding: `0 ${cardConfig.columnGap / 2}px` }"
+            >
+              <div class="page-column-main" id="topic-column">
+                <div class="page-column-body">
+                  <!-- card-head-sample -->
+                  <card-head-sample
+                    :data="cardHeadSampleData"
+                    id="simple-card-head"
+                    v-if="topics.length && cardHeadSampleData"
+                  ></card-head-sample>
+                  <!-- topic element -->
+                  <topic-element-preview
+                    class="page-column-element"
+                    v-for="element in topics"
+                    :key="element.id"
+                    :data="element"
+                  ></topic-element-preview>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- element-prop-edit -->
+    <element-prop-edit ref="ElementPropEdit"></element-prop-edit>
+    <!-- right-click-menu -->
+    <right-click-menu @inset-topic="insetNewTopic"></right-click-menu>
+    <!-- paper-params -->
+    <paper-params
+      :pages="pages"
+      :paper-params="paperParams"
+      @confirm="paperParamsModified"
+      ref="PaperParams"
+    ></paper-params>
+    <!-- topic select dialog -->
+    <topic-select-dialog
+      ref="TopicSelectDialog"
+      :topics="topicList"
+      @confirm="addNewTopic"
+    ></topic-select-dialog>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations, mapActions } from "vuex";
+import {
+  getElementModel,
+  getCardHeadModel,
+  ELEMENT_LIST,
+  TOPIC_LIST
+} from "../elementModel";
+import { CARD_VERSION } from "../enumerate";
+// import CardConfigPropEdit from "../components/CardConfigPropEdit";
+import TopicElementEdit from "../components/TopicElementEdit";
+import TopicElementPreview from "../components/TopicElementPreview";
+import PagePropEdit from "../components/PagePropEdit";
+import ElementPropEdit from "../components/ElementPropEdit";
+import RightClickMenu from "../components/RightClickMenu";
+import PageNumber from "../components/PageNumber";
+import PaperParams from "../components/PaperParams";
+import CardHeadSample from "../elements/card-head/CardHead";
+import TopicSelectDialog from "../components/TopicSelectDialog";
+
+export default {
+  name: "card-design",
+  props: {
+    content: {
+      type: Object,
+      default() {
+        return {
+          pages: [],
+          cardConfig: {},
+          paperParams: {}
+        };
+      }
+    },
+    showSaveBtn: {
+      type: Boolean,
+      default: true
+    }
+  },
+  components: {
+    // CardConfigPropEdit,
+    TopicElementEdit,
+    TopicElementPreview,
+    PagePropEdit,
+    ElementPropEdit,
+    RightClickMenu,
+    CardHeadSample,
+    PageNumber,
+    PaperParams,
+    TopicSelectDialog
+  },
+  data() {
+    return {
+      ELEMENT_LIST,
+      TOPIC_LIST,
+      topicList: [],
+      steps: ["添加标题", "基本设置", "试题配置", "预览生成"],
+      columnWidth: 0,
+      isSubmit: false,
+      canSave: false
+    };
+  },
+  computed: {
+    ...mapState("card", [
+      "cardConfig",
+      "topics",
+      "pages",
+      "paperParams",
+      "curElement",
+      "curPage",
+      "curPageNo"
+    ]),
+    cardHeadSampleData() {
+      if (!this.cardConfig["pageSize"]) return;
+      const data = getCardHeadModel(this.cardConfig);
+      data.isSimple = true;
+      return data;
+    }
+  },
+  mounted() {
+    this.initCard();
+  },
+  methods: {
+    ...mapMutations("card", [
+      "addPage",
+      "setCurPage",
+      "setCurElement",
+      "setCardConfig",
+      "setOpenElementEditDialog",
+      "setCurDragElement",
+      "setPages",
+      "setPaperParams",
+      "setInsetTarget",
+      "initState"
+    ]),
+    ...mapActions("card", [
+      "resetTopicSeries",
+      "removePage",
+      "addElement",
+      "modifyCardHead",
+      "modifyElement",
+      "rebuildPages",
+      "initTopicsFromPages"
+    ]),
+    async initCard() {
+      const { cardConfig, pages, paperParams } = this.content;
+      this.setCardConfig(cardConfig);
+      this.setPaperParams(paperParams);
+
+      if (pages && pages.length) {
+        this.setPages(pages);
+        this.initTopicsFromPages();
+        this.resetTopicSeries();
+        this.setCurPage(0);
+      } else {
+        this.initPageData();
+      }
+      this.addWatch();
+    },
+    initPageData() {
+      this.modifyCardHead({
+        ...getCardHeadModel(this.cardConfig)
+      });
+      this.$nextTick(() => {
+        this.rebuildPages();
+        this.setCurPage(0);
+      });
+    },
+    addNewTopic(item) {
+      let element = getElementModel(item.type);
+      element.w = document.getElementById("topic-column").offsetWidth;
+
+      this.setCurElement(element);
+      this.$refs.ElementPropEdit.open();
+      // to elementPropEdit/ElementPropEdit open topic edit dialog
+    },
+    insetNewTopic({ id, type }) {
+      console.log(id, type);
+      this.setInsetTarget({ id, type });
+      if (type === "FILL_QUESTION") {
+        this.topicList = this.TOPIC_LIST;
+      } else {
+        this.topicList = this.TOPIC_LIST.filter(
+          item => item.type !== "FILL_QUESTION"
+        );
+      }
+      this.$refs.TopicSelectDialog.open();
+    },
+    // 元件编辑
+    dragstart(element) {
+      this.setCurDragElement(getElementModel(element.type));
+    },
+    addWatch() {
+      this.$watch("cardConfig", val => {
+        const element = getCardHeadModel(val);
+        this.modifyCardHead(element);
+        this.$nextTick(() => {
+          this.rebuildPages();
+        });
+      });
+    },
+    swithPage(pindex) {
+      if (this.curPageNo === pindex) return;
+      this.setCurPage(pindex);
+      this.setCurElement({});
+    },
+    // paper-params
+    modifyParams() {
+      this.$refs.PaperParams.open();
+    },
+    paperParamsModified(paperParams) {
+      this.setPaperParams(paperParams);
+    },
+    // save
+    getCardData(htmlContent = "", model = "") {
+      const data = {
+        title: this.cardConfig.cardTitle,
+        content: model,
+        htmlContent
+      };
+      return data;
+    },
+    checkElementCovered() {
+      let elements = [];
+      this.pages.forEach(page => {
+        page.columns.forEach(column => {
+          column.elements.forEach(element => {
+            if (element.isCovered) {
+              elements.push(element.id);
+            }
+          });
+        });
+      });
+      return elements.length;
+    },
+    checkCardValid() {
+      if (!this.cardConfig.cardTitle) {
+        this.$message.error("题卡标题不能为空！");
+        this.setCurPageNo(0);
+        setTimeout(() => {
+          document.getElementById("cardTitleInput").focus();
+        });
+        return false;
+      }
+      // if (!this.cardConfig.cardDesc) {
+      //   this.$message.error("题卡描述信息不能为空！");
+      //   this.setCurPage(0);
+      //   setTimeout(() => {
+      //     document.getElementById("cardDescInput").focus();
+      //   });
+      //   return false;
+      // }
+      if (this.checkElementCovered()) {
+        this.$message.error("题卡中存在被遮挡的元件，请注意调整！");
+        return false;
+      }
+
+      return true;
+    },
+    getCardJson() {
+      // 防止页面未渲染完成，各试题高度未及时更新，保存数据有误的问题
+      return new Promise(resolve => {
+        setTimeout(() => {
+          const data = JSON.stringify(
+            {
+              version: CARD_VERSION,
+              cardType: "STANDARD",
+              cardConfig: this.cardConfig,
+              paperParams: this.paperParams,
+              pages: this.pages
+            },
+            (k, v) => (k.startsWith("_") ? undefined : v)
+          );
+          resolve(data);
+        }, 100);
+      });
+    },
+    async toPreview() {
+      if (this.isSubmit) return;
+      this.isSubmit = true;
+      const model = await this.getCardJson();
+      const datas = this.getCardData("", model);
+      this.$emit("on-preview", datas);
+    },
+    async toSave() {
+      if (!this.checkCardValid()) return;
+
+      if (this.isSubmit) return;
+      this.isSubmit = true;
+      const model = await this.getCardJson();
+      const datas = this.getCardData("", model);
+      this.$emit("on-save", datas);
+    },
+    toSubmit() {
+      if (this.isSubmit) return;
+      if (!this.checkCardValid()) return;
+
+      this.$emit("on-submit", {
+        cardConfig: this.cardConfig,
+        pages: this.pages,
+        paperParams: this.paperParams
+      });
+    },
+    toExit() {
+      this.$emit("on-exit");
+    },
+    loading() {
+      this.isSubmit = true;
+    },
+    unloading() {
+      this.isSubmit = false;
+    }
+  },
+  beforeDestroy() {
+    this.initState();
+  }
+};
+</script>

card/components/CardView.vue

@@ -1,111 +1,112 @@
-<template>
-  <div class="card-view">
-    <template v-for="(page, pageNo) in pages">
-      <div
-        :class="[
-          'page-box',
-          `page-box-${cardConfig.pageSize}`,
-          `page-box-${pageNo % 2}`
-        ]"
-        :key="pageNo"
-      >
-        <div
-          :class="['page-locators', `page-locators-${page.locators.length}`]"
-        >
-          <ul
-            class="page-locator-group"
-            v-for="(locator, iind) in page.locators"
-            :key="iind"
-          >
-            <li
-              v-for="(elem, eindex) in locator"
-              :key="eindex"
-              :id="elem.id"
-            ></li>
-          </ul>
-        </div>
-        <!-- inner edit area -->
-        <div class="page-main-inner">
-          <div
-            :class="['page-main', `page-main-${page.columns.length}`]"
-            :style="{ margin: `0 -${page.columnGap / 2}px` }"
-          >
-            <div
-              class="page-column"
-              v-for="(column, columnNo) in page.columns"
-              :key="columnNo"
-              :style="{ padding: `0 ${page.columnGap / 2}px` }"
-            >
-              <div
-                class="page-column-main"
-                :id="[`column-${pageNo}-${columnNo}`]"
-              >
-                <div class="page-column-body" v-if="column.elements.length">
-                  <topic-element-preview
-                    class="page-column-element"
-                    v-for="element in column.elements"
-                    :key="element.id"
-                    :data="element"
-                  ></topic-element-preview>
-                </div>
-                <div class="page-column-body" v-else>
-                  <div
-                    class="page-column-forbid-area"
-                    v-if="cardConfig.showForbidArea"
-                  >
-                    <p>该区域严禁作答</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- outer edit area -->
-        <div class="page-main-outer">
-          <page-number
-            type="rect"
-            :total="pages.length"
-            :current="pageNo + 1"
-          ></page-number>
-          <page-number
-            type="text"
-            :total="pages.length"
-            :current="pageNo + 1"
-          ></page-number>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import TopicElementPreview from "./TopicElementPreview";
-import PageNumber from "./PageNumber";
-import previewTemp from "../previewTemp";
-import exchangeMixins from "../mixins/exchange";
-
-export default {
-  name: "card-view",
-  components: { TopicElementPreview, PageNumber },
-  mixins: [exchangeMixins],
-  props: {
-    pages: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-    cardConfig: {
-      type: Object,
-      default() {
-        return {};
-      }
-    }
-  },
-  methods: {
-    getPreviewTemp(htmlContent) {
-      return previewTemp(htmlContent);
-    }
-  }
-};
-</script>
+<template>
+  <div class="card-view">
+    <template v-for="(page, pageNo) in pages">
+      <div
+        :class="[
+          'page-box',
+          `page-box-${cardConfig.pageSize}`,
+          `page-box-${pageNo % 2}`,
+          { 'page-box-less': pages.length <= 2 }
+        ]"
+        :key="pageNo"
+      >
+        <div
+          :class="['page-locators', `page-locators-${page.locators.length}`]"
+        >
+          <ul
+            class="page-locator-group"
+            v-for="(locator, iind) in page.locators"
+            :key="iind"
+          >
+            <li
+              v-for="(elem, eindex) in locator"
+              :key="eindex"
+              :id="elem.id"
+            ></li>
+          </ul>
+        </div>
+        <!-- inner edit area -->
+        <div class="page-main-inner">
+          <div
+            :class="['page-main', `page-main-${page.columns.length}`]"
+            :style="{ margin: `0 -${page.columnGap / 2}px` }"
+          >
+            <div
+              class="page-column"
+              v-for="(column, columnNo) in page.columns"
+              :key="columnNo"
+              :style="{ padding: `0 ${page.columnGap / 2}px` }"
+            >
+              <div
+                class="page-column-main"
+                :id="[`column-${pageNo}-${columnNo}`]"
+              >
+                <div class="page-column-body" v-if="column.elements.length">
+                  <topic-element-preview
+                    class="page-column-element"
+                    v-for="element in column.elements"
+                    :key="element.id"
+                    :data="element"
+                  ></topic-element-preview>
+                </div>
+                <div class="page-column-body" v-else>
+                  <div
+                    class="page-column-forbid-area"
+                    v-if="cardConfig.showForbidArea"
+                  >
+                    <p>该区域严禁作答</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- outer edit area -->
+        <div class="page-main-outer">
+          <page-number
+            type="rect"
+            :total="pages.length"
+            :current="pageNo + 1"
+          ></page-number>
+          <page-number
+            type="text"
+            :total="pages.length"
+            :current="pageNo + 1"
+          ></page-number>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import TopicElementPreview from "./TopicElementPreview";
+import PageNumber from "./PageNumber";
+import previewTemp from "../previewTemp";
+import exchangeMixins from "../mixins/exchange";
+
+export default {
+  name: "card-view",
+  components: { TopicElementPreview, PageNumber },
+  mixins: [exchangeMixins],
+  props: {
+    pages: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    cardConfig: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  methods: {
+    getPreviewTemp(htmlContent) {
+      return previewTemp(htmlContent);
+    }
+  }
+};
+</script>

src/assets/styles/adaptive.scss

@@ -1,11 +1,12 @@
 @media screen and (min-width: 1440px) {
   // home
   .home-header {
-    .menu-list {
+    .head-menu {
       li {
-        padding: 10px 25px;
-        span {
-          margin-left: 8px;
+        padding: 10px 15px;
+        > .icon,
+        > i {
+          margin-right: 8px;
         }
       }
     }

src/assets/styles/home.scss

@@ -187,9 +187,10 @@
 
   .menu-list {
     li {
+      position: relative;
       display: inline-block;
       vertical-align: top;
-      padding: 10px 15px;
+      padding: 10px;
       height: 50px;
       line-height: 30px;
       opacity: 0.4;
@@ -204,15 +205,30 @@
 
       &.menu-item-act {
         opacity: 1;
+
+        &::after {
+          content: "";
+          display: block;
+          position: absolute;
+          left: 5px;
+          right: 5px;
+          bottom: 0;
+          border-top: 5px solid #fff;
+          border-radius: 5px;
+          z-index: 8;
+        }
       }
 
       span {
         display: inline-block;
         vertical-align: top;
-        margin-left: 6px;
       }
       .icon {
         margin-top: -3px;
+        margin-right: 6px;
+      }
+      > i {
+        margin-right: 6px;
       }
     }
   }
@@ -226,7 +242,6 @@
     }
   }
   .head-user {
-    padding-right: 10px;
     flex-grow: 0;
     flex-shrink: 0;
     .menu-item-account {

src/modules/analysis/components/baseConfig/DiagnoseConfig.vue

@@ -77,13 +77,13 @@
 import { mapState } from "vuex";
 import ProficiencyEdit from "./ProficiencyEdit.vue";
 import { updatePaperDefine } from "../../api";
-import { deepCopy } from "@/plugins/utils";
+import { calcSum, deepCopy } from "@/plugins/utils";
 
 const initModalForm = {
   knowledgeInterpret: "课程标准规定的学科内容",
   abilityInterpret: "经学习与训练内化而成的心理结构",
-  totalScore: 100,
-  passScore: 60,
+  totalScore: 0,
+  passScore: 0,
   gradeModuleDefineParamList: [
     {
       level: "A",
@@ -194,7 +194,7 @@ export default {
     };
   },
   computed: {
-    ...mapState("baseConfigs", ["defineList", "baseInfo"])
+    ...mapState("baseConfigs", ["defineList", "structList", "baseInfo"])
   },
   created() {
     this.initData();
@@ -216,6 +216,13 @@ export default {
       } else {
         this.modalForm = deepCopy(initModalForm);
       }
+      if (!this.modalForm.totalScore) {
+        this.modalForm.totalScore = calcSum(
+          this.structList.map(item => item.fullScore)
+        );
+
+        this.modalForm.passScore = Math.floor(this.modalForm.totalScore * 0.6);
+      }
     },
     paramChange(data) {
       this.modalForm.gradeModuleDefineParamList = data;

src/modules/analysis/views/DataInitManage.vue

@@ -49,6 +49,7 @@
             {{ scope.row.courseName }}（{{ scope.row.courseCode }}）
           </span>
         </el-table-column>
+        <el-table-column prop="paperNumber" label="试卷编码"></el-table-column>
         <el-table-column prop="status" label="状态"> </el-table-column>
         <el-table-column
           class-name="action-column"
@@ -58,7 +59,9 @@
         >
           <template slot-scope="scope">
             <el-button
-              v-if="checkPrivilege('link', 'window')"
+              v-if="
+                checkPrivilege('link', 'window') && !scope.row.publishStatus
+              "
               class="btn-primary"
               type="text"
               @click="toConfig(scope.row)"

src/views/Home.vue

@@ -12,14 +12,14 @@
             ]"
             @click="toMenu(menu)"
           >
-            <i
+            <!-- <i
               :class="[
                 'icon',
                 MENU_ICONS[menu.url]
                   ? `icon-${MENU_ICONS[menu.url]}`
                   : 'icon-workspace'
               ]"
-            ></i>
+            ></i> -->
             <span>{{ menu.name }}</span>
           </li>
         </ul>