From eb62444060a1867ffea6f6c676c8ca55e620f4b6 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 02 九月 2025 14:50:08 +0800
Subject: [PATCH] 启动页样式修改
---
src/pages/splash.vue | 101 ++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 92 insertions(+), 9 deletions(-)
diff --git a/src/pages/splash.vue b/src/pages/splash.vue
index 4818ef1..faa0423 100644
--- a/src/pages/splash.vue
+++ b/src/pages/splash.vue
@@ -1,7 +1,10 @@
<template>
<div class="splash-container">
- <span class="title">绉戞妧</span>
- <span class="title1">渚挎惡鐢熸椿</span>
+ <div class="title-container">
+ <span class="title-large">绉戞妧</span>
+ <span class="title-small">渚挎嵎鐢熸椿</span>
+ </div>
+ <span class="bottom-text">鑺浜戯紙绠＄悊淇℃伅绯荤粺锛�</span>
</div>
</template>
@@ -19,7 +22,7 @@
// #ifndef H5
uni.reLaunch({ url: '/pages/login' })
// #endif
- }, 2000)
+ }, 3500)
})
</script>
@@ -31,16 +34,96 @@
flex-direction: column;
justify-content: center;
align-items: center;
- background: #fff;
+ background: linear-gradient(135deg, rgba(0,117,255,0.3) 0%, #FFFFFF 60%);
+ overflow: hidden;
+ position: relative;
}
-.title {
- font-weight: 400;
+
+.title-container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ animation: fadeIn 1.5s ease-in-out;
+}
+
+.title-large {
+ font-weight: 500;
font-size: 60px;
color: #000000;
+ display: block;
+ animation: slideUp 1s ease-out 0.2s both;
}
-.title1 {
+
+.title-small {
font-weight: 400;
font-size: 40px;
- color: #000000;
+ color: #333333;
+ display: block;
+ margin-left: 15px;
+ animation: slideUp 1s ease-out 0.5s both;
}
-</style>
\ No newline at end of file
+
+/* 鍔ㄧ敾鏁堟灉 */
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes slideUp {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* 鑳屾櫙瑁呴グ鏁堟灉 */
+.splash-container::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle, rgba(0,117,255,0.1) 0%, transparent 70%);
+ animation: float 8s ease-in-out infinite;
+}
+
+@keyframes float {
+ 0%, 100% {
+ transform: translate(0, 0) rotate(0deg);
+ }
+ 50% {
+ transform: translate(-10%, -10%) rotate(5deg);
+ }
+}
+
+/* 搴曢儴鏂囧瓧鏍峰紡 */
+.bottom-text {
+ position: absolute;
+ bottom: 80px;
+ font-size: 24px;
+ color: #666666;
+ opacity: 0;
+ animation: fadeInUp 1s ease-out 1s both;
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3