exhibition_service_admin/src/views/dashboard/index.vue

<template>
  <div class="main-box">
    <div class="scroll-box">
      <div class="grid-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 class="starter-box card">
          <div class="icon el-icon-position"></div>
          <div class="title">创建展会</div>
          <div class="desc">十分钟创建一个展会<br/>通过表单系统收集与管理观众信息</div>
        </div>
        <div class="invitation-box card">
          <div class="icon el-icon-notebook-2"></div>
          <div class="title">创建邀请函</div>
          <div class="desc">十分钟创建一个邀请函<br/>集成表单系统快速填充信息并发送</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 => {
        this.$notify({
          title: '提示',
          message: '获取展会列表失败'+err,
          type: 'error'
        })
      })
    },
    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%;
  //filter: grayscale(1);
  .scroll-box {
    padding: 2px;
    position: absolute;
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    overflow: hidden;
    overflow-y: auto;
    .grid-box{
      display: grid;
      grid-gap: 16px;
      grid-template-rows: 200px 200px 200px;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
      .card{
        cursor: pointer;
        transition-duration: 300ms;
        padding: 36px 36px 18px;
        border-radius: 8px;
        position: relative;
        overflow: hidden;
        .title{
          font-size: 28px;
          font-weight: bold;
          margin-bottom: 16px;
          position: relative;
        }
        .desc{
          width: 80%;
          position: relative;
        }
        .icon{
          opacity: 0.1;
          font-size: 150px;
          position: absolute;
          right: 12px;
          bottom: -60px;
          transition-duration: 300ms;
        }
        &:hover{
          .icon{
            transform: scale(1.1) translateY(-20px);
          }
        }
      }
      .starter-box{
        grid-column: span 2;
        background: #e1f8f8;
        color: #117878;
        &:hover{
          box-shadow: inset 0 0 0 2px #117878;
        }
      }
      .invitation-box{
        grid-column: span 2;
        background: #fbf3e7;
        color: #88601f;
        &:hover{
          box-shadow: inset 0 0 0 2px #88601f;
        }
      }
      .main-card{
        grid-column: span 6;
        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>