试卷pdf导出

src/components/ModifyRichText.vue

@@ -26,7 +26,7 @@ export default {
   name: "ModifyRichText",
   props: {
     content: {
-      type: Object,
+      type: [Object, String],
       default() {
         return {};
       },
@@ -44,7 +44,7 @@ export default {
   },
   methods: {
     visibleChange() {
-      this.editCont = this.content;
+      this.editCont = this.content || { sections: [] };
     },
     cancel() {
       this.modalIsShow = false;

src/modules/paper-export/api.js

@@ -9,12 +9,12 @@ export const paperTemplatePageListApi = (datas) => {
     { params: datas }
   );
 };
-export const paperTemplateListApi = (type) => {
+export const paperTemplateListApi = (exportTemplateType) => {
   return $httpWithMsg.post(
     `${QUESTION_API}/paper_template/list`,
     {},
     {
-      params: { type },
+      params: { exportTemplateType },
     }
   );
 };
@@ -49,3 +49,8 @@ export const paperTemplateDeleteApi = (ids) => {
     }
   );
 };
+export const paperPdfDownloadApi = (datas) => {
+  return $httpWithMsg.post(QUESTION_API + "/paper/download_pdf", datas, {
+    responseType: "blob",
+  });
+};

src/modules/paper-export/views/PaperTemplateBuild.vue

@@ -1,13 +1,30 @@
 <template>
   <div class="paper-template-build">
-    <div v-if="isViewMode" style="text-align: center; margin-top: 10px">
-      <el-button type="primary" @click="toDownload">下载试卷</el-button>
+    <div class="paper-template-build-body">
+      <div v-if="isViewMode" class="box-justify margin_top_10">
+        <el-button type="primary" @click="toDownload">下载试卷</el-button>
+        <el-select
+          v-model="curPaperTemp"
+          class="size-select"
+          placeholder="请选择"
+          value-key="id"
+          @change="paperTempChange"
+        >
+          <el-option
+            v-for="item in paperTempList"
+            :key="item.id"
+            :label="item.name"
+            :value="item"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <paper-template-view
+        ref="PaperTemplateView"
+        :class="['preview-body', { 'is-view': isViewMode }]"
+        :pages="pages"
+      ></paper-template-view>
     </div>
-    <paper-template-view
-      ref="PaperTemplateView"
-      :class="['preview-body', { 'is-view': isViewMode }]"
-      :pages="pages"
-    ></paper-template-view>
   </div>
 </template>
 
@@ -19,7 +36,8 @@ import { getElementId, randomCode, deepCopy } from "../../card/plugins/utils";
 import { calcSum, maxNum } from "@/plugins/utils";
 import previewTemp from "../previewTemp";
 import { paperDetailInfoApi } from "../../paper/api";
-import { paperTemplateListApi } from "../api";
+import { paperTemplateListApi, paperPdfDownloadApi } from "../api";
+import { downloadByApi } from "@/plugins/download";
 // import paperJson from "./data/paper.json";
 // import paperTempJson from "./data/paper-temp.json";
 
@@ -52,6 +70,8 @@ export default {
       maxColumnWidth: 200,
       maxColumnHeight: 200,
       paperTempList: [],
+      curPaperTemp: {},
+      downloading: false,
     };
   },
   computed: {
@@ -86,9 +106,11 @@ export default {
         this.$message.error("导出模板缺失！");
         return Promise.reject();
       }
-      this.paperTempChange(this.paperTempList[0].id);
+      this.paperTempChange(this.paperTempList[0]);
     },
     paperTempChange(paperTemp) {
+      console.log(paperTemp);
+      this.curPaperTemp = paperTemp;
       let paperTempJson = paperTemp.content
         ? JSON.parse(paperTemp.content)
         : { pages: [] };
@@ -518,11 +540,37 @@ export default {
       }
     },
     getPreviewTemp() {
-      return previewTemp(this.$el.innerHTML);
+      return previewTemp(this.$refs.PaperTemplateView.$el.outerHTML);
     },
-    toDownload() {
-      // const htmlCont = this.getPreviewTemp();
+    async toDownload() {
+      const htmlCont = this.getPreviewTemp();
+
+      if (this.downloading) return;
+      this.downloading = true;
+
+      const res = await downloadByApi(() => {
+        return paperPdfDownloadApi({
+          content: htmlCont,
+          templateId: this.curPaperTemp.id,
+        });
+      }).catch((e) => {
+        this.$message.error(e || "下载失败，请重新尝试！");
+      });
+      this.downloading = false;
+
+      if (!res) return;
+      this.$message.success("下载成功！");
     },
   },
 };
 </script>
+
+<style>
+.paper-template-build {
+  text-align: center;
+}
+.paper-template-build-body {
+  display: inline-block;
+  text-align: initial;
+}
+</style>

src/modules/paper-export/views/lin.html

@@ -0,0 +1,1719 @@
+<!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>
+  a,
+  body,
+  div,
+  footer,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  header,
+  input,
+  li,
+  ol,
+  p,
+  span,
+  td,
+  th,
+  tr,
+  ul {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0)
+  }
+
+  li {
+    list-style: none
+  }
+
+  em,
+  i,
+  u {
+    font-style: normal
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: 100%;
+    font-weight: 700
+  }
+
+  fieldset,
+  img {
+    border: 0;
+  }
+
+  img {
+    vertical-align: middle;
+  }
+
+  body {
+    font-size: 14px;
+    color: #000;
+    background: #f5f5f5;
+  }
+
+  .card-preview {
+    padding: 10px 0;
+    background-color: #f0f0f0;
+    color: #000;
+  }
+
+  .card-preview .page-box {
+    margin: 10px auto;
+    -webkit-box-shadow: 0 0 4px #ddd;
+    box-shadow: 0 0 4px #ddd;
+  }
+
+  .card-print {
+    padding: 0;
+  }
+
+  .card-print .page-box {
+    margin: 0 auto;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    page-break-after: always;
+  }
+
+  .card-print .elem-fill-question-first .fill-question-sign {
+    display: none;
+  }
+
+  .page-box {
+    position: relative;
+    background: #fff;
+    margin: 0 auto;
+    font-weight: normal;
+    font-family: "宋体", "宋体-简", Arial, sans-serif;
+  }
+
+  .page-box .page-main {
+    height: 100%;
+    position: relative;
+    white-space: nowrap;
+    margin: 0 -10px;
+  }
+
+  .page-box .page-main-2 .page-column {
+    width: 50%;
+  }
+
+  .page-box .page-main-3 .page-column {
+    width: 33.33%;
+  }
+
+  .page-box .page-main-4 .page-column {
+    width: 25%;
+  }
+
+  .page-box-A3 {
+    width: 1586px;
+    height: 1122px;
+  }
+
+  .page-box-A3.page-box-0 .page-main-inner {
+    padding: 60px 40px 86px 160px;
+  }
+
+  .page-box-A3.page-box-1 .page-main-inner {
+    padding: 60px 160px 86px 40px;
+  }
+
+  .page-box-A3.page-box-1 .page-main-side {
+    right: 40px;
+    left: auto;
+  }
+
+  .page-box-A3 .page-main-1 .page-column-forbid-area::before {
+    width: 2000px;
+    -webkit-transform: rotate(34.326deg);
+    transform: rotate(34.326deg);
+  }
+
+  .page-box-A3 .page-main-1 .page-column-forbid-area::after {
+    width: 2000px;
+    -webkit-transform: rotate(-34.326deg);
+    transform: rotate(-34.326deg);
+  }
+
+  .page-box-A3 .page-main-2 .page-column-forbid-area::before {
+    -webkit-transform: rotate(54.98deg);
+    transform: rotate(54.98deg);
+  }
+
+  .page-box-A3 .page-main-2 .page-column-forbid-area::after {
+    -webkit-transform: rotate(-54.98deg);
+    transform: rotate(-54.98deg);
+  }
+
+  .page-box-A3 .page-main-3 .page-column-forbid-area::before {
+    -webkit-transform: rotate(64.6555deg);
+    transform: rotate(64.6555deg);
+  }
+
+  .page-box-A3 .page-main-3 .page-column-forbid-area::after {
+    -webkit-transform: rotate(-64.6555deg);
+    transform: rotate(-64.6555deg);
+  }
+
+  .page-box-A3 .page-main-4 .page-column-forbid-area::before {
+    -webkit-transform: rotate(70.3109deg);
+    transform: rotate(70.3109deg);
+  }
+
+  .page-box-A3 .page-main-4 .page-column-forbid-area::after {
+    -webkit-transform: rotate(-70.3109deg);
+    transform: rotate(-70.3109deg);
+  }
+
+  .page-box-A4 {
+    width: 793px;
+    height: 1122px;
+  }
+
+  .page-box-A4 .page-main-inner {
+    padding: 60px 45px 86px;
+  }
+
+  .page-box-A4 .page-main-1 .page-column-forbid-area::before {
+    -webkit-transform: rotate(54.216deg);
+    transform: rotate(54.216deg);
+  }
+
+  .page-box-A4 .page-main-1 .page-column-forbid-area::after {
+    -webkit-transform: rotate(-54.216deg);
+    transform: rotate(-54.216deg);
+  }
+
+  .page-box-A4 .page-main-2 .page-column-forbid-area::before {
+    -webkit-transform: rotate(70.5109deg);
+    transform: rotate(70.5109deg);
+  }
+
+  .page-box-A4 .page-main-2 .page-column-forbid-area::after {
+    -webkit-transform: rotate(-70.5109deg);
+    transform: rotate(-70.5109deg);
+  }
+
+  .page-box-8K {
+    width: 1399px;
+    height: 964px;
+  }
+
+  .page-box-8K .page-main-side {
+    position: absolute;
+    top: 40px;
+    bottom: 66px;
+    width: 90px;
+    left: 20px;
+  }
+
+  .page-box-8K.page-box-0 .page-main-inner {
+    padding: 40px 20px 66px 130px;
+  }
+
+  .page-box-8K.page-box-1 .page-main-inner {
+    padding: 40px 130px 66px 20px;
+  }
+
+  .page-box-8K.page-box-1 .page-main-side {
+    right: 20px;
+    top: 40px;
+    left: auto;
+  }
+
+  .page-box-8K .page-main-1 .page-column-forbid-area::before {
+    width: 2000px;
+    -webkit-transform: rotate(34.43deg);
+    transform: rotate(34.43deg);
+  }
+
+  .page-box-8K .page-main-1 .page-column-forbid-area::after {
+    width: 2000px;
+    -webkit-transform: rotate(-34.43deg);
+    transform: rotate(-34.43deg);
+  }
+
+  .page-box-8K .page-main-2 .page-column-forbid-area::before {
+    -webkit-transform: rotate(54.38deg);
+    transform: rotate(54.38deg);
+  }
+
+  .page-box-8K .page-main-2 .page-column-forbid-area::after {
+    -webkit-transform: rotate(-54.38deg);
+    transform: rotate(-54.38deg);
+  }
+
+  .page-box-8K .page-main-3 .page-column-forbid-area::before {
+    -webkit-transform: rotate(64.88deg);
+    transform: rotate(64.88deg);
+  }
+
+  .page-box-8K .page-main-3 .page-column-forbid-area::after {
+    -webkit-transform: rotate(-64.88deg);
+    transform: rotate(-64.88deg);
+  }
+
+  .page-box-8K .page-main-4 .page-column-forbid-area::before {
+    -webkit-transform: rotate(70.95deg);
+    transform: rotate(70.95deg);
+  }
+
+  .page-box-8K .page-main-4 .page-column-forbid-area::after {
+    -webkit-transform: rotate(-70.95deg);
+    transform: rotate(-70.95deg);
+  }
+
+  .page-box-8K .page-locator {
+    position: absolute;
+  }
+
+  .page-box-8K .page-locator-top {
+    top: 20px;
+  }
+
+  .page-box-8K .page-locator-bottom {
+    bottom: 20px;
+  }
+
+  .page-box-8K .page-locator-item {
+    width: 20px;
+    border-bottom: 14px solid #000;
+  }
+
+  .page-box-8K .page-locator-item:nth-of-type(1) {
+    left: 40px;
+  }
+
+  .page-box-8K .page-locator-item:nth-of-type(2) {
+    right: 86px;
+  }
+
+  .page-box-8K .page-number-rect {
+    bottom: 20px;
+    left: 260px;
+  }
+
+  .page-box-8K .page-number-rect-list li {
+    width: 24px;
+    height: 16px;
+  }
+
+  .page-box-8K .page-number-rect-list li.rect-li-act {
+    border-bottom: 16px solid #000;
+  }
+
+  .page-box-8K .page-number-text-cont {
+    height: 14px;
+    line-height: 14px;
+  }
+
+  .page-main-side {
+    position: absolute;
+    top: 60px;
+    bottom: 86px;
+    width: 90px;
+    left: 40px;
+    z-index: 10;
+  }
+
+  .page-main-side .free-topic-preview {
+    position: absolute;
+  }
+
+  .page-main-side .element-item-gutter {
+    height: 100% !important;
+  }
+
+  .page-main-side .element-item-fill-field {
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+  }
+
+  .page-main-inner {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    padding: 60px 40px 86px 40px;
+    z-index: 9;
+    font-size: 0;
+  }
+
+  .page-main-outer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 7;
+    background-color: transparent;
+    overflow: hidden;
+  }
+
+  .page-column {
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    font-size: 14px;
+    padding: 0 10px;
+  }
+
+  .page-column-forbid-area {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+    border: 1px solid #000;
+    overflow: hidden;
+  }
+
+  .page-column-forbid-area::before {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 1200px;
+    border-bottom: 1px solid rgb(172, 172, 172);
+    top: 0;
+    left: 0;
+    -webkit-transform: rotate(54.216deg);
+    transform: rotate(54.216deg);
+    -webkit-transform-origin: left;
+    transform-origin: left;
+    z-index: 1;
+  }
+
+  .page-column-forbid-area::after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 1200px;
+    border-bottom: 1px solid rgb(172, 172, 172);
+    bottom: 0;
+    left: 0;
+    -webkit-transform: rotate(-54.216deg);
+    transform: rotate(-54.216deg);
+    -webkit-transform-origin: left;
+    transform-origin: left;
+    z-index: 1;
+  }
+
+  .page-column-forbid-area>p {
+    padding: 20px;
+    position: absolute;
+    width: 260px;
+    height: 82px;
+    top: 50%;
+    left: 50%;
+    margin-top: -41px;
+    margin-left: -130px;
+    z-index: 9;
+    font-weight: bold;
+    font-size: 30px;
+    color: #999;
+    background-color: #fff;
+    text-align: center;
+  }
+
+  .page-column-main {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .page-column-body {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 9;
+  }
+
+  .page-column-element .element-item {
+    position: relative;
+    background-color: #fff;
+  }
+
+  .page-column-element .element-item-width {
+    width: 100% !important;
+  }
+
+  .page-column-element .element-item::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    z-index: 2;
+    border: 1px solid #000;
+    border-top: 0;
+  }
+
+  .page-column-element .element-item>div {
+    z-index: 9;
+    position: relative;
+  }
+
+  .page-column-element .element-item-card-head::before {
+    border: 0;
+  }
+
+  .page-column-element .element-item-topic-head::before {
+    border: 0;
+  }
+
+  .page-column-element .element-item-fill-question::before,
+  .page-column-element .element-item-fill-line::before {
+    border-bottom: 0;
+  }
+
+  .page-column-element .element-item-explain::before {
+    border-bottom-color: transparent;
+  }
+
+  .page-column-element .element-item-type-last::before {
+    border-bottom: 1px solid #000;
+  }
+
+  .page-column-element:last-child .element-item::before {
+    border-bottom: 1px solid #000;
+  }
+
+  .page-column-element:last-child .element-item-card-head.element-item-type-pre::before {
+    border-bottom: none;
+  }
+
+  .page-column .page-number {
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    bottom: -20px;
+  }
+
+  .page-locator {
+    position: absolute;
+    left: 80px;
+    right: 80px;
+    height: 16px;
+    z-index: 8;
+  }
+
+  .page-locator-top {
+    top: 40px;
+  }
+
+  .page-locator-bottom {
+    bottom: 40px;
+  }
+
+  .page-locator-item {
+    position: absolute;
+    width: 24px;
+    border-bottom: 16px solid #000;
+    top: 0;
+  }
+
+  .page-locator-item:nth-of-type(1) {
+    left: 50px;
+  }
+
+  .page-locator-item:nth-of-type(2) {
+    right: 96px;
+  }
+
+  .page-number-rect {
+    position: absolute;
+    bottom: 40px;
+    left: 300px;
+  }
+
+  .page-number-rect-list {
+    font-size: 0;
+  }
+
+  .page-number-rect-list li {
+    display: inline-block;
+    vertical-align: top;
+    font-size: 14px;
+    width: 30px;
+    height: 20px;
+    border: 1px solid #000;
+    margin-right: 10px;
+  }
+
+  .page-number-rect-list li.rect-li-act {
+    height: 0;
+    border: none;
+    border-bottom: 20px solid #000;
+  }
+
+  .page-number-text-cont {
+    height: 16px;
+    line-height: 16px;
+  }
+
+  .elem-title {
+    padding: 10px;
+    font-size: 14px;
+    color: rgb(0, 0, 0);
+    line-height: 1;
+    white-space: normal;
+  }
+
+  .elem-body {
+    padding: 10px;
+  }
+
+  .grid-container {
+    margin-left: -10px;
+    margin-right: -10px;
+  }
+
+  .grid-row {
+    display: table;
+    width: 100%;
+    border-spacing: 10px 0;
+    border-collapse: separate;
+  }
+
+  .grid-row:nth-of-type(2) {
+    margin-top: 10px;
+  }
+
+  .grid-row .grid-col {
+    display: table-cell;
+    width: 50%;
+    vertical-align: top;
+    border: 1px solid #000;
+  }
+
+  .grid-row .grid-col-dash {
+    border-style: dashed;
+    vertical-align: middle;
+  }
+
+  .card-head-title {
+    text-align: center;
+    color: #000;
+    font-size: 24px;
+    font-weight: bold;
+    overflow: hidden;
+  }
+
+  .card-head-title>h1 {
+    line-height: 40px;
+    white-space: nowrap;
+    letter-spacing: -1px;
+  }
+
+  .card-head-info {
+    padding-bottom: 30px;
+  }
+
+  .card-head-info .info-item {
+    height: 30px;
+    line-height: 30px;
+    position: relative;
+    overflow: hidden;
+    width: 80%;
+    margin: 0 auto;
+  }
+
+  .card-head-info .info-item::after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    border-bottom: 1px solid #000;
+    bottom: 6px;
+    left: 0;
+    z-index: 1;
+  }
+
+  .card-head-info .info-item>span {
+    z-index: 2;
+    display: block;
+    position: relative;
+    font-size: 14px;
+  }
+
+  .card-head-info .info-item>span:first-child {
+    float: left;
+    background-color: #fff;
+    text-align: justify;
+  }
+
+  .card-head-info .info-item>span:nth-of-type(2) {
+    float: left;
+    width: 20px;
+    background-color: #fff;
+  }
+
+  .card-head-info .info-item>span:last-child {
+    height: 100%;
+  }
+
+  .card-head-notice {
+    border: 1px solid #000;
+    padding: 6px 8px;
+  }
+
+  .card-head-notice>h4 {
+    font-weight: normal;
+    margin-bottom: 8px;
+  }
+
+  .card-head-notice-cont {
+    line-height: 1.5;
+    font-size: 12px;
+    margin-bottom: 5px;
+  }
+
+  .card-head-notice-cont>span {
+    display: block;
+  }
+
+  .card-head-notice-cont>span:first-child {
+    width: 20px;
+    white-space: nowrap;
+    float: left;
+  }
+
+  .card-head-notice-cont>span:last-child {
+    margin-left: 20px;
+    white-space: normal;
+  }
+
+  .card-head-dynamic {
+    padding: 6px 8px;
+    border: 1px solid #000;
+    border-top: none;
+  }
+
+  .card-head-dynamic p {
+    display: inline-block;
+    vertical-align: middle;
+    line-height: 18px;
+    word-wrap: normal;
+  }
+
+  .card-head-dynamic p:first-child {
+    margin-right: 100px;
+  }
+
+  .card-head-dynamic p>span,
+  .card-head-dynamic p>i {
+    display: inline-block;
+    vertical-align: middle;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
+  .card-head-dynamic p:first-child i {
+    width: 28px;
+    height: 14px;
+    background-color: #000;
+  }
+
+  .card-head-dynamic 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-dynamic p:last-child>i:last-child {
+    margin-right: 0;
+  }
+
+  .card-head-dynamic 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-dynamic 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;
+  }
+
+  .elem-topic-head {
+    text-align: center;
+  }
+
+  .elem-topic-head .elem-body {
+    padding: 0;
+    border: 1px solid #000;
+  }
+
+  .elem-topic-head-pad {
+    padding-top: 10px;
+  }
+
+  .elem-topic-head h3 {
+    font-size: 16px;
+    height: 29px;
+    line-height: 28px;
+    border-bottom: 1px dotted #000;
+    font-weight: normal;
+  }
+
+  .elem-topic-head p {
+    font-size: 12px;
+    height: 29px;
+    line-height: 29px;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .elem-line-horizontal {
+    height: 100%;
+    line-height: 30px;
+  }
+
+  .elem-line-horizontal .line-body {
+    display: inline-block;
+    vertical-align: middle;
+    width: 100%;
+    border-bottom: 1px solid #000;
+  }
+
+  .elem-line-vertical {
+    height: 100%;
+    text-align: center;
+  }
+
+  .elem-line-vertical .line-body {
+    display: inline-block;
+    vertical-align: top;
+    height: 100%;
+    border-left: 1px solid #000;
+  }
+
+  .elem-lines .line-item {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .elem-rect .rect-body {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  .elem-text .text-body {
+    padding: 5px;
+    line-height: 1.4;
+  }
+
+  .elem-text .text-body span {
+    white-space: pre-wrap;
+    word-wrap: normal;
+    word-break: break-all;
+  }
+
+  .elem-text .text-body span.cont-variate {
+    color: #a0a0a0;
+    margin: 0 2px;
+  }
+
+  .elem-barcode {
+    height: 100%;
+    border-color: transparent;
+    border-width: 1pt;
+    position: relative;
+  }
+
+  .elem-barcode>img {
+    max-height: 100%;
+    max-width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+
+  .elem-image {
+    height: 100%;
+    border-color: transparent;
+    border-width: 1pt;
+    position: relative;
+  }
+
+  .elem-image>p {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: table;
+    text-align: center;
+    color: #b0b0b0;
+    font-size: 30pt;
+  }
+
+  .elem-image>p i {
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  .elem-image>img {
+    max-height: 100%;
+    max-width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+
+  .elem-grids>table {
+    table-layout: fixed;
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+
+  .elem-grids>table td {
+    border: 1px solid #000;
+  }
+
+  .elem-grids-halving>table {
+    table-layout: auto;
+    width: 100%;
+  }
+
+  .elem-fill-question {
+    white-space: normal;
+  }
+
+  .elem-fill-question .fill-question-sign {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 99;
+    color: #fff;
+    padding: 6px 10px;
+    line-height: 1;
+    font-size: 18px;
+    border-bottom-left-radius: 10px;
+    display: none;
+  }
+
+  .elem-fill-question .fill-question-sign.is-simple {
+    background-color: #65d5ad;
+  }
+
+  .elem-fill-question .fill-question-sign.is-multiply {
+    background-color: #617bea;
+  }
+
+  .elem-fill-question .fill-question-sign.is-boolean {
+    background-color: #ffa952;
+  }
+
+  .elem-fill-question-first .fill-question-sign {
+    display: block;
+  }
+
+  .elem-fill-question .elem-body {
+    padding: 18px 0 18px 16px;
+    font-size: 0px;
+  }
+
+  .elem-fill-question .group-item {
+    font-family: "Times New Roman", Arial, sans-serif;
+    display: inline-block;
+    vertical-align: top;
+    font-size: 0;
+  }
+
+  .elem-fill-question .question-item {
+    font-size: 0;
+  }
+
+  .elem-fill-question .option-item {
+    display: inline-block;
+    vertical-align: middle;
+    padding: 0;
+    width: 18px;
+    height: 14px;
+    text-align: center;
+    font-size: 12px;
+    line-height: 1;
+    border: 1px solid #000;
+    color: #000;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
+  .elem-fill-question .option-item>i {
+    display: inline-block;
+    -webkit-transform: scale(0.67, 0.67);
+    transform: scale(0.67, 0.67);
+  }
+
+  .elem-fill-question .option-item:first-child {
+    text-align: right;
+    border-color: transparent;
+    font-size: 12px;
+    color: #000;
+  }
+
+  .elem-fill-question .option-item:first-child>i {
+    -webkit-transform: scale(1, 1);
+    transform: scale(1, 1);
+  }
+
+  .elem-fill-question .option-item:last-child {
+    margin-right: 0 !important;
+  }
+
+  .elem-fill-question-vertical .question-item {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .elem-fill-question-vertical .question-item:last-child {
+    margin-right: 0 !important;
+  }
+
+  .elem-fill-question-vertical .option-item {
+    display: block;
+  }
+
+  .elem-fill-question-vertical .option-item:first-child {
+    padding: 0;
+    text-align: center;
+  }
+
+  .elem-fill-question-vertical .option-item:last-child {
+    margin-bottom: 0 !important;
+  }
+
+  .elem-fill-area .option-item {
+    display: inline-block;
+    vertical-align: middle;
+    width: 30px;
+    height: 16px;
+    border: 1px solid #000;
+  }
+
+  .elem-fill-area .option-item:last-child {
+    margin-right: 0 !important;
+  }
+
+  .elem-fill-area-vertical .option-item {
+    display: block;
+  }
+
+  .elem-fill-area-vertical .option-item:last-child {
+    margin-bottom: 0 !important;
+  }
+
+  .elem-fill-line {
+    white-space: normal;
+  }
+
+  .elem-fill-line .elem-body {
+    padding: 0 15px 0 10px;
+    font-size: 0;
+  }
+
+  .elem-fill-line .elem-fill-quesiton {
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    padding: 0 1px;
+    font-size: 12px;
+  }
+
+  .elem-fill-line .elem-fill-quesiton li.elem-fill-line {
+    height: 40px;
+    position: relative;
+    margin: 0 10px 0 20px;
+    z-index: 8;
+  }
+
+  .elem-fill-line .elem-fill-quesiton li.elem-fill-line::after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    border-bottom: 1px solid #000;
+    bottom: 8px;
+  }
+
+  .elem-fill-line .elem-fill-quesiton li.elem-fill-no {
+    position: absolute;
+    top: 2px;
+    bottom: 2px;
+    left: 1px;
+    z-index: 9;
+    min-width: 20px;
+    text-align: left;
+    background-color: #fff;
+    border: none;
+  }
+
+  .elem-fill-line .elem-fill-quesiton li.elem-fill-no span {
+    display: block;
+    position: relative;
+    padding-bottom: 5px;
+    padding-right: 3px;
+    -webkit-transform: translateY(-100%);
+    transform: translateY(-100%);
+  }
+
+  .elem-fill-line .elem-fill-quesiton li.elem-fill-comma {
+    position: absolute;
+    top: 0;
+    right: -10px;
+    z-index: 9;
+    -webkit-transform: translateY(-100%);
+    transform: translateY(-100%);
+    width: 10px;
+    padding-bottom: 4px;
+    background-color: #fff;
+    text-align: center;
+    border: none;
+  }
+
+  .elem-explain .elem-title {
+    padding-bottom: 0;
+  }
+
+  .elem-explain .elem-body {
+    min-height: 60px;
+    position: relative;
+  }
+
+  .elem-explain .elem-explain-no {
+    position: absolute;
+    left: 20px;
+    top: 10px;
+    font-size: 12px;
+    z-index: 9;
+  }
+
+  .elem-explain .elem-explain-elements {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 8;
+  }
+
+  .elem-explain .elem-explain-element .explain-element-body {
+    position: absolute;
+  }
+
+  .elem-composition .elem-title {
+    padding-bottom: 0;
+  }
+
+  .elem-composition .elem-body {
+    min-height: 60px;
+    position: relative;
+  }
+
+  .elem-composition-elements {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 8;
+  }
+
+  .elem-composition .elem-composition-element .composition-element-body {
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .elem-fill-number {
+    border: 1px solid #000;
+  }
+
+  .elem-fill-number .fill-number-rect {
+    font-size: 0;
+    height: 27px;
+    border-bottom: 1px solid #000;
+  }
+
+  .elem-fill-number .fill-number-number {
+    display: inline-block;
+    vertical-align: top;
+    width: 7.692%;
+    height: 100%;
+  }
+
+  .elem-fill-number .fill-number-number:not(:last-child) {
+    border-right: 1px solid #000;
+  }
+
+  .elem-fill-number .fill-number-head {
+    height: 51px;
+  }
+
+  .elem-fill-number .fill-number-head>h5 {
+    border-bottom: 1px solid #000;
+    line-height: 24px;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+  }
+
+  .elem-fill-number .fill-number-body {
+    display: table;
+    width: 100%;
+  }
+
+  .elem-fill-number .fill-number-list {
+    display: table-cell;
+    width: 7.692%;
+    padding: 1px 0;
+  }
+
+  .elem-fill-number .fill-number-option {
+    margin: 8px auto;
+    width: 20px;
+    height: 14px;
+    font-size: 12px;
+    line-height: 1;
+    text-align: center;
+    color: #000;
+    border: 1px solid #000;
+    font-family: "Times New Roman", Arial, sans-serif;
+  }
+
+  .elem-fill-number .fill-number-option>i {
+    display: inline-block;
+    -webkit-transform: scale(0.67, 0.67);
+    transform: scale(0.67, 0.67);
+  }
+
+  .elem-fill-field {
+    white-space: normal;
+    overflow: hidden;
+    font-size: 0;
+  }
+
+  .fill-field-item {
+    display: inline-block;
+    padding: 0 10px;
+    width: 100%;
+    font-size: 14px;
+  }
+
+  .fill-field-content {
+    height: 30px;
+    line-height: 26px;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .fill-field-content::after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 100%;
+    border-bottom: 1px solid #000;
+    bottom: 2px;
+    left: 0;
+    z-index: 1;
+  }
+
+  .fill-field-content>span {
+    z-index: 2;
+    display: inline-block;
+    position: relative;
+    font-size: 14px;
+    vertical-align: top;
+  }
+
+  .fill-field-content>span:first-child {
+    background-color: #fff;
+    text-align: justify;
+  }
+
+  .fill-field-content>span:nth-of-type(2) {
+    width: 10px;
+    background-color: #fff;
+  }
+
+  .elem-fill-pane {
+    font-size: 0;
+    white-space: normal;
+    overflow: hidden;
+  }
+
+  .elem-fill-pane .fill-pane-item {
+    display: inline-block;
+    vertical-align: top;
+    font-size: 14px;
+  }
+
+  .elem-fill-pane .fill-pane-cont {
+    border: 1px solid #000;
+  }
+
+  .elem-gutter {
+    position: relative;
+    width: 30px;
+    height: 100%;
+  }
+
+  .elem-gutter-left {
+    border-right: 1px solid #000;
+  }
+
+  .elem-gutter-right {
+    border-left: 1px solid #000;
+  }
+
+  .elem-gutter-content {
+    position: absolute;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+  }
+
+  .elem-gutter-content>span {
+    display: block;
+    padding: 5px;
+    line-height: 20px;
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+  }
+
+  .card-free-preview:not(.card-print) {
+    padding: 10px 0;
+    background-color: #f0f0f0;
+  }
+
+  .card-free-preview:not(.card-print) .page-box {
+    margin: 10px auto;
+    -webkit-box-shadow: 0 0 4px #ddd;
+    box-shadow: 0 0 4px #ddd;
+  }
+
+  .card-free-preview .page-column-element .element-item {
+    position: absolute;
+  }
+
+  .card-free-preview .page-column-element .element-item::before {
+    display: none;
+  }
+
+  .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: 0
+  }
+
+  .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 {
+    display: inline-block;
+    white-space: pre-wrap
+  }
+</style>
+
+<body>
+  <div class="paper-template-view card-view paper-page preview-body is-view">
+    <div class="page-box page-box-A3 page-box-0">
+      <div class="page-main-inner">
+        <div class="page-main page-main-2" style="margin: 0px -20px;">
+          <div class="page-column" style="padding: 0px 20px;">
+            <div id="column-0-0" class="page-column-main">
+              <div class="page-column-body">
+                <div class="topic-element-preview page-column-element">
+                  <div id="preview-element-e0u1f3loa7ns5eqo" data-type="PANE_BOX"
+                    class="topic-preview element-item element-item-width element-item-pane-box"
+                    style="left: 0px; top: 0px; width: 673px; height: 286px;">
+                    <div class="elem-pane-box">
+                      <div class="elem-body" style="height: 286px;">
+                        <div class="elem-pane-box-elements">
+                          <div class="topic-element-preview elem-pane-box-element">
+                            <div id="preview-element-leheigu832v0k9ur" data-type="TEXT"
+                              class="topic-preview element-item element-item-text"
+                              style="left: 201px; top: 106px; width: 200px; height: 50px; z-index: 9;">
+                              <div class="elem-text" preview="">
+                                <div class="text-body"
+                                  style="font-weight: 400; font-family: 宋体; font-size: 14px; color: rgb(0, 0, 0);"><span
+                                    class="cont-text">模板1</span></div>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="topic-element-preview elem-pane-box-element">
+                            <div id="preview-element-q469mkn87ng7isqo" data-type="GRIDS"
+                              class="topic-preview element-item element-item-grids"
+                              style="left: 177px; top: 190px; width: 300px; height: 78px; z-index: 9;">
+                              <div class="elem-grids elem-grids-halving" preview="">
+                                <table>
+                                  <tr>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                  </tr><!---->
+                                  <tr>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                  </tr><!---->
+                                  <tr>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                    <td style="border-style: solid;">
+                                      <div style="padding-bottom: 100%;"></div>
+                                    </td>
+                                  </tr><!---->
+                                </table>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="elem-rich-text" id="rich-text-element-smkjfn6ofal196l8"
+                  style="width: 100%; font-weight: 600;">
+                  <div class="rich-text">
+                    <div>一、单择题</div>
+                  </div>
+                </div>
+                <div class="elem-rich-text" id="rich-text-element-j1mpfsaon0thnkcn" style="width: 100%;">
+                  <div class="rich-text">
+                    <div>1、（wl-mt2）2 + 2 = ？</div>
+                  </div>
+                </div>
+                <div class="elem-rich-text" id="rich-text-element-vtcu7b1g24iriacg" style="width: 25%;">
+                  <div class="rich-text">
+                    <div>A、1</div>
+                  </div>
+                </div>
+                <div class="elem-rich-text" id="rich-text-element-okkckcpgbhfi0n89" style="width: 25%;">
+                  <div class="rich-text">
+                    <div>B、2</div>
+                  </div>
+                </div>
+                <div class="elem-rich-text" id="rich-text-element-83m7jp2ot9ffsqh8" style="width: 25%;">
+                  <div class="rich-text">
+                    <div>C、3</div>
+                  </div>
+                </div>
+                <div class="elem-rich-text" id="rich-text-element-9anm8qhohv9ccaq8" style="width: 25%;">
+                  <div class="rich-text">
+                    <div>D、4</div>
+                  </div>
+                </div>
+                <div class="elem-rich-text" id="rich-text-element-qe8ffs6gm4ildk7g" style="width: 100%; height: 20px;">
+                  <div class="rich-text">
+                    <div></div>
+                  </div>
+                </div>
+                <div class="elem-rich-text" id="rich-text-element-gbd9ftrlt7m5hdlo" style="width: 100%;">
+                  <div class="rich-text">
+                    <div>2、（wl-mt2）2 + 1 = ？</div>
+                  </div>
+                </div>
+                <div class="elem-rich-text" id="rich-text-element-2594gvhgm19btrjt" style="width: 25%;">
+                  <div class="rich-text">
+                    <div>A、1</div>
+                  </div>
+                </div>
+                <div class="elem-rich-text" id="rich-text-element-slkc1o387cr0m2lo" style="width: 25%;">
+                  <div class="rich-text">
+                    <div>B、2</div>
+                  </div>
+                </div>
+                <div class="elem-rich-text" id="rich-text-element-di7jd6280arh12n8" style="width: 25%;">
+                  <div class="rich-text">
+                    <div>C、3</div>
+                  </div>
+                </div>
+                <div class="elem-rich-text" id="rich-text-element-ulmmihuon8ka24ag" style="width: 25%;">
+                  <div class="rich-text">
+                    <div>D、4</div>
+                  </div>
+                </div>
+                <div class="elem-rich-text" id="rich-text-element-favgmj2okbpb612g" style="width: 100%; height: 20px;">
+                  <div class="rich-text">
+                    <div></div>
+                  </div>
+                </div>
+                <div class="elem-rich-text" id="rich-text-element-cf7b2fa847ulpdno" style="width: 100%;">
+                  <div class="rich-text">
+                    <div>3、（wl-mt2）2 + 3 = ？</div>
+                  </div>
+                </div>
+                <div class="elem-rich-text" id="rich-text-element-610dnaegoknjeucg" style="width: 25%;">
+                  <div class="rich-text">
+                    <div>A、2</div>
+                  </div>
+                </div>
+                <div class="elem-rich-text" id="rich-text-element-tkae9g0gqmcm8vro" style="width: 25%;">
+                  <div class="rich-text">
+                    <div>B、3</div>
+                  </div>
+                </div>
+                <div class="elem-rich-text" id="rich-text-element-pqaepqpoodrrn1to" style="width: 25%;">
+                  <div class="rich-text">
+                    <div>C、4</div>
+                  </div>
+                </div>
+                <div class="elem-rich-text" id="rich-text-element-o1uoas6lcih49ria" style="width: 25%;">
+                  <div class="rich-text">
+                    <div>D、5</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="page-number page-number-text"><!---->
+              <div class="page-number-text-cont"> 第1页（共2页） </div>
+            </div>
+          </div>
+          <div class="page-column" style="padding: 0px 20px;">
+            <div id="column-0-1" class="page-column-main">
+              <div class="page-column-body"><!----></div>
+            </div>
+            <div class="page-number page-number-text"><!---->
+              <div class="page-number-text-cont"> 第2页（共2页） </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="page-column-side">
+        <div class="column-side-body">
+          <div class="topic-element-preview page-side-element">
+            <div id="preview-element-dmdnojhocnphlvh8" data-type="TEXT"
+              class="topic-preview element-item element-item-text"
+              style="left: 0px; top: 199px; width: 130px; height: 100px;">
+              <div class="elem-text" preview=""
+                style="position: absolute; width: 100px; height: 130px; transform: rotate(-90deg); transform-origin: 0px 100%; bottom: 0px; left: 130px;">
+                <div class="text-body" style="font-weight: 400; font-family: 宋体; font-size: 14px; color: rgb(0, 0, 0);">
+                  <span class="cont-text">样例内容</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>

src/modules/paper/api.js

@@ -29,7 +29,7 @@ export const questionGroupStructListApi = (datas) => {
 
 // edit paper
 export const paperDetailInfoApi = (paperId) => {
-  return $httpWithMsg.post(`${QUESTION_API}/paper/${paperId}`, {});
+  return $httpWithMsg.get(`${QUESTION_API}/paper/${paperId}`, {});
 };
 export const paperSaveApi = (paper) => {
   return $httpWithMsg.post(`${QUESTION_API}/paper`, paper);

src/modules/paper/components/PaperBaseInfo.vue

@@ -49,7 +49,7 @@ export default {
   name: "PaperBaseInfo",
   props: {
     paperId: {
-      type: String,
+      type: [String, Number],
       default: "",
     },
   },

src/modules/paper/components/PaperQuestypeInfo.vue

@@ -55,7 +55,7 @@ export default {
   name: "PaperQuestypeInfo",
   props: {
     paperId: {
-      type: String,
+      type: [String, Number],
       default: "",
     },
   },

src/modules/question/components/QuestionImportDialog.vue

@@ -124,7 +124,7 @@ export default {
     ...mapState({ user: (state) => state.user }),
   },
   mounted() {
-    this.templateUrl = `${QUESTION_API}/import/paper/template?$key=${this.user.key}&$token=${this.user.token}`;
+    this.templateUrl = `${QUESTION_API}/import/paper?$key=${this.user.key}&$token=${this.user.token}`;
   },
   methods: {
     visibleChange() {