背景

src/vue_project/src/components/MainPage.vue

@@ -362,7 +362,10 @@
           <div class="steps-flow-container">
             <!-- 步骤1 -->
             <div class="step-item-container">
-              <div class="step-circle" :class="{ 'active': activeStep === 0, 'completed': stepResults[0] }">1</div>
+              <div class="step-circle" :class="{ 'active': activeStep === 0, 'completed': stepResults[0] }">
+                <div class="ripple-effect" v-if="activeStep === 0"></div>
+                1
+              </div>
               <div class="step-button-box" :class="{ 'active': activeStep === 0, 'completed': stepResults[0] }" @click="handleFileUploadClick">
                 <i class="el-icon-upload2"></i>
                 <div class="step-text">上传文件</div>
@@ -370,44 +373,56 @@
             </div>
             
             <!-- 连接线 -->
-            <div class="step-connector"></div>
+            <div class="step-connector" :class="{ 'active-connector': stepResults[0] }"></div>
             
             <!-- 步骤2 -->
             <div class="step-item-container">
-              <div class="step-circle" :class="{ 'active': activeStep === 1, 'completed': stepResults[1] }">2</div>
+              <div class="step-circle" :class="{ 'active': activeStep === 1, 'completed': stepResults[1] }">
+                <div class="ripple-effect" v-if="activeStep === 1"></div>
+                2
+              </div>
               <div class="step-button-box" :class="{ 'active': activeStep === 1, 'completed': stepResults[1], 'disabled': !stepResults[0] }" @click="goToStep(1)">
                 <div class="step-text">预处理</div>
               </div>
             </div>
             
             <!-- 连接线 -->
-            <div class="step-connector"></div>
+            <div class="step-connector" :class="{ 'active-connector': stepResults[1] }"></div>
             
             <!-- 步骤3 -->
             <div class="step-item-container">
-              <div class="step-circle" :class="{ 'active': activeStep === 2, 'completed': stepResults[2] }">3</div>
+              <div class="step-circle" :class="{ 'active': activeStep === 2, 'completed': stepResults[2] }">
+                <div class="ripple-effect" v-if="activeStep === 2"></div>
+                3
+              </div>
               <div class="step-button-box" :class="{ 'active': activeStep === 2, 'completed': stepResults[2], 'disabled': !stepResults[1] }" @click="goToStep(2)">
                 <div class="step-text">合并格式</div>
               </div>
             </div>
             
             <!-- 连接线 -->
-            <div class="step-connector"></div>
+            <div class="step-connector" :class="{ 'active-connector': stepResults[2] }"></div>
             
             <!-- 步骤4 -->
             <div class="step-item-container">
-              <div class="step-circle" :class="{ 'active': activeStep === 3, 'completed': stepResults[3] }">4</div>
+              <div class="step-circle" :class="{ 'active': activeStep === 3, 'completed': stepResults[3] }">
+                <div class="ripple-effect" v-if="activeStep === 3"></div>
+                4
+              </div>
               <div class="step-button-box" :class="{ 'active': activeStep === 3, 'completed': stepResults[3], 'disabled': !stepResults[2] }" @click="goToStep(3)">
                 <div class="step-text">单词纠错</div>
               </div>
             </div>
             
             <!-- 连接线 -->
-            <div class="step-connector"></div>
+            <div class="step-connector" :class="{ 'active-connector': stepResults[3] }"></div>
             
             <!-- 步骤5 -->
             <div class="step-item-container">
-              <div class="step-circle" :class="{ 'active': activeStep === 4, 'completed': stepResults[4] }">5</div>
+              <div class="step-circle" :class="{ 'active': activeStep === 4, 'completed': stepResults[4] }">
+                <div class="ripple-effect" v-if="activeStep === 4"></div>
+                5
+              </div>
               <div class="step-button-box" :class="{ 'active': activeStep === 4, 'completed': stepResults[4], 'disabled': !stepResults[3] }" @click="goToStep(4)">
                 <div class="step-text">大模型分析</div>
               </div>
