|
|
|
|
@ -1,87 +1,105 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="multiple-layout">
|
|
|
|
|
<aside class="sidebar">
|
|
|
|
|
<div class="logo">
|
|
|
|
|
<el-icon :size="24">
|
|
|
|
|
<DataAnalysis />
|
|
|
|
|
</el-icon>
|
|
|
|
|
<span>数据工厂</span>
|
|
|
|
|
<!-- 顶部导航栏 -->
|
|
|
|
|
<header class="top-header">
|
|
|
|
|
<div class="header-left">
|
|
|
|
|
<div class="logo">
|
|
|
|
|
<el-icon :size="22">
|
|
|
|
|
<DataAnalysis />
|
|
|
|
|
</el-icon>
|
|
|
|
|
<span>数据工厂</span>
|
|
|
|
|
</div>
|
|
|
|
|
<nav class="top-nav">
|
|
|
|
|
<router-link to="/data-factory" class="nav-link">工作台</router-link>
|
|
|
|
|
</nav>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="header-right">
|
|
|
|
|
<el-dropdown @command="handleCommand">
|
|
|
|
|
<span class="user-dropdown">
|
|
|
|
|
<el-avatar :size="32" class="user-avatar">
|
|
|
|
|
{{ (userStore.userInfo.userFullName || userStore.userInfo.userAccount || '用户').slice(0, 1) }}
|
|
|
|
|
</el-avatar>
|
|
|
|
|
<span class="username">{{ userStore.userInfo.userFullName || userStore.userInfo.userAccount || '用户' }}</span>
|
|
|
|
|
</span>
|
|
|
|
|
<template #dropdown>
|
|
|
|
|
<el-dropdown-menu>
|
|
|
|
|
<el-dropdown-item command="logout">
|
|
|
|
|
<el-icon><SwitchButton /></el-icon>
|
|
|
|
|
退出登录
|
|
|
|
|
</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
</div>
|
|
|
|
|
<nav class="nav-menu">
|
|
|
|
|
<template v-for="item in menuList" :key="item.path">
|
|
|
|
|
<!-- 有子菜单 -->
|
|
|
|
|
<div v-if="item.children" class="menu-group">
|
|
|
|
|
<div
|
|
|
|
|
class="menu-item parent"
|
|
|
|
|
:class="{ active: isActive(item.path), expanded: isExpanded(item.path) }"
|
|
|
|
|
@click="toggleExpand(item.path)"
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<div class="main-container">
|
|
|
|
|
<!-- 左侧菜单 -->
|
|
|
|
|
<aside class="sidebar">
|
|
|
|
|
<nav class="nav-menu">
|
|
|
|
|
<template v-for="item in menuList" :key="item.path">
|
|
|
|
|
<!-- 有子菜单 -->
|
|
|
|
|
<div v-if="item.children" class="menu-group">
|
|
|
|
|
<div
|
|
|
|
|
class="menu-item parent"
|
|
|
|
|
:class="{ active: isActive(item.path), expanded: isExpanded(item.path) }"
|
|
|
|
|
@click="toggleExpand(item.path)"
|
|
|
|
|
>
|
|
|
|
|
<el-icon class="menu-icon">
|
|
|
|
|
<component :is="item.icon" />
|
|
|
|
|
</el-icon>
|
|
|
|
|
<span class="menu-text">{{ item.title }}</span>
|
|
|
|
|
<el-icon class="arrow" :class="{ rotated: isExpanded(item.path) }">
|
|
|
|
|
<ArrowDown />
|
|
|
|
|
</el-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sub-menu" :class="{ show: isExpanded(item.path) }">
|
|
|
|
|
<router-link
|
|
|
|
|
v-for="child in item.children"
|
|
|
|
|
:key="child.path"
|
|
|
|
|
:to="child.path"
|
|
|
|
|
:class="{ active: isSubActive(child.path) }"
|
|
|
|
|
>
|
|
|
|
|
<span>{{ child.title }}</span>
|
|
|
|
|
</router-link>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 无子菜单 -->
|
|
|
|
|
<router-link
|
|
|
|
|
v-else
|
|
|
|
|
:to="item.path"
|
|
|
|
|
class="menu-item"
|
|
|
|
|
:class="{ active: isActive(item.path) }"
|
|
|
|
|
>
|
|
|
|
|
<el-icon>
|
|
|
|
|
<el-icon class="menu-icon">
|
|
|
|
|
<component :is="item.icon" />
|
|
|
|
|
</el-icon>
|
|
|
|
|
<span>{{ item.title }}</span>
|
|
|
|
|
<el-icon class="arrow" :class="{ rotated: isExpanded(item.path) }">
|
|
|
|
|
<ArrowDown />
|
|
|
|
|
</el-icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="sub-menu" :class="{ show: isExpanded(item.path) }">
|
|
|
|
|
<router-link
|
|
|
|
|
v-for="child in item.children"
|
|
|
|
|
:key="child.path"
|
|
|
|
|
:to="child.path"
|
|
|
|
|
:class="{ active: isSubActive(child.path) }"
|
|
|
|
|
>
|
|
|
|
|
<span>{{ child.title }}</span>
|
|
|
|
|
</router-link>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 无子菜单 -->
|
|
|
|
|
<router-link
|
|
|
|
|
v-else
|
|
|
|
|
:to="item.path"
|
|
|
|
|
:class="{ active: isActive(item.path) }"
|
|
|
|
|
>
|
|
|
|
|
<el-icon>
|
|
|
|
|
<component :is="item.icon" />
|
|
|
|
|
</el-icon>
|
|
|
|
|
<span>{{ item.title }}</span>
|
|
|
|
|
</router-link>
|
|
|
|
|
</template>
|
|
|
|
|
</nav>
|
|
|
|
|
</aside>
|
|
|
|
|
<div class="main-wrapper">
|
|
|
|
|
<header class="header">
|
|
|
|
|
<el-breadcrumb separator="/">
|
|
|
|
|
<el-breadcrumb-item :to="{ path: '/data-factory' }">数据工厂</el-breadcrumb-item>
|
|
|
|
|
<el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
|
|
|
|
|
<router-link v-if="item.path && index < breadcrumbList.length - 1" :to="item.path">
|
|
|
|
|
{{ item.title }}
|
|
|
|
|
<span class="menu-text">{{ item.title }}</span>
|
|
|
|
|
</router-link>
|
|
|
|
|
<span v-else>{{ item.title }}</span>
|
|
|
|
|
</el-breadcrumb-item>
|
|
|
|
|
</el-breadcrumb>
|
|
|
|
|
|
|
|
|
|
<div class="header-actions">
|
|
|
|
|
<el-dropdown @command="handleCommand">
|
|
|
|
|
<span class="user-dropdown">
|
|
|
|
|
<el-icon><User /></el-icon>
|
|
|
|
|
<span class="username">{{ userStore.userInfo.userFullName || userStore.userInfo.userAccount || '用户' }}</span>
|
|
|
|
|
<el-icon class="arrow"><ArrowDown /></el-icon>
|
|
|
|
|
</span>
|
|
|
|
|
<template #dropdown>
|
|
|
|
|
<el-dropdown-menu>
|
|
|
|
|
<el-dropdown-item command="logout">
|
|
|
|
|
<el-icon><SwitchButton /></el-icon>
|
|
|
|
|
退出登录
|
|
|
|
|
</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
</template>
|
|
|
|
|
</nav>
|
|
|
|
|
</aside>
|
|
|
|
|
|
|
|
|
|
<!-- 内容区域 -->
|
|
|
|
|
<div class="main-wrapper">
|
|
|
|
|
<!-- 面包屑导航 -->
|
|
|
|
|
<div class="content-header">
|
|
|
|
|
<el-breadcrumb separator="/">
|
|
|
|
|
<el-breadcrumb-item :to="{ path: '/data-factory' }">数据工厂</el-breadcrumb-item>
|
|
|
|
|
<el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
|
|
|
|
|
<router-link v-if="item.path && index < breadcrumbList.length - 1" :to="item.path">
|
|
|
|
|
{{ item.title }}
|
|
|
|
|
</router-link>
|
|
|
|
|
<span v-else>{{ item.title }}</span>
|
|
|
|
|
</el-breadcrumb-item>
|
|
|
|
|
</el-breadcrumb>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
<main class="main-content">
|
|
|
|
|
<router-view />
|
|
|
|
|
</main>
|
|
|
|
|
<main class="main-content">
|
|
|
|
|
<!-- 装饰背景 -->
|
|
|
|
|
<div class="decoration-bg"></div>
|
|
|
|
|
<router-view />
|
|
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
@ -101,7 +119,8 @@ import {
|
|
|
|
|
Tickets,
|
|
|
|
|
Document,
|
|
|
|
|
User,
|
|
|
|
|
SwitchButton
|
|
|
|
|
SwitchButton,
|
|
|
|
|
Bell
|
|
|
|
|
} from '@element-plus/icons-vue'
|
|
|
|
|
import { useUserStore } from '@/stores/modules/user'
|
|
|
|
|
import { ElMessageBox } from 'element-plus'
|
|
|
|
|
@ -208,65 +227,177 @@ const breadcrumbList = computed(() => {
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.multiple-layout {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: #f5f7fa;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sidebar {
|
|
|
|
|
width: 220px;
|
|
|
|
|
background: linear-gradient(180deg, #1e3a5f 0%, #0d2137 100%);
|
|
|
|
|
// 顶部导航栏
|
|
|
|
|
.top-header {
|
|
|
|
|
height: 56px;
|
|
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 100;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header-left {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 32px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.logo {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
|
|
|
|
|
|
|
.el-icon {
|
|
|
|
|
color: #409eff;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav-menu {
|
|
|
|
|
.top-nav {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 8px;
|
|
|
|
|
|
|
|
|
|
.nav-link {
|
|
|
|
|
color: rgba(255, 255, 255, 0.85);
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
padding: 6px 16px;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
|
&.router-link-active {
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: rgba(255, 255, 255, 0.15);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header-right {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header-icon {
|
|
|
|
|
color: rgba(255, 255, 255, 0.85);
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding: 8px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: rgba(255, 255, 255, 0.15);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user-dropdown {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding: 4px 8px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
background: rgba(255, 255, 255, 0.15);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.user-avatar {
|
|
|
|
|
background: rgba(255, 255, 255, 0.25);
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.username {
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
max-width: 100px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 主容器
|
|
|
|
|
.main-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
padding: 12px 0;
|
|
|
|
|
flex: 1;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 侧边栏
|
|
|
|
|
.sidebar {
|
|
|
|
|
width: 200px;
|
|
|
|
|
background: #fff;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
border-right: 1px solid #e8ecf0;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
> a {
|
|
|
|
|
.nav-menu {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
padding: 12px 8px;
|
|
|
|
|
|
|
|
|
|
.menu-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
|
|
|
gap: 12px;
|
|
|
|
|
color: #5a6474;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
padding: 14px 24px;
|
|
|
|
|
padding: 12px 16px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
margin: 2px 12px;
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
|
|
|
|
|
.el-icon {
|
|
|
|
|
.menu-icon {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #8b95a5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.menu-text {
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: rgba(64, 158, 255, 0.15);
|
|
|
|
|
color: #667eea;
|
|
|
|
|
background: #f0f3ff;
|
|
|
|
|
|
|
|
|
|
.menu-icon {
|
|
|
|
|
color: #667eea;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: linear-gradient(90deg, #409eff 0%, #2a7dc9 100%);
|
|
|
|
|
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
|
|
|
|
|
color: #667eea;
|
|
|
|
|
background: linear-gradient(135deg, #f0f3ff 0%, #e8ecff 100%);
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
|
|
|
|
.menu-icon {
|
|
|
|
|
color: #667eea;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -275,22 +406,27 @@ const breadcrumbList = computed(() => {
|
|
|
|
|
.menu-item.parent {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 10px;
|
|
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
|
|
|
padding: 14px 24px;
|
|
|
|
|
gap: 12px;
|
|
|
|
|
color: #5a6474;
|
|
|
|
|
padding: 12px 16px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
margin: 2px 12px;
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
.el-icon {
|
|
|
|
|
.menu-icon {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #8b95a5;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.menu-text {
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.arrow {
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #8b95a5;
|
|
|
|
|
transition: transform 0.3s;
|
|
|
|
|
|
|
|
|
|
&.rotated {
|
|
|
|
|
@ -299,12 +435,22 @@ const breadcrumbList = computed(() => {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: rgba(64, 158, 255, 0.15);
|
|
|
|
|
color: #667eea;
|
|
|
|
|
background: #f0f3ff;
|
|
|
|
|
|
|
|
|
|
.menu-icon,
|
|
|
|
|
.arrow {
|
|
|
|
|
color: #667eea;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
|
color: #fff;
|
|
|
|
|
color: #667eea;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
|
|
|
|
.menu-icon {
|
|
|
|
|
color: #667eea;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -320,102 +466,84 @@ const breadcrumbList = computed(() => {
|
|
|
|
|
a {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
color: rgba(255, 255, 255, 0.6);
|
|
|
|
|
color: #6b7785;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
padding: 10px 24px 10px 52px;
|
|
|
|
|
padding: 10px 16px 10px 46px;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
margin: 1px 12px;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
margin: 2px 8px;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
color: #fff;
|
|
|
|
|
background: rgba(64, 158, 255, 0.1);
|
|
|
|
|
color: #667eea;
|
|
|
|
|
background: #f5f7ff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
|
color: #409eff;
|
|
|
|
|
background: rgba(64, 158, 255, 0.2);
|
|
|
|
|
color: #667eea;
|
|
|
|
|
background: #f0f3ff;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 主内容区
|
|
|
|
|
.main-wrapper {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
background: #f0f2f5;
|
|
|
|
|
background: linear-gradient(180deg, #eef2f9 0%, #e8edf5 100%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header {
|
|
|
|
|
background: #fff;
|
|
|
|
|
.content-header {
|
|
|
|
|
padding: 16px 24px;
|
|
|
|
|
border-bottom: 1px solid #e8e8e8;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
:deep(.el-breadcrumb) {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
|
|
|
|
|
.el-breadcrumb__item {
|
|
|
|
|
.el-breadcrumb__inner {
|
|
|
|
|
color: #666;
|
|
|
|
|
color: #8b95a5;
|
|
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
color: #666;
|
|
|
|
|
color: #8b95a5;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
color: #409eff;
|
|
|
|
|
color: #667eea;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:last-child .el-breadcrumb__inner {
|
|
|
|
|
color: #333;
|
|
|
|
|
color: #5a6474;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header-actions {
|
|
|
|
|
.user-dropdown {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 6px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: #666;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
padding: 6px 12px;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
background: #f5f5f5;
|
|
|
|
|
color: #409eff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.username {
|
|
|
|
|
max-width: 120px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.arrow {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.main-content {
|
|
|
|
|
flex: 1;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
padding: 0 24px 24px;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 装饰性背景
|
|
|
|
|
.decoration-bg {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
width: 400px;
|
|
|
|
|
height: 300px;
|
|
|
|
|
background:
|
|
|
|
|
radial-gradient(circle at 80% 20%, rgba(102, 126, 234, 0.08) 0%, transparent 50%),
|
|
|
|
|
radial-gradient(circle at 90% 80%, rgba(118, 75, 162, 0.06) 0%, transparent 40%);
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
z-index: 0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
