移动端适配

src/App.vue

@@ -16,15 +16,24 @@
           <MoreSet />
         </section>
       </div>
+      <!-- 移动端菜单按钮 -->
+      <Icon
+        class="menu"
+        size="24"
+        @click="store.mobileOpenState = !store.mobileOpenState"
+      >
+        <component :is="store.mobileOpenState ? CloseSmall : HamburgerButton" />
+      </Icon>
     </main>
     <Footer v-show="!store.backgroundShow && !store.setOpenState" />
   </div>
 </template>
-
 <script setup>
 import { onMounted, onBeforeUnmount, watch } from "vue";
 import { helloInit, checkDays } from "@/utils/getTime.js";
 import { mainStore } from "@/store";
+import { Icon } from "@vicons/utils";
+import { HamburgerButton, CloseSmall } from "@icon-park/vue-next";
 import MainLeft from "@/views/Main/Left.vue";
 import MainRight from "@/views/Main/Right.vue";
 import Background from "@/components/Background/index.vue";
@@ -119,7 +128,9 @@ main {
     width: 100%;
     height: 100vh;
     margin: 0 auto;
-    padding: 0 2vw;
+    @media (max-width: 1200px) {
+      padding: 0 2vw;
+    }
     .main {
       width: 100%;
       height: 100%;
@@ -142,6 +153,31 @@ main {
       -webkit-animation: fade 0.5s;
     }
   }
+  .menu {
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 84%;
+    left: calc(50% - 28px);
+    width: 56px;
+    height: 34px;
+    background: rgb(0 0 0 / 20%);
+    backdrop-filter: blur(10px);
+    border-radius: 6px;
+    transition: all 0.3s;
+    animation: fade;
+    -webkit-animation: fade 0.5s;
+    &:active {
+      transform: scale(0.95);
+    }
+    .i-icon {
+      transform: translateY(2px);
+    }
+    @media (min-width: 720px) {
+      display: none;
+    }
+  }
 }
 
 // 加载动画层

src/components/Links/index.vue

@@ -9,11 +9,14 @@
     <el-row class="link-all" :gutter="20">
       <el-col
         :span="8"
-        v-for="item in linksData"
+        v-for="(item, index) in linksData"
         :key="item"
         @click="jumpLink(item.link)"
       >
-        <div class="item cards">
+        <div
+          class="item cards"
+          :style="index < 3 ? 'margin-bottom: 20px' : null"
+        >
           <Icon size="26">
             <component :is="item.icon" />
           </Icon>
@@ -96,18 +99,12 @@ const jumpLink = (url) => {
     .item {
       height: 100px;
       width: 100%;
-      margin-bottom: 20px;
       display: flex;
       align-items: center;
       flex-direction: row;
       justify-content: center;
       animation: fade;
       -webkit-animation: fade 0.5s;
-      @media (max-width: 820px) {
-        .name {
-          display: none;
-        }
-      }
 
       &:hover {
         transform: scale(1.02);
@@ -118,6 +115,22 @@ const jumpLink = (url) => {
         font-size: 1.1rem;
         margin-left: 8px;
       }
+      @media (min-width: 720px) and (max-width: 820px) {
+        .name {
+          display: none;
+        }
+      }
+      @media (max-width: 720px) {
+        height: 80px;
+      }
+      @media (max-width: 460px) {
+        flex-direction: column;
+        .name {
+          font-size: 1rem;
+          margin-left: 0;
+          margin-top: 8px;
+        }
+      }
     }
   }
 }

src/components/Message/index.vue

@@ -83,12 +83,10 @@ watch(
     align-items: center;
     animation: fade;
     -webkit-animation: fade 0.5s;
-
     .logo-img {
       border-radius: 50%;
       width: 120px;
     }
-
     .name {
       width: 100%;
       margin-left: 12px;
@@ -102,6 +100,19 @@ watch(
       .sm {
         margin-left: 6px;
         font-size: 2rem;
+        @media (min-width: 720px) and (max-width: 789px) {
+          display: none;
+        }
+      }
+    }
+    @media (max-width: 768px) {
+      .logo-img {
+        width: 100px;
+      }
+      .name {
+        .bg {
+          font-size: 4.5rem;
+        }
       }
     }
   }
@@ -133,6 +144,10 @@ watch(
         align-self: flex-end;
       }
     }
+    @media (max-width: 720px) {
+      max-width: 100%;
+      pointer-events: none;
+    }
   }
 }
 </style>

src/components/Music/index.vue

