优化登录与任务管理相关页面交互

src/components/Welcome.vue

@@ -9,98 +9,113 @@ const startReview = () => {
   router.push("/review");
 };
 </script>
+
 <template>
-  <el-container class="container">
-    <el-header class="header">
-      欢迎回来，今天也稳步推进学习计划
-    </el-header>
+  <section class="welcome-page">
+    <div class="welcome-banner surface-card">
+      <div>
+        <h1 class="page-title">欢迎回来，准备好继续学习了吗？</h1>
+        <p class="page-subtitle">
+          先挑选任务开始一次会话，再在复习页回顾你的学习轨迹。
+        </p>
+      </div>
+      <el-tag type="success" effect="dark" size="large">今日模式：稳步推进</el-tag>
+    </div>
 
+    <div class="quick-grid">
+      <article class="quick-card surface-card">
+        <h3>学习会话</h3>
+        <p>进入任务列表，选择当前最重要的一项并开始学习计时。</p>
+        <el-button type="success" size="large" @click="startStudy">开始学习</el-button>
+      </article>
 
-    <el-main>
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <el-card class="progress-card" shadow="always">
-            <div class="progress-text">学习进度总揽</div>
-          </el-card>
-        </el-col>
+      <article class="quick-card surface-card">
+        <h3>复习回看</h3>
+        <p>查看学习报告与残片数量，明确哪些内容需要优先复习。</p>
+        <el-button plain type="success" size="large" @click="startReview">开始复习</el-button>
+      </article>
+    </div>
 
-        <el-col :span="3">
-          <div class="button-group">
-            <el-button type="success" size="large" @click="startStudy" plain>开始学习</el-button>
-            <el-button type="primary" size="large" @click="startReview" plain>开始复习</el-button>
-          </div>
-        </el-col>
-      </el-row>
-    </el-main>
-  </el-container>
+    <div class="tips-board surface-card">
+      <h3>建议流程</h3>
+      <ol>
+        <li>进入学习页，确认任务材料地址与优先级。</li>
+        <li>开始会话并在休息时记录学习残片。</li>
+        <li>结束会话后填写总结，再回到复习页检视数据。</li>
+      </ol>
+    </div>
+  </section>
 </template>
 
 <style scoped>
-*{
-  margin: 0px;
-  /*padding: 0;*/
-}
-.container {
-  min-height: 100vh;
-  font-family: "Helvetica Neue", Arial, sans-serif;
-}
-
-.header {
-  text-align: center;
-  font-size: 16px;
-  font-weight: bold;
-  border-bottom: 1px solid #ebeef5;
-  padding: 20px;
-}
-
-.progress-card {
-  height: 400px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.progress-text {
-  font-size: 18px;
-  color: #333;
-}
-
-.button-group {
+.welcome-page {
   display: flex;
   flex-direction: column;
-  gap: 20px;
-  margin-top: 80px;
-  align-items: center;
-}
-.button-group .el-button {
-  margin-left: 0;
+  gap: 16px;
 }
 
-
- /*滚动样式*/
-.marquee-wrapper {
-  overflow: hidden;
-  white-space: nowrap;
-  position: relative;
-  height: 40px;
+.welcome-banner {
+  padding: 20px 22px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
 }
 
-.marquee-content {
-  display: inline-block;
-  position: absolute;
-  white-space: nowrap;
-  will-change: transform;
-  animation: scroll-left 15s linear infinite;
-  font-size: 16px;
-  font-weight: bold;
+.quick-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
 }
 
-@keyframes scroll-left {
-  0% {
-    transform: translateX(100%);
+.quick-card {
+  padding: 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.quick-card h3 {
+  margin: 0;
+  color: var(--green-900);
+}
+
+.quick-card p {
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+.quick-card .el-button {
+  margin-top: auto;
+  width: 100%;
+}
+
+.tips-board {
+  padding: 20px 22px;
+}
+
+.tips-board h3 {
+  margin: 0;
+  color: var(--green-900);
+}
+
+.tips-board ol {
+  margin: 10px 0 0;
+  padding-left: 20px;
+  color: var(--text-secondary);
+}
+
+.tips-board li + li {
+  margin-top: 8px;
+}
+
+@media (max-width: 900px) {
+  .welcome-banner {
+    flex-direction: column;
   }
-  100% {
-    transform: translateX(-100%);
+
+  .quick-grid {
+    grid-template-columns: 1fr;
   }
 }
 </style>