sunct
3c3bf53ae4
- 新增「简记memo」一体化小程序产品原型设计文档 - 新增简记memo完整版UI视觉设计规范和界面细节 - 添加IDEA项目配置文件.gitignore - 创建404页面HTML文件，包含响应式布局和错误提示 - 添加关于页面HTML文件，展示品牌介绍和团队信息 - 实现AES加解密工具函数，支持请求体加密 - 添加用户协议页面基础框架
437 lines
22 KiB
HTML
437 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>简记memo - 让记录更简单</title>
|
|
<meta name="description" content="集待办任务、账单记录、心情日记于一体的个人事务管理工具">
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: #f8fafc; }
|
|
.nav-link.active { background: rgba(79, 158, 222, 0.1); color: #4F9EDE; }
|
|
|
|
/* 头部滚动效果增强 */
|
|
.header-scrolled {
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
|
|
}
|
|
|
|
/* Hero Section 增强 */
|
|
.hero-section {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-section::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -10%;
|
|
width: 600px;
|
|
height: 600px;
|
|
background: radial-gradient(circle, rgba(79, 158, 222, 0.08) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-section::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -30%;
|
|
left: -5%;
|
|
width: 400px;
|
|
height: 400px;
|
|
background: radial-gradient(circle, rgba(139, 92, 246, 0.06) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 16px;
|
|
background: rgba(79, 158, 222, 0.1);
|
|
border-radius: 20px;
|
|
margin-bottom: 20px;
|
|
border: 1px solid rgba(79, 158, 222, 0.15);
|
|
animation: fadeInUp 0.6s ease forwards;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.hero-title-anim {
|
|
animation: fadeInUp 0.6s ease 0.1s forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.hero-desc-anim {
|
|
animation: fadeInUp 0.6s ease 0.2s forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.hero-btn-anim {
|
|
animation: fadeInUp 0.6s ease 0.3s forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.hero-card-anim {
|
|
animation: fadeInUp 0.6s ease 0.4s forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.feature-card {
|
|
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 24px rgba(0,0,0,0.06);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hero-section {
|
|
padding: 32px 16px 20px !important;
|
|
min-height: calc(100vh - 56px) !important;
|
|
padding-top: calc(56px + 32px) !important;
|
|
}
|
|
|
|
.hero-section > div {
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.hero-section > div > div {
|
|
grid-template-columns: 1fr !important;
|
|
gap: 24px !important;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-section h1 {
|
|
font-size: 32px !important;
|
|
line-height: 1.3 !important;
|
|
margin-bottom: 12px !important;
|
|
}
|
|
|
|
.hero-section p {
|
|
font-size: 15px !important;
|
|
line-height: 1.6 !important;
|
|
margin-bottom: 20px !important;
|
|
}
|
|
|
|
.hero-section .feature-card {
|
|
padding: 16px !important;
|
|
}
|
|
|
|
.hero-section > div > div > div:last-child {
|
|
order: -1;
|
|
}
|
|
|
|
.hero-section > div > div > div:last-child > div:first-child {
|
|
width: 100% !important;
|
|
height: auto !important;
|
|
padding: 16px !important;
|
|
}
|
|
|
|
.hero-section > div > div > div:last-child > div:first-child > div {
|
|
width: 100% !important;
|
|
height: auto !important;
|
|
min-height: 180px;
|
|
}
|
|
|
|
.hero-section .btn-group {
|
|
justify-content: center !important;
|
|
}
|
|
|
|
.hero-section .btn-group a {
|
|
padding: 14px 24px !important;
|
|
font-size: 15px !important;
|
|
}
|
|
|
|
#features {
|
|
padding: 40px 16px !important;
|
|
}
|
|
|
|
.features-grid {
|
|
grid-template-columns: repeat(2, 1fr) !important;
|
|
gap: 16px !important;
|
|
}
|
|
|
|
.feature-card {
|
|
padding: 20px !important;
|
|
}
|
|
|
|
.feature-card h3 {
|
|
font-size: 15px !important;
|
|
}
|
|
|
|
.feature-card p {
|
|
font-size: 13px !important;
|
|
}
|
|
|
|
#about {
|
|
padding: 40px 16px !important;
|
|
}
|
|
|
|
.about-content {
|
|
flex-direction: column !important;
|
|
gap: 24px !important;
|
|
text-align: center;
|
|
}
|
|
|
|
.about-content > div {
|
|
width: 100% !important;
|
|
}
|
|
|
|
#footer {
|
|
padding: 30px 16px !important;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-links {
|
|
flex-direction: column !important;
|
|
gap: 12px !important;
|
|
margin-bottom: 16px !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.hero-section h1 {
|
|
font-size: 28px !important;
|
|
}
|
|
|
|
.hero-section p {
|
|
font-size: 14px !important;
|
|
}
|
|
|
|
.features-grid {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
|
|
.feature-card {
|
|
padding: 16px !important;
|
|
}
|
|
|
|
.hero-section .btn-group {
|
|
flex-direction: column !important;
|
|
}
|
|
|
|
.hero-section .btn-group a {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- 公共头部 -->
|
|
<div id="commonHeader"></div>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero-section" style="min-height: calc(100vh - 64px); display: flex; align-items: center; padding: 80px 24px 40px; background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #faf5ff 100%);">
|
|
<div style="max-width: 1000px; margin: 0 auto; width: 100%;">
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; position: relative; z-index: 1;">
|
|
<div>
|
|
<div class="hero-badge">
|
|
<span style="width: 8px; height: 8px; background: #4F9EDE; border-radius: 50%; display: inline-block;"></span>
|
|
<span style="font-size: 13px; color: #4F9EDE; font-weight: 500;">全新版本上线</span>
|
|
</div>
|
|
<h1 class="hero-title-anim" style="font-size: 42px; font-weight: 700; color: #1e293b; line-height: 1.2; margin-bottom: 16px;" id="siteName">简记memo</h1>
|
|
<p class="hero-desc-anim" style="font-size: 16px; color: #64748b; line-height: 1.7; margin-bottom: 28px;" id="siteDesc">集待办任务、账单记录、心情日记于一体的个人事务管理工具。简洁优雅的界面设计，让记录成为一种享受。</p>
|
|
<div class="btn-group hero-btn-anim" style="display: flex; gap: 12px; flex-wrap: wrap;">
|
|
<a href="/login" style="display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; background: linear-gradient(135deg, #4F9EDE 0%, #3A8BC9 100%); border-radius: 8px; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 12px rgba(79, 158, 222, 0.3); transition: all 0.25s ease;">
|
|
立即体验
|
|
</a>
|
|
<a href="#features" style="display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; color: #475569; font-size: 14px; font-weight: 500; text-decoration: none; transition: all 0.25s ease;">
|
|
了解更多
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-card-anim" style="position: relative;">
|
|
<div style="width: 380px; height: 380px; background: linear-gradient(135deg, rgba(79, 158, 222, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%); border-radius: 16px; display: flex; align-items: center; justify-content: center;">
|
|
<div style="width: 320px; height: 320px; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.06); padding: 20px;">
|
|
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;">
|
|
<span style="font-size: 15px; font-weight: 600; color: #1e293b;">今日待办</span>
|
|
<span style="font-size: 11px; color: #94a3b8;" id="currentDate">5月13日</span>
|
|
</div>
|
|
<div style="space-y: 10px;">
|
|
<div style="display: flex; align-items: center; gap: 10px; padding: 10px; background: #f8fafc; border-radius: 6px;">
|
|
<div style="width: 20px; height: 20px; border-radius: 50%; border: 2px solid #4F9EDE; display: flex; align-items: center; justify-content: center;">
|
|
<span style="color: #4F9EDE; font-size: 10px;">✓</span>
|
|
</div>
|
|
<span style="font-size: 13px; color: #1e293b; text-decoration: line-through; opacity: 0.6;">完成项目文档</span>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 10px; padding: 10px; background: #fef3c7; border-radius: 6px;">
|
|
<div style="width: 20px; height: 20px; border-radius: 50%; border: 2px solid #f59e0b; display: flex; align-items: center; justify-content: center;">
|
|
</div>
|
|
<span style="font-size: 13px; color: #1e293b;">参加会议</span>
|
|
<span style="margin-left: auto; padding: 3px 6px; background: rgba(245, 158, 11, 0.2); border-radius: 4px; font-size: 10px; color: #d97706;">重要</span>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 10px; padding: 10px; background: #f8fafc; border-radius: 6px;">
|
|
<div style="width: 20px; height: 20px; border-radius: 50%; border: 2px solid #cbd5e1; display: flex; align-items: center; justify-content: center;">
|
|
</div>
|
|
<span style="font-size: 13px; color: #64748b;">整理文件</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section id="features" style="padding: 60px 24px; background: #fff;">
|
|
<div style="max-width: 1000px; margin: 0 auto;">
|
|
<div style="text-align: center; margin-bottom: 48px;">
|
|
<span style="font-size: 13px; color: #4F9EDE; font-weight: 500;">功能特性</span>
|
|
<h2 style="font-size: 28px; font-weight: 700; color: #1e293b; margin-top: 8px; margin-bottom: 12px;" id="featureTitle">为什么选择简记memo</h2>
|
|
<p style="font-size: 15px; color: #64748b; max-width: 500px; margin: 0 auto;">简洁优雅的界面设计，强大实用的功能，帮助您更好地管理生活</p>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;">
|
|
<div class="feature-card" style="background: #f8fafc; border-radius: 8px; padding: 24px; transition: all 0.2s;">
|
|
<div style="width: 48px; height: 48px; background: linear-gradient(135deg, rgba(79, 158, 222, 0.1) 0%, rgba(79, 158, 222, 0.05) 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
|
|
<span style="font-size: 24px;">📝</span>
|
|
</div>
|
|
<h3 style="font-size: 16px; font-weight: 600; color: #1e293b; margin-bottom: 8px;">待办管理</h3>
|
|
<p style="font-size: 13px; color: #64748b; line-height: 1.5;">轻松创建和管理待办任务，设置优先级和截止日期，让您的日程井井有条。</p>
|
|
</div>
|
|
|
|
<div class="feature-card" style="background: #fef3c7; border-radius: 8px; padding: 24px; transition: all 0.2s;">
|
|
<div style="width: 48px; height: 48px; background: rgba(245, 158, 11, 0.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
|
|
<span style="font-size: 24px;">😊</span>
|
|
</div>
|
|
<h3 style="font-size: 16px; font-weight: 600; color: #1e293b; margin-bottom: 8px;">心情日记</h3>
|
|
<p style="font-size: 13px; color: #64748b; line-height: 1.5;">记录每一天的心情变化，用文字和表情记录生活的点点滴滴。</p>
|
|
</div>
|
|
|
|
<div class="feature-card" style="background: #dcfce7; border-radius: 8px; padding: 24px; transition: all 0.2s;">
|
|
<div style="width: 48px; height: 48px; background: rgba(34, 197, 94, 0.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
|
|
<span style="font-size: 24px;">💰</span>
|
|
</div>
|
|
<h3 style="font-size: 16px; font-weight: 600; color: #1e293b; margin-bottom: 8px;">账单记录</h3>
|
|
<p style="font-size: 13px; color: #64748b; line-height: 1.5;">便捷记录收支情况，分类统计一目了然，让理财变得简单。</p>
|
|
</div>
|
|
|
|
<div class="feature-card" style="background: #e0e7ff; border-radius: 8px; padding: 24px; transition: all 0.2s;">
|
|
<div style="width: 48px; height: 48px; background: rgba(99, 102, 241, 0.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
|
|
<span style="font-size: 24px;">🏆</span>
|
|
</div>
|
|
<h3 style="font-size: 16px; font-weight: 600; color: #1e293b; margin-bottom: 8px;">成长体系</h3>
|
|
<p style="font-size: 13px; color: #64748b; line-height: 1.5;">完成任务获得经验值，提升等级解锁成就，让记录更有成就感。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works -->
|
|
<section style="padding: 60px 24px; background: #f8fafc;">
|
|
<div style="max-width: 1000px; margin: 0 auto;">
|
|
<div style="text-align: center; margin-bottom: 48px;">
|
|
<span style="font-size: 13px; color: #4F9EDE; font-weight: 500;">使用流程</span>
|
|
<h2 style="font-size: 28px; font-weight: 700; color: #1e293b; margin-top: 8px;">简单三步开始记录</h2>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px;">
|
|
<div style="text-align: center;">
|
|
<div style="width: 72px; height: 72px; background: linear-gradient(135deg, #4F9EDE 0%, #3A8BC9 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;">
|
|
<span style="font-size: 32px;">1️⃣</span>
|
|
</div>
|
|
<h3 style="font-size: 16px; font-weight: 600; color: #1e293b; margin-bottom: 8px;">注册账号</h3>
|
|
<p style="font-size: 13px; color: #64748b;">使用邮箱快速注册，开启您的记录之旅</p>
|
|
</div>
|
|
<div style="text-align: center;">
|
|
<div style="width: 72px; height: 72px; background: linear-gradient(135deg, #4F9EDE 0%, #3A8BC9 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;">
|
|
<span style="font-size: 32px;">2️⃣</span>
|
|
</div>
|
|
<h3 style="font-size: 16px; font-weight: 600; color: #1e293b; margin-bottom: 8px;">创建任务</h3>
|
|
<p style="font-size: 13px; color: #64748b;">添加待办事项、记录心情或账单</p>
|
|
</div>
|
|
<div style="text-align: center;">
|
|
<div style="width: 72px; height: 72px; background: linear-gradient(135deg, #4F9EDE 0%, #3A8BC9 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;">
|
|
<span style="font-size: 32px;">3️⃣</span>
|
|
</div>
|
|
<h3 style="font-size: 16px; font-weight: 600; color: #1e293b; margin-bottom: 8px;">查看统计</h3>
|
|
<p style="font-size: 13px; color: #64748b;">查看完成进度、等级成长和成就</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section style="padding: 60px 24px; background: #fff;">
|
|
<div style="max-width: 600px; margin: 0 auto; text-align: center;">
|
|
<h2 style="font-size: 26px; font-weight: 700; color: #1e293b; margin-bottom: 12px;">开始您的记录之旅</h2>
|
|
<p style="font-size: 15px; color: #64748b; margin-bottom: 28px;" id="ctaDesc">加入简记memo，让每一天都值得记录</p>
|
|
<a href="/login" style="display: inline-flex; align-items: center; justify-content: center; padding: 14px 40px; background: linear-gradient(135deg, #4F9EDE 0%, #3A8BC9 100%); border-radius: 8px; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 12px rgba(79, 158, 222, 0.3);">
|
|
立即体验
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 公共底部 -->
|
|
<div id="commonFooter"></div>
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
|
|
<script src="https://unpkg.com/element-ui@2.15.14/lib/index.js"></script>
|
|
<script src="/static/js/config.js"></script>
|
|
<script src="/static/js/common-components.js"></script>
|
|
<script src="/static/js/toast.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.getElementById('commonHeader').innerHTML = renderCommonHeader('/');
|
|
document.getElementById('commonFooter').innerHTML = renderCommonFooter();
|
|
initCommonComponents();
|
|
|
|
// 设置动态内容
|
|
if (typeof SITE_CONFIG !== 'undefined') {
|
|
document.getElementById('siteName').textContent = SITE_CONFIG.name || '简记memo';
|
|
document.getElementById('featureTitle').textContent = '为什么选择' + (SITE_CONFIG.name || '简记memo');
|
|
document.getElementById('ctaDesc').textContent = '加入' + (SITE_CONFIG.name || '简记memo') + '，让每一天都值得记录';
|
|
}
|
|
if (typeof APP_INFO !== 'undefined') {
|
|
document.getElementById('siteDesc').textContent = APP_INFO.description + '。简洁优雅的界面设计，让记录成为一种享受。';
|
|
}
|
|
|
|
// 设置当前日期
|
|
const today = new Date();
|
|
document.getElementById('currentDate').textContent = today.getMonth() + 1 + '月' + today.getDate() + '日';
|
|
|
|
const navLinks = document.querySelectorAll('a.nav-link');
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
if (this.getAttribute('href') === '#features') {
|
|
e.preventDefault();
|
|
document.querySelector('#features').scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
});
|
|
});
|
|
|
|
// 头部滚动效果
|
|
const header = document.querySelector('#commonHeader header');
|
|
if (header) {
|
|
let ticking = false;
|
|
window.addEventListener('scroll', function() {
|
|
if (!ticking) {
|
|
window.requestAnimationFrame(function() {
|
|
if (window.scrollY > 10) {
|
|
header.classList.add('header-scrolled');
|
|
} else {
|
|
header.classList.remove('header-scrolled');
|
|
}
|
|
ticking = false;
|
|
});
|
|
ticking = true;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
<script src="/static/js/auth.js"></script>
|
|
</body>
|
|
</html> |