style: tighten H5 guards and legacy student UI

2026-07-02 02:57:43 +08:00
parent 0c27280f42
commit c74347a7a0
14 changed files with 567 additions and 85 deletions
--- a/apps/taro/src/pages/student/catalog/index.tsx
+++ b/apps/taro/src/pages/student/catalog/index.tsx
@@ -73,7 +73,7 @@ export default function StudentCatalogPage() {
  }

  return (
-    <View className='student-page'>
+    <View className='student-page catalog-page'>
      <View className='student-topbar'>
        <View className='student-title-block'>
          <Text className='student-kicker'>Question Bank</Text>
--- a/apps/taro/src/pages/student/checkout/index.tsx
+++ b/apps/taro/src/pages/student/checkout/index.tsx
@@ -198,7 +198,7 @@ export default function StudentCheckoutPage() {
  }

  return (
-    <View className='student-page'>
+    <View className='student-page checkout-page'>
      <View className='student-topbar'>
        <View className='student-title-block'>
          <Text className='student-kicker'>Checkout</Text>
--- a/apps/taro/src/pages/student/home/index.css
+++ b/apps/taro/src/pages/student/home/index.css
@@ -1,6 +1,11 @@
 .student-page {
  min-height: 100vh;
  padding: 28px;
+  background:
+    linear-gradient(to right, rgba(15, 23, 42, 0.032) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(15, 23, 42, 0.032) 1px, transparent 1px),
+    #f4f6f9;
+  background-size: 40px 40px;
 }

 .topbar {
@@ -68,27 +73,27 @@

 .ghost-button {
  flex: 0 0 auto;
-  width: 132px;
-  height: 64px;
+  width: 104px;
+  height: 48px;
  border: 1px solid var(--tiku-border);
-  border-radius: 999px;
+  border-radius: 12px;
  background: #fff;
  color: var(--tiku-primary);
-  font-size: 24px;
+  font-size: 18px;
  font-weight: 800;
-  line-height: 64px;
-  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.05);
+  line-height: 48px;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
 }

 .hero-band {
  position: relative;
  overflow: hidden;
  min-height: 280px;
-  margin-top: 34px;
+  margin-top: 24px;
  padding: 36px 32px;
-  border-radius: 30px;
+  border-radius: 24px;
  background: linear-gradient(135deg, #1152d4 0%, #2563eb 56%, #60a5fa 100%);
-  box-shadow: 0 18px 34px rgba(17, 82, 212, 0.2);
+  box-shadow: 0 14px 30px rgba(17, 82, 212, 0.2);
 }

 .hero-band::before,
@@ -182,10 +187,10 @@
 .home-stat {
  min-height: 126px;
  padding: 20px 18px;
-  border: 1px solid var(--tiku-border);
-  border-radius: 24px;
+  border: 1px solid #f1f5f9;
+  border-radius: 16px;
  background: #fff;
-  box-shadow: var(--tiku-shadow);
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
 }

 .home-stat-value {
@@ -209,13 +214,23 @@
 }

 .section-title {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 10px;
  margin-bottom: 18px;
  color: var(--tiku-text);
  font-size: 30px;
  font-weight: 900;
 }

+.section-title::before {
+  content: "";
+  width: 8px;
+  height: 24px;
+  border-radius: 999px;
+  background: #1152d4;
+}
+
 .entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -228,22 +243,35 @@
  min-height: 176px;
  padding: 24px;
  border: 0;
-  border-radius: 28px;
+  border-radius: 24px;
  color: #fff;
-  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
+  box-shadow: 0 8px 25px rgba(15, 23, 42, 0.1);
+  transition: transform 180ms ease, box-shadow 180ms ease;
 }

 .entry-tile::after {
  content: "";
  position: absolute;
-  right: -26px;
-  bottom: -38px;
-  width: 118px;
-  height: 118px;
+  right: -22px;
+  bottom: -22px;
+  width: 96px;
+  height: 96px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
 }

+.entry-tile::before {
+  content: "";
+  position: absolute;
+  right: 22px;
+  bottom: 24px;
+  width: 36px;
+  height: 36px;
+  border-right: 3px solid rgba(255, 255, 255, 0.46);
+  border-bottom: 3px solid rgba(255, 255, 255, 0.46);
+  transform: rotate(-45deg);
+}
+
 .entry-label {
  display: block;
  position: relative;
@@ -295,10 +323,10 @@
  gap: 16px;
  min-height: 104px;
  padding: 20px 22px;
-  border: 1px solid var(--tiku-border);
-  border-radius: 24px;
+  border: 1px solid #f1f5f9;
+  border-radius: 16px;
  background: #fff;
-  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.04);
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
 }

 .quick-name {
@@ -329,17 +357,17 @@
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
-    padding: 36px;
+    padding: 28px 32px 36px;
    padding-bottom: 48px;
  }

  .hero-band {
-    min-height: 320px;
-    padding: 44px;
+    min-height: 240px;
+    padding: 40px;
  }

  .hero-title {
-    font-size: 52px;
+    font-size: 44px;
  }

  .entry-grid {
--- a/apps/taro/src/pages/student/home/index.tsx
+++ b/apps/taro/src/pages/student/home/index.tsx
@@ -60,10 +60,10 @@ export default function StudentHomePage() {
        <View className='hero-content'>
          <Text className='hero-kicker'>今天也是元气满满的一天</Text>
          <Text className='hero-title'>继续你的备考之旅</Text>
-          <Text className='hero-copy'>刷题、错题、背单词、资料和会员权益已接入新 SaaS 后端。</Text>
+          <Text className='hero-copy'>已经连续学习的每一天，都会让你离目标院校更近一步。</Text>
          <View className='hero-actions'>
            <Button className='hero-primary' onClick={() => Taro.navigateTo({ url: '/pages/student/catalog/index' })}>开始刷题</Button>
-            <Button className='hero-secondary' onClick={() => Taro.navigateTo({ url: '/pages/student/profile/index' })}>学习报告</Button>
+            <Button className='hero-secondary' onClick={() => Taro.navigateTo({ url: '/pages/student/reports/index' })}>学习报告</Button>
          </View>
        </View>
      </View>
--- a/apps/taro/src/pages/student/practice/index.tsx
+++ b/apps/taro/src/pages/student/practice/index.tsx
@@ -476,7 +476,7 @@ export default function StudentPracticePage() {
  }

  return (
-    <View className='student-page'>
+    <View className='student-page practice-page'>
      <View className='student-topbar'>
        <View className='student-title-block'>
          <Text className='student-kicker'>{session ? `${index + 1}/${questions.length || session.questionCount}` : 'Practice'}</Text>
--- a/apps/taro/src/pages/student/profile/index.tsx
+++ b/apps/taro/src/pages/student/profile/index.tsx
@@ -342,7 +342,7 @@ export default function StudentProfilePage() {
  const avatarPreset = profile?.avatarPreset || profile?.avatar?.preset || 'male';

  return (
-    <View className='student-page'>
+    <View className='student-page profile-page'>
      <View className='student-topbar'>
        <View className='student-title-block'>
          <Text className='student-kicker'>Profile</Text>
--- a/apps/taro/src/pages/student/reports/index.tsx
+++ b/apps/taro/src/pages/student/reports/index.tsx
@@ -66,7 +66,7 @@ export default function StudentReportsPage() {
  const current = report || reports[0] || null;

  return (
-    <View className='student-page'>
+    <View className='student-page reports-page'>
      <View className='student-topbar'>
        <View className='student-title-block'>
          <Text className='student-kicker'>Report</Text>
--- a/apps/taro/src/pages/student/review/index.tsx
+++ b/apps/taro/src/pages/student/review/index.tsx
@@ -59,7 +59,7 @@ export default function StudentReviewPage() {
  const items = mode === 'wrong' ? wrongItems : favoriteItems;

  return (
-    <View className='student-page'>
+    <View className='student-page review-page'>
      <View className='student-topbar'>
        <View className='student-title-block'>
          <Text className='student-kicker'>Review</Text>
--- a/apps/taro/src/pages/student/student.css
+++ b/apps/taro/src/pages/student/student.css
@@ -1370,6 +1370,418 @@
  flex: 0 0 auto;
 }

+/* Legacy web visual polish shared by student sub-pages. */
+.student-page:not(.login-page) {
+  background:
+    linear-gradient(to right, rgba(15, 23, 42, 0.032) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(15, 23, 42, 0.032) 1px, transparent 1px),
+    #f4f6f9;
+  background-size: 40px 40px;
+}
+
+.student-topbar {
+  padding: 4px 0 2px;
+}
+
+.student-kicker {
+  color: #1152d4;
+  font-size: 18px;
+  font-weight: 900;
+}
+
+.student-title {
+  color: #111827;
+  font-size: 36px;
+  font-weight: 950;
+}
+
+.student-subtitle {
+  max-width: 820px;
+  color: #64748b;
+  font-size: 22px;
+}
+
+.section-block,
+.section {
+  margin-top: 28px;
+}
+
+.section-heading,
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+  color: #111827;
+  font-size: 26px;
+  font-weight: 920;
+}
+
+.section-heading::before,
+.section-title::before {
+  content: "";
+  width: 8px;
+  height: 24px;
+  border-radius: 999px;
+  background: #1152d4;
+}
+
+.quiet-panel,
+.report-panel,
+.metric,
+.list-row,
+.profile-card,
+.asset-preview-panel,
+.scoreline-filter-panel,
+.trend-chart {
+  border-color: #f1f5f9;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
+}
+
+.quiet-panel,
+.report-panel {
+  padding: 24px;
+}
+
+.list-row {
+  position: relative;
+  padding: 18px 20px;
+  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
+}
+
+.list-row:nth-child(3n + 1),
+.list-row:nth-child(3n + 2),
+.list-row:nth-child(3n) {
+  border-color: #f1f5f9;
+}
+
+.list-row.active {
+  border-color: #bfdbfe;
+  background: #eff6ff;
+  box-shadow: 0 8px 18px rgba(17, 82, 212, 0.08);
+}
+
+.row-main {
+  color: #111827;
+  font-size: 25px;
+  font-weight: 850;
+}
+
+.row-meta {
+  color: #64748b;
+  font-size: 20px;
+}
+
+.metric {
+  min-height: 116px;
+  padding: 20px;
+}
+
+.compact-metric {
+  min-height: 96px;
+  padding: 16px;
+}
+
+.metric-value {
+  color: #111827;
+  font-size: 31px;
+  font-weight: 950;
+}
+
+.metric-label {
+  color: #94a3b8;
+  font-size: 18px;
+  font-weight: 760;
+}
+
+.primary-button,
+.secondary-button,
+.pill-button,
+.danger-button {
+  height: 56px;
+  border-radius: 12px;
+  font-size: 21px;
+  font-weight: 850;
+  line-height: 56px;
+}
+
+.primary-button {
+  background: #1152d4;
+  box-shadow: 0 8px 18px rgba(17, 82, 212, 0.16);
+}
+
+.secondary-button,
+.pill-button {
+  border-color: #e5e7eb;
+  color: #475569;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
+}
+
+.secondary-button.active,
+.pill-button.active {
+  border-color: #1152d4;
+  background: #eff6ff;
+  color: #1152d4;
+}
+
+.danger-button {
+  border-color: #fecaca;
+  background: #fff1f2;
+  color: #dc2626;
+}
+
+.status-badge {
+  min-height: 32px;
+  padding: 0 10px;
+  border-radius: 8px;
+  font-size: 18px;
+  font-weight: 850;
+}
+
+.input,
+.textarea {
+  border-color: #e5e7eb;
+  border-radius: 12px;
+  background: #fff;
+  font-size: 22px;
+}
+
+.empty-state {
+  border-color: #dbeafe;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.78);
+  color: #64748b;
+  font-size: 21px;
+}
+
+.catalog-page .toolbar {
+  padding: 14px;
+  border: 1px solid #f1f5f9;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
+}
+
+.catalog-page .grid-two .metric {
+  min-height: 156px;
+  border-left: 4px solid #1152d4;
+}
+
+.catalog-page .grid-two .metric:nth-child(2n) {
+  border-left-color: #10b981;
+}
+
+.catalog-page .list-row::after,
+.review-page .list-row::after,
+.assets-page .list-row::after,
+.video-page .list-row::after {
+  content: "›";
+  position: absolute;
+  right: 18px;
+  top: 50%;
+  color: #cbd5e1;
+  font-size: 34px;
+  font-weight: 400;
+  transform: translateY(-50%);
+}
+
+.catalog-page .list-row,
+.assets-page .list-row {
+  padding-right: 52px;
+}
+
+.practice-page {
+  max-width: 960px;
+}
+
+.practice-page .student-topbar {
+  align-items: flex-start;
+}
+
+.practice-page .student-title {
+  font-size: 32px;
+}
+
+.practice-page > .quiet-panel:first-of-type {
+  border-color: #bfdbfe;
+  background: linear-gradient(135deg, #eff6ff, #fff);
+}
+
+.practice-page .list-stack > .quiet-panel:first-child {
+  padding: 26px;
+  border-radius: 18px;
+}
+
+.practice-page .list-stack > .quiet-panel:first-child .rich-paragraph {
+  color: #111827;
+  font-size: 30px;
+  font-weight: 760;
+  line-height: 1.7;
+}
+
+.practice-page .list-row {
+  padding: 16px;
+  border-width: 2px;
+  border-color: #f3f4f6;
+  border-radius: 14px;
+  background: rgba(248, 250, 252, 0.72);
+  box-shadow: none;
+}
+
+.practice-page .list-row.active {
+  border-color: #bfdbfe;
+  background: rgba(239, 246, 255, 0.9);
+}
+
+.practice-page .option-prefix {
+  flex-basis: 36px;
+  width: 36px;
+  height: 36px;
+  border: 1px solid #e5e7eb;
+  border-radius: 999px;
+  background: #fff;
+  color: #64748b;
+  font-size: 18px;
+  line-height: 36px;
+}
+
+.practice-page .list-row.active .option-prefix {
+  border-color: #1152d4;
+  background: #1152d4;
+  color: #fff;
+}
+
+.practice-page .answer-detail,
+.reports-page .answer-detail {
+  border-color: #bbf7d0;
+  background: linear-gradient(135deg, #ecfdf5, #fff);
+}
+
+.practice-page .answer-detail-label,
+.reports-page .answer-detail-label {
+  color: #047857;
+}
+
+.answer-sheet {
+  gap: 10px;
+  padding: 16px;
+  border: 1px solid #f1f5f9;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
+}
+
+.answer-card {
+  height: 46px;
+  border-radius: 12px;
+  font-size: 18px;
+  line-height: 46px;
+}
+
+.reports-page .report-panel,
+.checkout-page .quiet-panel,
+.profile-page .profile-card {
+  border-color: #bfdbfe;
+  background: linear-gradient(135deg, #eff6ff, #fff 74%);
+}
+
+.reports-page .report-panel > .metric-value,
+.checkout-page .amount-text {
+  color: #1152d4;
+  font-size: 42px;
+  font-weight: 950;
+}
+
+.checkout-page .list-row.active {
+  border-color: #1152d4;
+  background: linear-gradient(135deg, #eff6ff, #fff);
+}
+
+.checkout-page .list-row.active::before {
+  content: "推荐";
+  position: absolute;
+  right: 18px;
+  top: 16px;
+  padding: 3px 9px;
+  border-radius: 7px;
+  background: #facc15;
+  color: #1f2937;
+  font-size: 15px;
+  font-weight: 900;
+}
+
+.profile-page > .grid-two {
+  margin-top: 18px;
+}
+
+.profile-avatar {
+  border-radius: 999px;
+}
+
+.avatar-choice {
+  border-radius: 14px;
+  background: #fff;
+}
+
+.trend-chart {
+  gap: 8px;
+  padding: 18px;
+}
+
+.trend-bar-track {
+  height: 112px;
+}
+
+.assets-page .list-row {
+  min-height: 128px;
+}
+
+.asset-preview-frame {
+  border-color: #f1f5f9;
+  background: #f8fafc;
+}
+
+.asset-security-strip {
+  border-color: #dbeafe;
+  background: #eff6ff;
+}
+
+.notifications-page .notification-row.active,
+.profile-page .notification-row.active {
+  border-color: #bfdbfe;
+  background: #eff6ff;
+}
+
+.notifications-page .notification-summary-grid .metric:first-child .metric-value,
+.profile-page .notification-toolbar + .list-stack .notification-row.active .row-main {
+  color: #1152d4;
+}
+
+.vocabulary-card {
+  border-color: #f1f5f9;
+  border-radius: 20px;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
+}
+
+.vocabulary-card.revealed {
+  border-color: #bfdbfe;
+  background: linear-gradient(135deg, #eff6ff, #fff);
+}
+
+.vocabulary-word {
+  color: #111827;
+  font-size: 58px;
+  font-weight: 950;
+}
+
+.vocabulary-answer {
+  border-color: #f1f5f9;
+  border-radius: 16px;
+  background: #f8fafc;
+}
+
@media (min-width: 900px) {
  .student-page {
    width: 100%;
@@ -1387,27 +1799,27 @@
  }

  .student-topbar {
-    padding: 24px 28px;
-    border: 1px solid rgba(226, 232, 240, 0.9);
-    border-radius: 28px;
+    padding: 20px 24px;
+    border: 1px solid #f1f5f9;
+    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
-    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  }

  .student-page > .toolbar,
  .student-page > .section-block > .toolbar {
    padding: 14px;
    border: 1px solid var(--tiku-border);
-    border-radius: 24px;
+    border-radius: 16px;
    background: #fff;
-    box-shadow: var(--tiku-shadow);
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  }

  .quiet-panel,
  .report-panel,
  .scoreline-filter-panel,
  .asset-preview-panel {
-    border-radius: 28px;
+    border-radius: 18px;
  }

  .answer-sheet {
@@ -1430,6 +1842,13 @@
  .asset-preview-panel {
    padding: 30px;
  }
+
+  .profile-page > .grid-two,
+  .reports-page .grid-two,
+  .notifications-page .notification-summary-grid,
+  .vocabulary-stats-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
 }

@media (max-width: 420px) {
@@ -1480,4 +1899,13 @@
    min-height: 520px;
    height: 520px;
  }
+
+  .practice-page .toolbar.wrap {
+    gap: 10px;
+  }
+
+  .reports-page .report-panel > .metric-value,
+  .checkout-page .amount-text {
+    font-size: 36px;
+  }
 }
--- a/apps/taro/src/pages/student/video/index.tsx
+++ b/apps/taro/src/pages/student/video/index.tsx
@@ -41,7 +41,7 @@ export default function StudentVideoPage() {
  const playUrl = playback?.playback?.url;

  return (
-    <View className='student-page'>
+    <View className='student-page video-page'>
      <View className='student-topbar'>
        <View className='student-title-block'>
          <Text className='student-kicker'>Video</Text>