修改移动端的一些问题

ruoyi-ui/.hintrc

@@ -9,6 +9,14 @@
       {
         "html-has-lang": "off"
       }
+    ],
+    "compat-api/css": [
+      "default",
+      {
+        "ignore": [
+          "-webkit-text-size-adjust"
+        ]
+      }
     ]
   }
-}
+}

ruoyi-ui/package.json

@@ -54,6 +54,7 @@
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
+    "vconsole": "^3.15.0",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",

ruoyi-ui/src/main.js

@@ -13,6 +13,7 @@ import router from './router'
 import directive from './directive' // directive
 import plugins from './plugins' // plugins
 import { download } from '@/utils/request'
+import VConsole from 'vconsole'
 
 import './assets/icons' // icon
 import './permission' // permission control
@@ -37,7 +38,7 @@ import DictTag from '@/components/DictTag'
 import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
-
+import "@/assets/text/text.css";
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
@@ -79,6 +80,12 @@ Vue.use(Element, {
   size: Cookies.get('size') || 'medium' // set element-ui default size
 })
 
+if (process.env.NODE_ENV !== 'production') {
+  // eslint-disable-next-line no-new,new-cap
+  const vConsole = new VConsole()
+  Vue.use(vConsole)
+}
+
 Vue.config.productionTip = false
 
 new Vue({

ruoyi-ui/src/views/certInquire/index.vue

@@ -2,13 +2,21 @@
   <div class="main">
     <div class="content">
       <img src="../../assets/logo/logo2.png"/>
-      <router-link tag="div" :to="{name:'Member'}" class="content-btn">会员、理事证书、聘书查询</router-link>
+      <router-link tag="div" :to="{name:'Member'}" class="content-btn" ref="cccc" >会员、理事证书、聘书查询</router-link>
       <router-link tag="div" :to="{name:'Train'}" class="content-btn">结业证书、学时证明查询</router-link>
       <router-link tag="div" :to="{name:'Profess'}" class="content-btn">专业能力证书查询</router-link>
     </div>
   </div>
 </template>
 <script>
+export default{
+  // mounted(){
+  //   const originRootFontSize = parseFloat(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));
+  //   const realSize =  16 // 这里的7.5是我自己，你看着调
+  //   let scaleFactor = realSize / originRootFontSize; 
+  //   document.documentElement.style.fontSize = originRootFontSize * scaleFactor * scaleFactor + 'px';
+  // }
+}
 </script>
 <style lang="scss">
 .main{
@@ -32,10 +40,13 @@
     width:100%;
     height:50px;
     line-height:50px;
+    vertical-align: middle;
     text-align:center;
     background-color:#eeeef2;
     margin:20px 10px;
-    border-radius:10px;  
+    border-radius:10px; 
+    font-size: 16px;
+    text-size-adjust: none;
   }
 }
 body,html{

ruoyi-ui/src/views/certInquire/member/index.vue

@@ -292,6 +292,10 @@ export default {
       // 创建一个点击事件并对 a 标签进行触发
       const event = new MouseEvent('click')
       el.dispatchEvent(event)
+
+      // let pdf = new JsPDF('landscape', 'pt', 'a4');
+      // pdf.addImage(this.$refs.certimg.src, 'JPEG', 0, 0, 841.89, 590.28)
+      // pdf.save(this.htmlTitle+'.pdf')
     },
     makeHtml() {
       // js写html代码
@@ -300,16 +304,19 @@ export default {
         <img class="proBox-img" src="${window.location.origin}${this.data.url}" >
         <div class="con" style="bottom:0;top:155px">
           <p style="margin:0">
-            <span class="con-name heiti">${this.data.name}</span>
-            <span>${this.data.certContent}</span>
+            <span class="con-name heiti f20">${this.data.name}</span>
+            <span class="f18 kaiti">${this.data.certContent}</span>
           </p>
-          <p style="margin:0">特发此证。</p>
+          <p style="margin:0" class="f18 kaiti">特发此证。</p>
         </div>
-        <span class="foot-term" >${this.data.validTerm}</span>
-        <span class="foot-cert">${this.data.certId}</span>
-        <span class="foot-date">${this.data.issueDate}</span>
+        <span class="foot-term f15 kaiti"  >${this.data.validTerm}</span>
+        <span class="foot-cert f15 kaiti">${this.data.certId}</span>
+        <span class="foot-date f15 kaiti">${this.data.issueDate}</span>
       </div>`
       e.innerHTML = this.word
+      this.returnFont('.f20',20)
+      this.returnFont('.f18',18)
+      this.returnFont('.f15',15)
     },
     toIndex(){
       this.$router.push('/certInquire')
@@ -339,6 +346,23 @@ export default {
       this.userName= ''
       this.certNumber=''
       this.code= ''
+    },
+    returnFont(str,num){
+      const el = document.querySelectorAll(str)
+      const originRootFontSize = parseFloat(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));
+      let a;
+      if(originRootFontSize != 16){
+        a = (16/originRootFontSize)*num
+      }else{
+        a = num
+      }
+      // const realSize =  num 
+      // let scaleFactor = realSize / originRootFontSize; 
+      // el.style.fontSize = originRootFontSize * scaleFactor + 'px';
+      console.log(a,originRootFontSize,1)
+      el.forEach(item=>{
+        item.style.fontSize = a + 'px';
+      })
     }
   }
 }
@@ -482,7 +506,7 @@ export default {
   margin: 0 auto;
   position: relative;
   color: #000;
-  font-family: 楷体;
+  font-family: 'kaitizxc';
   font-size: 16px;
 }
 
@@ -493,7 +517,9 @@ export default {
   top: 0;
   left: 0;
 }
-
+.kaiti{
+  font-family: 'kaitizxc';
+}
 .tit {
   color: #000;
   font-size: 22px;
@@ -502,7 +528,7 @@ export default {
   top: -6px;
   left: 8px;
   letter-spacing: 2px;
-  font-family: STHeiti;
+  font-family: 'heitizxc';
   margin: 10px 0;
   text-align: center;
 }
@@ -530,7 +556,7 @@ export default {
   font-size: 20px;
 }
 .heiti{
-  font-family:黑体 ;
+  font-family:'heitizxc';
 }
 .con-unit {
   font-size: 20px;
@@ -580,8 +606,8 @@ export default {
 }
 .foot-date{
   position: absolute;
-    bottom: 104px;
-    left: 200px;
+  bottom: 104px;
+  left: 200px;
 }
 .z10{
   z-index: 10;

ruoyi-ui/src/views/certInquire/profess/index.vue

@@ -41,8 +41,8 @@
         </div>
       </div>
     </div>
-    <div style="position:fixed;">
-      <!-- top:-1200px;left:-1800px -->
+    <div style="position:fixed;top:-1200px;left:-1800px">
+      <!--  -->
       <div id="pdfDomm" ref="posterWrap">
         <!-- <div class="proBox">
           <img class="proBox-img z01" :src="data.backurl">
@@ -90,7 +90,7 @@
               <p class="foot-p-cert ">{{data.certId}}</p>
               <p class="foot-p-date ">{{data.issueDate}}</p>
             </div>
-            <div class="content z10" style="position: absolute;left: 450px;width: 230px;top: 85px;font-size: 19px;line-height: 30px;text-indent: 2em;">
+            <div class="content z10" style="position: relative;left: 282px;width: 340px;top: 50px;font-size: 19px;line-height: 30px;text-indent: 2em;display:inline-block">
               <p style="margin:0">
                 持证人参加了<span class="heiti" style="margin: 0 15px;font-size: 19px;">{{data.certName}}</span>，已修完教学计划规定的全部课程，合计<span class="heiti" style="margin: 0 15px;font-size: 20px;">{{data.courseHours}}</span>学时。
               </p>
@@ -329,25 +329,28 @@ export default {
     makeHtml() {
       // js写html代码
       const e = document.getElementById('pdfDomm')
-      this.word = `<div class="proBox" >
+      this.word = `<div class="proBox" style="position: relative;width: 750px;height: 525px;">
             <img class="proBox-img z01" src="${window.location.origin}${this.data.backurl}" />
             <div class="con z10" style="width: 64px; height: 83px;overflow: hidden;text-indent: 0;padding-right: 0;top: 144px;left: 183px;">
               <img src="${window.location.origin}${this.data.headurl}" style="height:100%;position: absolute;left: 50%;transform: translate(-50%, -50%);top: 50%;" />
             </div>
-            <div class="foot-pp z10">
-              <p class="foot-p-name ">${this.data.uesrName}</p>
-              <p class="foot-p-ID ">${this.data.userId}</p>
-              <p class="foot-p-cert ">${this.data.certId}</p>
-              <p class="foot-p-date ">${this.data.issueDate}</p>
+            <div class="foot-pp z10 f16">
+              <p class="foot-p-name kaiti">${this.data.uesrName}</p>
+              <p class="foot-p-ID kaiti">${this.data.userId}</p>
+              <p class="foot-p-cert kaiti">${this.data.certId}</p>
+              <p class="foot-p-date kaiti">${this.data.issueDate}</p>
             </div>
-            <div class="content z10" style="position: absolute;left: 525px;width: 355px;top: 185px;font-size: 19px;line-height: 30px;text-indent: 2em;">
-              <p style="margin:0">
-                持证人参加了<span class="heiti" style="margin: 0 15px;font-size: 19px;">${this.data.certName}</span>，已修完教学计划规定的全部课程，合计<span class="heiti" style="margin: 0 15px;font-size: 20px;">${this.data.courseHours}</span>学时。
+            <div class="content z10" style="padding:0;position: relative;left: 455px;width: 330px;top: 110px;font-size: 19px;line-height: 32px;text-indent: 2em;display:inline-block">
+              <p style="margin:0" class="f19 kaiti">
+                持证人参加了<span class="heiti" style="margin: 0 15px;font-size: 19px;">${this.data.certName}</span>，已修完教学计划规定的全部课程，合计<span class="heiti f20" style="margin: 0 15px;font-size: 20px;">${this.data.courseHours}</span>学时。
               </p>
-              <p style="margin:0">考核合格，准予结业，特发此证。</p>
+              <p style="margin:0" class="f19 kaiti">考核合格，准予结业，特发此证。</p>
             </div>
           </div>`
       e.innerHTML = this.word
+      this.returnFont('.f20',20)
+      this.returnFont('.f19',19)
+      this.returnFont('.f16',16)
     },
     toIndex(){
       this.$router.push('/certInquire')
@@ -377,6 +380,23 @@ export default {
       this.userName= ''
       this.certNumber=''
       this.code= ''
+    },
+    returnFont(str,num){
+      const el = document.querySelectorAll(str)
+      const originRootFontSize = parseFloat(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));
+      let a;
+      if(originRootFontSize != 16){
+        a = (16/originRootFontSize)*num
+      }else{
+        a = num
+      }
+      // const realSize =  num 
+      // let scaleFactor = realSize / originRootFontSize; 
+      // el.style.fontSize = originRootFontSize * scaleFactor + 'px';
+      console.log(a,originRootFontSize,1)
+      el.forEach(item=>{
+        item.style.fontSize = a + 'px';
+      })
     }
   }
 }
@@ -499,7 +519,7 @@ export default {
   margin: 0 auto;
   position: relative;
   color: #000;
-  font-family: 楷体;
+  font-family: 'kaitizxc';
   font-size: 16px;
 }
 
@@ -510,7 +530,9 @@ export default {
   top: 0;
   left: 0;
 }
-
+.kaiti{
+  font-family: 'kaitizxc';
+}
 
 
 .tit {
@@ -521,7 +543,7 @@ export default {
   top: -6px;
   left: 8px;
   letter-spacing: 2px;
-  font-family: STHeiti;
+  font-family: 'heitizxc';
   margin: 10px 0;
   text-align: center;
 }
@@ -549,7 +571,7 @@ export default {
   font-size: 20px;
 }
 .heiti{
-  font-family:黑体 ;
+  font-family:'heitizxc' ;
 }
 .con-unit {
   font-size: 20px;

ruoyi-ui/src/views/certInquire/train/index.vue

@@ -318,16 +318,19 @@ export default {
       this.word = `<div class="proBox" >
           <img class="proBox-img" src="${window.location.origin}${this.data.backurl}" >
           <div class="con train-con" >
-            <p style="margin:0">
-              <span class="con-name heiti">${this.data.uesrName}</span>于<span class="train-span heiti">${this.data.trainPeriod}</span>
+            <p style="margin:0" class="kaiti f18">
+              <span class="con-name heiti f20">${this.data.uesrName}</span>于<span class="train-span heiti">${this.data.trainPeriod}</span>
               参加了<span class="train-span heiti">${this.data.certName}</span>学习，已修完教学计划规定的全部课程，计<span class="train-span heiti">${this.data.courseHours}</span>学时，经考核成绩合格，准予结业。
             </p>
-            <p style="margin:0">特发此证。</p>
+            <p style="margin:0" class="kaiti f18">特发此证。</p>
           </div>
-          <span class="foot-cert train-foot-cert">${this.data.certId}</span>
-          <span class="foot-date train-foot-date">${this.data.issueDate}</span>
+          <span class="foot-cert train-foot-cert kaiti f16">${this.data.certId}</span>
+          <span class="foot-date train-foot-date kaiti f16">${this.data.issueDate}</span>
       </div>`
       e.innerHTML = this.word
+      this.returnFont('.f20',20)
+      this.returnFont('.f18',18)
+      this.returnFont('.f16',16)
     },
     makeTimeHtml() {
       // js写html代码
@@ -335,16 +338,19 @@ export default {
       this.word = `<div class="proBox" >
           <img class="proBox-img" src="${window.location.origin}${this.data.backurl}" >
           <div class="con train-con" >
-            <p style="margin:0">
-              兹证明<span class="con-name heiti">${this.data.uesrName}</span>同志，身份证号：<span>${this.data.userId}</span>，于<span class="train-span heiti">${this.data.trainPeriod}</span>
+            <p style="margin:0" class="kaiti f18">
+              兹证明<span class="con-name heiti f20">${this.data.uesrName}</span>同志，身份证号：<span>${this.data.userId}</span>，于<span class="train-span heiti">${this.data.trainPeriod}</span>
               参加了<span class="train-span heiti">${this.data.certName}</span>学习，已修完教学计划规定的全部课程，计<span class="train-span heiti">${this.data.courseHours}</span>学时，经考核成绩合格，准予结业。
             </p>
-            <p style="margin:0">特发此证。</p>
+            <p style="margin:0" class="kaiti f18">特发此证。</p>
           </div>
-          <span class="foot-cert train-foot-cert">${this.data.certId}</span>
-          <span class="foot-date train-foot-date">${this.data.issueDate}</span>
+          <span class="foot-cert train-foot-cert kaiti f16">${this.data.certId}</span>
+          <span class="foot-date train-foot-date kaiti f16">${this.data.issueDate}</span>
       </div>`
       e.innerHTML = this.word
+      this.returnFont('.f20',20)
+      this.returnFont('.f18',18)
+      this.returnFont('.f16',16)
     },
     toIndex(){
       this.$router.push('/certInquire')
@@ -374,6 +380,23 @@ export default {
       this.userName= ''
       this.certNumber=''
       this.code= ''
+    },
+    returnFont(str,num){
+      const el = document.querySelectorAll(str)
+      const originRootFontSize = parseFloat(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));
+      let a;
+      if(originRootFontSize != 16){
+        a = (16/originRootFontSize)*num
+      }else{
+        a = num
+      }
+      // const realSize =  num 
+      // let scaleFactor = realSize / originRootFontSize; 
+      // el.style.fontSize = originRootFontSize * scaleFactor + 'px';
+      console.log(a,originRootFontSize,1)
+      el.forEach(item=>{
+        item.style.fontSize = a + 'px';
+      })
     }
   }
 }
@@ -538,7 +561,7 @@ export default {
   top: -6px;
   left: 8px;
   letter-spacing: 2px;
-  font-family: STHeiti;
+  font-family: 'heitizxc';
   margin: 10px 0;
   text-align: center;
 }
@@ -566,7 +589,7 @@ export default {
   font-size: 20px;
 }
 .heiti{
-  font-family:黑体 ;
+  font-family:'heitizxc' ;
 }
 .con-unit {
   font-size: 20px;
@@ -686,4 +709,7 @@ export default {
     justify-content: flex-start;
   }
 }
+.kaiti{
+  font-family: 'kaitizxc';
+}
 </style>