完善移动端页面适配

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

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>