exhibition_service_admin/src/views/dashboard/index.vue

<template>
  <div class="main-box">
    <div class="scroll-box">
      <div v-permission="'dashboard.head'" class="main-card">
        <div class="hello-text">{{ getTimeWord() }}，{{ user.nickname }}！</div>
        <div class="card-content">
          <div class="expo-text">
            <span v-if="currentExpo">距离{{ currentExpo.expo_name }}结束还有{{ getEndDay(currentExpo.end_date) }}天</span>
            <span v-else>没有进行中的展会</span>
          </div>
          <div class="quick-nav">
            <router-link class="nav-item" to="audience">
              <span class="icon el-icon-user" />
              <span class="text">观众管理</span>
            </router-link>
            <router-link class="nav-item" to="preRegister">
              <span class="icon el-icon-tickets" />
              <span class="text">表单管理</span>
            </router-link>
            <router-link class="nav-item" to="exhibitor">
              <span class="icon el-icon-office-building" />
              <span class="text">展商管理</span>
            </router-link>
            <router-link class="nav-item" to="invitation">
              <span class="icon el-icon-files" />
              <span class="text">模板管理</span>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getExpoList } from '@/api/expo'
export default {
  name: 'Dashboard',
  data() {
    return {
      currentExpo: {}
    }
  },
  computed: {
    user() { return this.$store.state.user.user }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      getExpoList(1, 20).then(res => {
        const expoList = res.data.data
        for (const item of expoList) {
          if (item.status === 0 && this.getEndDay(item.end_date) >= 0) {
            this.currentExpo = item
            return
          }
        }
        this.currentExpo = false
      }).catch(err => {

      })
    },
    getEndDay(date) {
      const endTime = new Date(date)
      return Math.ceil((endTime.getTime() - new Date().getTime()) / 86400000)
    },
    getTimeWord() {
      const time = new Date().getHours()
      if (time >= 0 && time < 6) return '凌晨好'
      if (time >= 6 && time < 9) return '早上好'
      if (time >= 9 && time < 12) return '上午好'
      if (time >= 12 && time < 14) return '中午好'
      if (time >= 14 && time < 17) return '下午好'
      if (time >= 17 && time < 19) return '傍晚好'
      if (time >= 19 && time < 21) return '晚上好'
      return '夜深了'
    }
  }
}
</script>

<style scoped lang="scss">
@use '@/styles/variables.scss' as *;
.main-box {
  height: 100%;
  width: 100%;
  .scroll-box {
    padding: 2px;
    position: absolute;
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    overflow: hidden;
    overflow-y: auto;
    .main-card{
      background: $menuActiveBg;
      padding: 36px 36px 18px;
      border-radius: 8px;
      .hello-text{
        color: $menuActiveText;
        font-size: 28px;
        font-weight: bold;
      }
      .card-content{
        margin-top: 16px;
        display: grid;
        grid-template-columns: 1fr 2fr;
        .expo-text{

        }
        .quick-nav{
          display: flex;
          justify-content: flex-end;
          .nav-item{
            transition-duration: 300ms;
            padding: 16px 32px;
            border-radius: 16px;
            text-decoration: unset;
            color: $menuActiveText;
            display: flex;
            flex-direction: column;
            .icon{
              margin-bottom: 4px;
              font-size: 32px;
            }
            .text{
              font-size: 16px;
            }
            &:hover{
              background: #004DFF11;
            }
          }
        }
      }
    }
  }
}
</style>