union-question-web/src/modules/paper-export/previewTemp.js

import { resetCss, previewCss } from "../card/previewTemp";

const paperCss = `.paper-page{color:#000;}.paper-page .page-box-A3.page-box-0 .page-main-inner{padding:60px 40px 60px 160px;}.paper-page .page-box-A3.page-box-0 .page-main-inner.page-main-noside{padding:60px;}.paper-page .page-box-A3.page-box-1 .page-main-inner{padding:60px 160px 60px 40px;}.paper-page .page-box-A3.page-box-1 .page-main-inner.page-main-noside{padding:60px;}.paper-page .page-box-A3.page-box-1 .page-column-side{right:10px;left:auto;}.paper-page .page-box-8K .page-column-side{top:40px;bottom:40px;width:110px;left:10px;}.paper-page .page-box-8K.page-box-0 .page-main-inner{padding:40px 20px 40px 130px;}.paper-page .page-box-8K.page-box-0 .page-main-inner.page-main-noside{padding:40px;}.paper-page .page-box-8K.page-box-1 .page-main-inner{padding:40px 130px 40px 20px;}.paper-page .page-box-8K.page-box-1 .page-main-inner.page-main-noside{padding:40px;}.paper-page .page-box-8K.page-box-1 .page-column-side{right:10px;top:40px;left:auto;}.paper-page .page-box .page-column-body{word-wrap:normal;white-space:normal;}.paper-page .page-column-side{position:absolute;top:60px;bottom:60px;width:130px;left:10px;z-index:10;}.paper-page .page-column-side .column-side-body{position:absolute;top:0;bottom:0;left:0;right:0;z-index:9;}.paper-page .page-column-side .element-item{position:absolute;}.paper-page .page-column-element .element-item::before{border:none;}.elem-field-text .text-body{width:100%;position:relative;min-height:28px;overflow:hidden;}.elem-field-text .text-body>span{display:inline-block;vertical-align:top;position:relative;line-height:1;padding:7px 0;z-index:9;}.elem-field-text .text-body>span.text-label{background-color:#fff;}.elem-field-text .text-body.underline::before{content:"";display:block;position:absolute;width:100%;border-bottom:1px solid #000;bottom:2px;left:0;z-index:1;}.elem-field-text.is-side{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transform-origin:0 100%;transform-origin:0 100%;}.elem-pane-box .elem-body{min-height:60px;position:relative;}.elem-pane-box .elem-pane-box-elements{position:absolute;width:100%;height:100%;top:0;left:0;z-index:8;}.elem-pane-box .elem-pane-box-element .element-item{position:absolute;}.elem-rich-text img{max-width:100%;max-height:100%;height:auto !important;}.elem-paper-struct li{padding-left:30px;text-indent:-30px;}.elem-paper-struct li>span{display:inline-block;vertical-align:middle;width:30px;text-align:right;}.elem-score-table{text-align:center;}.elem-score-table .score-table{width:80%;border-spacing:0;border-collapse:collapse;margin:0 auto;}.elem-score-table td,.elem-score-table th{border:1px solid #000;padding:0 2px;height:30px;line-height:30px;}.elem-paper-props{display:table;width:80%;margin:0 auto;}.elem-paper-props .paper-prop-item{display:table-cell;vertical-align:middle;padding:6px 10px;line-height:20px;font-size:0;}.elem-paper-props .paper-prop-item:first-child{text-align:left !important;}.elem-paper-props .paper-prop-item:nth-of-type(2){text-align:center;}.elem-paper-props .paper-prop-item:last-child{text-align:right;}.elem-paper-props .paper-prop-label{display:inline-block;vertical-align:middle;font-size:14px;}.elem-paper-props .paper-prop-content{display:inline-block;vertical-align:middle;font-size:0;}.elem-paper-props .paper-prop-content>span{display:inline-block;vertical-align:middle;font-size:14px;}.elem-paper-props .paper-prop-option{display:inline-block;vertical-align:middle;margin:0 5px;font-size:0;}.elem-paper-props .paper-prop-option>span{display:inline-block;vertical-align:middle;font-size:14px;}.elem-paper-props .paper-prop-checkbox{width:16px;height:16px;border:1px solid #000;margin-left:5px;position:relative;}.elem-paper-props .paper-prop-checkbox.is-checked::before{content:"";display:block;position:absolute;width:5px;height:9px;left:4px;top:0;border-right:2px solid #000;border-bottom:2px solid #000;transform:rotate(45deg);-webkit-transform:rotate(45deg);}.elem-paper-props .paper-prop-val{padding:0 5px;min-width:30px;height:18px;line-height:18px;margin-left:5px;border-bottom:1px solid #000;text-align:center;}.paper-template-view .element-item-paper-struct{height:auto !important;}.paper-template-view .page-column-body{font-size:0px;}.paper-template-view .rich-text{font-size:14px;}.paper-template-view .topic-element-preview{font-size:14px;}.paper-template-view .group-item .elem-rich-text{display:inline-block;white-space:pre-wrap;width:100%;}.paper-template-view .group-item.is-detail-title{overflow:hidden;padding-bottom:5px;}.paper-template-view .group-item.is-detail-title .rich-text{display:inline;}.paper-template-view .group-item .detail-score-table{float:left;width:120px;border-spacing:0;border-collapse:collapse;margin-right:10px;}.paper-template-view .group-item .detail-score-table td,.paper-template-view .group-item .detail-score-table th{height:30px;line-height:30px;border:1px solid #000;font-size:16px;}`;
const otherCss = `.rich-text{display:inline-block;vertical-align:middle;line-height:20px;}.rich-text img[data-is-answer-point]{max-width:100%;max-height:16px;display:inline-block;vertical-align:middle;border-bottom:1px solid #000;padding: 0 5px;margin-top: -3px;}.rich-text audio{height:20px;display:inline-block;vertical-align:middle;margin-left:5px;margin-right:5px;}.rich-text u{text-decoration:underline;}.rich-text i{font-style:italic;}.rich-text b{font-weight:600;}`;

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>

        <style>
          @font-face {
            font-family: "黑体";
            src: url("../simhei.svg") format("svg");
          }
        </style>
        <style>${resetCss}${previewCss}${paperCss}${otherCss}</style>
      </head>
      <body>${domeStr}</body>
    </html>
  `;
};