H5适配

linzhijie

2023-05-22 af79bfbb011d2e234da67a7b60e26cc2103cfc4a

 src/views/report/reportH5.vue

@@ -2,9 +2,9 @@
  <div id="app" style="margin:auto">
    <div class="report">
      <el-image :src="require('@/assets/report/page1.jpg')"></el-image>
      <div class="word" style="left: 27%;top: 66.8%;font-size: 0.8rem;color: #313157">{{ data.questionnaireTaker }}</div>
      <div class="word" style="left: 30.5%;top: 69.2%;font-size: 0.8rem;color: #313157">{{ data.reportGenerationDate }}</div>
      <div class="word" style="left: 23%;top: 71.5%;font-size: 0.8rem;color: #313157">中国大学生</div>
      <div class="word" style="left: 12%;top: 66.8%;color: #313157;font-weight:bold">测试者：{{ data.questionnaireTaker }}</div>
      <div class="word" style="left: 12%;top: 69.2%;color: #313157;font-weight:bold">测试时间：{{ data.reportGenerationDate }}</div>
      <div class="word" style="left: 12%;top: 71.5%;color: #313157;font-weight:bold">常模：中国大学生</div>
    </div>
    <div class="report">
      <el-image :src="require('@/assets/report/page2.png')"></el-image>
@@ -12,14 +12,14 @@
    </div>
    <div class="report">
      <el-image :src="require('@/assets/report/page3.png')"></el-image>
      <div class="word" style="left: 40%;top: 9.8%;font-size: 0.8rem;color: #34BBC4">{{ data.PR_Dim01 }}</div>
      <div class="word" style="left: 40%;top: 18.4%;font-size: 0.8rem;color: #E1AD04">{{ data.PR_Dim02 }}</div>
      <div class="word" style="left: 40%;top: 26.6%;font-size: 0.8rem;color: #6D67AD">{{ data.PR_Dim03 }}</div>
      <div class="word" style="left: 40%;top: 35.6%;font-size: 0.8rem;color: #EC7864">{{ data.PR_Dim04 }}</div>
      <div class="word" style="left: 80%;top: 9.8%;font-size: 0.8rem;color: #D78EBB">{{ data.PR_Dim05 }}</div>
      <div class="word" style="left: 80%;top: 18.4%;font-size: 0.8rem;color: #E8497D">{{ data.PR_Dim06 }}</div>
      <div class="word" style="left: 80%;top: 26.6%;font-size: 0.8rem;color: #62BEA4">{{ data.PR_Dim07 }}</div>
      <div class="word" style="left: 80%;top: 35.6%;font-size: 0.8rem;color: #4976BA">{{ data.PR_Dim08 }}</div>
      <div class="word" style="left: 40%;top: 9.8%;color: #34BBC4">{{ data.PR_Dim01 }}</div>
      <div class="word" style="left: 40%;top: 18.4%;color: #E1AD04">{{ data.PR_Dim02 }}</div>
      <div class="word" style="left: 40%;top: 26.6%;color: #6D67AD">{{ data.PR_Dim03 }}</div>
      <div class="word" style="left: 40%;top: 35.6%;color: #EC7864">{{ data.PR_Dim04 }}</div>
      <div class="word" style="left: 80%;top: 9.8%;color: #D78EBB">{{ data.PR_Dim05 }}</div>
      <div class="word" style="left: 80%;top: 18.4%;color: #E8497D">{{ data.PR_Dim06 }}</div>
      <div class="word" style="left: 80%;top: 26.6%;color: #62BEA4">{{ data.PR_Dim07 }}</div>
      <div class="word" style="left: 80%;top: 35.6%;color: #4976BA">{{ data.PR_Dim08 }}</div>
    </div>
    <div style="border:2px solid #F3EEE3;border-radius: 25px;margin-left: 8%;margin-right: 8%;">
      <div style="font-size: 0.9rem;font-weight: bold;line-height: 25px;padding: 15px;">
@@ -68,6 +68,7 @@

<script>
import examPaperApi from '@/api/examPaper'
import '@/styles/h5font.scss'

export default {
  name: 'reportH5',