@@ -619,16 +634,24 @@ export default {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  background: linear-gradient(180deg, #e6f7ff 0%, #ffffff 100%);
+  background-image: url('../assets/background.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  padding: 40px 20px;
+  align-items: center;
 }
 
 .header {
   text-align: center;
-  padding: 40px 0 20px;
-  background: linear-gradient(135deg, #1976d2 0%, #2196f3 100%);
+  padding: 30px 40px;
+  background: rgba(25, 118, 210, 0.85);
   color: white;
   margin-bottom: 30px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+  width: 80%;
+  max-width: 1200px;
 }
 
 .header h1 {
@@ -644,16 +667,21 @@ export default {
 
 .step-content {
   flex: 1;
-  max-width: 1200px;
+  width: 90%;
+  max-width: 1400px;
   margin: 0 auto;
-  padding: 0 20px;
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  padding: 30px;
+  margin-bottom: 30px;
 }
 
 .process-step {
   background-color: white;
   border-radius: 8px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-  padding: 20px;
+  padding: 25px;
   margin-bottom: 30px;
 }
 
@@ -724,21 +752,23 @@ export default {
 
 /* 底部步骤指示器样式 */
 .bottom-steps-container {
-  width: 100%;
-  margin-top: 30px;
+  width: 80%;
+  max-width: 1200px;
+  margin-top: 0;
+  margin-bottom: 40px;
 }
 
 .steps-background {
-  background-color: #f0f9ff;
-  padding: 60px 0 30px;
-  background-image: linear-gradient(to bottom, #87cefa 0%, #1e90ff 100%);
-  border-top: 1px solid #d1e9ff;
+  background-color: rgba(240, 249, 255, 0.85);
+  padding: 30px;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 .steps-wrapper {
-  max-width: 1200px;
+  width: 100%;
   margin: 0 auto;
-  padding: 20px;
+  padding: 0;
 }
 
 /* 新的流程步骤样式 */
@@ -757,10 +787,10 @@ export default {
 }
 
 .step-circle {
-  width: 60px;
-  height: 60px;
+  width: 70px;
+  height: 70px;
   border-radius: 50%;
-  background-color: #bdbdbd; /* 默认灰色 */
+  background-color: #CCCCCC; /* 默认灰色 */
   color: white;
   display: flex;
   justify-content: center;
@@ -768,32 +798,94 @@ export default {
   font-size: 28px;
   font-weight: bold;
   position: relative;
-  border: 2px solid white;
   transition: all 0.3s;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   margin-bottom: 15px;
   z-index: 2;
+  border: none;
+}
+
+.step-circle.active {
+  background-color: #87d068; /* 活动为亮绿色 */
+  box-shadow: 0 4px 8px rgba(103, 194, 58, 0.3);
 }
 
-.step-circle.active, .step-circle.completed {
-  background-color: #67c23a; /* 活动或已完成为绿色 */
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+.step-circle.completed {
+  background-color: #67c23a; /* 已完成为深绿色 */
 }
 
 .step-connector {
-  height: 2px;
-  background-color: rgba(255, 255, 255, 0.7);
+  height: 4px;
+  background-color: #E0E0E0;
   flex-grow: 1;
-  max-width: 60px;
+  width: 60px;
   margin: 0 5px;
   position: relative;
   top: -40px; /* 调整连接线的位置，使其与圆圈中心对齐 */
   z-index: 1;
 }
 
-/* 新的方框按钮样式 */
+.step-connector.active-connector {
+  background-color: #67c23a;
+}
+
+/* 波纹效果 */
+.ripple-effect {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: rgba(103, 194, 58, 0.6);
+  box-shadow: 0 0 15px rgba(103, 194, 58, 0.8);
+  animation: ripple 1.5s infinite ease-out;
+  z-index: 0;
+}
+
+.ripple-effect::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 3px solid rgba(103, 194, 58, 0.7);
+  animation: ripple-delay 1.5s infinite ease-out;
+}
+
+@keyframes ripple {
+  0% {
+    width: 85%;
+    height: 85%;
+    opacity: 1;
+  }
+  100% {
+    width: 170%;
+    height: 170%;
+    opacity: 0;
+  }
+}
+
+@keyframes ripple-delay {
+  0% {
+    width: 80%;
+    height: 80%;
+    opacity: 0.9;
+  }
+  100% {
+    width: 180%;
+    height: 180%;
+    opacity: 0;
+  }
+}
+
+/* 修改按钮方框样式 */
 .step-button-box {
-  background-color: #bdbdbd; /* 默认灰色 */
+  background-color: #CCCCCC; /* 默认灰色 */
   border: none;
   border-radius: 4px;
   padding: 15px 10px;
@@ -814,8 +906,12 @@ export default {
   transform: translateY(-2px);
 }
 
-.step-button-box.active, .step-button-box.completed {
-  background-color: #67c23a; /* 活动或已完成为绿色 */
+.step-button-box.active {
+  background-color: #87d068; /* 活动为亮绿色 */
+}
+
+.step-button-box.completed {
+  background-color: #67c23a; /* 已完成为深绿色 */
 }
 
 .step-button-box.disabled {