forked from wangziqi/gongxue-base
feat: redesign teacher attendance workspace
This commit is contained in:
@@ -66,6 +66,102 @@
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.teacher-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 14px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
box-shadow: 0 5px 18px rgb(23 32 51 / 4%);
|
||||
}
|
||||
|
||||
.teacher-topbar-select {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.teacher-workspace-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 168px minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.teacher-filter-rail {
|
||||
position: sticky;
|
||||
top: 16px;
|
||||
align-self: start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
background: #fff;
|
||||
box-shadow: 0 5px 18px rgb(23 32 51 / 4%);
|
||||
}
|
||||
|
||||
.teacher-filter-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.teacher-filter-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.teacher-filter-hint {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.teacher-main-panel {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.current-lesson-card {
|
||||
margin-bottom: 18px;
|
||||
border: 1px solid #d8e6fb;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(120deg, #f7fbff 0%, #fff 70%);
|
||||
}
|
||||
|
||||
.current-lesson-card .ant-card-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.current-lesson-copy > span {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.current-lesson-copy h2 {
|
||||
margin: 4px 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.current-lesson-copy p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.current-lesson-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.teacher-overview {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@@ -458,7 +554,8 @@
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.attendance-hero,
|
||||
.archive-toolbar {
|
||||
.archive-toolbar,
|
||||
.teacher-topbar {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -494,6 +591,23 @@
|
||||
grid-column: 2 / -1;
|
||||
padding: 14px 0 0;
|
||||
}
|
||||
|
||||
.teacher-workspace-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.teacher-filter-rail {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.current-lesson-card .ant-card-body {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.current-lesson-actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
@@ -566,3 +680,502 @@
|
||||
color: #8c8c8c;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Student attendance center — adapted from the provided class overview reference */
|
||||
.student-attendance-center {
|
||||
--student-bg: #f4f7f7;
|
||||
--student-surface: #ffffff;
|
||||
--student-soft: #f7faf9;
|
||||
--student-ink: #17201e;
|
||||
--student-muted: #66736f;
|
||||
--student-quiet: #8a9692;
|
||||
--student-line: #e1e8e5;
|
||||
--student-primary: #157a65;
|
||||
--student-primary-soft: #e8f4f0;
|
||||
min-height: calc(100vh - 64px);
|
||||
margin: -24px;
|
||||
padding: 0 24px 28px;
|
||||
background: var(--student-bg);
|
||||
color: var(--student-ink);
|
||||
}
|
||||
|
||||
.student-center-topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 12;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
min-height: 60px;
|
||||
margin: 0 -24px 18px;
|
||||
padding: 0 24px;
|
||||
border-bottom: 1px solid var(--student-line);
|
||||
background: rgb(255 255 255 / 96%);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.student-center-title {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.student-center-title h1 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.student-center-title span,
|
||||
.student-sync-status {
|
||||
color: var(--student-quiet);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.student-center-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.student-sync-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.student-sync-status i {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #2f9c78;
|
||||
}
|
||||
|
||||
.student-filter-panel {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(260px, 1.4fr) repeat(4, minmax(150px, 1fr)) auto;
|
||||
gap: 12px;
|
||||
align-items: end;
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--student-line);
|
||||
border-radius: 10px;
|
||||
background: var(--student-surface);
|
||||
}
|
||||
|
||||
.student-filter-field {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.student-filter-field label {
|
||||
color: var(--student-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.student-filter-field .ant-picker,
|
||||
.student-filter-field .ant-select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.student-filter-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.student-class-overview {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.student-class-identity,
|
||||
.student-metric-strip,
|
||||
.student-workspace,
|
||||
.student-record-card {
|
||||
border: 1px solid var(--student-line);
|
||||
border-radius: 10px;
|
||||
background: var(--student-surface);
|
||||
}
|
||||
|
||||
.student-class-identity {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 156px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.student-class-identity h2 {
|
||||
margin: 0 0 5px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.student-class-identity span {
|
||||
color: var(--student-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.student-teacher-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.student-teacher-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
min-width: 150px;
|
||||
padding: 9px;
|
||||
border-radius: 8px;
|
||||
background: var(--student-soft);
|
||||
}
|
||||
|
||||
.student-teacher-item .ant-avatar {
|
||||
color: var(--student-primary);
|
||||
background: var(--student-primary-soft);
|
||||
}
|
||||
|
||||
.student-teacher-item strong,
|
||||
.student-teacher-item span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.student-teacher-item strong {
|
||||
margin-top: 2px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.student-metric-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(82px, 1fr));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.student-metric-card {
|
||||
appearance: none;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 6px;
|
||||
min-height: 156px;
|
||||
padding: 16px 12px;
|
||||
border: 0;
|
||||
border-right: 1px solid var(--student-line);
|
||||
background: #fff;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.student-metric-card:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.student-metric-card:hover,
|
||||
.student-metric-card.active {
|
||||
background: var(--student-primary-soft);
|
||||
}
|
||||
|
||||
.student-metric-icon {
|
||||
display: inline-grid;
|
||||
width: max-content;
|
||||
min-width: 34px;
|
||||
height: 26px;
|
||||
place-items: center;
|
||||
padding: 0 7px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.student-metric-card strong {
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.student-metric-card small {
|
||||
color: var(--student-muted);
|
||||
}
|
||||
|
||||
.student-workspace {
|
||||
margin-bottom: 16px;
|
||||
padding: 0 18px 20px;
|
||||
}
|
||||
|
||||
.student-workspace-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
min-height: 70px;
|
||||
border-bottom: 1px solid var(--student-line);
|
||||
}
|
||||
|
||||
.student-workspace-header h3 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.student-workspace-header span {
|
||||
color: var(--student-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.student-workspace-tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.student-workspace-tools .ant-input-search {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.student-legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 12px 0;
|
||||
color: var(--student-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.student-legend span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.student-legend i {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.student-legend i.is-present { background: #2f9c78; }
|
||||
.student-legend i.is-late { background: #d78a18; }
|
||||
.student-legend i.is-leave { background: #397bbf; }
|
||||
.student-legend i.is-absent { background: #d44d4d; }
|
||||
.student-legend i.is-pending { background: #8a9692; }
|
||||
|
||||
.student-legend em {
|
||||
color: var(--student-quiet);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.student-card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.student-attendance-card {
|
||||
appearance: none;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
min-height: 96px;
|
||||
padding: 13px;
|
||||
border: 1px solid var(--student-line);
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
|
||||
}
|
||||
|
||||
.student-attendance-card:hover,
|
||||
.student-attendance-card.selected {
|
||||
transform: translateY(-1px);
|
||||
border-color: #91c8b9;
|
||||
box-shadow: 0 8px 20px rgb(24 44 38 / 8%);
|
||||
}
|
||||
|
||||
.student-attendance-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.student-attendance-head strong {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.student-attendance-head small {
|
||||
color: var(--student-quiet);
|
||||
}
|
||||
|
||||
.student-status-blocks {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.student-status-block {
|
||||
display: grid;
|
||||
min-height: 28px;
|
||||
place-items: center;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.student-record-card {
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.student-record-card .ant-card-body {
|
||||
padding: 0 18px 14px;
|
||||
}
|
||||
|
||||
.student-detail-panel {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.student-detail-profile {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding-bottom: 18px;
|
||||
border-bottom: 1px solid var(--student-line);
|
||||
}
|
||||
|
||||
.student-detail-profile h4 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.student-detail-profile p,
|
||||
.student-detail-rate span {
|
||||
margin: 0;
|
||||
color: var(--student-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.student-detail-rate {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.student-detail-rate strong {
|
||||
display: block;
|
||||
color: var(--student-primary);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.student-detail-rates {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.student-detail-rates > div {
|
||||
padding: 12px 8px;
|
||||
border-radius: 8px;
|
||||
background: var(--student-soft);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.student-detail-rates strong,
|
||||
.student-detail-rates span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.student-detail-rates span {
|
||||
margin-top: 4px;
|
||||
color: var(--student-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.student-detail-section h5 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.student-detail-timeline {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.student-detail-timeline > div {
|
||||
display: grid;
|
||||
grid-template-columns: 64px 96px 1fr auto;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--student-line);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.student-detail-timeline > div > span:first-child {
|
||||
color: var(--student-muted);
|
||||
}
|
||||
|
||||
.student-trend-bars {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: 8px;
|
||||
height: 110px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
background: var(--student-soft);
|
||||
}
|
||||
|
||||
.student-trend-bars i {
|
||||
flex: 1;
|
||||
min-height: 18px;
|
||||
border-radius: 5px 5px 0 0;
|
||||
background: linear-gradient(180deg, #56bea3, #157a65);
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.student-filter-panel,
|
||||
.student-class-overview {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.student-filter-actions {
|
||||
grid-column: 1 / -1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.student-metric-strip {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.student-attendance-center {
|
||||
margin: -16px;
|
||||
padding: 0 16px 22px;
|
||||
}
|
||||
|
||||
.student-center-topbar,
|
||||
.student-workspace-header,
|
||||
.student-center-actions,
|
||||
.student-legend {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.student-filter-panel,
|
||||
.student-class-overview {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.student-workspace-tools,
|
||||
.student-workspace-tools .ant-input-search {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user