| @import "~antd/dist/antd.css"; |
| |
| /* 整体容器背景，弱化底层 */ |
| .admin-container { |
| background-color: #f5f6f8; |
| } |
| |
| .admin-container { |
| padding: 24px; |
| background-color: #fff; |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; |
| } |
| |
| /* 页眉分层：白底 + 圆角 + 阴影 */ |
| .page-header { |
| background: #fff; |
| padding: 12px 24px; |
| border-radius: 8px; |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
| } |
| |
| .admin-title { |
| font-size: 24px; |
| color: #e61515; |
| margin-bottom: 16px; |
| } |
| |
| .admin-table { |
| width: 100%; |
| border-collapse: collapse; |
| } |
| |
| .admin-table th, |
| .admin-table td { |
| border: 1px solid #f0f0f0; |
| padding: 12px 16px; |
| text-align: left; |
| } |
| |
| .admin-table th { |
| background-color: #fafafa; |
| color: #333; |
| font-weight: 500; |
| } |
| |
| .status { |
| font-weight: 500; |
| text-transform: capitalize; |
| } |
| |
| .status.pending { |
| color: #f29900; |
| } |
| |
| .status.approved { |
| color: #28a745; |
| } |
| |
| .status.banned { |
| color: #d73a49; |
| } |
| |
| .btn { |
| padding: 6px 12px; |
| margin-right: 8px; |
| border: none; |
| border-radius: 4px; |
| cursor: pointer; |
| font-size: 14px; |
| } |
| |
| .btn-approve { |
| background-color: #e61515; |
| color: #fff; |
| } |
| |
| .btn-ban { |
| background-color: #f5f5f5; |
| color: #333; |
| } |
| |
| /* 1. 瀑布流容器 */ |
| .admin-grid { |
| display: grid; |
| grid-gap: 16px; |
| grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); |
| margin-top: 16px; |
| } |
| |
| /* 2. 卡片 */ |
| .admin-card { |
| display: flex; |
| flex-direction: column; |
| background: #fff; |
| border-radius: 8px; |
| box-shadow: 0 2px 6px rgba(0,0,0,0.08); |
| overflow: hidden; |
| transition: transform 0.2s; |
| } |
| .admin-card:hover { |
| transform: translateY(-4px); |
| } |
| |
| /* 3. 头部：用户名 + 状态 */ |
| .card-header { |
| padding: 12px 16px; |
| border-bottom: 1px solid #f0f0f0; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| .card-header .username { |
| font-weight: 500; |
| color: #333; |
| } |
| .card-header .status { |
| font-weight: 500; |
| text-transform: capitalize; |
| } |
| .card-header .status.pending { color: #f29900; } |
| .card-header .status.approved { color: #28a745; } |
| .card-header .status.banned { color: #d73a49; } |
| |
| /* 4. 操作按钮区 */ |
| .card-actions { |
| display: flex; |
| padding: 12px 16px; |
| border-top: 1px solid #f0f0f0; |
| gap: 8px; |
| } |
| .card-actions .btn { |
| flex: 1; |
| } |
| .card-actions .btn-approve { background-color: #e61515; color: #fff; } |
| .card-actions .btn-ban { background-color: #f5f5f5; color: #333; } |
| |
| /* —— Admin.js 专用布局 —— */ |
| .admin-layout { |
| display: flex; |
| gap: 16px; |
| } |
| |
| /* 左侧列表区 */ |
| .list-panel { |
| width: 320px; |
| border-right: 1px solid #f0f0f0; |
| padding-right: 16px; |
| overflow-y: auto; |
| padding: 16px; |
| } |
| |
| /* 顶部标签切换 */ |
| .tabs { |
| display: flex; |
| border-bottom: 1px solid #f0f0f0; |
| margin-bottom: 8px; |
| background: #fafafa; |
| padding: 0 16px; |
| border-radius: 8px 8px 0 0; |
| } |
| .tab-btn { |
| flex: 1; |
| padding: 8px 12px; |
| background: none; |
| border: none; |
| border-bottom: 2px solid transparent; |
| cursor: pointer; |
| font-size: 14px; |
| } |
| .tab-btn.active { |
| border-color: #e61515; |
| color: #e61515; |
| } |
| |
| /* 帖子列表 */ |
| .post-list { |
| /* 可根据需要添加滚动或间距 */ |
| } |
| .post-item { |
| display: flex; |
| align-items: center; |
| padding: 8px; |
| cursor: pointer; |
| border-bottom: 1px solid #f5f5f5; |
| background: #fff; |
| margin-bottom: 4px; |
| border-radius: 4px; |
| transition: background 0.2s; |
| } |
| .post-item:hover { |
| background-color: #fafafa; |
| } |
| .post-item.selected { |
| background: #e6f1ff; |
| } |
| .thumb { |
| width: 40px; |
| height: 40px; |
| object-fit: cover; |
| border-radius: 4px; |
| margin-right: 8px; |
| } |
| .info { |
| flex: 1; |
| } |
| .info .title { |
| font-weight: 500; |
| color: #333; |
| } |
| .info .meta { |
| font-size: 12px; |
| color: #888; |
| } |
| |
| /* 状态标签 */ |
| .status-tag { |
| padding: 2px 6px; |
| border-radius: 4px; |
| font-size: 12px; |
| text-transform: capitalize; |
| } |
| .status-tag.pending { |
| background-color: #fff4e5; |
| color: #f29900; |
| } |
| .status-tag.approved { |
| background-color: #e6f9f0; |
| color: #28a745; |
| } |
| .status-tag.rejected { |
| background-color: #fceaea; |
| color: #d73a49; |
| } |
| |
| /* 右侧详情面板 */ |
| .detail-panel { |
| flex: 1; |
| padding-left: 16px; |
| max-height: calc(100vh - 100px); |
| overflow-y: auto; |
| padding: 24px; |
| margin-left: 8px; |
| } |
| |
| /* 卡片阴影微调 */ |
| .admin-card { |
| box-shadow: 0 2px 6px rgba(0,0,0,0.08); |
| } |
| |
| .detail-meta { |
| font-size: 12px; |
| color: #888; |
| margin-bottom: 8px; |
| } |
| .detail-content { |
| margin-bottom: 16px; |
| line-height: 1.6; |
| } |
| .detail-actions { |
| margin-bottom: 16px; |
| background: #f9f9fb; |
| padding: 12px; |
| border-radius: 4px; |
| } |
| |
| /* 操作按钮 */ |
| .btn-reject { |
| background-color: #f5f5f5; |
| color: #333; |
| } |
| .rejected-label { |
| color: #d73a49; |
| font-weight: 500; |
| } |
| |
| /* 加载与空状态 */ |
| .loading, |
| .empty-state { |
| text-align: center; |
| padding: 16px; |
| color: #888; |
| } |
| |
| /* 合规性指引 */ |
| .compliance-guidelines { |
| border-top: 1px solid #f0f0f0; |
| padding-top: 12px; |
| margin-top: 12px; |
| background: #f9f9fb; |
| padding: 12px; |
| border-radius: 4px; |
| } |
| .compliance-guidelines h4 { |
| margin-bottom: 8px; |
| font-size: 16px; |
| } |
| .compliance-guidelines ul { |
| padding-left: 20px; |
| } |
| .compliance-guidelines li { |
| line-height: 1.4; |
| margin-bottom: 4px; |
| } |
| |
| /* 管理员导航栏样式 */ |
| .admin-nav { |
| display: flex; |
| align-items: center; |
| gap: 1.5rem; |
| margin: 1rem 0 2rem; |
| border-bottom: 2px solid #e5e5e5; |
| } |
| |
| .admin-nav button { |
| background: none; |
| border: none; |
| padding: 0.5rem 0; |
| font-size: 1rem; |
| color: #555; |
| cursor: pointer; |
| position: relative; |
| transition: color 0.3s ease; |
| } |
| |
| .admin-nav button:hover { |
| color: #000; |
| } |
| |
| .admin-nav button.active { |
| color: #0078d4; |
| } |
| |
| .admin-nav button.active::after { |
| content: ''; |
| position: absolute; |
| bottom: -2px; |
| left: 0; |
| width: 100%; |
| height: 3px; |
| background-color: #0078d4; |
| border-radius: 2px 2px 0 0; |
| } |
| |
| /* 页面头部：标题 + 搜索框 */ |
| .page-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 16px; |
| background: #fff; |
| padding: 12px 24px; |
| border-radius: 8px; |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
| } |
| .main-title { |
| font-size: 28px; |
| color: #e61515; |
| margin: 0; |
| } |
| .search-input { |
| width: 240px; |
| padding: 6px 12px; |
| font-size: 14px; |
| border: 1px solid #ddd; |
| border-radius: 4px; |
| transition: border-color 0.2s; |
| background: #fafafa; |
| } |
| .search-input:focus { |
| outline: none; |
| border-color: #e61515; |
| } |
| |
| /* 小红书品牌红 */ |
| :root { |
| --xiaohongshu-red: #e2204f; |
| } |
| |
| /* Antd 表格表头背景小红书红，文字白色 */ |
| .ant-table-thead > tr > th { |
| background-color: var(--xiaohongshu-red) !important; |
| color: #fff; |
| } |
| |
| /* 侧栏前两项文字变小红书红 */ |
| .ant-layout-sider .ant-menu-item:nth-child(1), |
| .ant-layout-sider .ant-menu-item:nth-child(2) { |
| color: var(--xiaohongshu-red) !important; |
| } |
| |
| .dashboard-nav { |
| display: flex; |
| gap: 1rem; |
| } |