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 210 additions and 203 deletions
<!--
* @Date: 2025-10-30 10:27:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-10-30 11:20:11
* @FilePath: /stdj_h5/index.html
* @Description: 三坛大戒H5页面
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
......@@ -7,10 +14,10 @@
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>H5 Vite Template</title>
<title>三坛大戒</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
\ No newline at end of file
</html>
......
<template>
<div class="splash-container" :class="{ 'fade-out': isLeaving }">
<div class="splash-container" :class="{ 'fade-out': isExiting }">
<!-- 背景图片 -->
<div class="background-image"></div>
<!-- 黑色半透明蒙板 -->
<div class="overlay"></div>
<!-- 初始加载指示器 - 水滴波纹效果 -->
<div class="initial-loader">
<div class="water-drop"></div>
<div class="ripple ripple-1"></div>
<div class="ripple ripple-2"></div>
<div class="ripple ripple-3"></div>
<div class="ripple ripple-4"></div>
</div>
<!-- 内容层 -->
<div class="splash-content">
<!-- 背景装饰 -->
<div class="bg-decoration">
<div class="lotus-pattern animate-float"></div>
<div class="cloud-pattern animate-drift"></div>
<!-- 左上角Logo -->
<div class="logo-section animate-fade-in-up">
<img src="/src/assets/images/01启动页/logo@2x.png" alt="三坛大戒" class="logo-image" />
</div>
<!-- 主要内容 -->
<div class="main-content">
<!-- Logo区域 -->
<div class="logo-section animate-fade-in-up">
<div class="logo-circle">
<div class="dharma-wheel animate-rotate">
<div class="wheel-center"></div>
<div class="wheel-spokes"></div>
</div>
</div>
<h1 class="app-title">三坛大戒</h1>
<p class="app-subtitle">传承千年佛法 弘扬戒律精神</p>
</div>
<!-- 加载动画 -->
<div class="loading-section animate-fade-in-up-delay">
<div class="loading-dots">
<span></span>
<span></span>
<span></span>
</div>
<p class="loading-text">正在加载...</p>
<!-- 底部按钮 -->
<div class="bottom-section animate-fade-in-up-delay">
<div class="enter-button" @click="enterApp">
<img src="/src/assets/images/01启动页/进入传戒现场@2x.png" alt="进入传戒现场" class="enter-image" />
</div>
</div>
<!-- 底部信息 -->
<div class="footer-info animate-fade-in">
<p class="version">版本 1.0.0</p>
</div>
</div>
</div>
</template>
......@@ -45,17 +37,19 @@ import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const isLeaving = ref(false)
const isExiting = ref(false)
onMounted(() => {
// 3秒后开始离开动画，然后跳转到首页
// 进入应用函数
const enterApp = () => {
isExiting.value = true
// 等待淡出动画完成后跳转
setTimeout(() => {
isLeaving.value = true
// 等待淡出动画完成后跳转
setTimeout(() => {
router.push('/home')
}, 500)
}, 2500)
router.push('/home')
}, 500)
}
onMounted(() => {
// 可以在这里添加一些初始化逻辑
})
</script>
......@@ -66,10 +60,10 @@ onMounted(() => {
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, #fffbeb, #fed7aa);
background-image:
radial-gradient(circle at 20% 20%, rgba(251, 191, 36, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.1) 0%, transparent 50%);
width: 100vw;
height: 100vh;
overflow: hidden;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
transition: opacity 0.5s ease-out;
}
......@@ -77,242 +71,248 @@ onMounted(() => {
opacity: 0;
}
.splash-content {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 3rem 2rem;
}
.bg-decoration {
/* 背景图片 */
.background-image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
background-image: url('/src/assets/images/01启动页/海报@2x.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
opacity: 0;
animation: backgroundFadeIn 0.8s ease-out forwards;
}
.lotus-pattern {
/* 黑色半透明蒙板 */
.overlay {
position: absolute;
top: 2.5rem;
right: 2.5rem;
width: 8rem;
height: 8rem;
opacity: 0.1;
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");
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 2;
opacity: 0;
animation: backgroundFadeIn 0.8s ease-out 0.2s forwards;
}
.cloud-pattern {
/* 初始加载指示器 - 水滴波纹效果 */
.initial-loader {
position: absolute;
bottom: 5rem;
left: 2.5rem;
width: 6rem;
height: 4rem;
opacity: 0.05;
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");
}
.main-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.logo-section {
text-align: center;
margin-bottom: 4rem;
}
.logo-circle {
position: relative;
width: 8rem;
height: 8rem;
margin: 0 auto 2rem;
border-radius: 50%;
background: linear-gradient(135deg, #fbbf24, #f97316);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
animation: float 3s ease-in-out infinite;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 4;
width: 200px;
height: 200px;
opacity: 1;
animation: loaderFadeOut 1s ease-out 2.5s forwards;
}
.dharma-wheel {
/* 水滴 */
.water-drop {
position: absolute;
top: 1rem;
left: 1rem;
right: 1rem;
bottom: 1rem;
border-radius: 50%;
background: white;
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
display: flex;
align-items: center;
justify-content: center;
}
.wheel-center {
width: 1rem;
height: 1rem;
top: 50%;
left: 50%;
width: 8px;
height: 8px;
background: radial-gradient(circle, #fbbf24 0%, #f59e0b 70%, #d97706 100%);
border-radius: 50%;
background: linear-gradient(135deg, #f59e0b, #ea580c);
}
.wheel-spokes {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translate(-50%, -50%);
box-shadow:
0 0 10px rgba(251, 191, 36, 0.8),
0 0 20px rgba(251, 191, 36, 0.4),
0 0 30px rgba(251, 191, 36, 0.2);
animation: waterDrop 0.6s ease-out;
}
.wheel-spokes::before,
.wheel-spokes::after {
content: '';
/* 波纹圈 */
.ripple {
position: absolute;
top: 50%;
left: 50%;
width: 4rem;
height: 0.125rem;
background: linear-gradient(to right, #f59e0b, #ea580c);
border: 2px solid rgba(251, 191, 36, 0.6);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
.wheel-spokes::before {
transform: translate(-50%, -50%) rotate(45deg);
.ripple-1 {
animation: rippleExpand 2s ease-out 0.3s;
}
.wheel-spokes::after {
transform: translate(-50%, -50%) rotate(-45deg);
.ripple-2 {
animation: rippleExpand 2s ease-out 0.6s;
}
.app-title {
font-size: 2.25rem;
font-weight: 700;
color: #92400e;
margin-bottom: 0.5rem;
font-family: 'PingFang SC', 'Hiragino Sans GB', sans-serif;
.ripple-3 {
animation: rippleExpand 2s ease-out 0.9s;
}
.app-subtitle {
font-size: 1.125rem;
color: #b45309;
opacity: 0.8;
.ripple-4 {
animation: rippleExpand 2s ease-out 1.2s;
}
.loading-section {
text-align: center;
/* 内容层 */
.splash-content {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 3;
padding: 2rem;
}
.loading-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-bottom: 1rem;
/* 左上角Logo */
.logo-section {
align-self: flex-start;
margin-top: 2.5rem;
margin-left: 2.5rem;
}
.loading-dots span {
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background-color: #f59e0b;
animation: bounce 1.4s ease-in-out infinite both;
.logo-image {
width: auto;
height: 10rem;
max-width: 250px;
object-fit: contain;
display: block;
}
.loading-dots span:nth-child(1) {
animation-delay: -0.32s;
/* 底部按钮区域 */
.bottom-section {
align-self: center;
margin-bottom: 3rem;
}
.loading-dots span:nth-child(2) {
animation-delay: -0.16s;
.enter-button {
cursor: pointer;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.loading-text {
color: #b45309;
font-size: 0.875rem;
.enter-button:hover {
transform: scale(1.05);
}
.footer-info {
text-align: center;
.enter-button:active {
transform: scale(0.95);
}
.version {
color: #d97706;
font-size: 0.75rem;
opacity: 0.6;
.enter-image {
width: auto;
height: 5rem;
max-width: 400px;
object-fit: contain;
display: block;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
/* 动画 */
@keyframes waterDrop {
0% {
transform: translate(-50%, -80px) scale(0.5);
opacity: 0.8;
}
50% {
transform: translateY(-10px);
transform: translate(-50%, -50%) scale(1.2);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
@keyframes bounce {
0%, 80%, 100% {
transform: scale(0);
@keyframes rippleExpand {
0% {
width: 0;
height: 0;
opacity: 0.8;
border-width: 3px;
}
50% {
opacity: 0.4;
border-width: 2px;
}
40% {
transform: scale(1);
100% {
width: 160px;
height: 160px;
opacity: 0;
border-width: 1px;
}
}
@keyframes fadeInUp {
@keyframes loaderFadeOut {
from {
opacity: 0;
transform: translateY(30px);
opacity: 1;
}
to {
opacity: 1;
transform: translateY(0);
opacity: 0;
visibility: hidden;
}
}
@keyframes rotate {
@keyframes backgroundFadeIn {
from {
transform: rotate(0deg);
opacity: 0;
}
to {
transform: rotate(360deg);
opacity: 1;
}
}
@keyframes drift {
0%, 100% {
transform: translateX(0px);
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
50% {
transform: translateX(20px);
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-up {
animation: fadeInUp 0.8s ease-out;
animation: fadeInUp 0.6s ease-out 1.5s both;
}
.animate-fade-in-up-delay {
animation: fadeInUp 0.8s ease-out 0.3s both;
animation: fadeInUp 0.6s ease-out 1.8s both;
}
.animate-fade-in {
animation: fadeInUp 0.8s ease-out 0.6s both;
}
/* 响应式设计 */
@media (max-width: 768px) {
.splash-content {
padding: 1.5rem;
}
.animate-rotate {
animation: rotate 8s linear infinite;
}
.logo-image {
height: 14rem;
}
.enter-image {
height: 4rem;
}
.animate-float {
animation: float 3s ease-in-out infinite;
.bottom-section {
margin-bottom: 2rem;
}
}
.animate-drift {
animation: drift 4s ease-in-out infinite;
@media (max-width: 480px) {
.splash-content {
padding: 1rem;
}
.logo-image {
height: 13rem;
}
.enter-image {
height: 3.5rem;
}
}
</style>
\ No newline at end of file
</style>
......