/* 个人中心样式 */ .profile-page { min-height: 100vh; background: var(--color-bg-page); } /* 橙色头部 */ .header-bg { background: #F38600; border-radius: 0 0 48rpx 48rpx; padding-bottom: 200rpx; } .user-info { display: flex; flex-direction: column; align-items: center; padding: 32rpx 40rpx; } .avatar-wrap { width: 128rpx; height: 128rpx; border-radius: 50%; border: 6rpx solid rgba(255, 255, 255, 0.3); background: linear-gradient(135deg, #FFB366, #FFE0B2); display: flex; align-items: center; justify-content: center; margin-bottom: 20rpx; overflow: hidden; } .avatar-emoji { font-size: 64rpx; } .avatar-img { width: 100%; height: 100%; border-radius: 50%; } .user-name { font-size: 32rpx; font-weight: 700; color: #FFF; letter-spacing: 2rpx; } .vip-crown { font-size: 28rpx; margin-left: 8rpx; } .user-desc { font-size: 22rpx; color: rgba(255, 255, 255, 0.9); margin-top: 8rpx; font-weight: 500; text-align: center; } /* 订阅卡片 */ .sub-card-wrap { padding: 0 32rpx; margin-top: -140rpx; position: relative; z-index: 10; } .sub-card { padding: 32rpx; } /* 空状态 */ .sub-empty { text-align: center; padding: 40rpx 0; } .sub-empty-text { display: block; font-size: 26rpx; color: #999; margin-bottom: 24rpx; } /* 订阅列表项 */ .sub-item { display: flex; align-items: center; justify-content: space-between; padding: 20rpx; border-radius: 32rpx; background: #FEFEFE; border: 1rpx solid rgba(0,0,0,0.04); box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.02); margin-bottom: 16rpx; } .sub-item-left { display: flex; align-items: center; flex: 1; overflow: hidden; } .sub-icon { width: 80rpx; height: 80rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1); } .sub-emoji { font-size: 36rpx; } .sub-cover-img { width: 100%; height: 100%; border-radius: 50%; } .sub-info { margin-left: 24rpx; overflow: hidden; } .sub-name { display: block; font-size: 28rpx; font-weight: 700; color: #333; } .sub-tag { display: inline-block; margin-top: 8rpx; padding: 4rpx 12rpx; border-radius: 6rpx; font-size: 20rpx; font-weight: 700; } .sub-tag.free { background: rgba(45, 90, 39, 0.1); color: #2D5A27; } .sub-del { width: 56rpx; height: 56rpx; border-radius: 50%; background: #F5F5F5; border: 1rpx solid #EEE; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .del-icon { font-size: 24rpx; } .sub-notice { display: block; font-size: 20rpx; color: rgba(255, 157, 66, 0.7); text-align: center; margin-top: 12rpx; font-weight: 500; } /* 菜单卡片 */ .menu-card-wrap { padding: 24rpx 32rpx 0; } .menu-card { padding: 8rpx 0; } .menu-item { display: flex; align-items: center; justify-content: space-between; padding: 28rpx 32rpx; border-bottom: 1rpx solid rgba(0,0,0,0.03); } .menu-item:last-child { border-bottom: none; } .menu-item-left { display: flex; align-items: center; } .menu-icon-wrap { width: 52rpx; height: 52rpx; border-radius: 50%; background: #F5F5F5; display: flex; align-items: center; justify-content: center; margin-right: 20rpx; } .menu-icon-wrap.highlight { background: rgba(251, 191, 36, 0.1); } .menu-emoji { font-size: 24rpx; } .menu-label { font-size: 28rpx; font-weight: 700; color: #333; letter-spacing: 2rpx; } .menu-item-right { display: flex; align-items: center; gap: 12rpx; } .menu-desc { font-size: 22rpx; color: #999; font-weight: 500; } .menu-desc.highlight { color: #D97706; } .menu-arrow { font-size: 28rpx; color: #CCC; }