95 lines
4.5 KiB
CSS
95 lines
4.5 KiB
CSS
|
/**
|
||
|
|
* zhiqiu-order-system 公共样式
|
||
|
|
*/
|
||
|
|
body { margin:0;font-family:-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;background:#f5f3f0;color:#2c2c2a; }
|
||
|
|
.container { max-width:960px;margin:0 auto;padding:20px; }
|
||
|
|
|
||
|
|
/* 导航 */
|
||
|
|
.nav { display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap; }
|
||
|
|
.nav a { text-decoration:none;padding:8px 18px;border-radius:8px;font-size:13px;color:#5f5e5a;background:#fff;border:0.5px solid #d3d1c7; }
|
||
|
|
.nav a:hover { border-color:#534ab7;color:#3c3489; }
|
||
|
|
.nav a.active { background:#534ab7;color:#fff;border-color:#534ab7; }
|
||
|
|
|
||
|
|
/* 卡片 */
|
||
|
|
.card { background:#fff;border-radius:12px;padding:20px;border:0.5px solid #d3d1c7;margin-bottom:16px; }
|
||
|
|
.card h2 { margin:0 0 12px;font-size:16px;font-weight:500; }
|
||
|
|
.card h3 { margin:0 0 8px;font-size:14px;font-weight:500;color:#3c3489; }
|
||
|
|
|
||
|
|
/* 表单 */
|
||
|
|
label { display:block;font-size:13px;font-weight:500;margin-top:12px;margin-bottom:4px;color:#3c3489; }
|
||
|
|
input,select,textarea { width:100%;padding:10px;border:1px solid #d3d1c7;border-radius:8px;font-size:13px;font-family:inherit; }
|
||
|
|
input:focus,textarea:focus { outline:none;border-color:#534ab7; }
|
||
|
|
textarea { resize:vertical;min-height:80px; }
|
||
|
|
button { margin-top:12px;padding:10px 20px;background:#534ab7;color:#fff;border:none;border-radius:8px;font-size:14px;cursor:pointer; }
|
||
|
|
button:hover { background:#3c3489; }
|
||
|
|
button.secondary { background:#888780; }
|
||
|
|
button.secondary:hover { background:#5f5e5a; }
|
||
|
|
button.small { padding:6px 12px;font-size:12px;margin-top:4px; }
|
||
|
|
button.danger { background:#e24b4a; }
|
||
|
|
button.danger:hover { background:#a32d2d; }
|
||
|
|
|
||
|
|
/* 表格 / 订单卡片 */
|
||
|
|
.order-card { border:0.5px solid #d3d1c7;border-radius:8px;padding:14px;margin-bottom:10px;cursor:pointer;transition:box-shadow .15s; }
|
||
|
|
.order-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.06); }
|
||
|
|
.order-card .oh { display:flex;justify-content:space-between;align-items:center; }
|
||
|
|
.order-card .id { font-weight:500;color:#534ab7;font-size:13px;font-family:monospace; }
|
||
|
|
.order-card .status { display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px; }
|
||
|
|
.status-submitted { background:#faeeda;color:#854f0b; }
|
||
|
|
.status-reviewing { background:#e6f1fb;color:#185fa5; }
|
||
|
|
.status-accepted { background:#eaf3de;color:#3b6d11; }
|
||
|
|
.status-in-progress { background:#e1f5ee;color:#0f6e56; }
|
||
|
|
.status-testing { background:#fbeaf0;color:#993556; }
|
||
|
|
.status-completed { background:#d3d1c7;color:#2c2c2a; }
|
||
|
|
.status-delivered { background:#cecbf6;color:#3c3489; }
|
||
|
|
|
||
|
|
/* 标签 */
|
||
|
|
.tag { display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;background:#f1efe8;color:#5f5e5a;margin:2px; }
|
||
|
|
|
||
|
|
/* 评论 */
|
||
|
|
.comment { padding:10px;margin:6px 0;border-radius:8px;font-size:13px; }
|
||
|
|
.comment.dev { background:#e6f1fb;margin-left:20px; }
|
||
|
|
.comment.client { background:#f1efe8;margin-right:20px; }
|
||
|
|
.comment .author { font-size:11px;color:#888780; }
|
||
|
|
.comment .time { font-size:11px;color:#b4b2a9;float:right; }
|
||
|
|
|
||
|
|
/* 状态条 */
|
||
|
|
.status-bar { display:flex;gap:4px;margin:12px 0;flex-wrap:wrap; }
|
||
|
|
.status-dot { width:14px;height:14px;border-radius:50%; }
|
||
|
|
.status-dot.done { background:#534ab7; }
|
||
|
|
.status-dot.active { background:#1d9e75;box-shadow:0 0 0 2px #9fe1cb; }
|
||
|
|
.status-dot.pending { background:#d3d1c7; }
|
||
|
|
|
||
|
|
/* 加载 */
|
||
|
|
.loading { text-align:center;padding:40px;color:#888780; }
|
||
|
|
|
||
|
|
/* 消息 */
|
||
|
|
.msg { padding:10px;border-radius:8px;font-size:13px;margin:8px 0; }
|
||
|
|
.msg.success { background:#eaf3de;color:#3b6d11; }
|
||
|
|
.msg.error { background:#fcebeb;color:#a32d2d; }
|
||
|
|
.msg.info { background:#e6f1fb;color:#185fa5; }
|
||
|
|
|
||
|
|
/* 子任务列表 */
|
||
|
|
.sub-list { margin:4px 0;padding-left:16px; }
|
||
|
|
.sub-item { font-size:13px;padding:4px 0;display:flex;gap:8px;align-items:center; }
|
||
|
|
.sub-item .sid { font-family:monospace;font-size:11px;color:#888780; }
|
||
|
|
.sub-status { font-size:11px;padding:1px 6px;border-radius:4px; }
|
||
|
|
.sub-pending { background:#f1efe8;color:#5f5e5a; }
|
||
|
|
.sub-done { background:#eaf3de;color:#3b6d11; }
|
||
|
|
|
||
|
|
/* 表单辅助 */
|
||
|
|
.hint { font-size:12px;color:#888780;margin-top:4px; }
|
||
|
|
.flex { display:flex;gap:8px; }
|
||
|
|
.flex-grow { flex:1; }
|
||
|
|
|
||
|
|
/* 仪表盘 */
|
||
|
|
.stats { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px; }
|
||
|
|
.stat-card { background:#fff;border-radius:8px;padding:16px;text-align:center;border:0.5px solid #d3d1c7; }
|
||
|
|
.stat-card .num { font-size:28px;font-weight:500;color:#534ab7; }
|
||
|
|
.stat-card .label { font-size:12px;color:#888780;margin-top:4px; }
|
||
|
|
|
||
|
|
@media(max-width:640px) {
|
||
|
|
.container { padding:12px; }
|
||
|
|
.order-card .oh { flex-direction:column;align-items:flex-start;gap:4px; }
|
||
|
|
.stats { grid-template-columns:repeat(2,1fr); }
|
||
|
|
}
|