适配字体大小

main.js

@@ -38,10 +38,8 @@ const showLoading = () => {
 // 创建主程序 窗口
 const createWindow = () => {
   win = new BrowserWindow({
-    maxWidth: 1920,
-    maxHeight: 1080,
-    minWidth: 1620,
-    minHeight: 900,
+    minWidth: 1000,
+    minHeight: 600,
     webPreferences: {
       contextIsolation: false,
       nodeIntegration: true,

src/components/battery.vue

@@ -41,23 +41,23 @@ const bgClass = computed(() => {
   position: relative;
   z-index: 3;
   color: white;
+
   &-panel {
     box-sizing: border-box;
-    width: 0.22rem;
-    height: 0.14rem;
+    width: 0.17rem;
+    height: 0.10rem;
     position: relative;
     border: 0.02rem solid #ccc;
     padding: 0.01rem;
     border-radius: 0.03rem;
     margin-right: 0.05rem;
-    transform: rotate(-90deg);
 
     &::before {
       content: "";
-      border-radius: 0 1px 1px 0;
-      height: 0.06rem;
+      border-radius: 0 0.01rem 0.01rem 0;
+      height: 0.05rem;
       background: #ccc;
-      width: 0.03rem;
+      width: 0.02rem;
       position: absolute;
       top: 50%;
       right: -0.04rem;
@@ -75,44 +75,46 @@ const bgClass = computed(() => {
       background: #fff;
     }
   }
-  &-berText{
-    font-size: 0.14rem;
+
+  &-berText {
+    font-size: 0.09rem;
   }
 }
 
-.success .electric-panel {
-  border-color: #40d7c1;
-}
+.success {
 
-.success .electric-panel:before {
-  background: #40d7c1;
-}
+  &>div:first-child::before,
+  &>div:first-child>div {
+    background-color: #40d7c1;
+  }
 
-.success .electric-panel-remainder {
-  background: #40d7c1;
+  &>div:first-child {
+    border-color: #40d7c1;
+  }
 }
 
-.warning .electric-panel {
-  border-color: #f90;
-}
+.warning {
 
-.warning .electric-panel:before {
-  background: #f90;
-}
+  &>div:first-child::before,
+  &>div:first-child>div {
+    background-color: #f90;
+  }
 
-.warning .electric-panel-remainder {
-  background: #f90;
+  &>div:first-child {
+    border-color: #f90;
+  }
 }
 
-.danger .electric-panel {
-  border-color: #ed4014;
-}
+.danger {
 
-.danger .electric-panel:before {
-  background: #ed4014;
-}
+  &>div:first-child::before,
+  &>div:first-child>div {
+    background-color: #ed4014;
+  }
+
+  &>div:first-child {
+    border-color: #ed4014;
+  }
 
-.danger .electric-panel-remainder {
-  background: #ed4014;
 }
 </style>

src/components/login.vue

@@ -50,7 +50,7 @@ async function login() {
 .login {
   width: 100%;
   height: 100%;
-  font-size: 0.16rem;
+  font-size: 0.15rem;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -72,7 +72,7 @@ async function login() {
     outline: none;
     border-radius: 0;
     background: none;
-    font-size: 0.16rem;
+    font-size: 0.14rem;
   }
 
   button {
@@ -80,14 +80,14 @@ async function login() {
     background: #79b8fa;
     border: none;
     color: white;
-    font-size: 0.17rem;
+    font-size: 0.15rem;
     font-weight: 500;
     border-radius: 0.05rem;
     cursor: pointer;
     margin: 0 auto;
     margin-top: 0.2rem;
     line-height: 0.3rem;
-    padding: 0.05rem 0.5rem;
+    padding: 0.01rem 0.35rem;
   }
 
   button:hover {
@@ -97,10 +97,10 @@ async function login() {
   &-err {
     width: 1.75rem;
     margin: 0 auto;
-    font-size: 0.12rem;
+    font-size: 0.10rem;
     color: red;
     text-align: left;
-    text-indent: 0.1rem;
+    text-indent: 0.12rem;
   }
 
   input:nth-child(3) {

src/components/record.vue

@@ -1,7 +1,7 @@
 <template>
   <Icon
     name="mic"
-    :size="25"
+    :size="30"
     :color="show ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
   />
 </template>

src/services/rem.ts

@@ -10,7 +10,7 @@
   const recalc = function () {
     // 1rem =100px
     const width = docEl.clientWidth
-    docEl.style.fontSize = `${100 * (width / 1920)}px`
+    docEl.style.fontSize = `${100 * (width / 1000)}px`
     window.$width = width
   }
   recalc()

src/views/index/index.vue

@@ -250,7 +250,7 @@ onUnmounted(() => {
       <!-- 手柄状态 -->
       <Icon
         name="gemePad"
-        :size="25"
+        :size="30"
         :color="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
       />
       <!-- 音频状态 -->
@@ -266,7 +266,7 @@ onUnmounted(() => {
         :color="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
       />
       <!-- 电量状态 -->
-      <Battery :quantity="60" />
+      <Battery :quantity="30" />
     </div>
     <!-- 码数 -->
     <div class="gauge">
@@ -313,8 +313,8 @@ video {
   bottom: 0;
   left: 50%;
   transform: translate(-50%, 0);
-  width: 5rem;
-  height: 1.85rem;
+  width: 3rem;
+  height: 1.65rem;
   z-index: 9;
 }