Hooke / stdj_h5

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
5c17e968 1 parent cc097891

feat(启动页): 重构启动页设计并添加新资源 

- 替换原有启动页为全新视觉设计，包含背景图片和logo
- 添加水滴波纹加载动画效果
- 修改页面标题为"三坛大戒"
- 实现手动点击进入应用功能
Inline Side-by-side
Showing 5 changed files with 203 additions and 196 deletions
1 +<!--
2 + * @Date: 2025-10-30 10:27:09
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2025-10-30 11:20:11
5 + * @FilePath: /stdj_h5/index.html
6 + * @Description: 三坛大戒H5页面
7 +-->
1 <!DOCTYPE html> 8 <!DOCTYPE html>
2 <html lang="zh-CN"> 9 <html lang="zh-CN">
3 <head> 10 <head>
...@@ -7,7 +14,7 @@ ...@@ -7,7 +14,7 @@
7 <meta name="format-detection" content="telephone=no" /> 14 <meta name="format-detection" content="telephone=no" />
8 <meta name="apple-mobile-web-app-capable" content="yes" /> 15 <meta name="apple-mobile-web-app-capable" content="yes" />
9 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 16 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
10 - <title>H5 Vite Template</title> 17 + <title>三坛大戒</title>
11 </head> 18 </head>
12 <body> 19 <body>
13 <div id="app"></div> 20 <div id="app"></div>
......
1 <template> 1 <template>
2 - <div class="splash-container" :class="{ 'fade-out': isLeaving }"> 2 + <div class="splash-container" :class="{ 'fade-out': isExiting }">
3 - <div class="splash-content"> 3 + <!-- 背景图片 -->
4 - <!-- 背景装饰 --> 4 + <div class="background-image"></div>
5 - <div class="bg-decoration"> 5 +
6 - <div class="lotus-pattern animate-float"></div> 6 + <!-- 黑色半透明蒙板 -->
7 - <div class="cloud-pattern animate-drift"></div> 7 + <div class="overlay"></div>
8 +
9 + <!-- 初始加载指示器 - 水滴波纹效果 -->
10 + <div class="initial-loader">
11 + <div class="water-drop"></div>
12 + <div class="ripple ripple-1"></div>
13 + <div class="ripple ripple-2"></div>
14 + <div class="ripple ripple-3"></div>
15 + <div class="ripple ripple-4"></div>
8 </div> 16 </div>
9 17
10 - <!-- 主要内容 --> 18 + <!-- 内容层 -->
11 - <div class="main-content"> 19 + <div class="splash-content">
12 - <!-- Logo区域 --> 20 + <!-- 左上角Logo -->
13 <div class="logo-section animate-fade-in-up"> 21 <div class="logo-section animate-fade-in-up">
14 - <div class="logo-circle"> 22 + <img src="/src/assets/images/01启动页/logo@2x.png" alt="三坛大戒" class="logo-image" />
15 - <div class="dharma-wheel animate-rotate">
16 - <div class="wheel-center"></div>
17 - <div class="wheel-spokes"></div>
18 - </div>
19 - </div>
20 - <h1 class="app-title">三坛大戒</h1>
21 - <p class="app-subtitle">传承千年佛法 弘扬戒律精神</p>
22 </div> 23 </div>
23 24
24 - <!-- 加载动画 --> 25 + <!-- 底部按钮 -->
25 - <div class="loading-section animate-fade-in-up-delay"> 26 + <div class="bottom-section animate-fade-in-up-delay">
26 - <div class="loading-dots"> 27 + <div class="enter-button" @click="enterApp">
27 - <span></span> 28 + <img src="/src/assets/images/01启动页/进入传戒现场@2x.png" alt="进入传戒现场" class="enter-image" />
28 - <span></span>
29 - <span></span>
30 </div> 29 </div>
31 - <p class="loading-text">正在加载...</p>
32 - </div>
33 - </div>
34 -
35 - <!-- 底部信息 -->
36 - <div class="footer-info animate-fade-in">
37 - <p class="version">版本 1.0.0</p>
38 </div> 30 </div>
39 </div> 31 </div>
40 </div> 32 </div>
...@@ -45,17 +37,19 @@ import { ref, onMounted } from 'vue' ...@@ -45,17 +37,19 @@ import { ref, onMounted } from 'vue'
45 import { useRouter } from 'vue-router' 37 import { useRouter } from 'vue-router'
46 38
47 const router = useRouter() 39 const router = useRouter()
48 -const isLeaving = ref(false) 40 +const isExiting = ref(false)
49 41
50 -onMounted(() => { 42 +// 进入应用函数
51 - // 3秒后开始离开动画，然后跳转到首页 43 +const enterApp = () => {
52 - setTimeout(() => { 44 + isExiting.value = true
53 - isLeaving.value = true
54 // 等待淡出动画完成后跳转 45 // 等待淡出动画完成后跳转
55 setTimeout(() => { 46 setTimeout(() => {
56 router.push('/home') 47 router.push('/home')
57 }, 500) 48 }, 500)
58 - }, 2500) 49 +}
50 +
51 +onMounted(() => {
52 + // 可以在这里添加一些初始化逻辑
59 }) 53 })
60 </script> 54 </script>
61 55
...@@ -66,10 +60,10 @@ onMounted(() => { ...@@ -66,10 +60,10 @@ onMounted(() => {
66 left: 0; 60 left: 0;
67 right: 0; 61 right: 0;
68 bottom: 0; 62 bottom: 0;
69 - background: linear-gradient(to bottom, #fffbeb, #fed7aa); 63 + width: 100vw;
70 - background-image: 64 + height: 100vh;
71 - radial-gradient(circle at 20% 20%, rgba(251, 191, 36, 0.1) 0%, transparent 50%), 65 + overflow: hidden;
72 - radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.1) 0%, transparent 50%); 66 + background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
73 transition: opacity 0.5s ease-out; 67 transition: opacity 0.5s ease-out;
74 } 68 }
75 69
...@@ -77,242 +71,248 @@ onMounted(() => { ...@@ -77,242 +71,248 @@ onMounted(() => {
77 opacity: 0; 71 opacity: 0;
78 } 72 }
79 73
80 -.splash-content { 74 +/* 背景图片 */
81 - position: relative; 75 +.background-image {
82 - height: 100%;
83 - display: flex;
84 - flex-direction: column;
85 - justify-content: space-between;
86 - align-items: center;
87 - padding: 3rem 2rem;
88 -}
89 -
90 -.bg-decoration {
91 position: absolute; 76 position: absolute;
92 top: 0; 77 top: 0;
93 left: 0; 78 left: 0;
94 right: 0; 79 right: 0;
95 bottom: 0; 80 bottom: 0;
96 - overflow: hidden; 81 + background-image: url('/src/assets/images/01启动页/海报@2x.png');
82 + background-size: cover;
83 + background-position: center;
84 + background-repeat: no-repeat;
85 + z-index: 1;
86 + opacity: 0;
87 + animation: backgroundFadeIn 0.8s ease-out forwards;
97 } 88 }
98 89
99 -.lotus-pattern { 90 +/* 黑色半透明蒙板 */
91 +.overlay {
100 position: absolute; 92 position: absolute;
101 - top: 2.5rem; 93 + top: 0;
102 - right: 2.5rem; 94 + left: 0;
103 - width: 8rem; 95 + right: 0;
104 - height: 8rem; 96 + bottom: 0;
105 - opacity: 0.1; 97 + background-color: rgba(0, 0, 0, 0.4);
106 - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 20c-5 0-10 5-10 15s5 15 10 15 10-5 10-15-5-15-10-15z' fill='%23f59e0b'/%3E%3Cpath d='M35 35c-5-3-12-1-15 5s-1 12 5 15 12 1 15-5 1-12-5-15z' fill='%23f59e0b'/%3E%3Cpath d='M65 35c5-3 12-1 15 5s1 12-5 15-12 1-15-5-1-12 5-15z' fill='%23f59e0b'/%3E%3C/svg%3E"); 98 + z-index: 2;
99 + opacity: 0;
100 + animation: backgroundFadeIn 0.8s ease-out 0.2s forwards;
107 } 101 }
108 102
109 -.cloud-pattern { 103 +/* 初始加载指示器 - 水滴波纹效果 */
104 +.initial-loader {
110 position: absolute; 105 position: absolute;
111 - bottom: 5rem; 106 + top: 50%;
112 - left: 2.5rem; 107 + left: 50%;
113 - width: 6rem; 108 + transform: translate(-50%, -50%);
114 - height: 4rem; 109 + z-index: 4;
115 - opacity: 0.05; 110 + width: 200px;
116 - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpath d='M20 40c-8 0-15-7-15-15s7-15 15-15c2 0 4 0 6 1 3-6 9-10 16-10s13 4 16 10c2-1 4-1 6-1 8 0 15 7 15 15s-7 15-15 15H20z' fill='%23f59e0b'/%3E%3C/svg%3E"); 111 + height: 200px;
117 -} 112 + opacity: 1;
118 - 113 + animation: loaderFadeOut 1s ease-out 2.5s forwards;
119 -.main-content {
120 - flex: 1;
121 - display: flex;
122 - flex-direction: column;
123 - justify-content: center;
124 - align-items: center;
125 -}
126 -
127 -.logo-section {
128 - text-align: center;
129 - margin-bottom: 4rem;
130 -}
131 -
132 -.logo-circle {
133 - position: relative;
134 - width: 8rem;
135 - height: 8rem;
136 - margin: 0 auto 2rem;
137 - border-radius: 50%;
138 - background: linear-gradient(135deg, #fbbf24, #f97316);
139 - box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
140 - animation: float 3s ease-in-out infinite;
141 } 114 }
142 115
143 -.dharma-wheel { 116 +/* 水滴 */
117 +.water-drop {
144 position: absolute; 118 position: absolute;
145 - top: 1rem; 119 + top: 50%;
146 - left: 1rem; 120 + left: 50%;
147 - right: 1rem; 121 + width: 8px;
148 - bottom: 1rem; 122 + height: 8px;
149 - border-radius: 50%; 123 + background: radial-gradient(circle, #fbbf24 0%, #f59e0b 70%, #d97706 100%);
150 - background: white;
151 - box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
152 - display: flex;
153 - align-items: center;
154 - justify-content: center;
155 -}
156 -
157 -.wheel-center {
158 - width: 1rem;
159 - height: 1rem;
160 border-radius: 50%; 124 border-radius: 50%;
161 - background: linear-gradient(135deg, #f59e0b, #ea580c); 125 + transform: translate(-50%, -50%);
162 -} 126 + box-shadow:
163 - 127 + 0 0 10px rgba(251, 191, 36, 0.8),
164 -.wheel-spokes { 128 + 0 0 20px rgba(251, 191, 36, 0.4),
165 - position: absolute; 129 + 0 0 30px rgba(251, 191, 36, 0.2);
166 - top: 0; 130 + animation: waterDrop 0.6s ease-out;
167 - left: 0;
168 - right: 0;
169 - bottom: 0;
170 } 131 }
171 132
172 -.wheel-spokes::before, 133 +/* 波纹圈 */
173 -.wheel-spokes::after { 134 +.ripple {
174 - content: '';
175 position: absolute; 135 position: absolute;
176 top: 50%; 136 top: 50%;
177 left: 50%; 137 left: 50%;
178 - width: 4rem; 138 + border: 2px solid rgba(251, 191, 36, 0.6);
179 - height: 0.125rem; 139 + border-radius: 50%;
180 - background: linear-gradient(to right, #f59e0b, #ea580c);
181 transform: translate(-50%, -50%); 140 transform: translate(-50%, -50%);
141 + opacity: 0;
182 } 142 }
183 143
184 -.wheel-spokes::before { 144 +.ripple-1 {
185 - transform: translate(-50%, -50%) rotate(45deg); 145 + animation: rippleExpand 2s ease-out 0.3s;
186 } 146 }
187 147
188 -.wheel-spokes::after { 148 +.ripple-2 {
189 - transform: translate(-50%, -50%) rotate(-45deg); 149 + animation: rippleExpand 2s ease-out 0.6s;
190 } 150 }
191 151
192 -.app-title { 152 +.ripple-3 {
193 - font-size: 2.25rem; 153 + animation: rippleExpand 2s ease-out 0.9s;
194 - font-weight: 700;
195 - color: #92400e;
196 - margin-bottom: 0.5rem;
197 - font-family: 'PingFang SC', 'Hiragino Sans GB', sans-serif;
198 } 154 }
199 155
200 -.app-subtitle { 156 +.ripple-4 {
201 - font-size: 1.125rem; 157 + animation: rippleExpand 2s ease-out 1.2s;
202 - color: #b45309;
203 - opacity: 0.8;
204 } 158 }
205 159
206 -.loading-section { 160 +/* 内容层 */
207 - text-align: center; 161 +.splash-content {
162 + position: relative;
163 + height: 100%;
164 + display: flex;
165 + flex-direction: column;
166 + justify-content: space-between;
167 + z-index: 3;
168 + padding: 2rem;
208 } 169 }
209 170
210 -.loading-dots { 171 +/* 左上角Logo */
211 - display: flex; 172 +.logo-section {
212 - justify-content: center; 173 + align-self: flex-start;
213 - gap: 0.5rem; 174 + margin-top: 2.5rem;
214 - margin-bottom: 1rem; 175 + margin-left: 2.5rem;
215 } 176 }
216 177
217 -.loading-dots span { 178 +.logo-image {
218 - width: 0.75rem; 179 + width: auto;
219 - height: 0.75rem; 180 + height: 10rem;
220 - border-radius: 50%; 181 + max-width: 250px;
221 - background-color: #f59e0b; 182 + object-fit: contain;
222 - animation: bounce 1.4s ease-in-out infinite both; 183 + display: block;
223 } 184 }
224 185
225 -.loading-dots span:nth-child(1) { 186 +/* 底部按钮区域 */
226 - animation-delay: -0.32s; 187 +.bottom-section {
188 + align-self: center;
189 + margin-bottom: 3rem;
227 } 190 }
228 191
229 -.loading-dots span:nth-child(2) { 192 +.enter-button {
230 - animation-delay: -0.16s; 193 + cursor: pointer;
194 + transition: transform 0.3s ease, opacity 0.3s ease;
231 } 195 }
232 196
233 -.loading-text { 197 +.enter-button:hover {
234 - color: #b45309; 198 + transform: scale(1.05);
235 - font-size: 0.875rem;
236 } 199 }
237 200
238 -.footer-info { 201 +.enter-button:active {
239 - text-align: center; 202 + transform: scale(0.95);
240 } 203 }
241 204
242 -.version { 205 +.enter-image {
243 - color: #d97706; 206 + width: auto;
244 - font-size: 0.75rem; 207 + height: 5rem;
245 - opacity: 0.6; 208 + max-width: 400px;
209 + object-fit: contain;
210 + display: block;
246 } 211 }
247 212
248 -@keyframes float { 213 +/* 动画 */
249 - 0%, 100% { 214 +@keyframes waterDrop {
250 - transform: translateY(0px); 215 + 0% {
216 + transform: translate(-50%, -80px) scale(0.5);
217 + opacity: 0.8;
251 } 218 }
252 50% { 219 50% {
253 - transform: translateY(-10px); 220 + transform: translate(-50%, -50%) scale(1.2);
221 + opacity: 1;
222 + }
223 + 100% {
224 + transform: translate(-50%, -50%) scale(1);
225 + opacity: 1;
254 } 226 }
255 } 227 }
256 228
257 -@keyframes bounce { 229 +@keyframes rippleExpand {
258 - 0%, 80%, 100% { 230 + 0% {
259 - transform: scale(0); 231 + width: 0;
232 + height: 0;
233 + opacity: 0.8;
234 + border-width: 3px;
260 } 235 }
261 - 40% { 236 + 50% {
262 - transform: scale(1); 237 + opacity: 0.4;
238 + border-width: 2px;
239 + }
240 + 100% {
241 + width: 160px;
242 + height: 160px;
243 + opacity: 0;
244 + border-width: 1px;
263 } 245 }
264 } 246 }
265 247
266 -@keyframes fadeInUp { 248 +@keyframes loaderFadeOut {
267 from { 249 from {
268 - opacity: 0; 250 + opacity: 1;
269 - transform: translateY(30px);
270 } 251 }
271 to { 252 to {
272 - opacity: 1; 253 + opacity: 0;
273 - transform: translateY(0); 254 + visibility: hidden;
274 } 255 }
275 } 256 }
276 257
277 -@keyframes rotate { 258 +@keyframes backgroundFadeIn {
278 from { 259 from {
279 - transform: rotate(0deg); 260 + opacity: 0;
280 } 261 }
281 to { 262 to {
282 - transform: rotate(360deg); 263 + opacity: 1;
283 } 264 }
284 } 265 }
285 266
286 -@keyframes drift { 267 +@keyframes fadeInUp {
287 - 0%, 100% { 268 + from {
288 - transform: translateX(0px); 269 + opacity: 0;
270 + transform: translateY(30px);
289 } 271 }
290 - 50% { 272 + to {
291 - transform: translateX(20px); 273 + opacity: 1;
274 + transform: translateY(0);
292 } 275 }
293 } 276 }
294 277
295 .animate-fade-in-up { 278 .animate-fade-in-up {
296 - animation: fadeInUp 0.8s ease-out; 279 + animation: fadeInUp 0.6s ease-out 1.5s both;
297 } 280 }
298 281
299 .animate-fade-in-up-delay { 282 .animate-fade-in-up-delay {
300 - animation: fadeInUp 0.8s ease-out 0.3s both; 283 + animation: fadeInUp 0.6s ease-out 1.8s both;
301 } 284 }
302 285
303 -.animate-fade-in { 286 +/* 响应式设计 */
304 - animation: fadeInUp 0.8s ease-out 0.6s both; 287 +@media (max-width: 768px) {
305 -} 288 + .splash-content {
289 + padding: 1.5rem;
290 + }
306 291
307 -.animate-rotate { 292 + .logo-image {
308 - animation: rotate 8s linear infinite; 293 + height: 14rem;
309 -} 294 + }
295 +
296 + .enter-image {
297 + height: 4rem;
298 + }
310 299
311 -.animate-float { 300 + .bottom-section {
312 - animation: float 3s ease-in-out infinite; 301 + margin-bottom: 2rem;
302 + }
313 } 303 }
314 304
315 -.animate-drift { 305 +@media (max-width: 480px) {
316 - animation: drift 4s ease-in-out infinite; 306 + .splash-content {
307 + padding: 1rem;
308 + }
309 +
310 + .logo-image {
311 + height: 13rem;
312 + }
313 +
314 + .enter-image {
315 + height: 3.5rem;
316 + }
317 } 317 }
318 </style> 318 </style>
......