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

2
dist/index.html vendored
View File

@@ -1 +1 @@
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>MookNote - 记录你的观影、阅读与笔记</title><meta name="description" content="MookNote是一款简洁优雅的观影阅读笔记应用，帮助你记录生活中的每一份感动与思考。"><script defer="defer" src="js/chunk-vendors.474bdb90.js"></script><script defer="defer" src="js/app.54b407f8.js"></script><link href="css/app.d8127cf7.css" rel="stylesheet"></head><script defer="defer" src="https://umami.iletter.top/anyjs" data-website-id="a4035aea-31ff-4df4-86e3-90a904a348d0"></script><body><noscript><strong>We're sorry but MookNote doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html> <!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>MookNote - 记录你的观影、阅读与笔记</title><meta name="description" content="MookNote是一款简洁优雅的观影阅读笔记应用，帮助你记录生活中的每一份感动与思考。"><script defer="defer" src="js/chunk-vendors.474bdb90.js"></script><script defer="defer" src="js/app.a1f755d5.js"></script><link href="css/app.f1e25e8e.css" rel="stylesheet"></head><script defer="defer" src="https://umami.iletter.top/anyjs" data-website-id="a4035aea-31ff-4df4-86e3-90a904a348d0"></script><body><noscript><strong>We're sorry but MookNote doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>

2
node_modules/.cache/eslint/3230db48.json generated vendored
View File

