1349 lines
32 KiB
Vue
1349 lines
32 KiB
Vue
<template>
|
||
<div class="dashboard-page">
|
||
<nav class="navbar">
|
||
<div class="nav-logo">
|
||
<div class="nav-logo-icon"><img src="/logo.png" alt="有维商学" /></div>
|
||
有维商学
|
||
</div>
|
||
<div class="nav-menu">
|
||
<router-link to="/" class="nav-item" :class="{ active: $route.path === '/' }">首页</router-link>
|
||
<router-link to="/ai" class="nav-item" :class="{ active: $route.path === '/ai' }">AI智能体</router-link>
|
||
<button class="nav-item nav-link-btn" type="button" @click="openCozeWorkspace">Coze工作台</button>
|
||
<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" @click="toggleUserMenu">{{ userStore.userInitial }}</div>
|
||
<div class="user-menu" :class="{ active: isUserMenuOpen }">
|
||
<div class="user-menu-header">
|
||
<h4>{{ userStore.currentUser }}</h4>
|
||
<p>专业版会员</p>
|
||
</div>
|
||
<div class="user-menu-item" @click="goToMembership">
|
||
<span>👑</span> 会员中心
|
||
</div>
|
||
<div class="user-menu-item">
|
||
<span>⚙️</span> 账户设置
|
||
</div>
|
||
<div class="user-menu-item danger" @click="handleLogout">
|
||
<span>🚪</span> 退出登录
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="dashboard-content">
|
||
<div class="dashboard-header">
|
||
<h1>👋 欢迎回来，{{ userStore.currentUser }}</h1>
|
||
<p>今天是学习的好日子，继续加油！</p>
|
||
</div>
|
||
|
||
<!-- Tab 导航 -->
|
||
<div class="tab-nav">
|
||
<button
|
||
v-for="tab in tabs"
|
||
:key="tab.id"
|
||
class="tab-btn"
|
||
:class="{ active: currentTab === tab.id }"
|
||
@click="currentTab = tab.id"
|
||
>
|
||
{{ tab.name }}
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 平台概览 Tab -->
|
||
<div v-if="currentTab === 'overview'" class="tab-content">
|
||
<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 v-if="currentTab === 'education'" class="tab-content">
|
||
<div class="content-card">
|
||
<h2>📚 有维教育 · 知行合一</h2>
|
||
<p class="description">从认知升级到实战落地，为OPC创业者提供系统化的商业教育体系</p>
|
||
|
||
<h3 style="margin: 24px 0 16px">核心课程体系</h3>
|
||
<div class="course-grid">
|
||
<div
|
||
v-for="course in courses"
|
||
:key="course.name"
|
||
class="course-card"
|
||
>
|
||
<div class="course-card-icon" :style="{ background: course.bg }">
|
||
{{ course.icon }}
|
||
</div>
|
||
<h4>{{ course.name }}</h4>
|
||
<p>{{ course.desc }}</p>
|
||
<div class="course-meta">
|
||
<span>⏱️ {{ course.hours }}课时</span>
|
||
<span>👥 {{ course.students }}学员</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI工具 Tab -->
|
||
<div v-if="currentTab === 'ai-tools'" class="tab-content">
|
||
<div class="content-card">
|
||
<h2>🤖 AI工具 · OPC的数字员工</h2>
|
||
<p class="description">智能体矩阵赋能创业全流程，让每位OPC都拥有专属的AI助手团队</p>
|
||
|
||
<div class="ai-grid" style="margin-top: 24px">
|
||
<div
|
||
v-for="ai in aiTools"
|
||
:key="ai.name"
|
||
class="ai-card"
|
||
@click="openChat(ai)"
|
||
>
|
||
<div class="ai-card-header">
|
||
<div class="ai-card-avatar" :style="{ background: ai.bg }">{{ ai.icon }}</div>
|
||
<div class="ai-card-info">
|
||
<h3>{{ ai.name }}</h3>
|
||
<span class="ai-card-tag">{{ ai.tag }}</span>
|
||
</div>
|
||
</div>
|
||
<p>{{ ai.desc }}</p>
|
||
<div class="ai-card-features">
|
||
<span v-for="feature in ai.features" :key="feature" class="ai-card-feature">{{ feature }}</span>
|
||
</div>
|
||
<button class="ai-card-btn">开始对话</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 有维校友 Tab -->
|
||
<div v-if="currentTab === 'alumni'" class="tab-content">
|
||
<div class="content-card">
|
||
<h2>👥 有维校友 · 互助共赢的创业者社群</h2>
|
||
<p class="description">连接2000+优质OPC创业者，共享资源、互助成长、共创价值</p>
|
||
|
||
<div class="content-grid">
|
||
<div
|
||
v-for="item in alumniFeatures"
|
||
:key="item.title"
|
||
class="content-item"
|
||
>
|
||
<div class="content-item-icon" :style="{ background: item.bg }">{{ item.icon }}</div>
|
||
<h3>{{ item.title }}</h3>
|
||
<p>{{ item.desc }}</p>
|
||
<ul>
|
||
<li v-for="feature in item.features" :key="feature">{{ feature }}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 会员体系 Tab -->
|
||
<div v-if="currentTab === 'membership'" class="tab-content">
|
||
<div class="content-card">
|
||
<h2>👑 会员体系</h2>
|
||
<p class="description">选择适合您的会员方案，开启创业成长之旅</p>
|
||
|
||
<div class="membership-grid" style="margin-top: 32px">
|
||
<div
|
||
v-for="plan in membershipPlans"
|
||
:key="plan.name"
|
||
class="membership-card"
|
||
:class="{ recommended: plan.recommended }"
|
||
>
|
||
<h3>{{ plan.name }}</h3>
|
||
<div class="price" v-html="plan.price"></div>
|
||
<p class="desc">{{ plan.desc }}</p>
|
||
<ul>
|
||
<li v-for="feature in plan.features" :key="feature">{{ feature }}</li>
|
||
</ul>
|
||
<button class="membership-btn">{{ plan.btnText }}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 聊天模态框 -->
|
||
<div v-if="chatModal.isOpen" class="chat-modal" @click.self="closeChat">
|
||
<div class="chat-window">
|
||
<div class="chat-header">
|
||
<div class="chat-title">
|
||
<div class="chat-avatar" :style="{ background: chatModal.bg }">{{ chatModal.icon }}</div>
|
||
<span>{{ chatModal.name }}</span>
|
||
</div>
|
||
<button class="chat-close" @click="closeChat">✕</button>
|
||
</div>
|
||
<div class="chat-messages" ref="chatMessages">
|
||
<div
|
||
v-for="(msg, index) in chatModal.messages"
|
||
:key="index"
|
||
class="chat-message"
|
||
:class="msg.type"
|
||
>
|
||
<div class="message-avatar" :style="msg.type === 'user' ? { background: 'linear-gradient(135deg, #10B981 0%, #059669 100%)' } : { background: chatModal.bg }">
|
||
{{ msg.type === 'user' ? userStore.userInitial : chatModal.icon }}
|
||
</div>
|
||
<div class="message-content">{{ msg.text }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="chat-input-area">
|
||
<div class="quick-buttons">
|
||
<button
|
||
v-for="btn in quickButtons"
|
||
:key="btn"
|
||
class="quick-btn"
|
||
@click="sendQuickMessage(btn)"
|
||
>{{ btn }}</button>
|
||
</div>
|
||
<div class="chat-input-wrapper">
|
||
<textarea
|
||
v-model="chatInput"
|
||
class="chat-input"
|
||
placeholder="输入您的问题..."
|
||
rows="1"
|
||
@keydown.enter.prevent="sendMessage"
|
||
></textarea>
|
||
<button class="chat-send" @click="sendMessage">➤</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { useUserStore } from '@/stores/user'
|
||
|
||
const router = useRouter()
|
||
const userStore = useUserStore()
|
||
const AUTH_API_BASE = 'http://localhost:3010/api'
|
||
|
||
// Tab 相关
|
||
const currentTab = ref('overview')
|
||
const tabs = [
|
||
{ id: 'overview', name: '平台概览' },
|
||
{ id: 'education', name: '有维教育' },
|
||
{ id: 'ai-tools', name: 'AI工具' },
|
||
{ id: 'alumni', name: '有维校友' },
|
||
{ id: 'membership', name: '会员体系' }
|
||
]
|
||
|
||
// 用户菜单
|
||
const isUserMenuOpen = ref(false)
|
||
const toggleUserMenu = () => {
|
||
isUserMenuOpen.value = !isUserMenuOpen.value
|
||
}
|
||
|
||
// 点击外部关闭菜单
|
||
const handleClickOutside = (e: MouseEvent) => {
|
||
const target = e.target as HTMLElement
|
||
if (!target.closest('.user-dropdown')) {
|
||
isUserMenuOpen.value = false
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
document.addEventListener('click', handleClickOutside)
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
document.removeEventListener('click', handleClickOutside)
|
||
})
|
||
|
||
// 退出登录
|
||
const handleLogout = () => {
|
||
userStore.logout()
|
||
router.push('/login')
|
||
}
|
||
|
||
// 跳转到会员中心
|
||
const goToMembership = () => {
|
||
currentTab.value = 'membership'
|
||
isUserMenuOpen.value = false
|
||
}
|
||
|
||
const openCozeWorkspace = async () => {
|
||
const email = String(userStore.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()
|
||
|
||
if (!response.ok || !result?.url) {
|
||
throw new Error(result?.message || '未找到对应空间')
|
||
}
|
||
|
||
// 后端返回 /space/<id>/develop，Coze 会根据是否已登录决定是否先让用户登录
|
||
window.open(result.url, '_blank')
|
||
} catch (error) {
|
||
alert((error as Error).message || '打开Coze工作台失败')
|
||
}
|
||
}
|
||
|
||
// 课程数据
|
||
const courses = [
|
||
{ name: '商业模式设计', icon: '📊', desc: '掌握商业画布、价值主张设计，构建可持续的商业模式', hours: 32, students: '1.2k', bg: '#EDE9FE' },
|
||
{ name: '产品开发方法论', icon: '💡', desc: '学习精益创业、MVP验证，快速打造市场认可的产品', hours: 28, students: '980', bg: '#D1FAE5' },
|
||
{ name: '市场营销策略', icon: '📣', desc: '数字营销、内容运营、增长黑客，全渠道获客方法论', hours: 36, students: '1.5k', bg: '#DBEAFE' },
|
||
{ name: '运营管理体系', icon: '⚙️', desc: '团队搭建、流程优化、数据驱动，提升运营效率', hours: 24, students: '860', bg: '#FEF3C7' }
|
||
]
|
||
|
||
// AI 工具数据
|
||
const aiTools = [
|
||
{ name: 'AISM平台智能客服', icon: '🎯', tag: '客户服务', desc: '7×24小时在线服务，解答平台使用问题，提供智能化客户支持', features: ['即时响应', '多轮对话', '问题分流'], bg: '#EDE9FE' },
|
||
{ name: '会议纪要助手', icon: '📝', tag: '效率工具', desc: '自动记录会议内容，智能生成结构化纪要，提取行动项和决议', features: ['语音转文字', '重点提取', '任务分配'], bg: '#D1FAE5' },
|
||
{ name: 'Deepseek问答助手', icon: '🧠', tag: '知识问答', desc: '基于深度学习的智能问答系统，为您解答各类商业和技术问题', features: ['深度理解', '精准回答', '知识丰富'], bg: '#DBEAFE' },
|
||
{ name: '行政助手', icon: '📋', tag: '日常办公', desc: '处理日常行政事务，日程安排、文档整理、提醒通知等', features: ['日程管理', '文档处理', '智能提醒'], bg: '#FEF3C7' },
|
||
{ name: '战略目标分析师', icon: '📈', tag: '战略咨询', desc: '帮助制定和分解战略目标，SWOT分析，竞品研究，市场洞察', features: ['目标分解', 'SWOT分析', '竞品研究'], bg: '#FCE7F3' },
|
||
{ name: '商业计划书生成器', icon: '📄', tag: '创业工具', desc: '快速生成专业商业计划书，包含市场分析、财务预测等完整内容', features: ['模板丰富', '数据分析', '一键导出'], bg: '#E0E7FF' }
|
||
]
|
||
|
||
// 校友特色
|
||
const alumniFeatures = [
|
||
{ icon: '🌐', title: '校友网络', desc: '2000+精准人脉，拓展商业机会', features: ['行业分类精准', '地域覆盖广泛', '资源互补对接'], bg: '#EDE9FE' },
|
||
{ icon: '🤝', title: '资源对接', desc: '供需匹配，合作共赢', features: ['项目合作', '渠道对接', '投融资机会'], bg: '#D1FAE5' },
|
||
{ icon: '🎉', title: '专属活动', desc: '100+月度活动，学习社交两不误', features: ['行业沙龙', '创业大赛', '年度峰会'], bg: '#FEF3C7' },
|
||
{ icon: '❓', title: '互助问答', desc: '经验分享，问题互助', features: ['实战经验分享', '难题集体攻克', '案例复盘学习'], bg: '#DBEAFE' },
|
||
{ icon: '👨🏫', title: '导师辅导', desc: '资深导师一对一指导', features: ['行业专家', '成功创业者', '投资人导师'], bg: '#FCE7F3' },
|
||
{ icon: '🏅', title: '校友认证', desc: '专属身份标识，信任背书', features: ['官方认证标识', '信用体系', '优先权益'], bg: '#E0E7FF' }
|
||
]
|
||
|
||
// 会员方案
|
||
const membershipPlans = [
|
||
{
|
||
name: '基础版',
|
||
price: '免费',
|
||
desc: '适合初步了解平台的新用户',
|
||
features: ['基础课程试看', 'AI智能体体验（每日3次）', '校友社群浏览', '平台基础功能'],
|
||
btnText: '立即体验',
|
||
recommended: false
|
||
},
|
||
{
|
||
name: '专业版',
|
||
price: '¥999<span>/年</span>',
|
||
desc: '适合成长期的OPC创业者',
|
||
features: ['全部课程无限学习', 'AI智能体无限使用', '校友社群全功能', '月度线上活动', '专属学习群', '导师答疑（每月2次）'],
|
||
btnText: '立即订阅',
|
||
recommended: true
|
||
},
|
||
{
|
||
name: '企业版',
|
||
price: '¥2999<span>/年</span>',
|
||
desc: '适合规模化发展的OPC团队',
|
||
features: ['包含专业版全部权益', '团队账号（最多5人）', '线下活动优先参与', '一对一导师辅导', '专属客户经理', '定制化培训方案'],
|
||
btnText: '联系销售',
|
||
recommended: false
|
||
}
|
||
]
|
||
|
||
// 聊天模态框
|
||
const chatModal = ref({
|
||
isOpen: false,
|
||
name: '',
|
||
icon: '',
|
||
bg: '',
|
||
messages: [] as { type: 'user' | 'bot'; text: string }[]
|
||
})
|
||
|
||
const chatInput = ref('')
|
||
const quickButtons = ['帮我写商业计划书', '分析一下市场趋势', '校友权益有哪些？', '联系客服']
|
||
|
||
const openChat = (ai: typeof aiTools[0]) => {
|
||
chatModal.value = {
|
||
isOpen: true,
|
||
name: ai.name,
|
||
icon: ai.icon,
|
||
bg: ai.bg,
|
||
messages: [
|
||
{ type: 'bot', text: `您好！我是${ai.name}，很高兴为您服务。请问有什么可以帮助您的吗？` }
|
||
]
|
||
}
|
||
}
|
||
|
||
const closeChat = () => {
|
||
chatModal.value.isOpen = false
|
||
}
|
||
|
||
const sendMessage = () => {
|
||
const text = chatInput.value.trim()
|
||
if (!text) return
|
||
|
||
chatModal.value.messages.push({ type: 'user', text })
|
||
chatInput.value = ''
|
||
|
||
// 模拟 AI 回复
|
||
setTimeout(() => {
|
||
const responses = [
|
||
'感谢您的提问！让我为您详细解答这个问题...',
|
||
'这是一个很好的问题。根据我们的服务体系...',
|
||
'我理解您的需求。有维商学为您提供了多种解决方案...',
|
||
'让我为您查询相关信息。稍等片刻...'
|
||
]
|
||
const response = responses[Math.floor(Math.random() * responses.length)] || '感谢您的提问！'
|
||
chatModal.value.messages.push({ type: 'bot', text: response })
|
||
scrollToBottom()
|
||
}, 1000)
|
||
}
|
||
|
||
const sendQuickMessage = (text: string) => {
|
||
chatInput.value = text
|
||
sendMessage()
|
||
}
|
||
|
||
const scrollToBottom = () => {
|
||
nextTick(() => {
|
||
const container = document.querySelector('.chat-messages')
|
||
if (container) {
|
||
container.scrollTop = container.scrollHeight
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.dashboard-page {
|
||
background: #f8fafc;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
height: 100dvh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.navbar {
|
||
background: white;
|
||
padding: 16px 40px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
width: 100%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.nav-logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.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: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.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: #64748b;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.nav-link-btn {
|
||
border: none;
|
||
background: transparent;
|
||
font: inherit;
|
||
}
|
||
|
||
.nav-item:hover {
|
||
background: #f8fafc;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.nav-item.active {
|
||
background: #4f46e5;
|
||
color: white;
|
||
}
|
||
|
||
.nav-user {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
}
|
||
|
||
.nav-notification {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
border: none;
|
||
background: #f8fafc;
|
||
cursor: pointer;
|
||
font-size: 18px;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.nav-notification:hover {
|
||
background: #e2e8f0;
|
||
}
|
||
|
||
.user-dropdown {
|
||
position: relative;
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.user-avatar:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.user-menu {
|
||
display: none;
|
||
position: absolute;
|
||
top: calc(100% + 8px);
|
||
right: 0;
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
||
min-width: 200px;
|
||
overflow: hidden;
|
||
z-index: 100;
|
||
animation: scaleIn 0.2s ease;
|
||
}
|
||
|
||
.user-menu.active {
|
||
display: block;
|
||
}
|
||
|
||
@keyframes scaleIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: scale(0.95);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
.user-menu-header {
|
||
padding: 16px;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.user-menu-header h4 {
|
||
font-size: 14px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.user-menu-header p {
|
||
font-size: 12px;
|
||
color: #64748b;
|
||
}
|
||
|
||
.user-menu-item {
|
||
padding: 12px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.user-menu-item:hover {
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.user-menu-item.danger {
|
||
color: #ef4444;
|
||
}
|
||
|
||
.user-menu-item.danger:hover {
|
||
background: #fef2f2;
|
||
}
|
||
|
||
.dashboard-content {
|
||
flex: 1;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 40px;
|
||
width: 100%;
|
||
}
|
||
|
||
.dashboard-header {
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.dashboard-header h1 {
|
||
font-size: 32px;
|
||
margin-bottom: 8px;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.dashboard-header p {
|
||
color: #64748b;
|
||
}
|
||
|
||
.tab-nav {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-bottom: 24px;
|
||
border-bottom: 2px solid #e2e8f0;
|
||
padding-bottom: 16px;
|
||
}
|
||
|
||
.tab-btn {
|
||
padding: 12px 24px;
|
||
border: none;
|
||
background: transparent;
|
||
color: #64748b;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
border-radius: 10px;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.tab-btn:hover {
|
||
background: #f1f5f9;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.tab-btn.active {
|
||
background: #4f46e5;
|
||
color: white;
|
||
}
|
||
|
||
.tab-content {
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 20px;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.stat-card {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
text-align: center;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.stat-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28px;
|
||
margin: 0 auto 16px;
|
||
}
|
||
|
||
.stat-icon.purple {
|
||
background: #ede9fe;
|
||
}
|
||
.stat-icon.green {
|
||
background: #d1fae5;
|
||
}
|
||
.stat-icon.blue {
|
||
background: #dbeafe;
|
||
}
|
||
.stat-icon.orange {
|
||
background: #fef3c7;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #1e293b;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 14px;
|
||
color: #64748b;
|
||
}
|
||
|
||
.content-card {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
margin-bottom: 24px;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.content-card h2 {
|
||
font-size: 24px;
|
||
margin-bottom: 8px;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.content-card .description {
|
||
color: #64748b;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.content-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.content-item {
|
||
background: #f8fafc;
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
}
|
||
|
||
.content-item-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.content-item h3 {
|
||
font-size: 18px;
|
||
margin-bottom: 8px;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.content-item p {
|
||
color: #64748b;
|
||
font-size: 14px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.content-item ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.content-item li {
|
||
padding: 6px 0;
|
||
color: #64748b;
|
||
font-size: 14px;
|
||
position: relative;
|
||
padding-left: 16px;
|
||
}
|
||
|
||
.content-item li::before {
|
||
content: '•';
|
||
color: #4f46e5;
|
||
position: absolute;
|
||
left: 0;
|
||
}
|
||
|
||
.course-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 20px;
|
||
}
|
||
|
||
.course-card {
|
||
background: #f8fafc;
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
.course-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.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;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.course-card p {
|
||
color: #64748b;
|
||
font-size: 14px;
|
||
margin-bottom: 16px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.course-meta {
|
||
display: flex;
|
||
gap: 16px;
|
||
font-size: 13px;
|
||
color: #64748b;
|
||
}
|
||
|
||
.ai-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 20px;
|
||
}
|
||
|
||
.ai-card {
|
||
background: #f8fafc;
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
cursor: pointer;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
.ai-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.ai-card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.ai-card-avatar {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.ai-card-info h3 {
|
||
font-size: 16px;
|
||
margin-bottom: 4px;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.ai-card-tag {
|
||
font-size: 12px;
|
||
color: #4f46e5;
|
||
background: #ede9fe;
|
||
padding: 4px 8px;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.ai-card > p {
|
||
color: #64748b;
|
||
font-size: 14px;
|
||
margin-bottom: 16px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.ai-card-features {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.ai-card-feature {
|
||
font-size: 12px;
|
||
color: #64748b;
|
||
background: white;
|
||
padding: 4px 10px;
|
||
border-radius: 20px;
|
||
border: 1px solid #e2e8f0;
|
||
}
|
||
|
||
.ai-card-btn {
|
||
width: 100%;
|
||
padding: 12px;
|
||
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 10px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
.ai-card-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
|
||
}
|
||
|
||
.membership-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
}
|
||
|
||
.membership-card {
|
||
background: #f8fafc;
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
text-align: center;
|
||
border: 2px solid transparent;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
.membership-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.membership-card.recommended {
|
||
border-color: #4f46e5;
|
||
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
|
||
position: relative;
|
||
}
|
||
|
||
.membership-card.recommended::before {
|
||
content: '推荐';
|
||
position: absolute;
|
||
top: -12px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: #4f46e5;
|
||
color: white;
|
||
padding: 4px 16px;
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.membership-card h3 {
|
||
font-size: 20px;
|
||
margin-bottom: 16px;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.membership-card .price {
|
||
font-size: 36px;
|
||
font-weight: 800;
|
||
color: #4f46e5;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.membership-card .price span {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #64748b;
|
||
}
|
||
|
||
.membership-card .desc {
|
||
color: #64748b;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.membership-card ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin-bottom: 24px;
|
||
text-align: left;
|
||
}
|
||
|
||
.membership-card li {
|
||
padding: 8px 0;
|
||
color: #1e293b;
|
||
position: relative;
|
||
padding-left: 24px;
|
||
}
|
||
|
||
.membership-card li::before {
|
||
content: '✓';
|
||
position: absolute;
|
||
left: 0;
|
||
color: #10b981;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.membership-btn {
|
||
width: 100%;
|
||
padding: 14px;
|
||
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 10px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
.membership-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
|
||
}
|
||
|
||
/* 聊天模态框 */
|
||
.chat-modal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
animation: fadeIn 0.2s ease;
|
||
}
|
||
|
||
.chat-window {
|
||
width: 90%;
|
||
max-width: 600px;
|
||
height: 80vh;
|
||
background: white;
|
||
border-radius: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
.chat-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20px 24px;
|
||
border-bottom: 1px solid #e2e8f0;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.chat-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
font-weight: 600;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.chat-avatar {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.chat-close {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
border: none;
|
||
background: #e2e8f0;
|
||
cursor: pointer;
|
||
font-size: 18px;
|
||
color: #64748b;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.chat-close:hover {
|
||
background: #cbd5e1;
|
||
color: #1e293b;
|
||
}
|
||
|
||
.chat-messages {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 24px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.chat-message {
|
||
display: flex;
|
||
gap: 12px;
|
||
max-width: 80%;
|
||
}
|
||
|
||
.chat-message.user {
|
||
align-self: flex-end;
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.message-avatar {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
color: white;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.message-content {
|
||
background: #f1f5f9;
|
||
padding: 12px 16px;
|
||
border-radius: 16px;
|
||
color: #1e293b;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.chat-message.user .message-content {
|
||
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
|
||
color: white;
|
||
}
|
||
|
||
.chat-input-area {
|
||
padding: 20px 24px;
|
||
border-top: 1px solid #e2e8f0;
|
||
background: #f8fafc;
|
||
}
|
||
|
||
.quick-buttons {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-bottom: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.quick-btn {
|
||
padding: 8px 16px;
|
||
background: white;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 20px;
|
||
font-size: 13px;
|
||
color: #64748b;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.quick-btn:hover {
|
||
border-color: #4f46e5;
|
||
color: #4f46e5;
|
||
}
|
||
|
||
.chat-input-wrapper {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
|
||
.chat-input {
|
||
flex: 1;
|
||
padding: 12px 16px;
|
||
border: 1px solid #e2e8f0;
|
||
border-radius: 12px;
|
||
resize: none;
|
||
font-family: inherit;
|
||
font-size: 15px;
|
||
outline: none;
|
||
transition: border-color 0.2s;
|
||
}
|
||
|
||
.chat-input:focus {
|
||
border-color: #4f46e5;
|
||
}
|
||
|
||
.chat-send {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 12px;
|
||
border: none;
|
||
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
|
||
color: white;
|
||
cursor: pointer;
|
||
font-size: 18px;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
.chat-send:hover {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 1200px) {
|
||
.stats-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
.content-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
.course-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
.ai-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
.membership-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.navbar {
|
||
padding: 12px 20px;
|
||
}
|
||
.nav-menu {
|
||
display: none;
|
||
}
|
||
.dashboard-content {
|
||
padding: 20px;
|
||
}
|
||
.stats-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.content-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.course-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.ai-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.tab-nav {
|
||
overflow-x: auto;
|
||
flex-wrap: nowrap;
|
||
}
|
||
.tab-btn {
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
</style>
|