Merge pull request #315 from supine0703/dev

解决小屏移动端组件重叠、显示不全问题，修复一些问题，做了一些优化
2024-11-16 11:42:18 +08:00 · 2024-07-10 09:13:24 +08:00 · 2024-07-10 09:13:24 +08:00 · 7ecc9026a5
commit 7ecc9026a5
parent 52602e91a5 0ea222c376
10 changed files with 162 additions and 44 deletions
--- a/.env.example
+++ b/.env.example
@ -1,6 +1,6 @@
 # 站点信息
 VITE_SITE_NAME = "無名の主页" # 名称
-VITE_SITE_ANTHOR = "無名" # 作者
+VITE_SITE_AUTHOR = "無名" # 作者
 VITE_SITE_KEYWORDS = "無名,个人主页" # 关键词
 VITE_SITE_DES = "一个默默无闻的主页" # 站点简介
 VITE_SITE_URL = "imsyy.top" # 站点地址
--- a/index.html
+++ b/index.html
@ -11,7 +11,7 @@
    <link rel="apple-touch-icon-precomposed" sizes="200x200" href="%VITE_SITE_APPLE_LOGO%" />
    <meta name="description" content="%VITE_SITE_DES%" />
    <meta name="keywords" content="%VITE_SITE_KEYWORDS%" />
-    <meta name="author" content="%VITE_SITE_ANTHOR%" />
+    <meta name="author" content="%VITE_SITE_AUTHOR%" />
    <meta name="theme-color" content="#424242" />
    <title>%VITE_SITE_NAME%</title>
    <!-- HarmonyOS Sans -->
--- a/src/App.vue
+++ b/src/App.vue
@ -27,11 +27,12 @@
      </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>
 </template>
+
 <script setup>
 import { helloInit, checkDays } from "@/utils/getTime.js";
 import { HamburgerButton, CloseSmall } from "@icon-park/vue-next";
@ -68,8 +69,9 @@ const loadComplete = () => {
 watch(
  () => store.innerWidth,
  (value) => {
-    if (value < 990) {
+    if (value < 721) {
      store.boxOpenState = false;
+      store.setOpenState = false;
    }
  },
 );
@ -139,6 +141,7 @@ onBeforeUnmount(() => {
    width: 100%;
    height: 100vh;
    margin: 0 auto;
+    padding: 0 0.5vw;
    .all {
      width: 100%;
      height: 100%;
@ -164,7 +167,7 @@ onBeforeUnmount(() => {
    }
  }
  .menu {
-    position: fixed;
+    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
@ -187,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>
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@ -3,13 +3,15 @@
    <Transition name="fade" mode="out-in">
      <div v-if="!store.playerState || !store.playerLrcShow" class="power">
        <span>
-          Copyright&nbsp;&copy;
-          <span v-if="siteStartDate?.length >= 4" class="site-start">
-            {{ siteStartDate.substring(0, 4) }}
+          <span :class="startYear < fullYear ? 'c-hidden' : 'hidden'">Copyright&nbsp;</span>
+          &copy;
+          <span v-if="startYear < fullYear"
+            class="site-start">
+            {{ startYear }}
            -
          </span>
          {{ fullYear }}
-          <a :href="siteUrl">{{ siteAnthor }}</a>
+          <a :href="siteUrl">{{ siteAuthor }}</a>
        </span>
        <!-- 以下信息请不要修改哦 -->
        <span class="hidden">
@ -19,10 +21,12 @@
          </a>
        </span>
        <!-- 站点备案 -->
-        <a v-if="siteIcp" href="https://beian.miit.gov.cn" target="_blank">
+        <span>
          &amp;
-          {{ siteIcp }}
-        </a>
+          <a v-if="siteIcp" href="https://beian.miit.gov.cn" target="_blank">
+            {{ siteIcp }}
+          </a>
+        </span>
      </div>
      <div v-else class="lrc">
        <Transition name="fade" mode="out-in">
@ -46,9 +50,13 @@ const store = mainStore();
 const fullYear = new Date().getFullYear();

 // 加载配置数据
-const siteStartDate = ref(import.meta.env.VITE_SITE_START);
+// const siteStartDate = ref(import.meta.env.VITE_SITE_START);
+const startYear = ref(
+  import.meta.env.VITE_SITE_START?.length >= 4 ? 
+  import.meta.env.VITE_SITE_START.substring(0, 4) : null
+);
 const siteIcp = ref(import.meta.env.VITE_SITE_ICP);
-const siteAnthor = ref(import.meta.env.VITE_SITE_ANTHOR);
+const siteAuthor = ref(import.meta.env.VITE_SITE_AUTHOR);
 const siteUrl = computed(() => {
  const url = import.meta.env.VITE_SITE_URL;
  if (!url) return "https://www.imsyy.top";
@ -71,6 +79,9 @@ const siteUrl = computed(() => {
  text-align: center;
  z-index: 0;
  font-size: 14px;
+  // 文字不换行
+  word-break: keep-all;
+  white-space: nowrap;
  .power {
    animation: fade 0.3s;
  }
@ -106,9 +117,14 @@ const siteUrl = computed(() => {
    transition: opacity 0.15s ease-in-out;
  }
  @media (max-width: 720px) {
-    font-size: 0.85rem;
+    font-size: 0.9rem;
    &.blur {
-      font-size: 0.85rem;
+      font-size: 0.9rem;
+    }
+  }
+  @media (max-width: 560px) {
+    .c-hidden {
+      display: none;
    }
  }
  @media (max-width: 480px) {
--- 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>
--- a/src/components/TimeCapsule.vue
+++ b/src/components/TimeCapsule.vue
@ -16,7 +16,7 @@
            剩余&nbsp;{{ item.remaining }}&nbsp;{{ tag === "day" ? "小时" : "天" }}
          </span>
        </div>
-        <el-progress :text-inside="true" :stroke-width="20" :percentage="item.percentage" />
+        <el-progress :text-inside="true" :stroke-width="20" :percentage="parseFloat(item.percentage)" />
      </div>
      <!-- 建站日期 -->
      <div v-if="store.siteStartShow" class="capsule-item start">
--- a/src/style/style.scss
+++ b/src/style/style.scss
@ -37,6 +37,12 @@ p {
  }
 }

+// 链接悬停效果
+a:hover {
+  color: rgb(57, 159, 255);
+  text-decoration: underline;
+}
+
 // 字体文件
@font-face {
  font-family: "Pacifico-Regular";
--- 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;
--- 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;
--- 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 {