Implement scroll functionality and enhance button styling in Home.vue

- 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.
This commit is contained in:
666ghj 2025-12-10 16:28:30 +08:00
parent 81b3fb3195
commit 81e2f3d33d

View file

@ -42,7 +42,7 @@
<img src="../assets/logo/MiroFish_logo_left.jpeg" alt="MiroFish Logo" class="hero-logo" />
</div>
<button class="scroll-down-btn">
<button class="scroll-down-btn" @click="scrollToBottom">
</button>
</div>
@ -178,15 +178,17 @@
</div>
<!-- 启动按钮 -->
<button
class="start-engine-btn"
@click="startSimulation"
:disabled="!canSubmit || loading"
>
<span v-if="!loading">启动引擎</span>
<span v-else>初始化中...</span>
<span class="btn-arrow"></span>
</button>
<div class="console-section btn-section">
<button
class="start-engine-btn"
@click="startSimulation"
:disabled="!canSubmit || loading"
>
<span v-if="!loading">启动引擎</span>
<span v-else>初始化中...</span>
<span class="btn-arrow"></span>
</button>
</div>
</div>
</div>
</section>
@ -268,6 +270,14 @@ const removeFile = (index) => {
files.value.splice(index, 1)
}
//
const scrollToBottom = () => {
window.scrollTo({
top: document.body.scrollHeight,
behavior: 'smooth'
})
}
//
const startSimulation = async () => {
if (!canSubmit.value || loading.value) return
@ -657,6 +667,10 @@ const startSimulation = async () => {
padding: 20px;
}
.console-section.btn-section {
padding-top: 0;
}
.console-header {
display: flex;
justify-content: space-between;
@ -803,17 +817,42 @@ const startSimulation = async () => {
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: all 0.2s;
transition: all 0.3s ease;
letter-spacing: 1px;
position: relative;
overflow: hidden;
}
/* 可点击状态(非禁用) */
.start-engine-btn:not(:disabled) {
background: var(--black);
border: 1px solid var(--black);
animation: pulse-border 2s infinite;
}
.start-engine-btn:hover:not(:disabled) {
background: var(--orange);
border-color: var(--orange);
transform: translateY(-2px);
}
.start-engine-btn:active:not(:disabled) {
transform: translateY(0);
}
.start-engine-btn:disabled {
background: #CCC;
background: #E5E5E5;
color: #999;
cursor: not-allowed;
transform: none;
border: 1px solid #E5E5E5;
}
/* 引导动画:微妙的边框脉冲 */
@keyframes pulse-border {
0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); }
70% { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
/* 响应式适配 */