75 lines
1.4 KiB
Vue
75 lines
1.4 KiB
Vue
<template>
|
||
<div class="user-greeting-row">
|
||
<img :src="avatar" class="user-avatar" alt="头像" />
|
||
<div class="greeting-text">
|
||
<div class="greeting-title">{{ greeting }}，{{ name }}</div>
|
||
<div class="greeting-desc">欢迎使用科伦普冷轧涂渡数智一体化平台</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'Greeting',
|
||
data() {
|
||
return {
|
||
avatar: '',
|
||
name: '',
|
||
greeting: ''
|
||
}
|
||
},
|
||
mounted() {
|
||
this.avatar = this.$store.getters.avatar
|
||
this.name = this.$store.getters.name
|
||
this.greeting = this.getGreeting()
|
||
},
|
||
methods: {
|
||
getGreeting() {
|
||
const hour = new Date().getHours()
|
||
if (hour < 6) return '凌晨好'
|
||
if (hour < 9) return '早上好'
|
||
if (hour < 12) return '上午好'
|
||
if (hour < 14) return '中午好'
|
||
if (hour < 18) return '下午好'
|
||
if (hour < 21) return '晚上好'
|
||
return '夜深了'
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.user-greeting-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
border: 2px solid #e0e0e0;
|
||
}
|
||
|
||
.greeting-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.greeting-title {
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
color: #888;
|
||
}
|
||
|
||
.greeting-desc {
|
||
font-size: 16px;
|
||
color: #888;
|
||
margin-top: 4px;
|
||
}
|
||
</style>
|