diff --git a/src/pages/clazz/components/ClazzMatrixView.vue b/src/pages/clazz/components/ClazzMatrixView.vue index b20fc0f..46523db 100644 --- a/src/pages/clazz/components/ClazzMatrixView.vue +++ b/src/pages/clazz/components/ClazzMatrixView.vue @@ -1,86 +1,64 @@ @@ -202,133 +151,101 @@ export default defineComponent({ .matrix-wrapper { width: 100%; height: 100%; - font-size: 0.24rem; display: flex; flex-direction: column; + font-size: 0.24rem; + overflow: auto; } +/* ═══ 双行表头 ═══ */ .matrix-header { display: flex; flex-shrink: 0; position: sticky; top: 0; - background: #f7f8fa; z-index: 2; + background: #f7f8fa; border-bottom: 1px solid #e8e8e8; - .header-corner { - width: 1.2rem; + .header-col { flex-shrink: 0; - padding: 0.15rem 0; + width: 2.4rem; text-align: center; - font-weight: 600; - color: #666; - } - - .header-cell { - flex: 1; - text-align: center; - padding: 0.15rem 0; border-left: 1px solid #f0f0f0; + padding: 0.12rem 0.06rem; + + &:first-child { border-left: none; } .header-date { font-weight: 600; font-size: 0.26rem; + line-height: 1.5; } - .header-weekday { + .header-time { font-size: 0.22rem; - color: #999; + color: #888; + line-height: 1.4; } - - &:first-child { border-left: none; } } } +/* ═══ 表体 ═══ */ .matrix-body { + display: flex; flex: 1; - overflow-y: auto; + overflow: auto; - .slot-row { + .body-col { + flex-shrink: 0; + width: 2.4rem; + padding: 0.08rem; + border-left: 1px solid #f5f5f5; display: flex; - border-bottom: 1px solid #f0f0f0; + flex-direction: column; + gap: 0.06rem; - .slot-label { - width: 1.2rem; - flex-shrink: 0; - padding: 0.1rem; - text-align: center; - font-size: 0.22rem; - color: #666; - align-self: start; - padding-top: 0.25rem; - } + &:first-child { border-left: none; } + } - .slot-cell { - flex: 1; - min-height: 0.8rem; - padding: 0.06rem; - border-left: 1px solid #f5f5f5; - cursor: pointer; - transition: background-color 0.15s; + .event-lane { + display: flex; + gap: 0.06rem; + } - &:hover { - background-color: #f0f5ff; - } + .event-block { + flex: 1; + padding: 0.06rem 0.1rem; + border-radius: 0.06rem; + cursor: pointer; + overflow: hidden; + font-size: 0.22rem; + transition: box-shadow 0.15s; - &--today { - background-color: #fffbe6; - } + &:hover { box-shadow: 0 0.04rem 0.12rem rgba(0,0,0,0.15); } - &--past { - opacity: 0.6; - } + &--ghost { opacity: 0.55; border-style: dashed; } - &--empty { - // subtle indication - } - } + .ev-title { font-weight: 600; font-size: 0.24rem; } + .ev-time { font-size: 0.2rem; color: #666; } + .ev-teacher { font-size: 0.2rem; color: #555; margin-top: 0.02rem; } + .ev-students { font-size: 0.2rem; color: #777; } + } - .event-lane { - display: flex; - gap: 0.04rem; - margin-bottom: 0.04rem; - } + .slot-empty { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + min-height: 1rem; + color: #ccc; + font-size: 0.3rem; + cursor: pointer; + border: 1px dashed #eee; + border-radius: 0.06rem; - .event-block { - flex: 1; - padding: 0.04rem 0.08rem; - border-radius: 0.06rem; - cursor: pointer; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - font-size: 0.22rem; - transition: box-shadow 0.15s; - - &:hover { - box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.15); - } - - &--ghost { - opacity: 0.6; - border-style: dashed; - } - - .event-title { - font-weight: 500; - overflow: hidden; - text-overflow: ellipsis; - font-size: 0.22rem; - } - - .event-meta { - font-size: 0.18rem; - color: #666; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - line-height: 1.4; - } + &:hover { + background: #f0f5ff; + color: #3788d8; } } }