petty09190/hr-assessment-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

調整列印呈現方式

Browse Source
This commit is contained in:
吳佩庭
2025-10-12 04:19:52 +08:00
parent 22291ca310
commit 6275899a68
1 changed files with 79 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
app/admin/results/detail/[testResultId]/page.tsx
View File

@@ -629,20 +629,16 @@ function AdminResultDetailContent() {
body { body {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
margin: 0; margin: 0;
padding: 0.8rem; padding: 0.6rem;
background: #f8fafc; background: #f8fafc;
color: #0f172a; color: #0f172a;
line-height: 1.5; line-height: 1.4;
font-size: 0.8rem; font-size: 0.75rem;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
} }
.header { .header {
text-align: center; text-align: center;
margin-bottom: 0.75rem; margin-bottom: 0.8rem;
padding-bottom: 0.5rem; padding-bottom: 0.6rem;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
} }
.header h1 { .header h1 {
@@ -657,20 +653,22 @@ function AdminResultDetailContent() {
} }
.row { .row {
display: flex; display: flex;
gap: 0.5rem; gap: 0.6rem;
margin-bottom: 0.5rem; margin-bottom: 0.8rem;
align-items: flex-start; align-items: stretch;
} }
.card { .card {
flex: 1; flex: 1;
background: white; background: white;
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;
border-radius: 0.375rem; border-radius: 0.375rem;
padding: 0.75rem; padding: 0.8rem;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
display: flex;
flex-direction: column;
} }
.equal-height { .equal-height {
min-height: 12rem; min-height: 13rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@@ -713,8 +711,8 @@ function AdminResultDetailContent() {
.info-grid { .info-grid {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
gap: 0.5rem 1rem; gap: 0.6rem 1rem;
margin-bottom: 0.5rem; margin-bottom: 0.6rem;
align-items: center; align-items: center;
} }
.info-label { .info-label {
@@ -729,86 +727,87 @@ function AdminResultDetailContent() {
word-break: break-all; word-break: break-all;
} }
.score-circle { .score-circle {
width: 2.5rem; width: 2.8rem;
height: 2.5rem; height: 2.8rem;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #1d4ed8); background: linear-gradient(135deg, #3b82f6, #1d4ed8);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0 auto 0.5rem; margin: 0 auto 0.6rem;
box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.1); box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.1);
} }
.score-circle span { .score-circle span {
color: white; color: white;
font-size: 1rem; font-size: 1.1rem;
font-weight: bold; font-weight: bold;
} }
.level-badge { .level-badge {
display: inline-block; display: inline-block;
background: #f1f5f9; background: #f1f5f9;
color: #475569; color: #475569;
padding: 0.125rem 0.375rem; padding: 0.2rem 0.4rem;
border-radius: 9999px; border-radius: 9999px;
font-size: 0.65rem; font-size: 0.65rem;
font-weight: 500; font-weight: 500;
margin-bottom: 0.25rem; margin-bottom: 0.4rem;
} }
.timeout-badge { .timeout-badge {
background: #fef2f2; background: #fef2f2;
color: #dc2626; color: #dc2626;
border: 1px solid #fecaca; border: 1px solid #fecaca;
padding: 0.25rem; padding: 0.3rem;
border-radius: 0.25rem; border-radius: 0.25rem;
font-size: 0.65rem; font-size: 0.65rem;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
margin-bottom: 0.5rem; margin-bottom: 0.6rem;
} }
.description { .description {
color: #4b5563; color: #4b5563;
font-size: 0.65rem; font-size: 0.65rem;
margin-bottom: 0.5rem; margin-bottom: 0.6rem;
line-height: 1.4;
} }
.stats { .stats {
display: flex; display: flex;
gap: 0.5rem; gap: 0.6rem;
margin-bottom: 0.5rem; margin-bottom: 0.6rem;
} }
.stat-item { .stat-item {
flex: 1; flex: 1;
text-align: center; text-align: center;
padding: 0.375rem; padding: 0.5rem;
background: #f8fafc; background: #f8fafc;
border-radius: 0.25rem; border-radius: 0.25rem;
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;
} }
.stat-number { .stat-number {
font-size: 0.875rem; font-size: 0.9rem;
font-weight: bold; font-weight: bold;
color: #0f172a; color: #0f172a;
} }
.stat-label { .stat-label {
font-size: 0.6rem; font-size: 0.65rem;
color: #64748b; color: #64748b;
margin-top: 0.125rem; margin-top: 0.2rem;
} }
.score-section { .score-section {
margin-bottom: 0.75rem; margin-bottom: 0.8rem;
} }
.score-text { .score-text {
font-size: 0.65rem; font-size: 0.65rem;
color: #6b7280; color: #6b7280;
margin-bottom: 0.25rem; margin-bottom: 0.3rem;
} }
.progress-container { .progress-container {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.6rem;
} }
.progress-bar { .progress-bar {
flex: 1; flex: 1;
height: 0.375rem; height: 0.4rem;
background: #e5e7eb; background: #e5e7eb;
border-radius: 9999px; border-radius: 9999px;
overflow: hidden; overflow: hidden;
@@ -826,9 +825,9 @@ function AdminResultDetailContent() {
transition: width 0.3s ease; transition: width 0.3s ease;
} }
.score-number { .score-number {
font-size: 0.75rem; font-size: 0.8rem;
font-weight: bold; font-weight: bold;
min-width: 1.5rem; min-width: 1.8rem;
text-align: right; text-align: right;
} }
.logic-score { .logic-score {
@@ -840,13 +839,13 @@ function AdminResultDetailContent() {
.stats-grid { .stats-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 0.5rem; gap: 0.6rem;
margin-bottom: 0.75rem; margin-bottom: 0.8rem;
} }
.stat-box { .stat-box {
background: #f8fafc; background: #f8fafc;
border-radius: 0.375rem; border-radius: 0.375rem;
padding: 0.5rem; padding: 0.6rem;
text-align: center; text-align: center;
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;
} }
@@ -863,17 +862,17 @@ function AdminResultDetailContent() {
color: #3b82f6; color: #3b82f6;
} }
.level-section { .level-section {
margin-bottom: 0.5rem; margin-bottom: 0.6rem;
} }
.level-badge { .level-badge {
display: inline-block; display: inline-block;
background: #f1f5f9; background: #f1f5f9;
color: #475569; color: #475569;
padding: 0.125rem 0.5rem; padding: 0.2rem 0.5rem;
border-radius: 9999px; border-radius: 9999px;
font-size: 0.6rem; font-size: 0.65rem;
font-weight: 500; font-weight: 500;
margin-bottom: 0.5rem; margin-bottom: 0.6rem;
} }
.logic-badge { .logic-badge {
background: #fef2f2; background: #fef2f2;
@@ -886,42 +885,42 @@ function AdminResultDetailContent() {
.description { .description {
color: #4b5563; color: #4b5563;
font-size: 0.65rem; font-size: 0.65rem;
margin-bottom: 0.5rem; margin-bottom: 0.6rem;
line-height: 1.4; line-height: 1.4;
} }
.suggestion { .suggestion {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 0.25rem; gap: 0.3rem;
color: #374151; color: #374151;
font-size: 0.65rem; font-size: 0.65rem;
line-height: 1.4; line-height: 1.4;
} }
.suggestion-icon { .suggestion-icon {
width: 0.75rem; width: 0.8rem;
height: 0.75rem; height: 0.8rem;
color: #6b7280; color: #6b7280;
flex-shrink: 0; flex-shrink: 0;
margin-top: 0.125rem; margin-top: 0.15rem;
} }
.ability-grid { .ability-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 0.5rem; gap: 0.6rem;
margin-bottom: 0.75rem; margin-bottom: 0.8rem;
} }
.ability-card { .ability-card {
background: white; background: white;
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;
border-radius: 0.375rem; border-radius: 0.375rem;
padding: 0.5rem; padding: 0.6rem;
text-align: center; text-align: center;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
} }
.ability-icon { .ability-icon {
width: 1.25rem; width: 1.3rem;
height: 1.25rem; height: 1.3rem;
margin: 0 auto 0.25rem; margin: 0 auto 0.3rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -931,24 +930,24 @@ function AdminResultDetailContent() {
font-size: 0.65rem; font-size: 0.65rem;
font-weight: 600; font-weight: 600;
color: #374151; color: #374151;
margin-bottom: 0.25rem; margin-bottom: 0.3rem;
} }
.ability-score { .ability-score {
font-size: 1rem; font-size: 1.1rem;
font-weight: bold; font-weight: bold;
margin-bottom: 0.125rem; margin-bottom: 0.25rem;
} }
.ability-score.logic { color: #dc2626; } .ability-score.logic { color: #dc2626; }
.ability-score.creative { color: #f59e0b; } .ability-score.creative { color: #f59e0b; }
.ability-score.balance { color: #f59e0b; } .ability-score.balance { color: #f59e0b; }
.ability-status { .ability-status {
font-size: 0.6rem; font-size: 0.65rem;
color: #6b7280; color: #6b7280;
margin-bottom: 0.25rem; margin-bottom: 0.3rem;
} }
.progress-bar { .progress-bar {
width: 100%; width: 100%;
height: 0.25rem; height: 0.3rem;
background: #e5e7eb; background: #e5e7eb;
border-radius: 9999px; border-radius: 9999px;
overflow: hidden; overflow: hidden;
@@ -962,47 +961,52 @@ function AdminResultDetailContent() {
background: white; background: white;
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;
border-radius: 0.375rem; border-radius: 0.375rem;
padding: 0.75rem; padding: 0.8rem;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
margin-top: 0.8rem;
margin-bottom: 0;
} }
.suggestions h3 { .suggestions h3 {
margin: 0 0 0.5rem 0; margin: 0 0 0.6rem 0;
font-size: 0.875rem; font-size: 0.85rem;
font-weight: 600; font-weight: 600;
color: #0f172a; color: #0f172a;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
padding-bottom: 0.25rem; padding-bottom: 0.3rem;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.25rem; gap: 0.3rem;
} }
.suggestion-item { .suggestion-item {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 0.375rem; gap: 0.5rem;
margin-bottom: 0.375rem; margin-bottom: 0.4rem;
padding: 0.375rem; padding: 0.4rem;
background: #f8fafc; background: #f8fafc;
border-radius: 0.25rem; border-radius: 0.25rem;
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;
} }
.suggestion-item:last-child {
margin-bottom: 0;
}
.suggestion-number { .suggestion-number {
width: 1rem; width: 1.1rem;
height: 1rem; height: 1.1rem;
background: #3b82f6; background: #3b82f6;
color: white; color: white;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 0.6rem; font-size: 0.65rem;
font-weight: bold; font-weight: bold;
flex-shrink: 0; flex-shrink: 0;
} }
.suggestion-text { .suggestion-text {
color: #374151; color: #374151;
font-size: 0.65rem; font-size: 0.65rem;
line-height: 1.3; line-height: 1.4;
} }
.no-print { .no-print {
position: fixed; position: fixed;
@@ -1033,7 +1037,7 @@ function AdminResultDetailContent() {
@media print { @media print {
body { body {
background: white; background: white;
margin: 0.3cm; margin: 0.4cm;
padding: 0; padding: 0;
font-size: 0.7rem; font-size: 0.7rem;
} }
@@ -1044,7 +1048,7 @@ function AdminResultDetailContent() {
} }
@page { @page {
size: A4; size: A4;
margin: 0.3cm; margin: 0.4cm;
} }
} }
</style> </style>