fucai
/
fucai-claim
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: fucai:c2e27c4b34c19bad8d9c289e0066f015e463b148
Branches Tags
fucai:master
...
compare: fucai:faa526abcaae7a2bb192212ac4f91ca32469d1b2
Branches Tags
fucai:master

2 Commits
c2e27c4b34 ... faa526abca

Author SHA1 Message Date
前端小啊白 faa526abca Merge branch 'master' of http://123.60.153.169:3006/fucai/fucai-marriage-h5-register 2025-11-17 09:41:26 +08:00
前端小啊白 2b311f787a fix: 修复加载动画居中问题和表单响应式布局 
调整axios超时时间为60秒
修复Loading组件动画居中问题
优化index.html的viewport设置并添加响应式字体大小
修复home页面表单布局和输入框宽度问题
移除不必要的loading隐藏调用
 2025-11-17 09:41:23 +08:00
4 changed files with 53 additions and 8 deletions
Show Stats Expand all files Collapse all files

31
index.html
View File

@ -3,8 +3,37 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>1</title> <title>1</title>
<script>
// 根据屏幕宽度动态设置根元素字体大小，用于Tailwind CSS响应式调整
function setResponsiveBaseSize() {
const screenWidth = window.innerWidth || document.documentElement.clientWidth;
// 设置基础字体大小，影响Tailwind的rem单位
// 在小屏幕上使用较小的基础值，大屏幕上使用较大值
let baseFontSize;
if (screenWidth < 640) {
// 移动设备
baseFontSize = 14;
} else if (screenWidth < 1024) {
// 平板设备
baseFontSize = 16;
} else {
// 桌面设备
baseFontSize = 18;
}
document.documentElement.style.fontSize = `${baseFontSize}px`;
}
// 初始化设置
window.addEventListener('DOMContentLoaded', setResponsiveBaseSize);
// 监听窗口大小变化
window.addEventListener('resize', setResponsiveBaseSize);
// 监听设备方向变化
window.addEventListener('orientationchange', setResponsiveBaseSize);
</script>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

20
src/components/Loading.vue
View File

@ -134,7 +134,8 @@ const spinnerStyle = computed(() => {
// 计算svg样式 // 计算svg样式
const svgStyle = computed(() => { const svgStyle = computed(() => {
return { return {
animationDuration: '1.4s' animationDuration: '1.4s',
transformOrigin: 'center center'
} }
}) })
@ -232,7 +233,12 @@ const textStyle = computed(() => {
.loading-svg { .loading-svg {
animation: rotate 1.4s linear infinite; animation: rotate 1.4s linear infinite;
transform-origin: center; transform-origin: center center;
}
/* 确保SVG中的circle元素也正确居中 */
.loading-svg circle {
transform-origin: 25px 25px; /* 匹配circle的cx="25" cy="25" */
} }
.loading-path { .loading-path {
@ -270,6 +276,7 @@ const textStyle = computed(() => {
border-style: solid; border-style: solid;
border-radius: 50%; border-radius: 50%;
animation: spin 1.4s linear infinite; animation: spin 1.4s linear infinite;
transform-origin: center center;
} }
/* 加载文本样式 */ /* 加载文本样式 */
@ -300,6 +307,15 @@ const textStyle = computed(() => {
} }
} }
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes bounce { @keyframes bounce {
0%, 80%, 100% { 0%, 80%, 100% {
transform: scale(0); transform: scale(0);

8
src/pages/home/index.vue
View File

@ -17,7 +17,7 @@
<!-- 表单区域 --> <!-- 表单区域 -->
<div class="p-4 -mt-10 z-10 relative"> <div class="p-4 -mt-10 z-10 relative">
<div class="max-w-md mx-auto bg-white rounded-xl shadow-sm p-6"> <div class="mx-auto bg-white rounded-xl shadow-sm p-6">
<!-- 标题 --> <!-- 标题 -->
<div class="flex items-center justify-center text-xl text-[#E8424D] mb-6"> <div class="flex items-center justify-center text-xl text-[#E8424D] mb-6">
<img src="/爱心点缀1.png" alt="" class="h-5"> <img src="/爱心点缀1.png" alt="" class="h-5">
@ -31,7 +31,7 @@
<!-- 手机号输入 --> <!-- 手机号输入 -->
<div class="mb-5 flex items-center gap-3 border border-gray-200 rounded-lg px-4"> <div class="mb-5 flex items-center gap-3 border border-gray-200 rounded-lg px-4">
<input :disabled="formData.verifyCode" v-model="formData.phone" type="tel" placeholder="请输入手机号码" <input :disabled="formData.verifyCode" v-model="formData.phone" type="tel" placeholder="请输入手机号码"
maxlength="11" class="outline-none focus:border-[#E8424D] transition-colors flex-1 h-11" /> maxlength="11" class="outline-none focus:border-[#E8424D] transition-colors flex-1 h-11 w-full" />
<button @click="formData.verifyCode ? clearPhone() : sendVerificationCode()" <button @click="formData.verifyCode ? clearPhone() : sendVerificationCode()"
:disabled="countdown > 0 || formData.phone.length !== 11" :disabled="countdown > 0 || formData.phone.length !== 11"
@ -43,7 +43,7 @@
<!-- 验证码输入 --> <!-- 验证码输入 -->
<div class="mb-5 flex items-center gap-3 border border-gray-200 rounded-lg px-4"> <div class="mb-5 flex items-center gap-3 border border-gray-200 rounded-lg px-4">
<input :disabled="formData.verifyCode" v-model="formData.smsCode" type="text" placeholder="请输入验证码" <input :disabled="formData.verifyCode" v-model="formData.smsCode" type="text" placeholder="请输入验证码"
maxlength="6" class="outline-none focus:border-[#E8424D] transition-colors flex-1 h-11" /> maxlength="6" class="outline-none focus:border-[#E8424D] transition-colors flex-1 h-11 w-full" />
<button v-if="!formData.verifyCode" @click="verifyCode" :disabled="formData.smsCode.length !== 6" <button v-if="!formData.verifyCode" @click="verifyCode" :disabled="formData.smsCode.length !== 6"
class="h-8 px-4 bg-[#E8424D] text-white rounded-lg text-sm transition-all hover:opacity-90 active:scale-98 disabled:bg-[#8a8a8a]"> class="h-8 px-4 bg-[#E8424D] text-white rounded-lg text-sm transition-all hover:opacity-90 active:scale-98 disabled:bg-[#8a8a8a]">
验证 验证
@ -183,7 +183,7 @@ onMounted(() => {
message.error('获取活动信息失败，请稍后重试') message.error('获取活动信息失败，请稍后重试')
activityInfo.value.status = 3; activityInfo.value.status = 3;
}).finally(() => { }).finally(() => {
hideLoading(); // hideLoading();
}) })
}) })

2
src/utils/axios.ts
View File

@ -6,7 +6,7 @@ const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '/api';
// 创建axios实例 // 创建axios实例
const request = axios.create({ const request = axios.create({
baseURL: API_BASE_URL, // 根据环境变量配置 baseURL: API_BASE_URL, // 根据环境变量配置
timeout: 10000, // 请求超时时间 timeout: 60000, // 请求超时时间 60秒
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },