hookehuyr

fix: 调整页面布局和登录输入验证

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