Yuzhiran Dev
24cd9cef53
- uni-app Vue3 frontend with dark glassmorphism theme - 5 AI dimensions: Origin / Development / Current / Learning / Trend - AI Chat system prompt updated from geometry to AI - 23 AI knowledge articles initialized in DB - Trend API + cron job for daily news - Product pricing (Pro ¥19.9, VIP ¥39.9) - Pinia stores + API utilities - AGENTS.md documentation
856 lines
34 KiB
HTML
856 lines
34 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>宇之然AI维度 - UI 设计稿 v2</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
background: #050508;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 32px;
|
||
padding: 40px;
|
||
}
|
||
|
||
/* === Phone Frame === */
|
||
.phone {
|
||
width: 375px;
|
||
background: radial-gradient(ellipse at 50% 0%, #0f0a1a 0%, #08080f 60%, #050508 100%);
|
||
border-radius: 44px;
|
||
overflow: hidden;
|
||
box-shadow:
|
||
0 0 80px rgba(100, 50, 200, 0.08),
|
||
0 20px 60px rgba(0,0,0,0.9);
|
||
border: 1px solid rgba(255,255,255,0.06);
|
||
position: relative;
|
||
}
|
||
/* Subtle cosmic glow */
|
||
.phone::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -120px;
|
||
left: -80px;
|
||
width: 300px;
|
||
height: 300px;
|
||
background: radial-gradient(circle, rgba(124,77,255,0.06) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
.phone::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -80px;
|
||
right: -60px;
|
||
width: 250px;
|
||
height: 250px;
|
||
background: radial-gradient(circle, rgba(0,188,212,0.04) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
.phone-content { padding: 0 20px; position: relative; z-index: 1; }
|
||
|
||
/* === Status Bar === */
|
||
.status-bar { display: flex; justify-content: space-between; padding: 14px 20px 10px; color: rgba(255,255,255,0.4); font-size: 12px; font-weight: 600; }
|
||
.status-bar .time { color: rgba(255,255,255,0.7); }
|
||
.status-icons { display: flex; gap: 6px; align-items: center; }
|
||
.status-icons span { font-size: 12px; }
|
||
|
||
/* === Header === */
|
||
.header { display: flex; justify-content: space-between; align-items: center; padding: 6px 0 20px; }
|
||
.header .brand { display: flex; align-items: center; gap: 10px; }
|
||
.header .brand-icon {
|
||
width: 36px; height: 36px; border-radius: 10px;
|
||
background: linear-gradient(135deg, rgba(124,77,255,0.3), rgba(0,188,212,0.2));
|
||
border: 1px solid rgba(124,77,255,0.2);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 18px;
|
||
box-shadow: 0 0 20px rgba(124,77,255,0.1);
|
||
}
|
||
.header .brand-text h1 { font-size: 20px; color: #fff; font-weight: 700; letter-spacing: 1px; }
|
||
.header .brand-text .subtitle { font-size: 10px; color: rgba(255,255,255,0.3); letter-spacing: 2px; text-transform: uppercase; }
|
||
.header-actions { display: flex; gap: 10px; }
|
||
.header-actions .icon {
|
||
width: 36px; height: 36px; border-radius: 50%;
|
||
background: rgba(255,255,255,0.04);
|
||
border: 1px solid rgba(255,255,255,0.06);
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: rgba(255,255,255,0.5); font-size: 15px; cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
.header-actions .icon:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.12); }
|
||
|
||
/* === Greeting === */
|
||
.greeting { margin-bottom: 20px; }
|
||
.greeting h2 { color: #fff; font-size: 26px; font-weight: 700; }
|
||
.greeting h2 span { background: linear-gradient(135deg, #b388ff, #7c4dff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||
.greeting p { color: rgba(255,255,255,0.3); font-size: 13px; margin-top: 4px; }
|
||
|
||
/* === Search Bar === */
|
||
.search-bar {
|
||
background: rgba(255,255,255,0.04);
|
||
border: 1px solid rgba(255,255,255,0.06);
|
||
border-radius: 14px;
|
||
padding: 12px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 24px;
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
}
|
||
.search-bar span { color: rgba(255,255,255,0.2); font-size: 14px; }
|
||
.search-bar .icon { color: rgba(255,255,255,0.2); }
|
||
|
||
/* === Section Header === */
|
||
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
|
||
.section-header h2 { color: #fff; font-size: 17px; font-weight: 600; letter-spacing: 0.5px; }
|
||
.section-header .more { color: rgba(255,255,255,0.25); font-size: 12px; cursor: pointer; transition: color 0.2s; }
|
||
.section-header .more:hover { color: rgba(255,255,255,0.5); }
|
||
|
||
/* === Dimensions Grid === */
|
||
.dim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; }
|
||
.dim-card {
|
||
border-radius: 18px;
|
||
padding: 20px 16px;
|
||
border: 1px solid rgba(255,255,255,0.06);
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
}
|
||
.dim-card:hover {
|
||
border-color: rgba(255,255,255,0.15);
|
||
transform: translateY(-2px);
|
||
}
|
||
.dim-card .dim-glow {
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
pointer-events: none;
|
||
opacity: 0.3;
|
||
}
|
||
.dim-card .dim-icon {
|
||
width: 42px; height: 42px; border-radius: 12px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 20px; margin-bottom: 14px;
|
||
position: relative;
|
||
}
|
||
.dim-card .dim-name { color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 4px; letter-spacing: 0.5px; }
|
||
.dim-card .dim-desc { color: rgba(255,255,255,0.3); font-size: 11px; line-height: 1.5; }
|
||
.dim-card .dim-count { color: rgba(255,255,255,0.15); font-size: 10px; margin-top: 10px; }
|
||
.dim-card.full { grid-column: 1 / -1; }
|
||
|
||
/* Color variants with glassmorphism backgrounds */
|
||
.dim-card.origin { background: linear-gradient(135deg, rgba(124,77,255,0.08), rgba(124,77,255,0.02)); }
|
||
.dim-icon.origin { background: linear-gradient(135deg, rgba(124,77,255,0.25), rgba(124,77,255,0.1)); color: #b388ff; box-shadow: 0 0 20px rgba(124,77,255,0.1); }
|
||
|
||
.dim-card.dev { background: linear-gradient(135deg, rgba(0,188,212,0.08), rgba(0,188,212,0.02)); }
|
||
.dim-icon.dev { background: linear-gradient(135deg, rgba(0,188,212,0.25), rgba(0,188,212,0.1)); color: #4dd0e1; box-shadow: 0 0 20px rgba(0,188,212,0.1); }
|
||
|
||
.dim-card.current { background: linear-gradient(135deg, rgba(0,200,150,0.08), rgba(0,200,150,0.02)); }
|
||
.dim-icon.current { background: linear-gradient(135deg, rgba(0,200,150,0.25), rgba(0,200,150,0.1)); color: #4db6ac; box-shadow: 0 0 20px rgba(0,200,150,0.1); }
|
||
|
||
.dim-card.learn { background: linear-gradient(135deg, rgba(255,193,7,0.08), rgba(255,193,7,0.02)); }
|
||
.dim-icon.learn { background: linear-gradient(135deg, rgba(255,193,7,0.25), rgba(255,193,7,0.1)); color: #ffd54f; box-shadow: 0 0 20px rgba(255,193,7,0.1); }
|
||
|
||
.dim-card.trend { background: linear-gradient(135deg, rgba(239,83,80,0.08), rgba(239,83,80,0.02)); }
|
||
.dim-icon.trend { background: linear-gradient(135deg, rgba(239,83,80,0.25), rgba(239,83,80,0.1)); color: #ef5350; box-shadow: 0 0 20px rgba(239,83,80,0.1); }
|
||
|
||
/* === News Cards === */
|
||
.news-card {
|
||
border-radius: 14px;
|
||
padding: 14px 16px;
|
||
margin-bottom: 10px;
|
||
background: rgba(255,255,255,0.03);
|
||
border: 1px solid rgba(255,255,255,0.05);
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
}
|
||
.news-card:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
|
||
.news-card .news-tag { display: inline-block; font-size: 10px; padding: 2px 10px; border-radius: 6px; margin-bottom: 8px; font-weight: 500; }
|
||
.news-card .news-tag.hot { background: rgba(239,83,80,0.15); color: #ef5350; }
|
||
.news-card .news-tag.new { background: rgba(0,188,212,0.15); color: #4dd0e1; }
|
||
.news-card .news-tag.pick { background: rgba(124,77,255,0.15); color: #b388ff; }
|
||
.news-card .news-title { color: rgba(255,255,255,0.85); font-size: 13px; line-height: 1.5; margin-bottom: 8px; font-weight: 500; }
|
||
.news-card .news-meta { color: rgba(255,255,255,0.2); font-size: 10px; display: flex; gap: 16px; }
|
||
|
||
/* === Bottom Nav === */
|
||
.bottom-nav {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 8px 0 22px;
|
||
background: rgba(255,255,255,0.02);
|
||
border-top: 1px solid rgba(255,255,255,0.04);
|
||
margin-top: 12px;
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
}
|
||
.nav-item {
|
||
text-align: center;
|
||
color: rgba(255,255,255,0.2);
|
||
font-size: 10px;
|
||
cursor: pointer;
|
||
padding: 4px 12px;
|
||
border-radius: 8px;
|
||
transition: all 0.2s;
|
||
}
|
||
.nav-item .nav-icon { font-size: 20px; margin-bottom: 2px; display: block; }
|
||
.nav-item.active { color: #b388ff; }
|
||
.nav-item.active .nav-icon { color: #b388ff; }
|
||
.nav-item.active { background: rgba(124,77,255,0.08); }
|
||
|
||
/* ============ PAGE 2: Knowledge List ============ */
|
||
.back-btn {
|
||
color: rgba(255,255,255,0.4);
|
||
font-size: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
cursor: pointer;
|
||
padding: 10px 0 14px;
|
||
transition: color 0.2s;
|
||
}
|
||
.back-btn:hover { color: rgba(255,255,255,0.7); }
|
||
|
||
.dim-banner {
|
||
border-radius: 18px;
|
||
padding: 24px 20px;
|
||
margin-bottom: 20px;
|
||
background: linear-gradient(135deg, rgba(124,77,255,0.1), rgba(0,0,0,0.3));
|
||
border: 1px solid rgba(124,77,255,0.12);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.dim-banner::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -60px;
|
||
right: -40px;
|
||
width: 180px;
|
||
height: 180px;
|
||
background: radial-gradient(circle, rgba(124,77,255,0.08) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
.dim-banner h2 { color: #fff; font-size: 22px; margin-bottom: 6px; }
|
||
.dim-banner p { color: rgba(255,255,255,0.4); font-size: 12px; line-height: 1.6; }
|
||
.dim-banner .progress-track { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; margin-top: 16px; overflow: hidden; }
|
||
.dim-banner .progress-track .fill { height: 100%; width: 35%; background: linear-gradient(90deg, #b388ff, #7c4dff); border-radius: 2px; }
|
||
.dim-banner .progress-label { color: rgba(255,255,255,0.2); font-size: 11px; margin-top: 8px; }
|
||
|
||
.knowledge-item {
|
||
border-radius: 14px;
|
||
padding: 16px;
|
||
margin-bottom: 10px;
|
||
background: rgba(255,255,255,0.03);
|
||
border: 1px solid rgba(255,255,255,0.05);
|
||
cursor: pointer;
|
||
display: flex;
|
||
gap: 14px;
|
||
align-items: flex-start;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.knowledge-item:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
|
||
.knowledge-item .k-icon {
|
||
width: 44px; height: 44px; border-radius: 12px;
|
||
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
|
||
font-size: 18px;
|
||
border: 1px solid rgba(255,255,255,0.06);
|
||
}
|
||
.knowledge-item .k-info { flex: 1; }
|
||
.knowledge-item .k-title { color: rgba(255,255,255,0.85); font-size: 14px; font-weight: 500; margin-bottom: 4px; }
|
||
.knowledge-item .k-desc { color: rgba(255,255,255,0.3); font-size: 11px; line-height: 1.5; margin-bottom: 8px; }
|
||
.knowledge-item .k-meta { display: flex; gap: 12px; color: rgba(255,255,255,0.15); font-size: 10px; align-items: center; }
|
||
.knowledge-item .k-badge { font-size: 10px; padding: 2px 10px; border-radius: 6px; font-weight: 500; }
|
||
.k-badge.free { background: rgba(76,175,80,0.12); color: #66bb6a; }
|
||
.k-badge.pro { background: rgba(255,152,0,0.12); color: #ffa726; }
|
||
|
||
/* ============ PAGE 3: AI Chat ============ */
|
||
.chat-header { display: flex; align-items: center; gap: 12px; padding: 10px 0 20px; }
|
||
.chat-avatar {
|
||
width: 42px; height: 42px; border-radius: 14px;
|
||
background: linear-gradient(135deg, rgba(124,77,255,0.3), rgba(0,188,212,0.2));
|
||
border: 1px solid rgba(124,77,255,0.15);
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: #fff; font-size: 18px;
|
||
box-shadow: 0 0 20px rgba(124,77,255,0.1);
|
||
}
|
||
.chat-header .chat-info h3 { color: #fff; font-size: 16px; font-weight: 600; }
|
||
.chat-header .chat-info span { color: rgba(255,255,255,0.3); font-size: 11px; }
|
||
.chat-quota {
|
||
margin-left: auto;
|
||
background: rgba(124,77,255,0.1);
|
||
border: 1px solid rgba(124,77,255,0.15);
|
||
border-radius: 20px;
|
||
padding: 6px 14px;
|
||
color: #b388ff;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.chat-msg { display: flex; gap: 10px; margin-bottom: 16px; }
|
||
.chat-msg.ai { }
|
||
.chat-msg.user { flex-direction: row-reverse; }
|
||
.chat-msg .bubble {
|
||
max-width: 82%;
|
||
padding: 12px 16px;
|
||
border-radius: 16px;
|
||
font-size: 13px;
|
||
line-height: 1.6;
|
||
}
|
||
.chat-msg.ai .bubble {
|
||
background: rgba(255,255,255,0.04);
|
||
border: 1px solid rgba(255,255,255,0.06);
|
||
color: rgba(255,255,255,0.8);
|
||
border-bottom-left-radius: 4px;
|
||
}
|
||
.chat-msg.user .bubble {
|
||
background: linear-gradient(135deg, rgba(124,77,255,0.3), rgba(124,77,255,0.15));
|
||
border: 1px solid rgba(124,77,255,0.15);
|
||
color: #fff;
|
||
border-bottom-right-radius: 4px;
|
||
}
|
||
.chat-msg .time { font-size: 10px; color: rgba(255,255,255,0.15); padding-top: 4px; }
|
||
.chat-msg.ai .time { padding-left: 52px; }
|
||
.chat-msg.user .time { text-align: right; }
|
||
|
||
.chat-input {
|
||
background: rgba(255,255,255,0.04);
|
||
border: 1px solid rgba(255,255,255,0.06);
|
||
border-radius: 14px;
|
||
padding: 10px 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-top: 8px;
|
||
backdrop-filter: blur(10px);
|
||
-webkit-backdrop-filter: blur(10px);
|
||
}
|
||
.chat-input input {
|
||
flex: 1;
|
||
background: none;
|
||
border: none;
|
||
outline: none;
|
||
color: rgba(255,255,255,0.8);
|
||
font-size: 14px;
|
||
}
|
||
.chat-input input::placeholder { color: rgba(255,255,255,0.2); }
|
||
.chat-input .send-btn {
|
||
width: 36px; height: 36px; border-radius: 50%;
|
||
background: linear-gradient(135deg, #7c4dff, #b388ff);
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: #fff; cursor: pointer;
|
||
box-shadow: 0 0 20px rgba(124,77,255,0.2);
|
||
transition: all 0.2s;
|
||
}
|
||
.chat-input .send-btn:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(124,77,255,0.3); }
|
||
|
||
/* ============ PAGE 4: Profile ============ */
|
||
.profile-card { text-align: center; padding: 20px 0 24px; }
|
||
.profile-avatar {
|
||
width: 72px; height: 72px; border-radius: 50%;
|
||
background: linear-gradient(135deg, rgba(124,77,255,0.3), rgba(0,188,212,0.15));
|
||
border: 2px solid rgba(124,77,255,0.2);
|
||
margin: 0 auto 14px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 32px;
|
||
box-shadow: 0 0 40px rgba(124,77,255,0.1);
|
||
}
|
||
.profile-card h3 { color: #fff; font-size: 18px; font-weight: 600; }
|
||
.profile-card .level { color: rgba(255,255,255,0.3); font-size: 12px; margin-top: 4px; }
|
||
|
||
.plan-card {
|
||
border-radius: 18px;
|
||
padding: 20px;
|
||
margin-bottom: 24px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: linear-gradient(135deg, rgba(124,77,255,0.08), rgba(0,0,0,0.2));
|
||
border: 1px solid rgba(124,77,255,0.12);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.plan-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -40px;
|
||
right: -20px;
|
||
width: 120px;
|
||
height: 120px;
|
||
background: radial-gradient(circle, rgba(124,77,255,0.06) 0%, transparent 70%);
|
||
}
|
||
.plan-card .plan-info h3 { color: #fff; font-size: 16px; font-weight: 600; }
|
||
.plan-card .plan-info p { color: rgba(255,255,255,0.3); font-size: 12px; margin-top: 4px; }
|
||
.plan-card .plan-btn {
|
||
background: linear-gradient(135deg, #7c4dff, #b388ff);
|
||
border: none;
|
||
padding: 10px 22px;
|
||
border-radius: 20px;
|
||
color: #fff;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
box-shadow: 0 0 20px rgba(124,77,255,0.2);
|
||
transition: all 0.2s;
|
||
}
|
||
.plan-card .plan-btn:hover { transform: scale(1.02); box-shadow: 0 0 30px rgba(124,77,255,0.3); }
|
||
|
||
.menu-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14px;
|
||
padding: 14px 0;
|
||
border-bottom: 1px solid rgba(255,255,255,0.04);
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
.menu-item:hover { padding-left: 4px; }
|
||
.menu-item .m-icon {
|
||
width: 34px; height: 34px; border-radius: 10px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 16px;
|
||
border: 1px solid rgba(255,255,255,0.06);
|
||
}
|
||
.menu-item .m-label { color: rgba(255,255,255,0.7); font-size: 14px; flex: 1; }
|
||
.menu-item .m-arrow { color: rgba(255,255,255,0.15); font-size: 14px; }
|
||
.menu-item .m-badge {
|
||
font-size: 10px; padding: 2px 10px; border-radius: 10px;
|
||
background: rgba(239,83,80,0.12); color: #ef5350;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* ============ PAGE 5: Trend Feed ============ */
|
||
.filter-bar { display: flex; gap: 8px; margin-bottom: 18px; overflow-x: auto; padding-bottom: 4px; }
|
||
.filter-bar::-webkit-scrollbar { display: none; }
|
||
.filter-tag {
|
||
padding: 6px 16px;
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
border: 1px solid rgba(255,255,255,0.06);
|
||
}
|
||
.filter-tag.active { background: rgba(124,77,255,0.2); color: #b388ff; border-color: rgba(124,77,255,0.2); }
|
||
.filter-tag:not(.active) { background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.3); }
|
||
.filter-tag:hover { border-color: rgba(255,255,255,0.15); }
|
||
|
||
.trend-card {
|
||
border-radius: 14px;
|
||
padding: 14px 16px;
|
||
margin-bottom: 10px;
|
||
background: rgba(255,255,255,0.03);
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
}
|
||
.trend-card:hover { background: rgba(255,255,255,0.05); }
|
||
.trend-card .trend-marker {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 14px;
|
||
bottom: 14px;
|
||
width: 3px;
|
||
border-radius: 2px;
|
||
}
|
||
.trend-card .trend-content { padding-left: 14px; }
|
||
.trend-card .trend-tag { display: inline-block; font-size: 10px; padding: 2px 10px; border-radius: 6px; margin-bottom: 8px; font-weight: 500; }
|
||
.trend-card .trend-title { color: rgba(255,255,255,0.85); font-size: 13px; line-height: 1.5; margin-bottom: 6px; font-weight: 500; }
|
||
.trend-card .trend-source { color: rgba(255,255,255,0.2); font-size: 10px; }
|
||
|
||
/* ============ Common ============ */
|
||
::-webkit-scrollbar { display: none; }
|
||
.label { color: rgba(255,255,255,0.2); font-size: 11px; text-align: center; padding: 12px 0; }
|
||
.screen-label { text-align: center; color: rgba(255,255,255,0.15); font-size: 11px; padding: 16px 0 4px; letter-spacing: 2px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ============ SCREEN 1: HOME ============ -->
|
||
<div class="phone">
|
||
<div class="screen-label">首页 — 5 维度入口 + 今日快讯</div>
|
||
<div class="status-bar">
|
||
<span class="time">9:41</span>
|
||
<div class="status-icons"><span>📶</span><span>📶</span><span>🔋</span></div>
|
||
</div>
|
||
<div class="phone-content">
|
||
<!-- Header -->
|
||
<div class="header">
|
||
<div class="brand">
|
||
<div class="brand-icon">✦</div>
|
||
<div class="brand-text">
|
||
<h1>AI 维度</h1>
|
||
<div class="subtitle">宇之然 · 探索</div>
|
||
</div>
|
||
</div>
|
||
<div class="header-actions">
|
||
<div class="icon">🔔</div>
|
||
<div class="icon">👤</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Greeting -->
|
||
<div class="greeting">
|
||
<h2>探索 <span>人工智能</span></h2>
|
||
<p>从 5 个维度，系统理解 AI 的过去、现在与未来</p>
|
||
</div>
|
||
|
||
<!-- Search -->
|
||
<div class="search-bar">
|
||
<span class="icon">🔍</span>
|
||
<span>搜索 AI 知识...</span>
|
||
</div>
|
||
|
||
<!-- 5 Dimensions - Glassmorphism Grid -->
|
||
<div class="section-header">
|
||
<h2>✦ 五个维度</h2>
|
||
</div>
|
||
<div class="dim-grid">
|
||
<div class="dim-card origin">
|
||
<div class="dim-icon origin">🌅</div>
|
||
<div class="dim-name">AI 起源</div>
|
||
<div class="dim-desc">从图灵到达特茅斯，追溯 70 年</div>
|
||
<div class="dim-count">12 篇 · 4 个问答</div>
|
||
</div>
|
||
<div class="dim-card dev">
|
||
<div class="dim-icon dev">📈</div>
|
||
<div class="dim-name">AI 发展</div>
|
||
<div class="dim-desc">深度学习·Transformer·MoE</div>
|
||
<div class="dim-count">18 篇 · 6 个问答</div>
|
||
</div>
|
||
<div class="dim-card current">
|
||
<div class="dim-icon current">🌐</div>
|
||
<div class="dim-name">AI 当前</div>
|
||
<div class="dim-desc">大模型格局·Agent·具身智能</div>
|
||
<div class="dim-count">15 篇 · 5 个问答</div>
|
||
</div>
|
||
<div class="dim-card learn">
|
||
<div class="dim-icon learn">🛠</div>
|
||
<div class="dim-name">AI 学习</div>
|
||
<div class="dim-desc">提示词·RAG·微调·工具链</div>
|
||
<div class="dim-count">20 篇 · 8 个问答</div>
|
||
</div>
|
||
<div class="dim-card trend full">
|
||
<div class="dim-icon trend">🔥</div>
|
||
<div class="dim-name">AI 趋势</div>
|
||
<div class="dim-desc">每日资讯 · 产品动态 · 论文快报</div>
|
||
<div class="dim-count">今日已更新 8 条</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Today's News -->
|
||
<div class="section-header">
|
||
<h2>📡 今日快讯</h2>
|
||
<span class="more">查看全部 →</span>
|
||
</div>
|
||
<div class="news-card">
|
||
<span class="news-tag hot">🔥 热门</span>
|
||
<div class="news-title">DeepSeek 被曝自研推理芯片，降低对英伟达依赖</div>
|
||
<div class="news-meta"><span>量子位</span><span>2 小时前</span></div>
|
||
</div>
|
||
<div class="news-card">
|
||
<span class="news-tag new">🚀 最新</span>
|
||
<div class="news-title">蚂蚁灵波开源 LingBot-World 2.0，世界模型首次实现小时级实时生成</div>
|
||
<div class="news-meta"><span>量子位</span><span>4 小时前</span></div>
|
||
</div>
|
||
<div class="news-card">
|
||
<span class="news-tag pick">📌 精选</span>
|
||
<div class="news-title">阿里获 ACL 2026 最佳资源论文奖，揭示 Agent 结构性缺陷</div>
|
||
<div class="news-meta"><span>机器之心</span><span>6 小时前</span></div>
|
||
</div>
|
||
|
||
<!-- Bottom Nav -->
|
||
<div class="bottom-nav">
|
||
<div class="nav-item active"><span class="nav-icon">✦</span>探索</div>
|
||
<div class="nav-item"><span class="nav-icon">💬</span>问答</div>
|
||
<div class="nav-item"><span class="nav-icon">📋</span>路径</div>
|
||
<div class="nav-item"><span class="nav-icon">👤</span>我的</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ SCREEN 2: DIMENSION DETAIL ============ -->
|
||
<div class="phone">
|
||
<div class="screen-label">维度详情 — AI 起源内容列表</div>
|
||
<div class="status-bar">
|
||
<span class="time">9:41</span>
|
||
<div class="status-icons"><span>📶</span><span>📶</span><span>🔋</span></div>
|
||
</div>
|
||
<div class="phone-content">
|
||
<!-- Back -->
|
||
<div class="back-btn">← 返回</div>
|
||
|
||
<!-- Banner -->
|
||
<div class="dim-banner">
|
||
<h2>🌅 AI 起源</h2>
|
||
<p>从 1950 年图灵测试到 2026 年通用人工智能，追溯人工智能 70 年演进之路，理解每一次技术跃迁背后的思想革命</p>
|
||
<div class="progress-track"><div class="fill"></div></div>
|
||
<div class="progress-label">探索进度 35% · 已读 4/12 篇</div>
|
||
</div>
|
||
|
||
<!-- Knowledge List -->
|
||
<div class="knowledge-item">
|
||
<div class="k-icon" style="background:rgba(124,77,255,0.1);color:#b388ff;border-color:rgba(124,77,255,0.1);">📜</div>
|
||
<div class="k-info">
|
||
<div class="k-title">图灵测试：人工智能的哲学起点</div>
|
||
<div class="k-desc">1950 年，艾伦·图灵提出"机器能思考吗？"</div>
|
||
<div class="k-meta">
|
||
<span>📖 5 分钟</span>
|
||
<span>⭐ 已收藏</span>
|
||
<span class="k-badge free">免费</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="knowledge-item">
|
||
<div class="k-icon" style="background:rgba(0,188,212,0.1);color:#4dd0e1;border-color:rgba(0,188,212,0.1);">🏛</div>
|
||
<div class="k-info">
|
||
<div class="k-title">达特茅斯会议：AI 的诞生时刻</div>
|
||
<div class="k-desc">1956 年，一群科学家正式命名了"人工智能"</div>
|
||
<div class="k-meta">
|
||
<span>📖 8 分钟</span>
|
||
<span>🔖 12 人收藏</span>
|
||
<span class="k-badge free">免费</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="knowledge-item">
|
||
<div class="k-icon" style="background:rgba(255,193,7,0.1);color:#ffd54f;border-color:rgba(255,193,7,0.1);">♟</div>
|
||
<div class="k-info">
|
||
<div class="k-title">深蓝 vs 卡斯帕罗夫：AI 的第一次胜利</div>
|
||
<div class="k-desc">1997 年，IBM 深蓝首次击败国际象棋世界冠军</div>
|
||
<div class="k-meta">
|
||
<span>📖 6 分钟</span>
|
||
<span>🔖 8 人收藏</span>
|
||
<span class="k-badge free">免费</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="knowledge-item">
|
||
<div class="k-icon" style="background:rgba(0,200,150,0.1);color:#4db6ac;border-color:rgba(0,200,150,0.1);">🧠</div>
|
||
<div class="k-info">
|
||
<div class="k-title">AlphaGo 与深度学习革命</div>
|
||
<div class="k-desc">2016 年，AI 攻克围棋——人类智力最后的堡垒</div>
|
||
<div class="k-meta">
|
||
<span>📖 10 分钟</span>
|
||
<span>🔖 15 人收藏</span>
|
||
<span class="k-badge pro">Pro</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="knowledge-item">
|
||
<div class="k-icon" style="background:rgba(239,83,80,0.1);color:#ef5350;border-color:rgba(239,83,80,0.1);">⚡</div>
|
||
<div class="k-info">
|
||
<div class="k-title">从 GPT 到 AGI：大模型时代</div>
|
||
<div class="k-desc">2018-2026，Transformer 如何改变一切</div>
|
||
<div class="k-meta">
|
||
<span>📖 12 分钟</span>
|
||
<span>🔖 20 人收藏</span>
|
||
<span class="k-badge pro">Pro</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ SCREEN 3: AI CHAT ============ -->
|
||
<div class="phone">
|
||
<div class="screen-label">AI 问答 — 沉浸式对话</div>
|
||
<div class="status-bar">
|
||
<span class="time">9:41</span>
|
||
<div class="status-icons"><span>📶</span><span>📶</span><span>🔋</span></div>
|
||
</div>
|
||
<div class="phone-content">
|
||
<!-- Chat Header -->
|
||
<div class="chat-header">
|
||
<div class="chat-avatar">∞</div>
|
||
<div class="chat-info">
|
||
<h3>AI 助手</h3>
|
||
<span>DeepSeek V4 · 在线</span>
|
||
</div>
|
||
<div class="chat-quota">剩余 5 次</div>
|
||
</div>
|
||
|
||
<!-- Messages -->
|
||
<div class="chat-msg ai">
|
||
<div class="chat-avatar" style="width:32px;height:32px;font-size:14px;border-radius:10px;flex-shrink:0;">∞</div>
|
||
<div>
|
||
<div class="bubble">你好！我是 AI 维度助手，你可以问我任何关于人工智能的问题，比如：</div>
|
||
<div class="time">AI 助手</div>
|
||
</div>
|
||
</div>
|
||
<div class="chat-msg ai">
|
||
<div class="chat-avatar" style="width:32px;height:32px;font-size:14px;border-radius:10px;flex-shrink:0;visibility:hidden;">∞</div>
|
||
<div>
|
||
<div class="bubble">💡 "Transformer 的核心原理是什么？"<br>💡 "RAG 和微调有什么区别？"<br>💡 "2026 年最值得关注的 AI 趋势？"</div>
|
||
</div>
|
||
</div>
|
||
<div class="chat-msg user">
|
||
<div>
|
||
<div class="bubble">Transformer 的核心原理是什么？</div>
|
||
<div class="time">刚刚</div>
|
||
</div>
|
||
</div>
|
||
<div class="chat-msg ai">
|
||
<div class="chat-avatar" style="width:32px;height:32px;font-size:14px;border-radius:10px;flex-shrink:0;">∞</div>
|
||
<div>
|
||
<div class="bubble">Transformer 的核心是 **自注意力机制（Self-Attention）**。它让模型在处理每个词时，能同时关注句子中所有词的关系，而不是像 RNN 那样逐个处理。</div>
|
||
<div class="time">AI 助手</div>
|
||
</div>
|
||
</div>
|
||
<div class="chat-msg ai">
|
||
<div class="chat-avatar" style="width:32px;height:32px;font-size:14px;border-radius:10px;flex-shrink:0;visibility:hidden;">∞</div>
|
||
<div>
|
||
<div class="bubble">简单说：Transformer = 自注意力 + 多头机制 + 位置编码。2017 年由 Google 提出后，直接催生了 GPT、BERT 等所有现代大模型。</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Input -->
|
||
<div class="chat-input">
|
||
<span style="color:rgba(255,255,255,0.2);cursor:pointer;">➕</span>
|
||
<input type="text" placeholder="输入你的 AI 问题..." />
|
||
<div class="send-btn">➤</div>
|
||
</div>
|
||
|
||
<!-- Bottom Nav -->
|
||
<div class="bottom-nav" style="margin-top:12px;">
|
||
<div class="nav-item"><span class="nav-icon">✦</span>探索</div>
|
||
<div class="nav-item active"><span class="nav-icon">💬</span>问答</div>
|
||
<div class="nav-item"><span class="nav-icon">📋</span>路径</div>
|
||
<div class="nav-item"><span class="nav-icon">👤</span>我的</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ SCREEN 4: PROFILE ============ -->
|
||
<div class="phone">
|
||
<div class="screen-label">个人中心 — 进度与订阅</div>
|
||
<div class="status-bar">
|
||
<span class="time">9:41</span>
|
||
<div class="status-icons"><span>📶</span><span>📶</span><span>🔋</span></div>
|
||
</div>
|
||
<div class="phone-content">
|
||
<!-- Profile -->
|
||
<div class="profile-card">
|
||
<div class="profile-avatar">🧑</div>
|
||
<h3>星辰旅者</h3>
|
||
<div class="level">Lv.5 · 维度学徒 · 已探索 12 篇文章</div>
|
||
</div>
|
||
|
||
<!-- Plan -->
|
||
<div class="plan-card">
|
||
<div class="plan-info">
|
||
<h3>✦ 免费版</h3>
|
||
<p>每日 5 次 AI 问答 · 解锁全部知识</p>
|
||
</div>
|
||
<div class="plan-btn">升级 Pro</div>
|
||
</div>
|
||
|
||
<!-- Menu -->
|
||
<div class="menu-item">
|
||
<div class="m-icon" style="background:rgba(124,77,255,0.1);color:#b388ff;border-color:rgba(124,77,255,0.1);">📚</div>
|
||
<span class="m-label">我的收藏</span>
|
||
<span class="m-arrow">→</span>
|
||
</div>
|
||
<div class="menu-item">
|
||
<div class="m-icon" style="background:rgba(0,188,212,0.1);color:#4dd0e1;border-color:rgba(0,188,212,0.1);">📊</div>
|
||
<span class="m-label">学习进度</span>
|
||
<span class="m-arrow">→</span>
|
||
</div>
|
||
<div class="menu-item">
|
||
<div class="m-icon" style="background:rgba(0,200,150,0.1);color:#4db6ac;border-color:rgba(0,200,150,0.1);">🏆</div>
|
||
<span class="m-label">成就</span>
|
||
<span class="m-badge">3 项未解锁</span>
|
||
<span class="m-arrow">→</span>
|
||
</div>
|
||
<div class="menu-item">
|
||
<div class="m-icon" style="background:rgba(255,193,7,0.1);color:#ffd54f;border-color:rgba(255,193,7,0.1);">📅</div>
|
||
<span class="m-label">每日签到</span>
|
||
<span class="m-arrow">→</span>
|
||
</div>
|
||
<div class="menu-item">
|
||
<div class="m-icon" style="background:rgba(239,83,80,0.1);color:#ef5350;border-color:rgba(239,83,80,0.1);">⚙️</div>
|
||
<span class="m-label">设置</span>
|
||
<span class="m-arrow">→</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ SCREEN 5: TREND FEED ============ -->
|
||
<div class="phone">
|
||
<div class="screen-label">AI 趋势 — 资讯流</div>
|
||
<div class="status-bar">
|
||
<span class="time">9:41</span>
|
||
<div class="status-icons"><span>📶</span><span>📶</span><span>🔋</span></div>
|
||
</div>
|
||
<div class="phone-content">
|
||
<div class="back-btn">← 返回</div>
|
||
<div class="section-header" style="margin-bottom:2px;">
|
||
<h2>🔥 AI 趋势</h2>
|
||
<span class="more">订阅</span>
|
||
</div>
|
||
<p style="color:rgba(255,255,255,0.3);font-size:12px;margin-bottom:16px;">每日追踪 AI 前沿动态，不错过每一个重要时刻</p>
|
||
|
||
<!-- Filter -->
|
||
<div class="filter-bar">
|
||
<span class="filter-tag active">全部</span>
|
||
<span class="filter-tag">🚀 产品</span>
|
||
<span class="filter-tag">📄 论文</span>
|
||
<span class="filter-tag">🔧 工具</span>
|
||
<span class="filter-tag">🏢 公司</span>
|
||
</div>
|
||
|
||
<!-- Trend Cards -->
|
||
<div class="trend-card" style="border:1px solid rgba(239,83,80,0.08);">
|
||
<div class="trend-marker" style="background:linear-gradient(180deg, #ef5350, #ff8a80);"></div>
|
||
<div class="trend-content">
|
||
<span class="trend-tag" style="background:rgba(239,83,80,0.12);color:#ef5350;">🔥 热门</span>
|
||
<div class="trend-title">DeepSeek 秘密造芯：推理芯片项目已启动一年</div>
|
||
<div class="trend-source">路透社 · 2026-07-10</div>
|
||
</div>
|
||
</div>
|
||
<div class="trend-card" style="border:1px solid rgba(0,188,212,0.08);">
|
||
<div class="trend-marker" style="background:linear-gradient(180deg, #4dd0e1, #80deea);"></div>
|
||
<div class="trend-content">
|
||
<span class="trend-tag" style="background:rgba(0,188,212,0.12);color:#4dd0e1;">🚀 产品</span>
|
||
<div class="trend-title">蚂蚁灵波开源 LingBot-World 2.0，世界模型首次实现小时级实时生成</div>
|
||
<div class="trend-source">量子位 · 2026-07-09</div>
|
||
</div>
|
||
</div>
|
||
<div class="trend-card" style="border:1px solid rgba(0,200,150,0.08);">
|
||
<div class="trend-marker" style="background:linear-gradient(180deg, #4db6ac, #80cbc4);"></div>
|
||
<div class="trend-content">
|
||
<span class="trend-tag" style="background:rgba(0,200,150,0.12);color:#4db6ac;">📄 论文</span>
|
||
<div class="trend-title">阿里获 ACL 2026 最佳资源论文奖，揭示 Agent 结构性缺陷</div>
|
||
<div class="trend-source">机器之心 · 2026-07-09</div>
|
||
</div>
|
||
</div>
|
||
<div class="trend-card" style="border:1px solid rgba(255,193,7,0.08);">
|
||
<div class="trend-marker" style="background:linear-gradient(180deg, #ffd54f, #ffe082);"></div>
|
||
<div class="trend-content">
|
||
<span class="trend-tag" style="background:rgba(255,193,7,0.12);color:#ffd54f;">🔧 工具</span>
|
||
<div class="trend-title">腾讯混元 Hy3 正式上线，Agent 任务解决率跃升至 90%</div>
|
||
<div class="trend-source">腾讯云 · 2026-07-09</div>
|
||
</div>
|
||
</div>
|
||
<div class="trend-card" style="border:1px solid rgba(124,77,255,0.08);">
|
||
<div class="trend-marker" style="background:linear-gradient(180deg, #b388ff, #d1c4e9);"></div>
|
||
<div class="trend-content">
|
||
<span class="trend-tag" style="background:rgba(124,77,255,0.12);color:#b388ff;">📌 精选</span>
|
||
<div class="trend-title">WAIC 2026 倒计时：7月17日上海开幕，1100+企业参展</div>
|
||
<div class="trend-source">量子位 · 2026-07-09</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="label">宇之然AI维度 · 2026 Design v2 · 暗色宇宙玻璃拟态</div>
|
||
|
||
</body>
|
||
</html> |