Adam / gulu-admin

Blame view

src/views/dashboard/editor/index.vue 1.69 KB
edit raw normal view history
d7d9c38c2   Adam   auto commit the c... 
1
2
3
4
5
6
7
8
9
10
 
  <template>
    <div class="dashboard-editor-container">
      <div class=" clearfix">
        <pan-thumb :image="avatar" style="float: left">
          Your roles:
          <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
        </pan-thumb>
        <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
        <div class="info-container">
          <span class="display_name">{{ name }}</span>
3d3cdb68f   Adam   auto commit the c... 
11
 
          <span style="font-size:20px;padding-top:20px;display:inline-block;">{{ roles }}'s Dashboard</span>
d7d9c38c2   Adam   auto commit the c... 
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
        </div>
      </div>
      <div>
        <img :src="emptyGif" class="emptyGif">
      </div>
    </div>
  </template>
  
  <script>
  import { mapGetters } from 'vuex'
  import PanThumb from '@/components/PanThumb'
  import GithubCorner from '@/components/GithubCorner'
  
  export default {
    name: 'DashboardEditor',
    components: { PanThumb, GithubCorner },
    data() {
      return {
        emptyGif: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'avatar',
        'roles'
      ])
    }
  }
  </script>
  
  <style lang="scss" scoped>
    .emptyGif {
      display: block;
      width: 45%;
      margin: 0 auto;
    }
  
    .dashboard-editor-container {
      background-color: #e3e3e3;
      min-height: 100vh;
      padding: 50px 60px 0px;
      .pan-info-roles {
        font-size: 12px;
        font-weight: 700;
        color: #333;
        display: block;
      }
      .info-container {
        position: relative;
        margin-left: 190px;
        height: 150px;
        line-height: 200px;
        .display_name {
          font-size: 48px;
          line-height: 48px;
          color: #212121;
          position: absolute;
          top: 25px;
        }
      }
    }
  </style>