<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <div class="info-container clearfix">
        <pan-thumb :image="avatar" :width="'130px'" :height="'130px'">
        </pan-thumb>
        
        <span class="welcome-title">欢迎登录devCould-开发云</span>
      </div>
      <img :src="emptyGif" style="width: 60%; margin: -30px auto 0 auto" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "dashboard",
  data() {
    return {
      emptyGif: require("@/assets/img/welcome.gif"),
    };
  },
  computed: {
    ...mapGetters([
      // 'name',
      "avatar",
      // 'roles'
    ]),
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.dashboard-container {
  // background-color: #f0f4fd;
  padding: 0 0 0 0;
}
.emptyGif {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.dashboard-editor-container {
  background-color: #e3e3e3;
  min-height: calc(100vh - 84px);
  width: 100%;
  // display: flex;
  padding: 0 6% 0 0;
  text-align: center;
  // align-items: flex-start ;
  .info-container {
    display: block;
    width: 60%;
    text-align: center;
    margin: 0 auto;
    padding: 10vh 0 0 0;
    .welcome-title {
      vertical-align: top;
      padding: 0;
      margin: 0 0 0 18px;
      color: #97a8be;
      display: inline-block;
      height: 130px;
      line-height: 130px;
      font-size: 45px;
    }
  }
  //center;
  img {
    display: block;
    flex: 1;
  }
}
</style>
