blob: e5dff207f8b4160b8ab065aa878e0414b52dda56 [file] [log] [blame]
@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;
}