erp-next/ruoyi-ui/src/views/index.vue

<template>
  <div class="home-page">
    <!-- Logo -->
    <div class="logo-section">
      <div class="logo-box">
        <img src="@/assets/logo/logo.svg" alt="福安德" class="logo-img">
      </div>
    </div>

    <!-- 系统名称 -->
    <div class="title-section">
      <h1 class="main-title">福安德智慧报价平台</h1>
      <p class="sub-title">FUANDE SMART QUOTATION PLATFORM</p>
    </div>

    <!-- 分隔线 -->
    <div class="divider"></div>

    <!-- 欢迎语 -->
    <div class="welcome-section">
      <p class="welcome-text">{{ greeting }}，{{ nickName }}！欢迎回来</p>
    </div>

    <!-- 时间 -->
    <div class="time-section">
      <div class="time-display">{{ currentTime }}</div>
      <div class="date-display">{{ currentDate }}</div>
    </div>

    <!-- 底部标语 -->
    <div class="slogan-section">
      <p class="slogan">原料·研发·生产·销售·服务 全产业链数智运营</p>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(['nickName', 'roles']),
    isSupplier() {
      return this.roles && this.roles.includes('supplier')
    }
  },
  data() {
    return {
      currentTime: '',
      currentDate: '',
      greeting: '',
      timer: null,
      quickActions: [
        { label: '物料管理',   icon: 'el-icon-goods',              path: '/material' },
        { label: '甲方报价',   icon: 'el-icon-document-copy',      path: '/clientquote' },
        { label: '供应商报价', icon: 'el-icon-money',              path: '/quotation' },
        { label: '订单管理',   icon: 'el-icon-s-order',            path: '/bid/order/pending' },
      ]
    }
  },
  mounted() {
    this.updateTime()
    this.timer = setInterval(this.updateTime, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    updateTime() {
      const now = new Date()
      this.currentTime = now.toLocaleTimeString('zh-CN', {
        hour12: false,
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
      this.currentDate = now.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long'
      })
      this.greeting = this.getGreeting(now.getHours())
    },
    getGreeting(hour) {
      if (hour >= 5 && hour < 12) return '上午好'
      if (hour >= 12 && hour < 14) return '中午好'
      if (hour >= 14 && hour < 18) return '下午好'
      return '晚上好'
    }
  }
}
</script>

<style lang="scss" scoped>
.home-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 84px);
  background: #ffffff;
  padding: 40px 20px 24px;
}

/* ═══ Logo ═══ */
.logo-section {
  margin-bottom: 24px;
}

.logo-box {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ═══ 标题 ═══ */
.title-section {
  text-align: center;
  margin-bottom: 20px;
}

.main-title {
  font-size: 28px;
  font-weight: 500;
  color: #333333;
  margin: 0 0 8px 0;
}

.sub-title {
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  letter-spacing: 2px;
  margin: 0;
  text-transform: uppercase;
}

/* ═══ 分隔线 ═══ */
.divider {
  width: 60px;
  height: 2px;
  background: #e4393c;
  margin-bottom: 20px;
}

/* ═══ 欢迎语 ═══ */
.welcome-section {
  margin-bottom: 16px;
}

.welcome-text {
  font-size: 16px;
  font-weight: 400;
  color: #666666;
  margin: 0;
}

/* ═══ 时间 ═══ */
.time-section {
  text-align: center;
  margin-bottom: 40px;
}

.time-display {
  font-size: 48px;
  font-weight: 300;
  color: #e4393c;
  font-family: 'Roboto Mono', 'Courier New', monospace;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.date-display {
  font-size: 14px;
  font-weight: 400;
  color: #999999;
}

/* ═══ 标语 ═══ */
.slogan-section {
  text-align: center;
  margin-bottom: 40px;
}

.slogan {
  font-size: 13px;
  font-weight: 400;
  color: #cccccc;
  margin: 0;
  letter-spacing: 1px;
}

/* ═══ 快捷入口 ═══ */
.quick-section {
  width: 100%;
  max-width: 520px;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;

  &:hover {
    border-color: #e4393c;
    background: #fff5f5;
  }
}

.quick-item-icon {
  font-size: 24px;
  color: #e4393c;
}

.quick-item-label {
  font-size: 12px;
  color: #666666;
}
</style>