分享一个“显化应用”的完整提示词，我觉的生成后的效果很不错，供佬们参考使用！
使用工具：
cherry studio
模型：
gemini-flash-latest（使用的薄荷佬公益站的模型，再次感谢薄荷佬）
效果展示：
直接发送提示词生成的效果（个人感觉这个效果很舒服）
完整提示词
（自己可以在产品需求中替换自己的来生成）
你是一位资深APP UI设计师，现需根据以下产品需求创建UI方案，最终生成HTML完整代码，APP中的文字为中文：
## 产品需求：
应用类型：显化应用
### 核心模块：
#### 基础功能
## 技术规格：
单个HTML每行为4个横向排列的页面预览，可以有多行；代码需要包含所有功能页面；
▸ 画板尺寸：375x812（带1px描边模拟手机边框）；
▸ 必须包含：
矢量图标系统（使用<symbol>定义）
动态折线图（stroke-dasharray动画）
卡片悬浮效果（通过filter实现）
图片占位使用<image>标签外链unsplash
## 新视觉风格：科技感高交互设计（Neumorphism）
1. 视觉特征
1.1 色彩风格
冷色调为主：
常用蓝色、紫色、黑色、银色等冷色调，搭配高亮的霓虹色（如蓝绿、紫粉、橙黄）作为点缀。
渐变与光效：
大量使用渐变色、发光效果和高光线条，营造出未来感和科技氛围。
暗色模式：
多采用暗黑背景，突出内容和发光元素，增强沉浸感。
1.2 材质与纹理
玻璃拟态（Glassmorphism）：
半透明的玻璃质感，搭配模糊效果，增强科技感和层次感。
金属与光泽：
元素表面可能带有金属质感或光泽反射，增加高级感。
网格与线条：
背景或装饰中常用网格、几何线条或动态粒子，突出科技元素。
2. 动效设计
2.1 高交互动画
微交互：
按钮、滑块、图标等交互元素在点击、滑动时有反馈动画，如轻微弹跳、缩放或发光。
加载动画：
使用动态线条、旋转粒子或数据流效果，减少等待的无聊感。
页面切换：
页面切换时采用平滑过渡、翻页或层叠动画，增强流畅感。
2.2 数据动态展示
实时更新：
数据图表（如折线图、柱状图）动态更新，模拟流畅的数据流动。
数字滚动：
数字变化时使用滚动或渐变效果，突出科技感。
2.3 3D动态效果
3D元素：
使用3D模型或动态图形（如旋转地球、立体图标）增强空间感。
视差滚动：
滑动页面时，前景和背景以不同速度移动，增加沉浸感。
3. 文字设计
3.1 字体风格
简洁现代的无衬线字体：
常用未来感强的字体（如Roboto、SF Pro、Futura）。
字体粗细对比：
标题文字较粗，正文文字较细，突出层次感。
几何感字体：
字体设计可能带有几何线条或断笔效果，增强未来感。
3.2 字体颜色
高对比度：
在深色背景下使用亮白、霓虹蓝、荧光绿等高亮颜色。
渐变文字：
部分标题或装饰性文字使用渐变色，增加科技氛围。
动态文字：
文字可能带有发光、闪烁或滚动效果，增强动感。
4. 交互设计
4.1 手势操作
支持多种手势（如滑动、长按、双击），提升操作的自由度和趣味性。
动画反馈与手势紧密结合，提供自然流畅的体验。
4.2 语音与AI交互
集成语音助手或AI功能，支持语音指令、智能推荐和个性化服务。
4.3 实时反馈
用户操作后立即提供反馈，如按钮变色、数据更新、动态提示等。
5. 布局与信息架构
5.1 模块化布局
界面分区清晰，数据和功能以卡片或模块形式展示，便于快速浏览和操作。
常用网格布局或分层布局，体现科技感的秩序美。
5.2 信息层次
重要信息通过字体大小、颜色或动态效果突出，次要信息淡化处理。
使用留白和对齐方式优化阅读体验，避免信息过载。
6. 技术感元素
动态粒子效果：
背景或交互中加入动态粒子（如光点、数据流），增强科技氛围。
全息投影风格：
界面元素可能模拟全息投影的透明、悬浮效果。
未来感图标：
图标设计简洁而富有未来感，可能带有光效或动态变化。
生成的效果图的html源码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显化应用 UI/UX 方案 (科技感)</title>
<style>
/* ==================================== */
/* 0. 全局样式与视觉风格 */
/* ==================================== */
:root {
--color-bg-dark: #0D0D1A; /* 深沉的暗黑背景 */
--color-accent-blue: #00E4FF; /* 霓虹蓝 */
--color-accent-purple: #9D5AFF; /* 霓虹紫 */
--color-text-light: #E0E0FF;
--color-glass-bg: rgba(255, 255, 255, 0.05);
--color-glass-border: rgba(255, 255, 255, 0.15);
--font-stack: 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;
}
body {
background-color: #1a1a2e; /* 外部背景 */
display: flex;
flex-direction: column;
align-items: center;
padding: 40px;
font-family: var(--font-stack);
margin: 0;
gap: 40px;
}
/* 容器布局：每行4个手机预览 */
.preview-row {
display: flex;
gap: 20px;
justify-content: center;
width: 100%;
}
/* 手机画板模拟 */
.app-container {
width: 375px;
height: 812px;
border: 1px solid var(--color-accent-blue); /* 模拟手机边框 */
border-radius: 40px;
overflow: hidden;
position: relative;
background-color: var(--color-bg-dark);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px var(--color-accent-purple);
flex-shrink: 0;
}
/* 状态栏模拟 */
.status-bar {
height: 44px;
background: rgba(0, 0, 0, 0.1);
color: var(--color-text-light);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
font-size: 14px;
position: relative;
z-index: 10;
}
.status-bar::before {
content: ' ';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 10px;
background: #000;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
/* 标题样式 */
h2 {
font-size: 24px;
color: var(--color-text-light);
margin-bottom: 20px;
letter-spacing: 1px;
text-shadow: 0 0 8px var(--color-accent-blue); /* 霓虹光效 */
}
.title-sub {
font-size: 14px;
color: #AAAAFF;
}
/* 卡片悬浮效果 (Glassmorphism + Filter) */
.glass-card {
background: var(--color-glass-bg);
backdrop-filter: blur(15px);
border: 1px solid var(--color-glass-border);
border-radius: 20px;
padding: 20px;
margin: 15px 0;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
position: relative;
/* 悬浮交互：使用 filter 实现提亮和阴影提升 */
}
.glass-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
/* 使用 filter 增强视觉悬浮感和科技感 */
filter: brightness(1.1) drop-shadow(0 0 10px var(--color-accent-blue));
}
/* 按钮与交互元素 */
.btn-neon {
background: linear-gradient(45deg, var(--color-accent-blue), var(--color-accent-purple));
color: var(--color-bg-dark);
padding: 12px 25px;
border-radius: 12px;
border: none;
font-weight: bold;
text-align: center;
cursor: pointer;
box-shadow: 0 0 15px rgba(0, 228, 255, 0.5);
transition: all 0.2s;
}
.btn-neon:active {
transform: scale(0.98);
box-shadow: 0 0 5px var(--color-accent-blue);
}
/* 网格/科技感线条背景 */
.grid-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.1;
background-size: 40px 40px;
background-image: linear-gradient(to right, #2c2c54 1px, transparent 1px),
linear-gradient(to bottom, #2c2c54 1px, transparent 1px);
z-index: 0;
}
/* ==================================== */
/* 1. 矢量图标系统 (SVG Symbol) */
/* ==================================== */
.icon-system {
display: none;
}
.icon {
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 2;
transition: all 0.3s;
}
/* 底部导航栏 */
.nav-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
padding-bottom: 20px; /* 适配 iPhone X 底部安全区 */
display: flex;
justify-content: space-around;
align-items: center;
/* Glassmorphism 悬浮效果 */
background: rgba(13, 13, 26, 0.7); /* 半透明暗色背景 */
backdrop-filter: blur(20px);
border-top: 1px solid var(--color-glass-border);
box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
z-index: 50;
}
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
color: #8888AA;
font-size: 10px;
cursor: pointer;
transition: all 0.3s;
}
.nav-item.active {
color: var(--color-accent-blue);
}
.nav-item.active .icon {
stroke: var(--color-accent-blue);
stroke-width: 3;
transform: scale(1.1);
filter: drop-shadow(0 0 5px var(--color-accent-blue));
}
/* ==================================== */
/* 2. 页面内容布局 */
/* ==================================== */
.content {
padding: 20px;
height: calc(100% - 124px); /* 排除状态栏和导航栏 */
overflow-y: auto;
position: relative;
z-index: 10;
}
/* --- 启示 (Home) --- */
.home-header {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--color-text-light);
}
.affirmation-card {
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: var(--color-text-light);
text-align: center;
border-left: 5px solid var(--color-accent-purple);
overflow: hidden;
position: relative;
}
.affirmation-card .text {
font-size: 18px;
font-weight: 500;
z-index: 2;
}
.affirmation-card img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.15;
z-index: 1;
}
.frequency-data {
display: flex;
justify-content: space-around;
text-align: center;
color: var(--color-text-light);
margin-top: 30px;
}
.freq-score {
font-size: 48px;
font-weight: bold;
color: var(--color-accent-blue);
text-shadow: 0 0 15px var(--color-accent-blue);
line-height: 1;
}
/* --- 愿景 (Goals) --- */
.goal-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 20px;
}
.goal-item {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 15px;
color: var(--color-text-light);
text-align: left;
position: relative;
overflow: hidden;
}
.goal-item:hover {
filter: drop-shadow(0 0 8px var(--color-accent-purple));
transform: scale(1.02);
}
.goal-progress {
margin-top: 10px;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
.goal-progress-fill {
height: 100%;
background: var(--color-accent-purple);
border-radius: 3px;
width: 65%; /* 示例进度 */
transition: width 0.5s ease;
}
/* --- 频率 (Tracking) --- */
.chart-container {
margin-top: 20px;
padding: 15px;
background: rgba(0, 0, 0, 0.3);
border-radius: 15px;
border: 1px solid #2C2C54;
height: 250px;
position: relative;
}
/* 动态折线图 (SVG + stroke-dasharray) */
.frequency-chart {
width: 100%;
height: 100%;
}
/* 关键：定义路径的动画 */
.chart-line {
fill: none;
stroke: var(--color-accent-blue);
stroke-width: 3;
/* 虚线长度等于路径总长，虚线偏移等于路径总长 */
stroke-dasharray: 400; /* 示例路径长度 */
stroke-dashoffset: 400;
animation: draw 3s ease-out forwards;
filter: drop-shadow(0 0 5px var(--color-accent-blue));
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
.chart-gradient {
opacity: 0.3;
}
.data-point-grid {
opacity: 0.1;
stroke: #AAAAAA;
stroke-width: 0.5;
}
/* --- 我的 (Profile) --- */
.profile-card {
text-align: center;
margin-bottom: 30px;
}
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid var(--color-accent-blue);
margin: 0 auto 10px;
object-fit: cover;
box-shadow: 0 0 15px var(--color-accent-blue);
}
.settings-list .item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
color: var(--color-text-light);
cursor: pointer;
}
.settings-list .item:hover {
color: var(--color-accent-purple);
transform: translateX(5px);
}
</style>
</head>
<body>
<!-- 矢量图标系统定义 -->
<svg class="icon-system">
<symbol id="icon-home" viewBox="0 0 24 24">
<path d="M3 10L12 3L21 10M7 21V12H17V21M10 12V21M14 12V21"/>
</symbol>
<symbol id="icon-goal" viewBox="0 0 24 24">
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
</symbol>
<symbol id="icon-chart" viewBox="0 0 24 24">
<polyline points="22 12 16 12 14 18 10 6 8 12 2 12"/>
</symbol>
<symbol id="icon-user" viewBox="0 0 24 24">
<path d="M20 21V19C20 16.7909 18.2091 15 16 15H8C5.79086 15 4 16.7909 4 19V21M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z"/>
</symbol>
<symbol id="icon-settings" viewBox="0 0 24 24">
<path d="M12 21V19M12 5V3M21 12H19M5 12H3M17.864 17.864L16.45 16.45M6.13604 6.13604L7.55025 7.55025M6.13604 17.864L7.55025 16.45M17.864 6.13604L16.45 7.55025M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z"/>
</symbol>
<symbol id="icon-arrow-right" viewBox="0 0 24 24">
<path d="M5 12H19M15 16L19 12L15 8"/>
</symbol>
<symbol id="icon-add" viewBox="0 0 24 24">
<path d="M12 5V19M5 12H19"/>
</symbol>
</svg>
<div class="preview-row">
<!-- ==================================== -->
<!-- 屏幕 1: 启示 (Home/Dashboard) -->
<!-- ==================================== -->
<div class="app-container" id="screen-home">
<div class="grid-bg"></div>
<div class="status-bar"><span>9:41</span><span>🔋 95%</span></div>
<div class="content">
<header class="home-header">
<h2>启示</h2>
<svg class="icon" style="stroke: var(--color-text-light);"><use xlink:href="#icon-settings"></use></svg>
</header>
<div class="glass-card affirmation-card">
<image href="https://source.unsplash.com/random/500x300/?galaxy,sky" style="object-fit: cover; filter: brightness(0.6);" />
<p class="title-sub">今日频率：2024.08.15</p>
<p class="text">
"我是一个创造者，我正在吸引着源源不断的丰盛和爱进入我的生命。"
</p>
<button class="btn-neon" style="margin-top: 15px; width: 100%;">确认显化</button>
</div>
<h3 class="title-sub" style="margin-top: 30px; color: var(--color-accent-purple);">当前状态评估</h3>
<div class="frequency-data">
<div>
<div class="freq-score">7.8</div>
<div class="title-sub">振动指数 (V-Index)</div>
</div>
<div>
<div style="font-size: 48px; font-weight: bold; color: #4FFD7A; line-height: 1;">+12%</div>
<div class="title-sub">日增幅</div>
</div>
</div>
</div>
<!-- 底部导航栏 -->
<div class="nav-bar">
<div class="nav-item active"><svg class="icon"><use xlink:href="#icon-home"></use></svg>启示</div>
<div class="nav-item"><svg class="icon"><use xlink:href="#icon-goal"></use></svg>愿景</div>
<div class="nav-item"><svg class="icon"><use xlink:href="#icon-chart"></use></svg>频率</div>
<div class="nav-item"><svg class="icon"><use xlink:href="#icon-user"></use></svg>我的</div>
</div>
</div>
<!-- ==================================== -->
<!-- 屏幕 2: 愿景 (Goals/Creation) -->
<!-- ==================================== -->
<div class="app-container" id="screen-goals">
<div class="grid-bg"></div>
<div class="status-bar"><span>9:41</span><span>🔋 95%</span></div>
<div class="content">
<header class="home-header">
<h2>愿景</h2>
<button class="btn-neon" style="padding: 8px 15px; font-size: 14px;">
<svg class="icon" style="width: 16px; height: 16px; stroke: var(--color-bg-dark);"><use xlink:href="#icon-add"></use></svg>
新建
</button>
</header>
<h3 class="title-sub" style="color: var(--color-accent-blue);">活跃目标 (3)</h3>
<div class="goal-list">
<div class="glass-card goal-item">
<image href="https://source.unsplash.com/random/200x200/?money,abstract" style="position: absolute; opacity: 0.1; top: -10px; right: -10px; width: 60px; height: 60px; filter: grayscale(1);" />
<h4 style="margin: 0; font-size: 16px;">财务丰盛</h4>
<p style="font-size: 12px; color: #BBB;">已坚持 45 天</p>
<div class="goal-progress"><div class="goal-progress-fill" style="width: 90%; background: #00E4FF;"></div></div>
</div>
<div class="glass-card goal-item">
<image href="https://source.unsplash.com/random/200x200/?love,connection" style="position: absolute; opacity: 0.1; top: -10px; right: -10px; width: 60px; height: 60px; filter: grayscale(1);" />
<h4 style="margin: 0; font-size: 16px;">理想关系</h4>
<p style="font-size: 12px; color: #BBB;">已坚持 18 天</p>
<div class="goal-progress"><div class="goal-progress-fill" style="width: 30%; background: #9D5AFF;"></div></div>
</div>
<div class="glass-card goal-item">
<image href="https://source.unsplash.com/random/200x200/?health,body" style="position: absolute; opacity: 0.1; top: -10px; right: -10px; width: 60px; height: 60px; filter: grayscale(1);" />
<h4 style="margin: 0; font-size: 16px;">身心健康</h4>
<p style="font-size: 12px; color: #BBB;">已坚持 77 天</p>
<div class="goal-progress"><div class="goal-progress-fill" style="width: 75%; background: #4FFD7A;"></div></div>
</div>
</div>
<h3 class="title-sub" style="color: var(--color-accent-purple); margin-top: 30px;">已归档愿景 (5)</h3>
<div class="glass-card" style="border-left: 3px solid #555; background: rgba(255, 255, 255, 0.03);">
<p style="color: #AAA;">查看所有已完成的显化目标，回顾你的成功轨迹。</p>
</div>
</div>
<!-- 底部导航栏 -->
<div class="nav-bar">
<div class="nav-item"><svg class="icon"><use xlink:href="#icon-home"></use></svg>启示</div>
<div class="nav-item active"><svg class="icon"><use xlink:href="#icon-goal"></use></svg>愿景</div>
<div class="nav-item"><svg class="icon"><use xlink:href="#icon-chart"></use></svg>频率</div>
<div class="nav-item"><svg class="icon"><use xlink:href="#icon-user"></use></svg>我的</div>
</div>
</div>
<!-- ==================================== -->
<!-- 屏幕 3: 频率 (Tracking/Analysis) -->
<!-- 动态折线图实现 -->
<!-- ==================================== -->
<div class="app-container" id="screen-tracking">
<div class="grid-bg"></div>
<div class="status-bar"><span>9:41</span><span>🔋 95%</span></div>
<div class="content">
<h2>频率分析</h2>
<h3 class="title-sub" style="color: var(--color-accent-blue);">振动指数变化趋势 (近 7 日)</h3>
<div class="chart-container">
<svg class="frequency-chart" viewBox="0 0 320 220" preserveAspectRatio="none">
<!-- 定义渐变区域 -->
<defs>
<linearGradient id="chartGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stop-color="var(--color-accent-blue)" stop-opacity="0.8"/>
<stop offset="95%" stop-color="var(--color-bg-dark)" stop-opacity="0.1"/>
</linearGradient>
</defs>
<!-- 背景网格线 -->
<g class="data-point-grid">
<line x1="0" y1="50" x2="320" y2="50" />
<line x1="0" y1="110" x2="320" y2="110" />
<line x1="0" y1="170" x2="320" y2="170" />
</g>
<!-- 数据路径 (Path D定义了折线点) -->
<path id="data-line" class="chart-line" d="M0 180 C 40 100, 80 150, 120 120 S 200 60, 240 80 S 280 140, 320 100"
stroke-dasharray="450" stroke-dashoffset="450"/>
<!-- 渐变填充区域 (使用同样的路径，但闭合到底部) -->
<path class="chart-gradient" d="M0 180 C 40 100, 80 150, 120 120 S 200 60, 240 80 S 280 140, 320 100 L320 220 L0 220 Z"
fill="url(#chartGradient)"/>
</svg>
<p style="color: #AAA; font-size: 12px; text-align: center; margin-top: -10px;">低 -> 2 -> 4 -> 6 -> 高</p>
</div>
<div class="glass-card">
<h4 style="color: var(--color-accent-purple); margin-top: 0;">深度解读</h4>
<p style="color: var(--color-text-light); font-size: 14px;">本周频率波动较大，需注意周三的情绪低谷。建议增加冥想时长以稳定振动状态。</p>
</div>
</div>
<!-- 底部导航栏 -->
<div class="nav-bar">
<div class="nav-item"><svg class="icon"><use xlink:href="#icon-home"></use></svg>启示</div>
<div class="nav-item"><svg class="icon"><use xlink:href="#icon-goal"></use></svg>愿景</div>
<div class="nav-item active"><svg class="icon"><use xlink:href="#icon-chart"></use></svg>频率</div>
<div class="nav-item"><svg class="icon"><use xlink:href="#icon-user"></use></svg>我的</div>
</div>
</div>
<!-- ==================================== -->
<!-- 屏幕 4: 我的 (Profile/Settings) -->
<!-- ==================================== -->
<div class="app-container" id="screen-profile">
<div class="grid-bg"></div>
<div class="status-bar"><span>9:41</span><span>🔋 95%</span></div>
<div class="content">
<h2>我的</h2>
<div class="profile-card">
<image class="avatar" href="https://source.unsplash.com/random/100x100/?portrait,neon" />
<h3 style="color: var(--color-text-light); margin: 5px 0 0;">宇宙领航员 007</h3>
<p class="title-sub">已持续显化 128 天</p>
</div>
<div class="settings-list">
<div class="glass-card item">
<span>通知与提醒</span>
<svg class="icon" style="width: 20px; height: 20px; stroke: #AAA;"><use xlink:href="#icon-arrow-right"></use></svg>
</div>
<div class="glass-card item">
<span>冥想资源库</span>
<svg class="icon" style="width: 20px; height: 20px; stroke: #AAA;"><use xlink:href="#icon-arrow-right"></use></svg>
</div>
<div class="glass-card item">
<span>数据备份与同步</span>
<svg class="icon" style="width: 20px; height: 20px; stroke: #AAA;"><use xlink:href="#icon-arrow-right"></use></svg>
</div>
<div class="glass-card item">
<span>关于应用</span>
<svg class="icon" style="width: 20px; height: 20px; stroke: #AAA;"><use xlink:href="#icon-arrow-right"></use></svg>
</div>
</div>
<button class="btn-neon" style="width: 100%; background: linear-gradient(45deg, #FF6F6F, #CC3333); margin-top: 30px; box-shadow: 0 0 15px rgba(255, 100, 100, 0.5);">
登出系统
</button>
</div>
<!-- 底部导航栏 -->
<div class="nav-bar">
<div class="nav-item"><svg class="icon"><use xlink:href="#icon-home"></use></svg>启示</div>
<div class="nav-item"><svg class="icon"><use xlink:href="#icon-goal"></use></svg>愿景</div>
<div class="nav-item"><svg class="icon"><use xlink:href="#icon-chart"></use></svg>频率</div>
<div class="nav-item active"><svg class="icon"><use xlink:href="#icon-user"></use></svg>我的</div>
</div>
</div>
</div>
</body>
</html>