klp-oa/klp-ui/src/views/components/Greeting.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>