移除自适应

src/App.vue

@@ -299,7 +299,7 @@ video {
   left: 0;
   width: available;
   width: -webkit-fill-available;
-  height: 0.35rem;
+  height: 35px;
   z-index: 1;
   background: #666666;
   display: flex;
@@ -318,24 +318,24 @@ video {
     justify-content: center;
     flex: 1;
     -webkit-app-region: drag;
-    padding-left: 1.1rem;
+    padding-left: 110px;
     height: 100%;
 
     &>* {
-      margin: 0 0.18rem;
+      margin: 0 18px;
     }
   }
 
   &-right {
     display: flex;
     align-items: center;
-    margin-right: 0.15rem;
+    margin-right: 15px;
 
     &>* {
       cursor: pointer;
 
       &:not(:first-child) {
-        margin-left: 0.15rem;
+        margin-left: 15px;
 
       }
     }
@@ -347,8 +347,8 @@ video {
   bottom: 0;
   left: 50%;
   transform: translate(-50%, 0);
-  width: 3rem;
-  height: 1.65rem;
+  width: 28%;
+  height: 23%;
   z-index: 9;
 }
 

src/components/battery.vue

@@ -43,23 +43,23 @@ const bgClass = computed(() => {
 
   &-panel {
     box-sizing: border-box;
-    width: 0.25rem;
-    height: 0.15rem;
+    width: 25px;
+    height: 15px;
     position: relative;
-    border: 0.02rem solid #ccc;
-    padding: 0.01rem;
-    border-radius: 0.03rem;
-    margin-right: 0.05rem;
+    border: 2px solid #ccc;
+    padding: 1px;
+    border-radius: 3px;
+    margin-right: 5px;
 
     &::before {
       content: "";
-      border-radius: 0 0.01rem 0.01rem 0;
-      height: 0.08rem;
+      border-radius: 0 1px 1px 0;
+      height: 8px;
       background: #ccc;
-      width: 0.03rem;
+      width: 3px;
       position: absolute;
       top: 50%;
-      right: -0.04rem;
+      right: -4px;
       transform: translateY(-50%);
       overflow: hidden;
     }
@@ -76,11 +76,12 @@ const bgClass = computed(() => {
   }
 
   &-berText {
-    font-size: 0.15rem;
+    font-size: 15px;
   }
 }
 
 .success {
+  color: #40d7c1;
 
   &>div:first-child::before,
   &>div:first-child>div {
@@ -93,6 +94,7 @@ const bgClass = computed(() => {
 }
 
 .warning {
+  color: #f90;
 
   &>div:first-child::before,
   &>div:first-child>div {
@@ -105,6 +107,7 @@ const bgClass = computed(() => {
 }
 
 .danger {
+  color: #ed4014;
 
   &>div:first-child::before,
   &>div:first-child>div {

src/components/gauge.vue

@@ -51,8 +51,8 @@ const option = ref({
     progress: {
       show: true
     },
-    radius: '160%',
-    center: [ '50%', '90%' ],
+    radius: '190%',
+    center: [ '50%', '98%' ],
     detail: {
       offsetCenter: [ 0, -25 ],
       valueAnimation: true,

src/components/icon.vue

@@ -8,7 +8,7 @@ const props = defineProps<{
 }>()
 const symbolId = computed(() => `#icon-${props.name}`)
 const newColor = computed(() => `${props.color ?? '#ccc'}`)
-const newSize = computed(() => `${props.size ? (`${props.size / 100}rem`) : '0.16rem'}`)
+const newSize = computed(() => `${props.size ? (`${props.size}px`) : '16px'}`)
 </script>
 <template>
   <svg

src/components/loading.vue

@@ -3,11 +3,11 @@
 </template>
 <style scoped>
 .loader {
-  border: 0.05rem solid #f3f3f3;
+  border: 5px solid #f3f3f3;
   border-radius: 50%;
-  border-top: 0.05rem solid #3498db;
-  width: 0.3rem;
-  height: 0.3rem;
+  border-top: 5px solid #3498db;
+  width: 30px;
+  height: 30px;
   -webkit-animation: spin 2s linear infinite;
   animation: spin 2s linear infinite;
   position: absolute;

src/components/login.vue

@@ -30,13 +30,13 @@ watch([ name, room, url ], ([ _, __, ___ ], [ _o, __o, ___o ]) => {
     <div class="login-title">
       <Icon
         name="min"
-        :size="15"
+        :size="20"
         color="#fff"
         @click="titleEvent('minWin')"
       />
       <Icon
         name="close"
-        :size="15"
+        :size="20"
         color="#fff"
         @click="titleEvent('closeWin')"
       />
@@ -102,7 +102,7 @@ watch([ name, room, url ], ([ _, __, ___ ], [ _o, __o, ___o ]) => {
 .login {
   width: 100%;
   height: 100%;
-  font-size: 0.15rem;
+  font-size: 15px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -113,48 +113,52 @@ watch([ name, room, url ], ([ _, __, ___ ], [ _o, __o, ___o ]) => {
 
   &-title {
     position: absolute;
-    right: 0.15rem;
-    top: 0.12rem;
+    right: 15px;
+    top: 0px;
     cursor: pointer;
     -webkit-app-region: no-drag;
-    &>svg:last-child{
-      margin-left: 0.1rem;
+    height: 35px;
+    display: flex;
+    align-items: center;
+
+    &>svg:last-child {
+      margin-left: 15px;
     }
   }
 
   &-content {
-    width: 8rem;
-    height: 4rem;
+    width: 800px;
+    height: 400px;
     background: white;
-    border-radius: 0.2rem;
+    border-radius: 20px;
     display: flex;
     overflow: hidden;
 
     &-left {
-      width: 5rem;
+      width: 500px;
       background: url(../assets/img/login-left.png) center center no-repeat;
       background-size: 100% 100%;
       -webkit-app-region: drag;
     }
 
     &-right {
-      width: 3rem;
-      padding: 0 0.3rem;
+      width: 300px;
+      padding: 0 30px;
       -webkit-app-region: no-drag;
       overflow: hidden;
 
       &>p {
-        font-size: 0.3rem;
+        font-size: 30px;
         color: #5970C6;
         text-align: left;
         font-weight: 400;
         text-align: center;
-        margin-top: 0.5rem;
-        margin-bottom: 0.5rem;
+        margin-top: 50px;
+        margin-bottom: 50px;
       }
 
       &>div {
-        padding: 0.1rem 0;
+        padding: 10px 0;
         display: flex;
         align-items: center;
 
@@ -164,15 +168,15 @@ watch([ name, room, url ], ([ _, __, ___ ], [ _o, __o, ___o ]) => {
 
         input {
           border: none;
-          margin-left: 0.05rem;
+          margin-left: 5px;
           outline: none;
           width: 100%;
-          font-size: 0.15rem;
+          font-size: 15px;
           color: #333;
 
           &::placeholder {
             color: #9DA1A8;
-            font-size: 0.15rem;
+            font-size: 15px;
           }
         }
 
@@ -181,21 +185,21 @@ watch([ name, room, url ], ([ _, __, ___ ], [ _o, __o, ___o ]) => {
           border: none;
           outline: none;
           color: white;
-          font-size: 0.16rem;
+          font-size: 16px;
           font-weight: 500;
-          border-radius: 1rem;
-          margin-top: 0.4rem;
+          border-radius: 10px;
+          margin-top: 40px;
           margin-left: auto;
-          line-height: 0.35rem;
-          padding: 0 0.35rem;
+          line-height: 35px;
+          padding: 0 35px;
           cursor: not-allowed;
         }
       }
 
       &>span {
-        height: 0.17rem;
+        height: 17px;
         color: red;
-        font-size: 0.12rem;
+        font-size: 12px;
         overflow: hidden;
         display: block;
         text-overflow: ellipsis;

src/main.ts

@@ -2,7 +2,6 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import Icon from '@/components/icon.vue'
 import 'virtual:svg-icons-register'
-import '@/services/rem'
 
 const app = createApp(App)
 app.component('Icon', Icon)

src/services/rem.ts

@@ -1,20 +0,0 @@
-// 18fontsize = (18/100)rem
-(function (doc, win) {
-  const docEl = doc.documentElement
-  const head = docEl.getElementsByTagName('head')[0]
-  const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
-  const metaEl = doc.createElement('meta')
-  metaEl.name = 'viewport'
-  metaEl.content = 'initial-scale=1,maximum-scale=1, minimum-scale=1'
-  head.appendChild(metaEl)
-  const recalc = function () {
-    // 1rem =100px
-    const width = docEl.clientWidth
-    docEl.style.fontSize = `${100 * (width / 1300)}px`
-    window.$width = width
-  }
-  recalc()
-  if (!doc.addEventListener) { return }
-  win.addEventListener(resizeEvt, recalc, false)
-  console.log('rem自适应')
-}(document, window))