573 lines
19 KiB
HTML
573 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<link rel="icon" href="https://www.huaruyu.com/static/favicon.ico" type="image/x-icon">
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>马上行计划管理</title>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<style>
|
||
/* 全局样式重置与基础设置：关键添加body弹性布局，限制最大高度100vh */
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
|
||
}
|
||
|
||
:root {
|
||
/* 暗黑模式变量 */
|
||
--bg-color: #0d1117;
|
||
--card-bg: #161b22;
|
||
--text-color: #e6edf3;
|
||
--text-secondary: #8b949e;
|
||
--accent-blue: #58a6ff;
|
||
--accent-green: #10b981;
|
||
--border-color: rgba(56, 139, 253, 0.1);
|
||
--border-hover: rgba(56, 139, 253, 0.3);
|
||
--shadow-light: 0 0 2vw rgba(56, 139, 253, 0.05);
|
||
--shadow-medium: 0 0 3vw rgba(56, 139, 253, 0.15);
|
||
--shadow-green: 0 0 3vw rgba(16, 185, 129, 0.05);
|
||
}
|
||
|
||
.light-mode {
|
||
/* 明亮模式变量 */
|
||
--bg-color: #f5f7fa;
|
||
--card-bg: #ffffff;
|
||
--text-color: #2c3e50;
|
||
--text-secondary: #7f8c8d;
|
||
--accent-blue: #3498db;
|
||
--accent-green: #2ecc71;
|
||
--border-color: rgba(0, 0, 0, 0.05);
|
||
--border-hover: rgba(0, 0, 0, 0.1);
|
||
--shadow-light: 0 0.4vw 1.2vw rgba(0, 0, 0, 0.05);
|
||
--shadow-medium: 0 1vw 2.5vw rgba(0, 0, 0, 0.08);
|
||
--shadow-green: 0 0 3vw rgba(46, 204, 113, 0.1);
|
||
}
|
||
|
||
/* 核心修改：body设置为弹性布局，高度100vh，禁止溢出 */
|
||
body {
|
||
background-color: var(--bg-color);
|
||
background-image:
|
||
radial-gradient(circle at 10% 20%, rgba(30, 64, 175, 0.1) 0%, transparent 20%),
|
||
radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 20%);
|
||
line-height: 1.6;
|
||
color: var(--text-color);
|
||
height: 100vh; /* 固定body高度为视口高度 */
|
||
max-height: 100vh; /* 强制最大高度不超过视口高度 */
|
||
overflow: hidden; /* 禁止页面滚动（确保不超出视口） */
|
||
display: flex; /* 弹性布局：让容器垂直居中并分配高度 */
|
||
flex-direction: column; /* 子元素垂直排列 */
|
||
padding: 1vh 0; /* 轻微上下内边距，避免贴边 */
|
||
}
|
||
|
||
/* 容器样式：弹性布局子元素，占据剩余高度，垂直分配空间 */
|
||
.container {
|
||
max-width: 90vw;
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
padding: 0 2vw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1; /* 容器占据body剩余高度，确保内容填充视口 */
|
||
}
|
||
|
||
/* 主题切换按钮：调整定位，避免在小屏被遮挡 */
|
||
.theme-toggle {
|
||
position: absolute;
|
||
top: 1.5vh;
|
||
right: 2vw;
|
||
background: var(--card-bg);
|
||
border: 0.1vw solid var(--border-color);
|
||
color: var(--accent-blue);
|
||
width: 5vw;
|
||
height: 5vw;
|
||
max-width: 40px;
|
||
max-height: 40px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
box-shadow: var(--shadow-light);
|
||
transition: all 0.3s ease;
|
||
z-index: 100;
|
||
}
|
||
|
||
.theme-toggle:hover {
|
||
transform: rotate(90deg);
|
||
box-shadow: 0 0 1.5vw rgba(88, 166, 255, 0.3);
|
||
}
|
||
|
||
.theme-toggle i {
|
||
transition: opacity 0.3s ease;
|
||
font-size: 2vw;
|
||
max-font-size: 16px;
|
||
}
|
||
|
||
.light-mode .theme-toggle i.fa-moon {
|
||
opacity: 0;
|
||
position: absolute;
|
||
}
|
||
|
||
.theme-toggle i.fa-sun {
|
||
opacity: 0;
|
||
position: absolute;
|
||
}
|
||
|
||
.light-mode .theme-toggle i.fa-sun {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 标题区域：弹性布局子元素，控制高度占比 */
|
||
.header {
|
||
text-align: center;
|
||
margin-bottom: 2vh; /* 减少底部间距，适配100vh高度 */
|
||
padding: 2vh 0; /* 减少内边距，避免高度溢出 */
|
||
background-color: var(--card-bg);
|
||
border-radius: 1vw;
|
||
border: 0.1vw solid var(--border-color);
|
||
box-shadow: var(--shadow-green);
|
||
position: relative;
|
||
overflow: hidden;
|
||
flex-shrink: 0; /* 禁止标题区域被压缩 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.5vh; /* 内部元素间距 */
|
||
justify-content: center;
|
||
}
|
||
|
||
.header::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 0.2vh;
|
||
background: linear-gradient(90deg,
|
||
rgba(56, 139, 253, 0) 0%,
|
||
var(--accent-blue) 50%,
|
||
rgba(56, 139, 253, 0) 100%);
|
||
}
|
||
|
||
.header::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 0.2vh;
|
||
background: linear-gradient(90deg,
|
||
rgba(16, 185, 129, 0) 0%,
|
||
var(--accent-green) 50%,
|
||
rgba(16, 185, 129, 0) 100%);
|
||
}
|
||
|
||
.header:hover {
|
||
box-shadow: 0 0 4vw rgba(16, 185, 129, 0.1);
|
||
border-color: var(--border-hover);
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 3vw;
|
||
max-font-size: 2.2rem; /* 微调最大字体，适配紧凑高度 */
|
||
color: var(--accent-blue);
|
||
font-weight: 600;
|
||
text-shadow: 0 0 1vw rgba(88, 166, 255, 0.2);
|
||
position: relative;
|
||
}
|
||
|
||
.header h1::after {
|
||
font-size: 1.2vw;
|
||
max-font-size: 1rem;
|
||
vertical-align: super;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* 功能描述区域 - 位于标题和按钮中间 */
|
||
.features {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
gap: 2vw;
|
||
padding: 0 5vw;
|
||
margin: 0.5vh 0;
|
||
}
|
||
|
||
.feature-item {
|
||
font-size: 1.3vw;
|
||
max-font-size: 0.9rem;
|
||
color: var(--text-secondary);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5vw;
|
||
}
|
||
|
||
.feature-item i {
|
||
color: var(--accent-green);
|
||
font-size: 1.4vw;
|
||
}
|
||
|
||
/* 立即体验按钮保持原有样式不变 */
|
||
.try-btn {
|
||
display: inline-block;
|
||
padding: 12px 36px;
|
||
background-color: var(--card-bg);
|
||
color: var(--accent-green);
|
||
text-decoration: none;
|
||
font-size: 1.2rem;
|
||
border-radius: 4px;
|
||
font-weight: 500;
|
||
transition: all 0.3s ease;
|
||
border: 1px solid var(--accent-green);
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
margin-top: 0.5vh;
|
||
}
|
||
|
||
.try-btn::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg,
|
||
rgba(16, 185, 129, 0) 0%,
|
||
rgba(16, 185, 129, 0.2) 50%,
|
||
rgba(16, 185, 129, 0) 100%);
|
||
transition: all 0.6s ease;
|
||
}
|
||
|
||
.try-btn:hover {
|
||
color: #fff;
|
||
background-color: var(--accent-green);
|
||
box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.try-btn:hover::before {
|
||
left: 100%;
|
||
}
|
||
|
||
/* 二维码区域：弹性布局，垂直居中，控制高度占比 */
|
||
.qrcode-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center; /* 二维码垂直居中，适配100vh */
|
||
gap: 6vw; /* 减少间距，节省横向空间 */
|
||
flex-wrap: wrap;
|
||
margin: 1vh 0; /* 上下轻微间距，避免贴边 */
|
||
flex: 1; /* 二维码区域占据容器剩余高度，确保垂直居中 */
|
||
}
|
||
|
||
.qrcode-card {
|
||
width: 38vw; /* 增加卡片宽度以容纳更大的二维码 */
|
||
max-width: 400px; /* 增加最大宽度 */
|
||
background-color: var(--card-bg);
|
||
border-radius: 1vw;
|
||
padding: 2.5vh 1.5vw; /* 减少卡片内边距 */
|
||
text-align: center;
|
||
border: 0.1vw solid var(--border-color);
|
||
box-shadow: var(--shadow-light);
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
flex-shrink: 0; /* 禁止卡片被压缩 */
|
||
}
|
||
|
||
.qrcode-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 0.1vh;
|
||
background: linear-gradient(90deg,
|
||
rgba(56, 139, 253, 0) 0%,
|
||
var(--accent-blue) 50%,
|
||
rgba(56, 139, 253, 0) 100%);
|
||
}
|
||
|
||
.qrcode-card:hover {
|
||
transform: translateY(-0.5vh);
|
||
box-shadow: var(--shadow-medium);
|
||
border-color: var(--border-hover);
|
||
}
|
||
|
||
.qrcode-card h2 {
|
||
font-size: 1.7vw;
|
||
max-font-size: 1.3rem; /* 缩小卡片标题 */
|
||
color: var(--text-color);
|
||
margin-bottom: 2vh; /* 减少标题底部间距 */
|
||
font-weight: 500;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.8vw;
|
||
}
|
||
|
||
.qrcode-card h2 i {
|
||
color: var(--accent-blue);
|
||
text-shadow: 0 0 1vw rgba(88, 166, 255, 0.3);
|
||
font-size: 1.7vw;
|
||
max-font-size: 1.3rem;
|
||
}
|
||
|
||
/* 放大二维码图片 */
|
||
.qrcode-img {
|
||
width: 24vw; /* 增大二维码尺寸 */
|
||
height: 24vw;
|
||
max-width: 220px; /* 增大最大尺寸 */
|
||
max-height: 220px;
|
||
object-fit: contain;
|
||
border: 0.1vw solid var(--border-color);
|
||
padding: 0.8vw;
|
||
border-radius: 0.5vw;
|
||
background-color: #fff;
|
||
box-shadow: var(--shadow-light);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.qrcode-card:hover .qrcode-img {
|
||
box-shadow: 0 0 2vw rgba(56, 139, 253, 0.2);
|
||
}
|
||
|
||
/* 扫描提示 */
|
||
.scan-prompt {
|
||
margin-top: 1.5vh; /* 减少提示顶部间距 */
|
||
font-size: 1.1vw;
|
||
max-font-size: 0.85rem; /* 缩小提示文字 */
|
||
color: var(--text-secondary);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 0.8vw;
|
||
}
|
||
|
||
.scan-prompt:hover {
|
||
cursor: pointer; /* 确保悬停时显示小手图标 */
|
||
}
|
||
|
||
.scan-prompt i {
|
||
color: var(--accent-green);
|
||
animation: pulse 2s infinite;
|
||
font-size: 1.1vw;
|
||
max-font-size: 0.85rem;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0% { opacity: 0.6; }
|
||
50% { opacity: 1; }
|
||
100% { opacity: 0.6; }
|
||
}
|
||
|
||
/* 页脚样式：固定在底部，控制高度 */
|
||
.footer {
|
||
text-align: center;
|
||
padding: 1vh 0; /* 减少页脚内边距 */
|
||
border-top: 0.1vw solid var(--border-color);
|
||
position: relative;
|
||
flex-shrink: 0; /* 禁止页脚被压缩 */
|
||
margin-top: 1vh;
|
||
}
|
||
|
||
.footer::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -0.3vh; /* 微调线条位置 */
|
||
left: 0;
|
||
width: 100%;
|
||
height: 0.1vh;
|
||
background: linear-gradient(90deg,
|
||
rgba(56, 139, 253, 0) 0%,
|
||
var(--accent-blue) 50%,
|
||
rgba(56, 139, 253, 0) 100%);
|
||
}
|
||
|
||
.footer a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
font-size: 1.1vw;
|
||
max-font-size: 0.85rem; /* 缩小页脚文字 */
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
padding: 0 0.5vw;
|
||
}
|
||
|
||
.footer a:hover {
|
||
color: var(--accent-blue);
|
||
}
|
||
|
||
.footer a::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -0.2vh;
|
||
left: 0;
|
||
width: 0;
|
||
height: 0.1vh;
|
||
background-color: var(--accent-blue);
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.footer a:hover::after {
|
||
width: 100%;
|
||
}
|
||
|
||
/* 装饰性元素：适配100vh高度 */
|
||
.tech-pattern {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100vh; /* 固定装饰背景高度为视口高度 */
|
||
z-index: -1;
|
||
opacity: 0.05;
|
||
background-image:
|
||
linear-gradient(var(--accent-blue) 0.1vh, transparent 0.1vh),
|
||
linear-gradient(90deg, var(--accent-blue) 0.1vh, transparent 0.1vh);
|
||
background-size: 4vw 4vh;
|
||
pointer-events: none;
|
||
transition: opacity 0.5s ease;
|
||
}
|
||
|
||
.light-mode .tech-pattern {
|
||
opacity: 0.03;
|
||
}
|
||
|
||
/* 响应式适配：极端小屏补充调整 */
|
||
@media (max-width: 768px) {
|
||
.features {
|
||
flex-direction: column;
|
||
gap: 0.8vh;
|
||
padding: 0 3vw;
|
||
}
|
||
|
||
.feature-item {
|
||
font-size: 2vw;
|
||
justify-content: center;
|
||
}
|
||
|
||
.feature-item i {
|
||
font-size: 2.2vw;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.qrcode-container {
|
||
gap: 3vh; /* 小屏垂直排列二维码，用纵向间距 */
|
||
flex-direction: column; /* 二维码上下排列，避免横向溢出 */
|
||
}
|
||
.qrcode-card {
|
||
width: 80vw; /* 小屏卡片占满80%视口宽 */
|
||
max-width: none; /* 取消最大宽度限制，充分利用小屏 */
|
||
}
|
||
.header h1 {
|
||
font-size: 4vw; /* 小屏标题字体稍大，保证可读性 */
|
||
}
|
||
.feature-item {
|
||
font-size: 2.5vw;
|
||
}
|
||
.qrcode-img {
|
||
width: 50vw;
|
||
height: 50vw;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="tech-pattern"></div>
|
||
<button class="theme-toggle" id="themeToggle">
|
||
<i class="fas fa-moon"></i>
|
||
<i class="fas fa-sun"></i>
|
||
</button>
|
||
<div class="container">
|
||
<!-- 标题区域 -->
|
||
<div class="header">
|
||
<h1>马上行计划管理</h1>
|
||
|
||
<!-- 功能描述区域 - 位于标题和按钮中间 -->
|
||
<div class="features">
|
||
<div class="feature-item">
|
||
<i class="fas fa-list-check"></i>
|
||
<span>计划清单</span>
|
||
</div>
|
||
<div class="feature-item">
|
||
<i class="fas fa-th-large"></i>
|
||
<span>四象限</span>
|
||
</div>
|
||
<div class="feature-item">
|
||
<i class="fas fa-calendar"></i>
|
||
<span>日历视图</span>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="/todo" class="try-btn">立即体验</a>
|
||
</div>
|
||
|
||
<!-- 二维码展示区域 -->
|
||
<div class="qrcode-container">
|
||
<div class="qrcode-card">
|
||
<h2><i class="fab fa-weixin"></i>公众号</h2>
|
||
<img src="https://www.huaruyu.com/static/gongzhonghao.jpg" alt="马上行计划管理公众号二维码" class="qrcode-img">
|
||
<div class="scan-prompt" id="gongzhonghao">
|
||
<i class="fas fa-arrow-down"></i> 扫描关注获取更多功能
|
||
</div>
|
||
</div>
|
||
<div class="qrcode-card">
|
||
<h2><i class="fab fa-weixin"></i>小程序</h2>
|
||
<img src="https://www.huaruyu.com/static/pc-Web.jpg" alt="马上行计划管理小程序二维码" class="qrcode-img">
|
||
<div class="scan-prompt" id="xiaochengxu">
|
||
<i class="fas fa-arrow-down"></i> 扫描直接使用应用
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 页脚区域 -->
|
||
<footer class="footer">
|
||
<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备18061417号-1</a>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
// 主题切换功能
|
||
const themeToggle = document.getElementById('themeToggle');
|
||
const htmlElement = document.documentElement;
|
||
|
||
if (localStorage.getItem('theme') === 'light' ||
|
||
(!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: light)').matches)) {
|
||
htmlElement.classList.add('light-mode');
|
||
}
|
||
|
||
themeToggle.addEventListener('click', () => {
|
||
htmlElement.classList.toggle('light-mode');
|
||
localStorage.setItem('theme', htmlElement.classList.contains('light-mode') ? 'light' : 'dark');
|
||
});
|
||
|
||
// 二维码下载功能（修复文件名与链接）
|
||
const gongzhonghao = document.getElementById('gongzhonghao');
|
||
const xiaochengxu = document.getElementById('xiaochengxu');
|
||
|
||
gongzhonghao.addEventListener('click', () => {
|
||
const a = document.createElement('a');
|
||
a.download = '马上行计划管理公众号.png';
|
||
a.href = '/static/gongzhonghao.jpg';
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
});
|
||
|
||
xiaochengxu.addEventListener('click', () => {
|
||
const a = document.createElement('a');
|
||
a.download = '马上行计划管理小程序.png';
|
||
a.href = '/static/pc-Web.png';
|
||
document.body.appendChild(a);
|
||
a.click();
|
||
document.body.removeChild(a);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|