refactor(frontend): 更新首页内容 - 版本号V1.0 + 双存储模式说明

- 修改版本badge: v1.0生产就绪版本 → 版本号 V1.0
- 更新主描述: 支持SFTP远程连接和服务器本地存储两种模式
- Stats区域优化:
  * 移除「100%开源免费」和「Docker一键部署」
  * 新增「双模式 - SFTP + 本地存储」
- 功能卡片更新:
  * 流式下载 → 灵活下载
  * 详细说明三种模式: HTTP直链、SFTP流式、本地存储
- 移除CTA区域的「查看源码」按钮
- 简化Footer: 删除所有导航链接,只保留版权信息
- 响应式优化: 调整stats为单列布局(移动端)
This commit is contained in:
2025-11-13 22:13:50 +08:00
parent c8f3ab5881
commit 32e436c978

View File

@@ -276,7 +276,7 @@
margin: 80px auto; margin: 80px auto;
padding: 0 50px; padding: 0 50px;
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns: repeat(3, 1fr);
gap: 40px; gap: 40px;
} }
@@ -290,7 +290,6 @@
.stat-card:nth-child(1) { animation-delay: 0.1s; } .stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; } .stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; } .stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }
.stat-number { .stat-number {
font-size: 56px; font-size: 56px;
@@ -523,53 +522,12 @@
.footer { .footer {
background: #111; background: #111;
color: white; color: white;
padding: 60px 50px 30px; padding: 40px 50px;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 50px;
margin-bottom: 40px;
}
.footer-section h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 20px;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
color: rgba(255,255,255,0.7);
text-decoration: none;
transition: color 0.3s;
display: inline-flex;
align-items: center;
gap: 8px;
}
.footer-links a:hover {
color: white;
} }
.footer-bottom { .footer-bottom {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding-top: 30px;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center; text-align: center;
color: rgba(255,255,255,0.7); color: rgba(255,255,255,0.7);
} }
@@ -610,6 +568,7 @@
} }
.stats { .stats {
grid-template-columns: 1fr;
padding: 0 20px; padding: 0 20px;
gap: 30px; gap: 30px;
} }
@@ -638,12 +597,7 @@
} }
.footer { .footer {
padding: 40px 20px 20px; padding: 30px 20px;
}
.footer-content {
grid-template-columns: 1fr;
gap: 30px;
} }
} }
@@ -690,7 +644,7 @@
<div class="hero"> <div class="hero">
<div class="hero-badge"> <div class="hero-badge">
<i class="fas fa-star"></i> <i class="fas fa-star"></i>
<span>v1.0 生产就绪版本</span> <span>版本号 V1.0</span>
</div> </div>
<h1> <h1>
<i class="fas fa-cloud"></i> <i class="fas fa-cloud"></i>
@@ -698,7 +652,7 @@
</h1> </h1>
<p class="hero-subtitle"> <p class="hero-subtitle">
简单、安全、高效的现代化云存储管理解决方案<br> 简单、安全、高效的现代化云存储管理解决方案<br>
连接你的 SFTP 服务器,随时随地管理文件,轻松分享 支持SFTP远程连接和服务器本地存储两种模式,随时随地管理文件,轻松分享
</p> </p>
<div class="hero-buttons"> <div class="hero-buttons">
<a href="app.html?action=register" class="btn btn-primary btn-large"> <a href="app.html?action=register" class="btn btn-primary btn-large">
@@ -714,17 +668,13 @@
<!-- Stats --> <!-- Stats -->
<div class="stats"> <div class="stats">
<div class="stat-card">
<span class="stat-number">100%</span>
<span class="stat-label">开源免费</span>
</div>
<div class="stat-card"> <div class="stat-card">
<span class="stat-number">5GB</span> <span class="stat-number">5GB</span>
<span class="stat-label">单文件上限</span> <span class="stat-label">单文件上限</span>
</div> </div>
<div class="stat-card"> <div class="stat-card">
<span class="stat-number">Docker</span> <span class="stat-number">双模式</span>
<span class="stat-label">一键部署</span> <span class="stat-label">SFTP + 本地存储</span>
</div> </div>
<div class="stat-card"> <div class="stat-card">
<span class="stat-number">24/7</span> <span class="stat-number">24/7</span>
@@ -779,9 +729,9 @@
<div class="feature-icon"> <div class="feature-icon">
<i class="fas fa-download"></i> <i class="fas fa-download"></i>
</div> </div>
<h3 class="feature-title">流式下载</h3> <h3 class="feature-title">灵活下载</h3>
<p class="feature-desc"> <p class="feature-desc">
服务器零存储,纯中转下载。支持 HTTP 直链SFTP 流式下载,实时显示下载进度。 支持 HTTP 直链SFTP 流式下载和服务器本地存储三种模式。SFTP模式零存储纯中转本地模式快速稳定,实时显示下载进度。
</p> </p>
<span class="feature-tag">高效传输</span> <span class="feature-tag">高效传输</span>
</div> </div>
@@ -894,62 +844,19 @@
<h2 class="cta-title">准备好开始了吗?</h2> <h2 class="cta-title">准备好开始了吗?</h2>
<p class="cta-desc"> <p class="cta-desc">
立即注册,开始使用玩玩云管理你的文件。<br> 立即注册,开始使用玩玩云管理你的文件。<br>
完全免费,开源透明,数据完全由你掌控。 数据完全由你掌控支持SFTP和本地存储双模式
</p> </p>
<div class="cta-buttons"> <div class="cta-buttons">
<a href="app.html?action=register" class="btn btn-primary btn-large"> <a href="app.html?action=register" class="btn btn-primary btn-large">
<i class="fas fa-rocket"></i> <i class="fas fa-rocket"></i>
<span>免费注册</span> <span>免费注册</span>
</a> </a>
<a href="https://gitee.com/yu-yon/vue-driven-cloud-storage" class="btn btn-outline btn-large" style="background: white; color: var(--primary); border-color: white;">
<i class="fab fa-github"></i>
<span>查看源码</span>
</a>
</div> </div>
</div> </div>
</section> </section>
<!-- Footer --> <!-- Footer -->
<footer class="footer"> <footer class="footer">
<div class="footer-content">
<div class="footer-section">
<h3><i class="fas fa-cloud"></i> 玩玩云</h3>
<p style="color: rgba(255,255,255,0.7); line-height: 1.7;">
现代化的云存储管理平台,让文件管理更简单、更安全、更高效。
</p>
</div>
<div class="footer-section">
<h3>产品</h3>
<ul class="footer-links">
<li><a href="#"><i class="fas fa-chevron-right"></i> 功能特性</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> 技术栈</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> 部署文档</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> API 文档</a></li>
</ul>
</div>
<div class="footer-section">
<h3>资源</h3>
<ul class="footer-links">
<li><a href="#"><i class="fas fa-chevron-right"></i> 使用教程</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> 常见问题</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> 更新日志</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> 问题反馈</a></li>
</ul>
</div>
<div class="footer-section">
<h3>关于</h3>
<ul class="footer-links">
<li><a href="#"><i class="fas fa-chevron-right"></i> 项目介绍</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> 开源协议</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> 贡献指南</a></li>
<li><a href="#"><i class="fas fa-chevron-right"></i> 联系我们</a></li>
</ul>
</div>
</div>
<div class="footer-bottom"> <div class="footer-bottom">
<p> <p>
<i class="fas fa-heart" style="color: #ff6b6b;"></i> <i class="fas fa-heart" style="color: #ff6b6b;"></i>