✨ feat: 移动端基础支持 Part.2

Author: kazukokawagawa

src/components/Layout/User.vue

@@ -202,6 +202,19 @@ onBeforeMount(() => {
   &:active {
     background-color: rgba(var(--primary), 0.12);
   }
+  @media (max-width: 768px) {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    justify-content: center;
+    background-color: transparent;
+    .avatar {
+      border: none;
+    }
+    .user-data {
+      display: none;
+    }
+  }
 }
 .user-menu {
   display: flex;

src/components/Modal/Login/Login.vue

@@ -13,11 +13,11 @@
     <!-- 其他方式 -->
     <n-flex align="center" class="other">
       <n-button :focusable="false" size="small" quaternary round @click="specialLogin('uid')">
-        UID 登录
+        {{ isMobile ? "UID" : "UID 登录" }}
       </n-button>
       <n-divider vertical />
       <n-button :focusable="false" size="small" quaternary round @click="specialLogin('cookie')">
-        Cookie 登录
+        {{ isMobile ? "Cookie" : "Cookie 登录" }}
       </n-button>
     </n-flex>
     <!-- 关闭登录 -->
@@ -35,6 +35,7 @@ import { setCookies } from "@/utils/cookie";
 import { updateSpecialUserData, updateUserData } from "@/utils/auth";
 import { useDataStore } from "@/stores";
 import { LoginType } from "@/types/main";
+import { isMobile } from "@/utils/env";
 import LoginUID from "./LoginUID.vue";
 import LoginCookie from "./LoginCookie.vue";
 
@@ -122,5 +123,21 @@ onBeforeMount(() => {
   .close {
     margin-bottom: 8px;
   }
+  @media (max-width: 768px) {
+    .logo {
+      width: 50px;
+      height: 50px;
+      margin: 10px auto 20px auto;
+    }
+    .login-tabs {
+      transform: scale(0.9);
+    }
+    .other {
+      margin: 10px 0;
+      .n-button {
+        width: 80px;
+      }
+    }
+  }
 }
 </style>

src/components/Player/MainAMLyric.vue

@@ -153,6 +153,8 @@ onBeforeUnmount(() => {
       padding-left: 20px;
       padding-right: 20px;
       --amll-lyric-player-font-size: calc(var(--amll-lyric-player-font-size) - 4px);
+      pointer-events: auto;
+      cursor: pointer;
     }
   }
 

src/components/Player/MainLyric.vue

@@ -380,7 +380,6 @@ onBeforeUnmount(() => {
     transform: scale(0.86);
     transform-origin: left center;
     @media (max-width: 768px) {
-      text-align: left;
       align-items: flex-start;
       font-size: calc(var(--lrc-size) - 4px);
     }
@@ -506,6 +505,9 @@ onBeforeUnmount(() => {
         .roma {
           text-align: right;
           justify-content: flex-end;
+          @media (max-width: 768px) {
+            justify-content: flex-start;
+          }
         }
       }
     }

src/components/Search/SearchInp.vue

@@ -191,6 +191,25 @@ onMounted(() => {
     &.focus {
       width: 300px;
     }
+    @media (max-width: 768px) {
+      width: 40px;
+      padding: 0;
+      :deep(.n-input__input) {
+        opacity: 0;
+      }
+      :deep(.n-input__placeholder) {
+        opacity: 0;
+      }
+      &.focus {
+        width: 200px;
+        :deep(.n-input__input) {
+          opacity: 1;
+        }
+        :deep(.n-input__placeholder) {
+          opacity: 1;
+        }
+      }
+    }
   }
   .search-mask {
     position: fixed;