屏幕适配

src/App.vue

@@ -3,6 +3,12 @@
     <router-view/>
   </div>
 </template>
+<script>
+document.documentElement.style.fontSize=(window.innerWidth/1920*12)+"px" 
+</script>
 
 <style>
+body {
+  overflow-x: hidden;
+}
 </style>

src/layout/components/SideBar/Title.vue

@@ -36,6 +36,8 @@ export default {
         font-weight: 600;
         color: #09162C;
         margin-top: 0.8rem;
+        line-height: 2.2rem;
+        letter-spacing: 0.1rem;
     }
     .companyBox{
         display: flex;

src/layout/components/SideBar/UserIcon.vue

@@ -86,6 +86,7 @@ export default {
     },1000)
   },
   beforeDestroy(){
+    // 组件销毁前清除定时器
     clearInterval(timer)
   },
 
@@ -113,7 +114,7 @@ export default {
     color: #516380;
     .time_day {
       font-family: DS4Font;
-      // width: 8rem;
+      width: 8rem;
     }
     .time_weekday {
       margin: 0 1rem;
@@ -121,7 +122,8 @@ export default {
     .time_date {
       font-family: DS4Font;
       margin-right: 2rem;
-      width: 3.5rem;
+      width: 8rem;
+      letter-spacing: 0.3rem;
     }
   }
   .icon_box {
@@ -131,6 +133,7 @@ export default {
     i {
       font-size: 1.8rem;
       color: #00cefb;
+      margin-right: 0.5rem;
     }
     span {
       font-size: 1.4rem;
@@ -145,7 +148,7 @@ export default {
   }
 }
 .header_menu {
-  height: 48px;
+  height: 5rem;
 }
 .header_user_line {
   font-size: 1.33rem;
@@ -154,9 +157,9 @@ export default {
   cursor: pointer;
 }
 ::v-deep .el-menu-item {
-  height: 48px !important;
+  height: 5rem !important;
   font-size: 1.33rem !important;
-  line-height: 48px !important;
+  line-height: 5rem !important;
   color: #516380 !important;
   padding: 0 !important;
   margin-right: 2rem !important;

src/layout/components/SideBar/index.vue

@@ -31,7 +31,7 @@ export default {
 <style lang="scss" scoped>
 .nav {
   width: 100vw;
-  height: 48px;
+  height: 5rem;
   background-color: #fff;
   display: flex;
   margin-bottom: 2rem;

src/main.js

@@ -21,5 +21,8 @@ Vue.config.productionTip = false
 new Vue({
   router,
   store,
-  render: h => h(App)
+  render: h => h(App),
+  mounted() {
+    document.documentElement.style.fontSize = (window.innerWidth / 1920 * 12) + "px"
+  }
 }).$mount('#app')

src/styles/index.scss

@@ -13,7 +13,7 @@ body {
   
   html {
     height: 100%;
-    font-size: 10px;
+    // font-size: 10px;
     box-sizing: border-box;
   }
   

src/utils/screen.js

@@ -0,0 +1,22 @@
+// 获取屏幕的宽度和高度
+var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+
+// 进行适配
+function adaptScreen() {
+  // 在这里编写你的适配逻辑
+  // 可以根据屏幕宽度和高度调整元素的大小、位置等
+  console.log('屏幕宽度：', screenWidth);
+  console.log('屏幕高度：', screenHeight);
+  
+  // 示例：根据屏幕宽度设置元素宽度
+  var element = document.getElementById('example-element');
+  var newWidth = screenWidth * 0.8; // 将宽度设为屏幕宽度的80%
+  element.style.width = newWidth + 'px';
+}
+
+// 在窗口大小改变时重新适配
+window.addEventListener('resize', adaptScreen);
+
+// 初始适配
+adaptScreen();