caojia
158 lines
3.9 KiB
Vue
158 lines
3.9 KiB
Vue
<template>
|
||
<div class="app-container home">
|
||
<div class="home-hero">
|
||
<div class="hero-main">
|
||
<h2 class="hero-title">BMS 业财一体化系统</h2>
|
||
<p class="hero-sub">跨境物流 · 询价计价 · 账单管理</p>
|
||
<p class="hero-welcome">
|
||
{{ greeting }}，{{ user.nickName || user.name }}，欢迎使用 BMS 业财一体化系统。
|
||
</p>
|
||
<p class="hero-date">{{ nowText }}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<el-row :gutter="20" class="home-cards">
|
||
<el-col :xs="24" :sm="12" :lg="8">
|
||
<el-card shadow="hover" class="home-card">
|
||
<div class="card-icon icon-price">
|
||
<el-icon :size="28"><PriceTag /></el-icon>
|
||
</div>
|
||
<div class="card-title">价格管理</div>
|
||
<div class="card-desc">产品价卡、套餐与附加费配置维护</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :lg="8">
|
||
<el-card shadow="hover" class="home-card">
|
||
<div class="card-icon icon-bill">
|
||
<el-icon :size="28"><Tickets /></el-icon>
|
||
</div>
|
||
<div class="card-title">账单管理</div>
|
||
<div class="card-desc">应收应付账单查询与计费核对</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :xs="24" :sm="12" :lg="8">
|
||
<el-card shadow="hover" class="home-card">
|
||
<div class="card-icon icon-customer">
|
||
<el-icon :size="28"><User /></el-icon>
|
||
</div>
|
||
<div class="card-title">客户管理</div>
|
||
<div class="card-desc">客户资料、供应商与授信额度管理</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup name="Index">
|
||
import { PriceTag, Tickets, User } from '@element-plus/icons-vue'
|
||
import useUserStore from '@/store/modules/user'
|
||
|
||
const user = useUserStore()
|
||
|
||
const nowText = ref('')
|
||
|
||
const greeting = computed(() => {
|
||
const h = new Date().getHours()
|
||
if (h < 6) return '凌晨好'
|
||
if (h < 12) return '上午好'
|
||
if (h < 14) return '中午好'
|
||
if (h < 18) return '下午好'
|
||
return '晚上好'
|
||
})
|
||
|
||
function formatNow() {
|
||
const d = new Date()
|
||
const week = ['日', '一', '二', '三', '四', '五', '六'][d.getDay()]
|
||
const pad = n => String(n).padStart(2, '0')
|
||
nowText.value = `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日 星期${week} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
|
||
}
|
||
|
||
onMounted(() => {
|
||
formatNow()
|
||
setInterval(formatNow, 1000)
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
// 清理定时器
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.home {
|
||
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||
color: #303133;
|
||
|
||
.home-hero {
|
||
padding: 40px 24px;
|
||
margin-bottom: 20px;
|
||
border-radius: 8px;
|
||
background: linear-gradient(135deg, #409eff 0%, #6c8cff 100%);
|
||
color: #fff;
|
||
|
||
.hero-title {
|
||
margin: 0 0 8px;
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.hero-sub {
|
||
margin: 0 0 16px;
|
||
font-size: 14px;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.hero-welcome {
|
||
margin: 0 0 6px;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.hero-date {
|
||
margin: 0;
|
||
font-size: 13px;
|
||
opacity: 0.85;
|
||
}
|
||
}
|
||
|
||
.home-cards {
|
||
.home-card {
|
||
margin-bottom: 20px;
|
||
border-radius: 8px;
|
||
|
||
.card-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 52px;
|
||
height: 52px;
|
||
margin-bottom: 14px;
|
||
border-radius: 10px;
|
||
color: #fff;
|
||
|
||
&.icon-price {
|
||
background: #409eff;
|
||
}
|
||
&.icon-bill {
|
||
background: #67c23a;
|
||
}
|
||
&.icon-customer {
|
||
background: #e6a23c;
|
||
}
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.card-desc {
|
||
font-size: 13px;
|
||
color: #909399;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|