Adam / gulu-admin

Blame view

src/views/dashboard/runner/index.vue 2.46 KB
edit raw normal view history
5cb375940   Adam   auto commit the c... 
1
2
3
 
  <template>
    <div class="dashboard-editor-container">
      <div class="clearfix">
398cda401   Adam   auto commit the c... 
4
5
6
7
 
        <pan-thumb
          :image="avatar"
          style="float: left"
        >
5cb375940   Adam   auto commit the c... 
8
 
          Your roles:
398cda401   Adam   auto commit the c... 
9
10
11
12
13
 
          <span
            v-for="item in roles"
            :key="item"
            class="pan-info-roles"
          >{{ item }}</span>
5cb375940   Adam   auto commit the c... 
14
 
        </pan-thumb>
398cda401   Adam   auto commit the c... 
15
 
        <!-- <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" /> -->
5cb375940   Adam   auto commit the c... 
16
17
18
19
20
21
 
        <div class="info-container">
          <span class="display_name">{{ name }}</span>
          <span style="font-size:20px;padding-top:20px;display:inline-block;">{{ roles }}'s Dashboard</span>
        </div>
      </div>
      <div>
398cda401   Adam   auto commit the c... 
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
 
        <!-- <img :src="emptyGif" class="emptyGif"> -->
      </div>
      <div>
        <el-row :gutter="8">
          <el-col
            :xs="{span: 24}"
            :sm="{span: 24}"
            :md="{span: 24}"
            :lg="{span: 12}"
            :xl="{span: 12}"
            style="padding-right:8px;margin-bottom:30px;"
          >
            <transaction-table />
          </el-col>
          <el-col
            :xs="{span: 24}"
            :sm="{span: 24}"
            :md="{span: 24}"
            :lg="{span: 12}"
            :xl="{span: 12}"
            style="margin-bottom:30px;"
          >
            <todo-list />
          </el-col>
        </el-row>
5cb375940   Adam   auto commit the c... 
47
48
49
50
51
52
53
 
      </div>
    </div>
  </template>
  
  <script>
  import { mapGetters } from 'vuex'
  import PanThumb from '@/components/PanThumb'
398cda401   Adam   auto commit the c... 
54
55
56
 
  import TransactionTable from '@/components/TransactionTable'
  import TodoList from '@/components/TodoList'
  // import BoxCard from "./components/BoxCard";
5cb375940   Adam   auto commit the c... 
57
58
59
60
61
 
  // import GithubCorner from '@/components/GithubCorner'
  
  export default {
    name: 'DashboardEditor',
    // components: { PanThumb, GithubCorner },
398cda401   Adam   auto commit the c... 
62
 
    components: { PanThumb, TransactionTable, TodoList },
5cb375940   Adam   auto commit the c... 
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
 
    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>