diff --git a/0000_gb_points_temp/.env.development b/0000_gb_points_temp/.env.development index 5eead7e..e0e883f 100644 --- a/0000_gb_points_temp/.env.development +++ b/0000_gb_points_temp/.env.development @@ -5,7 +5,7 @@ VITE_PORT = 8848 VITE_PUBLIC_PATH = ./ # 网站前缀 -VITE_BASE_URL = "up.xx.sczqb6.top" +VITE_BASE_URL = "cwtyqal8.dagf7.top" # 开发环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"） VITE_ROUTER_HISTORY = "hash" diff --git a/0000_gb_points_temp/src/views/Loading copy 2.vue b/0000_gb_points_temp/src/views/Loading copy 2.vue new file mode 100644 index 0000000..fc8285d --- /dev/null +++ b/0000_gb_points_temp/src/views/Loading copy 2.vue @@ -0,0 +1,76 @@ + + + + + diff --git a/0000_gb_points_temp/src/views/Loading copy.vue b/0000_gb_points_temp/src/views/Loading copy.vue deleted file mode 100644 index 6545bce..0000000 --- a/0000_gb_points_temp/src/views/Loading copy.vue +++ /dev/null @@ -1,61 +0,0 @@ - - - - - diff --git a/0000_gb_points_temp/src/views/Loading.vue b/0000_gb_points_temp/src/views/Loading.vue index fc8285d..506b393 100644 --- a/0000_gb_points_temp/src/views/Loading.vue +++ b/0000_gb_points_temp/src/views/Loading.vue @@ -1,10 +1,21 @@ @@ -41,36 +52,81 @@ export default defineComponent({ display: flex; align-items: center; justify-content: center; - z-index: 2000; - background-color: #5a5858; + z-index: 1000; + background-color: rgba(0, 0, 0, 0.45); } -.loading-content-goods { +.loading-container { display: flex; flex-direction: column; align-items: center; - gap: 32px; + gap: 20px; } -.loading-logo-goods { - animation: logo-breathe 2s ease-in-out infinite; +/* Ring Spinner */ +.loading-ring { + position: relative; + width: 56px; + height: 56px; } -@keyframes logo-breathe { - 0%, 100% { transform: scale(1); } - 50% { transform: scale(0.94); } -} - -.spinner-goods { - border: 3px solid rgba(255, 255, 255, 0.4); - border-top: 3px solid #ffffff; +.loading-ring div { + box-sizing: border-box; + display: block; + position: absolute; + width: 56px; + height: 56px; + border: 3px solid transparent; border-radius: 50%; - width: 40px; - height: 40px; - animation: spin 0.9s linear infinite; + animation: loading-ring-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; } -@keyframes spin { - to { transform: rotate(360deg); } +.loading-ring div:nth-child(1) { + border-top-color: var(--global-primary-color); + animation-delay: -0.45s; +} + +.loading-ring div:nth-child(2) { + border-top-color: color-mix(in srgb, var(--global-primary-color) 70%, white); + animation-delay: -0.3s; +} + +.loading-ring div:nth-child(3) { + border-top-color: color-mix(in srgb, var(--global-primary-color) 40%, white); + animation-delay: -0.15s; +} + +.loading-ring div:nth-child(4) { + border-top-color: color-mix(in srgb, var(--global-primary-color) 15%, white); +} + +@keyframes loading-ring-spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +/* Dot pulse */ +.loading-dots { + display: flex; + gap: 8px; + align-items: center; +} + +.loading-dots span { + width: 6px; + height: 6px; + border-radius: 50%; + background-color: var(--global-primary-color); + animation: loading-dot-pulse 1.2s ease-in-out infinite; + opacity: 0.3; +} + +.loading-dots span:nth-child(1) { animation-delay: 0s; } +.loading-dots span:nth-child(2) { animation-delay: 0.2s; } +.loading-dots span:nth-child(3) { animation-delay: 0.4s; } + +@keyframes loading-dot-pulse { + 0%, 100% { transform: scale(1); opacity: 0.3; } + 50% { transform: scale(1.5); opacity: 1; } }