666ghj commited on
Commit
489df86
·
1 Parent(s): 86e2b37

Implement scroll functionality and enhance button styling in Home.vue

Browse files

- Added a scroll-to-bottom feature for improved navigation experience.
- Refactored the start simulation button layout by wrapping it in a new console section for better organization.
- Enhanced button styles with animations and improved disabled state appearance for a more engaging user interface.

Files changed (1) hide show
  1. frontend/src/views/Home.vue +51 -12
frontend/src/views/Home.vue CHANGED
@@ -42,7 +42,7 @@
42
  <img src="../assets/logo/MiroFish_logo_left.jpeg" alt="MiroFish Logo" class="hero-logo" />
43
  </div>
44
 
45
- <button class="scroll-down-btn">
46
  ↓
47
  </button>
48
  </div>
@@ -178,15 +178,17 @@
178
  </div>
179
 
180
  <!-- 启动按钮 -->
181
- <button
182
- class="start-engine-btn"
183
- @click="startSimulation"
184
- :disabled="!canSubmit || loading"
185
- >
186
- <span v-if="!loading">启动引擎</span>
187
- <span v-else>初始化中...</span>
188
- <span class="btn-arrow">→</span>
189
- </button>
 
 
190
  </div>
191
  </div>
192
  </section>
@@ -268,6 +270,14 @@ const removeFile = (index) => {
268
  files.value.splice(index, 1)
269
  }
270
 
 
 
 
 
 
 
 
 
271
  // 开始模拟
272
  const startSimulation = async () => {
273
  if (!canSubmit.value || loading.value) return
@@ -657,6 +667,10 @@ const startSimulation = async () => {
657
  padding: 20px;
658
  }
659
 
 
 
 
 
660
  .console-header {
661
  display: flex;
662
  justify-content: space-between;
@@ -803,17 +817,42 @@ const startSimulation = async () => {
803
  justify-content: space-between;
804
  align-items: center;
805
  cursor: pointer;
806
- transition: all 0.2s;
807
  letter-spacing: 1px;
 
 
 
 
 
 
 
 
 
808
  }
809
 
810
  .start-engine-btn:hover:not(:disabled) {
811
  background: var(--orange);
 
 
 
 
 
 
812
  }
813
 
814
  .start-engine-btn:disabled {
815
- background: #CCC;
 
816
  cursor: not-allowed;
 
 
 
 
 
 
 
 
 
817
  }
818
 
819
  /* 响应式适配 */
 
42
  <img src="../assets/logo/MiroFish_logo_left.jpeg" alt="MiroFish Logo" class="hero-logo" />
43
  </div>
44
 
45
+ <button class="scroll-down-btn" @click="scrollToBottom">
46
  ↓
47
  </button>
48
  </div>
 
178
  </div>
179
 
180
  <!-- 启动按钮 -->
181
+ <div class="console-section btn-section">
182
+ <button
183
+ class="start-engine-btn"
184
+ @click="startSimulation"
185
+ :disabled="!canSubmit || loading"
186
+ >
187
+ <span v-if="!loading">启动引擎</span>
188
+ <span v-else>初始化中...</span>
189
+ <span class="btn-arrow">→</span>
190
+ </button>
191
+ </div>
192
  </div>
193
  </div>
194
  </section>
 
270
  files.value.splice(index, 1)
271
  }
272
 
273
+ // 滚动到底部
274
+ const scrollToBottom = () => {
275
+ window.scrollTo({
276
+ top: document.body.scrollHeight,
277
+ behavior: 'smooth'
278
+ })
279
+ }
280
+
281
  // 开始模拟
282
  const startSimulation = async () => {
283
  if (!canSubmit.value || loading.value) return
 
667
  padding: 20px;
668
  }
669
 
670
+ .console-section.btn-section {
671
+ padding-top: 0;
672
+ }
673
+
674
  .console-header {
675
  display: flex;
676
  justify-content: space-between;
 
817
  justify-content: space-between;
818
  align-items: center;
819
  cursor: pointer;
820
+ transition: all 0.3s ease;
821
  letter-spacing: 1px;
822
+ position: relative;
823
+ overflow: hidden;
824
+ }
825
+
826
+ /* 可点击状态(非禁用) */
827
+ .start-engine-btn:not(:disabled) {
828
+ background: var(--black);
829
+ border: 1px solid var(--black);
830
+ animation: pulse-border 2s infinite;
831
  }
832
 
833
  .start-engine-btn:hover:not(:disabled) {
834
  background: var(--orange);
835
+ border-color: var(--orange);
836
+ transform: translateY(-2px);
837
+ }
838
+
839
+ .start-engine-btn:active:not(:disabled) {
840
+ transform: translateY(0);
841
  }
842
 
843
  .start-engine-btn:disabled {
844
+ background: #E5E5E5;
845
+ color: #999;
846
  cursor: not-allowed;
847
+ transform: none;
848
+ border: 1px solid #E5E5E5;
849
+ }
850
+
851
+ /* 引导动画:微妙的边框脉冲 */
852
+ @keyframes pulse-border {
853
+ 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); }
854
+ 70% { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0); }
855
+ 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
856
  }
857
 
858
  /* 响应式适配 */