From 0ea222c37640c6ec85fed93bbc3a7350a26c6393 Mon Sep 17 00:00:00 2001
From: supine0703 <supine0703@outlook.com>
Date: Sun, 30 Jun 2024 06:02:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A7=A3=E5=86=B3=E5=B0=8F=E5=B1=8F?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=20=E5=B9=B6=E4=BC=98=E5=8C=96=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题: 当（移动端）屏幕较小时，会造成组件重叠、组件在屏幕外(显示不全)等。
1. 对小屏移动端（手机）显示做优化，特别是横屏。=> 低于高度或者宽度显示阈值，则固定大小，使用滚轮
2. 对显示滚轮做优化，使组件在出现滚轮时不产生瞬间偏移，造成视觉割裂感
3. 因为做了小屏显示的优化, 我认为不必将设置界面阈值设置为990，我降低到了720（让移动端也可以开启），并对其做了响应式
---
 src/App.vue                 | 66 +++++++++++++++++++++++++++++++++++--
 src/components/Message.vue  | 50 ++++++++++++++--------------
 src/views/Func/index.vue    |  9 +++++
 src/views/Main/Right.vue    | 11 +++++--
 src/views/MoreSet/index.vue | 17 ++++++++++
 5 files changed, 124 insertions(+), 29 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7cf76e2..7c6aa87 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,7 +27,7 @@
       </Icon>
       <!-- 页脚 -->
       <Transition name="fade" mode="out-in">
-        <Footer v-show="!store.backgroundShow && !store.setOpenState" />
+        <Footer class="f-ter" v-show="!store.backgroundShow && !store.setOpenState" />
       </Transition>
     </main>
   </Transition>
