taiyi/dingdanquanliucheng
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化订单中心页面样式，表格增加最小宽度和间距

Browse Source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
taiyi 2026-06-05 13:28:38 +08:00
parent cdaff4999d
commit 9650c891d9
1 changed files with 85 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
frontend/web-admin/src/views/OrdersPage.vue
View File

@ -214,5 +214,89 @@ onMounted(() => { handleSearch(); });
</script>
<style scoped>
.page{padding:0;display:grid;gap:16px}.page-header{display:flex;justify-content:space-between;gap:12px;align-items:center}.subline{margin:0;color:#64748b}.status{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:12px;font-weight:600}.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.summary-card,.panel{border:1px solid #dbe3ef;border-radius:18px;padding:16px;background:#fff}.summary-card span{display:block;color:#64748b;margin-bottom:8px}.summary-card strong{font-size:24px}.split-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:16px}.panel-header{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}.panel-header h3{margin:0}.panel-header span{color:#64748b;font-size:13px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.full-width{grid-column:1/-1}.toolbar{display:grid;gap:12px;margin-bottom:16px;align-items:end}.toolbar-4{grid-template-columns:repeat(3,minmax(0,1fr)) auto}.toolbar label{display:grid;gap:6px}.toolbar span{color:#475569;font-size:13px;font-weight:600}.toolbar-actions{display:flex;gap:10px;align-items:end}.table-wrap{overflow:auto}.actions{display:flex;gap:8px;flex-wrap:wrap}.money{font-weight:700}.loading{margin:0;color:#6b7280}.empty-state{padding:24px;border:1px dashed #cbd5e1;border-radius:16px;color:#64748b;text-align:center}.link-btn,.ghost-btn,.primary-btn,input,select,textarea{border-radius:12px;border:1px solid #cbd5e1;padding:10px 12px;background:#fff;font-size:14px}.primary-btn{background:#2563eb;color:#fff;border-color:#2563eb}.ghost-btn,.link-btn{background:#f8fafc;color:#334155}.link-btn{cursor:pointer;padding:6px 10px}.link-btn:disabled{color:#9ca3af;cursor:not-allowed}.action-row{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}.action-row.split{justify-content:space-between}.rule-note{margin-top:12px;padding:12px;border:1px solid #dbe3ef;border-radius:14px;background:#f8fbff}.rule-note strong{display:block;margin-bottom:4px}.rule-note p{margin:0;color:#475569;line-height:1.6}.modal-mask{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(15,23,42,0.48);backdrop-filter:blur(2px)}.modal-panel{width:min(560px,100%);max-height:min(80vh,600px);overflow:auto;border-radius:20px;border:1px solid #dbe3ef;background:#fff;padding:24px;box-shadow:0 24px 80px rgba(15,23,42,0.24)}.modal-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}.modal-header h4{margin:0 0 6px;font-size:18px}.modal-header span{color:#64748b;font-size:13px}.modal-close{width:36px;height:36px;border:1px solid #d1d5db;background:#f8fafc;font-size:22px;line-height:1;color:#334155;border-radius:12px;cursor:pointer}@media(max-width:980px){.split-layout{grid-template-columns:1fr}.toolbar,.form-grid{grid-template-columns:1fr}.page-header,.panel-header{flex-direction:column;align-items:flex-start}}
.page { padding: 0; display: grid; gap: 16px; }
.page-header { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.page-header h2 { margin: 0 0 4px; font-size: 24px; }
.subline { margin: 0; color: #64748b; font-size: 14px; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.summary-card {
border: 1px solid #dbe3ef; border-radius: 16px; padding: 18px 20px; background: #fff;
display: grid; gap: 6px;
}
.summary-card span { color: #64748b; font-size: 13px; }
.summary-card strong { font-size: 26px; color: #0f172a; margin: 0; }
.panel {
border: 1px solid #dbe3ef; border-radius: 18px; padding: 20px; background: #fff;
}
.panel-header {
display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 16px;
}
.panel-header h3 { margin: 0; font-size: 16px; }
.panel-header span { color: #64748b; font-size: 13px; }
.toolbar { display: grid; gap: 12px; margin-bottom: 16px; align-items: end; }
.toolbar-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
.toolbar label { display: grid; gap: 6px; }
.toolbar span { color: #475569; font-size: 13px; font-weight: 600; }
.toolbar input, .toolbar select {
border: 1px solid #d1d5db; border-radius: 10px; padding: 10px 12px; background: #fff; font-size: 14px;
}
.toolbar-actions { display: flex; gap: 10px; align-items: end; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 900px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #e5e7eb; }
th { background: #f8fafc; font-size: 13px; font-weight: 600; color: #334155; white-space: nowrap; }
td { font-size: 14px; }
.status {
display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.money { font-weight: 700; color: #0f172a; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; white-space: nowrap; }
.link-btn, .ghost-btn, .primary-btn {
border-radius: 10px; border: 1px solid #d1d5db; padding: 8px 14px;
background: #fff; font-size: 13px; cursor: pointer; text-decoration: none; color: #334155;
}
.primary-btn { background: #2563eb; color: #fff; border-color: #2563eb; }
.link-btn { background: none; border: none; color: #2563eb; padding: 4px 8px; }
.link-btn:disabled { color: #9ca3af; cursor: not-allowed; }
.loading { margin: 0; color: #6b7280; }
.empty-state { padding: 32px; border: 1px dashed #cbd5e1; border-radius: 16px; color: #64748b; text-align: center; }
.modal-mask {
position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
padding: 24px; background: rgba(15, 23, 42, 0.48); backdrop-filter: blur(2px);
}
.modal-panel {
width: min(560px, 100%); max-height: min(80vh, 600px); overflow: auto;
border-radius: 20px; border: 1px solid #dbe3ef; background: #fff; padding: 24px;
box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
}
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.modal-header h4 { margin: 0 0 6px; font-size: 18px; }
.modal-header span { color: #64748b; font-size: 13px; }
.modal-close {
width: 36px; height: 36px; border: 1px solid #d1d5db; background: #f8fafc;
font-size: 22px; border-radius: 12px; cursor: pointer; color: #334155;
}
.form-grid { display: grid; gap: 12px; }
.form-grid label { display: grid; gap: 6px; }
.form-grid span { color: #475569; font-size: 13px; font-weight: 600; }
.full-width { grid-column: 1 / -1; }
textarea { border: 1px solid #d1d5db; border-radius: 12px; padding: 10px 12px; width: 100%; box-sizing: border-box; }
.action-row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.action-row.split { justify-content: space-between; }
@media (max-width: 980px) {
.toolbar { grid-template-columns: 1fr; }
.page-header, .panel-header { flex-direction: column; align-items: flex-start; }
}
</style>