@@ -1 +1 @@
[{"d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\main.js":"1","d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\App.vue":"2","d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\router\\index.js":"3","d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Home.vue":"4","d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Guide.vue":"5","d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Features.vue":"6","d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Contact.vue":"7","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\main.js":"8","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\App.vue":"9","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\router\\index.js":"10","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Home.vue":"11","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Guide.vue":"12","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Features.vue":"13","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Contact.vue":"14"},{"size":185,"mtime":1773039011232,"results":"15","hashOfConfig":"16"},{"size":5498,"mtime":1773039067514,"results":"17","hashOfConfig":"16"},{"size":751,"mtime":1773039011237,"results":"18","hashOfConfig":"16"},{"size":20348,"mtime":1773039198919,"results":"19","hashOfConfig":"16"},{"size":17167,"mtime":1773039467672,"results":"20","hashOfConfig":"16"},{"size":18441,"mtime":1773039396952,"results":"21","hashOfConfig":"16"},{"size":14128,"mtime":1773039566109,"results":"22","hashOfConfig":"16"},{"size":185,"mtime":1773039011232,"results":"23","hashOfConfig":"24"},{"size":5704,"mtime":1773063622700,"results":"25","hashOfConfig":"24"},{"size":751,"mtime":1773039011237,"results":"26","hashOfConfig":"24"},{"size":20345,"mtime":1773329796846,"results":"27","hashOfConfig":"24"},{"size":14384,"mtime":1773061457657,"results":"28","hashOfConfig":"24"},{"size":21770,"mtime":1773060984086,"results":"29","hashOfConfig":"24"},{"size":12549,"mtime":1773329769428,"results":"30","hashOfConfig":"24"},{"filePath":"31","messages":"32","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1d1ptc",{"filePath":"33","messages":"34","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"35","messages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"37","messages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"39","messages":"40","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"41","messages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"45","messages":"46","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"gg8jao",{"filePath":"47","messages":"48","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"49","messages":"50","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"51","messages":"52","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"53","messages":"54","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"55","messages":"56","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"57","messages":"58","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\main.js",[],"d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\App.vue",[],"d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\router\\index.js",[],"d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Home.vue",[],"d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Guide.vue",[],"d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Features.vue",[],"d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Contact.vue",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\main.js",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\App.vue",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\router\\index.js",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Home.vue",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Guide.vue",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Features.vue",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Contact.vue",[]] [{"d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\main.js":"1","d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\App.vue":"2","d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\router\\index.js":"3","d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Home.vue":"4","d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Guide.vue":"5","d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Features.vue":"6","d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Contact.vue":"7","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\main.js":"8","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\App.vue":"9","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\router\\index.js":"10","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Home.vue":"11","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Guide.vue":"12","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Features.vue":"13","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Contact.vue":"14"},{"size":185,"mtime":1773039011232,"results":"15","hashOfConfig":"16"},{"size":5498,"mtime":1773039067514,"results":"17","hashOfConfig":"16"},{"size":751,"mtime":1773039011237,"results":"18","hashOfConfig":"16"},{"size":20348,"mtime":1773039198919,"results":"19","hashOfConfig":"16"},{"size":17167,"mtime":1773039467672,"results":"20","hashOfConfig":"16"},{"size":18441,"mtime":1773039396952,"results":"21","hashOfConfig":"16"},{"size":14128,"mtime":1773039566109,"results":"22","hashOfConfig":"16"},{"size":185,"mtime":1773039011232,"results":"23","hashOfConfig":"24"},{"size":7306,"mtime":1783015782005,"results":"25","hashOfConfig":"24"},{"size":751,"mtime":1773039011237,"results":"26","hashOfConfig":"24"},{"size":24309,"mtime":1783016162831,"results":"27","hashOfConfig":"24"},{"size":17358,"mtime":1783016780387,"results":"28","hashOfConfig":"24"},{"size":23596,"mtime":1783016698517,"results":"29","hashOfConfig":"24"},{"size":14012,"mtime":1783018248684,"results":"30","hashOfConfig":"24"},{"filePath":"31","messages":"32","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1d1ptc",{"filePath":"33","messages":"34","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"35","messages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"37","messages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"39","messages":"40","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"41","messages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"45","messages":"46","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"7fv5t4",{"filePath":"47","messages":"48","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"49","messages":"50","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"51","messages":"52","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"53","messages":"54","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"55","messages":"56","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"57","messages":"58","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\main.js",[],"d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\App.vue",[],"d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\router\\index.js",[],"d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Home.vue",[],"d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Guide.vue",[],"d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Features.vue",[],"d:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Contact.vue",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\main.js",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\App.vue",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\router\\index.js",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Home.vue",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Guide.vue",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Features.vue",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Contact.vue",[]]

2
node_modules/.cache/eslint/d3665274.json generated vendored
View File

@@ -1 +1 @@
[{"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\main.js":"1","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\App.vue":"2","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\router\\index.js":"3","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Features.vue":"4","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Home.vue":"5","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Guide.vue":"6","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Contact.vue":"7"},{"size":185,"mtime":1773039011232,"results":"8","hashOfConfig":"9"},{"size":5704,"mtime":1773063622700,"results":"10","hashOfConfig":"9"},{"size":751,"mtime":1773039011237,"results":"11","hashOfConfig":"9"},{"size":21770,"mtime":1773060984086,"results":"12","hashOfConfig":"9"},{"size":20345,"mtime":1773329796846,"results":"13","hashOfConfig":"9"},{"size":14384,"mtime":1773061457657,"results":"14","hashOfConfig":"9"},{"size":12549,"mtime":1773329769428,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},"1gqgkxc",{"filePath":"19","messages":"20","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"21","messages":"22","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"23","messages":"24","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"25"},{"filePath":"26","messages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"25"},{"filePath":"30","messages":"31","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\main.js",[],[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\App.vue",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\router\\index.js",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Features.vue",[],[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Home.vue",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Guide.vue",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Contact.vue",[]] [{"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\main.js":"1","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\App.vue":"2","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\router\\index.js":"3","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Features.vue":"4","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Home.vue":"5","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Guide.vue":"6","D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Contact.vue":"7"},{"size":185,"mtime":1773039011232,"results":"8","hashOfConfig":"9"},{"size":7306,"mtime":1783015782005,"results":"10","hashOfConfig":"9"},{"size":751,"mtime":1773039011237,"results":"11","hashOfConfig":"9"},{"size":23234,"mtime":1783018404809,"results":"12","hashOfConfig":"9"},{"size":24309,"mtime":1783016162831,"results":"13","hashOfConfig":"9"},{"size":17358,"mtime":1783016780387,"results":"14","hashOfConfig":"9"},{"size":14012,"mtime":1783018248684,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},"r0b2vc",{"filePath":"19","messages":"20","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"21"},{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"21"},{"filePath":"28","messages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"21"},{"filePath":"30","messages":"31","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\main.js",[],[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\App.vue",[],[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\router\\index.js",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Features.vue",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Home.vue",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Guide.vue",[],"D:\\UserData\\Desktop\\my_proj\\mooknote_web\\src\\views\\Contact.vue",[]]

82
src/App.vue
View File

@@ -1,18 +1,18 @@
<template> <template>
<div id="app"> <div id="app">
<nav class="navbar"> <nav class="navbar" :class="{ 'navbar-scrolled': scrolled }">
<div class="nav-container"> <div class="nav-container">
<div class="nav-brand"> <div class="nav-brand">
<span class="brand-icon">M</span> <span class="brand-icon">M</span>
<span class="brand-text">MookNote</span> <span class="brand-text">MookNote</span>
</div> </div>
<ul class="nav-menu"> <ul class="nav-menu" :class="{ active: menuOpen }">
<li><router-link to="/" exact>首页</router-link></li> <li><router-link to="/" exact @click.native="closeMenu">首页</router-link></li>
<li><router-link to="/features">功能特性</router-link></li> <li><router-link to="/features" @click.native="closeMenu">功能特性</router-link></li>
<li><router-link to="/guide">使用指南</router-link></li> <li><router-link to="/guide" @click.native="closeMenu">使用指南</router-link></li>
<li><router-link to="/contact">联系我</router-link></li> <li><router-link to="/contact" @click.native="closeMenu">联系我</router-link></li>
</ul> </ul>
<div class="nav-toggle" @click="toggleMenu"> <div class="nav-toggle" :class="{ active: menuOpen }" @click="toggleMenu">
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
@@ -49,13 +49,27 @@ export default {
name: 'App', name: 'App',
data() { data() {
return { return {
menuOpen: false menuOpen: false,
scrolled: false
} }
}, },
mounted() {
window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll)
},
methods: { methods: {
toggleMenu() { toggleMenu() {
this.menuOpen = !this.menuOpen this.menuOpen = !this.menuOpen
document.querySelector('.nav-menu').classList.toggle('active') document.querySelector('.nav-menu').classList.toggle('active')
},
closeMenu() {
this.menuOpen = false
document.querySelector('.nav-menu').classList.remove('active')
},
handleScroll() {
this.scrolled = window.scrollY > 10
} }
} }
} }
@@ -101,8 +115,15 @@ body {
right: 0; right: 0;
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
z-index: 1000; z-index: 1000;
transition: box-shadow 0.3s ease, background 0.3s ease;
}
.navbar-scrolled {
box-shadow: 0 1px 20px rgba(0, 0, 0, 0.06);
background: rgba(255, 255, 255, 0.98);
} }
.nav-container { .nav-container {
@@ -121,6 +142,11 @@ body {
gap: 10px; gap: 10px;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
transition: transform 0.2s ease;
}
.nav-brand:hover {
transform: scale(1.02);
} }
.brand-icon { .brand-icon {
@@ -134,6 +160,7 @@ body {
justify-content: center; justify-content: center;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
transition: background 0.2s ease;
} }
.nav-menu { .nav-menu {
@@ -164,6 +191,7 @@ body {
right: 0; right: 0;
height: 2px; height: 2px;
background: var(--color-accent); background: var(--color-accent);
border-radius: 1px;
} }
.nav-toggle { .nav-toggle {
@@ -178,7 +206,20 @@ body {
width: 24px; width: 24px;
height: 2px; height: 2px;
background: var(--color-text); background: var(--color-text);
transition: all 0.3s; transition: all 0.3s ease;
border-radius: 1px;
}
.nav-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle.active span:nth-child(2) {
opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
} }
/* Main Content */ /* Main Content */
@@ -187,6 +228,15 @@ body {
padding-top: 64px; padding-top: 64px;
} }
/* Page transition */
.fade-enter-active, .fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
/* Footer */ /* Footer */
.footer { .footer {
background: var(--color-bg-secondary); background: var(--color-bg-secondary);
@@ -210,6 +260,14 @@ body {
margin-bottom: 12px; margin-bottom: 12px;
} }
.footer-brand .brand-icon {
transition: transform 0.3s ease;
}
.footer-brand:hover .brand-icon {
transform: rotate(5deg);
}
.footer-desc { .footer-desc {
color: var(--color-text-secondary); color: var(--color-text-secondary);
font-size: 14px; font-size: 14px;
@@ -220,7 +278,7 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 32px; gap: 32px;
margin-bottom: 32px; margin-bottom: 16px;
} }
.footer-links a { .footer-links a {
@@ -237,6 +295,7 @@ body {
.copyright { .copyright {
color: var(--color-text-muted); color: var(--color-text-muted);
font-size: 13px; font-size: 13px;
margin-top: 24px;
} }
/* Responsive */ /* Responsive */
@@ -254,7 +313,8 @@ body {
transform: translateY(-100%); transform: translateY(-100%);
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: all 0.3s; transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
} }
.nav-menu.active { .nav-menu.active {

344
src/views/Contact.vue
View File

@@ -22,7 +22,7 @@
<section class="contact-options"> <section class="contact-options">
<div class="container"> <div class="container">
<div class="contact-grid"> <div class="contact-grid">
<div class="contact-card"> <div class="contact-card animate-on-scroll">
<div class="contact-icon"> <div class="contact-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/> <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
@@ -32,7 +32,7 @@
<p>遇到 Bug 或有功能建议？欢迎提交反馈，帮助我们改进产品。</p> <p>遇到 Bug 或有功能建议？欢迎提交反馈，帮助我们改进产品。</p>
<a href="mailto:wonder1999@126.com" class="contact-link">wonder1999@126.com</a> <a href="mailto:wonder1999@126.com" class="contact-link">wonder1999@126.com</a>
</div> </div>
<div class="contact-card"> <div class="contact-card animate-on-scroll">
<div class="contact-icon"> <div class="contact-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/> <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
@@ -42,7 +42,7 @@
<p>MookNote 是开源项目，欢迎访问 GitHub 仓库，提交 Issue 或 PR。</p> <p>MookNote 是开源项目，欢迎访问 GitHub 仓库，提交 Issue 或 PR。</p>
<a href="https://github.com/dellevin/mooknote" class="contact-link" >GitHub 仓库</a> <a href="https://github.com/dellevin/mooknote" class="contact-link" >GitHub 仓库</a>
</div> </div>
<div class="contact-card"> <div class="contact-card animate-on-scroll">
<div class="contact-icon"> <div class="contact-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/> <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
@@ -63,11 +63,25 @@
<!-- About --> <!-- About -->
<section class="about-section"> <section class="about-section">
<div class="container"> <div class="container">
<div class="about-content"> <div class="about-content animate-on-scroll">
<h2>关于 MookNote</h2> <h2>关于 MookNote</h2>
<p>MookNote 是一款专注于个人记录的应用，诞生于对简洁工具的追求。我相信，好的工具应该像纸笔一样自然，不打扰思考，只记录生活。</p> <p>MookNote 是一款专注于个人记录的应用，诞生于对简洁工具的追求。我们相信，好的工具应该像纸笔一样自然，不打扰思考，只记录生活。</p>
<p>我希望一款好的软件应该做到的是不断听取使用者意见，不断改进和优化，数据归于用户，不做任何侵犯用户隐私的事情，只提供最简单最实用的功能。</p> <p>我们坚持数据归于用户，不做任何侵犯用户隐私的事情。所有数据本地存储，无需注册账号，无需联网即可使用。同时提供 WebDAV 云备份，让你自由选择数据存储方式。</p>
<p>应用采用 Flutter 框架开发。</p> <p>应用采用 Flutter 框架开发，支持 Android 平台，未来计划支持 iOS、Windows、macOS 和 Linux。</p>
</div>
<div class="about-stats">
<div class="about-stat animate-on-scroll">
<span class="as-number">3</span>
<span class="as-label">核心模块</span>
</div>
<div class="about-stat animate-on-scroll">
<span class="as-number">6+</span>
<span class="as-label">配色方案</span>
</div>
<div class="about-stat animate-on-scroll">
<span class="as-number">0</span>
<span class="as-label">隐私收集</span>
</div>
</div> </div>
</div> </div>
</section> </section>
@@ -75,18 +89,21 @@
<!-- Changelog --> <!-- Changelog -->
<section class="changelog-section"> <section class="changelog-section">
<div class="container"> <div class="container">
<h2 class="section-title">更新日志</h2> <h2 class="changelog-title animate-on-scroll">更新日志</h2>
<div class="timeline"> <p class="changelog-subtitle animate-on-scroll">持续迭代，不断优化体验</p>
<div v-for="(log, index) in changelogs" :key="index" class="timeline-item"> <div class="timeline-scroll">
<div class="timeline-marker"></div> <div class="timeline">
<div class="timeline-content"> <div v-for="(log, index) in changelogs" :key="index" class="timeline-item animate-on-scroll">
<div class="timeline-header"> <div class="timeline-marker"></div>
<h3>{{ log.version }}</h3> <div class="timeline-content">
<span class="timeline-date">{{ log.date }}</span> <div class="timeline-header">
<h3>{{ log.version }}</h3>
<span class="timeline-date">{{ log.date }}</span>
</div>
<ul>
<li v-for="(feature, fIndex) in log.features" :key="fIndex">{{ feature }}</li>
</ul>
</div> </div>
<ul>
<li v-for="(feature, fIndex) in log.features" :key="fIndex">{{ feature }}</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
@@ -108,35 +125,26 @@ export default {
}, },
submitting: false, submitting: false,
showQRModal: false, showQRModal: false,
changelogs: [ changelogs: []
{
version: 'v0.1.6',
date: '2025年3月',
features: [
'可控制主界面功能的显示',
'底部加号长按添加对应数据（观影/阅读/笔记）',
'优化我的界面显示',
'优化影评/书评页面显示内容',
'优化影评/书评详情页面显示内容',
'优化笔记列表/详情/编辑界面',
'优化回收站界面显示',
'评分星星在首页展开显示（多颗星星）',
'支持修改已看/已读时间'
]
},
{
version: 'v0.1.5',
date: '2025年2月',
features: [
'首个公开版本发布',
'支持观影、阅读、笔记三大模块',
'本地备份与 WebDAV 云备份功能',
'数据统计与热力图展示'
]
}
]
} }
}, },
mounted() {
fetch('https://api.mooknote.iletter.top/api/changelog')
.then(res => res.json())
.then(data => {
if (data.items && Array.isArray(data.items)) {
this.changelogs = data.items
// 数据加载完成后重新初始化动画
this.$nextTick(() => {
this.initScrollObserver()
})
}
})
.catch(() => {})
// 初始化滚动动画（静态元素）
this.initScrollObserver()
},
methods: { methods: {
showComingSoon() { showComingSoon() {
alert('功能即将上线，敬请期待！') alert('功能即将上线，敬请期待！')
@@ -146,12 +154,45 @@ export default {
}, },
closeQRModal() { closeQRModal() {
this.showQRModal = false this.showQRModal = false
},
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> </script>
<style scoped> <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);
}
.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; }
/* Modal */ /* Modal */
.modal-overlay { .modal-overlay {
position: fixed; position: fixed;
@@ -164,6 +205,12 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 1000; z-index: 1000;
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
} }
.modal-content { .modal-content {
@@ -174,6 +221,18 @@ export default {
position: relative; position: relative;
max-width: 360px; max-width: 360px;
width: 90%; width: 90%;
animation: slideUp 0.3s ease;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
} }
.modal-close { .modal-close {
@@ -191,10 +250,12 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: color 0.2s ease, transform 0.2s ease;
} }
.modal-close:hover { .modal-close:hover {
color: var(--color-text); color: var(--color-text);
transform: rotate(90deg);
} }
.modal-content h3 { .modal-content h3 {
@@ -252,11 +313,12 @@ export default {
background: var(--color-bg-secondary); background: var(--color-bg-secondary);
border-radius: 16px; border-radius: 16px;
text-align: center; text-align: center;
transition: transform 0.2s; transition: transform 0.3s ease, box-shadow 0.3s ease;
} }
.contact-card:hover { .contact-card:hover {
transform: translateY(-4px); transform: translateY(-6px);
box-shadow: 0 12px 40px rgba(0,0,0,0.08);
} }
.contact-icon { .contact-icon {
@@ -269,6 +331,11 @@ export default {
justify-content: center; justify-content: center;
margin: 0 auto 24px; margin: 0 auto 24px;
color: var(--color-text); color: var(--color-text);
transition: transform 0.3s ease;
}
.contact-card:hover .contact-icon {
transform: scale(1.1);
} }
.contact-icon svg { .contact-icon svg {
@@ -296,128 +363,12 @@ export default {
text-decoration: none; text-decoration: none;
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
padding-bottom: 2px; padding-bottom: 2px;
transition: border-color 0.2s; transition: border-color 0.2s ease, color 0.2s ease;
} }
.contact-link:hover { .contact-link:hover {
border-color: var(--color-text); border-color: var(--color-text);
} color: #333;
/* Feedback Section */
.feedback-section {
padding: 80px 24px;
background: var(--color-bg-secondary);
}
.feedback-wrapper {
display: flex;
gap: 80px;
max-width: 1000px;
margin: 0 auto;
}
.feedback-info {
flex: 1;
}
.feedback-info h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 20px;
color: var(--color-text);
}
.feedback-info p {
font-size: 16px;
color: var(--color-text-secondary);
line-height: 1.8;
margin-bottom: 32px;
}
.info-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.info-item {
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
color: var(--color-text-secondary);
}
.info-icon {
width: 24px;
height: 24px;
background: var(--color-text);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
flex-shrink: 0;
}
.feedback-form {
flex: 1;
background: white;
padding: 40px;
border-radius: 16px;
}
.form-group {
margin-bottom: 24px;
}
.form-group label {
display: block;
font-size: 14px;
font-weight: 500;
color: var(--color-text);
margin-bottom: 8px;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--color-border);
border-radius: 8px;
font-size: 15px;
font-family: inherit;
background: white;
color: var(--color-text);
transition: border-color 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-text);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--color-text-muted);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.btn-block {
width: 100%;
}
button:disabled {
opacity: 0.6;
cursor: not-allowed;
} }
/* About Section */ /* About Section */
@@ -478,9 +429,52 @@ button:disabled {
background: var(--color-bg-secondary); background: var(--color-bg-secondary);
} }
.changelog-section .container {
max-width: 1200px;
margin: 0 auto;
}
.changelog-title {
font-size: 36px;
font-weight: 700;
text-align: center;
margin-bottom: 12px;
color: var(--color-text);
}
.changelog-subtitle {
font-size: 16px;
color: var(--color-text-secondary);
text-align: center;
margin-bottom: 48px;
}
.timeline-scroll {
max-height: 500px;
overflow-y: auto;
padding-right: 8px;
}
.timeline-scroll::-webkit-scrollbar {
width: 6px;
}
.timeline-scroll::-webkit-scrollbar-track {
background: transparent;
}
.timeline-scroll::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: 3px;
}
.timeline-scroll::-webkit-scrollbar-thumb:hover {
background: var(--color-text-muted);
}
.timeline { .timeline {
max-width: 720px; max-width: 720px;
margin: 48px auto 0; margin: 0 auto;
position: relative; position: relative;
} }
@@ -513,6 +507,12 @@ button:disabled {
flex-shrink: 0; flex-shrink: 0;
position: relative; position: relative;
z-index: 1; z-index: 1;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.timeline-item:hover .timeline-marker {
transform: scale(1.2);
box-shadow: 0 0 0 4px rgba(26, 26, 26, 0.1);
} }
.timeline-content { .timeline-content {
@@ -520,6 +520,12 @@ button:disabled {
background: white; background: white;
padding: 24px; padding: 24px;
border-radius: 12px; border-radius: 12px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.timeline-item:hover .timeline-content {
transform: translateX(4px);
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
} }
.timeline-header { .timeline-header {
@@ -571,5 +577,11 @@ button:disabled {
align-items: flex-start; align-items: flex-start;
gap: 4px; gap: 4px;
} }
.animate-on-scroll {
opacity: 1;
transform: none;
transition: none;
}
} }
</style> </style>

74
src/views/Features.vue
View File

@@ -22,7 +22,7 @@
</div> </div>
<div class="df-text"> <div class="df-text">
<h4>三种观看状态</h4> <h4>三种观看状态</h4>
<p>已看、在看、想看，清晰分类管理</p> <p>已看、在看、想看，清晰分类管理你的观影清单</p>
</div> </div>
</div> </div>
<div class="df-item"> <div class="df-item">
@@ -31,7 +31,7 @@
</div> </div>
<div class="df-text"> <div class="df-text">
<h4>评分系统</h4> <h4>评分系统</h4>
<p>为每部电影打分，记录你的真实感受</p> <p>为每部电影打分，记录你的真实感受，生成个人观影排行榜</p>
</div> </div>
</div> </div>
<div class="df-item"> <div class="df-item">
@@ -40,7 +40,7 @@
</div> </div>
<div class="df-text"> <div class="df-text">
<h4>观影笔记</h4> <h4>观影笔记</h4>
<p>记录观影心得，保存经典台词</p> <p>记录观影心得、经典台词，让每一次观影都有收获</p>
</div> </div>
</div> </div>
<div class="df-item"> <div class="df-item">
@@ -49,7 +49,7 @@
</div> </div>
<div class="df-text"> <div class="df-text">
<h4>海报展示</h4> <h4>海报展示</h4>
<p>精美的瀑布流布局展示电影海报</p> <p>精美的瀑布流布局展示电影海报，视觉体验更佳</p>
</div> </div>
</div> </div>
</div> </div>
@@ -115,7 +115,7 @@
</div> </div>
<div class="df-text"> <div class="df-text">
<h4>阅读状态追踪</h4> <h4>阅读状态追踪</h4>
<p>已读、在读、准备读，一目了然</p> <p>已读、在读、准备读，一目了然地管理你的阅读计划</p>
</div> </div>
</div> </div>
<div class="df-item"> <div class="df-item">
@@ -124,7 +124,7 @@
</div> </div>
<div class="df-text"> <div class="df-text">
<h4>书籍信息</h4> <h4>书籍信息</h4>
<p>记录作者、出版日期、简介等详细信息</p> <p>记录作者、出版日期、简介等详细信息，打造个人书库</p>
</div> </div>
</div> </div>
<div class="df-item"> <div class="df-item">
@@ -133,7 +133,7 @@
</div> </div>
<div class="df-text"> <div class="df-text">
<h4>读书笔记</h4> <h4>读书笔记</h4>
<p>摘录金句，记录感悟，积累知识</p> <p>摘录金句，记录感悟，积累知识，让阅读更有价值</p>
</div> </div>
</div> </div>
<div class="df-item"> <div class="df-item">
@@ -142,7 +142,7 @@
</div> </div>
<div class="df-text"> <div class="df-text">
<h4>阅读统计</h4> <h4>阅读统计</h4>
<p>年度阅读报告，见证成长轨迹</p> <p>年度阅读报告，可视化展示阅读数据，见证成长轨迹</p>
</div> </div>
</div> </div>
</div> </div>
@@ -200,7 +200,7 @@
<div class="detail-row"> <div class="detail-row">
<div class="detail-content"> <div class="detail-content">
<h2>笔记整理</h2> <h2>笔记整理</h2>
<p class="detail-desc">随时记录灵感和想法，支持图文混排，让你的知识库井井有条。</p> <p class="detail-desc">随时记录灵感和想法，支持图文混排和富文本编辑，让你的知识库井井有条。</p>
<div class="detail-features"> <div class="detail-features">
<div class="df-item"> <div class="df-item">
<div class="df-icon"> <div class="df-icon">
@@ -208,7 +208,7 @@
</div> </div>
<div class="df-text"> <div class="df-text">
<h4>快速记录</h4> <h4>快速记录</h4>
<p>一键新建笔记，捕捉瞬间灵感</p> <p>一键新建笔记，捕捉瞬间灵感，不错过任何有价值的想法</p>
</div> </div>
</div> </div>
<div class="df-item"> <div class="df-item">
@@ -217,7 +217,7 @@
</div> </div>
<div class="df-text"> <div class="df-text">
<h4>标签分类</h4> <h4>标签分类</h4>
<p>多维度标签，灵活组织笔记</p> <p>多维度标签系统，灵活组织笔记，快速检索所需内容</p>
</div> </div>
</div> </div>
<div class="df-item"> <div class="df-item">
@@ -226,7 +226,7 @@
</div> </div>
<div class="df-text"> <div class="df-text">
<h4>图文混排</h4> <h4>图文混排</h4>
<p>支持插入图片，丰富笔记内容</p> <p>支持插入图片，丰富笔记内容，图文并茂记录生活</p>
</div> </div>
</div> </div>
<div class="df-item"> <div class="df-item">
@@ -235,7 +235,7 @@
</div> </div>
<div class="df-text"> <div class="df-text">
<h4>全文搜索</h4> <h4>全文搜索</h4>
<p>快速定位所需内容</p> <p>快速定位所需内容，再长的笔记也能秒速找到</p>
</div> </div>
</div> </div>
</div> </div>
@@ -289,49 +289,65 @@
<!-- Additional Features --> <!-- Additional Features -->
<section class="additional-features"> <section class="additional-features">
<div class="container"> <div class="container">
<h2 class="section-title">更多特性</h2> <h2 class="section-title animate-on-scroll">更多特性</h2>
<p class="section-subtitle animate-on-scroll">不止记录，更是你的个人知识库</p>
<div class="af-grid"> <div class="af-grid">
<div class="af-card"> <div class="af-card animate-on-scroll">
<div class="af-icon"> <div class="af-icon">
<img src="../assets/icon/data.png" class="fixed-size-image"> <img src="../assets/icon/data.png" class="fixed-size-image">
</div> </div>
<h3>数据统计</h3> <h3>数据统计</h3>
<p>可视化展示观影、阅读、笔记的统计信息，包括月度热力图、年度回顾等。</p> <p>可视化展示观影、阅读、笔记的统计信息，包括月度热力图、年度回顾等，见证你的成长轨迹。</p>
</div> </div>
<div class="af-card"> <div class="af-card animate-on-scroll">
<div class="af-icon"> <div class="af-icon">
<img src="../assets/icon/save.png" class="fixed-size-image"> <img src="../assets/icon/save.png" class="fixed-size-image">
</div> </div>
<h3>本地备份</h3> <h3>本地备份</h3>
<p>一键导出数据到本地，支持 JSON 和数据库格式，数据完全自主可控。</p> <p>一键导出数据到本地，支持 ZIP 格式打包，数据完全自主可控，换机无忧。</p>
</div> </div>
<div class="af-card"> <div class="af-card animate-on-scroll">
<div class="af-icon"> <div class="af-icon">
<img src="../assets/icon/cloud.png" class="fixed-size-image"> <img src="../assets/icon/cloud.png" class="fixed-size-image">
</div> </div>
<h3>云备份</h3> <h3>WebDAV 云备份</h3>
<p>支持 WebDAV 协议，可将数据备份到个人云盘，多设备同步无忧。</p> <p>支持 WebDAV 协议，可将数据备份到个人云盘（如坚果云），多设备同步无忧。</p>
</div> </div>
<div class="af-card"> <div class="af-card animate-on-scroll">
<div class="af-icon"> <div class="af-icon">
<img src="../assets/icon/回收站.png" class="fixed-size-image"> <img src="../assets/icon/回收站.png" class="fixed-size-image">
</div> </div>
<h3>回收站</h3> <h3>回收站</h3>
<p>误删的内容可在回收站中找回，避免重要数据意外丢失。</p> <p>误删的内容可在回收站中找回，支持一键恢复，避免重要数据意外丢失。</p>
</div> </div>
<div class="af-card"> <div class="af-card animate-on-scroll">
<div class="af-icon"> <div class="af-icon">
<img src="../assets/icon/lock.png" class="fixed-size-image"> <img src="../assets/icon/lock.png" class="fixed-size-image">
</div> </div>
<h3>隐私保护</h3> <h3>隐私保护</h3>
<p>所有数据本地存储，无需注册账号，保护你的隐私安全。</p> <p>所有数据本地存储，无需注册账号，不收集任何个人信息，你的隐私你做主。</p>
</div> </div>
<div class="af-card">
<div class="af-card animate-on-scroll">
<div class="af-icon"> <div class="af-icon">
<img src="../assets/icon/zap-fast.png" class="fixed-size-image"> <img src="../assets/icon/book3.png" class="fixed-size-image">
</div> </div>
<h3>轻量快速</h3> <h3>EPUB 阅读器</h3>
<p>应用体积小巧，启动迅速，流畅的使用体验。</p> <p>内置 EPUB 电子书阅读器，支持导入本地书籍，自定义字体、字号、背景色，沉浸式阅读体验。</p>
</div>
<div class="af-card animate-on-scroll">
<div class="af-icon">
<img src="../assets/icon/note2.png" class="fixed-size-image">
</div>
<h3>高级笔记</h3>
<p>支持富文本编辑，图文混排、插入图片、格式化文本，满足更复杂的笔记需求。</p>
</div>
<div class="af-card animate-on-scroll">
<div class="af-icon">
<img src="../assets/icon/movies-2.png" class="fixed-size-image">
</div>
<h3>豆瓣集成</h3>
<p>通过 WebView 搜索豆瓣信息，一键获取电影、书籍的详细资料和评分。</p>
</div> </div>
</div> </div>
</div> </div>

66
src/views/Guide.vue
View File

@@ -120,7 +120,18 @@
<li>选择"笔记"类型</li> <li>选择"笔记"类型</li>
<li>输入笔记内容</li> <li>输入笔记内容</li>
<li>可选：添加标签进行分类</li> <li>可选：添加标签进行分类</li>
<li>可选：txt格式支持插入图片</li> <li>可选：插入图片丰富内容</li>
<li>点击保存</li>
</ol>
</div>
<div class="guide-section">
<h3>高级笔记（富文本）</h3>
<ol>
<li>在笔记页面切换到"高级笔记"标签</li>
<li>点击"+"按钮创建新笔记</li>
<li>使用富文本编辑器进行排版</li>
<li>支持加粗、斜体、标题、列表等格式</li>
<li>支持插入图片和链接</li>
<li>点击保存</li> <li>点击保存</li>
</ol> </ol>
</div> </div>
@@ -136,6 +147,38 @@
</div> </div>
</div> </div>
<!-- EPUB Reader Guide -->
<div v-if="activeTab === 'epub'" class="guide-panel">
<div class="guide-section">
<h3>导入书籍</h3>
<ol>
<li>进入"阅读"页面，切换到"书库"标签</li>
<li>点击"导入书籍"按钮</li>
<li>选择本地的 EPUB 格式电子书文件</li>
<li>等待导入完成，书籍将显示在书库列表中</li>
</ol>
</div>
<div class="guide-section">
<h3>阅读设置</h3>
<ul>
<li><strong>字体调整：</strong>支持多种字体切换，包括霞鹜文楷、OPPO Sans 等</li>
<li><strong>字号调节：</strong>自由调整字体大小，适应不同阅读习惯</li>
<li><strong>背景色：</strong>支持浅色、深色、羊皮纸等多种背景</li>
<li><strong>行间距：</strong>调节行间距，提升阅读舒适度</li>
<li><strong>翻页模式：</strong>支持滑动翻页和点击翻页</li>
</ul>
</div>
<div class="guide-section">
<h3>阅读功能</h3>
<ul>
<li><strong>目录导航：</strong>点击目录按钮快速跳转章节</li>
<li><strong>进度保存：</strong>自动保存阅读进度，下次打开自动续读</li>
<li><strong>书签功能：</strong>添加书签标记重要位置</li>
<li><strong>全文搜索：</strong>在书中搜索关键词</li>
</ul>
</div>
</div>
<!-- Backup Guide --> <!-- Backup Guide -->
<div v-if="activeTab === 'backup'" class="guide-panel"> <div v-if="activeTab === 'backup'" class="guide-panel">
<div class="guide-section"> <div class="guide-section">
@@ -156,7 +199,7 @@
</div> </div>
<div class="guide-section"> <div class="guide-section">
<h3>云备份（WebDAV）</h3> <h3>云备份（WebDAV）</h3>
<p>云备份可以将数据同步到支持 WebDAV 的网盘。</p> <p>云备份可以将数据同步到支持 WebDAV 的网盘，如坚果云、Nextcloud 等。</p>
<ol> <ol>
<li>进入"我的"页面，点击"云备份"</li> <li>进入"我的"页面，点击"云备份"</li>
<li>配置 WebDAV 服务器地址、用户名和密码</li> <li>配置 WebDAV 服务器地址、用户名和密码</li>
@@ -165,7 +208,9 @@
</ol> </ol>
<p><strong>注意事项：</strong></p> <p><strong>注意事项：</strong></p>
<ul> <ul>
<li>webdav备份暂时不支持自动备份，将在后续版本中添加</li> <li>WebDAV 备份暂时不支持自动备份，建议定期手动同步</li>
<li>确保网盘支持 WebDAV 协议并已开启</li>
<li>同步前建议先进行本地备份，以防数据冲突</li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -210,16 +255,17 @@ export default {
{ id: 'movies', name: '观影记录' }, { id: 'movies', name: '观影记录' },
{ id: 'reading', name: '阅读管理' }, { id: 'reading', name: '阅读管理' },
{ id: 'notes', name: '笔记功能' }, { id: 'notes', name: '笔记功能' },
{ id: 'epub', name: 'EPUB 阅读' },
{ id: 'backup', name: '数据备份' } { id: 'backup', name: '数据备份' }
], ],
faqs: [ faqs: [
{ {
q: 'MookNote 是免费的吗？', q: 'MookNote 是免费的吗？',
a: '是的，MookNote 完全免费，没有任何内购或订阅费用。' a: '是的，MookNote 完全免费，没有任何内购或订阅费用。所有功能均可免费使用。'
}, },
{ {
q: '数据存储在哪里？', q: '数据存储在哪里？',
a: '所有数据都存储在您的设备本地，使用 SQLite 数据库。我们不会上传任何数据到服务器。' a: '所有数据都存储在您的设备本地，使用 SQLite 数据库。我们不会上传任何数据到服务器，你的隐私完全由你掌控。'
}, },
{ {
q: '如何迁移数据到新设备？', q: '如何迁移数据到新设备？',
@@ -231,7 +277,15 @@ export default {
}, },
{ {
q: '如何导出数据？', q: '如何导出数据？',
a: '使用本地备份功能可以将数据库导出到指download/mooknote路径下的zip文件。未来版本将支持更多导出格式，如 pdf，csv，json 等。' a: '使用本地备份功能可以将数据库导出到指定路径下的 ZIP 文件。你也可以通过 WebDAV 云备份将数据同步到个人云盘。'
},
{
q: '支持哪些电子书格式？',
a: '目前支持 EPUB 格式的电子书。你可以导入本地的 EPUB 文件到书库中阅读。'
},
{
q: '高级笔记和普通笔记有什么区别？',
a: '普通笔记支持纯文本和基础图片插入；高级笔记基于富文本编辑器，支持加粗、斜体、标题、列表等格式排版，以及更丰富的图文混排。'
} }
] ]
} }

184
src/views/Home.vue
View File

@@ -3,26 +3,29 @@
<!-- Hero Section --> <!-- Hero Section -->
<section class="hero"> <section class="hero">
<div class="hero-content"> <div class="hero-content">
<h1 class="hero-title">MookNote</h1> <div class="hero-badge animate-on-scroll">MookNote</div>
<p class="hero-subtitle">记录你的观影、阅读与笔记</p> <h1 class="hero-title animate-on-scroll">记录你的<br>观影、阅读与笔记</h1>
<p class="hero-desc">一款简洁优雅的记录工具，帮助你整理生活中的每一份感动与思考。<br>支持观影记录、阅读管理和笔记整理，让回忆有迹可循。</p> <p class="hero-desc animate-on-scroll">一款简洁优雅的记录工具，帮助你整理生活中的每一份感动与思考。<br>支持观影记录、阅读管理和笔记整理，让回忆有迹可循。</p>
<div class="hero-actions"> <div class="hero-actions animate-on-scroll">
<a href="#download" class="btn btn-primary">立即下载</a> <a href="#download" class="btn btn-primary">立即下载</a>
<router-link to="/guide" class="btn btn-secondary">了解更多</router-link> <router-link to="/guide" class="btn btn-secondary">了解更多</router-link>
</div> </div>
<div class="hero-stats"> <div class="hero-stats animate-on-scroll">
<div class="stat-item"> <div class="stat-item">
<span class="stat-number">webdav支持</span> <span class="stat-number">WebDAV</span>
<span class="stat-label">云备份支持</span>
</div> </div>
<div class="stat-item"> <div class="stat-item">
<span class="stat-number">无需注册</span> <span class="stat-number">无需注册</span>
<span class="stat-label">零门槛使用</span>
</div> </div>
<div class="stat-item"> <div class="stat-item">
<span class="stat-number">本地存储</span> <span class="stat-number">本地存储</span>
<span class="stat-label">隐私安全</span>
</div> </div>
</div> </div>
</div> </div>
<div class="hero-visual"> <div class="hero-visual animate-on-scroll">
<div class="phone-mockup"> <div class="phone-mockup">
<div class="phone-screen"> <div class="phone-screen">
<div class="mockup-header"> <div class="mockup-header">
@@ -69,10 +72,10 @@
<!-- Features Preview --> <!-- Features Preview -->
<section class="features-preview"> <section class="features-preview">
<div class="container"> <div class="container">
<h2 class="section-title">核心功能</h2> <h2 class="section-title animate-on-scroll">核心功能</h2>
<p class="section-subtitle">三大模块，全面记录你的生活点滴</p> <p class="section-subtitle animate-on-scroll">三大模块，全面记录你的生活点滴</p>
<div class="features-grid"> <div class="features-grid">
<div class="feature-card"> <div class="feature-card animate-on-scroll">
<div class="feature-icon"> <div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <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"/> <rect x="2" y="2" width="20" height="20" rx="2.18"/>
@@ -88,7 +91,7 @@
<h3>观影记录</h3> <h3>观影记录</h3>
<p>记录已看、在看、想看的电影，添加评分和观影笔记，建立自己的观影档案。</p> <p>记录已看、在看、想看的电影，添加评分和观影笔记，建立自己的观影档案。</p>
</div> </div>
<div class="feature-card"> <div class="feature-card animate-on-scroll">
<div class="feature-icon"> <div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <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"/> <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
@@ -98,7 +101,7 @@
<h3>阅读管理</h3> <h3>阅读管理</h3>
<p>追踪阅读进度，记录已读、在读、准备读的书籍，写下读书心得。</p> <p>追踪阅读进度，记录已读、在读、准备读的书籍，写下读书心得。</p>
</div> </div>
<div class="feature-card"> <div class="feature-card animate-on-scroll">
<div class="feature-icon"> <div class="feature-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <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"/> <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> <p>随时记录灵感和想法，支持标签分类，让知识井井有条。</p>
</div> </div>
</div> </div>
<div class="features-cta"> <div class="features-cta animate-on-scroll">
<router-link to="/features" class="btn btn-outline">查看全部功能</router-link> <router-link to="/features" class="btn btn-outline">查看全部功能</router-link>
</div> </div>
</div> </div>
@@ -121,7 +124,7 @@
<!-- Highlights --> <!-- Highlights -->
<section class="highlights"> <section class="highlights">
<div class="container"> <div class="container">
<div class="highlight-row"> <div class="highlight-row animate-on-scroll">
<div class="highlight-content"> <div class="highlight-content">
<h3>简洁优雅的设计</h3> <h3>简洁优雅的设计</h3>
<p>采用极简黑白灰配色，界面清爽无干扰。专注于内容本身，让记录成为一种享受。</p> <p>采用极简黑白灰配色，界面清爽无干扰。专注于内容本身，让记录成为一种享受。</p>
@@ -161,7 +164,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="highlight-row reverse"> <div class="highlight-row reverse animate-on-scroll">
<div class="highlight-content"> <div class="highlight-content">
<h3>数据安全可控</h3> <h3>数据安全可控</h3>
<p>数据本地存储，隐私完全掌控。支持本地备份和云备份，再也不怕数据丢失。</p> <p>数据本地存储，隐私完全掌控。支持本地备份和云备份，再也不怕数据丢失。</p>
@@ -202,10 +205,10 @@
<!-- Download Section --> <!-- Download Section -->
<section id="download" class="download"> <section id="download" class="download">
<div class="container"> <div class="container">
<h2 class="section-title">开始使用</h2> <h2 class="section-title animate-on-scroll">开始使用</h2>
<p class="section-subtitle">目前仅支持 Android 平台，iOS 版本正在开发中</p> <p class="section-subtitle animate-on-scroll">目前仅支持 Android 平台，iOS 版本正在开发中</p>
<div class="download-options"> <div class="download-options">
<div class="download-card"> <div class="download-card animate-on-scroll">
<div class="download-icon"> <div class="download-icon">
<svg viewBox="0 0 24 24" fill="currentColor"> <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"/> <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> </div>
<h3>Android</h3> <h3>Android</h3>
<p>支持 Android 5.0 及以上版本</p> <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> </div>
<div class="version-info"> <div class="version-info animate-on-scroll">
<p>当前版本：v0.1.6 | 更新日期：2025年3月</p> <p>当前版本：{{ latestVersion }} | 更新日期：{{ latestDate }}</p>
</div> </div>
</div> </div>
</section> </section>
@@ -227,15 +230,79 @@
<script> <script>
export default { export default {
name: 'Home', 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: { methods: {
showDownloadTip() { showDownloadTip() {
alert('APK 下载功能即将上线，敬请期待！') 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> </script>
<style scoped> <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 Section */
.hero { .hero {
min-height: calc(100vh - 64px); min-height: calc(100vh - 64px);
@@ -268,6 +335,7 @@ export default {
letter-spacing: -1px; letter-spacing: -1px;
margin-bottom: 16px; margin-bottom: 16px;
color: var(--color-text); color: var(--color-text);
line-height: 1.15;
} }
.hero-subtitle { .hero-subtitle {
@@ -300,7 +368,7 @@ export default {
font-size: 15px; font-size: 15px;
font-weight: 500; font-weight: 500;
text-decoration: none; text-decoration: none;
transition: all 0.2s; transition: all 0.2s ease;
cursor: pointer; cursor: pointer;
border: none; border: none;
} }
@@ -308,10 +376,13 @@ export default {
.btn-primary { .btn-primary {
background: var(--color-accent); background: var(--color-accent);
color: white; color: white;
box-shadow: 0 2px 8px rgba(26, 26, 26, 0.15);
} }
.btn-primary:hover { .btn-primary:hover {
background: #333333; background: #333333;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(26, 26, 26, 0.2);
} }
.btn-secondary { .btn-secondary {
@@ -321,6 +392,7 @@ export default {
.btn-secondary:hover { .btn-secondary:hover {
background: #EBEBEB; background: #EBEBEB;
transform: translateY(-1px);
} }
.btn-outline { .btn-outline {
@@ -331,6 +403,7 @@ export default {
.btn-outline:hover { .btn-outline:hover {
background: var(--color-bg-secondary); background: var(--color-bg-secondary);
transform: translateY(-1px);
} }
.hero-stats { .hero-stats {
@@ -345,16 +418,16 @@ export default {
.stat-number { .stat-number {
display: block; display: block;
font-size: 25px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: var(--color-text); color: var(--color-text);
line-height: 1; line-height: 1;
margin-bottom: 6px;
} }
.stat-label { .stat-label {
font-size: 13px; font-size: 13px;
color: var(--color-text-muted); color: var(--color-text-muted);
margin-top: 6px;
} }
/* Phone Mockup */ /* Phone Mockup */
@@ -369,6 +442,11 @@ export default {
border-radius: 36px; border-radius: 36px;
padding: 12px; padding: 12px;
box-shadow: 0 25px 80px rgba(0,0,0,0.15); 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 { .phone-screen {
@@ -451,6 +529,11 @@ export default {
background: var(--color-bg-secondary); background: var(--color-bg-secondary);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
transition: transform 0.2s ease;
}
.mockup-card:hover {
transform: scale(1.03);
} }
.card-image { .card-image {
@@ -528,11 +611,12 @@ export default {
background: var(--color-bg-secondary); background: var(--color-bg-secondary);
border-radius: 16px; border-radius: 16px;
text-align: center; text-align: center;
transition: transform 0.2s; transition: transform 0.3s ease, box-shadow 0.3s ease;
} }
.feature-card:hover { .feature-card:hover {
transform: translateY(-4px); transform: translateY(-6px);
box-shadow: 0 12px 40px rgba(0,0,0,0.08);
} }
.feature-icon { .feature-icon {
@@ -545,6 +629,11 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--color-text); color: var(--color-text);
transition: transform 0.3s ease;
}
.feature-card:hover .feature-icon {
transform: scale(1.1);
} }
.feature-icon svg { .feature-icon svg {
@@ -640,6 +729,12 @@ export default {
border-radius: 16px; border-radius: 16px;
padding: 24px; padding: 24px;
box-shadow: 0 4px 24px rgba(0,0,0,0.06); 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 { .visual-card.dark {
@@ -647,6 +742,10 @@ export default {
color: white; color: white;
} }
.visual-card.dark:hover {
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.visual-header { .visual-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -667,6 +766,11 @@ export default {
height: 56px; height: 56px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%; border-radius: 50%;
transition: transform 0.3s ease;
}
.visual-card:hover .avatar {
transform: scale(1.05);
} }
.info .name { .info .name {
@@ -716,12 +820,17 @@ export default {
padding: 16px 0; padding: 16px 0;
border-bottom: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1);
font-size: 15px; font-size: 15px;
transition: color 0.2s ease;
} }
.backup-item:last-child { .backup-item:last-child {
border-bottom: none; border-bottom: none;
} }
.backup-item:hover {
color: rgba(255,255,255,0.8);
}
.backup-icon { .backup-icon {
margin-right: 12px; margin-right: 12px;
} }
@@ -729,6 +838,12 @@ export default {
.arrow { .arrow {
margin-left: auto; margin-left: auto;
color: rgba(255,255,255,0.5); 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 */ /* Download Section */
@@ -751,6 +866,12 @@ export default {
border-radius: 16px; border-radius: 16px;
text-align: center; text-align: center;
min-width: 280px; 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 { .download-icon {
@@ -762,6 +883,11 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: transform 0.3s ease;
}
.download-card:hover .download-icon {
transform: scale(1.1);
} }
.download-icon svg { .download-icon svg {
@@ -841,5 +967,11 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.animate-on-scroll {
opacity: 1;
transform: none;
transition: none;
}
} }
</style> </style>