kunthawat/microfish
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: replace hero logo with inline use cases grid

Browse Source 
- Remove logo image from hero section
- Move use cases into hero-right as 2x2 grid
- Remove standalone usecases-section
- Update CSS for inline layout
This commit is contained in:
Kunthawat Greethong
2026-06-27 13:11:29 +07:00
parent da5a32d014
commit 89d04e795b
1 changed files with 83 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
frontend/src/views/Home.vue
View File

@@ -42,47 +42,38 @@
</div>
<div class="hero-right">
<!-- Logo 区域 -->
<div class="logo-container">
<img src="../assets/logo/MiroFish_logo_left.jpeg" alt="CrowdSight Logo" class="hero-logo" />
</div>
<button class="scroll-down-btn" @click="scrollToBottom">
↓
</button>
</div>
</section>
<!-- Use Cases Section -->
<section class="usecases-section">
<h2 class="usecases-title">{{ $t('home.useCases') }}</h2>
<div class="usecases-grid">
<div class="usecase-card">
<div class="usecase-icon">📰</div>
<div class="usecase-content">
<div class="usecase-name">{{ $t('home.useCase1Title') }}</div>
<div class="usecase-desc">{{ $t('home.useCase1Desc') }}</div>
</div>
</div>
<div class="usecase-card">
<div class="usecase-icon">📋</div>
<div class="usecase-content">
<div class="usecase-name">{{ $t('home.useCase2Title') }}</div>
<div class="usecase-desc">{{ $t('home.useCase2Desc') }}</div>
</div>
</div>
<div class="usecase-card">
<div class="usecase-icon">📢</div>
<div class="usecase-content">
<div class="usecase-name">{{ $t('home.useCase3Title') }}</div>
<div class="usecase-desc">{{ $t('home.useCase3Desc') }}</div>
</div>
</div>
<div class="usecase-card">
<div class="usecase-icon">📖</div>
<div class="usecase-content">
<div class="usecase-name">{{ $t('home.useCase4Title') }}</div>
<div class="usecase-desc">{{ $t('home.useCase4Desc') }}</div>
<!-- Use Cases -->
<div class="usecases-inline">
<h3 class="usecases-title">{{ $t('home.useCases') }}</h3>
<div class="usecases-grid">
<div class="usecase-card">
<div class="usecase-icon">📰</div>
<div class="usecase-content">
<div class="usecase-name">{{ $t('home.useCase1Title') }}</div>
<div class="usecase-desc">{{ $t('home.useCase1Desc') }}</div>
</div>
</div>
<div class="usecase-card">
<div class="usecase-icon">📋</div>
<div class="usecase-content">
<div class="usecase-name">{{ $t('home.useCase2Title') }}</div>
<div class="usecase-desc">{{ $t('home.useCase2Desc') }}</div>
</div>
</div>
<div class="usecase-card">
<div class="usecase-icon">📢</div>
<div class="usecase-content">
<div class="usecase-name">{{ $t('home.useCase3Title') }}</div>
<div class="usecase-desc">{{ $t('home.useCase3Desc') }}</div>
</div>
</div>
<div class="usecase-card">
<div class="usecase-icon">📖</div>
<div class="usecase-content">
<div class="usecase-name">{{ $t('home.useCase4Title') }}</div>
<div class="usecase-desc">{{ $t('home.useCase4Desc') }}</div>
</div>
</div>
</div>
</div>
</div>
@@ -622,55 +613,63 @@ const startSimulation = () => {
}
.hero-right {
flex: 0.8;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
.logo-container {
width: 100%;
display: flex;
justify-content: flex-end;
padding-right: 40px;
}
.hero-logo {
max-width: 500px; /* 调整logo大小 */
width: 100%;
}
.scroll-down-btn {
width: 40px;
height: 40px;
border: 1px solid var(--border);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--orange);
padding-left: 40px;
}
.usecases-inline {
width: 100%;
}
.usecases-inline .usecases-title {
font-size: 1.2rem;
transition: all 0.2s;
}
.scroll-down-btn:hover {
border-color: var(--orange);
}
/* Use Cases Section */
.usecases-section {
padding: 40px 60px;
background: #fff;
}
.usecases-title {
font-size: 1.5rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 24px;
text-align: center;
margin-bottom: 16px;
}
.usecases-inline .usecases-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.usecases-inline .usecase-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
background: #F8F9FA;
border-radius: 12px;
border: 1px solid #E5E7EB;
transition: border-color 0.2s, box-shadow 0.2s;
}
.usecases-inline .usecase-card:hover {
border-color: #FF6B35;
box-shadow: 0 2px 12px rgba(255, 107, 53, 0.08);
}
.usecases-inline .usecase-icon {
font-size: 1.5rem;
line-height: 1;
flex-shrink: 0;
}
.usecases-inline .usecase-name {
font-weight: 600;
font-size: 0.88rem;
color: #1a1a1a;
margin-bottom: 3px;
}
.usecases-inline .usecase-desc {
font-size: 0.78rem;
color: #666;
line-height: 1.4;
}
.usecases-grid {