完善移动端页面适配

- 修复登录按钮在 iOS 与桌面端的样式兼容问题\n- 优化软键盘聚焦时登录弹窗的位置并移除外层滚动条\n- 调整 Module2 移动端图片、标题换行与文字对齐\n- 缩小 user-center 移动端卡片间距并保持桌面间距不变

src/components/layout/AppHeader.vue

@@ -31,7 +31,7 @@
           <button
             v-else
             type="button"
-            class="flex h-[30px] shrink-0 cursor-pointer items-center justify-center rounded-full bg-[#78788029] px-[clamp(0.625rem,3vw,1.5rem)] text-[clamp(0.75rem,3.2vw,0.875rem)] leading-none font-bold whitespace-nowrap backdrop-blur-md transition hover:brightness-110 md:h-[50px] md:w-[220px] md:px-6 md:text-xl"
+            class="header-login-button flex h-[30px] shrink-0 cursor-pointer items-center justify-center rounded-full px-[clamp(0.625rem,3vw,1.5rem)] text-[clamp(0.75rem,3.2vw,0.875rem)] leading-none font-bold whitespace-nowrap transition hover:brightness-110 md:h-[50px] md:w-[220px] md:px-6 md:text-xl"
             @click="openLoginModal"
           >
             登录/注册
@@ -106,3 +106,23 @@ onMounted(() => {
 
 watch(() => route.query.login, handleLoginQuery)
 </script>
+
+<style scoped>
+.header-login-button {
+  -webkit-appearance: none;
+  appearance: none;
+  border: 0;
+  background: rgb(120 120 128 / 16%);
+  box-shadow: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+@media (min-width: 768px) {
+  .header-login-button {
+    -webkit-appearance: button;
+    appearance: button;
+    -webkit-backdrop-filter: blur(12px);
+    backdrop-filter: blur(12px);
+  }
+}
+</style>

src/pages/Home/components/LoginFormModal.vue

@@ -3,7 +3,9 @@
     <DialogContent
       @pointer-down-outside="(event) => event.preventDefault()"
       @focus-outside="(event) => event.preventDefault()"
-      class="max-w-[300px] rounded-4xl bg-[#DDDDDD] p-[14px] md:max-w-[390px]"
+      @focusin="handleFocusIn"
+      class="login-dialog max-w-[300px] overflow-visible rounded-4xl bg-[#DDDDDD] p-[14px] md:max-w-[390px]"
+      :style="dialogViewportStyle"
       :showCloseButton="false"
     >
       <DialogHeader class="py-2 pl-2">
@@ -18,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import {
   Dialog,
   DialogContent,
@@ -29,21 +31,66 @@ import {
 import LoginForm from './LoginForm.vue'
 
 const isOpen = ref(false)
+const visualViewportTop = ref(window.visualViewport?.offsetTop ?? 0)
+const visualViewportHeight = ref(window.visualViewport?.height ?? window.innerHeight)
+let focusTimer: ReturnType<typeof setTimeout> | undefined
+
+const syncVisualViewport = () => {
+  const viewport = window.visualViewport
+  visualViewportTop.value = viewport?.offsetTop ?? 0
+  visualViewportHeight.value = viewport?.height ?? window.innerHeight
+}
+
+const dialogViewportStyle = computed(() => ({
+  top: `${visualViewportTop.value + visualViewportHeight.value / 2}px`,
+  maxHeight: `${Math.max(visualViewportHeight.value - 24, 0)}px`,
+}))
 
 const setOpen = (value: boolean) => {
   isOpen.value = value
+  if (value) nextTick(syncVisualViewport)
 }
 
 const show = () => {
-  isOpen.value = true
+  setOpen(true)
 }
 
 const hide = () => {
   isOpen.value = false
 }
 
+const handleFocusIn = () => {
+  if (focusTimer) clearTimeout(focusTimer)
+  focusTimer = setTimeout(() => {
+    syncVisualViewport()
+  }, 300)
+}
+
+onMounted(() => {
+  syncVisualViewport()
+  window.visualViewport?.addEventListener('resize', syncVisualViewport)
+  window.visualViewport?.addEventListener('scroll', syncVisualViewport)
+})
+
+onBeforeUnmount(() => {
+  if (focusTimer) clearTimeout(focusTimer)
+  window.visualViewport?.removeEventListener('resize', syncVisualViewport)
+  window.visualViewport?.removeEventListener('scroll', syncVisualViewport)
+})
+
 defineExpose({
   show,
   hide,
 })
 </script>
+
+<style scoped>
+.login-dialog {
+  will-change: top, max-height;
+  scrollbar-width: none;
+}
+
+.login-dialog::-webkit-scrollbar {
+  display: none;
+}
+</style>

src/pages/Home/index.vue

@@ -63,8 +63,14 @@
         <div
           class="mb-[80px] w-full rounded-[40px] bg-[#ADFF5B] px-[clamp(1rem,5vw,2rem)] pt-8 pb-2 text-black md:p-8 md:pb-2"
         >
-          <div class="text-center text-4xl font-black">“超强产品力，全面秒杀同级app”</div>
-          <div class="mt-2 text-center">为高能合伙人提供强力的的产品背书，每个点拿出去都能打。</div>
+          <div
+            class="text-left text-[clamp(1.75rem,9.6vw,2.25rem)] leading-tight font-black md:text-center md:text-4xl md:leading-10"
+          >
+            “超强产品力，<br class="md:hidden" />全面秒杀同级app”
+          </div>
+          <div class="mt-2 text-left md:text-center">
+            为高能合伙人提供强力的的产品背书，每个点拿出去都能打。
+          </div>
           <div class="el-style-scrollbar mt-8 flex gap-2 overflow-x-auto pb-4">
             <img
               :src="image"

src/pages/UserCenter/DesktopLayout/index.vue

@@ -1,6 +1,8 @@
 <template>
   <!-- Main Neon Green Card -->
-  <div class="mt-4 flex flex-col justify-center gap-[20px] md:mt-0 md:h-[668px] md:flex-row">
+  <div
+    class="mt-4 flex flex-col justify-center gap-[10px] md:mt-0 md:h-[668px] md:flex-row md:gap-[20px]"
+  >
     <!-- Left Column -->
     <div class="h-full w-[345px]">
       <Transition name="fade" mode="out-in">
@@ -9,13 +11,13 @@
     </div>
 
     <!-- Middle Column -->
-    <div class="flex h-full w-[345px] flex-col gap-[20px]">
+    <div class="flex h-full w-[345px] flex-col gap-[10px] md:gap-[20px]">
       <DownloadStats />
       <QuickTools />
     </div>
 
     <!-- Right Column -->
-    <div class="flex h-full w-[345px] flex-col gap-[20px]">
+    <div class="flex h-full w-[345px] flex-col gap-[10px] md:gap-[20px]">
       <ProxyData />
       <div class="">
         <SalesData @show-history="orderDetailsModalRef?.show()" />