H5适配

linzhijie

2023-05-22 beb353c7238d7eea256d0e64710ed4ffea9fd015

H5适配

 src/assets/report/page1.jpg

 src/styles/h5font.scss

New file
@@ -0,0 +1,55 @@
@media screen and(max-width: 1024px) {

  body,
  html {
    font-size: 14px
  }
}

@media screen and(min-width: 1100px) {

  body,
  html {
    font-size: 16px
  }
}

@media screen and(min-width: 1280px) {

  body,
  html {
    font-size: 16px;
  }
}

@media screen and(min-width: 1366px) {

  body,
  html {
    font-size: 16px;
  }
}

@media screen and(min-width: 1440px) {

  body,
  html {
    font-size: 16px;
  }
}

@media screen and(min-width: 1680px) {

  body,
  html {
    font-size: 18px;
  }
}

@media screen and(min-width: 1920px) {

  body,
  html {
    font-size: 33px;
  }
}

 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>
@@ -68,6 +68,7 @@

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

export default {
  name: 'reportH5',