generated from dellevin/template
1
This commit is contained in:
DelLevin-Home
845
src/views/Home.vue
Normal file
845
src/views/Home.vue
Normal file
@@ -0,0 +1,845 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<!-- 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">
|
||||
<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="stat-item">
|
||||
<span class="stat-number">webdav支持</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">无需注册</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">本地存储</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="phone-mockup">
|
||||
<div class="phone-screen">
|
||||
<div class="mockup-header">
|
||||
<span class="mockup-title">观影</span>
|
||||
<span class="mockup-icon"></span>
|
||||
</div>
|
||||
<div class="mockup-tabs">
|
||||
<span class="active">观影</span>
|
||||
<span>阅读</span>
|
||||
<span>笔记</span>
|
||||
</div>
|
||||
<div class="mockup-filters">
|
||||
<span class="filter active">已看</span>
|
||||
<span class="filter">在看</span>
|
||||
<span class="filter">想看</span>
|
||||
</div>
|
||||
<div class="mockup-grid">
|
||||
<div class="mockup-card">
|
||||
<div class="card-image card-image-1"></div>
|
||||
<div class="card-title">楚门的世界</div>
|
||||
<div class="card-rating">★ 9.5</div>
|
||||
</div>
|
||||
<div class="mockup-card">
|
||||
<div class="card-image card-image-2"></div>
|
||||
<div class="card-title">我的三体</div>
|
||||
<div class="card-rating">★ 9.3</div>
|
||||
</div>
|
||||
<div class="mockup-card">
|
||||
<div class="card-image card-image-3"></div>
|
||||
<div class="card-title">仙剑奇侠传</div>
|
||||
<div class="card-rating">★ 9.2</div>
|
||||
</div>
|
||||
<div class="mockup-card">
|
||||
<div class="card-image card-image-4"></div>
|
||||
<div class="card-title">这个杀手不太冷</div>
|
||||
<div class="card-rating">★ 9.7</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Preview -->
|
||||
<section class="features-preview">
|
||||
<div class="container">
|
||||
<h2 class="section-title">核心功能</h2>
|
||||
<p class="section-subtitle">三大模块，全面记录你的生活点滴</p>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<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"/>
|
||||
<line x1="7" y1="2" x2="7" y2="22"/>
|
||||
<line x1="17" y1="2" x2="17" y2="22"/>
|
||||
<line x1="2" y1="12" x2="22" y2="12"/>
|
||||
<line x1="2" y1="7" x2="7" y2="7"/>
|
||||
<line x1="2" y1="17" x2="7" y2="17"/>
|
||||
<line x1="17" y1="17" x2="22" y2="17"/>
|
||||
<line x1="17" y1="7" x2="22" y2="7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>观影记录</h3>
|
||||
<p>记录已看、在看、想看的电影，添加评分和观影笔记，建立自己的观影档案。</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<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"/>
|
||||
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>阅读管理</h3>
|
||||
<p>追踪阅读进度，记录已读、在读、准备读的书籍，写下读书心得。</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<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"/>
|
||||
<polyline points="14 2 14 8 20 8"/>
|
||||
<line x1="16" y1="13" x2="8" y2="13"/>
|
||||
<line x1="16" y1="17" x2="8" y2="17"/>
|
||||
<polyline points="10 9 9 9 8 9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>笔记整理</h3>
|
||||
<p>随时记录灵感和想法，支持标签分类，让知识井井有条。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features-cta">
|
||||
<router-link to="/features" class="btn btn-outline">查看全部功能</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Highlights -->
|
||||
<section class="highlights">
|
||||
<div class="container">
|
||||
<div class="highlight-row">
|
||||
<div class="highlight-content">
|
||||
<h3>简洁优雅的设计</h3>
|
||||
<p>采用极简黑白灰配色，界面清爽无干扰。专注于内容本身，让记录成为一种享受。</p>
|
||||
<ul class="highlight-list">
|
||||
<li>黑白灰极简配色方案</li>
|
||||
<li>扁平化设计风格</li>
|
||||
<li>清晰的信息层级</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="highlight-visual">
|
||||
<div class="visual-card">
|
||||
<div class="visual-header">
|
||||
<span>我的</span>
|
||||
<span>⚙</span>
|
||||
</div>
|
||||
<div class="visual-profile">
|
||||
<div class="avatar"></div>
|
||||
<div class="info">
|
||||
<div class="name">Mook</div>
|
||||
<div class="bio">好运不会眷顾一无所有之人。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visual-stats">
|
||||
<div class="v-stat">
|
||||
<div class="v-label">观影</div>
|
||||
<div class="v-value">9<span>场</span></div>
|
||||
</div>
|
||||
<div class="v-stat">
|
||||
<div class="v-label">阅读</div>
|
||||
<div class="v-value">5<span>本</span></div>
|
||||
</div>
|
||||
<div class="v-stat">
|
||||
<div class="v-label">笔记</div>
|
||||
<div class="v-value">5<span>条</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="highlight-row reverse">
|
||||
<div class="highlight-content">
|
||||
<h3>数据安全可控</h3>
|
||||
<p>数据本地存储，隐私完全掌控。支持本地备份和云备份，再也不怕数据丢失。</p>
|
||||
<ul class="highlight-list">
|
||||
<li>本地 SQLite 数据库存储</li>
|
||||
<li>本地备份zip导出</li>
|
||||
<li>WebDAV 云备份支持</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="highlight-visual">
|
||||
<div class="visual-card dark">
|
||||
<div class="backup-item">
|
||||
<span class="backup-icon"></span>
|
||||
<span>数据统计</span>
|
||||
<span class="arrow">›</span>
|
||||
</div>
|
||||
<div class="backup-item">
|
||||
<span class="backup-icon"></span>
|
||||
<span>本地备份</span>
|
||||
<span class="arrow">›</span>
|
||||
</div>
|
||||
<div class="backup-item">
|
||||
<span class="backup-icon"></span>
|
||||
<span>云备份</span>
|
||||
<span class="arrow">›</span>
|
||||
</div>
|
||||
<div class="backup-item">
|
||||
<span class="backup-icon"></span>
|
||||
<span>回收站</span>
|
||||
<span class="arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Download Section -->
|
||||
<section id="download" class="download">
|
||||
<div class="container">
|
||||
<h2 class="section-title">开始使用</h2>
|
||||
<p class="section-subtitle">目前仅支持 Android 平台，iOS 版本正在开发中</p>
|
||||
<div class="download-options">
|
||||
<div class="download-card">
|
||||
<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"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Android</h3>
|
||||
<p>支持 Android 5.0 及以上版本</p>
|
||||
<a href="https://mooknote.iletter.top/download/MookNote_V0.1.5.apk" class="btn btn-primary">下载 APK</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="version-info">
|
||||
<p>当前版本：v0.1.5 | 更新日期：2025年3月</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Home',
|
||||
methods: {
|
||||
showDownloadTip() {
|
||||
alert('APK 下载功能即将上线，敬请期待！')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
min-height: calc(100vh - 64px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80px 24px;
|
||||
background: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 560px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
padding: 6px 14px;
|
||||
background: var(--color-bg-secondary);
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 56px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 16px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
font-size: 16px;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.8;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 28px;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #333333;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--color-bg-secondary);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #EBEBEB;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
display: block;
|
||||
font-size: 25px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-muted);
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* Phone Mockup */
|
||||
.hero-visual {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.phone-mockup {
|
||||
width: 280px;
|
||||
height: 560px;
|
||||
background: var(--color-text);
|
||||
border-radius: 36px;
|
||||
padding: 12px;
|
||||
box-shadow: 0 25px 80px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.phone-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mockup-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mockup-tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mockup-tabs .active {
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mockup-tabs .active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -9px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background: var(--color-text);
|
||||
}
|
||||
|
||||
.mockup-tabs span:not(.active) {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.mockup-filters {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.filter {
|
||||
padding: 6px 14px;
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
background: var(--color-bg-secondary);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.filter.active {
|
||||
background: var(--color-text);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mockup-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
padding: 0 16px 16px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mockup-card {
|
||||
background: var(--color-bg-secondary);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
aspect-ratio: 3/4;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.card-image-1 {
|
||||
background-image: url('~@/assets/img/chumendeshijie.jpg');
|
||||
}
|
||||
|
||||
.card-image-2 {
|
||||
background-image: url('~@/assets/img/wodesanti.jpg');
|
||||
}
|
||||
|
||||
.card-image-3 {
|
||||
background-image: url('~@/assets/img/xianjianqixiazhuan.jpg');
|
||||
}
|
||||
|
||||
.card-image-4 {
|
||||
background-image: url('~@/assets/img/zhegeshashoubutaileng.jpg');
|
||||
}
|
||||
|
||||
.card-title {
|
||||
padding: 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-rating {
|
||||
padding: 0 8px 8px;
|
||||
font-size: 10px;
|
||||
color: #FFB800;
|
||||
}
|
||||
|
||||
/* Features Preview */
|
||||
.features-preview {
|
||||
padding: 100px 24px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 16px;
|
||||
color: var(--color-text-secondary);
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 32px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 40px 32px;
|
||||
background: var(--color-bg-secondary);
|
||||
border-radius: 16px;
|
||||
text-align: center;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
margin: 0 auto 24px;
|
||||
background: white;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.feature-icon svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
font-size: 15px;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.features-cta {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Highlights */
|
||||
.highlights {
|
||||
padding: 100px 24px;
|
||||
background: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.highlight-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 80px;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.highlight-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.highlight-row.reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.highlight-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.highlight-content h3 {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.highlight-content p {
|
||||
font-size: 16px;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.8;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.highlight-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.highlight-list li {
|
||||
padding: 10px 0;
|
||||
padding-left: 28px;
|
||||
position: relative;
|
||||
font-size: 15px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.highlight-list li::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--color-text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.highlight-visual {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.visual-card {
|
||||
width: 280px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.visual-card.dark {
|
||||
background: var(--color-text);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.visual-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.visual-profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.info .name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.info .bio {
|
||||
font-size: 13px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.visual-stats {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.v-stat {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.v-label {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.v-value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.v-value span {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--color-text-muted);
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.backup-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.backup-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.backup-icon {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-left: auto;
|
||||
color: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
/* Download Section */
|
||||
.download {
|
||||
padding: 100px 24px;
|
||||
background: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.download-options {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 32px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.download-card {
|
||||
padding: 48px 40px;
|
||||
background: var(--color-bg-secondary);
|
||||
border-radius: 16px;
|
||||
text-align: center;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.download-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 auto 24px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.download-icon svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.download-card h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.download-card p {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.version-info {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (min-width: 1024px) {
|
||||
.hero {
|
||||
gap: 180px;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.highlight-row,
|
||||
.highlight-row.reverse {
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.highlight-content h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.download-options {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user