viithiisys / School-Management-dashboard

Blame view

src/pages/widgets/Social.vue 2.76 KB
edit raw normal view history
8ab31dc8b   Jatinder Singh   changes 
1
2
3
4
5
6
7
8
9
10
11
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
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
 
  <template>
    <div id="social">
      <v-container grid-list-xl fluid>
          <v-layout row wrap>
            <v-flex sm12>
              <h4>Mini Name Card</h4>
            </v-flex>
            <v-flex lg3 sm12 v-for="(item,index) in users" :key=" 'mini' + index">
              <name-card
                mini
                v-bind="item"
              >
              </name-card>
            </v-flex>
            <v-flex sm12>
              <h4>Basic Name Card</h4>
            </v-flex>          
            <v-flex lg3 sm12 v-for="(item,index) in users" :key=" 'basic' + index">
              <name-card v-bind="item">
              </name-card>
            </v-flex>
            <v-flex sm12>
              <h4>Basic Name Card with top nav</h4>
            </v-flex>          
            <v-flex lg3 sm12 v-for="(item,index) in users" :key=" 'basic-top-nav' + index">
              <name-card
                top-nav
                v-bind="item"
              >
              </name-card>
            </v-flex>          
            <v-flex sm12>
              <h4>Bottom Nav Name Card</h4>
            </v-flex>          
            <v-flex lg3 sm12 v-for="(item,index) in users" :key=" 'bottom-nav' + index">
              <name-card
                bottom-nav
                v-bind="item"
              >
              </name-card>
            </v-flex>    
            <v-flex sm12>
              <h4>Contact Card</h4>  
            </v-flex>      
            <v-flex lg4 sm12>
              <profile-card></profile-card>
            </v-flex>
          </v-layout>
        </v-container>
    </div>
  </template>
  
  <script>
  import NameCard from '@/components/widgets/card/NameCard';
  import ProfileCard from '@/components/widgets/card/ProfileCard';
  export default {
    components: {
      NameCard,
      ProfileCard
    },
    data () {
      return {
        users: [
          {
            jobTitle: 'Web Developer',
            name: 'Michael Wang',
            avatar: {
              src: 'https://randomuser.me/api/portraits/men/1.jpg',
              size: '36'
            },  
          },
          {
            jobTitle: 'Web Designer',
            name: 'Jessie J',
            color: 'pink',
            dark: true,
            avatar: {
              src: 'https://randomuser.me/api/portraits/women/1.jpg',
              size: '36'
            },  
          },  
          {
            jobTitle: 'Web Developer',
            name: 'Jim J',
            color: 'teal',
            dark: true,
            avatar: {
              src: 'https://randomuser.me/api/portraits/men/10.jpg',
              size: '36'
            },  
          },
          {
            jobTitle: 'Product Manager',
            name: 'John Doe',
            dark: true,
            cardBgImage: '/static/bg/15.jpg',
            avatar: {
              src: 'https://randomuser.me/api/portraits/men/5.jpg',
              size: '36'
            },  
          },        
        ]
      };
    },
  };
  </script>