.page { min-height: 100vh; background: #E8C3D4; } .container { padding: 32rpx; } /* 顶部紫色统计卡片 */ .header-card { background: linear-gradient(135deg, #CF91D3 0%, #B06AB3 100%); border-radius: 40rpx; padding: 48rpx; color: #FFFFFF; margin-bottom: 32rpx; box-shadow: 0 12rpx 32rpx rgba(176, 106, 179, 0.3); } .user-level-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 48rpx; } .level-left { display: flex; align-items: center; gap: 24rpx; } .icon-bg { width: 72rpx; height: 72rpx; background: rgba(255, 255, 255, 0.15); border-radius: 20rpx; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10rpx); } .level-name { font-size: 38rpx; font-weight: 800; letter-spacing: 2rpx; } .stats-grid { display: flex; justify-content: space-between; } .stat-box { flex: 1; } .stat-label { font-size: 28rpx; opacity: 0.85; margin-bottom: 20rpx; display: block; } .stat-value { font-size: 72rpx; font-weight: 800; letter-spacing: 2rpx; } /* 白色内容卡片 */ .content-card { background: #FFFFFF; border-radius: 40rpx; padding: 32rpx; box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.05); margin-bottom: 32rpx; } .detail-tabs { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32rpx; padding-bottom: 24rpx; border-bottom: 1rpx solid #F3F4F6; } .tab-item { display: flex; align-items: center; gap: 12rpx; padding: 10rpx 0; } .tab-item .tab-text { font-size: 30rpx; color: #9CA3AF; font-weight: 500; transition: all 0.3s; } .tab-item.active .tab-text { font-size: 32rpx; color: #B06AB3; font-weight: 800; } /* 订单部分 */ .orders-section { padding: 0; } .section-title { font-size: 30rpx; font-weight: 800; color: #111827; margin-bottom: 32rpx; } .order-list { display: flex; flex-direction: column; gap: 24rpx; } .order-item { background: #F9FAFB; border-radius: 28rpx; padding: 32rpx; display: flex; align-items: center; border: 2rpx solid transparent; } .order-item:active { background: #F3F4F6; } .user-avatar { width: 100rpx; height: 100rpx; border-radius: 24rpx; /* Matches Figma's 14px/16px border radius feel */ background: #E5E7EB; margin-right: 24rpx; } .order-info { flex: 1; display: flex; flex-direction: column; gap: 4rpx; } .user-name { font-size: 30rpx; font-weight: 800; color: #111827; } .product-info { font-size: 24rpx; color: #9CA3AF; font-weight: 500; } .order-no { font-size: 20rpx; color: #D1D5DB; font-weight: 400; margin-top: 4rpx; } .order-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4rpx; } .label { font-size: 22rpx; color: #9CA3AF; font-weight: 600; } .amount { font-size: 34rpx; font-weight: 900; color: #B06AB3; } /* 底部提示 */ .bottom-tip { text-align: center; padding: 40rpx 0; font-size: 26rpx; color: #9CA3AF; } /* 状态样式 */ .loading-status, .empty-status, .no-more { text-align: center; padding: 60rpx 0; font-size: 26rpx; color: #9CA3AF; }