diff --git a/index.html b/index.html index f0863b0..cd3aa6a 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,37 @@ - + 1 +
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 @@
-
+
@@ -31,7 +31,7 @@
+ maxlength="11" class="outline-none focus:border-[#E8424D] transition-colors flex-1 h-11 w-full" />