dapaijizhang3/pages/profile/index/index.wxss

271 lines
3.8 KiB
Plaintext
Raw Permalink Normal View History

2025-11-20 16:42:59 +08:00
/* 个人中心页面样式 */
page {
background: linear-gradient(135deg, #1A1A1A 0%, #252525 100%);
min-height: 100vh;
}
.container {
padding: 30rpx;
padding-bottom: 120rpx;
}
/* 用户信息头部 */
.profile-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
padding: 32rpx 24rpx;
}
.user-info {
display: flex;
align-items: center;
gap: 20rpx;
flex: 1;
}
.avatar-large {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
border: 4rpx solid #fff;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}
.user-detail {
display: flex;
flex-direction: column;
gap: 8rpx;
}
.nickname {
font-size: 36rpx;
font-weight: bold;
color: #FFFFFF;
}
.user-id {
font-size: 24rpx;
color: #B0B0B0;
}
.btn-edit {
padding: 16rpx 32rpx;
background: #f8f8f8;
color: #FFFFFF;
border-radius: 40rpx;
font-size: 28rpx;
border: none;
}
/* 数据统计卡片 */
.stats-card {
margin-bottom: 20rpx;
}
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20rpx;
margin: 20rpx 0;
}
.stat-box {
display: flex;
flex-direction: column;
align-items: center;
padding: 24rpx;
background: #f8f9fa;
border-radius: 12rpx;
gap: 8rpx;
}
.stat-number {
font-size: 40rpx;
font-weight: bold;
color: #FFFFFF;
}
.stat-label {
font-size: 24rpx;
color: #B0B0B0;
}
.view-more-btn {
width: 100%;
padding: 24rpx;
background: linear-gradient(135deg, #50C878 0%, #06a854 100%);
color: white;
border-radius: 12rpx;
font-size: 30rpx;
font-weight: 500;
border: none;
margin-top: 8rpx;
}
/* 成就徽章 */
.achievements-card {
margin-bottom: 20rpx;
}
.achievements-list {
display: flex;
flex-direction: column;
gap: 16rpx;
margin-top: 20rpx;
}
.achievement-item {
display: flex;
align-items: center;
gap: 16rpx;
padding: 20rpx;
background: #f8f9fa;
border-radius: 12rpx;
}
.achievement-icon {
font-size: 48rpx;
width: 64rpx;
height: 64rpx;
display: flex;
align-items: center;
justify-content: center;
}
.achievement-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 4rpx;
}
.achievement-name {
font-size: 30rpx;
font-weight: bold;
color: #FFFFFF;
}
.achievement-desc {
font-size: 24rpx;
color: #B0B0B0;
}
/* 最近牌局 */
.recent-sessions-card {
margin-bottom: 20rpx;
}
.more-link {
font-size: 24rpx;
color: #50C878;
}
.sessions-list {
display: flex;
flex-direction: column;
gap: 12rpx;
margin-top: 20rpx;
}
.session-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx;
background: #f8f9fa;
border-radius: 12rpx;
}
.session-item:active {
background: #e8e8e8;
}
.session-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 8rpx;
}
.session-name {
font-size: 30rpx;
font-weight: 500;
color: #FFFFFF;
}
.session-meta {
font-size: 24rpx;
color: #B0B0B0;
}
.session-status {
padding: 8rpx 16rpx;
border-radius: 20rpx;
font-size: 24rpx;
font-weight: 500;
}
.status-playing {
background: #e8f5e9;
color: #50C878;
}
.status-waiting {
background: #1A1A1A3e0;
color: #ff9500;
}
.status-finished {
background: #f5f5f5;
color: #B0B0B0;
}
/* 功能菜单 */
.menu-card {
margin-bottom: 20rpx;
}
.menu-list {
display: flex;
flex-direction: column;
}
.menu-item {
display: flex;
align-items: center;
padding: 24rpx 0;
border-bottom: 1rpx solid #f0f0f0;
gap: 16rpx;
}
.menu-item:last-child {
border-bottom: none;
}
.menu-item:active {
background: #f8f8f8;
}
.menu-icon {
font-size: 40rpx;
width: 48rpx;
text-align: center;
}
.menu-text {
flex: 1;
font-size: 30rpx;
color: #FFFFFF;
}
.menu-arrow {
font-size: 24rpx;
color: #B0B0B0;
}
/* 为TabBar预留空间 */
.container {
padding-bottom: 120rpx;
}