全屏模式UI优化

ljxi · Dec 18, 2023 · cef1b45 · cef1b45
1 parent d5a21b3
commit cef1b45
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 57 deletions.
diff --git a/index.html b/index.html
@@ -39,9 +39,12 @@
                 --el-mask-color: rgb(20,20,20);
             }
         }
-        ::-webkit-scrollbar {
+        html::-webkit-scrollbar {
             display: none; /* Chrome Safari */
-          }
+        }
+        html{
+            scrollbar-width: none;/* Firefox */
+        }
     </style>
     <script>
         var _hmt = _hmt || [];

diff --git a/src/components/FullScreen.vue b/src/components/FullScreen.vue
@@ -1,35 +1,30 @@
 <template>
     <div ref="elment" v-if="modelValue" class="fullscreen"
-        @click="() => emit('update:modelValue', false)">
+        @click="() => emit('update:modelValue', false)"
+        @wheel="(e) => e.preventDefault()"
+        @touchmove="(e) => e.preventDefault()"
+        >
         <div class="content">
-            <div class="title">
-                <span>
-                    NetworkPanel
-                </span>
+            <div class="left">
+                <div class="title">
+                    <span>NetworkPanel</span>
+                </div>
+                <div class="time">
+                    <span>{{ time }}</span>
+                </div>
+                <div class="date">
+                    <span>{{ date }}</span>
+                </div>
             </div>
-            <div class="date">
-                <span>
-                    {{ date }}
-                </span>
-            </div>
-            <div class="time">
-                <span>
-                    {{ time }}
-                </span>
-            </div>
-            <div class="status">
-                <span>
-                    {{ isRunning?"RUNNING":"STOPPED" }}
-                </span>
-            </div>
-            <div class="state">
-                <span>
-                    ALL: {{ state.show.allUsed }}
-                    <br>
-                    SPEED: {{ state.show.speed }}
-                    <br>
-                    INBAND: {{ state.show.speedBit }}
-                </span>
+            <div class="right">
+                <div class="state">
+                    <span class="des">总流量</span><br>
+                    <span class="value">{{ state.show.allUsed }}</span><br><br>
+                    <span class="des">{{ isRunning?"实时速度":"平均速度" }}</span><br>
+                    <span class="value">{{ state.show.speed }}</span><br><br>
+                    <span class="des">{{ isRunning?"实时带宽":"平均带宽" }}</span><br>
+                    <span class="value">{{ state.show.speedBit }}</span><br><br>
+                </div>
             </div>
         </div>
     </div>
@@ -55,66 +50,101 @@ document.addEventListener("fullscreenchange", function (e) {
     emit('update:modelValue', false)
   }
 })
-let noSleep = new NoSleep();
+const isMiuiBrowser = /MiuiBrowser/i.test(navigator.userAgent)
+let noSleep = isMiuiBrowser?null:new NoSleep();
 watchEffect(
   async() => {
     if(props.modelValue){
-        elment.value?.requestFullscreen()
-        noSleep.enable();
+        noSleep?.enable();
+        if(!elment.value)return
+        if(elment.value.requestFullscreen)
+            elment.value.requestFullscreen()
+        else if(elment.value.webkitRequestFullscreen)
+            elment.value.webkitRequestFullscreen()
+        else if(elment.value.mozRequestFullscreen)
+            elment.value.mozRequestFullscreen()
+        else if(elment.value.msRequestFullscreen)
+            elment.value.msRequestFullscreen()
     }else{
-        noSleep.disable();
+        noSleep?.disable();
     }
   }
 )
 const time=ref("")
 const date=ref("")
+const dayToWeek = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
 setInterval(()=>{
-    time.value=new Date().toLocaleTimeString()
-    date.value=new Date().toLocaleDateString()
+    const datetime=new Date()
+    time.value=`${datetime.getHours().toString().padStart(2, '0')}:${datetime.getMinutes().toString().padStart(2, '0')}`
+    date.value=`${datetime.getFullYear()}-${datetime.getMonth()+1}-${datetime.getDate()} ${dayToWeek[datetime.getDay()]}`
 },1000)
-const contentTop=ref(30);
-const contentTopStyle=computed(()=>`${contentTop.value}%`);
-let direction=0
-setInterval(()=>{
-    if(direction)contentTop.value-=0.05
-    else contentTop.value+=0.05
-    if(contentTop.value>=70||contentTop.value<=30)direction^=1
-},16)
 </script>
 <style scoped>
 .fullscreen {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgb(0, 0, 0);
+    color: rgb(255, 255, 255);
     z-index: 9999999999;
     text-align: center;
-    font-family: 'Courier New', Courier, monospace;
 }
 .title {
     margin-top: 3vh;
-    font-size: 40px;
+    font-size: 30px;
+}
+.right {
+    margin-top: 20px;
+}
+@media screen and (min-width: 500px) {
+    .content{
+        column-count: 2;
+    }
+    .left {
+        height: 200px;
+
+    }
+    .right {
+        margin-top: -3vh;
+        height: 200px;
+    }
 }
+
 .date {
-    font-size: 30px;
-    margin-top: 3vh;
+    margin-top: -5px;
+    font-size: 20px;
 }
 .time {
-    font-size: 30px;
+    font-size: 60px;
 }
-.status {
-    font-size: 30px;
-    margin-top: 4vh;
+.state > .des {
+    font-size: 15px;
+    font-weight: 900;
 }
-.state {
-    font-size: 30px;
+.state > .value {
+    font-size: 20px;
 }
 .content{
-    position: absolute;
+    position: absolute; 
+    width: 99%;
+    max-width: 600px;
     left: 50%;
-    top: v-bind('contentTopStyle');
+    top:50%;
     transform: translate(-50%, -50%);
+    animation:standby 20s infinite linear ;
+}
+@keyframes standby {
+    0% {
+        top: 40%;
+
+    }
+    50% {
+        top: 60%;
+    }
+    100% {
+        top: 40%;
+    }
 }
 </style>