1425 lines
32 KiB
SCSS
1425 lines
32 KiB
SCSS
// 全局动画
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
opacity: 0.8;
|
||
}
|
||
50% {
|
||
opacity: 0.4;
|
||
}
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.limo-mobile {
|
||
min-height: 100vh;
|
||
background: #ffffff;
|
||
position: relative;
|
||
|
||
// Header with subtle gradient
|
||
.header {
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 1%, rgba(248, 250, 252, 0.8) 100%);
|
||
padding: 88rpx 32rpx 32rpx 32rpx; /* 增加顶部padding给状态栏留空间 */
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 10;
|
||
/* backdrop-filter 在小程序中不支持，使用多层背景模拟 */
|
||
box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.02);
|
||
border-bottom: 2rpx solid rgba(229, 231, 235, 0.3);
|
||
|
||
// 使用伪元素模拟背景模糊
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 100%, rgba(248, 250, 252, 0.2) 0%);
|
||
z-index: -1;
|
||
}
|
||
|
||
.header-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
margin: 50rpx 0 80rpx 0;
|
||
|
||
.logo {
|
||
height: 100rpx;
|
||
width: 200rpx;
|
||
object-fit: contain;
|
||
display: block;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.energy-button {
|
||
background: linear-gradient(135deg, #05C7C7 0%, #04B5B5 100%);
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 24rpx rgba(5, 199, 199, 0.2);
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.energy-icon {
|
||
color: #ffffff;
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Navigation Tabs with enhanced styling
|
||
.nav-tabs {
|
||
display: flex;
|
||
margin-top: 48rpx;
|
||
gap: 64rpx;
|
||
|
||
.tab-item {
|
||
position: relative;
|
||
|
||
.tab-text {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #9CA3AF;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.tab-underline {
|
||
position: absolute;
|
||
bottom: -24rpx;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4rpx;
|
||
background: linear-gradient(90deg, #05C7C7 0%, #04B5B5 100%);
|
||
border-radius: 2rpx;
|
||
}
|
||
|
||
&.active .tab-text {
|
||
color: #05C7C7;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Sports Categories with glassmorphism effect
|
||
.sports-section {
|
||
background: rgba(255, 255, 255, 0.8);
|
||
/* backdrop-filter 在小程序中不支持，使用多层背景模拟 */
|
||
position: relative;
|
||
padding: 30rpx 32rpx;
|
||
margin-bottom: 32rpx;
|
||
border-bottom: 2rpx solid rgba(229, 231, 235, 0.3);
|
||
|
||
// 使用伪元素模拟背景模糊
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
z-index: -1;
|
||
}
|
||
|
||
.sports-container {
|
||
display: flex;
|
||
gap: 40rpx;
|
||
overflow-x: auto;
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
|
||
/* 小程序不支持 webkit-scrollbar，已移除 */
|
||
|
||
.sport-item {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
|
||
&.all-category {
|
||
.category-content {
|
||
background: #f2f2f2;
|
||
color: #6B7280;
|
||
border-radius: 32rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 100rpx;
|
||
height: 100rpx;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.category-text {
|
||
line-height: 1.2;
|
||
}
|
||
}
|
||
|
||
&.active {
|
||
.category-content {
|
||
background: linear-gradient(135deg, #05C7C7 0%, #04B5B5 100%);
|
||
color: #ffffff;
|
||
box-shadow: 0 8rpx 24rpx rgba(5, 199, 199, 0.2);
|
||
}
|
||
}
|
||
}
|
||
|
||
.sport-icon-container {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 28rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
background: #f2f2f2;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.sport-emoji {
|
||
font-size: 48rpx;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
|
||
&.active {
|
||
.sport-icon-container {
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
||
|
||
&.basketball {
|
||
background: linear-gradient(135deg, #FEF0E5 0%, #FEE5E5 100%);
|
||
}
|
||
|
||
&.football {
|
||
background: linear-gradient(135deg, #E8F5E8 0%, #E0F2E0 100%);
|
||
}
|
||
|
||
&.tennis {
|
||
background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
|
||
}
|
||
}
|
||
}
|
||
|
||
.sport-label {
|
||
font-size: 24rpx;
|
||
color: #6B7280;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Location with enhanced styling
|
||
.location-bar {
|
||
padding: 0 32rpx 48rpx;
|
||
|
||
.location-content {
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgba(249, 250, 251, 0.8);
|
||
border-radius: 24rpx;
|
||
padding: 24rpx;
|
||
font-size: 28rpx;
|
||
|
||
.location-pin {
|
||
color: #05C7C7;
|
||
margin-right: 16rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.location-text {
|
||
flex: 1;
|
||
color: #6B7280;
|
||
font-size: 24rpx;
|
||
|
||
&.location-loading {
|
||
color: #9CA3AF;
|
||
opacity: 0.8;
|
||
animation: pulse 1.5s infinite;
|
||
}
|
||
}
|
||
|
||
.location-switch {
|
||
color: #05C7C7;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 位置状态提示页面
|
||
.location-status-section {
|
||
padding: 120rpx 32rpx;
|
||
min-height: 600rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.status-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
gap: 32rpx;
|
||
|
||
.loading-spinner {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border: 6rpx solid #f3f3f3;
|
||
border-top: 6rpx solid #05C7C7;
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
.status-icon {
|
||
font-size: 80rpx;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.status-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #374151;
|
||
}
|
||
|
||
.status-subtitle {
|
||
font-size: 24rpx;
|
||
color: #6B7280;
|
||
line-height: 1.5;
|
||
max-width: 400rpx;
|
||
}
|
||
|
||
.retry-button {
|
||
background: linear-gradient(135deg, #05C7C7 0%, #04B5B5 100%);
|
||
color: #ffffff;
|
||
padding: 24rpx 48rpx;
|
||
border-radius: 32rpx;
|
||
margin-top: 24rpx;
|
||
box-shadow: 0 8rpx 24rpx rgba(5, 199, 199, 0.2);
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.retry-text {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Venue Cards with premium styling
|
||
.venue-section {
|
||
padding: 0 32rpx;
|
||
position: relative;
|
||
|
||
// Timeline
|
||
.timeline-container {
|
||
position: absolute;
|
||
left: 60rpx;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 2rpx;
|
||
|
||
.timeline-line {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 2rpx;
|
||
background: linear-gradient(180deg, rgba(5, 199, 199, 0.3) 0%, #E5E7EB 30%, #E5E7EB 80%, rgba(229, 231, 235, 0) 100%);
|
||
}
|
||
}
|
||
|
||
.venue-card {
|
||
position: relative;
|
||
margin-bottom: 80rpx;
|
||
|
||
.timeline-dot {
|
||
position: absolute;
|
||
left: 18rpx;
|
||
top: 10rpx;
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
border-radius: 50%;
|
||
border: 4rpx solid #ffffff;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||
background: linear-gradient(135deg, #D1D5DB 0%, #9CA3AF 100%);
|
||
z-index: 2;
|
||
|
||
&.active {
|
||
background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
|
||
box-shadow: 0 0 0 4rpx #FBBF24, 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
|
||
.venue-meta {
|
||
margin-left: 76rpx;
|
||
margin-bottom: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
|
||
.distance {
|
||
font-size: 24rpx;
|
||
color: #9CA3AF;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.separator {
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
background: #D1D5DB;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.update-time {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.clock-icon {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.time-text {
|
||
font-size: 24rpx;
|
||
color: #9CA3AF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.venue-content {
|
||
margin-left: 76rpx;
|
||
background: linear-gradient(135deg, #ffffff 0%, rgba(248, 250, 252, 0.5) 100%);
|
||
border-radius: 48rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.08);
|
||
border: 2rpx solid rgba(229, 231, 235, 0.5);
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
position: relative;
|
||
|
||
// 模拟 backdrop-blur 效果
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(255, 255, 255, 0.4);
|
||
border-radius: 48rpx;
|
||
z-index: -1;
|
||
}
|
||
|
||
&:active {
|
||
transform: translateY(-4rpx);
|
||
box-shadow: 0 24rpx 64rpx rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
.venue-image {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 384rpx;
|
||
overflow: hidden;
|
||
|
||
.image-placeholder {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, #374151 0%, #1F2937 100%);
|
||
|
||
&.ronin-bg {
|
||
background: linear-gradient(135deg, blue 0%, #DC2626 100%);
|
||
}
|
||
|
||
&.panda-bg {
|
||
background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
|
||
}
|
||
|
||
.placeholder-text {
|
||
color: #ffffff;
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.hot-badge {
|
||
position: absolute;
|
||
top: 24rpx;
|
||
left: 24rpx;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
/* backdrop-filter 在小程序中不支持，已移除 */
|
||
color: #ffffff;
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 16rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
|
||
.hot-text {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.live-badge {
|
||
position: absolute;
|
||
top: 24rpx;
|
||
left: 24rpx;
|
||
background: rgba(239, 68, 68, 0.9);
|
||
/* backdrop-filter 在小程序中不支持，已移除 */
|
||
color: #ffffff;
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 16rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.live-dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
background: #ffffff;
|
||
border-radius: 50%;
|
||
animation: pulse 1.5s infinite;
|
||
}
|
||
|
||
.live-text {
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.status-dot {
|
||
position: absolute;
|
||
top: 24rpx;
|
||
right: 24rpx;
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
border-radius: 50%;
|
||
background: #10B981;
|
||
|
||
&.online {
|
||
animation: pulse 2s infinite;
|
||
}
|
||
}
|
||
|
||
.play-overlay {
|
||
display: none;
|
||
|
||
.play-button {
|
||
width: 128rpx;
|
||
height: 128rpx;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
/* backdrop-filter 在小程序中不支持，已移除 */
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2);
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
position: relative;
|
||
|
||
// 模拟 backdrop-blur 效果
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(255, 255, 255, 0.5);
|
||
border-radius: 50%;
|
||
z-index: -1;
|
||
}
|
||
|
||
&:active {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.play-icon {
|
||
color: #374151;
|
||
font-size: 48rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.venue-info {
|
||
padding: 40rpx;
|
||
|
||
.venue-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 0;
|
||
|
||
.venue-logo {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 24rpx;
|
||
margin-right: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
|
||
|
||
&.ronin-logo {
|
||
background: transparent;
|
||
}
|
||
|
||
&.panda-logo {
|
||
background: linear-gradient(135deg, #374151 0%, #1F2937 100%);
|
||
}
|
||
|
||
.logo-text {
|
||
color: #ffffff;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.venue-logo-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 24rpx;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
|
||
.venue-details {
|
||
flex: 1;
|
||
|
||
.venue-name {
|
||
display: block;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #111827;
|
||
margin-bottom: 8rpx;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.venue-address {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #6B7280;
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
}
|
||
|
||
.venue-action {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
.zone-button {
|
||
background: linear-gradient(135deg, #FB923C 0%, #F97316 100%);
|
||
color: #ffffff;
|
||
padding: 16rpx 32rpx;
|
||
border-radius: 24rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
box-shadow: 0 8rpx 24rpx rgba(251, 146, 60, 0.3);
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
position: relative;
|
||
z-index: 10;
|
||
cursor: pointer;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
|
||
}
|
||
|
||
.button-text {
|
||
color: #ffffff;
|
||
pointer-events: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Bottom Spacing for Fixed Navigation
|
||
.bottom-spacing {
|
||
height: 192rpx;
|
||
}
|
||
|
||
// Bottom Navigation with glassmorphism
|
||
.bottom-nav {
|
||
position: fixed;
|
||
z-index: 10;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 1) 100%);
|
||
/* backdrop-filter 在小程序中不支持，使用多层背景模拟 */
|
||
box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.08);
|
||
border-top: 2rpx solid rgba(229, 231, 235, 0.3);
|
||
padding: 24rpx 32rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
// 使用伪元素模拟背景模糊
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
z-index: -1;
|
||
}
|
||
|
||
.nav-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 16rpx;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.nav-icon-container {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border-radius: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #F3F4F6;
|
||
margin-bottom: 8rpx;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
||
&.home-active {
|
||
background: linear-gradient(135deg, #05C7C7 0%, #04B5B5 100%);
|
||
box-shadow: 0 8rpx 24rpx rgba(5, 199, 199, 0.3);
|
||
|
||
.nav-icon {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.nav-icon-svg {
|
||
filter: brightness(0) saturate(100%) invert(100%);
|
||
}
|
||
}
|
||
|
||
&.profile-active {
|
||
background: linear-gradient(135deg, #05C7C7 0%, #04B5B5 100%);
|
||
box-shadow: 0 8rpx 24rpx rgba(5, 199, 199, 0.3);
|
||
|
||
.nav-icon-svg {
|
||
filter: brightness(0) saturate(100%) invert(100%);
|
||
}
|
||
}
|
||
|
||
.nav-icon {
|
||
font-size: 32rpx;
|
||
color: #9CA3AF;
|
||
}
|
||
|
||
.nav-icon-svg {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
filter: brightness(0) saturate(100%) invert(69%) sepia(5%) saturate(447%) hue-rotate(175deg) brightness(94%) contrast(88%);
|
||
}
|
||
}
|
||
|
||
.nav-label {
|
||
font-size: 24rpx;
|
||
color: #9CA3AF;
|
||
|
||
&.active {
|
||
color: #05C7C7;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Bottom Watermark with fade effect
|
||
.watermark {
|
||
position: fixed;
|
||
bottom: 160rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
|
||
.watermark-text {
|
||
color: #D1D5DB;
|
||
font-size: 24rpx;
|
||
font-weight: 300;
|
||
letter-spacing: 2rpx;
|
||
opacity: 0.6;
|
||
font-style: italic;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Profile Content Styles
|
||
.profile-content {
|
||
min-height: 100vh;
|
||
background: #F9FAFB;
|
||
|
||
// Profile Section
|
||
.profile-section {
|
||
padding: 188rpx 0 24rpx 0x;
|
||
|
||
.profile-card {
|
||
background: #ffffff;
|
||
padding: 120rpx 32rpx 32rpx 32rpx;
|
||
margin-bottom: 30rpx;
|
||
|
||
.profile-header-info {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 52rpx;
|
||
|
||
.avatar-container {
|
||
position: relative;
|
||
margin-right: 32rpx;
|
||
|
||
.avatar {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
background: linear-gradient(135deg, #05C7C7 0%, #04B5B5 100%);
|
||
border-radius: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.avatar-initial {
|
||
font-size: 48rpx;
|
||
color: #ffffff;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.online-status {
|
||
position: absolute;
|
||
bottom: -8rpx;
|
||
right: -8rpx;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
background: #10B981;
|
||
border-radius: 50%;
|
||
border: 4rpx solid #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&::after {
|
||
content: '';
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
background: #ffffff;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.profile-info {
|
||
flex: 1;
|
||
|
||
.profile-name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 0;
|
||
line-height: 1.2;
|
||
|
||
.profile-name {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #111827;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.edit-icon {
|
||
margin-right: 12rpx;
|
||
padding: 4rpx;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
||
&:active {
|
||
opacity: 0.6;
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
.edit-text {
|
||
font-size: 28rpx;
|
||
color: #9CA3AF;
|
||
}
|
||
}
|
||
|
||
.vip-badge {
|
||
background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 12rpx;
|
||
|
||
.vip-text {
|
||
font-size: 18rpx;
|
||
color: #ffffff;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
|
||
.profile-id {
|
||
font-size: 22rpx;
|
||
color: #6B7280;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.profile-stats {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.stat-divider {
|
||
width: 6rpx;
|
||
height: 6rpx;
|
||
background: #D1D5DB;
|
||
border-radius: 50%;
|
||
margin: 0 20rpx;
|
||
}
|
||
|
||
.stat-text {
|
||
font-size: 20rpx;
|
||
color: #6B7280;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.member-card-button {
|
||
width: 100%;
|
||
height: 200rpx;
|
||
position: relative;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
border: 2rpx solid #F59E0B;
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.card-background {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 50%, #D97706 100%);
|
||
|
||
.card-pattern {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-image:
|
||
radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
|
||
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
|
||
radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
|
||
}
|
||
|
||
.card-shine {
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
right: -50%;
|
||
bottom: -50%;
|
||
background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.05) 50%, transparent 60%);
|
||
animation: cardShine 5s infinite;
|
||
}
|
||
}
|
||
|
||
.card-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
height: 100%;
|
||
padding: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.card-left {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
height: 100%;
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 12rpx;
|
||
|
||
.card-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.card-subtitle {
|
||
font-size: 20rpx;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.card-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
|
||
.member-level {
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
font-weight: 600;
|
||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.member-expiry {
|
||
font-size: 20rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-arrow {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 50%;
|
||
margin-left: 16rpx;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
||
.arrow-icon {
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
font-weight: 300;
|
||
text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Stats Section
|
||
.stats-section {
|
||
padding: 0 24rpx 24rpx 24rpx;
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 24rpx;
|
||
|
||
.stat-card {
|
||
background: #ffffff;
|
||
border-radius: 24rpx;
|
||
padding: 24rpx;
|
||
text-align: center;
|
||
border: 2rpx solid #F3F4F6;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
cursor: pointer;
|
||
|
||
&:active {
|
||
background: #F9FAFB;
|
||
transform: scale(0.98);
|
||
border-color: #05C7C7;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
color: #111827;
|
||
display: block;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 24rpx;
|
||
color: #6B7280;
|
||
margin-top: -5rpx;
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Menu Section
|
||
.menu-section {
|
||
padding: 0 24rpx 24rpx 24rpx;
|
||
|
||
.menu-card {
|
||
background: #ffffff;
|
||
border-radius: 32rpx;
|
||
border: 2rpx solid #F3F4F6;
|
||
overflow: hidden;
|
||
|
||
.menu-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 32rpx;
|
||
border-bottom: 2rpx solid #F3F4F6;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
&:active {
|
||
background: #F9FAFB;
|
||
}
|
||
|
||
.menu-content {
|
||
flex: 1;
|
||
|
||
.menu-title {
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #111827;
|
||
}
|
||
|
||
.vip-subtitle {
|
||
margin-top: 6rpx;
|
||
|
||
.vip-subtitle-text {
|
||
background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
|
||
color: #ffffff;
|
||
padding: 4rpx 16rpx;
|
||
border-radius: 16rpx;
|
||
font-size: 20rpx;
|
||
font-weight: 500;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
|
||
.menu-right {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.badge {
|
||
background: #EF4444;
|
||
color: #ffffff;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 16rpx;
|
||
margin-right: 12rpx;
|
||
|
||
.badge-text {
|
||
font-size: 18rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.notification-dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
background: #EF4444;
|
||
border-radius: 50%;
|
||
margin-right: 12rpx;
|
||
}
|
||
}
|
||
|
||
.menu-arrow {
|
||
font-size: 28rpx;
|
||
color: #9CA3AF;
|
||
font-weight: 300;
|
||
}
|
||
|
||
&.vip-item {
|
||
.menu-arrow {
|
||
color: #FBBF24;
|
||
}
|
||
|
||
&:active {
|
||
background: rgba(254, 243, 199, 0.3);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Activity Section
|
||
.activity-section {
|
||
padding: 0 24rpx 24rpx 24rpx;
|
||
|
||
.activity-card {
|
||
background: #ffffff;
|
||
border-radius: 32rpx;
|
||
padding: 32rpx;
|
||
border: 2rpx solid #F3F4F6;
|
||
|
||
.activity-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
|
||
.activity-indicator {
|
||
width: 6rpx;
|
||
height: 32rpx;
|
||
background: linear-gradient(135deg, #05C7C7 0%, #04B5B5 100%);
|
||
border-radius: 3rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.activity-title {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #111827;
|
||
}
|
||
}
|
||
|
||
.activity-list {
|
||
.activity-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 20rpx;
|
||
background: #F9FAFB;
|
||
border-radius: 24rpx;
|
||
margin-bottom: 12rpx;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
&:active {
|
||
background: #F3F4F6;
|
||
}
|
||
|
||
.activity-content {
|
||
flex: 1;
|
||
|
||
.activity-title-text {
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #111827;
|
||
display: block;
|
||
margin-bottom: 6rpx;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.activity-subtitle {
|
||
font-size: 20rpx;
|
||
color: #6B7280;
|
||
line-height: 1.3;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
|
||
.activity-more-link {
|
||
margin-top: 24rpx;
|
||
text-align: center;
|
||
padding: 16rpx;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.more-link-text {
|
||
font-size: 26rpx;
|
||
color: #05C7C7;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Animations
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
|
||
@keyframes cardShine {
|
||
0% {
|
||
transform: translateX(-100%) translateY(-100%) rotate(45deg);
|
||
}
|
||
50% {
|
||
transform: translateX(50%) translateY(50%) rotate(45deg);
|
||
}
|
||
100% {
|
||
transform: translateX(200%) translateY(200%) rotate(45deg);
|
||
}
|
||
}
|
||
|
||
// Responsive Design
|
||
@media (max-width: 480px) {
|
||
.limo-mobile {
|
||
.header {
|
||
padding: 68rpx 24rpx 24rpx 24rpx; /* 调整小屏幕的状态栏空间 */
|
||
|
||
.header-content {
|
||
.logo {
|
||
height: 56rpx;
|
||
}
|
||
|
||
.energy-button {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.energy-icon {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.nav-tabs {
|
||
margin-top: 40rpx;
|
||
gap: 48rpx;
|
||
|
||
.tab-item .tab-text {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.sports-section {
|
||
padding: 30rpx 24rpx;
|
||
|
||
.sports-container {
|
||
gap: 32rpx;
|
||
|
||
.sport-item {
|
||
&.all-category .category-content {
|
||
padding: 20rpx 24rpx;
|
||
min-width: 120rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.sport-icon-container {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 28rpx;
|
||
|
||
.sport-emoji {
|
||
font-size: 40rpx;
|
||
}
|
||
}
|
||
|
||
.sport-label {
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.location-bar {
|
||
padding: 0 24rpx 40rpx;
|
||
|
||
.location-content {
|
||
padding: 20rpx;
|
||
font-size: 26rpx;
|
||
|
||
.location-switch {
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.venue-section {
|
||
padding: 0 24rpx;
|
||
|
||
.venue-card {
|
||
margin-bottom: 64rpx;
|
||
|
||
.venue-meta {
|
||
margin-left: 72rpx;
|
||
}
|
||
|
||
.venue-content {
|
||
margin-left: 72rpx;
|
||
|
||
.venue-image {
|
||
height: 320rpx;
|
||
|
||
.image-placeholder .placeholder-text {
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
|
||
.venue-info {
|
||
padding: 32rpx;
|
||
|
||
.venue-header {
|
||
.venue-logo {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.logo-text {
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
|
||
.venue-details {
|
||
.venue-name {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.venue-address {
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.venue-action .zone-button {
|
||
padding: 16rpx 32rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|