Spaces:
Sleeping
Sleeping
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.
- 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 |
-
<
|
| 182 |
-
|
| 183 |
-
|
| 184 |
-
|
| 185 |
-
|
| 186 |
-
|
| 187 |
-
|
| 188 |
-
|
| 189 |
-
|
|
|
|
|
|
|
| 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.
|
| 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: #
|
|
|
|
| 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 |
/* 响应式适配 */
|