push
This commit is contained in:
ChoChoX
@@ -1,68 +1,156 @@
|
||||
<template>
|
||||
<div class="home-container">
|
||||
<div class="workspace-container">
|
||||
<!-- 顶部视频横幅 -->
|
||||
<div class="video-banner">
|
||||
<video src="/首页顶图.mp4" autoplay muted loop class="bg-video"></video>
|
||||
<div class="video-overlay">
|
||||
<h2 class="banner-title">欢迎使用蜜雪冰城管理系统</h2>
|
||||
<div class="welcome-text">
|
||||
<h2 class="banner-title">欢迎回来，{{ userInfo?.name || '用户' }}</h2>
|
||||
<p class="welcome-sub">{{ userInfo?.departmentDesc }} · {{ roleName }}</p>
|
||||
<p class="welcome-date">{{ currentDate }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 雪王简介 -->
|
||||
<div class="intro-section">
|
||||
<div class="section-header">
|
||||
<div class="header-line"></div>
|
||||
<h2 class="section-title">雪王简介</h2>
|
||||
<div class="header-line"></div>
|
||||
<!-- 功能卡片网格 -->
|
||||
<div class="card-grid">
|
||||
<div
|
||||
v-for="card in visibleCards"
|
||||
:key="card.route"
|
||||
class="function-card"
|
||||
:style="{ borderTopColor: themeColor, '--hover-bg': themeBg }"
|
||||
@click="navigateTo(card.route)"
|
||||
>
|
||||
<div class="card-icon" :style="{ background: themeBg, color: themeColor }">
|
||||
<el-icon :size="28"><component :is="card.icon" /></el-icon>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3 class="card-title">{{ card.title }}</h3>
|
||||
<p class="card-desc">{{ card.description }}</p>
|
||||
</div>
|
||||
<div class="card-arrow">
|
||||
<el-icon :style="{ color: themeColor }"><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="intro-content">
|
||||
<div class="pic-wrapper">
|
||||
<img src="/mixue.png" alt="雪王" class="xuewang-img">
|
||||
</div>
|
||||
<div class="txt-wrapper">
|
||||
<div class="quote">
|
||||
"我是手拿冰淇凌权杖的雪王"
|
||||
<br>
|
||||
"一生只爱冰淇凌与茶"
|
||||
</div>
|
||||
<ul class="info-list">
|
||||
<li v-for="(item, index) in snowKingInfo" :key="index">
|
||||
<span class="info-label">{{ item.label }}</span>
|
||||
<span class="info-divider"></span>
|
||||
<span class="info-value">{{ item.value }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 快捷信息 -->
|
||||
<div class="info-section">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover" class="info-card">
|
||||
<template #header>
|
||||
<div class="info-card-header">
|
||||
<span>我的信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="info-item">
|
||||
<span class="info-label">用户名</span>
|
||||
<span>{{ userInfo?.username }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">部门</span>
|
||||
<span>{{ userInfo?.departmentDesc }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">角色</span>
|
||||
<span>{{ roleName }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover" class="info-card">
|
||||
<template #header>
|
||||
<div class="info-card-header">
|
||||
<span>快速操作</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="quick-actions">
|
||||
<el-button
|
||||
v-for="card in visibleCards.slice(0, 3)"
|
||||
:key="card.route"
|
||||
:style="{ borderColor: themeColor, color: themeColor }"
|
||||
@click="navigateTo(card.route)"
|
||||
plain
|
||||
>
|
||||
{{ card.title }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { getUserInfo, hasPermission, getRoleLevel, isManager } from '../store/user'
|
||||
|
||||
const snowKingInfo = ref([
|
||||
{ label: '生日', value: '11月22日' },
|
||||
{ label: '性格', value: '正直、友善、热情、进取' },
|
||||
{ label: '职位', value: '蜜雪冰城首席品控官兼全球品牌代言人' },
|
||||
{ label: '口头禅', value: '你爱我，我爱你，蜜雪冰城甜蜜蜜' },
|
||||
{ label: '爱好', value: '唱歌跳舞，研究冰淇淋与茶的新奇吃法' }
|
||||
])
|
||||
const router = useRouter()
|
||||
const userInfo = computed(() => getUserInfo())
|
||||
const roleLevel = computed(() => getRoleLevel())
|
||||
|
||||
// 主题色
|
||||
const themeColor = computed(() => roleLevel.value <= 3 ? '#E60012' : '#FF8C69')
|
||||
const themeBg = computed(() => roleLevel.value <= 3 ? '#FEF0F0' : '#FFF5F0')
|
||||
const bannerBg = computed(() => roleLevel.value <= 3
|
||||
? 'linear-gradient(135deg, #FEF0F0 0%, #FFF5F5 100%)'
|
||||
: 'linear-gradient(135deg, #FFF5F0 0%, #FFFAF5 100%)')
|
||||
|
||||
// 角色名称
|
||||
const roleName = computed(() => {
|
||||
const level = roleLevel.value
|
||||
if (level === 1) return '总经理'
|
||||
if (level === 2) return '部门经理'
|
||||
if (level === 3) return '部门副经理'
|
||||
return '一般专员'
|
||||
})
|
||||
|
||||
// 当前日期
|
||||
const currentDate = computed(() => {
|
||||
const d = new Date()
|
||||
const days = ['日', '一', '二', '三', '四', '五', '六']
|
||||
return `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日 星期${days[d.getDay()]}`
|
||||
})
|
||||
|
||||
// 功能卡片定义
|
||||
const allCards = [
|
||||
{ title: '客户管理', description: '管理加盟商信息、联系方式、地址等', icon: 'Avatar', route: '/panel/customer', permission: ['customer', 'read'] },
|
||||
{ title: '合同管理', description: '管理加盟合同和采购合同', icon: 'Document', route: '/panel/contract', permission: ['contract', 'read'] },
|
||||
{ title: '售后管理', description: '处理客户反馈和售后服务', icon: 'Service', route: '/panel/service', permission: ['after_sale', 'read'] },
|
||||
{ title: '产品管理', description: '管理茶饮原料、包装物料、设备', icon: 'Goods', route: '/panel/products', permission: ['product', 'read'] },
|
||||
{ title: '供应商管理', description: '管理供应商信息和合作关系', icon: 'Box', route: '/panel/supplier', permission: ['supplier', 'read'] },
|
||||
{ title: '员工管理', description: '管理员工信息、部门、职务', icon: 'User', route: '/panel/employee', permission: ['employee', 'read'] },
|
||||
{ title: '用户管理', description: '管理系统用户账号和权限', icon: 'UserFilled', route: '/panel/user', permission: ['user', 'manage'] },
|
||||
]
|
||||
|
||||
// 根据权限过滤可见卡片
|
||||
const visibleCards = computed(() => {
|
||||
return allCards.filter(card => hasPermission(card.permission[0], card.permission[1]))
|
||||
})
|
||||
|
||||
// 导航
|
||||
const navigateTo = (route) => {
|
||||
router.push(route)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-container {
|
||||
min-height: 100%;
|
||||
.workspace-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ========== 视频横幅 ========== */
|
||||
.video-banner {
|
||||
position: relative;
|
||||
width: calc(100% + 40px);
|
||||
margin: -20px -20px 0 -20px;
|
||||
height: 300px;
|
||||
margin: -20px -20px 20px -20px;
|
||||
height: 260px;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 12px 12px;
|
||||
}
|
||||
|
||||
.bg-video {
|
||||
@@ -80,155 +168,148 @@ const snowKingInfo = ref([
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(230, 0, 18, 0.3) 0%,
|
||||
rgba(0, 0, 0, 0.4) 100%
|
||||
rgba(0, 0, 0, 0.5) 100%
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
margin: 0;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
/* ========== 简介区域 ========== */
|
||||
.intro-section {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.header-line {
|
||||
flex: 1;
|
||||
max-width: 200px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #E60012, transparent);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #E60012;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.intro-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 60px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 雪王图片 */
|
||||
.pic-wrapper {
|
||||
flex-shrink: 0;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 30px rgba(230, 0, 18, 0.15);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.pic-wrapper:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.xuewang-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 文字内容 */
|
||||
.txt-wrapper {
|
||||
flex: 1;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.quote {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #E60012;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 40px;
|
||||
padding-left: 20px;
|
||||
border-left: 4px solid #E60012;
|
||||
}
|
||||
|
||||
.info-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.info-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px dashed #eee;
|
||||
.welcome-sub {
|
||||
margin: 0 0 4px 0;
|
||||
color: rgba(255,255,255,0.9);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info-list li:last-child {
|
||||
.welcome-date {
|
||||
margin: 0;
|
||||
color: rgba(255,255,255,0.7);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ========== 功能卡片网格 ========== */
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.function-card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
border-top: 3px solid #E60012;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.function-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
background: var(--hover-bg, #FEF0F0);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-arrow {
|
||||
flex-shrink: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.function-card:hover .card-arrow {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ========== 信息区域 ========== */
|
||||
.info-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.info-card-header {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px dashed #eee;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
min-width: 70px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.info-divider {
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
background: #E60012;
|
||||
margin: 0 16px;
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #606266;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ========== 响应式适配 ========== */
|
||||
@media (max-width: 900px) {
|
||||
.intro-content {
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
/* ========== 响应式 ========== */
|
||||
@media (max-width: 768px) {
|
||||
.card-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.pic-wrapper {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
height: auto;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.txt-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.video-banner {
|
||||
height: 200px;
|
||||
.welcome-banner {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user