.profile-page { height: 100vh; background: #f7f8fc; } /* 顶部用户信息 */ .profile-header { background: linear-gradient(135deg, #6C8CFF 0%, #8BA4FF 100%); padding: 48rpx 32rpx 40rpx; display: flex; align-items: center; gap: 28rpx; } .avatar-wrap { width: 120rpx; height: 120rpx; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .avatar-emoji { font-size: 60rpx; } .user-info { flex: 1; } .user-name { display: block; font-size: 36rpx; font-weight: 700; color: #ffffff; margin-bottom: 12rpx; } .user-days { display: flex; align-items: baseline; gap: 4rpx; } .days-num { font-size: 44rpx; font-weight: 700; color: #FFB84D; line-height: 1; } .days-label { font-size: 24rpx; color: rgba(255,255,255,0.85); } .days-text { font-size: 24rpx; color: rgba(255,255,255,0.75); margin-left: 6rpx; } /* 数据统计 */ .stats-section { margin: 24rpx 32rpx 0; padding: 32rpx; display: flex; align-items: center; } .stats-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8rpx; } .stats-value { font-size: 52rpx; font-weight: 700; color: #6C8CFF; line-height: 1; } .stats-key { font-size: 22rpx; color: #888888; } .stats-divider { width: 1rpx; height: 60rpx; background: #F0F0F0; } /* 通用section */ .section { margin: 32rpx 32rpx 0; } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20rpx; } .section-title { font-size: 30rpx; font-weight: 700; color: #333333; } /* 收藏课程 */ .fav-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16rpx; } .fav-card { display: flex; flex-direction: column; align-items: center; gap: 10rpx; } .fav-cover { width: 100%; aspect-ratio: 1; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; } .fav-emoji { font-size: 44rpx; } .fav-title { font-size: 20rpx; color: #555555; text-align: center; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .empty-tip { font-size: 24rpx; color: #BBBBBB; text-align: center; padding: 32rpx 0; } /* 最近作品 */ .works-scroll { margin: 0 -32rpx; padding: 0 32rpx; } .works-list { display: flex; flex-direction: row; gap: 16rpx; padding-right: 32rpx; width: max-content; } .work-thumb { width: 180rpx; flex-shrink: 0; } .work-thumb-img { width: 180rpx; height: 180rpx; border-radius: 16rpx; background: #EEEEEE; } .work-thumb-title { display: block; font-size: 20rpx; color: #888888; text-align: center; margin-top: 8rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 设置列表 */ .settings-section { margin: 32rpx 32rpx 0; background: #ffffff; border-radius: 20rpx; overflow: hidden; } .settings-item { display: flex; align-items: center; justify-content: space-between; padding: 28rpx 28rpx; } .settings-left { display: flex; align-items: center; gap: 16rpx; } .settings-icon { font-size: 36rpx; } .settings-label { font-size: 28rpx; color: #333333; } .settings-right { display: flex; align-items: center; gap: 8rpx; } .settings-value { font-size: 26rpx; color: #AAAAAA; } .settings-arrow { font-size: 36rpx; color: #CCCCCC; }