From 2b311f787a4063eb9cd9840384d58331f8dc70d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=89=8D=E7=AB=AF=E5=B0=8F=E5=95=8A=E7=99=BD?=
 <2053890199@qq.com>
Date: Mon, 17 Nov 2025 09:41:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E5=B1=85=E4=B8=AD=E9=97=AE=E9=A2=98=E5=92=8C?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E5=93=8D=E5=BA=94=E5=BC=8F=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

调整axios超时时间为60秒
修复Loading组件动画居中问题
优化index.html的viewport设置并添加响应式字体大小
修复home页面表单布局和输入框宽度问题
移除不必要的loading隐藏调用
---
 index.html                 | 31 ++++++++++++++++++++++++++++++-
 src/components/Loading.vue | 20 ++++++++++++++++++--
 src/pages/home/index.vue   |  8 ++++----
 src/utils/axios.ts         |  2 +-
 4 files changed, 53 insertions(+), 8 deletions(-)
diff --git a/index.html b/index.html
index f0863b0..cd3aa6a 100644
--- a/index.html
+++ b/index.html
@@ -3,8 +3,37 @@
   <head>
     <meta charset="UTF-8" />
     <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>
+    <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>
   <body>
     <div id="app"></div>
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
index bb90c88..fb58129 100644
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@@ -134,7 +134,8 @@ const spinnerStyle = computed(() => {
 // 计算svg样式
 const svgStyle = computed(() => {
   return {
-    animationDuration: '1.4s'
+    animationDuration: '1.4s',
+    transformOrigin: 'center center'
   }
 })
 
@@ -232,7 +233,12 @@ const textStyle = computed(() => {
 
 .loading-svg {
   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 {
@@ -270,6 +276,7 @@ const textStyle = computed(() => {
   border-style: solid;
   border-radius: 50%;
   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 {
   0%, 80%, 100% {
     transform: scale(0);
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index df5b083..85c5b4d 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -17,7 +17,7 @@
 
     <!-- 表单区域 -->
     <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">
           <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">
               <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()"
                 :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">
               <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"
                 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('获取活动信息失败，请稍后重试')
     activityInfo.value.status = 3;
   }).finally(() => {
-    hideLoading();
+    // hideLoading();
   })
 })
 
diff --git a/src/utils/axios.ts b/src/utils/axios.ts
index 6f17234..0d472d9 100644
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@@ -6,7 +6,7 @@ const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '/api';
 // 创建axios实例
 const request = axios.create({
   baseURL: API_BASE_URL, // 根据环境变量配置
-  timeout: 10000, // 请求超时时间
+  timeout: 60000, // 请求超时时间 60秒
   headers: {
     'Content-Type': 'application/json',
   },
