365 lines
11 KiB
Vue
365 lines
11 KiB
Vue
<template>
|
||
<div class="welcome-container">
|
||
<div class="welcome-card">
|
||
<div class="welcome-header">
|
||
<div class="welcome-icon">
|
||
<svg viewBox="0 0 48 48" width="48" height="48">
|
||
<defs>
|
||
<linearGradient id="iconGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#d4af37"/>
|
||
<stop offset="100%" style="stop-color:#f5e6a3"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<circle cx="24" cy="24" r="20" fill="none" stroke="url(#iconGrad)" stroke-width="2"/>
|
||
<path d="M14 24 L21 31 L34 17" fill="none" stroke="url(#iconGrad)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
<h1>欢迎进入ERP管理系统</h1>
|
||
</div>
|
||
|
||
<div class="welcome-content">
|
||
<p class="welcome-text">
|
||
您已成功登录系统。当前登录账号：
|
||
<el-tag class="user-tag" type="warning" size="large" effect="dark">
|
||
{{ userInfo.username }}
|
||
</el-tag>
|
||
</p>
|
||
|
||
<div class="user-info-card">
|
||
<div class="info-card-title">账户信息</div>
|
||
<el-descriptions :column="2" border>
|
||
<el-descriptions-item label="用户名">
|
||
{{ userInfo.username }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="姓名">
|
||
{{ userInfo.name }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="角色">
|
||
<el-tag :type="userInfo.role === 'admin' ? 'danger' : 'success'" size="small">
|
||
{{ userInfo.role === 'admin' ? '管理员' : '普通用户' }}
|
||
</el-tag>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="登录时间">
|
||
{{ loginTime }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
|
||
<div class="system-features">
|
||
<div class="section-title">系统功能模块</div>
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">
|
||
<div class="feature-card">
|
||
<div class="feature-icon-wrap gold">
|
||
<svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
|
||
<line x1="3" y1="6" x2="21" y2="6"/>
|
||
<path d="M16 10a4 4 0 0 1-8 0"/>
|
||
</svg>
|
||
</div>
|
||
<h4>订单管理</h4>
|
||
<p>创建、查看和处理客户订单</p>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="feature-card">
|
||
<div class="feature-icon-wrap blue">
|
||
<svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
||
</svg>
|
||
</div>
|
||
<h4>商品管理</h4>
|
||
<p>管理商品信息和库存</p>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="feature-card">
|
||
<div class="feature-icon-wrap green">
|
||
<svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="1" y="3" width="15" height="13"/>
|
||
<polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/>
|
||
<circle cx="5.5" cy="18.5" r="2.5"/>
|
||
<circle cx="18.5" cy="18.5" r="2.5"/>
|
||
</svg>
|
||
</div>
|
||
<h4>仓库管理</h4>
|
||
<p>管理仓库和库存位置</p>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<div class="quick-actions">
|
||
<div class="section-title">快速操作</div>
|
||
<el-space wrap>
|
||
<el-button type="primary" class="action-btn gold-btn">
|
||
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:6px"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||
新建订单
|
||
</el-button>
|
||
<el-button class="action-btn white-btn">
|
||
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:6px"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||
查询库存
|
||
</el-button>
|
||
<el-button class="action-btn white-btn">
|
||
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:6px"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||
系统设置
|
||
</el-button>
|
||
<el-button class="action-btn white-btn">
|
||
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:6px"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||
使用帮助
|
||
</el-button>
|
||
</el-space>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="welcome-footer">
|
||
<el-divider />
|
||
<p class="footer-text">
|
||
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:6px"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
|
||
提示：这是一个演示系统。所有数据均为模拟数据。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
|
||
const userInfo = ref({
|
||
username: '',
|
||
name: '',
|
||
role: ''
|
||
})
|
||
|
||
const loginTime = ref('')
|
||
|
||
onMounted(() => {
|
||
const userData = localStorage.getItem('current_user')
|
||
if (userData) {
|
||
try {
|
||
userInfo.value = JSON.parse(userData)
|
||
} catch (e) {
|
||
console.error('解析用户信息失败:', e)
|
||
}
|
||
}
|
||
|
||
const now = new Date()
|
||
loginTime.value = now.toLocaleString('zh-CN', {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
second: '2-digit'
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.welcome-container {
|
||
padding: 24px;
|
||
min-height: calc(100vh - 120px);
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.welcome-card {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||
padding: 32px;
|
||
}
|
||
|
||
.welcome-header {
|
||
text-align: center;
|
||
margin-bottom: 32px;
|
||
padding-bottom: 24px;
|
||
border-bottom: 1px solid #e9ecef;
|
||
}
|
||
|
||
.welcome-icon {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.welcome-header h1 {
|
||
font-size: 24px;
|
||
color: #1a1a2e;
|
||
margin: 0;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.welcome-content {
|
||
padding: 0 12px;
|
||
}
|
||
|
||
.welcome-text {
|
||
font-size: 15px;
|
||
color: #6c757d;
|
||
margin-bottom: 24px;
|
||
text-align: center;
|
||
}
|
||
|
||
.user-tag {
|
||
font-size: 14px;
|
||
padding: 6px 14px;
|
||
margin: 0 8px;
|
||
background: linear-gradient(135deg, #d4af37, #f5e6a3);
|
||
border: none;
|
||
color: #1a1a2e;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.user-info-card {
|
||
background: #fafafa;
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.info-card-title {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: #1a1a2e;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid #d4af37;
|
||
display: inline-block;
|
||
}
|
||
|
||
.system-features {
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: #1a1a2e;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid #d4af37;
|
||
display: inline-block;
|
||
}
|
||
|
||
.feature-card {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 24px 20px;
|
||
text-align: center;
|
||
border: 1px solid #e9ecef;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
height: 100%;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||
border-color: #d4af37;
|
||
}
|
||
|
||
.feature-icon-wrap {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 16px;
|
||
}
|
||
|
||
.feature-icon-wrap.gold {
|
||
background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
|
||
color: #d4af37;
|
||
}
|
||
|
||
.feature-icon-wrap.blue {
|
||
background: linear-gradient(135deg, rgba(26, 26, 46, 0.1), rgba(26, 26, 46, 0.05));
|
||
color: #1a1a2e;
|
||
}
|
||
|
||
.feature-icon-wrap.green {
|
||
background: linear-gradient(135deg, rgba(82, 196, 26, 0.1), rgba(82, 196, 26, 0.05));
|
||
color: #52c41a;
|
||
}
|
||
|
||
.feature-card h4 {
|
||
font-size: 15px;
|
||
color: #1a1a2e;
|
||
margin: 0 0 8px 0;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.feature-card p {
|
||
font-size: 13px;
|
||
color: #6c757d;
|
||
margin: 0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.quick-actions {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.action-btn {
|
||
border-radius: 8px !important;
|
||
font-weight: 500 !important;
|
||
padding: 10px 20px !important;
|
||
display: inline-flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
}
|
||
|
||
.gold-btn {
|
||
background: linear-gradient(135deg, #d4af37, #f5e6a3) !important;
|
||
color: #1a1a2e !important;
|
||
border: none !important;
|
||
box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3) !important;
|
||
}
|
||
|
||
.gold-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 16px rgba(212, 175, 55, 0.4) !important;
|
||
}
|
||
|
||
.white-btn {
|
||
background: #fff !important;
|
||
color: #1a1a2e !important;
|
||
border: 1px solid #e9ecef !important;
|
||
}
|
||
|
||
.white-btn:hover {
|
||
border-color: #d4af37 !important;
|
||
color: #d4af37 !important;
|
||
}
|
||
|
||
.welcome-footer {
|
||
margin-top: 32px;
|
||
}
|
||
|
||
.footer-text {
|
||
text-align: center;
|
||
color: #adb5bd;
|
||
font-size: 13px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.welcome-container {
|
||
padding: 12px;
|
||
}
|
||
|
||
.welcome-card {
|
||
padding: 20px;
|
||
}
|
||
|
||
.feature-card {
|
||
padding: 16px;
|
||
margin-bottom: 16px;
|
||
}
|
||
}
|
||
</style>
|