@@ -292,6 +292,10 @@ watch(
     background-color: #ffffff66;
     border-radius: 6px;
     z-index: 999;
+    @media (max-width: 720px) {
+    left: calc(50% - 45%);
+    width: 90%;
+    }
     .close {
       position: absolute;
       top: 12px;

src/components/Player/index.vue

@@ -244,22 +244,16 @@ defineExpose({ playToggle, changeVolume, changeSong });
         margin: 4px 0 6px 6px;
         height: 100%;
         mask: linear-gradient(
-          180deg,
-          hsla(0, 0%, 100%, 0) 0,
-          hsla(0, 0%, 100%, 0.6) 10%,
           #fff 15%,
           #fff 85%,
-          hsla(0, 0%, 100%, 0.6) 90%,
+          hsla(0deg, 0%, 100%, 0.6) 90%,
-          hsla(0, 0%, 100%, 0)
+          hsla(0deg, 0%, 100%, 0)
         );
         -webkit-mask: linear-gradient(
-          180deg,
-          hsla(0, 0%, 100%, 0) 0,
-          hsla(0, 0%, 100%, 0.6) 10%,
           #fff 15%,
           #fff 85%,
-          hsla(0, 0%, 100%, 0.6) 90%,
+          hsla(0deg, 0%, 100%, 0.6) 90%,
-          hsla(0, 0%, 100%, 0)
+          hsla(0deg, 0%, 100%, 0)
         );
         &::before,
         &::after {
@@ -267,7 +261,6 @@ defineExpose({ playToggle, changeVolume, changeSong });
         }
         p {
           color: #efefef;
-          margin: 2px 0;
         }
         .aplayer-lrc-current {
           font-size: 0.95rem;
@@ -282,7 +275,7 @@ defineExpose({ playToggle, changeVolume, changeSong });
   :deep(.aplayer-list) {
     margin-top: 6px;
     ol {
-      &::-webkit-scrollbar-track{
+      &::-webkit-scrollbar-track {
         background-color: transparent;
       }
       li {

src/store/index.js

@@ -12,6 +12,8 @@ export const mainStore = defineStore("main", {
             musicOpenState: false, // 音乐面板开启状态
             backgroundShow: false, // 壁纸展示状态
             boxOpenState: false, // 盒子开启状态
+            mobileOpenState: false, // 移动端开启状态
+            mobileFuncState: false, // 移动端功能区开启状态
             setOpenState: false, // 设置页面开启状态
             playerState: false, // 当前播放状态
             playerTitle: null, // 当前播放歌曲名
@@ -40,6 +42,10 @@ export const mainStore = defineStore("main", {
         // 更改当前页面宽度
         setInnerWidth(value) {
             this.innerWidth = value;
+            if (value >= 720) {
+                this.mobileOpenState = false;
+                this.mobileFuncState = false;
+            }
         },
         // 更改播放状态
         setPlayerState(value) {

src/views/Func/index.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- 功能区域 -->
-  <div class="function">
+  <div :class="store.mobileFuncState ? 'function mobile' : 'function'">
     <el-row :gutter="20">
       <el-col :span="12">
         <div class="left">
@@ -34,10 +34,13 @@
 
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from "vue";
+import { getCurrentTime } from "@/utils/getTime";
+import { mainStore } from "@/store";
 import Music from "@/components/Music/index.vue";
 import Hitokoto from "@/components/Hitokoto/index.vue";
 import Weather from "@/components/Weather/index.vue";
-import { getCurrentTime } from "@/utils/getTime";
+
+const store = mainStore();
 
 // 当前时间
 let currentTime = ref({});
@@ -61,11 +64,29 @@ onBeforeUnmount(() => {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
+  &.mobile {
+    .el-row {
+      .el-col {
+        &:nth-of-type(1) {
+          display: contents;
+        }
+        &:nth-of-type(2) {
+          display: none;
+        }
+      }
+    }
+  }
   .el-row {
     height: 100%;
     width: 100%;
     margin: 0 !important;
     .el-col {
+      &:nth-of-type(1) {
+        padding-left: 0 !important;
+      }
+      &:nth-of-type(2) {
+        padding-right: 0 !important;
+      }
       @media (max-width: 910px) {
         &:nth-of-type(1) {
           display: none;
@@ -77,12 +98,6 @@ onBeforeUnmount(() => {
           width: 100%;
         }
       }
-      &:nth-of-type(1) {
-        padding-left: 0 !important;
-      }
-      &:nth-of-type(2) {
-        padding-right: 0 !important;
-      }
     }
     .left,
     .right {

src/views/Main/Left.vue

@@ -1,13 +1,15 @@
 <template>
-  <div class="left">
+  <div :class="store.mobileOpenState ? 'left hidden' : 'left'">
     <Message />
     <SocialLinks />
   </div>
 </template>
 
 <script setup>
+import { mainStore } from "@/store";
 import Message from "@/components/Message/index.vue";
 import SocialLinks from "@/components/SocialLinks/index.vue";
+const store = mainStore();
 </script>
 
 <style lang="scss" scoped>
@@ -15,5 +17,11 @@ import SocialLinks from "@/components/SocialLinks/index.vue";
   flex: 1 0 0%;
   margin-right: 10px;
   transform: translateY(20px);
+  &.hidden {
+    display: none;
+  }
+  @media (max-width: 720px) {
+    margin-right: 0;
+  }
 }
 </style>

src/views/Main/Right.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="right">
+  <div :class="store.mobileOpenState ? 'right' : 'right hidden'">
+    <!-- 移动端 Logo -->
+    <div class="logo" @click="store.mobileFuncState = !store.mobileFuncState">
+      <span class="bg">{{ siteUrl[0] }}</span>
+      <span class="sm">.{{ siteUrl[1] }}</span>
+    </div>
     <!-- 功能区 -->
     <Func />
     <!-- 网站链接 -->
@@ -13,6 +18,9 @@ import { mainStore } from "@/store";
 import Func from "@/views/Func/index.vue";
 import Link from "@/components/Links/index.vue";
 const store = mainStore();
+
+// 站点链接
+let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
 </script>
 
 
@@ -20,5 +28,29 @@ const store = mainStore();
 .right {
   flex: 1 0 0%;
   margin-left: 0.75rem;
+  .logo {
+    font-family: "Pacifico-Regular";
+    font-size: 1.75rem;
+    position: fixed;
+    width: 140px;
+    text-align: center;
+    top: 8%;
+    left: calc(50% - 70px);
+    transition: all 0.3s;
+    animation: fade;
+    -webkit-animation: fade 0.5s;
+    &:active {
+      transform: scale(0.95);
+    }
+    @media (min-width: 720px) {
+      display: none;
+    }
+  }
+  @media (max-width: 720px) {
+    margin-left: 0;
+    &.hidden {
+      display: none;
+    }
+  }
 }
 </style>