112 lines
2.7 KiB
Vue
112 lines
2.7 KiB
Vue
<template>
|
||
<div class="dashboard-container">
|
||
<el-card class="welcome-card">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span class="title">👋 欢迎回来，{{ userStore.username }}</span>
|
||
<el-tag type="success">系统运行正常</el-tag>
|
||
</div>
|
||
</template>
|
||
|
||
<div class="card-body">
|
||
<h2>IRIS 库存管理系统</h2>
|
||
<p class="subtitle">请选择您要进行的业务操作：</p>
|
||
|
||
<div class="action-buttons">
|
||
<el-button type="primary" size="large" @click="handleNav('/inventory/buy')">
|
||
<el-icon style="margin-right: 5px"><ShoppingCart /></el-icon>
|
||
采购入库
|
||
</el-button>
|
||
|
||
<el-button type="success" size="large" @click="handleNav('/material/index')">
|
||
<el-icon style="margin-right: 5px"><Box /></el-icon>
|
||
基础信息
|
||
</el-button>
|
||
|
||
<el-button type="warning" size="large" @click="handleNav('/operation/borrow')">
|
||
<el-icon style="margin-right: 5px"><Operation /></el-icon>
|
||
借库申请
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useRouter } from 'vue-router'
|
||
// 1. 引入 User Store
|
||
import { useUserStore } from '@/stores/user'
|
||
// 引入需要的图标
|
||
import { Box, TrendCharts, ShoppingCart, Operation } from '@element-plus/icons-vue'
|
||
|
||
const router = useRouter()
|
||
// 2. 实例化 store
|
||
const userStore = useUserStore()
|
||
|
||
// 统一跳转函数
|
||
const handleNav = (path: string) => {
|
||
router.push(path)
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.dashboard-container {
|
||
/* 使用 100% 宽度和高度，利用 Flex 居中显示 */
|
||
height: calc(100vh - 84px); /* 减去顶部导航栏的高度，防止出现双滚动条 */
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #f0f2f5; /* 给背景加个淡灰色，突出卡片 */
|
||
}
|
||
|
||
.welcome-card {
|
||
width: 800px; /*稍微加宽一点 */
|
||
text-align: center;
|
||
border-radius: 8px; /* 圆角更好看 */
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #303133;
|
||
}
|
||
|
||
.card-body {
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.card-body h2 {
|
||
font-size: 28px;
|
||
color: #409EFF; /* 使用主题蓝 */
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.subtitle {
|
||
color: #909399;
|
||
margin-bottom: 40px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
flex-wrap: wrap; /* 防止屏幕过窄时按钮挤压 */
|
||
}
|
||
|
||
/* 给按钮加一点悬浮效果 */
|
||
.el-button {
|
||
transition: all 0.3s;
|
||
}
|
||
.el-button:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
}
|
||
</style> |