refactor(frontend): 更新首页内容 - 版本号V1.0 + 双存储模式说明
- 修改版本badge: v1.0生产就绪版本 → 版本号 V1.0 - 更新主描述: 支持SFTP远程连接和服务器本地存储两种模式 - Stats区域优化: * 移除「100%开源免费」和「Docker一键部署」 * 新增「双模式 - SFTP + 本地存储」 - 功能卡片更新: * 流式下载 → 灵活下载 * 详细说明三种模式: HTTP直链、SFTP流式、本地存储 - 移除CTA区域的「查看源码」按钮 - 简化Footer: 删除所有导航链接,只保留版权信息 - 响应式优化: 调整stats为单列布局(移动端)
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user