fix: 调整页面布局和登录输入验证
- 在ProfilePage.vue中为打卡统计区域添加顶部内边距,改善视觉效果 - 在AppLayout.vue中根据路由路径动态调整main元素的padding,优化/profile页面的布局 - 在LoginPage.vue中添加手机号输入验证,限制输入为11位数字并更新错误提示信息
Showing
3 changed files
with
10 additions
and
4 deletions
| ... | @@ -14,7 +14,7 @@ | ... | @@ -14,7 +14,7 @@ |
| 14 | :onBack="handleBack" | 14 | :onBack="handleBack" |
| 15 | :rightContent="rightContent" | 15 | :rightContent="rightContent" |
| 16 | /> | 16 | /> |
| 17 | - <main :class="{ 'pb-16': title, 'py-4': !title }"> | 17 | + <main :class="{ 'pb-16': title, 'py-4': !title && route.path !== '/profile' }"> |
| 18 | <slot></slot> | 18 | <slot></slot> |
| 19 | </main> | 19 | </main> |
| 20 | <BottomNav v-if="!hideBottomNav" /> | 20 | <BottomNav v-if="!hideBottomNav" /> |
| ... | @@ -24,6 +24,9 @@ | ... | @@ -24,6 +24,9 @@ |
| 24 | <script setup> | 24 | <script setup> |
| 25 | import BottomNav from './BottomNav.vue' | 25 | import BottomNav from './BottomNav.vue' |
| 26 | import GradientHeader from '../ui/GradientHeader.vue' | 26 | import GradientHeader from '../ui/GradientHeader.vue' |
| 27 | +import { useRoute } from 'vue-router' | ||
| 28 | + | ||
| 29 | +const route = useRoute() | ||
| 27 | 30 | ||
| 28 | const props = defineProps({ | 31 | const props = defineProps({ |
| 29 | title: { | 32 | title: { | ... | ... |
| ... | @@ -28,6 +28,9 @@ | ... | @@ -28,6 +28,9 @@ |
| 28 | type="tel" | 28 | type="tel" |
| 29 | autocomplete="tel" | 29 | autocomplete="tel" |
| 30 | required | 30 | required |
| 31 | + pattern="^1[3-9]\d{9}$" | ||
| 32 | + maxlength="11" | ||
| 33 | + @input="mobile = $event.target.value.replace(/\D/g, '')" | ||
| 31 | @focus="handleInputFocus" | 34 | @focus="handleInputFocus" |
| 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" | 35 | 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" |
| 33 | /> | 36 | /> |
| ... | @@ -168,7 +171,7 @@ const handleSubmit = async () => { | ... | @@ -168,7 +171,7 @@ const handleSubmit = async () => { |
| 168 | }); | 171 | }); |
| 169 | 172 | ||
| 170 | if (response.code !== 1) { | 173 | if (response.code !== 1) { |
| 171 | - error.value = response.msg || "登录失败,请检查您的凭据"; | 174 | + error.value = response.msg || "登录失败,请检查您的输入项"; |
| 172 | return; | 175 | return; |
| 173 | } | 176 | } |
| 174 | 177 | ||
| ... | @@ -182,7 +185,7 @@ const handleSubmit = async () => { | ... | @@ -182,7 +185,7 @@ const handleSubmit = async () => { |
| 182 | const redirect = $route.query.redirect; | 185 | const redirect = $route.query.redirect; |
| 183 | router.push(redirect || "/"); | 186 | router.push(redirect || "/"); |
| 184 | } else { | 187 | } else { |
| 185 | - error.value = "登录失败,请检查您的凭据"; | 188 | + error.value = "登录失败,请检查您的输入项"; |
| 186 | } | 189 | } |
| 187 | } | 190 | } |
| 188 | 191 | ... | ... |
| ... | @@ -29,7 +29,7 @@ | ... | @@ -29,7 +29,7 @@ |
| 29 | </div> | 29 | </div> |
| 30 | 30 | ||
| 31 | <!-- Check-in Statistics --> | 31 | <!-- Check-in Statistics --> |
| 32 | - <div class="px-4 mb-5"> | 32 | + <div class="px-4 mb-5 pt-4"> |
| 33 | <FrostedGlass class="p-4 rounded-xl"> | 33 | <FrostedGlass class="p-4 rounded-xl"> |
| 34 | <div class="flex justify-between items-center mb-4"> | 34 | <div class="flex justify-between items-center mb-4"> |
| 35 | <h3 class="font-semibold text-base">打卡统计</h3> | 35 | <h3 class="font-semibold text-base">打卡统计</h3> | ... | ... |
-
Please register or login to post a comment