hookehuyr

feat(登录页): 添加输入框聚焦时页面平滑滚动功能

在登录页的电话输入框聚焦时,页面会自动向上平滑滚动150px,以避免输入框被键盘遮挡,提升用户体验。
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
28 type="tel" 28 type="tel"
29 autocomplete="tel" 29 autocomplete="tel"
30 required 30 required
31 + @focus="handleInputFocus"
31 class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500" 32 class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
32 /> 33 />
33 </div> 34 </div>
...@@ -127,6 +128,17 @@ import FrostedGlass from "@/components/ui/FrostedGlass.vue"; ...@@ -127,6 +128,17 @@ import FrostedGlass from "@/components/ui/FrostedGlass.vue";
127 import { useAuth } from "@/contexts/auth"; 128 import { useAuth } from "@/contexts/auth";
128 import { loginAPI, getUserInfoAPI } from "@/api/users"; 129 import { loginAPI, getUserInfoAPI } from "@/api/users";
129 import { useTitle } from "@vueuse/core"; 130 import { useTitle } from "@vueuse/core";
131 +
132 +const handleInputFocus = () => {
133 + setTimeout(() => {
134 + // 使用平滑滚动将页面向上移动200px(根据实际按钮区域高度调整)
135 + window.scrollTo({
136 + top: 150,
137 + behavior: 'smooth'
138 + });
139 + }, 100);
140 +};
141 +
130 const $route = useRoute(); 142 const $route = useRoute();
131 useTitle($route.meta.title); 143 useTitle($route.meta.title);
132 144
......
1 <!-- 1 <!--
2 * @Date: 2025-03-24 13:04:21 2 * @Date: 2025-03-24 13:04:21
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-03-26 13:03:11 4 + * @LastEditTime: 2025-03-26 13:09:59
5 * @FilePath: /mlaj/src/views/profile/SettingsPage.vue 5 * @FilePath: /mlaj/src/views/profile/SettingsPage.vue
6 * @Description: 用户设置页面 6 * @Description: 用户设置页面
7 --> 7 -->
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
44 </div> 44 </div>
45 45
46 <!-- 密码设置 --> 46 <!-- 密码设置 -->
47 - <div class="p-4" @click="router.push('/profile/settings/password')"> 47 + <!-- <div class="p-4" @click="router.push('/profile/settings/password')">
48 <div class="flex items-center justify-between"> 48 <div class="flex items-center justify-between">
49 <div> 49 <div>
50 <h3 class="text-base font-medium text-gray-900">修改密码</h3> 50 <h3 class="text-base font-medium text-gray-900">修改密码</h3>
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
52 </div> 52 </div>
53 <ChevronRightIcon class="w-5 h-5 text-gray-400" /> 53 <ChevronRightIcon class="w-5 h-5 text-gray-400" />
54 </div> 54 </div>
55 - </div> 55 + </div> -->
56 56
57 <!-- 视频上传 --> 57 <!-- 视频上传 -->
58 <div class="p-4" @click="router.push('/upload_video')"> 58 <div class="p-4" @click="router.push('/upload_video')">
......