动态修改尺寸

public/index.html

@@ -14,4 +14,5 @@
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
+  
 </html>

src/components/datav/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div id="data-view">
-    <dv-full-screen-container>
+    <!-- <dv-full-screen-container> -->
+      <div id="dv-full-screen-container" style="width: 100%;height: 100%;position: fixed;overflow: hidden;">
+
       
       <top-header :Name = "showData.name" :Times = "showData.times"/>
 
@@ -25,7 +27,8 @@
       <dv-loading v-else>Loading...</dv-loading>
       <div style="height: 5%;width: 100%;"></div>
      
-    </dv-full-screen-container>
+    <!-- </dv-full-screen-container> -->
+  </div>
   </div>
 </template>
 

src/components/datav/scrollBoard.vue

@@ -26,6 +26,8 @@ export default {
     }
   },
   created () {
+    this.config.headerHeight = this.$fontSize(0.50);
+    this.config.columnWidth = [this.$fontSize(1),this.$fontSize(1.5),this.$fontSize(1)];
     this.config.data = JSON.parse(JSON.stringify(this.ScrollList))
   }
 }
@@ -35,7 +37,7 @@ export default {
 #scroll-board {
   width:25%;
   box-sizing: border-box;
-  margin-left: 20px;
+  margin-left: 0.2rem;
   height: 100%;
   overflow: hidden;
 }
@@ -43,10 +45,10 @@ export default {
 </style>
 <style>
 .dv-scroll-board .header{
-  font-size: 20px !important;
+  font-size: 0.2rem !important;
   font-weight: bold !important;
 }
 .dv-scroll-board .rows .row-item{
-  font-size: 20px !important;
+  font-size: 0.2rem !important;
 }
 </style>

src/main.js

@@ -8,7 +8,17 @@ import api from './api'
 
 Vue.config.productionTip = false
 Vue.prototype.$api = api
-
+  function resizeFont() {
+    const designWidth = 1920; // 设计稿宽度，例如iPhone 6的宽度
+    const maxWidth = 1920; // 最大支持宽度
+    const screenWidth = Math.min(window.innerWidth, maxWidth);
+    const scale = screenWidth / designWidth;
+    document.documentElement.style.fontSize = `${100 * scale}px`;
+  }
+  // 初始调用
+  resizeFont();
+  // 监听窗口大小变化
+  window.addEventListener('resize', resizeFont);
 let fontSize = function(res) {
   let clientWidth =
     window.innerWidth ||