ca68fe29c7
- 新增模型目录占位文件与翻译类型拆分 - 调整路由配置与桌面端窗口初始化 - 移除多处冗余图表配置项 - 重构右侧面板注册表与三栏布局组件 - 添加智能AppBar、拖拽书签等新功能组件 - 优化安卓编译配置与多平台插件注册 - 新增翻译覆盖率测试与共享组件 - 格式化代码与修复静态分析警告
2042 lines
70 KiB
HTML
2042 lines
70 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>闲言 — 软件信息 & 了解我们 页面方案预览</title>
|
||
<style>
|
||
:root {
|
||
--primary: #6C63FF;
|
||
--primary-light: #8B83FF;
|
||
--bg: #F2F2F7;
|
||
--bg-card: #FFFFFF;
|
||
--bg-elevated: rgba(255,255,255,0.85);
|
||
--text1: #1C1C1E;
|
||
--text2: #3C3C43;
|
||
--text3: #8E8E93;
|
||
--text-inverse: #FFFFFF;
|
||
--border: rgba(60,60,67,0.1);
|
||
--glass-bg: rgba(255,255,255,0.72);
|
||
--glass-border: rgba(255,255,255,0.35);
|
||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
|
||
--shadow-md: 0 4px 12px rgba(0,0,0,0.08);
|
||
--shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
|
||
--radius-sm: 4px;
|
||
--radius-md: 8px;
|
||
--radius-lg: 12px;
|
||
--radius-xl: 16px;
|
||
--radius-full: 999px;
|
||
--space-xs: 4px;
|
||
--space-sm: 8px;
|
||
--space-md: 16px;
|
||
--space-lg: 24px;
|
||
--space-xl: 32px;
|
||
--font-xs: 11px;
|
||
--font-sm: 12px;
|
||
--font-md: 14px;
|
||
--font-lg: 17px;
|
||
--font-xl: 20px;
|
||
--font-xxl: 22px;
|
||
--font-display: 28px;
|
||
--blue: #007AFF;
|
||
--green: #34C759;
|
||
--orange: #FF9500;
|
||
--purple: #AF52DE;
|
||
--teal: #5AC8FA;
|
||
--red: #FF3B30;
|
||
--yellow: #FFCC00;
|
||
}
|
||
|
||
[data-theme="dark"] {
|
||
--bg: #000000;
|
||
--bg-card: #1C1C1E;
|
||
--bg-elevated: rgba(28,28,30,0.85);
|
||
--text1: #F5F5F7;
|
||
--text2: #EBEBF5;
|
||
--text3: #636366;
|
||
--border: rgba(84,84,88,0.36);
|
||
--glass-bg: rgba(28,28,30,0.72);
|
||
--glass-border: rgba(255,255,255,0.1);
|
||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
|
||
--shadow-md: 0 4px 12px rgba(0,0,0,0.3);
|
||
--shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text1);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
.preview-container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
.header-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 24px;
|
||
background: var(--bg-card);
|
||
border-radius: var(--radius-xl);
|
||
box-shadow: var(--shadow-md);
|
||
margin-bottom: 24px;
|
||
backdrop-filter: blur(20px);
|
||
}
|
||
|
||
.header-bar h1 {
|
||
font-size: var(--font-xl);
|
||
font-weight: 700;
|
||
color: var(--text1);
|
||
}
|
||
|
||
.header-bar .subtitle {
|
||
font-size: var(--font-sm);
|
||
color: var(--text3);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.theme-toggle {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.theme-btn {
|
||
padding: 8px 16px;
|
||
border-radius: var(--radius-full);
|
||
border: 1.5px solid var(--border);
|
||
background: var(--bg-card);
|
||
color: var(--text2);
|
||
font-size: var(--font-sm);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.theme-btn.active {
|
||
background: var(--primary);
|
||
color: white;
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
.scheme-tabs {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-bottom: 24px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.scheme-tab {
|
||
padding: 10px 24px;
|
||
border-radius: var(--radius-full);
|
||
border: 2px solid var(--border);
|
||
background: var(--bg-card);
|
||
color: var(--text2);
|
||
font-size: var(--font-md);
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.25s;
|
||
}
|
||
|
||
.scheme-tab.active {
|
||
border-color: var(--primary);
|
||
color: var(--primary);
|
||
background: color-mix(in srgb, var(--primary) 8%, var(--bg-card));
|
||
}
|
||
|
||
.scheme-tab:hover:not(.active) {
|
||
border-color: var(--text3);
|
||
}
|
||
|
||
.scheme-content {
|
||
display: none;
|
||
}
|
||
|
||
.scheme-content.active {
|
||
display: block;
|
||
}
|
||
|
||
.scheme-desc {
|
||
padding: 16px 20px;
|
||
background: color-mix(in srgb, var(--primary) 6%, var(--bg-card));
|
||
border-radius: var(--radius-lg);
|
||
margin-bottom: 24px;
|
||
border-left: 4px solid var(--primary);
|
||
}
|
||
|
||
.scheme-desc h3 {
|
||
font-size: var(--font-lg);
|
||
font-weight: 700;
|
||
color: var(--primary);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.scheme-desc p {
|
||
font-size: var(--font-md);
|
||
color: var(--text2);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.scheme-desc .tags {
|
||
display: flex;
|
||
gap: 6px;
|
||
margin-top: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.scheme-desc .tag {
|
||
padding: 3px 10px;
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--font-xs);
|
||
font-weight: 600;
|
||
background: color-mix(in srgb, var(--primary) 12%, transparent);
|
||
color: var(--primary);
|
||
}
|
||
|
||
.phone-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 24px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.phone-grid { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
.phone-frame {
|
||
background: var(--bg-card);
|
||
border-radius: var(--radius-xl);
|
||
box-shadow: var(--shadow-lg);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.phone-label {
|
||
padding: 12px 16px;
|
||
font-size: var(--font-md);
|
||
font-weight: 700;
|
||
color: var(--text1);
|
||
background: color-mix(in srgb, var(--primary) 4%, var(--bg-card));
|
||
border-bottom: 1px solid var(--border);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.phone-label .emoji {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.phone-screen {
|
||
min-height: 700px;
|
||
background: var(--bg);
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* ========== iOS Nav Bar ========== */
|
||
.ios-nav {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 12px 16px;
|
||
background: var(--bg-elevated);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 10;
|
||
border-bottom: 0.5px solid var(--border);
|
||
}
|
||
|
||
.ios-nav .back {
|
||
position: absolute;
|
||
left: 16px;
|
||
color: var(--primary);
|
||
font-size: var(--font-lg);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.ios-nav .title {
|
||
font-size: var(--font-lg);
|
||
font-weight: 600;
|
||
color: var(--text1);
|
||
}
|
||
|
||
.ios-nav .trailing {
|
||
position: absolute;
|
||
right: 16px;
|
||
color: var(--primary);
|
||
font-size: var(--font-md);
|
||
}
|
||
|
||
.page-body {
|
||
padding: var(--space-md);
|
||
}
|
||
|
||
/* ========== Common Card ========== */
|
||
.card {
|
||
background: var(--bg-card);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-sm);
|
||
overflow: hidden;
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.card-header {
|
||
padding: var(--space-md) var(--space-md) var(--space-xs);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-xs);
|
||
}
|
||
|
||
.card-header .icon-sm {
|
||
font-size: 14px;
|
||
color: var(--text3);
|
||
}
|
||
|
||
.card-header .label {
|
||
font-size: var(--font-sm);
|
||
font-weight: 600;
|
||
color: var(--text3);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.card-title-row {
|
||
padding: var(--space-md);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.card-title-row .icon-box {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: var(--radius-sm);
|
||
background: color-mix(in srgb, var(--primary) 12%, transparent);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
color: var(--primary);
|
||
}
|
||
|
||
.card-title-row .title-text {
|
||
font-size: var(--font-lg);
|
||
font-weight: 700;
|
||
color: var(--text1);
|
||
}
|
||
|
||
.card-divider {
|
||
height: 0.5px;
|
||
background: var(--border);
|
||
margin-left: 68px;
|
||
}
|
||
|
||
/* ========== Action Tile ========== */
|
||
.action-tile {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: var(--space-md);
|
||
gap: var(--space-md);
|
||
cursor: pointer;
|
||
transition: background 0.15s;
|
||
}
|
||
|
||
.action-tile:hover {
|
||
background: color-mix(in srgb, var(--primary) 4%, var(--bg-card));
|
||
}
|
||
|
||
.action-tile .tile-icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: var(--radius-sm);
|
||
background: color-mix(in srgb, var(--primary) 12%, transparent);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.action-tile .tile-content {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.action-tile .tile-title {
|
||
font-size: var(--font-md);
|
||
font-weight: 500;
|
||
color: var(--text1);
|
||
}
|
||
|
||
.action-tile .tile-subtitle {
|
||
font-size: var(--font-sm);
|
||
color: var(--text3);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.action-tile .tile-arrow {
|
||
color: var(--text3);
|
||
font-size: 14px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ========== Gradient Header ========== */
|
||
.gradient-header {
|
||
padding: var(--space-lg);
|
||
border-radius: var(--radius-lg);
|
||
background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 85%, transparent), var(--primary), color-mix(in srgb, var(--primary-light) 70%, transparent));
|
||
box-shadow: 0 4px 16px color-mix(in srgb, var(--primary) 18%, transparent);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-lg);
|
||
margin-bottom: var(--space-md);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.gradient-header::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
right: -20%;
|
||
width: 200px;
|
||
height: 200px;
|
||
border-radius: 50%;
|
||
background: rgba(255,255,255,0.08);
|
||
}
|
||
|
||
.gradient-header .app-icon {
|
||
width: 58px;
|
||
height: 58px;
|
||
border-radius: var(--radius-md);
|
||
background: rgba(255,255,255,0.2);
|
||
border: 2px solid rgba(255,255,255,0.35);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.gradient-header .app-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.gradient-header .app-name {
|
||
font-size: var(--font-xxl);
|
||
font-weight: 700;
|
||
color: white;
|
||
}
|
||
|
||
.gradient-header .app-slogan {
|
||
font-size: var(--font-sm);
|
||
color: rgba(255,255,255,0.85);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.gradient-header .version-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 4px 12px;
|
||
border-radius: var(--radius-full);
|
||
background: rgba(255,255,255,0.18);
|
||
font-size: var(--font-xs);
|
||
color: rgba(255,255,255,0.95);
|
||
margin-top: var(--space-sm);
|
||
}
|
||
|
||
/* ========== Info Item ========== */
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12px var(--space-md);
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
.info-item .item-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
color: var(--text3);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.info-item .item-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.info-item .item-label {
|
||
font-size: var(--font-md);
|
||
font-weight: 500;
|
||
color: var(--text1);
|
||
}
|
||
|
||
.info-item .item-value {
|
||
font-size: var(--font-sm);
|
||
color: var(--text3);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.info-item .item-action {
|
||
color: var(--primary);
|
||
font-size: 14px;
|
||
flex-shrink: 0;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* ========== Grid Info ========== */
|
||
.grid-info {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--space-md);
|
||
padding: var(--space-md);
|
||
}
|
||
|
||
.grid-info-item {
|
||
padding: var(--space-md);
|
||
border-radius: var(--radius-md);
|
||
background: color-mix(in srgb, var(--text3) 6%, var(--bg-card));
|
||
border: 1px solid var(--border);
|
||
}
|
||
|
||
.grid-info-item .grid-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: var(--font-xs);
|
||
font-weight: 500;
|
||
color: var(--text3);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.grid-info-item .grid-value {
|
||
font-size: var(--font-md);
|
||
font-weight: 600;
|
||
color: var(--text1);
|
||
}
|
||
|
||
/* ========== Tech Stack Grid ========== */
|
||
.tech-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--space-md);
|
||
padding: var(--space-md);
|
||
}
|
||
|
||
.tech-item {
|
||
padding: var(--space-md);
|
||
border-radius: var(--radius-md);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-sm);
|
||
}
|
||
|
||
.tech-item .tech-icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: var(--radius-sm);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tech-item .tech-name {
|
||
font-size: var(--font-md);
|
||
font-weight: 600;
|
||
color: var(--text1);
|
||
}
|
||
|
||
.tech-item .tech-desc {
|
||
font-size: var(--font-xs);
|
||
color: var(--text3);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* ========== Team Member ========== */
|
||
.team-member {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: var(--space-md);
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
.team-member .avatar {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: var(--radius-sm);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.team-member .member-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.team-member .member-role {
|
||
font-size: var(--font-md);
|
||
font-weight: 600;
|
||
color: var(--text1);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.team-member .member-name {
|
||
padding: 2px 8px;
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--font-xs);
|
||
background: color-mix(in srgb, var(--primary) 10%, transparent);
|
||
color: var(--primary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.team-member .member-sig {
|
||
font-size: var(--font-xs);
|
||
color: var(--text3);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* ========== Footer ========== */
|
||
.page-footer {
|
||
text-align: center;
|
||
padding: var(--space-xl) var(--space-md);
|
||
}
|
||
|
||
.page-footer .heart {
|
||
font-size: 20px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.page-footer .copy {
|
||
font-size: var(--font-sm);
|
||
color: var(--text3);
|
||
}
|
||
|
||
.page-footer .slogan {
|
||
font-size: var(--font-xs);
|
||
color: var(--text3);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
/* ========== Link Tile ========== */
|
||
.link-tile {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: var(--space-md);
|
||
gap: var(--space-md);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.link-tile .link-icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: var(--radius-sm);
|
||
background: color-mix(in srgb, var(--primary) 12%, transparent);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
color: var(--primary);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.link-tile .link-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.link-tile .link-title {
|
||
font-size: var(--font-md);
|
||
font-weight: 500;
|
||
color: var(--text1);
|
||
}
|
||
|
||
.link-tile .link-url {
|
||
font-size: var(--font-xs);
|
||
color: var(--primary);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.link-tile .link-arrow {
|
||
color: var(--primary);
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* ========== Scheme B: Liquid Glass ========== */
|
||
.glass-card {
|
||
background: var(--glass-bg);
|
||
backdrop-filter: blur(40px) saturate(180%);
|
||
-webkit-backdrop-filter: blur(40px) saturate(180%);
|
||
border-radius: var(--radius-xl);
|
||
border: 1px solid var(--glass-border);
|
||
box-shadow: var(--shadow-md);
|
||
overflow: hidden;
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.glass-header {
|
||
background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 70%, rgba(255,255,255,0.3)), var(--primary));
|
||
backdrop-filter: blur(40px);
|
||
-webkit-backdrop-filter: blur(40px);
|
||
border: 1px solid rgba(255,255,255,0.25);
|
||
border-radius: var(--radius-xl);
|
||
padding: var(--space-lg);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-lg);
|
||
margin-bottom: var(--space-md);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.glass-header::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 50%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* ========== Scheme C: Minimal ========== */
|
||
.minimal-section {
|
||
margin-bottom: var(--space-lg);
|
||
}
|
||
|
||
.minimal-section .section-title {
|
||
font-size: var(--font-xs);
|
||
font-weight: 600;
|
||
color: var(--text3);
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
padding: 0 var(--space-md);
|
||
margin-bottom: var(--space-sm);
|
||
}
|
||
|
||
.minimal-card {
|
||
background: var(--bg-card);
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.minimal-row {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 14px var(--space-md);
|
||
gap: var(--space-md);
|
||
cursor: pointer;
|
||
transition: background 0.15s;
|
||
}
|
||
|
||
.minimal-row:hover {
|
||
background: color-mix(in srgb, var(--primary) 4%, var(--bg-card));
|
||
}
|
||
|
||
.minimal-row .row-icon {
|
||
font-size: 20px;
|
||
width: 28px;
|
||
text-align: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.minimal-row .row-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.minimal-row .row-title {
|
||
font-size: var(--font-md);
|
||
font-weight: 500;
|
||
color: var(--text1);
|
||
}
|
||
|
||
.minimal-row .row-sub {
|
||
font-size: var(--font-sm);
|
||
color: var(--text3);
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.minimal-row .row-value {
|
||
font-size: var(--font-md);
|
||
color: var(--text3);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.minimal-row .row-arrow {
|
||
color: var(--text3);
|
||
font-size: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.minimal-divider {
|
||
height: 0.5px;
|
||
background: var(--border);
|
||
margin-left: 52px;
|
||
}
|
||
|
||
.minimal-hero {
|
||
text-align: center;
|
||
padding: var(--space-xl) var(--space-md);
|
||
}
|
||
|
||
.minimal-hero .hero-icon {
|
||
width: 72px;
|
||
height: 72px;
|
||
border-radius: var(--radius-xl);
|
||
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32px;
|
||
margin: 0 auto var(--space-md);
|
||
box-shadow: 0 4px 20px color-mix(in srgb, var(--primary) 30%, transparent);
|
||
}
|
||
|
||
.minimal-hero .hero-name {
|
||
font-size: var(--font-display);
|
||
font-weight: 700;
|
||
color: var(--text1);
|
||
}
|
||
|
||
.minimal-hero .hero-sub {
|
||
font-size: var(--font-md);
|
||
color: var(--text3);
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.minimal-hero .hero-version {
|
||
display: inline-block;
|
||
margin-top: var(--space-sm);
|
||
padding: 4px 14px;
|
||
border-radius: var(--radius-full);
|
||
background: color-mix(in srgb, var(--primary) 8%, var(--bg-card));
|
||
color: var(--primary);
|
||
font-size: var(--font-sm);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* ========== QQ Group Section ========== */
|
||
.qq-section {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: var(--space-md);
|
||
gap: var(--space-md);
|
||
}
|
||
|
||
.qq-icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: var(--radius-sm);
|
||
background: color-mix(in srgb, #12B7F5 12%, transparent);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.qq-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.qq-title {
|
||
font-size: var(--font-md);
|
||
font-weight: 500;
|
||
color: var(--text1);
|
||
}
|
||
|
||
.qq-desc {
|
||
font-size: var(--font-xs);
|
||
color: var(--text3);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
/* ========== Update Log ========== */
|
||
.update-item {
|
||
padding: var(--space-md);
|
||
border-radius: var(--radius-sm);
|
||
background: color-mix(in srgb, var(--text3) 6%, var(--bg-card));
|
||
border: 1px solid var(--border);
|
||
margin: 0 var(--space-md) var(--space-sm);
|
||
}
|
||
|
||
.update-item:last-child {
|
||
margin-bottom: var(--space-md);
|
||
}
|
||
|
||
.update-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: var(--space-sm);
|
||
}
|
||
|
||
.update-version {
|
||
font-size: var(--font-md);
|
||
font-weight: 700;
|
||
color: var(--text1);
|
||
}
|
||
|
||
.update-date {
|
||
font-size: var(--font-sm);
|
||
color: var(--text3);
|
||
}
|
||
|
||
.update-change {
|
||
font-size: var(--font-sm);
|
||
color: var(--text2);
|
||
padding-left: var(--space-sm);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ========== Platform Badge ========== */
|
||
.platform-badges {
|
||
display: flex;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
padding: var(--space-md);
|
||
}
|
||
|
||
.platform-badge {
|
||
padding: 4px 10px;
|
||
border-radius: var(--radius-full);
|
||
font-size: var(--font-xs);
|
||
font-weight: 600;
|
||
border: 1px solid var(--border);
|
||
background: var(--bg-card);
|
||
color: var(--text2);
|
||
}
|
||
|
||
.platform-badge.active {
|
||
background: color-mix(in srgb, var(--green) 10%, var(--bg-card));
|
||
border-color: var(--green);
|
||
color: var(--green);
|
||
}
|
||
|
||
/* ========== Comparison Table ========== */
|
||
.comparison-section {
|
||
margin-top: 32px;
|
||
padding: 24px;
|
||
background: var(--bg-card);
|
||
border-radius: var(--radius-xl);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.comparison-section h2 {
|
||
font-size: var(--font-xl);
|
||
font-weight: 700;
|
||
color: var(--text1);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.comparison-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: var(--font-sm);
|
||
}
|
||
|
||
.comparison-table th,
|
||
.comparison-table td {
|
||
padding: 10px 12px;
|
||
text-align: left;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.comparison-table th {
|
||
font-weight: 600;
|
||
color: var(--text3);
|
||
font-size: var(--font-xs);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.comparison-table td {
|
||
color: var(--text2);
|
||
}
|
||
|
||
.comparison-table .check {
|
||
color: var(--green);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.comparison-table .cross {
|
||
color: var(--red);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.recommend-badge {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: var(--radius-full);
|
||
background: var(--primary);
|
||
color: white;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
margin-left: 6px;
|
||
vertical-align: middle;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="preview-container" data-theme="light">
|
||
|
||
<!-- Header -->
|
||
<div class="header-bar">
|
||
<div>
|
||
<h1>📱 闲言 — 页面方案预览</h1>
|
||
<div class="subtitle">软件信息 & 了解我们 · 三套设计方案对比</div>
|
||
</div>
|
||
<div class="theme-toggle">
|
||
<button class="theme-btn active" onclick="setTheme('light')">☀️ 浅色</button>
|
||
<button class="theme-btn" onclick="setTheme('dark')">🌙 深色</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scheme Tabs -->
|
||
<div class="scheme-tabs">
|
||
<button class="scheme-tab active" onclick="switchScheme('a')">方案 A · 经典 iOS 卡片</button>
|
||
<button class="scheme-tab" onclick="switchScheme('b')">方案 B · 液态玻璃风格 <span class="recommend-badge">推荐</span></button>
|
||
<button class="scheme-tab" onclick="switchScheme('c')">方案 C · 极简列表</button>
|
||
</div>
|
||
|
||
<!-- ==================== SCHEME A ==================== -->
|
||
<div class="scheme-content active" id="scheme-a">
|
||
<div class="scheme-desc">
|
||
<h3>方案 A · 经典 iOS 卡片式布局</h3>
|
||
<p>参考 cute_kitchen 项目现有风格，采用分组卡片 + 渐变头部 + 信息网格的经典 iOS 设置页布局。信息密度高，适合展示大量技术细节。与当前关于页风格最接近，改动最小。</p>
|
||
<div class="tags">
|
||
<span class="tag">高信息密度</span>
|
||
<span class="tag">卡片分组</span>
|
||
<span class="tag">渐变头部</span>
|
||
<span class="tag">技术栈网格</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phone-grid">
|
||
<!-- App Info Page -->
|
||
<div class="phone-frame">
|
||
<div class="phone-label"><span class="emoji">📱</span> 软件信息</div>
|
||
<div class="phone-screen">
|
||
<div class="ios-nav">
|
||
<span class="back">‹ 返回</span>
|
||
<span class="title">软件信息</span>
|
||
</div>
|
||
<div class="page-body">
|
||
<!-- Gradient Header -->
|
||
<div class="gradient-header">
|
||
<div class="app-icon">💬</div>
|
||
<div class="app-info">
|
||
<div class="app-name">闲言</div>
|
||
<div class="app-slogan">Xianyan · 软件信息</div>
|
||
<div class="version-badge">
|
||
<span>ℹ️</span>
|
||
<span>Flutter</span>
|
||
<span style="padding:2px 6px;border-radius:4px;background:rgba(255,255,255,0.2);font-size:10px;">v2.0.1</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tech Stack -->
|
||
<div class="card">
|
||
<div class="card-title-row">
|
||
<div class="icon-box">⚙️</div>
|
||
<span class="title-text">技术栈</span>
|
||
</div>
|
||
<div class="tech-grid">
|
||
<div class="tech-item" style="background:color-mix(in srgb, #FF9500 8%, var(--bg-card));border:1px solid color-mix(in srgb, #FF9500 20%, transparent);">
|
||
<div class="tech-icon" style="background:color-mix(in srgb, #FF9500 20%, transparent);color:#FF9500;">🔥</div>
|
||
<div>
|
||
<div class="tech-name">Dart</div>
|
||
<div class="tech-desc">编程语言</div>
|
||
</div>
|
||
</div>
|
||
<div class="tech-item" style="background:color-mix(in srgb, #5AC8FA 8%, var(--bg-card));border:1px solid color-mix(in srgb, #5AC8FA 20%, transparent);">
|
||
<div class="tech-icon" style="background:color-mix(in srgb, #5AC8FA 20%, transparent);color:#5AC8FA;">🔄</div>
|
||
<div>
|
||
<div class="tech-name">Riverpod</div>
|
||
<div class="tech-desc">状态管理</div>
|
||
</div>
|
||
</div>
|
||
<div class="tech-item" style="background:color-mix(in srgb, #AF52DE 8%, var(--bg-card));border:1px solid color-mix(in srgb, #AF52DE 20%, transparent);">
|
||
<div class="tech-icon" style="background:color-mix(in srgb, #AF52DE 20%, transparent);color:#AF52DE;">📦</div>
|
||
<div>
|
||
<div class="tech-name">GoRouter</div>
|
||
<div class="tech-desc">路由导航</div>
|
||
</div>
|
||
</div>
|
||
<div class="tech-item" style="background:color-mix(in srgb, #007AFF 8%, var(--bg-card));border:1px solid color-mix(in srgb, #007AFF 20%, transparent);">
|
||
<div class="tech-icon" style="background:color-mix(in srgb, #007AFF 20%, transparent);color:#007AFF;">🌐</div>
|
||
<div>
|
||
<div class="tech-name">Dio</div>
|
||
<div class="tech-desc">网络请求</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Build Info -->
|
||
<div class="card">
|
||
<div class="card-title-row">
|
||
<div class="icon-box">🔨</div>
|
||
<span class="title-text">构建信息</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="item-icon">⭐</div>
|
||
<div class="item-content">
|
||
<div class="item-label">版本号</div>
|
||
<div class="item-value">2.0.1</div>
|
||
</div>
|
||
<div class="item-action">📋</div>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="info-item">
|
||
<div class="item-icon">#️⃣</div>
|
||
<div class="item-content">
|
||
<div class="item-label">内部版本号</div>
|
||
<div class="item-value">26042901</div>
|
||
</div>
|
||
<div class="item-action">📋</div>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="info-item">
|
||
<div class="item-icon">📅</div>
|
||
<div class="item-content">
|
||
<div class="item-label">打包时间</div>
|
||
<div class="item-value">2026-05-29</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="info-item">
|
||
<div class="item-icon">📦</div>
|
||
<div class="item-content">
|
||
<div class="item-label">Build SDK</div>
|
||
<div class="item-value">Impeller</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="info-item">
|
||
<div class="item-icon">📄</div>
|
||
<div class="item-content">
|
||
<div class="item-label">开源框架</div>
|
||
<div class="item-value">Flutter SDK</div>
|
||
</div>
|
||
<div class="item-action">›</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Device Info -->
|
||
<div class="card">
|
||
<div class="card-title-row">
|
||
<div class="icon-box">📱</div>
|
||
<span class="title-text">设备信息</span>
|
||
</div>
|
||
<div class="grid-info">
|
||
<div class="grid-info-item">
|
||
<div class="grid-label">🖥️ 操作系统</div>
|
||
<div class="grid-value">HarmonyOS</div>
|
||
</div>
|
||
<div class="grid-info-item">
|
||
<div class="grid-label">📱 设备类型</div>
|
||
<div class="grid-value">移动设备</div>
|
||
</div>
|
||
<div class="grid-info-item">
|
||
<div class="grid-label">⚡ Dart 版本</div>
|
||
<div class="grid-value">3.8.0</div>
|
||
</div>
|
||
<div class="grid-info-item">
|
||
<div class="grid-label">🎨 渲染引擎</div>
|
||
<div class="grid-value">Impeller</div>
|
||
</div>
|
||
</div>
|
||
<div style="padding:0 var(--space-md) var(--space-md);">
|
||
<div style="padding:var(--space-md);border-radius:var(--radius-sm);background:color-mix(in srgb, var(--text3) 6%, var(--bg-card));border:1px solid var(--border);">
|
||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:6px;">
|
||
<span style="font-size:14px;color:var(--text3);">ℹ️</span>
|
||
<span style="font-size:var(--font-sm);font-weight:500;color:var(--text2);">屏幕详细信息</span>
|
||
</div>
|
||
<div style="font-size:var(--font-sm);color:var(--text3);">窗口尺寸: 393 × 852</div>
|
||
<div style="font-size:var(--font-sm);color:var(--text3);margin-top:2px;">像素密度: 3.00 （越大越清晰）</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Platform Compatibility -->
|
||
<div class="card">
|
||
<div class="card-title-row">
|
||
<div class="icon-box">🖥️</div>
|
||
<span class="title-text">平台兼容</span>
|
||
</div>
|
||
<div class="platform-badges">
|
||
<span class="platform-badge active">📱 iOS</span>
|
||
<span class="platform-badge active">🤖 Android</span>
|
||
<span class="platform-badge active">🔷 HarmonyOS</span>
|
||
<span class="platform-badge active">💻 macOS</span>
|
||
<span class="platform-badge active">🪟 Windows</span>
|
||
<span class="platform-badge">🌐 Web</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Update Log -->
|
||
<div class="card">
|
||
<div class="card-title-row">
|
||
<div class="icon-box">📋</div>
|
||
<span class="title-text">更新日志</span>
|
||
</div>
|
||
<div class="update-item">
|
||
<div class="update-header">
|
||
<span class="update-version">版本 2.0.1</span>
|
||
<span class="update-date">2026-05-29</span>
|
||
</div>
|
||
<div class="update-change">• 增加软件信息与了解我们页面</div>
|
||
<div class="update-change">• 优化鸿蒙端兼容性</div>
|
||
<div class="update-change">• 修复暗色模式显示异常</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div class="page-footer">
|
||
<div class="heart">❤️</div>
|
||
<div class="copy">© 2026 闲言</div>
|
||
<div class="slogan">文字阅读更纯粹</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Learn Us Page -->
|
||
<div class="phone-frame">
|
||
<div class="phone-label"><span class="emoji">👥</span> 了解我们</div>
|
||
<div class="phone-screen">
|
||
<div class="ios-nav">
|
||
<span class="back">‹ 返回</span>
|
||
<span class="title">了解我们</span>
|
||
</div>
|
||
<div class="page-body">
|
||
<!-- Gradient Header -->
|
||
<div class="gradient-header">
|
||
<div class="app-icon">💬</div>
|
||
<div class="app-info">
|
||
<div class="app-name">闲言</div>
|
||
<div class="app-slogan">文字阅读更纯粹</div>
|
||
<div class="version-badge">
|
||
<span>🏷️</span>
|
||
<span>Version 2.0.1</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Official Site -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<span class="icon-sm">🌐</span>
|
||
<span class="label">官方网站</span>
|
||
</div>
|
||
<div style="padding:0 var(--space-md) var(--space-sm);font-size:var(--font-sm);color:var(--text3);">访问我们的官方网站了解更多信息</div>
|
||
<div class="link-tile">
|
||
<div class="link-icon">🌐</div>
|
||
<div class="link-content">
|
||
<div class="link-title">工作室官网</div>
|
||
<div class="link-url">wktyl.com</div>
|
||
</div>
|
||
<span class="link-arrow">↗</span>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="link-tile">
|
||
<div class="link-icon">📄</div>
|
||
<div class="link-content">
|
||
<div class="link-title">闲言下载页面</div>
|
||
<div class="link-url">eat.wktyl.com</div>
|
||
</div>
|
||
<span class="link-arrow">↗</span>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="link-tile">
|
||
<div class="link-icon">📚</div>
|
||
<div class="link-content">
|
||
<div class="link-title">其他产品</div>
|
||
<div class="link-url">poe.vogov.cn/app.html</div>
|
||
</div>
|
||
<span class="link-arrow">↗</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Developer -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<span class="icon-sm">🏢</span>
|
||
<span class="label">开发者</span>
|
||
</div>
|
||
<div class="team-member">
|
||
<div class="avatar" style="background:linear-gradient(135deg, var(--primary), var(--primary-light));color:white;">🏢</div>
|
||
<div class="member-info">
|
||
<div class="member-role">微风暴网络科技工作室</div>
|
||
<div class="member-sig">专注文字与生活领域</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="link-tile">
|
||
<div class="link-icon" style="background:color-mix(in srgb, #007AFF 12%, transparent);color:#007AFF;">📧</div>
|
||
<div class="link-content">
|
||
<div class="link-title">商务合作 & 联系我们</div>
|
||
<div class="link-url" style="color:#007AFF;">点击查看多个联系邮箱</div>
|
||
</div>
|
||
<span class="link-arrow" style="color:var(--text3);">↗</span>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="team-member">
|
||
<div class="avatar" style="background:color-mix(in srgb, #07C160 10%, var(--bg-card));">💬</div>
|
||
<div class="member-info">
|
||
<div class="member-role">微信公众号</div>
|
||
<div style="display:flex;align-items:center;gap:6px;margin-top:4px;">
|
||
<span style="padding:3px 10px;border-radius:var(--radius-full);background:color-mix(in srgb, #07C160 10%, transparent);color:#07C160;font-size:var(--font-xs);font-weight:600;">🔍 微风暴 📋</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Team -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<span class="icon-sm">👥</span>
|
||
<span class="label">团队信息</span>
|
||
</div>
|
||
<div class="team-member">
|
||
<div class="avatar" style="background:var(--bg);">💻</div>
|
||
<div class="member-info">
|
||
<div class="member-role">程序设计 <span class="member-name">纯情小妈</span></div>
|
||
<div class="member-sig">喜欢发呆</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="team-member">
|
||
<div class="avatar" style="background:var(--bg);">🎨</div>
|
||
<div class="member-info">
|
||
<div class="member-role">UI/UX/Tools <span class="member-name">Freetime</span></div>
|
||
<div class="member-sig">关于你的风景。</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="team-member">
|
||
<div class="avatar" style="background:var(--bg);">⚙️</div>
|
||
<div class="member-info">
|
||
<div class="member-role">后端开发 <span class="member-name">伯乐不相马</span></div>
|
||
<div class="member-sig">还是做不到吗？</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="team-member">
|
||
<div class="avatar" style="background:var(--bg);">🔧</div>
|
||
<div class="member-info">
|
||
<div class="member-role">技术支持 <span class="member-name">Ayk</span></div>
|
||
<div class="member-sig">吾友随贱，其寿似龟</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QQ Group -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<span class="icon-sm">💬</span>
|
||
<span class="label">加入QQ群</span>
|
||
</div>
|
||
<div class="qq-section">
|
||
<div class="qq-icon">🐧</div>
|
||
<div class="qq-info">
|
||
<div class="qq-title">闲言APP v2.0</div>
|
||
<div class="qq-desc">群号：271129018 · 交流反馈 · 获取最新动态</div>
|
||
</div>
|
||
<span style="color:#12B7F5;font-size:14px;">📋 ↗</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div class="page-footer">
|
||
<div style="display:flex;align-items:center;justify-content:center;gap:var(--space-md);">
|
||
<div style="width:40px;height:1px;background:var(--text3);"></div>
|
||
<span style="font-size:var(--font-sm);color:var(--text3);">到底了</span>
|
||
<div style="width:40px;height:1px;background:var(--text3);"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== SCHEME B ==================== -->
|
||
<div class="scheme-content" id="scheme-b">
|
||
<div class="scheme-desc">
|
||
<h3>方案 B · 液态玻璃风格 (iOS 26 Liquid Glass) 🏆 推荐</h3>
|
||
<p>采用 iOS 26 液态玻璃设计语言，毛玻璃卡片 + 半透明层次 + 光泽边框，视觉层次更丰富。头部使用 GlassContainer 毛玻璃效果，卡片使用 glass-bg 半透明背景。与闲言现有的 GlassContainer 组件完美契合，鸿蒙端自动降级为纯色背景。</p>
|
||
<div class="tags">
|
||
<span class="tag">液态玻璃</span>
|
||
<span class="tag">半透明层次</span>
|
||
<span class="tag">iOS 26 风格</span>
|
||
<span class="tag">鸿蒙兼容降级</span>
|
||
<span class="tag">推荐方案</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phone-grid">
|
||
<!-- App Info Page - Glass -->
|
||
<div class="phone-frame">
|
||
<div class="phone-label"><span class="emoji">📱</span> 软件信息 · 液态玻璃</div>
|
||
<div class="phone-screen">
|
||
<div class="ios-nav" style="background:var(--glass-bg);">
|
||
<span class="back">‹ 返回</span>
|
||
<span class="title">软件信息</span>
|
||
<span class="trailing">🔬</span>
|
||
</div>
|
||
<div class="page-body">
|
||
<!-- Glass Header -->
|
||
<div class="glass-header">
|
||
<div class="app-icon" style="background:rgba(255,255,255,0.25);backdrop-filter:blur(10px);">💬</div>
|
||
<div class="app-info" style="position:relative;z-index:1;">
|
||
<div class="app-name">闲言</div>
|
||
<div class="app-slogan">Xianyan · 软件信息</div>
|
||
<div class="version-badge" style="background:rgba(255,255,255,0.15);backdrop-filter:blur(8px);">
|
||
<span>ℹ️</span>
|
||
<span>Flutter</span>
|
||
<span style="padding:2px 6px;border-radius:4px;background:rgba(255,255,255,0.2);font-size:10px;">v2.0.1</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tech Stack - Glass -->
|
||
<div class="glass-card">
|
||
<div class="card-title-row">
|
||
<div class="icon-box" style="background:color-mix(in srgb, var(--primary) 15%, var(--glass-bg));">⚙️</div>
|
||
<span class="title-text">技术栈</span>
|
||
</div>
|
||
<div class="tech-grid">
|
||
<div class="tech-item" style="background:color-mix(in srgb, #FF9500 6%, var(--glass-bg));border:1px solid color-mix(in srgb, #FF9500 15%, var(--glass-border));backdrop-filter:blur(8px);">
|
||
<div class="tech-icon" style="background:color-mix(in srgb, #FF9500 18%, transparent);color:#FF9500;">🔥</div>
|
||
<div><div class="tech-name">Dart</div><div class="tech-desc">编程语言</div></div>
|
||
</div>
|
||
<div class="tech-item" style="background:color-mix(in srgb, #5AC8FA 6%, var(--glass-bg));border:1px solid color-mix(in srgb, #5AC8FA 15%, var(--glass-border));backdrop-filter:blur(8px);">
|
||
<div class="tech-icon" style="background:color-mix(in srgb, #5AC8FA 18%, transparent);color:#5AC8FA;">🔄</div>
|
||
<div><div class="tech-name">Riverpod</div><div class="tech-desc">状态管理</div></div>
|
||
</div>
|
||
<div class="tech-item" style="background:color-mix(in srgb, #AF52DE 6%, var(--glass-bg));border:1px solid color-mix(in srgb, #AF52DE 15%, var(--glass-border));backdrop-filter:blur(8px);">
|
||
<div class="tech-icon" style="background:color-mix(in srgb, #AF52DE 18%, transparent);color:#AF52DE;">📦</div>
|
||
<div><div class="tech-name">GoRouter</div><div class="tech-desc">路由导航</div></div>
|
||
</div>
|
||
<div class="tech-item" style="background:color-mix(in srgb, #007AFF 6%, var(--glass-bg));border:1px solid color-mix(in srgb, #007AFF 15%, var(--glass-border));backdrop-filter:blur(8px);">
|
||
<div class="tech-icon" style="background:color-mix(in srgb, #007AFF 18%, transparent);color:#007AFF;">🌐</div>
|
||
<div><div class="tech-name">Dio</div><div class="tech-desc">网络请求</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Build Info - Glass -->
|
||
<div class="glass-card">
|
||
<div class="card-title-row">
|
||
<div class="icon-box" style="background:color-mix(in srgb, var(--primary) 15%, var(--glass-bg));">🔨</div>
|
||
<span class="title-text">构建信息</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="item-icon">⭐</div>
|
||
<div class="item-content"><div class="item-label">版本号</div><div class="item-value">2.0.1</div></div>
|
||
<div class="item-action">📋</div>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="info-item">
|
||
<div class="item-icon">#️⃣</div>
|
||
<div class="item-content"><div class="item-label">内部版本号</div><div class="item-value">26042901</div></div>
|
||
<div class="item-action">📋</div>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="info-item">
|
||
<div class="item-icon">📅</div>
|
||
<div class="item-content"><div class="item-label">打包时间</div><div class="item-value">2026-05-29</div></div>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="info-item">
|
||
<div class="item-icon">🎨</div>
|
||
<div class="item-content"><div class="item-label">渲染引擎</div><div class="item-value">Impeller</div></div>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="info-item">
|
||
<div class="item-icon">📄</div>
|
||
<div class="item-content"><div class="item-label">开源框架</div><div class="item-value">Flutter SDK</div></div>
|
||
<div class="item-action">›</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Device Info - Glass -->
|
||
<div class="glass-card">
|
||
<div class="card-title-row">
|
||
<div class="icon-box" style="background:color-mix(in srgb, var(--primary) 15%, var(--glass-bg));">📱</div>
|
||
<span class="title-text">设备信息</span>
|
||
</div>
|
||
<div class="grid-info">
|
||
<div class="grid-info-item" style="background:color-mix(in srgb, var(--text3) 4%, var(--glass-bg));border:1px solid var(--glass-border);">
|
||
<div class="grid-label">🖥️ 操作系统</div>
|
||
<div class="grid-value">HarmonyOS</div>
|
||
</div>
|
||
<div class="grid-info-item" style="background:color-mix(in srgb, var(--text3) 4%, var(--glass-bg));border:1px solid var(--glass-border);">
|
||
<div class="grid-label">📱 设备类型</div>
|
||
<div class="grid-value">移动设备</div>
|
||
</div>
|
||
<div class="grid-info-item" style="background:color-mix(in srgb, var(--text3) 4%, var(--glass-bg));border:1px solid var(--glass-border);">
|
||
<div class="grid-label">⚡ Dart 版本</div>
|
||
<div class="grid-value">3.8.0</div>
|
||
</div>
|
||
<div class="grid-info-item" style="background:color-mix(in srgb, var(--text3) 4%, var(--glass-bg));border:1px solid var(--glass-border);">
|
||
<div class="grid-label">🎨 渲染引擎</div>
|
||
<div class="grid-value">Impeller</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Platform - Glass -->
|
||
<div class="glass-card">
|
||
<div class="card-title-row">
|
||
<div class="icon-box" style="background:color-mix(in srgb, var(--primary) 15%, var(--glass-bg));">🖥️</div>
|
||
<span class="title-text">平台兼容</span>
|
||
</div>
|
||
<div class="platform-badges">
|
||
<span class="platform-badge active" style="background:color-mix(in srgb, var(--green) 8%, var(--glass-bg));border-color:var(--green);">📱 iOS</span>
|
||
<span class="platform-badge active" style="background:color-mix(in srgb, var(--green) 8%, var(--glass-bg));border-color:var(--green);">🤖 Android</span>
|
||
<span class="platform-badge active" style="background:color-mix(in srgb, var(--green) 8%, var(--glass-bg));border-color:var(--green);">🔷 HarmonyOS</span>
|
||
<span class="platform-badge active" style="background:color-mix(in srgb, var(--green) 8%, var(--glass-bg));border-color:var(--green);">💻 macOS</span>
|
||
<span class="platform-badge active" style="background:color-mix(in srgb, var(--green) 8%, var(--glass-bg));border-color:var(--green);">🪟 Windows</span>
|
||
<span class="platform-badge" style="background:var(--glass-bg);">🌐 Web</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div class="page-footer">
|
||
<div class="heart">💎</div>
|
||
<div class="copy">© 2026 闲言</div>
|
||
<div class="slogan">文字阅读更纯粹</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Learn Us Page - Glass -->
|
||
<div class="phone-frame">
|
||
<div class="phone-label"><span class="emoji">👥</span> 了解我们 · 液态玻璃</div>
|
||
<div class="phone-screen">
|
||
<div class="ios-nav" style="background:var(--glass-bg);">
|
||
<span class="back">‹ 返回</span>
|
||
<span class="title">了解我们</span>
|
||
</div>
|
||
<div class="page-body">
|
||
<!-- Glass Header -->
|
||
<div class="glass-header">
|
||
<div class="app-icon" style="background:rgba(255,255,255,0.25);backdrop-filter:blur(10px);">💬</div>
|
||
<div class="app-info" style="position:relative;z-index:1;">
|
||
<div class="app-name">闲言</div>
|
||
<div class="app-slogan">文字阅读更纯粹</div>
|
||
<div class="version-badge" style="background:rgba(255,255,255,0.15);backdrop-filter:blur(8px);">
|
||
<span>🏷️</span>
|
||
<span>Version 2.0.1</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Official Site - Glass -->
|
||
<div class="glass-card">
|
||
<div class="card-header">
|
||
<span class="icon-sm">🌐</span>
|
||
<span class="label">官方网站</span>
|
||
</div>
|
||
<div style="padding:0 var(--space-md) var(--space-sm);font-size:var(--font-sm);color:var(--text3);">访问我们的官方网站了解更多信息</div>
|
||
<div class="link-tile">
|
||
<div class="link-icon" style="background:color-mix(in srgb, var(--primary) 15%, var(--glass-bg));">🌐</div>
|
||
<div class="link-content"><div class="link-title">工作室官网</div><div class="link-url">wktyl.com</div></div>
|
||
<span class="link-arrow">↗</span>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="link-tile">
|
||
<div class="link-icon" style="background:color-mix(in srgb, var(--primary) 15%, var(--glass-bg));">📄</div>
|
||
<div class="link-content"><div class="link-title">闲言下载页面</div><div class="link-url">eat.wktyl.com</div></div>
|
||
<span class="link-arrow">↗</span>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="link-tile">
|
||
<div class="link-icon" style="background:color-mix(in srgb, var(--primary) 15%, var(--glass-bg));">📚</div>
|
||
<div class="link-content"><div class="link-title">其他产品</div><div class="link-url">poe.vogov.cn/app.html</div></div>
|
||
<span class="link-arrow">↗</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Developer - Glass -->
|
||
<div class="glass-card">
|
||
<div class="card-header">
|
||
<span class="icon-sm">🏢</span>
|
||
<span class="label">开发者</span>
|
||
</div>
|
||
<div class="team-member">
|
||
<div class="avatar" style="background:linear-gradient(135deg, var(--primary), var(--primary-light));color:white;">🏢</div>
|
||
<div class="member-info">
|
||
<div class="member-role">微风暴网络科技工作室</div>
|
||
<div class="member-sig">专注文字与生活领域</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="link-tile">
|
||
<div class="link-icon" style="background:color-mix(in srgb, #007AFF 12%, var(--glass-bg));color:#007AFF;">📧</div>
|
||
<div class="link-content"><div class="link-title">商务合作 & 联系我们</div><div class="link-url" style="color:#007AFF;">点击查看多个联系邮箱</div></div>
|
||
<span class="link-arrow" style="color:var(--text3);">↗</span>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="team-member">
|
||
<div class="avatar" style="background:color-mix(in srgb, #07C160 8%, var(--glass-bg));">💬</div>
|
||
<div class="member-info">
|
||
<div class="member-role">微信公众号</div>
|
||
<div style="display:flex;align-items:center;gap:6px;margin-top:4px;">
|
||
<span style="padding:3px 10px;border-radius:var(--radius-full);background:color-mix(in srgb, #07C160 10%, var(--glass-bg));color:#07C160;font-size:var(--font-xs);font-weight:600;">🔍 微风暴 📋</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Team - Glass -->
|
||
<div class="glass-card">
|
||
<div class="card-header">
|
||
<span class="icon-sm">👥</span>
|
||
<span class="label">团队信息</span>
|
||
</div>
|
||
<div class="team-member">
|
||
<div class="avatar" style="background:color-mix(in srgb, var(--text3) 6%, var(--glass-bg));">💻</div>
|
||
<div class="member-info">
|
||
<div class="member-role">程序设计 <span class="member-name">纯情小妈</span></div>
|
||
<div class="member-sig">喜欢发呆</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="team-member">
|
||
<div class="avatar" style="background:color-mix(in srgb, var(--text3) 6%, var(--glass-bg));">🎨</div>
|
||
<div class="member-info">
|
||
<div class="member-role">UI/UX/Tools <span class="member-name">Freetime</span></div>
|
||
<div class="member-sig">关于你的风景。</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="team-member">
|
||
<div class="avatar" style="background:color-mix(in srgb, var(--text3) 6%, var(--glass-bg));">⚙️</div>
|
||
<div class="member-info">
|
||
<div class="member-role">后端开发 <span class="member-name">伯乐不相马</span></div>
|
||
<div class="member-sig">还是做不到吗？</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-divider"></div>
|
||
<div class="team-member">
|
||
<div class="avatar" style="background:color-mix(in srgb, var(--text3) 6%, var(--glass-bg));">🔧</div>
|
||
<div class="member-info">
|
||
<div class="member-role">技术支持 <span class="member-name">Ayk</span></div>
|
||
<div class="member-sig">吾友随贱，其寿似龟</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QQ Group - Glass -->
|
||
<div class="glass-card">
|
||
<div class="card-header">
|
||
<span class="icon-sm">💬</span>
|
||
<span class="label">加入QQ群</span>
|
||
</div>
|
||
<div class="qq-section">
|
||
<div class="qq-icon" style="background:color-mix(in srgb, #12B7F5 10%, var(--glass-bg));">🐧</div>
|
||
<div class="qq-info">
|
||
<div class="qq-title">闲言APP v2.0</div>
|
||
<div class="qq-desc">群号：271129018 · 交流反馈 · 获取最新动态</div>
|
||
</div>
|
||
<span style="color:#12B7F5;font-size:14px;">📋 ↗</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div class="page-footer">
|
||
<div style="display:flex;align-items:center;justify-content:center;gap:var(--space-md);">
|
||
<div style="width:40px;height:1px;background:var(--text3);"></div>
|
||
<span style="font-size:var(--font-sm);color:var(--text3);">到底了</span>
|
||
<div style="width:40px;height:1px;background:var(--text3);"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== SCHEME C ==================== -->
|
||
<div class="scheme-content" id="scheme-c">
|
||
<div class="scheme-desc">
|
||
<h3>方案 C · 极简列表式 (iOS Settings 风格)</h3>
|
||
<p>模仿 iOS 原生设置页的极简风格，顶部居中大图标 + 分组列表，无渐变无毛玻璃。信息以行列表形式展示，最轻量、最高效。适合追求简洁纯粹的用户，代码量最少，性能最优。</p>
|
||
<div class="tags">
|
||
<span class="tag">极简风格</span>
|
||
<span class="tag">iOS Settings</span>
|
||
<span class="tag">行列表</span>
|
||
<span class="tag">高性能</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="phone-grid">
|
||
<!-- App Info Page - Minimal -->
|
||
<div class="phone-frame">
|
||
<div class="phone-label"><span class="emoji">📱</span> 软件信息 · 极简</div>
|
||
<div class="phone-screen">
|
||
<div class="ios-nav">
|
||
<span class="back">‹ 返回</span>
|
||
<span class="title">软件信息</span>
|
||
</div>
|
||
<div class="page-body">
|
||
<!-- Hero -->
|
||
<div class="minimal-hero">
|
||
<div class="hero-icon">💬</div>
|
||
<div class="hero-name">闲言</div>
|
||
<div class="hero-sub">Xianyan · 文字阅读更纯粹</div>
|
||
<div class="hero-version">v2.0.1 (26042901)</div>
|
||
</div>
|
||
|
||
<!-- Tech Stack -->
|
||
<div class="minimal-section">
|
||
<div class="section-title">技术栈</div>
|
||
<div class="minimal-card">
|
||
<div class="minimal-row">
|
||
<div class="row-icon">🔥</div>
|
||
<div class="row-content"><div class="row-title">Dart</div><div class="row-sub">编程语言</div></div>
|
||
</div>
|
||
<div class="minimal-divider"></div>
|
||
<div class="minimal-row">
|
||
<div class="row-icon">🔄</div>
|
||
<div class="row-content"><div class="row-title">Riverpod</div><div class="row-sub">状态管理</div></div>
|
||
</div>
|
||
<div class="minimal-divider"></div>
|
||
<div class="minimal-row">
|
||
<div class="row-icon">📦</div>
|
||
<div class="row-content"><div class="row-title">GoRouter</div><div class="row-sub">路由导航</div></div>
|
||
</div>
|
||
<div class="minimal-divider"></div>
|
||
<div class="minimal-row">
|
||
<div class="row-icon">🌐</div>
|
||
<div class="row-content"><div class="row-title">Dio</div><div class="row-sub">网络请求</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Build Info -->
|
||
<div class="minimal-section">
|
||
<div class="section-title">构建信息</div>
|
||
<div class="minimal-card">
|
||
<div class="minimal-row">
|
||
<div class="row-icon">⭐</div>
|
||
<div class="row-content"><div class="row-title">版本号</div></div>
|
||
<div class="row-value">2.0.1</div>
|
||
</div>
|
||
<div class="minimal-divider"></div>
|
||
<div class="minimal-row">
|
||
<div class="row-icon">#️⃣</div>
|
||
<div class="row-content"><div class="row-title">内部版本号</div></div>
|
||
<div class="row-value">26042901</div>
|
||
</div>
|
||
<div class="minimal-divider"></div>
|
||
<div class="minimal-row">
|
||
<div class="row-icon">📅</div>
|
||
<div class="row-content"><div class="row-title">打包时间</div></div>
|
||
<div class="row-value">2026-05-29</div>
|
||
</div>
|
||
<div class="minimal-divider"></div>
|
||
<div class="minimal-row">
|
||
<div class="row-icon">🎨</div>
|
||
<div class="row-content"><div class="row-title">渲染引擎</div></div>
|
||
<div class="row-value">Impeller</div>
|
||
</div>
|
||
<div class="minimal-divider"></div>
|
||
<div class="minimal-row">
|
||
<div class="row-icon">📄</div>
|
||
<div class="row-content"><div class="row-title">开源框架</div></div>
|
||
<div class="row-arrow">›</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Device Info -->
|
||
<div class="minimal-section">
|
||
<div class="section-title">设备信息</div>
|
||
<div class="minimal-card">
|
||
<div class="minimal-row">
|
||
<div class="row-icon">🖥️</div>
|
||
<div class="row-content"><div class="row-title">操作系统</div></div>
|
||
<div class="row-value">HarmonyOS</div>
|
||
</div>
|
||
<div class="minimal-divider"></div>
|
||
<div class="minimal-row">
|
||
<div class="row-icon">📱</div>
|
||
<div class="row-content"><div class="row-title">设备类型</div></div>
|
||
<div class="row-value">移动设备</div>
|
||
</div>
|
||
<div class="minimal-divider"></div>
|
||
<div class="minimal-row">
|
||
<div class="row-icon">⚡</div>
|
||
<div class="row-content"><div class="row-title">Dart 版本</div></div>
|
||
<div class="row-value">3.8.0</div>
|
||
</div>
|
||
<div class="minimal-divider"></div>
|
||
<div class="minimal-row">
|
||
<div class="row-icon">📐</div>
|
||
<div class="row-content"><div class="row-title">屏幕尺寸</div></div>
|
||
<div class="row-value">393 × 852</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Platform -->
|
||
<div class="minimal-section">
|
||
<div class="section-title">平台兼容</div>
|
||
<div class="minimal-card">
|
||
<div class="platform-badges">
|
||
<span class="platform-badge active">📱 iOS</span>
|
||
<span class="platform-badge active">🤖 Android</span>
|
||
<span class="platform-badge active">🔷 HarmonyOS</span>
|
||
<span class="platform-badge active">💻 macOS</span>
|
||
<span class="platform-badge active">🪟 Windows</span>
|
||
<span class="platform-badge">🌐 Web</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div class="page-footer">
|
||
<div class="copy">© 2026 闲言</div>
|
||
<div class="slogan">文字阅读更纯粹</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Learn Us Page - Minimal -->
|
||
<div class="phone-frame">
|
||
<div class="phone-label"><span class="emoji">👥</span> 了解我们 · 极简</div>
|
||
<div class="phone-screen">
|
||
<div class="ios-nav">
|
||
<span class="back">‹ 返回</span>
|
||
<span class="title">了解我们</span>
|
||
</div>
|
||
<div class="page-body">
|
||
<!-- Hero -->
|
||
<div class="minimal-hero">
|
||
<div class="hero-icon">💬</div>
|
||
<div class="hero-name">闲言</div>
|
||
<div class="hero-sub">文字阅读更纯粹</div>
|
||
<div class="hero-version">Version 2.0.1</div>
|
||
</div>
|
||
|
||
<!-- Official Site -->
|
||
<div class="minimal-section">
|
||
<div class="section-title">官方网站</div>
|
||
<div class="minimal-card">
|
||
<div class="minimal-row">
|
||
<div class="row-icon">🌐</div>
|
||
<div class="row-content"><div class="row-title">工作室官网</div><div class="row-sub">wktyl.com</div></div>
|
||
<div class="row-arrow">›</div>
|
||
</div>
|
||
<div class="minimal-divider"></div>
|
||
<div class="minimal-row">
|
||
<div class="row-icon">📄</div>
|
||
<div class="row-content"><div class="row-title">闲言下载页面</div><div class="row-sub">eat.wktyl.com</div></div>
|
||
<div class="row-arrow">›</div>
|
||
</div>
|
||
<div class="minimal-divider"></div>
|
||
<div class="minimal-row">
|
||
<div class="row-icon">📚</div>
|
||
<div class="row-content"><div class="row-title">其他产品</div><div class="row-sub">poe.vogov.cn/app.html</div></div>
|
||
<div class="row-arrow">›</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Developer -->
|
||
<div class="minimal-section">
|
||
<div class="section-title">开发者</div>
|
||
<div class="minimal-card">
|
||
<div class="minimal-row">
|
||
<div class="row-icon">🏢</div>
|
||
<div class="row-content"><div class="row-title">微风暴网络科技工作室</div><div class="row-sub">专注文字与生活领域</div></div>
|
||
</div>
|
||
<div class="minimal-divider"></div>
|
||
<div class="minimal-row">
|
||
<div class="row-icon">📧</div>
|
||
<div class="row-content"><div class="row-title">商务合作 & 联系我们</div><div class="row-sub">点击查看多个联系邮箱</div></div>
|
||
<div class="row-arrow">›</div>
|
||
</div>
|
||
<div class="minimal-divider"></div>
|
||
<div class="minimal-row">
|
||
<div class="row-icon">💬</div>
|
||
<div class="row-content"><div class="row-title">微信公众号</div><div class="row-sub">搜索「微风暴」关注</div></div>
|
||
<div class="row-arrow">📋</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Team -->
|
||
<div class="minimal-section">
|
||
<div class="section-title">团队信息</div>
|
||
<div class="minimal-card">
|
||
<div class="minimal-row">
|
||
<div class="row-icon">💻</div>
|
||
<div class="row-content"><div class="row-title">程序设计</div><div class="row-sub">纯情小妈 · 喜欢发呆</div></div>
|
||
</div>
|
||
<div class="minimal-divider"></div>
|
||
<div class="minimal-row">
|
||
<div class="row-icon">🎨</div>
|
||
<div class="row-content"><div class="row-title">UI/UX/Tools</div><div class="row-sub">Freetime · 关于你的风景。</div></div>
|
||
</div>
|
||
<div class="minimal-divider"></div>
|
||
<div class="minimal-row">
|
||
<div class="row-icon">⚙️</div>
|
||
<div class="row-content"><div class="row-title">后端开发</div><div class="row-sub">伯乐不相马 · 还是做不到吗？</div></div>
|
||
</div>
|
||
<div class="minimal-divider"></div>
|
||
<div class="minimal-row">
|
||
<div class="row-icon">🔧</div>
|
||
<div class="row-content"><div class="row-title">技术支持</div><div class="row-sub">Ayk · 吾友随贱，其寿似龟</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- QQ Group -->
|
||
<div class="minimal-section">
|
||
<div class="section-title">加入QQ群</div>
|
||
<div class="minimal-card">
|
||
<div class="minimal-row">
|
||
<div class="row-icon">🐧</div>
|
||
<div class="row-content"><div class="row-title">闲言APP v2.0</div><div class="row-sub">群号：271129018 · 交流反馈</div></div>
|
||
<div class="row-arrow">›</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div class="page-footer">
|
||
<div style="display:flex;align-items:center;justify-content:center;gap:var(--space-md);">
|
||
<div style="width:40px;height:1px;background:var(--text3);"></div>
|
||
<span style="font-size:var(--font-sm);color:var(--text3);">到底了</span>
|
||
<div style="width:40px;height:1px;background:var(--text3);"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== Comparison Table ==================== -->
|
||
<div class="comparison-section">
|
||
<h2>📊 三套方案对比</h2>
|
||
<table class="comparison-table">
|
||
<thead>
|
||
<tr>
|
||
<th>对比维度</th>
|
||
<th>方案 A · 经典卡片</th>
|
||
<th>方案 B · 液态玻璃 <span class="recommend-badge">推荐</span></th>
|
||
<th>方案 C · 极简列表</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>视觉风格</td>
|
||
<td>经典 iOS 卡片分组</td>
|
||
<td>iOS 26 液态玻璃</td>
|
||
<td>iOS Settings 极简</td>
|
||
</tr>
|
||
<tr>
|
||
<td>与现有关于页一致性</td>
|
||
<td class="check">✅ 高</td>
|
||
<td class="check">✅ 高（GlassContainer）</td>
|
||
<td>⚠️ 中</td>
|
||
</tr>
|
||
<tr>
|
||
<td>毛玻璃效果</td>
|
||
<td>仅头部</td>
|
||
<td class="check">✅ 全页面</td>
|
||
<td>❌ 无</td>
|
||
</tr>
|
||
<tr>
|
||
<td>鸿蒙端兼容</td>
|
||
<td class="check">✅ 自动降级</td>
|
||
<td class="check">✅ 自动降级纯色</td>
|
||
<td class="check">✅ 无需降级</td>
|
||
</tr>
|
||
<tr>
|
||
<td>动态主题支持</td>
|
||
<td class="check">✅</td>
|
||
<td class="check">✅</td>
|
||
<td class="check">✅</td>
|
||
</tr>
|
||
<tr>
|
||
<td>信息密度</td>
|
||
<td>高</td>
|
||
<td>高</td>
|
||
<td>中</td>
|
||
</tr>
|
||
<tr>
|
||
<td>代码复杂度</td>
|
||
<td>中</td>
|
||
<td>中高</td>
|
||
<td>低</td>
|
||
</tr>
|
||
<tr>
|
||
<td>性能消耗</td>
|
||
<td>中</td>
|
||
<td>中高（blur）</td>
|
||
<td class="check">低</td>
|
||
</tr>
|
||
<tr>
|
||
<td>视觉冲击力</td>
|
||
<td>⭐⭐⭐</td>
|
||
<td>⭐⭐⭐⭐⭐</td>
|
||
<td>⭐⭐</td>
|
||
</tr>
|
||
<tr>
|
||
<td>推荐指数</td>
|
||
<td>⭐⭐⭐</td>
|
||
<td>⭐⭐⭐⭐⭐</td>
|
||
<td>⭐⭐⭐</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
function setTheme(theme) {
|
||
const container = document.querySelector('.preview-container');
|
||
container.setAttribute('data-theme', theme);
|
||
document.querySelectorAll('.theme-btn').forEach(btn => btn.classList.remove('active'));
|
||
event.target.classList.add('active');
|
||
}
|
||
|
||
function switchScheme(scheme) {
|
||
document.querySelectorAll('.scheme-content').forEach(el => el.classList.remove('active'));
|
||
document.querySelectorAll('.scheme-tab').forEach(el => el.classList.remove('active'));
|
||
document.getElementById('scheme-' + scheme).classList.add('active');
|
||
event.target.closest('.scheme-tab').classList.add('active');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|