1240 lines
31 KiB
Vue
1240 lines
31 KiB
Vue
|
<template>
|
|||
|
|
<div class="home">
|
|||
|
|
<!-- Hero Section -->
|
|||
|
|
<section class="hero">
|
|||
|
|
<div class="hero-content">
|
|||
|
|
<div class="hero-badge">
|
|||
|
|
<span class="badge-dot"></span>
|
|||
|
|
<span>AI 驱动数据生成</span>
|
|||
|
|
</div>
|
|||
|
|
<h1 class="hero-title">
|
|||
|
|
构建高质量<br />
|
|||
|
|
<span class="glow-text">训练数据集</span>
|
|||
|
|
</h1>
|
|||
|
|
<p class="hero-subtitle">
|
|||
|
|
通过智能分割、AI 生成问答和无缝评估，
|
|||
|
|
将文档转化为结构化数据集。
|
|||
|
|
</p>
|
|||
|
|
<div class="hero-actions">
|
|||
|
|
<el-button type="primary" size="large" @click="createProject" class="btn-primary">
|
|||
|
|
<el-icon><Plus /></el-icon>
|
|||
|
|
创建项目
|
|||
|
|
</el-button>
|
|||
|
|
<el-button size="large" @click="goToDataSquare" class="btn-secondary">
|
|||
|
|
<el-icon><Grid /></el-icon>
|
|||
|
|
数据集广场
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Hero Visual - 全息粒子矩阵风格 -->
|
|||
|
|
<div class="hero-visual">
|
|||
|
|
<!-- Card 1: 多格式支持 -->
|
|||
|
|
<div class="hologram-card card-1">
|
|||
|
|
<div class="card-bg"></div>
|
|||
|
|
<div class="scan-line"></div>
|
|||
|
|
<div class="particles-container">
|
|||
|
|
<span class="particle" style="--x: 20%; --y: 30%"></span>
|
|||
|
|
<span class="particle" style="--x: 80%; --y: 20%"></span>
|
|||
|
|
<span class="particle" style="--x: 50%; --y: 70%"></span>
|
|||
|
|
<span class="particle" style="--x: 30%; --y: 60%"></span>
|
|||
|
|
<span class="particle" style="--x: 70%; --y: 80%"></span>
|
|||
|
|
<span class="particle" style="--x: 15%; --y: 85%"></span>
|
|||
|
|
<span class="particle" style="--x: 85%; --y: 45%"></span>
|
|||
|
|
<span class="particle" style="--x: 45%; --y: 15%"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="pulse-ring"></div>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<div class="icon-wrapper cyan">
|
|||
|
|
<div class="icon-glow"></div>
|
|||
|
|
<el-icon size="28"><Document /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
<span class="card-label">多格式支持</span>
|
|||
|
|
<span class="card-sublabel">PDF DOCX EPUB Excel</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Card 2: AI 生成 -->
|
|||
|
|
<div class="hologram-card card-2">
|
|||
|
|
<div class="card-bg"></div>
|
|||
|
|
<div class="scan-line"></div>
|
|||
|
|
<div class="particles-container">
|
|||
|
|
<span class="particle" style="--x: 25%; --y: 35%"></span>
|
|||
|
|
<span class="particle" style="--x: 75%; --y: 25%"></span>
|
|||
|
|
<span class="particle" style="--x: 55%; --y: 65%"></span>
|
|||
|
|
<span class="particle" style="--x: 35%; --y: 55%"></span>
|
|||
|
|
<span class="particle" style="--x: 65%; --y: 85%"></span>
|
|||
|
|
<span class="particle" style="--x: 20%; --y: 80%"></span>
|
|||
|
|
<span class="particle" style="--x: 80%; --y: 50%"></span>
|
|||
|
|
<span class="particle" style="--x: 50%; --y: 20%"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="pulse-ring"></div>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<div class="icon-wrapper violet">
|
|||
|
|
<div class="icon-glow"></div>
|
|||
|
|
<el-icon size="28"><MagicStick /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
<span class="card-label">AI 生成</span>
|
|||
|
|
<span class="card-sublabel">智能问答 自动标注</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Card 3: 智能评估 -->
|
|||
|
|
<div class="hologram-card card-3">
|
|||
|
|
<div class="card-bg"></div>
|
|||
|
|
<div class="scan-line"></div>
|
|||
|
|
<div class="particles-container">
|
|||
|
|
<span class="particle" style="--x: 30%; --y: 25%"></span>
|
|||
|
|
<span class="particle" style="--x: 70%; --y: 35%"></span>
|
|||
|
|
<span class="particle" style="--x: 45%; --y: 75%"></span>
|
|||
|
|
<span class="particle" style="--x: 25%; --y: 65%"></span>
|
|||
|
|
<span class="particle" style="--x: 75%; --y: 85%"></span>
|
|||
|
|
<span class="particle" style="--x: 10%; --y: 75%"></span>
|
|||
|
|
<span class="particle" style="--x: 90%; --y: 40%"></span>
|
|||
|
|
<span class="particle" style="--x: 40%; --y: 10%"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="pulse-ring"></div>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<div class="icon-wrapper teal">
|
|||
|
|
<div class="icon-glow"></div>
|
|||
|
|
<el-icon size="28"><DataAnalysis /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
<span class="card-label">智能评估</span>
|
|||
|
|
<span class="card-sublabel">质量分析 模型对比</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Quick Actions -->
|
|||
|
|
<section class="quick-actions">
|
|||
|
|
<div class="action-card" @click="goToPlayground">
|
|||
|
|
<div class="action-icon">
|
|||
|
|
<el-icon><ChatDotRound /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
<div class="action-info">
|
|||
|
|
<h3>测试场</h3>
|
|||
|
|
<p>交互式测试模型能力</p>
|
|||
|
|
</div>
|
|||
|
|
<el-icon class="action-arrow"><ArrowRight /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Projects Section -->
|
|||
|
|
<section class="projects-section">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<div class="section-title">
|
|||
|
|
<h2>我的项目</h2>
|
|||
|
|
<p>{{ projects.length }} 个项目</p>
|
|||
|
|
</div>
|
|||
|
|
<el-button type="primary" @click="createProject" class="add-btn">
|
|||
|
|
<el-icon><Plus /></el-icon>
|
|||
|
|
新建
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Projects Grid -->
|
|||
|
|
<div class="projects-grid" v-loading="loading">
|
|||
|
|
<!-- Empty State -->
|
|||
|
|
<div v-if="!loading && projects.length === 0" class="empty-state">
|
|||
|
|
<div class="empty-illustration">
|
|||
|
|
<div class="circle-1"></div>
|
|||
|
|
<div class="circle-2"></div>
|
|||
|
|
<div class="circle-3"></div>
|
|||
|
|
<el-icon size="48"><FolderAdd /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
<h3>暂无项目</h3>
|
|||
|
|
<p>创建您的第一个项目开始生成数据集</p>
|
|||
|
|
<el-button type="primary" @click="createProject">创建项目</el-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Project Cards -->
|
|||
|
|
<div
|
|||
|
|
v-else
|
|||
|
|
v-for="(project, index) in projects"
|
|||
|
|
:key="project.id"
|
|||
|
|
class="project-card"
|
|||
|
|
:style="{ '--delay': index * 0.1 + 's' }"
|
|||
|
|
@click="openProject(project)"
|
|||
|
|
>
|
|||
|
|
<div class="card-glow"></div>
|
|||
|
|
<div class="card-header">
|
|||
|
|
<div class="card-avatar">
|
|||
|
|
<el-icon><Folder /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-menu">
|
|||
|
|
<el-dropdown trigger="click" @command="(cmd) => handleCommand(cmd, project)">
|
|||
|
|
<el-icon class="menu-icon"><MoreFilled /></el-icon>
|
|||
|
|
<template #dropdown>
|
|||
|
|
<el-dropdown-menu>
|
|||
|
|
<el-dropdown-item command="edit">编辑</el-dropdown-item>
|
|||
|
|
<el-dropdown-item command="delete" divided>删除</el-dropdown-item>
|
|||
|
|
</el-dropdown-menu>
|
|||
|
|
</template>
|
|||
|
|
</el-dropdown>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<h3 class="card-title">{{ project.name }}</h3>
|
|||
|
|
<p class="card-desc">{{ project.description || '暂无描述' }}</p>
|
|||
|
|
<div class="card-footer">
|
|||
|
|
<span class="card-date">
|
|||
|
|
<el-icon><Calendar /></el-icon>
|
|||
|
|
{{ formatDate(project.created_at) }}
|
|||
|
|
</span>
|
|||
|
|
<div class="card-status">
|
|||
|
|
<span class="status-dot"></span>
|
|||
|
|
活跃
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Create Dialog -->
|
|||
|
|
<el-dialog v-model="dialogVisible" title="" width="480px" class="create-dialog" :show-close="false" align-center>
|
|||
|
|
<template #header>
|
|||
|
|
<div class="dialog-header">
|
|||
|
|
<div class="header-glow"></div>
|
|||
|
|
<div class="header-content">
|
|||
|
|
<div class="dialog-icon-new">
|
|||
|
|
<el-icon size="24"><FolderAdd /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
<div class="header-text">
|
|||
|
|
<h3>创建新项目</h3>
|
|||
|
|
<p>开始构建您的AI训练数据集</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<button class="close-btn" @click="dialogVisible = false">
|
|||
|
|
<el-icon><Close /></el-icon>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<div class="dialog-body">
|
|||
|
|
<div class="form-card">
|
|||
|
|
<div class="input-group">
|
|||
|
|
<label class="input-label">
|
|||
|
|
<span class="label-icon">✦</span>
|
|||
|
|
项目名称
|
|||
|
|
</label>
|
|||
|
|
<el-input
|
|||
|
|
v-model="form.name"
|
|||
|
|
placeholder="例如：客服问答数据集"
|
|||
|
|
size="large"
|
|||
|
|
class="custom-input"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="input-group">
|
|||
|
|
<label class="input-label">
|
|||
|
|
<span class="label-icon">✦</span>
|
|||
|
|
项目描述
|
|||
|
|
</label>
|
|||
|
|
<el-input
|
|||
|
|
v-model="form.description"
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="3"
|
|||
|
|
placeholder="描述这个项目的用途和数据类型..."
|
|||
|
|
class="custom-input"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Quick Templates -->
|
|||
|
|
<div class="templates-section">
|
|||
|
|
<span class="templates-label">快速开始模板</span>
|
|||
|
|
<div class="templates-grid">
|
|||
|
|
<div class="template-card" @click="useTemplate('qa')">
|
|||
|
|
<el-icon><ChatDotRound /></el-icon>
|
|||
|
|
<span>问答对</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="template-card" @click="useTemplate('conversation')">
|
|||
|
|
<el-icon><ChatLineRound /></el-icon>
|
|||
|
|
<span>对话</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="template-card" @click="useTemplate('instruction')">
|
|||
|
|
<el-icon><Promotion /></el-icon>
|
|||
|
|
<span>指令</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<template #footer>
|
|||
|
|
<div class="dialog-footer">
|
|||
|
|
<el-button @click="dialogVisible = false" class="btn-cancel">取消</el-button>
|
|||
|
|
<el-button type="primary" @click="submitForm" :loading="submitting" class="btn-create">
|
|||
|
|
<el-icon v-if="!submitting"><Plus /></el-icon>
|
|||
|
|
创建项目
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, reactive, onMounted } from 'vue'
|
|||
|
|
import { useRouter } from 'vue-router'
|
|||
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|||
|
|
import { projectApi } from '@/api'
|
|||
|
|
|
|||
|
|
const router = useRouter()
|
|||
|
|
|
|||
|
|
const loading = ref(false)
|
|||
|
|
const projects = ref([])
|
|||
|
|
const dialogVisible = ref(false)
|
|||
|
|
const submitting = ref(false)
|
|||
|
|
const formRef = ref(null)
|
|||
|
|
|
|||
|
|
const form = reactive({
|
|||
|
|
name: '',
|
|||
|
|
description: ''
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const rules = {
|
|||
|
|
name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const fetchProjects = async () => {
|
|||
|
|
loading.value = true
|
|||
|
|
try {
|
|||
|
|
const res = await projectApi.list()
|
|||
|
|
projects.value = res.data.projects || []
|
|||
|
|
} catch (error) {
|
|||
|
|
projects.value = []
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const createProject = () => {
|
|||
|
|
form.name = ''
|
|||
|
|
form.description = ''
|
|||
|
|
dialogVisible.value = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const useTemplate = (type) => {
|
|||
|
|
const templates = {
|
|||
|
|
qa: { name: '问答数据集', description: '基于文档生成问答对训练数据' },
|
|||
|
|
conversation: { name: '对话数据集', description: '创建多轮对话训练数据' },
|
|||
|
|
instruction: { name: '指令数据集', description: '构建指令跟随训练数据' }
|
|||
|
|
}
|
|||
|
|
const t = templates[type]
|
|||
|
|
form.name = t.name
|
|||
|
|
form.description = t.description
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const submitForm = async () => {
|
|||
|
|
const valid = await formRef.value?.validate().catch(() => false)
|
|||
|
|
if (!valid) return
|
|||
|
|
|
|||
|
|
submitting.value = true
|
|||
|
|
try {
|
|||
|
|
const res = await projectApi.create(form)
|
|||
|
|
ElMessage.success('项目创建成功')
|
|||
|
|
dialogVisible.value = false
|
|||
|
|
fetchProjects()
|
|||
|
|
router.push(`/project/${res.data.id}`)
|
|||
|
|
} catch (error) {
|
|||
|
|
ElMessage.error('创建项目失败')
|
|||
|
|
} finally {
|
|||
|
|
submitting.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const openProject = (project) => {
|
|||
|
|
router.push(`/project/${project.id}`)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleCommand = async (cmd, project) => {
|
|||
|
|
if (cmd === 'delete') {
|
|||
|
|
try {
|
|||
|
|
await ElMessageBox.confirm(
|
|||
|
|
`确定要删除项目 "${project.name}" 吗？`,
|
|||
|
|
'删除项目',
|
|||
|
|
{ confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' }
|
|||
|
|
)
|
|||
|
|
await projectApi.delete(project.id)
|
|||
|
|
ElMessage.success('项目已删除')
|
|||
|
|
fetchProjects()
|
|||
|
|
} catch (e) {
|
|||
|
|
if (e !== 'cancel') ElMessage.error('删除失败')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const formatDate = (date) => {
|
|||
|
|
if (!date) return ''
|
|||
|
|
const d = new Date(date)
|
|||
|
|
return d.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric', year: 'numeric' })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const goToDataSquare = () => router.push('/data-square')
|
|||
|
|
const goToPlayground = () => router.push('/playground')
|
|||
|
|
|
|||
|
|
onMounted(() => fetchProjects())
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.home {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
padding: 60px 40px 80px;
|
|||
|
|
max-width: 1400px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Hero Section */
|
|||
|
|
.hero {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr;
|
|||
|
|
gap: 60px;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 60px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-badge {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
padding: 6px 14px;
|
|||
|
|
background: var(--accent-primary-muted);
|
|||
|
|
border: 1px solid rgba(0, 212, 255, 0.2);
|
|||
|
|
border-radius: 100px;
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: var(--accent-primary);
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.badge-dot {
|
|||
|
|
width: 6px;
|
|||
|
|
height: 6px;
|
|||
|
|
background: var(--accent-primary);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
animation: pulse 2s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes pulse {
|
|||
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|||
|
|
50% { opacity: 0.5; transform: scale(1.2); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-title {
|
|||
|
|
font-size: 56px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
line-height: 1.1;
|
|||
|
|
letter-spacing: -0.03em;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-subtitle {
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
line-height: 1.6;
|
|||
|
|
margin-bottom: 32px;
|
|||
|
|
max-width: 480px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-primary {
|
|||
|
|
padding: 14px 28px;
|
|||
|
|
font-size: 15px;
|
|||
|
|
border-radius: var(--radius-md);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-secondary {
|
|||
|
|
padding: 14px 28px;
|
|||
|
|
font-size: 15px;
|
|||
|
|
border-radius: var(--radius-md);
|
|||
|
|
background: var(--bg-tertiary);
|
|||
|
|
border: 1px solid var(--border-default);
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-secondary:hover {
|
|||
|
|
background: var(--bg-hover);
|
|||
|
|
border-color: var(--border-strong);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ========================
|
|||
|
|
Hero Visual - 全息粒子矩阵
|
|||
|
|
======================== */
|
|||
|
|
.hero-visual {
|
|||
|
|
position: relative;
|
|||
|
|
height: 420px;
|
|||
|
|
perspective: 1000px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 全息卡片基础样式 */
|
|||
|
|
.hologram-card {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 180px;
|
|||
|
|
padding: 24px 20px;
|
|||
|
|
background: linear-gradient(135deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 18, 0.95) 100%);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|||
|
|
border-radius: 20px;
|
|||
|
|
backdrop-filter: blur(20px);
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|||
|
|
transform-style: preserve-3d;
|
|||
|
|
animation: hologramFloat 6s ease-in-out infinite;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 卡片位置 */
|
|||
|
|
.hologram-card.card-1 {
|
|||
|
|
top: 10px;
|
|||
|
|
right: 60px;
|
|||
|
|
animation-delay: 0s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hologram-card.card-2 {
|
|||
|
|
top: 130px;
|
|||
|
|
left: 30px;
|
|||
|
|
animation-delay: -2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hologram-card.card-3 {
|
|||
|
|
bottom: 20px;
|
|||
|
|
right: 80px;
|
|||
|
|
animation-delay: -4s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes hologramFloat {
|
|||
|
|
0%, 100% { transform: translateY(0) rotateX(0) rotateY(0); }
|
|||
|
|
25% { transform: translateY(-8px) rotateX(2deg) rotateY(-2deg); }
|
|||
|
|
50% { transform: translateY(0) rotateX(0) rotateY(0); }
|
|||
|
|
75% { transform: translateY(-5px) rotateX(-1deg) rotateY(2deg); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 悬浮时的3D效果 */
|
|||
|
|
.hologram-card:hover {
|
|||
|
|
transform: translateY(-15px) scale(1.05);
|
|||
|
|
border-color: rgba(0, 212, 255, 0.4);
|
|||
|
|
box-shadow:
|
|||
|
|
0 25px 50px -12px rgba(0, 0, 0, 0.5),
|
|||
|
|
0 0 30px rgba(0, 212, 255, 0.15),
|
|||
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hologram-card:hover .scan-line {
|
|||
|
|
animation: scanMove 1.5s linear infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hologram-card:hover .pulse-ring {
|
|||
|
|
animation: pulseRing 2s ease-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hologram-card:hover .particle {
|
|||
|
|
animation: particleBurst 1s ease-out forwards;
|
|||
|
|
animation-delay: calc(var(--i, 0) * 0.1s);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 卡片背景 */
|
|||
|
|
.card-bg {
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0;
|
|||
|
|
background: radial-gradient(ellipse at top, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
|
|||
|
|
radial-gradient(ellipse at bottom right, rgba(124, 58, 237, 0.08) 0%, transparent 50%);
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-2 .card-bg {
|
|||
|
|
background: radial-gradient(ellipse at top, rgba(124, 58, 237, 0.12) 0%, transparent 50%),
|
|||
|
|
radial-gradient(ellipse at bottom right, rgba(0, 212, 255, 0.06) 0%, transparent 50%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-3 .card-bg {
|
|||
|
|
background: radial-gradient(ellipse at top, rgba(6, 182, 212, 0.12) 0%, transparent 50%),
|
|||
|
|
radial-gradient(ellipse at bottom right, rgba(124, 58, 237, 0.06) 0%, transparent 50%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 扫描线效果 */
|
|||
|
|
.scan-line {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -50%;
|
|||
|
|
left: -50%;
|
|||
|
|
width: 200%;
|
|||
|
|
height: 200%;
|
|||
|
|
background: linear-gradient(
|
|||
|
|
transparent 0%,
|
|||
|
|
rgba(0, 212, 255, 0.03) 50%,
|
|||
|
|
transparent 100%
|
|||
|
|
);
|
|||
|
|
transform: rotate(30deg);
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes scanMove {
|
|||
|
|
0% { transform: translateY(-100%) rotate(30deg); }
|
|||
|
|
100% { transform: translateY(100%) rotate(30deg); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 粒子容器 */
|
|||
|
|
.particles-container {
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.particle {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 3px;
|
|||
|
|
height: 3px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
opacity: 0;
|
|||
|
|
left: var(--x);
|
|||
|
|
top: var(--y);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-1 .particle {
|
|||
|
|
background: var(--accent-primary);
|
|||
|
|
box-shadow: 0 0 6px var(--accent-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-2 .particle {
|
|||
|
|
background: var(--accent-secondary);
|
|||
|
|
box-shadow: 0 0 6px var(--accent-secondary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-3 .particle {
|
|||
|
|
background: var(--accent-tertiary);
|
|||
|
|
box-shadow: 0 0 6px var(--accent-tertiary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes particleBurst {
|
|||
|
|
0% { opacity: 0; transform: scale(0); }
|
|||
|
|
20% { opacity: 1; transform: scale(1); }
|
|||
|
|
100% { opacity: 0; transform: scale(2); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 脉动光环 */
|
|||
|
|
.pulse-ring {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 1px solid rgba(0, 212, 255, 0.3);
|
|||
|
|
opacity: 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-2 .pulse-ring { border-color: rgba(124, 58, 237, 0.3); }
|
|||
|
|
.card-3 .pulse-ring { border-color: rgba(6, 182, 212, 0.3); }
|
|||
|
|
|
|||
|
|
@keyframes pulseRing {
|
|||
|
|
0% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.5); }
|
|||
|
|
100% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 卡片内容 */
|
|||
|
|
.card-content {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
text-align: center;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 图标包装器 */
|
|||
|
|
.icon-wrapper {
|
|||
|
|
position: relative;
|
|||
|
|
width: 64px;
|
|||
|
|
height: 64px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-radius: 18px;
|
|||
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%);
|
|||
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-wrapper.cyan {
|
|||
|
|
background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 212, 255, 0.05) 100%);
|
|||
|
|
border-color: rgba(0, 212, 255, 0.3);
|
|||
|
|
color: var(--accent-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-wrapper.violet {
|
|||
|
|
background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(124, 58, 237, 0.05) 100%);
|
|||
|
|
border-color: rgba(124, 58, 237, 0.3);
|
|||
|
|
color: var(--accent-secondary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-wrapper.teal {
|
|||
|
|
background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0.05) 100%);
|
|||
|
|
border-color: rgba(6, 182, 212, 0.3);
|
|||
|
|
color: var(--accent-tertiary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 图标发光 */
|
|||
|
|
.icon-glow {
|
|||
|
|
position: absolute;
|
|||
|
|
inset: -2px;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
background: inherit;
|
|||
|
|
filter: blur(15px);
|
|||
|
|
opacity: 0.5;
|
|||
|
|
z-index: -1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hologram-card:hover .icon-wrapper {
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
box-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hologram-card:hover .icon-glow { opacity: 0.8; }
|
|||
|
|
|
|||
|
|
/* 标签文字 */
|
|||
|
|
.card-label {
|
|||
|
|
font-size: 15px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
letter-spacing: 0.02em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-sublabel {
|
|||
|
|
font-size: 11px;
|
|||
|
|
color: var(--text-muted);
|
|||
|
|
letter-spacing: 0.05em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 响应式 */
|
|||
|
|
@media (max-width: 1200px) {
|
|||
|
|
.hero-visual { display: none; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Quick Actions */
|
|||
|
|
.quick-actions { margin-bottom: 50px; }
|
|||
|
|
|
|||
|
|
.action-card {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 20px;
|
|||
|
|
padding: 24px;
|
|||
|
|
background: var(--glass-bg);
|
|||
|
|
backdrop-filter: blur(20px);
|
|||
|
|
border: 1px solid var(--glass-border);
|
|||
|
|
border-radius: var(--radius-lg);
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all var(--transition-base);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-card:hover {
|
|||
|
|
border-color: var(--accent-primary);
|
|||
|
|
transform: translateX(6px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-icon {
|
|||
|
|
width: 52px;
|
|||
|
|
height: 52px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background: var(--accent-primary-muted);
|
|||
|
|
border-radius: var(--radius-md);
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: var(--accent-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-info h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
|
|||
|
|
.action-info p { font-size: 14px; color: var(--text-tertiary); }
|
|||
|
|
|
|||
|
|
.action-arrow {
|
|||
|
|
margin-left: auto;
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: var(--text-muted);
|
|||
|
|
transition: transform var(--transition-base);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-card:hover .action-arrow {
|
|||
|
|
transform: translateX(4px);
|
|||
|
|
color: var(--accent-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Projects Section */
|
|||
|
|
.section-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 28px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title h2 { font-size: 24px; font-weight: 600; margin-bottom: 4px; }
|
|||
|
|
.section-title p { font-size: 14px; color: var(--text-tertiary); }
|
|||
|
|
|
|||
|
|
.add-btn { padding: 10px 18px; border-radius: var(--radius-md); }
|
|||
|
|
|
|||
|
|
.projects-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|||
|
|
gap: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Empty State */
|
|||
|
|
.empty-state {
|
|||
|
|
grid-column: 1 / -1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 80px 40px;
|
|||
|
|
background: var(--glass-bg);
|
|||
|
|
backdrop-filter: blur(20px);
|
|||
|
|
border: 1px dashed var(--border-default);
|
|||
|
|
border-radius: var(--radius-xl);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-illustration {
|
|||
|
|
position: relative;
|
|||
|
|
width: 120px;
|
|||
|
|
height: 120px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-illustration .el-icon {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
color: var(--text-muted);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.circle-1, .circle-2, .circle-3 {
|
|||
|
|
position: absolute;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
border: 1px solid var(--border-default);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.circle-1 { width: 100%; height: 100%; animation: rotate 20s linear infinite; }
|
|||
|
|
.circle-2 { width: 70%; height: 70%; animation: rotate 15s linear infinite reverse; }
|
|||
|
|
.circle-3 { width: 40%; height: 40%; background: var(--bg-tertiary); }
|
|||
|
|
|
|||
|
|
@keyframes rotate {
|
|||
|
|
from { transform: rotate(0deg); }
|
|||
|
|
to { transform: rotate(360deg); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-state h3 { font-size: 20px; margin-bottom: 8px; }
|
|||
|
|
.empty-state p { color: var(--text-tertiary); margin-bottom: 24px; }
|
|||
|
|
|
|||
|
|
/* Project Card */
|
|||
|
|
.project-card {
|
|||
|
|
position: relative;
|
|||
|
|
padding: 24px;
|
|||
|
|
background: var(--bg-secondary);
|
|||
|
|
border: 1px solid var(--border-subtle);
|
|||
|
|
border-radius: var(--radius-lg);
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all var(--transition-base);
|
|||
|
|
overflow: hidden;
|
|||
|
|
animation: cardFadeIn 0.5s ease backwards;
|
|||
|
|
animation-delay: var(--delay);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes cardFadeIn {
|
|||
|
|
from { opacity: 0; transform: translateY(20px); }
|
|||
|
|
to { opacity: 1; transform: translateY(0); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.project-card:hover {
|
|||
|
|
border-color: var(--accent-primary);
|
|||
|
|
transform: translateY(-4px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-glow {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
height: 1px;
|
|||
|
|
background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
|
|||
|
|
opacity: 0;
|
|||
|
|
transition: opacity var(--transition-base);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.project-card:hover .card-glow { opacity: 1; }
|
|||
|
|
|
|||
|
|
.card-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-avatar {
|
|||
|
|
width: 44px;
|
|||
|
|
height: 44px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background: var(--accent-primary-muted);
|
|||
|
|
border-radius: var(--radius-md);
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: var(--accent-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-icon {
|
|||
|
|
color: var(--text-muted);
|
|||
|
|
cursor: pointer;
|
|||
|
|
padding: 4px;
|
|||
|
|
border-radius: var(--radius-sm);
|
|||
|
|
transition: all var(--transition-fast);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-icon:hover { background: var(--bg-hover); color: var(--text-primary); }
|
|||
|
|
|
|||
|
|
.card-title { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
|
|||
|
|
|
|||
|
|
.card-desc {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: var(--text-tertiary);
|
|||
|
|
line-height: 1.5;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-line-clamp: 2;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-footer {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding-top: 16px;
|
|||
|
|
border-top: 1px solid var(--border-subtle);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-date {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: var(--text-muted);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-status {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: var(--success);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-dot {
|
|||
|
|
width: 6px;
|
|||
|
|
height: 6px;
|
|||
|
|
background: var(--success);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Dialog - New Design */
|
|||
|
|
.create-dialog :deep(.el-dialog) {
|
|||
|
|
border-radius: 20px;
|
|||
|
|
background: linear-gradient(145deg, rgba(20, 20, 30, 0.98) 0%, rgba(15, 15, 25, 0.98) 100%);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|||
|
|
box-shadow:
|
|||
|
|
0 25px 50px -12px rgba(0, 0, 0, 0.6),
|
|||
|
|
0 0 40px rgba(0, 212, 255, 0.1),
|
|||
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.create-dialog :deep(.el-dialog__header) {
|
|||
|
|
padding: 0;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dialog-header {
|
|||
|
|
position: relative;
|
|||
|
|
padding: 24px 28px;
|
|||
|
|
background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(124, 58, 237, 0.08) 100%);
|
|||
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-glow {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -50%;
|
|||
|
|
left: -50%;
|
|||
|
|
width: 200%;
|
|||
|
|
height: 200%;
|
|||
|
|
background: radial-gradient(circle at 30% 50%, rgba(0, 212, 255, 0.15) 0%, transparent 50%);
|
|||
|
|
animation: headerGlow 4s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes headerGlow {
|
|||
|
|
0%, 100% { opacity: 0.5; transform: scale(1); }
|
|||
|
|
50% { opacity: 0.8; transform: scale(1.1); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-content {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dialog-icon-new {
|
|||
|
|
width: 52px;
|
|||
|
|
height: 52px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(124, 58, 237, 0.2) 100%);
|
|||
|
|
border: 1px solid rgba(0, 212, 255, 0.3);
|
|||
|
|
border-radius: 14px;
|
|||
|
|
color: var(--accent-primary);
|
|||
|
|
animation: iconPulse 2s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes iconPulse {
|
|||
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4); }
|
|||
|
|
50% { box-shadow: 0 0 20px 5px rgba(0, 212, 255, 0.2); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-text h3 {
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
margin: 0 0 4px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-text p {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: var(--text-tertiary);
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close-btn {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 16px;
|
|||
|
|
right: 16px;
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background: rgba(255, 255, 255, 0.05);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
color: var(--text-muted);
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.close-btn:hover {
|
|||
|
|
background: rgba(255, 255, 255, 0.1);
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
border-color: rgba(255, 255, 255, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Dialog Body */
|
|||
|
|
.create-dialog :deep(.el-dialog__body) {
|
|||
|
|
padding: 28px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dialog-body {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-card {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 20px;
|
|||
|
|
padding: 24px;
|
|||
|
|
background: rgba(255, 255, 255, 0.02);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|||
|
|
border-radius: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-group {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-label {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
font-size: 13px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label-icon {
|
|||
|
|
color: var(--accent-primary);
|
|||
|
|
font-size: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom-input :deep(.el-input__wrapper) {
|
|||
|
|
background: rgba(0, 0, 0, 0.3);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|||
|
|
border-radius: 10px;
|
|||
|
|
box-shadow: none;
|
|||
|
|
padding: 4px 14px;
|
|||
|
|
transition: all 0.25s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom-input :deep(.el-input__wrapper:hover) {
|
|||
|
|
border-color: rgba(0, 212, 255, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom-input :deep(.el-input__wrapper.is-focus) {
|
|||
|
|
border-color: var(--accent-primary);
|
|||
|
|
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom-input :deep(.el-input__inner) {
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom-input :deep(.el-input__inner::placeholder) {
|
|||
|
|
color: var(--text-muted);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom-input :deep(.el-textarea__inner) {
|
|||
|
|
background: rgba(0, 0, 0, 0.3);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|||
|
|
border-radius: 10px;
|
|||
|
|
box-shadow: none;
|
|||
|
|
padding: 12px 14px;
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
resize: none;
|
|||
|
|
transition: all 0.25s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom-input :deep(.el-textarea__inner:hover) {
|
|||
|
|
border-color: rgba(0, 212, 255, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.custom-input :deep(.el-textarea__inner:focus) {
|
|||
|
|
border-color: var(--accent-primary);
|
|||
|
|
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Templates Section */
|
|||
|
|
.templates-section {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.templates-label {
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: var(--text-muted);
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 0.5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.templates-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(3, 1fr);
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.template-card {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
padding: 16px 12px;
|
|||
|
|
background: rgba(255, 255, 255, 0.02);
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.25s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.template-card:hover {
|
|||
|
|
background: rgba(0, 212, 255, 0.08);
|
|||
|
|
border-color: rgba(0, 212, 255, 0.25);
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.template-card .el-icon {
|
|||
|
|
font-size: 22px;
|
|||
|
|
color: var(--accent-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.template-card span {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Dialog Footer */
|
|||
|
|
.create-dialog :deep(.el-dialog__footer) {
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dialog-footer {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
gap: 12px;
|
|||
|
|
padding: 20px 28px;
|
|||
|
|
background: rgba(0, 0, 0, 0.2);
|
|||
|
|
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-cancel {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
background: transparent;
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|||
|
|
border-radius: 10px;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
transition: all 0.2s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-cancel:hover {
|
|||
|
|
background: rgba(255, 255, 255, 0.05);
|
|||
|
|
border-color: rgba(255, 255, 255, 0.15);
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-create {
|
|||
|
|
padding: 10px 24px;
|
|||
|
|
background: linear-gradient(135deg, var(--accent-primary) 0%, #0891b2 100%);
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
transition: all 0.25s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-create:hover {
|
|||
|
|
transform: translateY(-1px);
|
|||
|
|
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.35);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Responsive */
|
|||
|
|
@media (max-width: 1024px) {
|
|||
|
|
.hero {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.hero-subtitle { max-width: 100%; }
|
|||
|
|
.hero-actions { justify-content: center; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 640px) {
|
|||
|
|
.home { padding: 40px 20px 60px; }
|
|||
|
|
.hero-title { font-size: 36px; }
|
|||
|
|
.hero-actions { flex-direction: column; }
|
|||
|
|
.projects-grid { grid-template-columns: 1fr; }
|
|||
|
|
}
|
|||
|
|
</style>
|