2409 lines
91 KiB
HTML
2409 lines
91 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>有维商学 - OPC创业者赋能平台</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
--primary-color: #4F46E5;
|
||
--primary-light: #818CF8;
|
||
--primary-dark: #3730A3;
|
||
--secondary-color: #10B981;
|
||
--accent-color: #F59E0B;
|
||
--bg-color: #F8FAFC;
|
||
--card-bg: #FFFFFF;
|
||
--text-primary: #1E293B;
|
||
--text-secondary: #64748B;
|
||
--border-color: #E2E8F0;
|
||
--gradient-1: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
|
||
--gradient-2: linear-gradient(135deg, #10B981 0%, #059669 100%);
|
||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
background-color: var(--bg-color);
|
||
color: var(--text-primary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 页面容器 */
|
||
.page {
|
||
display: none;
|
||
min-height: 100vh;
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
.page.active {
|
||
display: block;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
@keyframes slideInRight {
|
||
from { opacity: 0; transform: translateX(30px); }
|
||
to { opacity: 1; transform: translateX(0); }
|
||
}
|
||
|
||
@keyframes scaleIn {
|
||
from { opacity: 0; transform: scale(0.95); }
|
||
to { opacity: 1; transform: scale(1); }
|
||
}
|
||
|
||
/* 用户下拉菜单 */
|
||
.user-dropdown {
|
||
position: relative;
|
||
}
|
||
|
||
.user-menu {
|
||
display: none;
|
||
position: absolute;
|
||
top: calc(100% + 8px);
|
||
right: 0;
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: var(--shadow-xl);
|
||
min-width: 200px;
|
||
overflow: hidden;
|
||
z-index: 100;
|
||
animation: scaleIn 0.2s ease;
|
||
}
|
||
|
||
.user-menu.active {
|
||
display: block;
|
||
}
|
||
|
||
.user-menu-header {
|
||
padding: 16px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
background: var(--bg-color);
|
||
}
|
||
|
||
.user-menu-header h4 {
|
||
font-size: 14px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.user-menu-header p {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.user-menu-item {
|
||
padding: 12px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.user-menu-item:hover {
|
||
background: var(--bg-color);
|
||
}
|
||
|
||
.user-menu-item.danger {
|
||
color: #EF4444;
|
||
}
|
||
|
||
.user-menu-item.danger:hover {
|
||
background: #FEF2F2;
|
||
}
|
||
|
||
/* ========== 仪表盘页面 ========== */
|
||
.dashboard-page {
|
||
background: var(--bg-color);
|
||
}
|
||
|
||
.navbar {
|
||
background: white;
|
||
padding: 16px 40px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-shadow: var(--shadow-sm);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
.nav-logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.nav-logo-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: white;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
padding: 4px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.nav-logo-icon img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.nav-menu {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.nav-item {
|
||
padding: 10px 20px;
|
||
border-radius: 10px;
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.nav-item:hover {
|
||
background: var(--bg-color);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.nav-item.active {
|
||
background: var(--primary-color);
|
||
color: white;
|
||
}
|
||
|
||
.nav-user {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.nav-notification {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
border: none;
|
||
background: var(--bg-color);
|
||
cursor: pointer;
|
||
position: relative;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.nav-notification::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 8px;
|
||
right: 8px;
|
||
width: 8px;
|
||
height: 8px;
|
||
background: #EF4444;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
background: var(--gradient-2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.dashboard-content {
|
||
padding: 32px 40px;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.dashboard-header {
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.dashboard-header h1 {
|
||
font-size: 32px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.dashboard-header p {
|
||
color: var(--text-secondary);
|
||
font-size: 16px;
|
||
}
|
||
|
||
/* Tab 导航 */
|
||
.tab-nav {
|
||
display: flex;
|
||
gap: 8px;
|
||
background: white;
|
||
padding: 8px;
|
||
border-radius: 16px;
|
||
margin-bottom: 32px;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.tab-btn {
|
||
padding: 14px 28px;
|
||
border: none;
|
||
background: transparent;
|
||
border-radius: 12px;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.tab-btn:hover {
|
||
background: var(--bg-color);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.tab-btn.active {
|
||
background: var(--primary-color);
|
||
color: white;
|
||
}
|
||
|
||
.tab-content {
|
||
display: none;
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
.tab-content.active {
|
||
display: block;
|
||
}
|
||
|
||
/* 统计卡片 */
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 24px;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.stat-card {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.stat-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.stat-icon.purple { background: #EDE9FE; color: #7C3AED; }
|
||
.stat-icon.green { background: #D1FAE5; color: #059669; }
|
||
.stat-icon.blue { background: #DBEAFE; color: #2563EB; }
|
||
.stat-icon.orange { background: #FEF3C7; color: #D97706; }
|
||
|
||
.stat-value {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.stat-label {
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 内容卡片 */
|
||
.content-card {
|
||
background: white;
|
||
border-radius: 20px;
|
||
padding: 32px;
|
||
box-shadow: var(--shadow-sm);
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.content-card h2 {
|
||
font-size: 22px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.content-card .description {
|
||
color: var(--text-secondary);
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.content-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
}
|
||
|
||
.content-item {
|
||
background: var(--bg-color);
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.content-item:hover {
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
.content-item-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.content-item h3 {
|
||
font-size: 18px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.content-item p {
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.content-item ul {
|
||
list-style: none;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.content-item li {
|
||
padding: 6px 0;
|
||
color: var(--text-secondary);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.content-item li::before {
|
||
content: '✓';
|
||
color: var(--secondary-color);
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 会员卡片 */
|
||
.membership-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
}
|
||
|
||
.membership-card {
|
||
background: white;
|
||
border: 2px solid var(--border-color);
|
||
border-radius: 20px;
|
||
padding: 32px;
|
||
text-align: center;
|
||
transition: all 0.3s;
|
||
position: relative;
|
||
}
|
||
|
||
.membership-card:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: var(--shadow-xl);
|
||
}
|
||
|
||
.membership-card.recommended {
|
||
border-color: var(--primary-color);
|
||
background: linear-gradient(180deg, #F5F3FF 0%, #FFFFFF 100%);
|
||
}
|
||
|
||
.membership-card.recommended::before {
|
||
content: '推荐';
|
||
position: absolute;
|
||
top: -12px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: var(--gradient-1);
|
||
color: white;
|
||
padding: 6px 20px;
|
||
border-radius: 20px;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.membership-card h3 {
|
||
font-size: 24px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.membership-card .price {
|
||
font-size: 40px;
|
||
font-weight: 800;
|
||
color: var(--primary-color);
|
||
margin: 16px 0;
|
||
}
|
||
|
||
.membership-card .price span {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.membership-card .desc {
|
||
color: var(--text-secondary);
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.membership-card ul {
|
||
list-style: none;
|
||
text-align: left;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.membership-card li {
|
||
padding: 10px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.membership-card li::before {
|
||
content: '✓';
|
||
width: 20px;
|
||
height: 20px;
|
||
background: #D1FAE5;
|
||
color: #059669;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.membership-btn {
|
||
width: 100%;
|
||
padding: 14px;
|
||
border-radius: 12px;
|
||
border: 2px solid var(--primary-color);
|
||
background: transparent;
|
||
color: var(--primary-color);
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.membership-btn:hover,
|
||
.membership-card.recommended .membership-btn {
|
||
background: var(--gradient-1);
|
||
border-color: transparent;
|
||
color: white;
|
||
}
|
||
|
||
/* 课程卡片 */
|
||
.course-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 20px;
|
||
}
|
||
|
||
.course-card {
|
||
background: var(--bg-color);
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.course-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.course-card-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.course-card h4 {
|
||
font-size: 16px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.course-card p {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.course-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.course-meta span {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
/* 学习路径 */
|
||
.learning-path {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 24px;
|
||
position: relative;
|
||
}
|
||
|
||
.learning-path::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 30px;
|
||
left: 10%;
|
||
right: 10%;
|
||
height: 4px;
|
||
background: linear-gradient(90deg, #4F46E5, #10B981);
|
||
border-radius: 2px;
|
||
z-index: 0;
|
||
}
|
||
|
||
.path-step {
|
||
text-align: center;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.path-step-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
background: white;
|
||
border: 4px solid var(--primary-color);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
margin: 0 auto 12px;
|
||
}
|
||
|
||
.path-step h4 {
|
||
font-size: 14px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.path-step p {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* ========== AI智能体页面 ========== */
|
||
.ai-page {
|
||
background: var(--bg-color);
|
||
}
|
||
|
||
.ai-content {
|
||
padding: 32px 40px;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.ai-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.ai-header h1 {
|
||
font-size: 32px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.ai-header p {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.search-box {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
|
||
.search-input {
|
||
padding: 12px 20px;
|
||
border: 2px solid var(--border-color);
|
||
border-radius: 12px;
|
||
width: 300px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.search-input:focus {
|
||
outline: none;
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.filter-btn {
|
||
padding: 12px 24px;
|
||
background: white;
|
||
border: 2px solid var(--border-color);
|
||
border-radius: 12px;
|
||
cursor: pointer;
|
||
font-weight: 500;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.filter-btn:hover,
|
||
.filter-btn.active {
|
||
border-color: var(--primary-color);
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
/* 行业场景筛选栏 */
|
||
.industry-filter {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 16px 0;
|
||
margin-bottom: 24px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.industry-filter-label {
|
||
font-weight: 500;
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.industry-btn {
|
||
padding: 8px 20px;
|
||
border: none;
|
||
background: transparent;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
color: var(--text-secondary);
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.industry-btn:hover {
|
||
background: var(--bg-color);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.industry-btn.active {
|
||
background: var(--primary-color);
|
||
color: white;
|
||
}
|
||
|
||
.industry-btn.more-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.industry-btn.more-btn::after {
|
||
content: '▼';
|
||
font-size: 10px;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.industry-btn.more-btn.expanded::after {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
/* 更多行业下拉 */
|
||
.industry-more-dropdown {
|
||
display: none;
|
||
position: absolute;
|
||
top: calc(100% + 8px);
|
||
right: 0;
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: var(--shadow-xl);
|
||
padding: 12px;
|
||
min-width: 200px;
|
||
z-index: 100;
|
||
animation: scaleIn 0.2s ease;
|
||
}
|
||
|
||
.industry-more-dropdown.active {
|
||
display: block;
|
||
}
|
||
|
||
.industry-more-dropdown .industry-btn {
|
||
display: block;
|
||
width: 100%;
|
||
text-align: left;
|
||
padding: 10px 16px;
|
||
border-radius: 8px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.industry-more-dropdown .industry-btn:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.industry-filter-wrapper {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.ai-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
}
|
||
|
||
.ai-card {
|
||
background: white;
|
||
border-radius: 20px;
|
||
padding: 28px;
|
||
box-shadow: var(--shadow-sm);
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
border: 2px solid transparent;
|
||
}
|
||
|
||
.ai-card:hover {
|
||
transform: translateY(-6px);
|
||
box-shadow: var(--shadow-lg);
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.ai-card-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.ai-card-avatar {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.ai-card-info h3 {
|
||
font-size: 18px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.ai-card-tag {
|
||
display: inline-block;
|
||
padding: 4px 12px;
|
||
background: var(--bg-color);
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.ai-card p {
|
||
color: var(--text-secondary);
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.ai-card-features {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.ai-card-feature {
|
||
padding: 6px 12px;
|
||
background: var(--bg-color);
|
||
border-radius: 8px;
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.ai-card-btn {
|
||
width: 100%;
|
||
padding: 12px;
|
||
background: var(--bg-color);
|
||
border: none;
|
||
border-radius: 12px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: var(--primary-color);
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.ai-card-btn:hover {
|
||
background: var(--gradient-1);
|
||
color: white;
|
||
}
|
||
|
||
/* AI 对话界面 */
|
||
.chat-modal {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 1000;
|
||
align-items: center;
|
||
justify-content: center;
|
||
animation: fadeIn 0.2s ease;
|
||
}
|
||
|
||
.chat-modal.active {
|
||
display: flex;
|
||
}
|
||
|
||
.chat-container {
|
||
width: 800px;
|
||
height: 80vh;
|
||
background: white;
|
||
border-radius: 24px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
animation: slideUp 0.3s ease;
|
||
}
|
||
|
||
@keyframes slideUp {
|
||
from { opacity: 0; transform: translateY(20px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.chat-header {
|
||
padding: 20px 24px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.chat-header-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.chat-avatar {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.chat-header-info h3 {
|
||
font-size: 18px;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.chat-header-info p {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.chat-close {
|
||
width: 40px;
|
||
height: 40px;
|
||
border: none;
|
||
background: var(--bg-color);
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.chat-messages {
|
||
flex: 1;
|
||
padding: 24px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.chat-message {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.chat-message.user {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.message-avatar {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.message-content {
|
||
max-width: 70%;
|
||
padding: 14px 18px;
|
||
border-radius: 18px;
|
||
background: var(--bg-color);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.chat-message.user .message-content {
|
||
background: var(--gradient-1);
|
||
color: white;
|
||
border-radius: 18px 18px 4px 18px;
|
||
}
|
||
|
||
.chat-message.bot .message-content {
|
||
border-radius: 18px 18px 18px 4px;
|
||
}
|
||
|
||
.quick-questions {
|
||
padding: 16px 24px;
|
||
border-top: 1px solid var(--border-color);
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.quick-btn {
|
||
padding: 8px 16px;
|
||
background: var(--bg-color);
|
||
border: none;
|
||
border-radius: 20px;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.quick-btn:hover {
|
||
background: var(--primary-light);
|
||
color: white;
|
||
}
|
||
|
||
.chat-input-area {
|
||
padding: 20px 24px;
|
||
border-top: 1px solid var(--border-color);
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
|
||
.chat-input {
|
||
flex: 1;
|
||
padding: 14px 20px;
|
||
border: 2px solid var(--border-color);
|
||
border-radius: 16px;
|
||
font-size: 15px;
|
||
resize: none;
|
||
}
|
||
|
||
.chat-input:focus {
|
||
outline: none;
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.chat-send {
|
||
width: 52px;
|
||
height: 52px;
|
||
border: none;
|
||
background: var(--gradient-1);
|
||
border-radius: 16px;
|
||
color: white;
|
||
cursor: pointer;
|
||
font-size: 20px;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.chat-send:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
/* 校友活动 */
|
||
.activity-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.activity-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
padding: 20px;
|
||
background: var(--bg-color);
|
||
border-radius: 16px;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.activity-item:hover {
|
||
transform: translateX(8px);
|
||
}
|
||
|
||
.activity-date {
|
||
width: 60px;
|
||
text-align: center;
|
||
}
|
||
|
||
.activity-date .day {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.activity-date .month {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.activity-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.activity-info h4 {
|
||
font-size: 16px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.activity-info p {
|
||
font-size: 13px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.activity-tag {
|
||
padding: 6px 16px;
|
||
background: white;
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
color: var(--primary-color);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 校友心声 */
|
||
.testimonial-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 24px;
|
||
}
|
||
|
||
.testimonial-card {
|
||
background: var(--bg-color);
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
}
|
||
|
||
.testimonial-content {
|
||
font-style: italic;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 16px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.testimonial-author {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.testimonial-avatar {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 50%;
|
||
background: var(--gradient-1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.testimonial-author h5 {
|
||
font-size: 14px;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.testimonial-author p {
|
||
font-size: 12px;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 1200px) {
|
||
.login-content {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.feature-cards {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
|
||
.stats-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.content-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.ai-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.login-content {
|
||
padding: 20px;
|
||
}
|
||
|
||
.login-info h1 {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.feature-cards {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.login-form-container {
|
||
width: 100%;
|
||
padding: 32px;
|
||
}
|
||
|
||
.navbar {
|
||
padding: 12px 20px;
|
||
}
|
||
|
||
.nav-menu {
|
||
display: none;
|
||
}
|
||
|
||
.dashboard-content,
|
||
.ai-content {
|
||
padding: 20px;
|
||
}
|
||
|
||
.stats-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.content-grid,
|
||
.membership-grid,
|
||
.ai-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.course-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.tab-nav {
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.chat-container {
|
||
width: 95%;
|
||
height: 90vh;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 仪表盘页面 -->
|
||
<div class="page dashboard-page active" id="dashboardPage">
|
||
<nav class="navbar">
|
||
<div class="nav-logo">
|
||
<div class="nav-logo-icon"><img src="logo.png" alt="有维商学"></div>
|
||
有维商学
|
||
</div>
|
||
<div class="nav-menu">
|
||
<div class="nav-item active" onclick="showPage('dashboardPage')">首页</div>
|
||
<div class="nav-item" onclick="showPage('aiPage')">AI智能体</div>
|
||
<div class="nav-item" onclick="openCozeWorkspace()">Coze工作台</div>
|
||
<div class="nav-item">学习中心</div>
|
||
<div class="nav-item">校友社群</div>
|
||
</div>
|
||
<div class="nav-user">
|
||
<button class="nav-notification">🔔</button>
|
||
<div class="user-dropdown">
|
||
<div class="user-avatar" id="userAvatar1" onclick="toggleUserMenu(1)">张</div>
|
||
<div class="user-menu" id="userMenu1">
|
||
<div class="user-menu-header">
|
||
<h4 id="displayName1">用户</h4>
|
||
<p>专业版会员</p>
|
||
</div>
|
||
<div class="user-menu-item" onclick="showTab('membership'); closeAllMenus();">
|
||
<span>👑</span> 会员中心
|
||
</div>
|
||
<div class="user-menu-item">
|
||
<span>⚙️</span> 账户设置
|
||
</div>
|
||
<div class="user-menu-item danger" onclick="handleLogout()">
|
||
<span>🚪</span> 退出登录
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="dashboard-content">
|
||
<div class="dashboard-header">
|
||
<h1 id="welcomeTitle">👋 欢迎回来，用户</h1>
|
||
<p>今天是学习的好日子，继续加油！</p>
|
||
</div>
|
||
|
||
<!-- Tab 导航 -->
|
||
<div class="tab-nav">
|
||
<button class="tab-btn active" onclick="showTab('overview')">平台概览</button>
|
||
<button class="tab-btn" onclick="showTab('education')">有维教育</button>
|
||
<button class="tab-btn" onclick="showTab('ai-tools')">AI工具</button>
|
||
<button class="tab-btn" onclick="showTab('alumni')">有维校友</button>
|
||
<button class="tab-btn" onclick="showTab('membership')">会员体系</button>
|
||
</div>
|
||
|
||
<!-- 平台概览 Tab -->
|
||
<div class="tab-content active" id="overview">
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-icon purple">🎯</div>
|
||
<div class="stat-value">OPC赋能</div>
|
||
<div class="stat-label">平台定位</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon green">🤖</div>
|
||
<div class="stat-value">AI驱动</div>
|
||
<div class="stat-label">核心价值</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon blue">👑</div>
|
||
<div class="stat-value">会员制</div>
|
||
<div class="stat-label">服务模式</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-icon orange">🚀</div>
|
||
<div class="stat-value">2000+</div>
|
||
<div class="stat-label">服务OPC</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-card">
|
||
<h2>🏛️ 平台使命</h2>
|
||
<p class="description">有维商学致力于成为OPC创业者最信赖的成长伙伴，通过教育赋能、工具加持、社群连接，助力每一位OPC实现商业梦想。</p>
|
||
|
||
<div class="content-grid">
|
||
<div class="content-item">
|
||
<div class="content-item-icon" style="background: #EDE9FE;">📚</div>
|
||
<h3>有维教育</h3>
|
||
<p>系统化的商业课程体系</p>
|
||
<ul>
|
||
<li>商业模式设计</li>
|
||
<li>产品开发方法论</li>
|
||
<li>市场营销策略</li>
|
||
<li>运营管理体系</li>
|
||
</ul>
|
||
</div>
|
||
<div class="content-item">
|
||
<div class="content-item-icon" style="background: #D1FAE5;">🤖</div>
|
||
<h3>AI工具</h3>
|
||
<p>智能体赋能创业全流程</p>
|
||
<ul>
|
||
<li>AISM智能客服</li>
|
||
<li>商业计划书生成</li>
|
||
<li>市场调研分析</li>
|
||
<li>财务模型计算</li>
|
||
</ul>
|
||
</div>
|
||
<div class="content-item">
|
||
<div class="content-item-icon" style="background: #FEF3C7;">👥</div>
|
||
<h3>有维校友</h3>
|
||
<p>互助共赢的创业者社群</p>
|
||
<ul>
|
||
<li>校友网络连接</li>
|
||
<li>资源精准对接</li>
|
||
<li>线上线下活动</li>
|
||
<li>导师一对一辅导</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 有维教育 Tab -->
|
||
<div class="tab-content" id="education">
|
||
<div class="content-card">
|
||
<h2>📚 有维教育 · 知行合一</h2>
|
||
<p class="description">从认知升级到实战落地，为OPC创业者提供系统化的商业教育体系</p>
|
||
|
||
<h3 style="margin: 24px 0 16px;">核心课程体系</h3>
|
||
<div class="course-grid">
|
||
<div class="course-card">
|
||
<div class="course-card-icon" style="background: #EDE9FE;">📊</div>
|
||
<h4>商业模式设计</h4>
|
||
<p>掌握商业画布、价值主张设计，构建可持续的商业模式</p>
|
||
<div class="course-meta">
|
||
<span>⏱️ 32课时</span>
|
||
<span>👥 1.2k学员</span>
|
||
</div>
|
||
</div>
|
||
<div class="course-card">
|
||
<div class="course-card-icon" style="background: #D1FAE5;">💡</div>
|
||
<h4>产品开发方法论</h4>
|
||
<p>学习精益创业、MVP验证，快速打造市场认可的产品</p>
|
||
<div class="course-meta">
|
||
<span>⏱️ 28课时</span>
|
||
<span>👥 980学员</span>
|
||
</div>
|
||
</div>
|
||
<div class="course-card">
|
||
<div class="course-card-icon" style="background: #DBEAFE;">📣</div>
|
||
<h4>市场营销策略</h4>
|
||
<p>数字营销、内容运营、增长黑客，全渠道获客方法论</p>
|
||
<div class="course-meta">
|
||
<span>⏱️ 36课时</span>
|
||
<span>👥 1.5k学员</span>
|
||
</div>
|
||
</div>
|
||
<div class="course-card">
|
||
<div class="course-card-icon" style="background: #FEF3C7;">⚙️</div>
|
||
<h4>运营管理体系</h4>
|
||
<p>团队搭建、流程优化、数据驱动，提升运营效率</p>
|
||
<div class="course-meta">
|
||
<span>⏱️ 24课时</span>
|
||
<span>👥 860学员</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 style="margin: 32px 0 16px;">学习路径</h3>
|
||
<div class="learning-path">
|
||
<div class="path-step">
|
||
<div class="path-step-icon">🌱</div>
|
||
<h4>认知启蒙</h4>
|
||
<p>建立商业思维</p>
|
||
</div>
|
||
<div class="path-step">
|
||
<div class="path-step-icon">🔧</div>
|
||
<h4>能力构建</h4>
|
||
<p>掌握核心技能</p>
|
||
</div>
|
||
<div class="path-step">
|
||
<div class="path-step-icon">🎯</div>
|
||
<h4>实战落地</h4>
|
||
<p>项目实践验证</p>
|
||
</div>
|
||
<div class="path-step">
|
||
<div class="path-step-icon">🚀</div>
|
||
<h4>持续进化</h4>
|
||
<p>迭代优化成长</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-card">
|
||
<h2>✨ 教育特色</h2>
|
||
<div class="content-grid">
|
||
<div class="content-item">
|
||
<div class="content-item-icon" style="background: #EDE9FE;">🎬</div>
|
||
<h3>视频课程</h3>
|
||
<p>高质量录播课程，随时随地学习</p>
|
||
<ul>
|
||
<li>专业讲师授课</li>
|
||
<li>案例实战解析</li>
|
||
<li>可反复回看</li>
|
||
</ul>
|
||
</div>
|
||
<div class="content-item">
|
||
<div class="content-item-icon" style="background: #D1FAE5;">🛠️</div>
|
||
<h3>实战项目</h3>
|
||
<p>真实商业场景，边学边练</p>
|
||
<ul>
|
||
<li>模拟创业项目</li>
|
||
<li>导师点评指导</li>
|
||
<li>作品集展示</li>
|
||
</ul>
|
||
</div>
|
||
<div class="content-item">
|
||
<div class="content-item-icon" style="background: #FEF3C7;">💬</div>
|
||
<h3>答疑社群</h3>
|
||
<p>专属学习群，问题即时解答</p>
|
||
<ul>
|
||
<li>学员互助讨论</li>
|
||
<li>助教在线答疑</li>
|
||
<li>学习打卡激励</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI工具 Tab -->
|
||
<div class="tab-content" id="ai-tools">
|
||
<div class="content-card">
|
||
<h2>🤖 AI工具 · OPC的数字员工</h2>
|
||
<p class="description">智能体矩阵赋能创业全流程，让每位OPC都拥有专属的AI助手团队</p>
|
||
|
||
<div class="ai-grid" style="margin-top: 24px;">
|
||
<div class="ai-card" onclick="openCozeWorkspace()">
|
||
<div class="ai-card-header">
|
||
<div class="ai-card-avatar" style="background: #E0E7FF;">🤖</div>
|
||
<div class="ai-card-info">
|
||
<h3>Coze AI</h3>
|
||
<span class="ai-card-tag">外部工具</span>
|
||
</div>
|
||
</div>
|
||
<p>一键跳转到 Coze AI 平台，快速开始智能体应用和工作流体验</p>
|
||
<div class="ai-card-features">
|
||
<span class="ai-card-feature">智能体平台</span>
|
||
<span class="ai-card-feature">工作流搭建</span>
|
||
<span class="ai-card-feature">立即访问</span>
|
||
</div>
|
||
<button class="ai-card-btn">打开 Coze AI</button>
|
||
</div>
|
||
|
||
<div class="ai-card" onclick="openChat('AISM平台智能客服', '🎯', '#EDE9FE')">
|
||
<div class="ai-card-header">
|
||
<div class="ai-card-avatar" style="background: #EDE9FE;">🎯</div>
|
||
<div class="ai-card-info">
|
||
<h3>AISM平台智能客服</h3>
|
||
<span class="ai-card-tag">客户服务</span>
|
||
</div>
|
||
</div>
|
||
<p>7×24小时在线服务，解答平台使用问题，提供智能化客户支持</p>
|
||
<div class="ai-card-features">
|
||
<span class="ai-card-feature">即时响应</span>
|
||
<span class="ai-card-feature">多轮对话</span>
|
||
<span class="ai-card-feature">问题分流</span>
|
||
</div>
|
||
<button class="ai-card-btn">开始对话</button>
|
||
</div>
|
||
|
||
<div class="ai-card" onclick="openChat('会议纪要助手', '📝', '#D1FAE5')">
|
||
<div class="ai-card-header">
|
||
<div class="ai-card-avatar" style="background: #D1FAE5;">📝</div>
|
||
<div class="ai-card-info">
|
||
<h3>会议纪要助手</h3>
|
||
<span class="ai-card-tag">效率工具</span>
|
||
</div>
|
||
</div>
|
||
<p>自动记录会议内容，智能生成结构化纪要，提取行动项和决议</p>
|
||
<div class="ai-card-features">
|
||
<span class="ai-card-feature">语音转文字</span>
|
||
<span class="ai-card-feature">重点提取</span>
|
||
<span class="ai-card-feature">任务分配</span>
|
||
</div>
|
||
<button class="ai-card-btn">开始对话</button>
|
||
</div>
|
||
|
||
<div class="ai-card" onclick="openChat('Deepseek问答助手', '🧠', '#DBEAFE')">
|
||
<div class="ai-card-header">
|
||
<div class="ai-card-avatar" style="background: #DBEAFE;">🧠</div>
|
||
<div class="ai-card-info">
|
||
<h3>Deepseek问答助手</h3>
|
||
<span class="ai-card-tag">知识问答</span>
|
||
</div>
|
||
</div>
|
||
<p>基于深度学习的智能问答系统，为您解答各类商业和技术问题</p>
|
||
<div class="ai-card-features">
|
||
<span class="ai-card-feature">深度理解</span>
|
||
<span class="ai-card-feature">精准回答</span>
|
||
<span class="ai-card-feature">知识丰富</span>
|
||
</div>
|
||
<button class="ai-card-btn">开始对话</button>
|
||
</div>
|
||
|
||
<div class="ai-card" onclick="openChat('行政助手', '📋', '#FEF3C7')">
|
||
<div class="ai-card-header">
|
||
<div class="ai-card-avatar" style="background: #FEF3C7;">📋</div>
|
||
<div class="ai-card-info">
|
||
<h3>行政助手</h3>
|
||
<span class="ai-card-tag">日常办公</span>
|
||
</div>
|
||
</div>
|
||
<p>处理日常行政事务，日程安排、文档整理、提醒通知等</p>
|
||
<div class="ai-card-features">
|
||
<span class="ai-card-feature">日程管理</span>
|
||
<span class="ai-card-feature">文档处理</span>
|
||
<span class="ai-card-feature">智能提醒</span>
|
||
</div>
|
||
<button class="ai-card-btn">开始对话</button>
|
||
</div>
|
||
|
||
<div class="ai-card" onclick="openChat('战略目标分析师', '📈', '#FCE7F3')">
|
||
<div class="ai-card-header">
|
||
<div class="ai-card-avatar" style="background: #FCE7F3;">📈</div>
|
||
<div class="ai-card-info">
|
||
<h3>战略目标分析师</h3>
|
||
<span class="ai-card-tag">战略咨询</span>
|
||
</div>
|
||
</div>
|
||
<p>帮助制定和分解战略目标，SWOT分析，竞品研究，市场洞察</p>
|
||
<div class="ai-card-features">
|
||
<span class="ai-card-feature">目标分解</span>
|
||
<span class="ai-card-feature">SWOT分析</span>
|
||
<span class="ai-card-feature">竞品研究</span>
|
||
</div>
|
||
<button class="ai-card-btn">开始对话</button>
|
||
</div>
|
||
|
||
<div class="ai-card" onclick="openChat('商业计划书生成器', '📄', '#E0E7FF')">
|
||
<div class="ai-card-header">
|
||
<div class="ai-card-avatar" style="background: #E0E7FF;">📄</div>
|
||
<div class="ai-card-info">
|
||
<h3>商业计划书生成器</h3>
|
||
<span class="ai-card-tag">创业工具</span>
|
||
</div>
|
||
</div>
|
||
<p>快速生成专业商业计划书，包含市场分析、财务预测等完整内容</p>
|
||
<div class="ai-card-features">
|
||
<span class="ai-card-feature">模板丰富</span>
|
||
<span class="ai-card-feature">数据分析</span>
|
||
<span class="ai-card-feature">一键导出</span>
|
||
</div>
|
||
<button class="ai-card-btn">开始对话</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-card">
|
||
<h2>🔒 AI工具核心特性</h2>
|
||
<div class="content-grid" style="grid-template-columns: repeat(4, 1fr);">
|
||
<div class="content-item" style="text-align: center;">
|
||
<div class="content-item-icon" style="background: #EDE9FE; margin: 0 auto 16px;">🔐</div>
|
||
<h3>数据安全</h3>
|
||
<p>企业级加密，隐私保护</p>
|
||
</div>
|
||
<div class="content-item" style="text-align: center;">
|
||
<div class="content-item-icon" style="background: #D1FAE5; margin: 0 auto 16px;">⚡</div>
|
||
<h3>即时响应</h3>
|
||
<p>毫秒级响应，高效处理</p>
|
||
</div>
|
||
<div class="content-item" style="text-align: center;">
|
||
<div class="content-item-icon" style="background: #DBEAFE; margin: 0 auto 16px;">🔄</div>
|
||
<h3>持续优化</h3>
|
||
<p>模型迭代，越用越智能</p>
|
||
</div>
|
||
<div class="content-item" style="text-align: center;">
|
||
<div class="content-item-icon" style="background: #FEF3C7; margin: 0 auto 16px;">🎨</div>
|
||
<h3>专属定制</h3>
|
||
<p>个性化配置，贴合需求</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 有维校友 Tab -->
|
||
<div class="tab-content" id="alumni">
|
||
<div class="content-card">
|
||
<h2>👥 有维校友 · 互助共赢的创业者社群</h2>
|
||
<p class="description">连接2000+优质OPC创业者，共享资源、互助成长、共创价值</p>
|
||
|
||
<div class="content-grid">
|
||
<div class="content-item">
|
||
<div class="content-item-icon" style="background: #EDE9FE;">🌐</div>
|
||
<h3>校友网络</h3>
|
||
<p>2000+精准人脉，拓展商业机会</p>
|
||
<ul>
|
||
<li>行业分类精准</li>
|
||
<li>地域覆盖广泛</li>
|
||
<li>资源互补对接</li>
|
||
</ul>
|
||
</div>
|
||
<div class="content-item">
|
||
<div class="content-item-icon" style="background: #D1FAE5;">🤝</div>
|
||
<h3>资源对接</h3>
|
||
<p>供需匹配，合作共赢</p>
|
||
<ul>
|
||
<li>项目合作</li>
|
||
<li>渠道对接</li>
|
||
<li>投融资机会</li>
|
||
</ul>
|
||
</div>
|
||
<div class="content-item">
|
||
<div class="content-item-icon" style="background: #FEF3C7;">🎉</div>
|
||
<h3>专属活动</h3>
|
||
<p>100+月度活动，学习社交两不误</p>
|
||
<ul>
|
||
<li>行业沙龙</li>
|
||
<li>创业大赛</li>
|
||
<li>年度峰会</li>
|
||
</ul>
|
||
</div>
|
||
<div class="content-item">
|
||
<div class="content-item-icon" style="background: #DBEAFE;">❓</div>
|
||
<h3>互助问答</h3>
|
||
<p>经验分享，问题互助</p>
|
||
<ul>
|
||
<li>实战经验分享</li>
|
||
<li>难题集体攻克</li>
|
||
<li>案例复盘学习</li>
|
||
</ul>
|
||
</div>
|
||
<div class="content-item">
|
||
<div class="content-item-icon" style="background: #FCE7F3;">👨🏫</div>
|
||
<h3>导师辅导</h3>
|
||
<p>资深导师一对一指导</p>
|
||
<ul>
|
||
<li>行业专家</li>
|
||
<li>成功创业者</li>
|
||
<li>投资人导师</li>
|
||
</ul>
|
||
</div>
|
||
<div class="content-item">
|
||
<div class="content-item-icon" style="background: #E0E7FF;">🏅</div>
|
||
<h3>校友认证</h3>
|
||
<p>专属身份标识，信任背书</p>
|
||
<ul>
|
||
<li>官方认证标识</li>
|
||
<li>信用体系</li>
|
||
<li>优先权益</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-card">
|
||
<h2>📅 近期活动</h2>
|
||
<div class="activity-list">
|
||
<div class="activity-item">
|
||
<div class="activity-date">
|
||
<div class="day">22</div>
|
||
<div class="month">3月</div>
|
||
</div>
|
||
<div class="activity-info">
|
||
<h4>OPC增长黑客实战分享会</h4>
|
||
<p>📍 线上直播 · 19:00-21:00</p>
|
||
</div>
|
||
<span class="activity-tag">线上</span>
|
||
</div>
|
||
<div class="activity-item">
|
||
<div class="activity-date">
|
||
<div class="day">28</div>
|
||
<div class="month">3月</div>
|
||
</div>
|
||
<div class="activity-info">
|
||
<h4>深圳校友企业参访</h4>
|
||
<p>📍 深圳南山区 · 14:00-17:00</p>
|
||
</div>
|
||
<span class="activity-tag">线下</span>
|
||
</div>
|
||
<div class="activity-item">
|
||
<div class="activity-date">
|
||
<div class="day">05</div>
|
||
<div class="month">4月</div>
|
||
</div>
|
||
<div class="activity-info">
|
||
<h4>2026春季创业大赛</h4>
|
||
<p>📍 上海 · 全天</p>
|
||
</div>
|
||
<span class="activity-tag">大型活动</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-card">
|
||
<h2>💬 校友心声</h2>
|
||
<div class="testimonial-grid">
|
||
<div class="testimonial-card">
|
||
<p class="testimonial-content">"加入有维校友后，不仅学到了系统的商业知识，更重要的是认识了很多志同道合的创业伙伴，我的第一个大客户就是校友介绍的！"</p>
|
||
<div class="testimonial-author">
|
||
<div class="testimonial-avatar">李</div>
|
||
<div>
|
||
<h5>李明华</h5>
|
||
<p>智慧零售OPC · 深圳</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="testimonial-card">
|
||
<p class="testimonial-content">"有维的AI工具帮我节省了大量时间，会议纪要助手和商业计划书生成器是我每天都在用的工具，效率提升了至少50%！"</p>
|
||
<div class="testimonial-author">
|
||
<div class="testimonial-avatar">王</div>
|
||
<div>
|
||
<h5>王丽娟</h5>
|
||
<p>企业服务OPC · 北京</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 会员体系 Tab -->
|
||
<div class="tab-content" id="membership">
|
||
<div class="content-card">
|
||
<h2>👑 会员体系</h2>
|
||
<p class="description">选择适合您的会员方案，开启创业成长之旅</p>
|
||
|
||
<div class="membership-grid" style="margin-top: 32px;">
|
||
<div class="membership-card">
|
||
<h3>基础版</h3>
|
||
<div class="price">免费</div>
|
||
<p class="desc">适合初步了解平台的新用户</p>
|
||
<ul>
|
||
<li>基础课程试看</li>
|
||
<li>AI智能体体验（每日3次）</li>
|
||
<li>校友社群浏览</li>
|
||
<li>平台基础功能</li>
|
||
</ul>
|
||
<button class="membership-btn">立即体验</button>
|
||
</div>
|
||
|
||
<div class="membership-card recommended">
|
||
<h3>专业版</h3>
|
||
<div class="price">¥999<span>/年</span></div>
|
||
<p class="desc">适合成长期的OPC创业者</p>
|
||
<ul>
|
||
<li>全部课程无限学习</li>
|
||
<li>AI智能体无限使用</li>
|
||
<li>校友社群全功能</li>
|
||
<li>月度线上活动</li>
|
||
<li>专属学习群</li>
|
||
<li>导师答疑（每月2次）</li>
|
||
</ul>
|
||
<button class="membership-btn">立即订阅</button>
|
||
</div>
|
||
|
||
<div class="membership-card">
|
||
<h3>企业版</h3>
|
||
<div class="price">¥2999<span>/年</span></div>
|
||
<p class="desc">适合规模化发展的OPC团队</p>
|
||
<ul>
|
||
<li>包含专业版全部权益</li>
|
||
<li>团队账号（最多5人）</li>
|
||
<li>线下活动优先参与</li>
|
||
<li>一对一导师辅导</li>
|
||
<li>专属客户经理</li>
|
||
<li>定制化培训方案</li>
|
||
</ul>
|
||
<button class="membership-btn">联系销售</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-card">
|
||
<h2>📊 会员权益对比</h2>
|
||
<table style="width: 100%; border-collapse: collapse; margin-top: 20px;">
|
||
<thead>
|
||
<tr style="background: var(--bg-color);">
|
||
<th style="padding: 16px; text-align: left; border-bottom: 2px solid var(--border-color);">权益项目</th>
|
||
<th style="padding: 16px; text-align: center; border-bottom: 2px solid var(--border-color);">基础版</th>
|
||
<th style="padding: 16px; text-align: center; border-bottom: 2px solid var(--border-color); background: #F5F3FF;">专业版</th>
|
||
<th style="padding: 16px; text-align: center; border-bottom: 2px solid var(--border-color);">企业版</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="padding: 14px 16px; border-bottom: 1px solid var(--border-color);">课程学习</td>
|
||
<td style="padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border-color);">试看</td>
|
||
<td style="padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border-color); background: #FAFAFF;">✓ 无限</td>
|
||
<td style="padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border-color);">✓ 无限</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding: 14px 16px; border-bottom: 1px solid var(--border-color);">AI智能体</td>
|
||
<td style="padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border-color);">3次/日</td>
|
||
<td style="padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border-color); background: #FAFAFF;">✓ 无限</td>
|
||
<td style="padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border-color);">✓ 无限</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding: 14px 16px; border-bottom: 1px solid var(--border-color);">校友社群</td>
|
||
<td style="padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border-color);">浏览</td>
|
||
<td style="padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border-color); background: #FAFAFF;">✓ 全功能</td>
|
||
<td style="padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border-color);">✓ 全功能</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding: 14px 16px; border-bottom: 1px solid var(--border-color);">导师辅导</td>
|
||
<td style="padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border-color);">-</td>
|
||
<td style="padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border-color); background: #FAFAFF;">2次/月</td>
|
||
<td style="padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border-color);">✓ 一对一</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding: 14px 16px; border-bottom: 1px solid var(--border-color);">团队账号</td>
|
||
<td style="padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border-color);">-</td>
|
||
<td style="padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border-color); background: #FAFAFF;">-</td>
|
||
<td style="padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border-color);">✓ 5人</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding: 14px 16px;">专属客户经理</td>
|
||
<td style="padding: 14px 16px; text-align: center;">-</td>
|
||
<td style="padding: 14px 16px; text-align: center; background: #FAFAFF;">-</td>
|
||
<td style="padding: 14px 16px; text-align: center;">✓</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI智能体页面 -->
|
||
<div class="page ai-page" id="aiPage">
|
||
<nav class="navbar">
|
||
<div class="nav-logo">
|
||
<div class="nav-logo-icon"><img src="logo.png" alt="有维商学"></div>
|
||
有维商学
|
||
</div>
|
||
<div class="nav-menu">
|
||
<div class="nav-item" onclick="showPage('dashboardPage')">首页</div>
|
||
<div class="nav-item active" onclick="showPage('aiPage')">AI智能体</div>
|
||
<div class="nav-item" onclick="openCozeWorkspace()">Coze工作台</div>
|
||
<div class="nav-item">学习中心</div>
|
||
<div class="nav-item">校友社群</div>
|
||
</div>
|
||
<div class="nav-user">
|
||
<button class="nav-notification">🔔</button>
|
||
<div class="user-dropdown">
|
||
<div class="user-avatar" id="userAvatar2" onclick="toggleUserMenu(2)">张</div>
|
||
<div class="user-menu" id="userMenu2">
|
||
<div class="user-menu-header">
|
||
<h4 id="displayName2">用户</h4>
|
||
<p>专业版会员</p>
|
||
</div>
|
||
<div class="user-menu-item" onclick="showPage('dashboardPage'); showTab('membership'); closeAllMenus();">
|
||
<span>👑</span> 会员中心
|
||
</div>
|
||
<div class="user-menu-item">
|
||
<span>⚙️</span> 账户设置
|
||
</div>
|
||
<div class="user-menu-item danger" onclick="handleLogout()">
|
||
<span>🚪</span> 退出登录
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="ai-content">
|
||
<div class="ai-header">
|
||
<div>
|
||
<h1>🤖 AI智能体门户</h1>
|
||
<p>选择您需要的AI助手，开启智能化工作体验</p>
|
||
</div>
|
||
<div class="search-box">
|
||
<input type="text" class="search-input" placeholder="搜索智能体...">
|
||
<button class="filter-btn active">全部</button>
|
||
<button class="filter-btn">客服</button>
|
||
<button class="filter-btn">效率</button>
|
||
<button class="filter-btn">分析</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 行业场景筛选栏 -->
|
||
<div class="industry-filter">
|
||
<button class="industry-btn active" onclick="filterByIndustry(this, 'all')">全部</button>
|
||
<button class="industry-btn" onclick="filterByIndustry(this, 'hr')">人资场景</button>
|
||
<button class="industry-btn" onclick="filterByIndustry(this, 'legal')">法务合规</button>
|
||
<button class="industry-btn" onclick="filterByIndustry(this, 'marketing')">营销市场</button>
|
||
<button class="industry-btn" onclick="filterByIndustry(this, 'admin')">行政管理</button>
|
||
<button class="industry-btn" onclick="filterByIndustry(this, 'education')">教育场景</button>
|
||
<button class="industry-btn" onclick="filterByIndustry(this, 'healthcare')">康养场景</button>
|
||
<button class="industry-btn" onclick="filterByIndustry(this, 'industry')">工业领域</button>
|
||
<div class="industry-filter-wrapper">
|
||
<button class="industry-btn more-btn" onclick="toggleIndustryMore(this)">更多</button>
|
||
<div class="industry-more-dropdown" id="industryMoreDropdown">
|
||
<button class="industry-btn" onclick="filterByIndustry(this, 'finance')">金融场景</button>
|
||
<button class="industry-btn" onclick="filterByIndustry(this, 'retail')">零售场景</button>
|
||
<button class="industry-btn" onclick="filterByIndustry(this, 'logistics')">物流场景</button>
|
||
<button class="industry-btn" onclick="filterByIndustry(this, 'realestate')">房产场景</button>
|
||
<button class="industry-btn" onclick="filterByIndustry(this, 'agriculture')">农业场景</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ai-grid">
|
||
<div class="ai-card" onclick="openChat('AISM平台智能客服', '🎯', '#EDE9FE')">
|
||
<div class="ai-card-header">
|
||
<div class="ai-card-avatar" style="background: #EDE9FE;">🎯</div>
|
||
<div class="ai-card-info">
|
||
<h3>AISM平台智能客服</h3>
|
||
<span class="ai-card-tag">客户服务</span>
|
||
</div>
|
||
</div>
|
||
<p>7×24小时在线服务，解答平台使用问题，提供智能化客户支持，快速响应您的需求</p>
|
||
<div class="ai-card-features">
|
||
<span class="ai-card-feature">即时响应</span>
|
||
<span class="ai-card-feature">多轮对话</span>
|
||
<span class="ai-card-feature">问题分流</span>
|
||
</div>
|
||
<button class="ai-card-btn">开始对话</button>
|
||
</div>
|
||
|
||
<div class="ai-card" onclick="openChat('会议纪要助手', '📝', '#D1FAE5')">
|
||
<div class="ai-card-header">
|
||
<div class="ai-card-avatar" style="background: #D1FAE5;">📝</div>
|
||
<div class="ai-card-info">
|
||
<h3>会议纪要助手</h3>
|
||
<span class="ai-card-tag">效率工具</span>
|
||
</div>
|
||
</div>
|
||
<p>自动记录会议内容，智能生成结构化纪要，提取关键决议和行动项，提升会议效率</p>
|
||
<div class="ai-card-features">
|
||
<span class="ai-card-feature">语音转文字</span>
|
||
<span class="ai-card-feature">重点提取</span>
|
||
<span class="ai-card-feature">任务分配</span>
|
||
</div>
|
||
<button class="ai-card-btn">开始对话</button>
|
||
</div>
|
||
|
||
<div class="ai-card" onclick="openChat('Deepseek问答助手', '🧠', '#DBEAFE')">
|
||
<div class="ai-card-header">
|
||
<div class="ai-card-avatar" style="background: #DBEAFE;">🧠</div>
|
||
<div class="ai-card-info">
|
||
<h3>Deepseek问答助手</h3>
|
||
<span class="ai-card-tag">知识问答</span>
|
||
</div>
|
||
</div>
|
||
<p>基于深度学习的智能问答系统，为您解答各类商业、技术、管理等专业问题</p>
|
||
<div class="ai-card-features">
|
||
<span class="ai-card-feature">深度理解</span>
|
||
<span class="ai-card-feature">精准回答</span>
|
||
<span class="ai-card-feature">知识丰富</span>
|
||
</div>
|
||
<button class="ai-card-btn">开始对话</button>
|
||
</div>
|
||
|
||
<div class="ai-card" onclick="openChat('行政助手', '📋', '#FEF3C7')">
|
||
<div class="ai-card-header">
|
||
<div class="ai-card-avatar" style="background: #FEF3C7;">📋</div>
|
||
<div class="ai-card-info">
|
||
<h3>行政助手</h3>
|
||
<span class="ai-card-tag">日常办公</span>
|
||
</div>
|
||
</div>
|
||
<p>处理日常行政事务，包括日程安排、文档整理、提醒通知、差旅预订等</p>
|
||
<div class="ai-card-features">
|
||
<span class="ai-card-feature">日程管理</span>
|
||
<span class="ai-card-feature">文档处理</span>
|
||
<span class="ai-card-feature">智能提醒</span>
|
||
</div>
|
||
<button class="ai-card-btn">开始对话</button>
|
||
</div>
|
||
|
||
<div class="ai-card" onclick="openChat('战略目标分析师', '📈', '#FCE7F3')">
|
||
<div class="ai-card-header">
|
||
<div class="ai-card-avatar" style="background: #FCE7F3;">📈</div>
|
||
<div class="ai-card-info">
|
||
<h3>战略目标分析师</h3>
|
||
<span class="ai-card-tag">战略咨询</span>
|
||
</div>
|
||
</div>
|
||
<p>帮助制定和分解战略目标，进行SWOT分析、竞品研究、市场趋势洞察</p>
|
||
<div class="ai-card-features">
|
||
<span class="ai-card-feature">目标分解</span>
|
||
<span class="ai-card-feature">SWOT分析</span>
|
||
<span class="ai-card-feature">竞品研究</span>
|
||
</div>
|
||
<button class="ai-card-btn">开始对话</button>
|
||
</div>
|
||
|
||
<div class="ai-card" onclick="openChat('商业计划书生成器', '📄', '#E0E7FF')">
|
||
<div class="ai-card-header">
|
||
<div class="ai-card-avatar" style="background: #E0E7FF;">📄</div>
|
||
<div class="ai-card-info">
|
||
<h3>商业计划书生成器</h3>
|
||
<span class="ai-card-tag">创业工具</span>
|
||
</div>
|
||
</div>
|
||
<p>快速生成专业商业计划书，包含执行摘要、市场分析、财务预测等完整模块</p>
|
||
<div class="ai-card-features">
|
||
<span class="ai-card-feature">模板丰富</span>
|
||
<span class="ai-card-feature">数据分析</span>
|
||
<span class="ai-card-feature">一键导出</span>
|
||
</div>
|
||
<button class="ai-card-btn">开始对话</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI对话弹窗 -->
|
||
<div class="chat-modal" id="chatModal">
|
||
<div class="chat-container">
|
||
<div class="chat-header">
|
||
<div class="chat-header-info">
|
||
<div class="chat-avatar" id="chatAvatar" style="background: #EDE9FE;">🎯</div>
|
||
<div>
|
||
<h3 id="chatTitle">AISM平台智能客服</h3>
|
||
<p>在线 · 平均响应 < 1秒</p>
|
||
</div>
|
||
</div>
|
||
<button class="chat-close" onclick="closeChat()">✕</button>
|
||
</div>
|
||
|
||
<div class="chat-messages" id="chatMessages">
|
||
<div class="chat-message bot">
|
||
<div class="message-avatar" style="background: #EDE9FE;">🎯</div>
|
||
<div class="message-content">
|
||
您好！我是您的AI助手，很高兴为您服务。请问有什么可以帮助您的吗？
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="quick-questions">
|
||
<button class="quick-btn" onclick="sendQuickMessage('如何升级会员？')">如何升级会员？</button>
|
||
<button class="quick-btn" onclick="sendQuickMessage('课程如何学习？')">课程如何学习？</button>
|
||
<button class="quick-btn" onclick="sendQuickMessage('校友权益有哪些？')">校友权益有哪些？</button>
|
||
<button class="quick-btn" onclick="sendQuickMessage('联系客服')">联系客服</button>
|
||
</div>
|
||
|
||
<div class="chat-input-area">
|
||
<textarea class="chat-input" id="chatInput" placeholder="输入您的问题..." rows="1" onkeypress="handleKeyPress(event)"></textarea>
|
||
<button class="chat-send" onclick="sendMessage()">➤</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 当前登录用户名
|
||
let currentUser = '';
|
||
|
||
// 页面加载时检查登录状态
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const savedUser = localStorage.getItem('currentUser') || sessionStorage.getItem('currentUser');
|
||
if (!savedUser) {
|
||
// 未登录，跳转到登录页面
|
||
window.location.href = 'login.html';
|
||
return;
|
||
}
|
||
// 已登录，更新用户显示
|
||
currentUser = savedUser;
|
||
updateUserDisplay(savedUser);
|
||
});
|
||
|
||
const AUTH_API_BASE = 'http://localhost:3010/api';
|
||
|
||
// 打开 Coze 工作台：调用自己后台 /coze/space-url，拿到 /space/<id>/develop
|
||
async function openCozeWorkspace() {
|
||
const email = String(currentUser || '').trim();
|
||
if (!email) {
|
||
alert('请先登录');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch(`${AUTH_API_BASE}/coze/space-url?user=${encodeURIComponent(email)}`);
|
||
const result = await response.json().catch(() => ({}));
|
||
|
||
if (!response.ok || !result || !result.url) {
|
||
throw new Error(result?.message || '未找到对应空间');
|
||
}
|
||
|
||
// 这里打开的是 /space/<id>/develop，Coze 自己会根据是否有 session 决定是否先让用户登录
|
||
window.open(result.url, '_blank');
|
||
} catch (error) {
|
||
alert(error.message || '打开 Coze 工作台失败');
|
||
}
|
||
}
|
||
|
||
// 页面切换
|
||
function showPage(pageId) {
|
||
document.querySelectorAll('.page').forEach(page => {
|
||
page.classList.remove('active');
|
||
});
|
||
document.getElementById(pageId).classList.add('active');
|
||
closeAllMenus();
|
||
}
|
||
|
||
// 更新用户显示
|
||
function updateUserDisplay(username) {
|
||
// 获取用户名的第一个字符作为头像
|
||
const firstChar = username.charAt(0).toUpperCase();
|
||
|
||
// 更新所有用户头像和显示名称
|
||
document.getElementById('userAvatar1').textContent = firstChar;
|
||
document.getElementById('userAvatar2').textContent = firstChar;
|
||
document.getElementById('displayName1').textContent = username;
|
||
document.getElementById('displayName2').textContent = username;
|
||
document.getElementById('welcomeTitle').textContent = `👋 欢迎回来，${username}`;
|
||
}
|
||
|
||
// 切换用户菜单
|
||
function toggleUserMenu(menuId) {
|
||
const menu = document.getElementById('userMenu' + menuId);
|
||
const isActive = menu.classList.contains('active');
|
||
|
||
// 先关闭所有菜单
|
||
closeAllMenus();
|
||
|
||
// 如果之前不是激活状态，则打开
|
||
if (!isActive) {
|
||
menu.classList.add('active');
|
||
}
|
||
}
|
||
|
||
// 关闭所有菜单
|
||
function closeAllMenus() {
|
||
document.querySelectorAll('.user-menu').forEach(menu => {
|
||
menu.classList.remove('active');
|
||
});
|
||
}
|
||
|
||
// 点击页面其他地方关闭菜单
|
||
document.addEventListener('click', function(e) {
|
||
if (!e.target.closest('.user-dropdown')) {
|
||
closeAllMenus();
|
||
}
|
||
});
|
||
|
||
// 退出登录
|
||
function handleLogout() {
|
||
currentUser = '';
|
||
// 清除登录状态
|
||
localStorage.removeItem('currentUser');
|
||
sessionStorage.removeItem('currentUser');
|
||
closeAllMenus();
|
||
// 跳转到登录页面
|
||
window.location.href = 'login.html';
|
||
}
|
||
|
||
// Tab切换
|
||
function showTab(tabId) {
|
||
document.querySelectorAll('.tab-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
document.querySelectorAll('.tab-content').forEach(content => {
|
||
content.classList.remove('active');
|
||
});
|
||
|
||
// 找到对应的按钮并激活
|
||
const tabBtns = document.querySelectorAll('.tab-btn');
|
||
tabBtns.forEach(btn => {
|
||
if (btn.textContent.includes(getTabName(tabId))) {
|
||
btn.classList.add('active');
|
||
}
|
||
});
|
||
document.getElementById(tabId).classList.add('active');
|
||
}
|
||
|
||
// 获取Tab名称
|
||
function getTabName(tabId) {
|
||
const names = {
|
||
'overview': '平台概览',
|
||
'education': '有维教育',
|
||
'ai-tools': 'AI工具',
|
||
'alumni': '有维校友',
|
||
'membership': '会员体系'
|
||
};
|
||
return names[tabId] || '';
|
||
}
|
||
|
||
// 行业场景筛选
|
||
function filterByIndustry(btn, industry) {
|
||
// 移除所有行业按钮的激活状态
|
||
document.querySelectorAll('.industry-btn').forEach(b => {
|
||
b.classList.remove('active');
|
||
});
|
||
// 激活当前按钮
|
||
btn.classList.add('active');
|
||
|
||
// 关闭更多下拉菜单
|
||
closeIndustryMore();
|
||
|
||
// 这里可以添加实际的筛选逻辑
|
||
console.log('筛选行业:', industry);
|
||
|
||
// 显示筛选提示（演示用）
|
||
if (industry !== 'all') {
|
||
showFilterToast(btn.textContent);
|
||
}
|
||
}
|
||
|
||
// 显示筛选提示
|
||
function showFilterToast(industryName) {
|
||
// 创建提示元素
|
||
let toast = document.getElementById('filterToast');
|
||
if (!toast) {
|
||
toast = document.createElement('div');
|
||
toast.id = 'filterToast';
|
||
toast.style.cssText = `
|
||
position: fixed;
|
||
bottom: 80px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: var(--gradient-1);
|
||
color: white;
|
||
padding: 12px 24px;
|
||
border-radius: 25px;
|
||
font-size: 14px;
|
||
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
|
||
z-index: 1000;
|
||
opacity: 0;
|
||
transition: opacity 0.3s;
|
||
`;
|
||
document.body.appendChild(toast);
|
||
}
|
||
toast.textContent = `已筛选「${industryName}」相关智能体`;
|
||
toast.style.opacity = '1';
|
||
|
||
setTimeout(() => {
|
||
toast.style.opacity = '0';
|
||
}, 2000);
|
||
}
|
||
|
||
// 切换更多行业下拉菜单
|
||
function toggleIndustryMore(btn) {
|
||
const dropdown = document.getElementById('industryMoreDropdown');
|
||
const isActive = dropdown.classList.contains('active');
|
||
|
||
closeIndustryMore();
|
||
|
||
if (!isActive) {
|
||
dropdown.classList.add('active');
|
||
btn.classList.add('expanded');
|
||
}
|
||
}
|
||
|
||
// 关闭更多行业下拉菜单
|
||
function closeIndustryMore() {
|
||
const dropdown = document.getElementById('industryMoreDropdown');
|
||
const moreBtn = document.querySelector('.more-btn');
|
||
if (dropdown) dropdown.classList.remove('active');
|
||
if (moreBtn) moreBtn.classList.remove('expanded');
|
||
}
|
||
|
||
// 点击页面其他地方关闭行业下拉菜单
|
||
document.addEventListener('click', function(e) {
|
||
if (!e.target.closest('.industry-filter-wrapper')) {
|
||
closeIndustryMore();
|
||
}
|
||
});
|
||
|
||
// 打开聊天窗口
|
||
function openChat(name, icon, bgColor) {
|
||
document.getElementById('chatTitle').textContent = name;
|
||
document.getElementById('chatAvatar').textContent = icon;
|
||
document.getElementById('chatAvatar').style.background = bgColor;
|
||
document.getElementById('chatModal').classList.add('active');
|
||
|
||
// 重置聊天内容
|
||
document.getElementById('chatMessages').innerHTML = `
|
||
<div class="chat-message bot">
|
||
<div class="message-avatar" style="background: ${bgColor};">${icon}</div>
|
||
<div class="message-content">
|
||
您好！我是${name}，很高兴为您服务。请问有什么可以帮助您的吗？
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// 关闭聊天窗口
|
||
function closeChat() {
|
||
document.getElementById('chatModal').classList.remove('active');
|
||
}
|
||
|
||
// 发送消息
|
||
function sendMessage() {
|
||
const input = document.getElementById('chatInput');
|
||
const message = input.value.trim();
|
||
|
||
if (message) {
|
||
addMessage(message, 'user');
|
||
input.value = '';
|
||
|
||
// 模拟AI响应
|
||
setTimeout(() => {
|
||
const responses = [
|
||
'感谢您的提问！让我为您详细解答这个问题...',
|
||
'这是一个很好的问题。根据我们的服务体系...',
|
||
'我理解您的需求。有维商学为您提供了多种解决方案...',
|
||
'让我为您查询相关信息。稍等片刻...'
|
||
];
|
||
const response = responses[Math.floor(Math.random() * responses.length)];
|
||
addMessage(response, 'bot');
|
||
}, 1000);
|
||
}
|
||
}
|
||
|
||
// 发送快捷消息
|
||
function sendQuickMessage(message) {
|
||
document.getElementById('chatInput').value = message;
|
||
sendMessage();
|
||
}
|
||
|
||
// 添加消息到聊天窗口
|
||
function addMessage(text, type) {
|
||
const messagesContainer = document.getElementById('chatMessages');
|
||
const avatar = document.getElementById('chatAvatar');
|
||
const icon = avatar.textContent;
|
||
const bgColor = avatar.style.background;
|
||
|
||
const messageHtml = type === 'user'
|
||
? `<div class="chat-message user">
|
||
<div class="message-avatar" style="background: var(--gradient-2);">张</div>
|
||
<div class="message-content">${text}</div>
|
||
</div>`
|
||
: `<div class="chat-message bot">
|
||
<div class="message-avatar" style="background: ${bgColor};">${icon}</div>
|
||
<div class="message-content">${text}</div>
|
||
</div>`;
|
||
|
||
messagesContainer.innerHTML += messageHtml;
|
||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||
}
|
||
|
||
// 键盘事件处理
|
||
function handleKeyPress(event) {
|
||
if (event.key === 'Enter' && !event.shiftKey) {
|
||
event.preventDefault();
|
||
sendMessage();
|
||
}
|
||
}
|
||
|
||
// 点击模态框背景关闭
|
||
document.getElementById('chatModal').addEventListener('click', function(e) {
|
||
if (e.target === this) {
|
||
closeChat();
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|