610 lines
13 KiB
Plaintext
610 lines
13 KiB
Plaintext
/* ==========================================
|
|
影沙俱乐部 - 全局样式
|
|
设计理念：浅色高级感 · 橙色点缀 · 流畅动画
|
|
========================================== */
|
|
|
|
page {
|
|
/* 主色调：活力橙系 */
|
|
--primary: #FF6B35;
|
|
--primary-dark: #E85A28;
|
|
--primary-light: #FF8C5A;
|
|
--primary-soft: #FFF0EB;
|
|
--primary-gradient: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 50%, #FFBA08 100%);
|
|
--primary-gradient-soft: linear-gradient(135deg, rgba(255,107,53,0.1) 0%, rgba(255,186,8,0.05) 100%);
|
|
|
|
/* 强调色 */
|
|
--accent: #00C9A7;
|
|
--accent-light: #E6FBF7;
|
|
--accent-soft: rgba(0, 201, 167, 0.1);
|
|
|
|
/* 浅色背景系 */
|
|
--bg-page: #F7F8FA;
|
|
--bg-white: #FFFFFF;
|
|
--bg-card: #FFFFFF;
|
|
--bg-card-hover: #FAFBFC;
|
|
--bg-soft: #F2F3F5;
|
|
--bg-warm: #FFFBF8;
|
|
|
|
/* 文字颜色 */
|
|
--text-primary: #1A1A1A;
|
|
--text-secondary: #5C5C5C;
|
|
--text-muted: #8C8C8C;
|
|
--text-hint: #BFBFBF;
|
|
--text-white: #FFFFFF;
|
|
|
|
/* 边框 */
|
|
--border-light: #EBEDF0;
|
|
--border-soft: #F0F1F2;
|
|
--border-primary: rgba(255, 107, 53, 0.2);
|
|
|
|
/* 阴影 */
|
|
--shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
|
--shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
--shadow-lg: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
|
|
--shadow-primary: 0 8rpx 24rpx rgba(255, 107, 53, 0.25);
|
|
--shadow-card: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
|
|
/* 圆角 */
|
|
--radius-sm: 12rpx;
|
|
--radius-md: 16rpx;
|
|
--radius-lg: 24rpx;
|
|
--radius-xl: 32rpx;
|
|
--radius-full: 100rpx;
|
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Helvetica Neue', sans-serif;
|
|
font-size: 28rpx;
|
|
color: var(--text-primary);
|
|
background: var(--bg-page);
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* ==========================================
|
|
布局工具类
|
|
========================================== */
|
|
.container {
|
|
padding: 24rpx;
|
|
min-height: 100vh;
|
|
background: var(--bg-page);
|
|
}
|
|
|
|
.flex { display: flex; }
|
|
.flex-center { display: flex; align-items: center; justify-content: center; }
|
|
.flex-between { display: flex; align-items: center; justify-content: space-between; }
|
|
.flex-column { display: flex; flex-direction: column; }
|
|
.flex-1 { flex: 1; }
|
|
|
|
/* ==========================================
|
|
卡片组件 - 高级感设计
|
|
========================================== */
|
|
.card {
|
|
background: var(--bg-card);
|
|
border-radius: var(--radius-lg);
|
|
padding: 28rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: var(--shadow-card);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.card:active {
|
|
transform: scale(0.985);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.card-highlight {
|
|
background: var(--bg-white);
|
|
border: 1rpx solid var(--border-primary);
|
|
box-shadow: var(--shadow-card), 0 0 0 1rpx rgba(255, 107, 53, 0.05);
|
|
}
|
|
|
|
.card-highlight::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4rpx;
|
|
background: var(--primary-gradient);
|
|
}
|
|
|
|
/* ==========================================
|
|
按钮样式 - 精致设计
|
|
========================================== */
|
|
.btn-primary {
|
|
background: var(--primary-gradient);
|
|
color: var(--text-white);
|
|
border: none;
|
|
border-radius: var(--radius-full);
|
|
padding: 24rpx 64rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
letter-spacing: 2rpx;
|
|
box-shadow: var(--shadow-primary);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-primary:active {
|
|
transform: scale(0.96);
|
|
box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);
|
|
}
|
|
|
|
.btn-primary::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
|
animation: btn-shimmer 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes btn-shimmer {
|
|
0% { left: -100%; }
|
|
50%, 100% { left: 100%; }
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--bg-white);
|
|
color: var(--primary);
|
|
border: 2rpx solid var(--primary);
|
|
border-radius: var(--radius-full);
|
|
padding: 22rpx 62rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-secondary:active {
|
|
background: var(--primary-soft);
|
|
}
|
|
|
|
.btn-ghost {
|
|
background: var(--bg-soft);
|
|
color: var(--text-secondary);
|
|
border: none;
|
|
border-radius: var(--radius-full);
|
|
padding: 22rpx 48rpx;
|
|
font-size: 28rpx;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* ==========================================
|
|
等级标签 - 渐变精致风格
|
|
========================================== */
|
|
.level-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8rpx 20rpx;
|
|
border-radius: var(--radius-full);
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
letter-spacing: 1rpx;
|
|
}
|
|
|
|
.level-tag.lv1 {
|
|
background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
|
|
color: #2E7D32;
|
|
}
|
|
|
|
.level-tag.lv2 {
|
|
background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
|
|
color: #1565C0;
|
|
}
|
|
|
|
.level-tag.lv3 {
|
|
background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
|
|
color: #E65100;
|
|
}
|
|
|
|
.level-tag.lv4 {
|
|
background: linear-gradient(135deg, #FCE4EC, #F8BBD9);
|
|
color: #C2185B;
|
|
}
|
|
|
|
.level-tag.lv5 {
|
|
background: linear-gradient(135deg, #F3E5F5, #E1BEE7);
|
|
color: #7B1FA2;
|
|
}
|
|
|
|
/* ==========================================
|
|
排名徽章 - 精致金银铜
|
|
========================================== */
|
|
.rank-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
border-radius: 50%;
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.rank-badge.top1 {
|
|
background: linear-gradient(135deg, #FFD700 0%, #FFAA00 100%);
|
|
color: #8B4513;
|
|
box-shadow: 0 4rpx 16rpx rgba(255, 170, 0, 0.4);
|
|
}
|
|
|
|
.rank-badge.top2 {
|
|
background: linear-gradient(135deg, #E8E8E8 0%, #C0C0C0 100%);
|
|
color: #4A4A4A;
|
|
box-shadow: 0 4rpx 12rpx rgba(192, 192, 192, 0.4);
|
|
}
|
|
|
|
.rank-badge.top3 {
|
|
background: linear-gradient(135deg, #DEB887 0%, #CD853F 100%);
|
|
color: #5C4033;
|
|
box-shadow: 0 4rpx 12rpx rgba(205, 133, 63, 0.4);
|
|
}
|
|
|
|
.rank-badge.normal {
|
|
background: var(--bg-soft);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ==========================================
|
|
头像样式
|
|
========================================== */
|
|
.avatar {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
background: var(--bg-soft);
|
|
border: 2rpx solid var(--border-light);
|
|
}
|
|
|
|
.avatar-lg {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
border-radius: 50%;
|
|
border: 4rpx solid var(--bg-white);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.avatar-xl {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
border-radius: 50%;
|
|
border: 6rpx solid var(--bg-white);
|
|
box-shadow: 0 8rpx 32rpx rgba(255, 107, 53, 0.2);
|
|
}
|
|
|
|
/* ==========================================
|
|
空状态
|
|
========================================== */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 120rpx 48rpx;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.empty-state image {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
margin-bottom: 32rpx;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.empty-state text {
|
|
font-size: 28rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.empty-state .sub-text {
|
|
font-size: 24rpx;
|
|
color: var(--text-hint);
|
|
}
|
|
|
|
/* ==========================================
|
|
加载状态
|
|
========================================== */
|
|
.loading-state {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 48rpx;
|
|
color: var(--text-muted);
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
/* ==========================================
|
|
列表项
|
|
========================================== */
|
|
.list-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 28rpx 24rpx;
|
|
background: var(--bg-white);
|
|
border-bottom: 1rpx solid var(--border-soft);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.list-item:active {
|
|
background: var(--bg-card-hover);
|
|
}
|
|
|
|
.list-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* ==========================================
|
|
标签
|
|
========================================== */
|
|
.tag {
|
|
display: inline-block;
|
|
padding: 6rpx 16rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 22rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tag-success {
|
|
background: var(--accent-light);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.tag-warning {
|
|
background: #FFF8E6;
|
|
color: #FA8C16;
|
|
}
|
|
|
|
.tag-danger {
|
|
background: #FFF1F0;
|
|
color: #FF4D4F;
|
|
}
|
|
|
|
/* ==========================================
|
|
战力值变动
|
|
========================================== */
|
|
.power-change {
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.power-change.positive {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.power-change.negative {
|
|
color: #FF4D4F;
|
|
}
|
|
|
|
/* ==========================================
|
|
分割线
|
|
========================================== */
|
|
.divider {
|
|
height: 1rpx;
|
|
background: var(--border-soft);
|
|
margin: 24rpx 0;
|
|
}
|
|
|
|
/* ==========================================
|
|
页面标题
|
|
========================================== */
|
|
.page-title {
|
|
font-size: 44rpx;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 8rpx;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
.page-subtitle {
|
|
font-size: 26rpx;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ==========================================
|
|
丰富的过场动画
|
|
========================================== */
|
|
|
|
/* 淡入上移 */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30rpx);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* 淡入缩放 */
|
|
@keyframes fadeInScale {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* 从左滑入 */
|
|
@keyframes slideInLeft {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-40rpx);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
/* 从右滑入 */
|
|
@keyframes slideInRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(40rpx);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
/* 弹性入场 */
|
|
@keyframes bounceIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* 脉冲效果 */
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(1.02);
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
/* 呼吸发光 */
|
|
@keyframes breathe {
|
|
0%, 100% {
|
|
box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.25);
|
|
}
|
|
50% {
|
|
box-shadow: 0 8rpx 40rpx rgba(255, 107, 53, 0.4);
|
|
}
|
|
}
|
|
|
|
/* 渐变流动 */
|
|
@keyframes gradientFlow {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
/* 旋转 */
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* 摇摆 */
|
|
@keyframes swing {
|
|
0%, 100% { transform: rotate(0deg); }
|
|
25% { transform: rotate(3deg); }
|
|
75% { transform: rotate(-3deg); }
|
|
}
|
|
|
|
/* 闪烁 */
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.6; }
|
|
}
|
|
|
|
/* 波纹扩散 */
|
|
@keyframes ripple {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 0.4;
|
|
}
|
|
100% {
|
|
transform: scale(1.5);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* 动画应用类 */
|
|
.animate-fadeInUp {
|
|
animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
|
|
}
|
|
|
|
.animate-fadeInScale {
|
|
animation: fadeInScale 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
|
|
}
|
|
|
|
.animate-slideInLeft {
|
|
animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
|
|
}
|
|
|
|
.animate-slideInRight {
|
|
animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) backwards;
|
|
}
|
|
|
|
.animate-bounceIn {
|
|
animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) backwards;
|
|
}
|
|
|
|
.animate-pulse {
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-breathe {
|
|
animation: breathe 2.5s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-spin {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/* 延迟类 */
|
|
.delay-1 { animation-delay: 0.1s; }
|
|
.delay-2 { animation-delay: 0.2s; }
|
|
.delay-3 { animation-delay: 0.3s; }
|
|
.delay-4 { animation-delay: 0.4s; }
|
|
.delay-5 { animation-delay: 0.5s; }
|
|
|
|
/* ==========================================
|
|
页面过渡效果
|
|
========================================== */
|
|
.page-transition {
|
|
animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* 列表项依次入场 */
|
|
.stagger-item:nth-child(1) { animation-delay: 0s; }
|
|
.stagger-item:nth-child(2) { animation-delay: 0.05s; }
|
|
.stagger-item:nth-child(3) { animation-delay: 0.1s; }
|
|
.stagger-item:nth-child(4) { animation-delay: 0.15s; }
|
|
.stagger-item:nth-child(5) { animation-delay: 0.2s; }
|
|
.stagger-item:nth-child(6) { animation-delay: 0.25s; }
|
|
.stagger-item:nth-child(7) { animation-delay: 0.3s; }
|
|
.stagger-item:nth-child(8) { animation-delay: 0.35s; }
|
|
.stagger-item:nth-child(9) { animation-delay: 0.4s; }
|
|
.stagger-item:nth-child(10) { animation-delay: 0.45s; }
|
|
|
|
/* ==========================================
|
|
装饰元素
|
|
========================================== */
|
|
.decoration-circle {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
background: var(--primary-gradient-soft);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.decoration-dot {
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 50%;
|
|
background: var(--primary);
|
|
}
|