146 lines
2.5 KiB
CSS
146 lines
2.5 KiB
CSS
.home {
|
|
/* background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%); */
|
|
background: #f5f6f8;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
/* 浮动语言切换器 */
|
|
.language-switcher-float {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 1000;
|
|
opacity: 0.8;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.language-switcher-float:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ScrollView 容器样式 */
|
|
.home-scroll {
|
|
flex: 1;
|
|
height: 100%;
|
|
}
|
|
|
|
.home-header {
|
|
position: fixed;
|
|
top: 16px;
|
|
left: calc(50% - 40%);
|
|
z-index: 1000;
|
|
padding: 4px 16px;
|
|
text-align: center;
|
|
width: 80%;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 50%, #ff6b35 100%);
|
|
border-radius: 20px;
|
|
box-shadow: 0 4px 12px rgb(255 107 107 / 30%);
|
|
overflow: hidden;
|
|
animation: pulse-glow 2s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.home-header::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(45deg, rgb(255 255 255 / 10%) 0%, transparent 100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.home-header::after {
|
|
content: '🎁';
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 16px;
|
|
animation: bounce 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.coupon-text {
|
|
display: inline-block;
|
|
font-weight: 800;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
background: rgb(255 255 255 / 20%);
|
|
padding: 2px 8px;
|
|
border-radius: 6px;
|
|
margin-left: 6px;
|
|
border: 1px dashed rgb(255 255 255 / 60%);
|
|
letter-spacing: 0.5px;
|
|
animation: shine 2s linear infinite;
|
|
}
|
|
|
|
@keyframes pulse-glow {
|
|
0% {
|
|
box-shadow: 0 4px 12px rgb(255 107 107 / 30%);
|
|
}
|
|
|
|
100% {
|
|
box-shadow: 0 6px 16px rgb(255 107 107 / 40%);
|
|
}
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%,
|
|
20%,
|
|
50%,
|
|
80%,
|
|
100% {
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
40% {
|
|
transform: translateY(-60%);
|
|
}
|
|
|
|
60% {
|
|
transform: translateY(-55%);
|
|
}
|
|
}
|
|
|
|
@keyframes shine {
|
|
0% {
|
|
background-position: -200% 0;
|
|
}
|
|
|
|
100% {
|
|
background-position: 200% 0;
|
|
}
|
|
}
|
|
|
|
.home-title {
|
|
font-size: 56px;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
display: block;
|
|
margin-bottom: 16px;
|
|
letter-spacing: -1px;
|
|
}
|
|
|
|
.home-subtitle {
|
|
font-size: 32px;
|
|
color: #666;
|
|
display: block;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 瀑布流布局 - 简化为标准grid布局 */
|
|
.template-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 14px;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
padding: 14px 16px 80px;
|
|
min-height: 100%;
|
|
}
|