@@ -69,8 +69,9 @@ const loadComplete = () => {
 watch(
   () => store.innerWidth,
   (value) => {
-    if (value < 990) {
+    if (value < 721) {
       store.boxOpenState = false;
+      store.setOpenState = false;
     }
   },
 );
@@ -140,6 +141,7 @@ onBeforeUnmount(() => {
     width: 100%;
     height: 100vh;
     margin: 0 auto;
+    padding: 0 0.5vw;
     .all {
       width: 100%;
       height: 100%;
@@ -188,5 +190,65 @@ onBeforeUnmount(() => {
       display: none;
     }
   }
+  @media (max-height: 720px) {
+    overflow-y: auto;
+    overflow-x: hidden;
+    .container {
+      height: 721px;
+      .more {
+        height: 721px;
+        width: calc(100% + 6px);
+      }
+      @media (min-width: 391px) {
+        // w 1201px ~ max
+        padding-left: 0.7vw;
+        padding-right: 0.25vw;
+        @media (max-width: 1200px) { // w 1101px ~ 1280px
+          padding-left: 2.3vw;
+          padding-right: 1.75vw;
+        }
+        @media (max-width: 1100px) { // w 993px ~ 1100px
+          padding-left: 2vw;
+          padding-right: calc(2vw - 6px);
+        }
+        @media (max-width: 992px) { // w 901px ~ 992px
+          padding-left: 2.3vw;
+          padding-right: 1.7vw;
+        }
+        @media (max-width: 900px) { // w 391px ~ 900px
+          padding-left: 2vw;
+          padding-right: calc(2vw - 6px);
+        }
+      }
+    }
+    .menu {
+      top: 605.64px; // 721px * 0.84
+      left: 170.5px; // 391 * 0.5 - 25px
+      @media (min-width: 391px) {
+        left: calc(50% - 25px);
+      }
+    }
+    .f-ter {
+      top: 675px; // 721px - 46px
+      @media (min-width: 391px) {
+        padding-left: 6px;
+      }
+    }
+  }
+  @media (max-width: 390px) {
+    overflow-x: auto;
+    .container {
+      width: 391px;
+    }
+    .menu {
+      left: 167.5px; // 391px * 0.5 - 28px
+    }
+    .f-ter {
+      width: 391px;
+    }
+    @media (min-height: 721px) {
+      overflow-y: hidden;
+    }
+  }
 }
 </style>
diff --git a/src/components/Message.vue b/src/components/Message.vue
index 24c556d..cbd4f16 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -58,7 +58,7 @@ const descriptionText = reactive({
 
 // 切换右侧功能区
 const changeBox = () => {
-  if (store.getInnerWidth >= 990) {
+  if (store.getInnerWidth >= 721) {
     store.boxOpenState = !store.boxOpenState;
   } else {
     ElMessage({
@@ -112,7 +112,7 @@ watch(
       .sm {
         margin-left: 6px;
         font-size: 2rem;
-        @media (min-width: 720px) and (max-width: 789px) {
+        @media (min-width: 721px) and (max-width: 789px) {
           display: none;
         }
       }
@@ -166,28 +166,28 @@ watch(
       pointer-events: none;
     }
   }
-  @media (max-width: 390px) {
-    .logo {
-      flex-direction: column;
-      .logo-img {
-        display: none;
-      }
-      .name {
-        margin-left: 0;
-        height: auto;
-        transform: none;
-        text-align: center;
-        .bg {
-          font-size: 3.5rem;
-        }
-        .sm {
-          font-size: 1.4rem;
-        }
-      }
-    }
-    .description {
-      margin-top: 2.5rem;
-    }
-  }
+  // @media (max-width: 390px) {
+  //   .logo {
+  //     flex-direction: column;
+  //     .logo-img {
+  //       display: none;
+  //     }
+  //     .name {
+  //       margin-left: 0;
+  //       height: auto;
+  //       transform: none;
+  //       text-align: center;
+  //       .bg {
+  //         font-size: 3.5rem;
+  //       }
+  //       .sm {
+  //         font-size: 1.4rem;
+  //       }
+  //     }
+  //   }
+  //   .description {
+  //     margin-top: 2.5rem;
+  //   }
+  // }
 }
 </style>
diff --git a/src/views/Func/index.vue b/src/views/Func/index.vue
index e3775fd..031dcfc 100644
--- a/src/views/Func/index.vue
+++ b/src/views/Func/index.vue
@@ -127,6 +127,15 @@ onBeforeUnmount(() => {
           letter-spacing: 2px;
           font-family: "UnidreamLED";
         }
+        @media (min-width: 1201px) and (max-width: 1280px) {
+          font-size: 1rem;
+        }
+        @media (min-width: 911px) and (max-width: 992px) {
+          font-size: 1rem;
+          .text {
+            font-size: 2.75rem;
+          }
+        }
       }
       .weather {
         text-align: center;
diff --git a/src/views/Main/Right.vue b/src/views/Main/Right.vue
index b541d6b..73add49 100644
--- a/src/views/Main/Right.vue
+++ b/src/views/Main/Right.vue
@@ -39,7 +39,7 @@ const siteUrl = computed(() => {
   .logo {
     width: 100%;
     font-family: "Pacifico-Regular";
-    font-size: 1.75rem;
+    font-size: 2.25rem;
     position: fixed;
     top: 6%;
     left: 0;
@@ -49,9 +49,16 @@ const siteUrl = computed(() => {
     &:active {
       transform: scale(0.95);
     }
-    @media (min-width: 720px) {
+    @media (min-width: 721px) {
       display: none;
     }
+    @media (max-height: 720px) {
+      width: calc(100% + 6px);
+      top: 43.26px; // 721px * 0.06
+    }
+    @media (max-width: 390px) {
+        width: 391px;
+    }
   }
   @media (max-width: 720px) {
     margin-left: 0;
diff --git a/src/views/MoreSet/index.vue b/src/views/MoreSet/index.vue
index 64d96e8..2b9c1f3 100644
--- a/src/views/MoreSet/index.vue
+++ b/src/views/MoreSet/index.vue
@@ -145,6 +145,23 @@ const jumpTo = (url) => {
           margin-left: 6px;
           font-size: 2rem;
         }
+
+        @media (max-width: 990px) {
+          .bg {
+            font-size: 4.5rem;
+          }
+          .sm {
+            font-size: 1.7rem;
+          }
+        }
+        @media (max-width: 825px) {
+          .bg {
+            font-size: 3.8rem;
+          }
+          .sm {
+            font-size: 1.3rem;
+          }
+        }
       }
 
       .version {