dellevin/mooknote_web
1
0
Fork 0
generated from dellevin/template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
DelLevin-Home
2026-07-03 02:56:42 +08:00
parent 3f2a8bfdcd
commit 32e12dc801
8 changed files with 515 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
src/views/Home.vue
View File

@@ -3,26 +3,29 @@
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<h1 class="hero-title">MookNote</h1>
<p class="hero-subtitle">记录你的观影、阅读与笔记</p>
<p class="hero-desc">一款简洁优雅的记录工具，帮助你整理生活中的每一份感动与思考。<br>支持观影记录、阅读管理和笔记整理，让回忆有迹可循。</p>
<div class="hero-actions">
<div class="hero-badge animate-on-scroll">MookNote</div>
<h1 class="hero-title animate-on-scroll">记录你的<br>观影、阅读与笔记</h1>
<p class="hero-desc animate-on-scroll">一款简洁优雅的记录工具，帮助你整理生活中的每一份感动与思考。<br>支持观影记录、阅读管理和笔记整理，让回忆有迹可循。</p>
<div class="hero-actions animate-on-scroll">
<a href="#download" class="btn btn-primary">立即下载</a>
<router-link to="/guide" class="btn btn-secondary">了解更多</router-link>
</div>
<div class="hero-stats">
<div class="hero-stats animate-on-scroll">
<div class="stat-item">
<span class="stat-number">webdav支持</span>
<span class="stat-number">WebDAV</span>
<span class="stat-label">云备份支持</span>
</div>
<div class="stat-item">
<span class="stat-number">无需注册</span>
<span class="stat-label">零门槛使用</span>
</div>
<div class="stat-item">
<span class="stat-number">本地存储</span>
<span class="stat-label">隐私安全</span>
</div>
</div>
</div>
<div class="hero-visual">
<div class="hero-visual animate-on-scroll">
<div class="phone-mockup">
<div class="phone-screen">
<div class="mockup-header">
@@ -69,10 +72,10 @@
<!-- Features Preview -->
<section class="features-preview">
<div class="container">
<h2 class="section-title">核心功能</h2>
<p class="section-subtitle">三大模块，全面记录你的生活点滴</p>
<h2 class="section-title animate-on-scroll">核心功能</h2>
<p class="section-subtitle animate-on-scroll">三大模块，全面记录你的生活点滴</p>
<div class="features-grid">
<div class="feature-card">
<div class="feature-card animate-on-scroll">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="2" width="20" height="20" rx="2.18"/>
@@ -88,7 +91,7 @@
<h3>观影记录</h3>
<p>记录已看、在看、想看的电影，添加评分和观影笔记，建立自己的观影档案。</p>
</div>
<div class="feature-card">
<div class="feature-card animate-on-scroll">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
@@ -98,7 +101,7 @@
<h3>阅读管理</h3>
<p>追踪阅读进度，记录已读、在读、准备读的书籍，写下读书心得。</p>
</div>
<div class="feature-card">
<div class="feature-card animate-on-scroll">
<div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
@@ -112,7 +115,7 @@
<p>随时记录灵感和想法，支持标签分类，让知识井井有条。</p>
</div>
</div>
<div class="features-cta">
<div class="features-cta animate-on-scroll">
<router-link to="/features" class="btn btn-outline">查看全部功能</router-link>
</div>
</div>
@@ -121,7 +124,7 @@
<!-- Highlights -->
<section class="highlights">
<div class="container">
<div class="highlight-row">
<div class="highlight-row animate-on-scroll">
<div class="highlight-content">
<h3>简洁优雅的设计</h3>
<p>采用极简黑白灰配色，界面清爽无干扰。专注于内容本身，让记录成为一种享受。</p>
@@ -161,7 +164,7 @@
</div>
</div>
</div>
<div class="highlight-row reverse">
<div class="highlight-row reverse animate-on-scroll">
<div class="highlight-content">
<h3>数据安全可控</h3>
<p>数据本地存储，隐私完全掌控。支持本地备份和云备份，再也不怕数据丢失。</p>
@@ -202,10 +205,10 @@
<!-- Download Section -->
<section id="download" class="download">
<div class="container">
<h2 class="section-title">开始使用</h2>
<p class="section-subtitle">目前仅支持 Android 平台，iOS 版本正在开发中</p>
<h2 class="section-title animate-on-scroll">开始使用</h2>
<p class="section-subtitle animate-on-scroll">目前仅支持 Android 平台，iOS 版本正在开发中</p>
<div class="download-options">
<div class="download-card">
<div class="download-card animate-on-scroll">
<div class="download-icon">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M17.523 15.3414c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.5511 0 .9993.4482.9993.9993.0001.5511-.4482.9997-.9993.9997m-11.046 0c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.5511 0 .9993.4482.9993.9993 0 .5511-.4482.9997-.9993.9997m11.4045-6.02l1.9973-3.4592a.416.416 0 0 0-.1521-.5676.416.416 0 0 0-.5676.1521l-2.0225 3.503C15.5902 8.4796 13.8533 8.208 12 8.208c-1.8533 0-3.5902.2716-5.1368.7621L4.8407 5.4671a.416.416 0 0 0-.5676-.1521.416.416 0 0 0-.1521.5676l1.9973 3.4592C2.6889 11.1867.3432 14.6589.3432 18.6617h23.3136c0-4.0028-2.3457-7.475-5.775-9.3403"/>
@@ -213,11 +216,11 @@
</div>
<h3>Android</h3>
<p>支持 Android 5.0 及以上版本</p>
<a href="https://mooknote.iletter.top/download/MookNote_V0.1.6.apk" class="btn btn-primary">下载 APK</a>
<a href="https://mooknote.iletter.top/download/mooknote.apk" class="btn btn-primary">下载 APK</a>
</div>
</div>
<div class="version-info">
<p>当前版本：v0.1.6 | 更新日期：2025年3月</p>
<div class="version-info animate-on-scroll">
<p>当前版本：{{ latestVersion }} | 更新日期：{{ latestDate }}</p>
</div>
</div>
</section>
@@ -227,15 +230,79 @@
<script>
export default {
name: 'Home',
data() {
return {
latestVersion: 'v0.1.7',
latestDate: '2025年3月',
visibleSections: {
hero: false,
features: false,
highlights: false,
download: false
}
}
},
mounted() {
fetch('https://api.mooknote.iletter.top/api/changelog')
.then(res => res.json())
.then(data => {
if (data.items && data.items.length) {
const latest = data.items.reduce((max, item) =>
(item.sort || 0) > (max.sort || 0) ? item : max
)
this.latestVersion = latest.version
this.latestDate = latest.date
}
})
.catch(() => {})
// 初始化滚动动画
this.initScrollObserver()
},
methods: {
showDownloadTip() {
alert('APK 下载功能即将上线，敬请期待！')
},
initScrollObserver() {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('is-visible')
}
})
}, { threshold: 0.1 })
// 观察所有需要动画的元素
this.$nextTick(() => {
const animatedElements = this.$el.querySelectorAll('.animate-on-scroll')
animatedElements.forEach(el => observer.observe(el))
})
}
}
}
</script>
<style scoped>
/* Animation utilities */
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Staggered animation delays */
.animate-on-scroll:nth-child(1) { transition-delay: 0.05s; }
.animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.15s; }
.animate-on-scroll:nth-child(4) { transition-delay: 0.2s; }
.animate-on-scroll:nth-child(5) { transition-delay: 0.25s; }
.animate-on-scroll:nth-child(6) { transition-delay: 0.3s; }
/* Hero Section */
.hero {
min-height: calc(100vh - 64px);
@@ -268,6 +335,7 @@ export default {
letter-spacing: -1px;
margin-bottom: 16px;
color: var(--color-text);
line-height: 1.15;
}
.hero-subtitle {
@@ -300,7 +368,7 @@ export default {
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: all 0.2s;
transition: all 0.2s ease;
cursor: pointer;
border: none;
}
@@ -308,10 +376,13 @@ export default {
.btn-primary {
background: var(--color-accent);
color: white;
box-shadow: 0 2px 8px rgba(26, 26, 26, 0.15);
}
.btn-primary:hover {
background: #333333;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(26, 26, 26, 0.2);
}
.btn-secondary {
@@ -321,6 +392,7 @@ export default {
.btn-secondary:hover {
background: #EBEBEB;
transform: translateY(-1px);
}
.btn-outline {
@@ -331,6 +403,7 @@ export default {
.btn-outline:hover {
background: var(--color-bg-secondary);
transform: translateY(-1px);
}
.hero-stats {
@@ -345,16 +418,16 @@ export default {
.stat-number {
display: block;
font-size: 25px;
font-size: 18px;
font-weight: 700;
color: var(--color-text);
line-height: 1;
margin-bottom: 6px;
}
.stat-label {
font-size: 13px;
color: var(--color-text-muted);
margin-top: 6px;
}
/* Phone Mockup */
@@ -369,6 +442,11 @@ export default {
border-radius: 36px;
padding: 12px;
box-shadow: 0 25px 80px rgba(0,0,0,0.15);
transition: transform 0.3s ease;
}
.phone-mockup:hover {
transform: translateY(-8px) rotate(1deg);
}
.phone-screen {
@@ -451,6 +529,11 @@ export default {
background: var(--color-bg-secondary);
border-radius: 8px;
overflow: hidden;
transition: transform 0.2s ease;
}
.mockup-card:hover {
transform: scale(1.03);
}
.card-image {
@@ -528,11 +611,12 @@ export default {
background: var(--color-bg-secondary);
border-radius: 16px;
text-align: center;
transition: transform 0.2s;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
transform: translateY(-4px);
transform: translateY(-6px);
box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
.feature-icon {
@@ -545,6 +629,11 @@ export default {
align-items: center;
justify-content: center;
color: var(--color-text);
transition: transform 0.3s ease;
}
.feature-card:hover .feature-icon {
transform: scale(1.1);
}
.feature-icon svg {
@@ -640,6 +729,12 @@ export default {
border-radius: 16px;
padding: 24px;
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.visual-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.visual-card.dark {
@@ -647,6 +742,10 @@ export default {
color: white;
}
.visual-card.dark:hover {
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.visual-header {
display: flex;
justify-content: space-between;
@@ -667,6 +766,11 @@ export default {
height: 56px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
transition: transform 0.3s ease;
}
.visual-card:hover .avatar {
transform: scale(1.05);
}
.info .name {
@@ -716,12 +820,17 @@ export default {
padding: 16px 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
font-size: 15px;
transition: color 0.2s ease;
}
.backup-item:last-child {
border-bottom: none;
}
.backup-item:hover {
color: rgba(255,255,255,0.8);
}
.backup-icon {
margin-right: 12px;
}
@@ -729,6 +838,12 @@ export default {
.arrow {
margin-left: auto;
color: rgba(255,255,255,0.5);
transition: transform 0.2s ease, color 0.2s ease;
}
.backup-item:hover .arrow {
transform: translateX(4px);
color: rgba(255,255,255,0.8);
}
/* Download Section */
@@ -751,6 +866,12 @@ export default {
border-radius: 16px;
text-align: center;
min-width: 280px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.download-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
.download-icon {
@@ -762,6 +883,11 @@ export default {
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.download-card:hover .download-icon {
transform: scale(1.1);
}
.download-icon svg {
@@ -841,5 +967,11 @@ export default {
flex-direction: column;
align-items: center;
}
.animate-on-scroll {
opacity: 1;
transform: none;
transition: none;
}
}
</style>