card md and bug fix

public/ls.html

@@ -0,0 +1,946 @@
+<style>
+  .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-preview .element-item {
+    width: 100% !important;
+  }
+
+  .card-print {
+    padding: 0;
+  }
+  .card-print .page-box {
+    margin: 0 auto;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    page-break-after: always;
+  }
+
+  .page-box {
+    position: relative;
+    width: 1587px;
+    height: 1122px;
+    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-3 .page-column:first-child {
+    width: 430px;
+  }
+  .page-box .page-main-3 .page-column:not(:first-child) {
+    width: 508.5px;
+  }
+  .page-box .page-main-4 .page-column:first-child {
+    width: 430px;
+  }
+  .page-box .page-main-4 .page-column:not(:first-child) {
+    width: 335.5px;
+  }
+  .page-box-1 .page-main-3 .page-column {
+    width: 33.33% !important;
+  }
+  .page-box-1 .page-main-4 .page-column {
+    width: 25% !important;
+  }
+
+  .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: 50%;
+    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;
+    background: linear-gradient(
+        to top right,
+        rgba(172, 172, 172, 0) 0%,
+        rgba(172, 172, 172, 0) calc(50% - 1px),
+        #acacac 50%,
+        rgba(172, 172, 172, 0) calc(50% + 1px),
+        rgba(172, 172, 172, 0) 100%
+      ),
+      linear-gradient(
+        to bottom right,
+        rgba(172, 172, 172, 0) 0%,
+        rgba(172, 172, 172, 0) calc(50% - 1px),
+        #acacac 50%,
+        rgba(172, 172, 172, 0) calc(50% + 1px),
+        rgba(172, 172, 172, 0) 100%
+      );
+  }
+  .page-column-forbid-area > p {
+    color: #333;
+    padding: 20px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    font-weight: bold;
+    font-size: 30px;
+    color: #999;
+    background-color: #fff;
+  }
+  .page-column-main {
+    position: relative;
+    height: 100%;
+  }
+  .page-column-main
+    .page-column-element:nth-of-type(1)
+    .element-item-topic-head {
+    margin-top: 0;
+  }
+  .page-column-body {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 9;
+  }
+  .page-column-element .element-item {
+    position: relative;
+    border: 1px solid #333;
+    border-top: 0;
+  }
+  .page-column-element .element-item-card-head {
+    border: 0;
+  }
+  .page-column-element .element-item-topic-head {
+    margin-top: 10px;
+    border-top: 1px solid #333;
+  }
+
+  .page-locators {
+    position: absolute;
+    top: 60px;
+    left: 80px;
+    right: 80px;
+    bottom: 86px;
+    z-index: 8;
+  }
+  .page-locators-4 .page-locator-group:nth-of-type(2) {
+    left: 33.3%;
+    margin-left: -4.5mm;
+  }
+  .page-locators-4 .page-locator-group:nth-of-type(3) {
+    left: 66.6%;
+    margin-left: -2.3mm;
+  }
+  .page-locators-5 .page-locator-group:nth-of-type(2) {
+    left: 25%;
+    margin-left: -5.1mm;
+  }
+  .page-locators-5 .page-locator-group:nth-of-type(3) {
+    left: 50%;
+    margin-left: -3.4mm;
+  }
+  .page-locators-5 .page-locator-group:nth-of-type(4) {
+    left: 75%;
+    margin-left: -1.8mm;
+  }
+
+  .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 {
+    right: 0;
+  }
+  .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-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: 152px;
+  }
+  .page-number-text-cont {
+    height: 16px;
+    line-height: 16px;
+  }
+
+  .elem-title {
+    padding: 10px;
+    font-size: 14px;
+    font-weight: bold;
+    color: black;
+    line-height: 1;
+  }
+
+  .elem-body {
+    padding: 10px;
+  }
+
+  .grid-container {
+    margin-left: -10px;
+    margin-right: -10px;
+  }
+
+  .grid-row {
+    display: table;
+    width: 100%;
+    border-spacing: 10px 5px;
+    border-collapse: separate;
+  }
+  .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;
+  }
+
+  .card-head-title {
+    font-size: 24px;
+    font-family: "\6977\4F53";
+    font-weight: bold;
+    line-height: 33px;
+  }
+
+  .card-head-subtitle {
+    height: 45px;
+  }
+  .card-head-subtitle textarea,
+  .card-head-subtitle > p {
+    padding: 0 10px;
+    font-size: 14px;
+    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+      "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
+    font-weight: bold;
+    line-height: 20px;
+    text-align: center;
+    border-color: transparent;
+    background-color: transparent;
+    color: #000;
+    overflow: hidden;
+  }
+
+  .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-weight: bold;
+    font-size: 14px;
+  }
+  .card-head-body .stdinfo-item > span:first-child {
+    float: left;
+    background-color: #fff;
+    width: 60px;
+    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%;
+    overflow: hidden;
+  }
+  .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;
+    overflow: hidden;
+    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: 10px auto;
+    width: 20px;
+    height: 12px;
+    font-size: 10px;
+    line-height: 1;
+    text-align: center;
+    color: #666;
+    border: 1px solid #333;
+  }
+  .card-head-body .head-stdno .stdno-auto-barcode {
+    height: 80px;
+    padding: 10px 0;
+    text-align: center;
+  }
+  .card-head-body .head-stdno .stdno-auto-barcode > img {
+    height: 100%;
+    width: auto;
+    display: inline-block;
+    vertical-align: top;
+  }
+  .card-head-body .head-notice > h4 {
+    font-weight: bold;
+    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;
+    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: 8px 10px;
+    display: table-cell;
+    vertical-align: middle;
+    width: 133px;
+    border-right: 1px solid #000;
+  }
+  .card-head-body .head-dynamic-miss .head-dynamic-content {
+    height: 32px;
+  }
+  .card-head-body .head-dynamic-miss span {
+    display: block;
+  }
+  .card-head-body .head-dynamic-miss .dynamic-miss-title {
+    width: 32px;
+    float: left;
+  }
+  .card-head-body .head-dynamic-miss .dynamic-miss-body {
+    margin-left: 32px;
+    padding-top: 8px;
+    text-align: center;
+  }
+  .card-head-body .head-dynamic-fill {
+    display: table-cell;
+    vertical-align: middle;
+    padding: 8px 10px;
+  }
+  .card-head-body .head-dynamic-fill p {
+    line-height: 18px;
+    word-wrap: normal;
+  }
+  .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: 24px;
+    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: #666;
+    margin: 0 5px;
+  }
+  .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;
+  }
+  .card-head-body .head-dynamic-aorb .dynamic-aorb-barcode img {
+    display: block;
+    padding: 4px 0 4px;
+    position: relative;
+    margin: 0 auto;
+    height: 36px;
+  }
+  .card-head-body .head-dynamic-aorb .dynamic-aorb-rects {
+    padding: 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;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .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::before {
+    display: table;
+    content: "";
+  }
+  .card-head-body-auto-resize .rect-col {
+    float: left;
+    height: 100%;
+    padding: 5px;
+  }
+  .card-head-body-auto-resize .rect-col:first-child {
+    width: 324px;
+  }
+  .card-head-body-auto-resize .rect-col:last-child {
+    width: 440px;
+  }
+  .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 > h3 {
+    font-size: 16px;
+    height: 29px;
+    line-height: 28px;
+    border-bottom: 1px dotted #333;
+  }
+  .elem-topic-head > p {
+    font-size: 12px;
+    height: 29px;
+    line-height: 29px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .elem-line-horizontal {
+    height: 100%;
+    line-height: 10px;
+  }
+  .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-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;
+    color: #b0b0b0;
+    font-size: 30pt;
+    text-align: center;
+    left: 0;
+    width: 100%;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+  }
+  .elem-image > img {
+    max-height: 100%;
+    max-width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+
+  .elem-fill-question {
+    white-space: normal;
+  }
+  .elem-fill-question .elem-body {
+    padding: 10px 0 10px 20px;
+  }
+  .elem-fill-question .group-item {
+    display: inline-block;
+    vertical-align: top;
+    font-size: 0;
+    margin-bottom: 20px;
+  }
+  .elem-fill-question .question-item {
+    font-size: 0;
+  }
+  .elem-fill-question .question-item:last-child {
+    margin-bottom: 0 !important;
+  }
+  .elem-fill-question .option-item {
+    display: inline-block;
+    vertical-align: middle;
+    padding: 0;
+    width: 18px;
+    height: 12px;
+    text-align: center;
+    font-size: 10px;
+    line-height: 1;
+    border: 1px solid #000;
+    color: #666;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .elem-fill-question .option-item:first-child {
+    text-align: right;
+    border-color: transparent;
+    font-size: 12px;
+    color: #000;
+  }
+  .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-title {
+    padding-bottom: 0;
+  }
+  .elem-fill-line .elem-body {
+    padding-bottom: 30px;
+    font-size: 0;
+  }
+  .elem-fill-line .elem-fill-quesiton {
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    padding: 0 5px;
+    font-size: 12px;
+  }
+  .elem-fill-line .elem-fill-quesiton li {
+    height: 50px;
+    border-bottom: 1px solid #000;
+    position: relative;
+    z-index: 8;
+  }
+  .elem-fill-line .elem-fill-quesiton > li:first-child {
+    position: absolute;
+    height: 100%;
+    background-color: #fff;
+    top: 0;
+    left: 5px;
+    z-index: 9;
+    padding-top: 30px;
+    border: none;
+  }
+
+  .elem-explain-children .elem-title {
+    padding-bottom: 0;
+  }
+
+  .elem-explain-children .elem-body {
+    min-height: 60px;
+    position: relative;
+  }
+
+  .elem-explain-children .elem-explain-no {
+    position: absolute;
+    left: 20px;
+    top: 10px;
+    font-size: 12px;
+    z-index: 9;
+  }
+
+  .elem-explain-children .elem-explain-elements {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 8;
+  }
+
+  .elem-explain-children .explain-children-element .explain-element {
+    position: absolute;
+  }
+
+  .elem-composition .elem-body {
+    padding: 0;
+  }
+
+  .elem-composition-lines {
+    padding: 10px;
+  }
+  .elem-composition-lines li {
+    height: 50px;
+    border-bottom: 1px solid #000;
+  }
+
+  .elem-composition-elements {
+    padding: 5px 0;
+  }
+
+  .elem-composition .composition-element-item {
+    position: relative;
+  }
+</style>

src/assets/styles/card-design.scss

@@ -71,7 +71,6 @@
   }
 
   .page-column-main {
-    overflow: visible;
     &::before {
       content: "";
       display: block;
@@ -112,13 +111,26 @@
   // .topic-design
   .topic-design {
     + .resize-control {
-      display: none;
+      .control-point,
+      .control-line {
+        display: none;
+      }
+    }
+
+    &:hover {
+      + .resize-control {
+        .control-line {
+          display: block;
+        }
+      }
     }
 
-    &:hover,
     &-act {
       + .resize-control {
-        display: block;
+        .control-point,
+        .control-line {
+          display: block;
+        }
       }
     }
   }
@@ -380,13 +392,19 @@
 // explain-children-element
 .explain-children-element,
 .composition-element {
-  .resize-control {
+  .control-point,
+  .control-line {
     display: none;
   }
 
-  &:hover,
+  &:hover {
+    .resize-line {
+      display: block;
+    }
+  }
   &-act {
-    .resize-control {
+    .control-point,
+    .control-line {
       display: block;
     }
   }

src/assets/styles/card-preview.scss

@@ -1,7 +1,8 @@
 // card-preview
 .card-preview {
-  padding-top: 70px;
+  padding: 10px 0;
   background-color: #f0f0f0;
+  color: #000;
   .page-box {
     margin: 10px auto;
     box-shadow: 0 0 4px #ddd;
@@ -82,7 +83,7 @@
   height: 100%;
   top: 0;
   left: 0;
-  padding: 106px 80px;
+  padding: 60px 80px 86px;
   z-index: 9;
   font-size: 0;
 }
@@ -93,7 +94,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 8;
+  z-index: 7;
   background-color: transparent;
   overflow: hidden;
 }
@@ -149,7 +150,6 @@
   &-main {
     position: relative;
     height: 100%;
-    overflow: hidden;
     .page-column-element:nth-of-type(1) .element-item-topic-head {
       margin-top: 0;
     }
@@ -181,10 +181,10 @@
 // locator
 .page-locators {
   position: absolute;
-  top: 106px;
+  top: 60px;
   left: 80px;
   right: 80px;
-  bottom: 106px;
+  bottom: 86px;
   z-index: 8;
 
   &-4 {
@@ -237,7 +237,7 @@
     border-bottom: 16px solid #000;
     z-index: 99;
     &:first-child {
-      top: -46px;
+      top: -20px;
     }
     &:last-child {
       bottom: -46px;
@@ -247,7 +247,7 @@
 // page-number
 .page-number {
   position: absolute;
-  bottom: 60px;
+  bottom: 40px;
   &-rect {
     left: 152px;
   }
@@ -281,7 +281,7 @@
 // elem
 .elem {
   &-title {
-    padding: 10px 13px 20px;
+    padding: 10px;
     font-size: 14px;
     font-weight: bold;
     color: rgba(0, 0, 0, 1);
@@ -319,15 +319,15 @@
     text-align: center;
   }
   &-title {
-    font-size: 36px;
+    font-size: 24px;
     font-family: "楷体";
     font-weight: bold;
-    line-height: 48px;
+    line-height: 33px;
   }
   &-subtitle {
+    height: 45px;
     textarea,
     > p {
-      height: 55px;
       padding: 0 10px;
       font-size: 14px;
       font-family: $--font-family;
@@ -352,8 +352,8 @@
       word-break: break-all;
     }
     .stdinfo-item {
-      height: 34px;
-      line-height: 34px;
+      height: 30px;
+      line-height: 30px;
       position: relative;
       overflow: hidden;
 
@@ -407,9 +407,10 @@
       .stdno-empty {
         font-weight: bold;
         letter-spacing: 3px;
+        text-align: center;
       }
       .stdno-fill {
-        min-height: 286px;
+        min-height: 284px;
         height: 100%;
         position: relative;
 
@@ -457,13 +458,13 @@
         &-list {
           display: table-cell;
           width: 7.692%;
-          padding: 3px 0;
+          padding: 1px 0;
         }
         &-option {
-          margin: 8px auto;
+          margin: 10px auto;
           width: 20px;
-          height: 14px;
-          font-size: 12px;
+          height: 12px;
+          font-size: 10px;
           line-height: 1;
           text-align: center;
           color: #666;
@@ -546,7 +547,7 @@
         width: 100%;
       }
       &-miss {
-        padding: 10px;
+        padding: 8px 10px;
         display: table-cell;
         vertical-align: middle;
         width: 133px;
@@ -571,7 +572,7 @@
       &-fill {
         display: table-cell;
         vertical-align: middle;
-        padding: 10px;
+        padding: 8px 10px;
 
         p {
           line-height: 18px;
@@ -669,10 +670,10 @@
         .dynamic-aorb-barcode {
           img {
             display: block;
-            padding: 10px 0;
+            padding: 4px 0 4px;
             position: relative;
             margin: 0 auto;
-            height: 32px;
+            height: 36px;
           }
         }
         .dynamic-aorb-rects {
@@ -765,11 +766,13 @@
   text-align: center;
   > h3 {
     font-size: 16px;
+    height: 29px;
     line-height: 28px;
     border-bottom: 1px dotted #333;
   }
   > p {
     font-size: 12px;
+    height: 29px;
     line-height: 29px;
     white-space: nowrap;
     overflow: hidden;
@@ -872,14 +875,14 @@
 .elem-fill-question {
   white-space: normal;
   .elem-body {
-    padding: 10px 20px;
+    padding: 10px 0 10px 20px;
   }
 
   .group-item {
     display: inline-block;
     vertical-align: top;
     font-size: 0;
-    margin-bottom: 30px;
+    margin-bottom: 20px;
   }
   .question-item {
     font-size: 0;
@@ -892,10 +895,10 @@
     display: inline-block;
     vertical-align: middle;
     padding: 0;
-    width: 24px;
-    height: 14px;
+    width: 18px;
+    height: 12px;
     text-align: center;
-    font-size: 12px;
+    font-size: 10px;
     line-height: 1;
     border: 1px solid #000;
     color: #666;
@@ -905,7 +908,6 @@
       text-align: right;
       border-color: transparent;
       font-size: 12px;
-      margin-right: 20px !important;
       color: #000;
     }
     &:last-child {

src/assets/styles/variables.scss

@@ -34,4 +34,4 @@ $--font-size-medium: 16px !default;
 $--border-radius: 10px;
 
 $--font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
-  "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  "Microsoft YaHei", Arial, sans-serif;

src/modules/base/components/RuleCard.vue

@@ -59,7 +59,12 @@
         ></business-fields>
       </el-form-item>
       <el-form-item prop="attention" label="注意事项：">
-        <el-input type="textarea" v-model="modalForm.attention"></el-input>
+        <el-input
+          type="textarea"
+          :rows="4"
+          v-model="modalForm.attention"
+        ></el-input>
+        <p class="tips-info">提示：换行之后，题卡注意事项会展示为多条内容。</p>
       </el-form-item>
       <el-form-item prop="objectiveAttention" label="客观题注意事项：">
         <el-input v-model="modalForm.objectiveAttention"></el-input>

src/modules/base/views/UserEdit.vue

@@ -24,7 +24,7 @@
       </el-form-item>
       <el-form-item prop="roleCode" label="角色：">
         <el-select
-          style="width:142px;"
+          style="width:282px;"
           v-model="modalForm.roleCode"
           placeholder="请选择角色"
         >
@@ -43,9 +43,10 @@
         v-if="modalForm.roleCode === 'QUESTION_TEACHER'"
       >
         <el-select
-          style="width:142px;"
+          style="width:282px;"
           v-model="modalForm.courseId"
           placeholder="请选择科目"
+          multiple
         >
           <el-option
             v-for="item in courses"
@@ -72,13 +73,22 @@
 
 <script>
 import { updateUser, userDetail, roleList, courseList } from "../api";
+import { logout } from "../../login/api";
 
 export default {
   name: "user-edit",
   data() {
+    const courseIdValidator = (rule, value, callback) => {
+      if (!value || !value.length) {
+        callback(new Error("请选择科目"));
+      } else {
+        callback();
+      }
+    };
+
     return {
       modalForm: {
-        userId: "",
+        id: "",
         name: "",
         loginName: "",
         roleCode: "",
@@ -109,7 +119,7 @@ export default {
         courseId: [
           {
             required: true,
-            message: "请选择科目",
+            validator: courseIdValidator,
             trigger: "change"
           }
         ]
@@ -127,12 +137,13 @@ export default {
     async init() {
       const data = await roleList();
       this.roles = data.records;
-      this.user = await userDetail(this.$route.params.userId);
-      if (!this.user.account) {
+      const userRes = await userDetail(this.$route.params.userId);
+      if (!userRes.account) {
         this.$message.error("当前用户不存在!");
         return;
       }
-      this.modalForm = Object.assign({}, this.modalForm, this.user.account);
+      this.user = userRes.account;
+      this.modalForm = this.$objAssign(this.modalForm, this.user);
       this.getCourseList();
     },
     async getCourseList() {
@@ -159,12 +170,15 @@ export default {
 
       this.$message.success("修改成功！");
 
-      // 自己把自己的角色改了之后要刷新页面，重新获取权限
+      // 自己把自己的角色改了之后要重新登录，重新获取权限
       if (
         this.user.roleCode !== this.modalForm.roleCode &&
-        this.$ls.get("userId") === this.user.id
+        this.$ls.get("user").id === this.user.id
       ) {
-        window.location.reload();
+        await logout(this.$ls.get("user", { id: "" }).id);
+        this.$ls.clear();
+        this.$router.push({ name: "Login" });
+        this.$message.info("您的权限已经变更，请重新登录系统！");
       }
     }
   }

src/modules/base/views/UserManage.vue

@@ -56,6 +56,11 @@
             @upload-success="uploadSuccess"
           >
           </upload-button>
+          <el-button icon="icon icon-download-act">
+            <a :href="downloadUrl" download="用户导入模板.xlx"
+              >用户导入模板下载</a
+            >
+          </el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -145,6 +150,7 @@ export default {
       ABLE_TYPE,
       roles: [],
       users: [],
+      downloadUrl: this.GLOBAL.domain + "/temps/用户导入模版.xlsx",
       // import
       uploadUrl: this.GLOBAL.domain + "/api/print/basic/user/add",
       uploadData: {

src/modules/card/components/SavePage.vue

@@ -1,6 +1,6 @@
 <template>
   <el-button type="primary" @click="save" :disabled="!pages.length"
-    >保存</el-button
+    >暂存</el-button
   >
 </template>
 

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

@@ -7,9 +7,10 @@
           type="textarea"
           :rows="2"
           resize="none"
-          placeholder="请输入题卡名称"
+          placeholder="请输入题卡标题"
           @blur="nameChange"
           v-model="cardName"
+          id="cardNameInput"
           v-if="!preview && !data.isSimple"
         >
         </el-input>

src/modules/card/elementModel.js

@@ -162,9 +162,9 @@ const FILL_QUESTION_PROP = {
   optionCount: 5,
   questionCountPerGroup: 5,
   optionDirection: "horizontal",
-  questionGap: 10,
-  groupGap: 80,
-  optionGap: 10,
+  questionGap: 8,
+  groupGap: 22,
+  optionGap: 8,
   isSelect: true,
   isMultiply: false,
   fontSize: "14px"
@@ -189,7 +189,7 @@ const FILL_LINE_PROP = {
   x: 0,
   y: 0,
   w: 0,
-  h: 180,
+  h: 170,
   sign: "subjective",
   topicName: "",
   startNumber: 1,
@@ -214,7 +214,7 @@ const EXPLAIN_CHILDREN_PROP = {
   x: 0,
   y: 0,
   w: 0,
-  h: 425,
+  h: 458,
   sign: "subjective",
   // 小题序号
   explainNumber: 0,

src/modules/card/previewTemp.js

@@ -81,1094 +81,950 @@ const css =
     font-weight: bold;\
   }\
 \
-  .color-primary {\
-    color: #23c4b9 !important;\
-  }\
-\
-  .color-success {\
-    color: #1cd0a1;\
-  }\
-\
-  .color-warning {\
-    color: #ff9f45;\
-  }\
-\
-  .color-danger {\
-    color: #fe6c69;\
-  }\
-\
-  .color-info {\
-    color: #909399;\
-  }\
-\
-  .btn--danger.el-button--text {\
-    color: #fe6c69 !important;\
-  }\
-\
-  .btn-white {\
-    background-color: #fff !important;\
-    color: #999 !important;\
-  }\
-\
-  .font-bold {\
-    font-weight: bold;\
-  }\
-\
-  .table-head-bg th {\
-    background-color: #f6f6f6;\
-    color: #545454;\
-  }\
-\
-  .btn-act {\
-    background: #1cd0a1 !important;\
-    -webkit-box-shadow: 5px 5px 4px 0px rgba(28, 208, 161, 0.3);\
-    box-shadow: 5px 5px 4px 0px rgba(28, 208, 161, 0.3);\
-    border-radius: 10px;\
-  }\
-\
-  .card-preview {\
-    padding-top: 70px;\
-    background-color: #f0f0f0;\
-  }\
-\
-  .card-preview .page-box {\
-    margin: 10px auto;\
-    -webkit-box-shadow: 0 0 4px #ddd;\
-    box-shadow: 0 0 4px #ddd;\
-  }\
-\
-  .card-preview .element-item {\
-    width: 100% !important;\
-  }\
-\
-  .card-print {\
-    padding: 0;\
-  }\
-\
-  .card-print .page-box {\
-    margin: 0 auto;\
-    -webkit-box-shadow: none;\
-    box-shadow: none;\
-    page-break-after: always;\
-  }\
-\
-  .page-box {\
-    position: relative;\
-    width: 1587px;\
-    height: 1122px;\
-    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-3 .page-column:first-child {\
-    width: 430px;\
-  }\
-\
-  .page-box .page-main-3 .page-column:not(:first-child) {\
-    width: 508.5px;\
-  }\
-\
-  .page-box .page-main-4 .page-column:first-child {\
-    width: 430px;\
-  }\
-\
-  .page-box .page-main-4 .page-column:not(:first-child) {\
-    width: 335.5px;\
-  }\
-\
-  .page-box-1 .page-main-3 .page-column {\
-    width: 33.33% !important;\
-  }\
-\
-  .page-box-1 .page-main-4 .page-column {\
-    width: 25% !important;\
-  }\
-\
-  .page-main-inner {\
-    position: absolute;\
-    width: 100%;\
-    height: 100%;\
-    top: 0;\
-    left: 0;\
-    padding: 106px 80px;\
-    z-index: 9;\
-    font-size: 0;\
-  }\
-\
-  .page-main-outer {\
-    position: absolute;\
-    top: 0;\
-    left: 0;\
-    right: 0;\
-    bottom: 0;\
-    z-index: 8;\
-    background-color: transparent;\
-    overflow: hidden;\
-  }\
-\
-  .page-column {\
-    display: inline-block;\
-    vertical-align: middle;\
-    position: relative;\
-    height: 100%;\
-    width: 50%;\
-    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;\
-    background: linear-gradient(\
-        to top right,\
-        rgba(172, 172, 172, 0) 0%,\
-        rgba(172, 172, 172, 0) calc(50% - 1px),\
-        #acacac 50%,\
-        rgba(172, 172, 172, 0) calc(50% + 1px),\
-        rgba(172, 172, 172, 0) 100%\
-      ),\
-      linear-gradient(\
-        to bottom right,\
-        rgba(172, 172, 172, 0) 0%,\
-        rgba(172, 172, 172, 0) calc(50% - 1px),\
-        #acacac 50%,\
-        rgba(172, 172, 172, 0) calc(50% + 1px),\
-        rgba(172, 172, 172, 0) 100%\
-      );\
-  }\
-\
-  .page-column-forbid-area > p {\
-    color: #333;\
-    padding: 20px;\
-    position: absolute;\
-    top: 50%;\
-    left: 50%;\
-    -webkit-transform: translate(-50%, -50%);\
-    transform: translate(-50%, -50%);\
-    font-weight: bold;\
-    font-size: 30px;\
-    color: #999;\
-    background-color: #fff;\
-  }\
-\
-  .page-column-main {\
-    position: relative;\
-    height: 100%;\
-    overflow: hidden;\
-  }\
-\
-  .page-column-main\
-    .page-column-element:nth-of-type(1)\
-    .element-item-topic-head {\
-    margin-top: 0;\
-  }\
-\
-  .page-column-body {\
-    position: absolute;\
-    top: 0;\
-    bottom: 0;\
-    left: 0;\
-    right: 0;\
-    z-index: 9;\
-  }\
-\
-  .page-column-element .element-item {\
-    position: relative;\
-    border: 1px solid #333;\
-    border-top: 0;\
-  }\
-\
-  .page-column-element .element-item-card-head {\
-    border: 0;\
-  }\
-\
-  .page-column-element .element-item-topic-head {\
-    margin-top: 10px;\
-    border-top: 1px solid #333;\
-  }\
-\
-  .page-locators {\
-    position: absolute;\
-    top: 106px;\
-    left: 80px;\
-    right: 80px;\
-    bottom: 106px;\
-    z-index: 8;\
-  }\
-\
-  .page-locators-4 .page-locator-group:nth-of-type(2) {\
-    left: 33.3%;\
-    margin-left: -4.5mm;\
-  }\
-\
-  .page-locators-4 .page-locator-group:nth-of-type(3) {\
-    left: 66.6%;\
-    margin-left: -2.3mm;\
-  }\
-\
-  .page-locators-5 .page-locator-group:nth-of-type(2) {\
-    left: 25%;\
-    margin-left: -5.1mm;\
-  }\
-\
-  .page-locators-5 .page-locator-group:nth-of-type(3) {\
-    left: 50%;\
-    margin-left: -3.4mm;\
-  }\
-\
-  .page-locators-5 .page-locator-group:nth-of-type(4) {\
-    left: 75%;\
-    margin-left: -1.8mm;\
-  }\
-\
-  .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 {\
-    right: 0;\
-  }\
-\
-  .page-locator-group li {\
-    position: absolute;\
-    width: 24px;\
-    border-bottom: 16px solid #000;\
-    z-index: 99;\
-  }\
-\
-  .page-locator-group li:first-child {\
-    top: -46px;\
-  }\
-\
-  .page-locator-group li:last-child {\
-    bottom: -46px;\
-  }\
-\
-  .elem-title {\
-    padding: 10px 13px 20px;\
-    font-size: 14px;\
-    font-weight: bold;\
-    color: black;\
-    line-height: 1;\
-  }\
-\
-  .elem-body {\
-    padding: 10px;\
-  }\
-\
-  .grid-container {\
-    margin-left: -10px;\
-    margin-right: -10px;\
-  }\
-\
-  .grid-row {\
-    display: table;\
-    width: 100%;\
-    border-spacing: 10px 5px;\
-    border-collapse: separate;\
-  }\
-\
-  .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;\
-  }\
-\
-  .card-head-title {\
-    font-size: 36px;\
-    font-family: "宋体";\
-    font-weight: bold;\
-    line-height: 48px;\
-  }\
-\
-  .card-head-subtitle textarea,\
-  .card-head-subtitle > p {\
-    height: 55px;\
-    padding: 0 10px;\
-    font-size: 14px;\
-    font-family: "Helvetica Neue", Helvetica, "PingFang SC",\
-      "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;\
-    font-weight: bold;\
-    line-height: 20px;\
-    text-align: center;\
-    border-color: transparent;\
-    background-color: transparent;\
-    color: #000;\
-    overflow: hidden;\
-  }\
-\
-  .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: 34px;\
-    line-height: 34px;\
-    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-weight: bold;\
-    font-size: 14px;\
-  }\
-\
-  .card-head-body .stdinfo-item > span:first-child {\
-    float: left;\
-    background-color: #fff;\
-    width: 60px;\
-    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%;\
-    overflow: hidden;\
-  }\
-\
-  .card-head-body .head-stdno {\
-    height: 100%;\
-    padding: 0;\
-  }\
-\
-  .card-head-body .head-stdno .stdno-empty {\
-    font-weight: bold;\
-    letter-spacing: 3px;\
-  }\
-\
-  .card-head-body .head-stdno .stdno-fill {\
-    min-height: 286px;\
-    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;\
-    overflow: hidden;\
-    display: table;\
-    width: 100%;\
-  }\
-\
-  .card-head-body .head-stdno .stdno-fill-list {\
-    display: table-cell;\
-    width: 7.692%;\
-    padding: 3px 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: #666;\
-    border: 1px solid #333;\
-  }\
-\
-  .card-head-body .head-stdno .stdno-auto-barcode {\
-    height: 80px;\
-    padding: 10px 0;\
-    text-align: center;\
-  }\
-\
-  .card-head-body .head-stdno .stdno-auto-barcode > img {\
-    height: 100%;\
-    width: auto;\
-    display: inline-block;\
-    vertical-align: top;\
-  }\
-\
-  .card-head-body .head-notice > h4 {\
-    font-weight: bold;\
-    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;\
-    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;\
-    width: 133px;\
-    border-right: 1px solid #000;\
-  }\
-\
-  .card-head-body .head-dynamic-miss .head-dynamic-content {\
-    height: 32px;\
-  }\
-\
-  .card-head-body .head-dynamic-miss span {\
-    display: block;\
-  }\
-\
-  .card-head-body .head-dynamic-miss .dynamic-miss-title {\
-    width: 32px;\
-    float: left;\
-  }\
-\
-  .card-head-body .head-dynamic-miss .dynamic-miss-body {\
-    margin-left: 32px;\
-    padding-top: 8px;\
-    text-align: center;\
-  }\
-\
-  .card-head-body .head-dynamic-fill {\
-    display: table-cell;\
-    vertical-align: middle;\
-    padding: 10px;\
-  }\
-\
-  .card-head-body .head-dynamic-fill p {\
-    line-height: 18px;\
-    word-wrap: normal;\
-  }\
-\
-  .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: 24px;\
-    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: #666;\
-    margin: 0 5px;\
-  }\
-\
-  .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;\
-  }\
-\
-  .card-head-body .head-dynamic-aorb .dynamic-aorb-barcode img {\
-    display: block;\
-    padding: 10px 0;\
-    position: relative;\
-    margin: 0 auto;\
-    height: 32px;\
-  }\
-\
-  .card-head-body .head-dynamic-aorb .dynamic-aorb-rects {\
-    padding: 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;\
-    display: -webkit-box;\
-    display: -ms-flexbox;\
-    display: flex;\
-  }\
-\
-  .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::before {\
-    display: table;\
-    content: "";\
-  }\
-\
-  .card-head-body-auto-resize .rect-col {\
-    float: left;\
-    height: 100%;\
-    padding: 5px;\
-  }\
-\
-  .card-head-body-auto-resize .rect-col:first-child {\
-    width: 324px;\
-  }\
-\
-  .card-head-body-auto-resize .rect-col:last-child {\
-    width: 440px;\
-  }\
-\
-  .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 > h3 {\
-    font-size: 16px;\
-    line-height: 28px;\
-    border-bottom: 1px dotted #333;\
-  }\
-\
-  .elem-topic-head > p {\
-    font-size: 12px;\
-    line-height: 29px;\
-    white-space: nowrap;\
-    overflow: hidden;\
-    text-overflow: ellipsis;\
-  }\
-\
-  .elem-line-horizontal {\
-    height: 100%;\
-    line-height: 10px;\
-  }\
-\
-  .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-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;\
-    color: #b0b0b0;\
-    font-size: 30pt;\
-    text-align: center;\
-    left: 0;\
-    width: 100%;\
-    top: 50%;\
-    -webkit-transform: translateY(-50%);\
-    transform: translateY(-50%);\
-  }\
-\
-  .elem-image > img {\
-    max-height: 100%;\
-    max-width: 100%;\
-    position: absolute;\
-    top: 0;\
-    bottom: 0;\
-    left: 0;\
-    right: 0;\
-    margin: auto;\
-  }\
-\
-  .elem-fill-question {\
-    white-space: normal;\
-  }\
-\
-  .elem-fill-question .elem-body {\
-    padding: 10px 20px;\
-  }\
-\
-  .elem-fill-question .group-item {\
-    display: inline-block;\
-    vertical-align: top;\
-    font-size: 0;\
-    margin-bottom: 30px;\
-  }\
-\
-  .elem-fill-question .question-item {\
-    font-size: 0;\
-  }\
-\
-  .elem-fill-question .question-item:last-child {\
-    margin-bottom: 0 !important;\
-  }\
-\
-  .elem-fill-question .option-item {\
-    display: inline-block;\
-    vertical-align: middle;\
-    padding: 0;\
-    width: 24px;\
-    height: 14px;\
-    text-align: center;\
-    font-size: 12px;\
-    line-height: 1;\
-    border: 1px solid #000;\
-    color: #666;\
-    -webkit-box-sizing: border-box;\
-    box-sizing: border-box;\
-  }\
-\
-  .elem-fill-question .option-item:first-child {\
-    text-align: right;\
-    border-color: transparent;\
-    font-size: 12px;\
-    margin-right: 20px !important;\
-    color: #000;\
-  }\
-\
-  .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-title {\
-    padding-bottom: 0;\
-  }\
-\
-  .elem-fill-line .elem-body {\
-    font-size: 0;\
-    padding-bottom: 30px;\
-  }\
-\
-  .elem-fill-line .elem-fill-quesiton {\
-    display: inline-block;\
-    vertical-align: top;\
-    position: relative;\
-    padding: 0 5px;\
-    font-size: 12px;\
-  }\
-\
-  .elem-fill-line .elem-fill-quesiton li {\
-    height: 50px;\
-    border-bottom: 1px solid #000;\
-    position: relative;\
-    z-index: 8;\
-  }\
-\
-  .elem-fill-line .elem-fill-quesiton > li:first-child {\
-    position: absolute;\
-    height: 100%;\
-    background-color: #fff;\
-    top: 0;\
-    left: 5px;\
-    z-index: 9;\
-    padding-top: 30px;\
-    border: none;\
-  }\
-\
-  .elem-explain-children .elem-title {\
-    padding-bottom: 0;\
-  }\
-\
-  .elem-explain-children .elem-body {\
-    min-height: 60px;\
-    position: relative;\
-  }\
-\
-  .elem-explain-children .elem-explain-no {\
-    position: absolute;\
-    left: 20px;\
-    top: 10px;\
-    font-size: 12px;\
-    z-index: 9;\
-  }\
-\
-  .elem-explain-children .elem-explain-elements {\
-    position: absolute;\
-    width: 100%;\
-    height: 100%;\
-    top: 0;\
-    left: 0;\
-    z-index: 8;\
-  }\
-\
-  .elem-explain-children .explain-children-element .explain-element {\
-    position: absolute;\
-  }\
-\
-  .elem-composition .elem-body {\
-    padding: 0;\
-  }\
-\
-  .elem-composition-lines {\
-    padding: 10px;\
-  }\
-\
-  .elem-composition-lines li {\
-    height: 50px;\
-    border-bottom: 1px solid #000;\
-  }\
-\
-  .elem-composition-elements {\
-    padding: 5px 0;\
-  }\
-\
-  .elem-composition .composition-element-item {\
-    position: relative;\
-  }\
+.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-preview .element-item {\
+  width: 100% !important;\
+}\
+\
+.card-print {\
+  padding: 0;\
+}\
+.card-print .page-box {\
+  margin: 0 auto;\
+  -webkit-box-shadow: none;\
+  box-shadow: none;\
+  page-break-after: always;\
+}\
+\
+.page-box {\
+  position: relative;\
+  width: 1587px;\
+  height: 1122px;\
+  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-3 .page-column:first-child {\
+  width: 430px;\
+}\
+.page-box .page-main-3 .page-column:not(:first-child) {\
+  width: 508.5px;\
+}\
+.page-box .page-main-4 .page-column:first-child {\
+  width: 430px;\
+}\
+.page-box .page-main-4 .page-column:not(:first-child) {\
+  width: 335.5px;\
+}\
+.page-box-1 .page-main-3 .page-column {\
+  width: 33.33% !important;\
+}\
+.page-box-1 .page-main-4 .page-column {\
+  width: 25% !important;\
+}\
+\
+.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: 50%;\
+  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;\
+  background: linear-gradient(\
+      to top right,\
+      rgba(172, 172, 172, 0) 0%,\
+      rgba(172, 172, 172, 0) calc(50% - 1px),\
+      #acacac 50%,\
+      rgba(172, 172, 172, 0) calc(50% + 1px),\
+      rgba(172, 172, 172, 0) 100%\
+    ),\
+    linear-gradient(\
+      to bottom right,\
+      rgba(172, 172, 172, 0) 0%,\
+      rgba(172, 172, 172, 0) calc(50% - 1px),\
+      #acacac 50%,\
+      rgba(172, 172, 172, 0) calc(50% + 1px),\
+      rgba(172, 172, 172, 0) 100%\
+    );\
+}\
+.page-column-forbid-area > p {\
+  color: #333;\
+  padding: 20px;\
+  position: absolute;\
+  top: 50%;\
+  left: 50%;\
+  -webkit-transform: translate(-50%, -50%);\
+  transform: translate(-50%, -50%);\
+  font-weight: bold;\
+  font-size: 30px;\
+  color: #999;\
+  background-color: #fff;\
+}\
+.page-column-main {\
+  position: relative;\
+  height: 100%;\
+}\
+.page-column-main\
+  .page-column-element:nth-of-type(1)\
+  .element-item-topic-head {\
+  margin-top: 0;\
+}\
+.page-column-body {\
+  position: absolute;\
+  top: 0;\
+  bottom: 0;\
+  left: 0;\
+  right: 0;\
+  z-index: 9;\
+}\
+.page-column-element .element-item {\
+  position: relative;\
+  border: 1px solid #333;\
+  border-top: 0;\
+}\
+.page-column-element .element-item-card-head {\
+  border: 0;\
+}\
+.page-column-element .element-item-topic-head {\
+  margin-top: 10px;\
+  border-top: 1px solid #333;\
+}\
+\
+.page-locators {\
+  position: absolute;\
+  top: 60px;\
+  left: 80px;\
+  right: 80px;\
+  bottom: 86px;\
+  z-index: 8;\
+}\
+.page-locators-4 .page-locator-group:nth-of-type(2) {\
+  left: 33.3%;\
+  margin-left: -4.5mm;\
+}\
+.page-locators-4 .page-locator-group:nth-of-type(3) {\
+  left: 66.6%;\
+  margin-left: -2.3mm;\
+}\
+.page-locators-5 .page-locator-group:nth-of-type(2) {\
+  left: 25%;\
+  margin-left: -5.1mm;\
+}\
+.page-locators-5 .page-locator-group:nth-of-type(3) {\
+  left: 50%;\
+  margin-left: -3.4mm;\
+}\
+.page-locators-5 .page-locator-group:nth-of-type(4) {\
+  left: 75%;\
+  margin-left: -1.8mm;\
+}\
+\
+.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 {\
+  right: 0;\
+}\
+.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-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: 152px;\
+}\
+.page-number-text-cont {\
+  height: 16px;\
+  line-height: 16px;\
+}\
+\
+.elem-title {\
+  padding: 10px;\
+  font-size: 14px;\
+  font-weight: bold;\
+  color: black;\
+  line-height: 1;\
+}\
+\
+.elem-body {\
+  padding: 10px;\
+}\
+\
+.grid-container {\
+  margin-left: -10px;\
+  margin-right: -10px;\
+}\
+\
+.grid-row {\
+  display: table;\
+  width: 100%;\
+  border-spacing: 10px 5px;\
+  border-collapse: separate;\
+}\
+.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;\
+}\
+\
+.card-head-title {\
+  font-size: 24px;\
+  font-family: "宋体";\
+  font-weight: bold;\
+  line-height: 33px;\
+}\
+\
+.card-head-subtitle {\
+  height: 45px;\
+}\
+.card-head-subtitle textarea,\
+.card-head-subtitle > p {\
+  padding: 0 10px;\
+  font-size: 14px;\
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",\
+    "Microsoft YaHei", Arial, sans-serif;\
+  font-weight: bold;\
+  line-height: 20px;\
+  text-align: center;\
+  border-color: transparent;\
+  background-color: transparent;\
+  color: #000;\
+  overflow: hidden;\
+}\
+\
+.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-weight: bold;\
+  font-size: 14px;\
+}\
+.card-head-body .stdinfo-item > span:first-child {\
+  float: left;\
+  background-color: #fff;\
+  width: 60px;\
+  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%;\
+  overflow: hidden;\
+}\
+.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;\
+  overflow: hidden;\
+  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: 10px auto;\
+  width: 20px;\
+  height: 12px;\
+  font-size: 10px;\
+  line-height: 1;\
+  text-align: center;\
+  color: #666;\
+  border: 1px solid #333;\
+}\
+.card-head-body .head-stdno .stdno-auto-barcode {\
+  height: 80px;\
+  padding: 10px 0;\
+  text-align: center;\
+}\
+.card-head-body .head-stdno .stdno-auto-barcode > img {\
+  height: 100%;\
+  width: auto;\
+  display: inline-block;\
+  vertical-align: top;\
+}\
+.card-head-body .head-notice > h4 {\
+  font-weight: bold;\
+  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;\
+  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: 8px 10px;\
+  display: table-cell;\
+  vertical-align: middle;\
+  width: 133px;\
+  border-right: 1px solid #000;\
+}\
+.card-head-body .head-dynamic-miss .head-dynamic-content {\
+  height: 32px;\
+}\
+.card-head-body .head-dynamic-miss span {\
+  display: block;\
+}\
+.card-head-body .head-dynamic-miss .dynamic-miss-title {\
+  width: 32px;\
+  float: left;\
+}\
+.card-head-body .head-dynamic-miss .dynamic-miss-body {\
+  margin-left: 32px;\
+  padding-top: 8px;\
+  text-align: center;\
+}\
+.card-head-body .head-dynamic-fill {\
+  display: table-cell;\
+  vertical-align: middle;\
+  padding: 8px 10px;\
+}\
+.card-head-body .head-dynamic-fill p {\
+  line-height: 18px;\
+  word-wrap: normal;\
+}\
+.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: 24px;\
+  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: #666;\
+  margin: 0 5px;\
+}\
+.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;\
+}\
+.card-head-body .head-dynamic-aorb .dynamic-aorb-barcode img {\
+  display: block;\
+  padding: 4px 0 4px;\
+  position: relative;\
+  margin: 0 auto;\
+  height: 36px;\
+}\
+.card-head-body .head-dynamic-aorb .dynamic-aorb-rects {\
+  padding: 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;\
+  display: -webkit-box;\
+  display: -ms-flexbox;\
+  display: flex;\
+}\
+.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::before {\
+  display: table;\
+  content: "";\
+}\
+.card-head-body-auto-resize .rect-col {\
+  float: left;\
+  height: 100%;\
+  padding: 5px;\
+}\
+.card-head-body-auto-resize .rect-col:first-child {\
+  width: 324px;\
+}\
+.card-head-body-auto-resize .rect-col:last-child {\
+  width: 440px;\
+}\
+.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 > h3 {\
+  font-size: 16px;\
+  height: 29px;\
+  line-height: 28px;\
+  border-bottom: 1px dotted #333;\
+}\
+.elem-topic-head > p {\
+  font-size: 12px;\
+  height: 29px;\
+  line-height: 29px;\
+  white-space: nowrap;\
+  overflow: hidden;\
+  text-overflow: ellipsis;\
+}\
+\
+.elem-line-horizontal {\
+  height: 100%;\
+  line-height: 10px;\
+}\
+.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-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;\
+  color: #b0b0b0;\
+  font-size: 30pt;\
+  text-align: center;\
+  left: 0;\
+  width: 100%;\
+  top: 50%;\
+  -webkit-transform: translateY(-50%);\
+  transform: translateY(-50%);\
+}\
+.elem-image > img {\
+  max-height: 100%;\
+  max-width: 100%;\
+  position: absolute;\
+  top: 0;\
+  bottom: 0;\
+  left: 0;\
+  right: 0;\
+  margin: auto;\
+}\
+\
+.elem-fill-question {\
+  white-space: normal;\
+}\
+.elem-fill-question .elem-body {\
+  padding: 10px 0 10px 20px;\
+}\
+.elem-fill-question .group-item {\
+  display: inline-block;\
+  vertical-align: top;\
+  font-size: 0;\
+  margin-bottom: 20px;\
+}\
+.elem-fill-question .question-item {\
+  font-size: 0;\
+}\
+.elem-fill-question .question-item:last-child {\
+  margin-bottom: 0 !important;\
+}\
+.elem-fill-question .option-item {\
+  display: inline-block;\
+  vertical-align: middle;\
+  padding: 0;\
+  width: 18px;\
+  height: 12px;\
+  text-align: center;\
+  font-size: 10px;\
+  line-height: 1;\
+  border: 1px solid #000;\
+  color: #666;\
+  -webkit-box-sizing: border-box;\
+  box-sizing: border-box;\
+}\
+.elem-fill-question .option-item:first-child {\
+  text-align: right;\
+  border-color: transparent;\
+  font-size: 12px;\
+  color: #000;\
+}\
+.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-title {\
+  padding-bottom: 0;\
+}\
+.elem-fill-line .elem-body {\
+  padding-bottom: 30px;\
+  font-size: 0;\
+}\
+.elem-fill-line .elem-fill-quesiton {\
+  display: inline-block;\
+  vertical-align: top;\
+  position: relative;\
+  padding: 0 5px;\
+  font-size: 12px;\
+}\
+.elem-fill-line .elem-fill-quesiton li {\
+  height: 50px;\
+  border-bottom: 1px solid #000;\
+  position: relative;\
+  z-index: 8;\
+}\
+.elem-fill-line .elem-fill-quesiton > li:first-child {\
+  position: absolute;\
+  height: 100%;\
+  background-color: #fff;\
+  top: 0;\
+  left: 5px;\
+  z-index: 9;\
+  padding-top: 30px;\
+  border: none;\
+}\
+\
+.elem-explain-children .elem-title {\
+  padding-bottom: 0;\
+}\
+\
+.elem-explain-children .elem-body {\
+  min-height: 60px;\
+  position: relative;\
+}\
+\
+.elem-explain-children .elem-explain-no {\
+  position: absolute;\
+  left: 20px;\
+  top: 10px;\
+  font-size: 12px;\
+  z-index: 9;\
+}\
+\
+.elem-explain-children .elem-explain-elements {\
+  position: absolute;\
+  width: 100%;\
+  height: 100%;\
+  top: 0;\
+  left: 0;\
+  z-index: 8;\
+}\
+\
+.elem-explain-children .explain-children-element .explain-element {\
+  position: absolute;\
+}\
+\
+.elem-composition .elem-body {\
+  padding: 0;\
+}\
+\
+.elem-composition-lines {\
+  padding: 10px;\
+}\
+.elem-composition-lines li {\
+  height: 50px;\
+  border-bottom: 1px solid #000;\
+}\
+\
+.elem-composition-elements {\
+  padding: 5px 0;\
+}\
+\
+.elem-composition .composition-element-item {\
+  position: relative;\
+}\
 ';
 
 export default domeStr => {

src/modules/card/views/CardDesign.vue

@@ -83,9 +83,9 @@
             </div>
           </div>
           <!-- Develop btns -->
-          <!-- <card-config-prop-edit></card-config-prop-edit>
-          <br /><br />
-          <el-button @click="initCard">新建页面</el-button> -->
+          <card-config-prop-edit></card-config-prop-edit>
+          <!-- <br /><br /> -->
+          <!-- <el-button @click="initCard">新建页面</el-button> -->
         </div>
       </div>
 
@@ -134,6 +134,7 @@
                     <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"
@@ -258,9 +259,9 @@ import {
   TOPIC_LIST
 } from "../elementModel";
 import { transformField, getAOrBSystem } from "../enumerate";
+import CardConfigPropEdit from "../components/CardConfigPropEdit";
 import TopicElementEdit from "../components/TopicElementEdit";
 import PagePropEdit from "../components/PagePropEdit";
-// import CardConfigPropEdit from "../components/CardConfigPropEdit";
 import ElementPropEdit from "../components/elementPropEdit/ElementPropEdit";
 import RightClickMenu from "../components/RightClickMenu";
 import CardHeadSample from "../components/elementEdit/CardHeadSample";
@@ -270,9 +271,9 @@ import PageNumber from "../components/pageInfo/PageNumber";
 export default {
   name: "card-design",
   components: {
+    CardConfigPropEdit,
     TopicElementEdit,
     PagePropEdit,
-    // CardConfigPropEdit,
     ElementPropEdit,
     RightClickMenu,
     CardHeadSample,
@@ -453,6 +454,10 @@ export default {
     async save() {
       if (!this.cardConfig.cardName) {
         this.$message.error("题卡标题不能为空！");
+        this.setCurPageNo(0);
+        setTimeout(() => {
+          document.getElementById("cardNameInput").focus();
+        });
         return false;
       }
       const result = await saveCard(this.getCardData());

src/modules/exam-center/components/BusinessData.vue

@@ -55,7 +55,7 @@ export default {
   name: "business-data",
   props: {
     examCode: {
-      type: String
+      type: [String, Number]
     }
   },
   data() {

src/modules/exam-center/components/CardOptionDialog.vue

@@ -191,6 +191,8 @@ export default {
       }
 
       if (this.modalForm.cardSource === "1") {
+        // 暂存任务，确保以上传的试卷信息正常保存
+        this.$emit("draft-task");
         // 打开题卡编辑页，创建题卡，并预设需要绑定的任务
         this.$ls.set("prepareTcPCard", this.modalForm);
         this.$router.push({

src/modules/exam-center/views/ExamModify.vue

@@ -241,7 +241,7 @@ export default {
       this.goback();
     },
     toPreview() {
-      if (!this.modalForm.examCode) {
+      if (!this.modalForm.examCodeTemp) {
         this.$message.error("请先上传考务文件！");
         return;
       }

src/modules/exam-center/views/WaitTaskDetail.vue

@@ -67,6 +67,7 @@
       :data="task"
       ref="CardOptionDialog"
       @upload-sample-over="getData"
+      @draft-task="silentSave"
       @confirm="cardConfirm"
     ></card-option-dialog>
   </div>
@@ -260,6 +261,9 @@ export default {
       await saveWaitTask(this.getTaskData());
       this.$message.success("保存成功！");
       this.goback();
+    },
+    async silentSave() {
+      await saveWaitTask(this.getTaskData());
     }
   }
 };