teachcloud-print-web/src/modules/card/previewTemp.js

const css =
  '\
  body,\
  div,\
  ul,\
  ol,\
  li,\
  h1,\
  h2,\
  h3,\
  h4,\
  h5,\
  h6,\
  input,\
  p,\
  tr,\
  th,\
  td,\
  span,\
  a,\
  header,\
  footer,\
  i {\
    margin: 0;\
    padding: 0;\
    -webkit-box-sizing: border-box;\
    box-sizing: border-box;\
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);\
  }\
\
  li {\
    list-style: none;\
  }\
\
  em,\
  i,\
  u {\
    font-style: normal;\
  }\
  button {\
    font-family: "Helvetica Neue", Helvetica, "PingFang SC",\
      "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;\
  }\
\
  h1,\
  h2,\
  h3,\
  h4,\
  h5,\
  h6 {\
    font-size: 100%;\
  }\
\
  fieldset,\
  img {\
    border: 0;\
  }\
\
  abbr {\
    border: 0;\
    font-variant: normal;\
  }\
\
  a {\
    text-decoration: none;\
    color: inherit;\
    *color: #bbbbbb;\
  }\
\
  img {\
    vertical-align: middle;\
  }\
\
  body {\
    font-family: "Helvetica Neue", Helvetica, "PingFang SC",\
      "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;\
    -webkit-font-smoothing: antialiased;\
    -moz-osx-font-smoothing: grayscale;\
    font-size: 14px;\
    color: #545454;\
    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;\
  }\
';

export default domeStr => {
  return `
  <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0,
        maximum-scale=1.0,minimum-scale=1.0, user-scalable=no" "="">
        <meta name=" renderer" content="webkit|ie-comp|ie-stand" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>教务处平台题卡</title>

      </head>
      <style>${css}</style>
      <body>${domeStr}</body>
    </html>
  `;
};