| | |
| | | /* 容器样式 */ |
| | | .container { |
| | | min-height: 100vh; |
| | | background: #f8f9fa; |
| | | background: #f5f5f5; |
| | | padding-bottom: 40rpx; |
| | | } |
| | | |
| | |
| | | padding: 0 30rpx; |
| | | } |
| | | |
| | | /* 用户信息卡片 */ |
| | | .user-card { |
| | | background: linear-gradient(135deg, #1976d2, #42a5f5); |
| | | border-radius: 20rpx; |
| | | padding: 40rpx; |
| | | margin-bottom: 30rpx; |
| | | /* 用户信息区域 */ |
| | | .user-section { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | box-shadow: 0 8rpx 24rpx rgba(25, 118, 210, 0.3); |
| | | padding: 60rpx 0 40rpx 0; |
| | | } |
| | | |
| | | .user-info { |
| | | display: flex; |
| | | align-items: center; |
| | | flex: 1; |
| | | .user-avatar-wrapper { |
| | | margin-bottom: 20rpx; |
| | | } |
| | | |
| | | .avatar { |
| | | .user-avatar { |
| | | width: 120rpx; |
| | | height: 120rpx; |
| | | border-radius: 50%; |
| | | margin-right: 30rpx; |
| | | border: 4rpx solid rgba(255, 255, 255, 0.3); |
| | | } |
| | | |
| | | .avatar-placeholder { |
| | | .user-avatar-placeholder { |
| | | width: 120rpx; |
| | | height: 120rpx; |
| | | border-radius: 50%; |
| | | margin-right: 30rpx; |
| | | border: 4rpx solid rgba(255, 255, 255, 0.3); |
| | | background: rgba(255, 255, 255, 0.2); |
| | | background: #ffa726; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | |
| | | font-weight: bold; |
| | | } |
| | | |
| | | .user-details { |
| | | flex: 1; |
| | | } |
| | | |
| | | .username { |
| | | display: block; |
| | | .user-name { |
| | | font-size: 36rpx; |
| | | font-weight: bold; |
| | | color: #ffffff; |
| | | margin-bottom: 12rpx; |
| | | } |
| | | |
| | | .user-desc { |
| | | display: block; |
| | | font-size: 24rpx; |
| | | color: rgba(255, 255, 255, 0.8); |
| | | margin-bottom: 16rpx; |
| | | } |
| | | |
| | | .user-roles { |
| | | display: flex; |
| | | gap: 12rpx; |
| | | } |
| | | |
| | | .role-tag { |
| | | padding: 6rpx 16rpx; |
| | | background: rgba(255, 255, 255, 0.2); |
| | | color: #ffffff; |
| | | border-radius: 20rpx; |
| | | font-size: 20rpx; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .edit-btn { |
| | | width: 60rpx; |
| | | height: 60rpx; |
| | | background: rgba(255, 255, 255, 0.2); |
| | | border-radius: 50%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .edit-icon { |
| | | font-size: 28rpx; |
| | | } |
| | | |
| | | /* 统计数据样式 */ |
| | | .stats-section { |
| | | background: #ffffff; |
| | | border-radius: 16rpx; |
| | | padding: 30rpx; |
| | | margin-bottom: 30rpx; |
| | | box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | .stats-grid { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .stat-item { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | flex: 1; |
| | | } |
| | | |
| | | .stat-number { |
| | | font-size: 48rpx; |
| | | font-weight: bold; |
| | | color: #1976d2; |
| | | color: #333333; |
| | | margin-bottom: 8rpx; |
| | | } |
| | | |
| | | .stat-label { |
| | | font-size: 24rpx; |
| | | color: #666666; |
| | | .user-role { |
| | | font-size: 28rpx; |
| | | color: #999999; |
| | | } |
| | | |
| | | /* 角色专区样式 */ |
| | | .role-section { |
| | | background: #ffffff; |
| | | border-radius: 16rpx; |
| | | padding: 30rpx; |
| | | margin-bottom: 30rpx; |
| | | box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | .section-header { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | margin-bottom: 30rpx; |
| | | /* 项目区域 */ |
| | | .projects-section { |
| | | margin-bottom: 40rpx; |
| | | } |
| | | |
| | | .section-title { |
| | | font-size: 32rpx; |
| | | font-weight: bold; |
| | | color: #333333; |
| | | margin-bottom: 30rpx; |
| | | display: block; |
| | | } |
| | | |
| | | .judge-stats, |
| | | .organizer-stats { |
| | | font-size: 24rpx; |
| | | color: #1976d2; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .pending-count, |
| | | .active-count { |
| | | padding: 8rpx 16rpx; |
| | | background: #e3f2fd; |
| | | border-radius: 20rpx; |
| | | } |
| | | |
| | | .menu-grid { |
| | | .project-list { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | flex-direction: column; |
| | | gap: 20rpx; |
| | | } |
| | | |
| | | .menu-item { |
| | | flex: 0 0 calc(33.333% - 14rpx); |
| | | .project-card { |
| | | background: #ffffff; |
| | | border-radius: 16rpx; |
| | | padding: 30rpx; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | padding: 30rpx 20rpx; |
| | | background: #f8f9fa; |
| | | border-radius: 12rpx; |
| | | border: 2rpx solid transparent; |
| | | box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | .menu-item:active { |
| | | background: #e9ecef; |
| | | border-color: #1976d2; |
| | | .project-card:active { |
| | | transform: scale(0.98); |
| | | } |
| | | |
| | | .menu-icon-wrapper { |
| | | position: relative; |
| | | margin-bottom: 16rpx; |
| | | } |
| | | |
| | | .menu-icon { |
| | | font-size: 48rpx; |
| | | } |
| | | |
| | | .badge { |
| | | position: absolute; |
| | | top: -8rpx; |
| | | right: -8rpx; |
| | | min-width: 32rpx; |
| | | height: 32rpx; |
| | | background: #ff4757; |
| | | color: #ffffff; |
| | | .project-a .project-icon { |
| | | background: #2e7d32; |
| | | width: 80rpx; |
| | | height: 80rpx; |
| | | border-radius: 16rpx; |
| | | font-size: 20rpx; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | padding: 0 8rpx; |
| | | font-weight: bold; |
| | | } |
| | | |
| | | .menu-title { |
| | | font-size: 26rpx; |
| | | font-weight: bold; |
| | | color: #333333; |
| | | margin-bottom: 8rpx; |
| | | text-align: center; |
| | | } |
| | | |
| | | .menu-desc { |
| | | font-size: 20rpx; |
| | | color: #666666; |
| | | text-align: center; |
| | | line-height: 1.4; |
| | | } |
| | | |
| | | /* 功能菜单样式 */ |
| | | .menu-section { |
| | | background: #ffffff; |
| | | border-radius: 16rpx; |
| | | padding: 30rpx; |
| | | margin-bottom: 30rpx; |
| | | box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | .menu-list { |
| | | margin-top: 20rpx; |
| | | } |
| | | |
| | | .menu-item-row { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 30rpx 0; |
| | | border-bottom: 1rpx solid #f0f0f0; |
| | | transition: background 0.3s ease; |
| | | } |
| | | |
| | | .menu-item-row:last-child { |
| | | border-bottom: none; |
| | | } |
| | | |
| | | .menu-item-row:active { |
| | | background: #f8f9fa; |
| | | } |
| | | |
| | | .menu-left { |
| | | display: flex; |
| | | align-items: center; |
| | | flex: 1; |
| | | } |
| | | |
| | | .menu-item-row .menu-icon { |
| | | font-size: 40rpx; |
| | | margin-right: 24rpx; |
| | | } |
| | | |
| | | .menu-text { |
| | | flex: 1; |
| | | } |
| | | |
| | | .menu-item-row .menu-title { |
| | | display: block; |
| | | font-size: 28rpx; |
| | | font-weight: 500; |
| | | color: #333333; |
| | | margin-bottom: 6rpx; |
| | | } |
| | | |
| | | .menu-item-row .menu-desc { |
| | | display: block; |
| | | font-size: 22rpx; |
| | | color: #666666; |
| | | } |
| | | |
| | | .menu-arrow { |
| | | font-size: 28rpx; |
| | | color: #cccccc; |
| | | font-weight: bold; |
| | | } |
| | | |
| | | /* 最近报名样式 */ |
| | | .recent-section { |
| | | background: #ffffff; |
| | | .project-b .project-icon { |
| | | background: #66bb6a; |
| | | width: 80rpx; |
| | | height: 80rpx; |
| | | border-radius: 16rpx; |
| | | padding: 30rpx; |
| | | margin-bottom: 30rpx; |
| | | box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | .view-more { |
| | | font-size: 24rpx; |
| | | color: #1976d2; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .empty-state { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | padding: 80rpx 0; |
| | | } |
| | | |
| | | .empty-icon { |
| | | font-size: 80rpx; |
| | | margin-bottom: 20rpx; |
| | | opacity: 0.5; |
| | | } |
| | | |
| | | .empty-text { |
| | | font-size: 26rpx; |
| | | color: #999999; |
| | | } |
| | | |
| | | .registration-list { |
| | | margin-top: 20rpx; |
| | | } |
| | | |
| | | .registration-item { |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 24rpx 0; |
| | | border-bottom: 1rpx solid #f0f0f0; |
| | | transition: background 0.3s ease; |
| | | } |
| | | |
| | | .registration-item:last-child { |
| | | border-bottom: none; |
| | | } |
| | | |
| | | .registration-item:active { |
| | | background: #f8f9fa; |
| | | } |
| | | |
| | | .activity-cover { |
| | | width: 120rpx; |
| | | height: 80rpx; |
| | | border-radius: 8rpx; |
| | | margin-right: 20rpx; |
| | | } |
| | | |
| | | .activity-cover-placeholder { |
| | | width: 120rpx; |
| | | height: 80rpx; |
| | | border-radius: 8rpx; |
| | | margin-right: 20rpx; |
| | | background: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%); |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | margin-right: 24rpx; |
| | | } |
| | | |
| | | .activity-cover-text { |
| | | color: #ffffff; |
| | | font-size: 24rpx; |
| | | font-weight: bold; |
| | | .icon-plant, |
| | | .icon-trophy { |
| | | font-size: 36rpx; |
| | | } |
| | | |
| | | .registration-info { |
| | | .project-info { |
| | | flex: 1; |
| | | } |
| | | |
| | | .activity-title { |
| | | display: block; |
| | | font-size: 28rpx; |
| | | .project-name { |
| | | font-size: 30rpx; |
| | | font-weight: bold; |
| | | color: #333333; |
| | | margin-bottom: 8rpx; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | .registration-time, |
| | | .activity-time { |
| | | display: block; |
| | | font-size: 22rpx; |
| | | color: #666666; |
| | | margin-bottom: 6rpx; |
| | | margin-bottom: 8rpx; |
| | | } |
| | | |
| | | .status-row { |
| | | .project-desc { |
| | | font-size: 24rpx; |
| | | color: #999999; |
| | | display: block; |
| | | } |
| | | |
| | | .project-arrow { |
| | | font-size: 28rpx; |
| | | color: #cccccc; |
| | | } |
| | | |
| | | /* 其他菜单区域 */ |
| | | .other-menu-section { |
| | | background: #ffffff; |
| | | border-radius: 16rpx; |
| | | overflow: hidden; |
| | | box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | .menu-item-simple { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 16rpx; |
| | | padding: 30rpx; |
| | | border-bottom: 1rpx solid #f0f0f0; |
| | | transition: background-color 0.3s ease; |
| | | } |
| | | |
| | | .registration-status, |
| | | .activity-status { |
| | | padding: 4rpx 12rpx; |
| | | border-radius: 12rpx; |
| | | font-size: 20rpx; |
| | | font-weight: 500; |
| | | .menu-item-simple:last-child { |
| | | border-bottom: none; |
| | | } |
| | | |
| | | .registration-status.status-pending { |
| | | background: #fff3cd; |
| | | color: #856404; |
| | | .menu-item-simple:active { |
| | | background-color: #f8f8f8; |
| | | } |
| | | |
| | | .registration-status.status-approved { |
| | | background: #d4edda; |
| | | color: #155724; |
| | | .menu-icon { |
| | | font-size: 32rpx; |
| | | margin-right: 24rpx; |
| | | width: 40rpx; |
| | | text-align: center; |
| | | } |
| | | |
| | | .registration-status.status-rejected { |
| | | background: #f8d7da; |
| | | color: #721c24; |
| | | .menu-title { |
| | | flex: 1; |
| | | font-size: 28rpx; |
| | | color: #333333; |
| | | } |
| | | |
| | | .registration-status.status-cancelled { |
| | | background: #f1f3f4; |
| | | color: #5f6368; |
| | | } |
| | | |
| | | .activity-status { |
| | | background: #e3f2fd; |
| | | color: #1976d2; |
| | | } |
| | | |
| | | .item-arrow { |
| | | .menu-arrow { |
| | | font-size: 24rpx; |
| | | color: #cccccc; |
| | | font-weight: bold; |
| | | margin-left: 16rpx; |
| | | } |
| | | |
| | | /* 退出登录样式 */ |
| | | .logout-section { |
| | | margin-top: 40rpx; |
| | | } |
| | | |
| | | .logout-btn { |
| | | background: #ffffff; |
| | | border: 2rpx solid #ff4757; |
| | | border-radius: 12rpx; |
| | | padding: 30rpx 0; |
| | | text-align: center; |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | .logout-btn:active { |
| | | background: #ff4757; |
| | | } |
| | | |
| | | .logout-text { |
| | | font-size: 28rpx; |
| | | color: #ff4757; |
| | | font-weight: bold; |
| | | } |
| | | |
| | | .logout-btn:active .logout-text { |
| | | color: #ffffff; |
| | | } |
| | | |
| | | /* 响应式适配 */ |
| | | @media screen and (max-width: 375px) { |
| | | .profile-content { |
| | | padding: 0 20rpx; |
| | | } |
| | | |
| | | .user-card { |
| | | padding: 30rpx; |
| | | } |
| | | |
| | | .avatar { |
| | | width: 100rpx; |
| | | height: 100rpx; |
| | | margin-right: 20rpx; |
| | | } |
| | | |
| | | .username { |
| | | font-size: 32rpx; |
| | | } |
| | | |
| | | .stats-section, |
| | | .role-section, |
| | | .menu-section, |
| | | .recent-section { |
| | | padding: 24rpx; |
| | | } |
| | | |
| | | .menu-item { |
| | | flex: 0 0 calc(50% - 10rpx); |
| | | padding: 24rpx 16rpx; |
| | | } |
| | | |
| | | .stat-number { |
| | | font-size: 40rpx; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 414px) { |
| | | .activity-cover { |
| | | width: 140rpx; |
| | | height: 90rpx; |
| | | } |
| | | |
| | | .menu-item { |
| | | padding: 36rpx 24rpx; |
| | | } |
| | | |
| | | .menu-icon { |
| | | font-size: 52rpx; |
| | | } |
| | | } |