feat: add scoreline dynamic filters

2026-06-30 18:49:32 +08:00
parent 2f9763d352
commit ba737d41f5
14 changed files with 795 additions and 43 deletions
--- a/apps/taro/src/pages/student/student.css
+++ b/apps/taro/src/pages/student/student.css
@@ -1000,3 +1000,178 @@
  border-radius: 8px;
  background: #f8fafc;
 }
+
+.scoreline-filter-panel {
+  padding: 24px;
+  border: 1px solid #dbe3ee;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.scoreline-filter-group {
+  margin-top: 18px;
+}
+
+.scoreline-filter-label {
+  display: block;
+  margin-bottom: 10px;
+  color: #334155;
+  font-size: 22px;
+  font-weight: 820;
+  line-height: 1.25;
+}
+
+.scoreline-chip-row {
+  display: flex;
+  gap: 10px;
+  overflow-x: auto;
+  padding-bottom: 8px;
+}
+
+.scoreline-chip-row.compact {
+  flex-wrap: wrap;
+  overflow-x: visible;
+  padding-bottom: 0;
+}
+
+.scoreline-chip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  max-width: 320px;
+  min-width: 112px;
+  height: 58px;
+  padding: 0 16px;
+  border: 1px solid #dbe3ee;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.scoreline-chip.small {
+  min-width: 96px;
+  height: 52px;
+  padding: 0 14px;
+}
+
+.scoreline-chip.active {
+  border-color: #2563eb;
+  background: #eff6ff;
+}
+
+.scoreline-chip.warn {
+  border-color: #f59e0b;
+  background: #fffbeb;
+}
+
+.scoreline-chip-text {
+  min-width: 0;
+  color: #0f172a;
+  font-size: 22px;
+  font-weight: 760;
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.scoreline-chip.active .scoreline-chip-text {
+  color: #1d4ed8;
+}
+
+.scoreline-field-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.scoreline-field-filter {
+  min-width: 0;
+}
+
+.scoreline-input {
+  box-sizing: border-box;
+  height: 64px;
+  font-size: 24px;
+}
+
+.scoreline-search-button {
+  margin-top: 20px;
+}
+
+.scoreline-trend-strip {
+  display: flex;
+  gap: 12px;
+  overflow-x: auto;
+  padding-bottom: 8px;
+}
+
+.scoreline-trend-item {
+  flex: 0 0 230px;
+  min-height: 116px;
+  padding: 18px;
+  border: 1px solid #bfdbfe;
+  border-radius: 8px;
+  background: #f8fbff;
+}
+
+.scoreline-trend-year {
+  display: block;
+  color: #1d4ed8;
+  font-size: 24px;
+  font-weight: 850;
+  line-height: 1.25;
+}
+
+.scoreline-trend-value {
+  display: block;
+  margin-top: 8px;
+  color: #334155;
+  font-size: 20px;
+  line-height: 1.35;
+  word-break: break-word;
+}
+
+.scoreline-field-chip-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.scoreline-field-chip {
+  min-width: 0;
+  min-height: 74px;
+  padding: 12px 14px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+
+.scoreline-field-name {
+  display: block;
+  color: #64748b;
+  font-size: 19px;
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.scoreline-field-value {
+  display: block;
+  margin-top: 4px;
+  color: #0f172a;
+  font-size: 23px;
+  font-weight: 820;
+  line-height: 1.25;
+  word-break: break-word;
+}
+
+@media (max-width: 640px) {
+  .scoreline-field-grid,
+  .scoreline-field-chip-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}