吉鹏 / gulu-admin

Blame view

src/views/dashboard/admin/components/BoxCard.vue 2.54 KB
edit raw normal view history
d7d9c38c2   Adam   auto commit the c... 
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
 
  <template>
    <el-card class="box-card-component" style="margin-left:8px;">
      <div slot="header" class="box-card-header">
        <img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
      </div>
      <div style="position:relative;">
        <pan-thumb :image="avatar" class="panThumb" />
        <mallki class-name="mallki-text" text="vue-element-admin" />
        <div style="padding-top:35px;" class="progress-item">
          <span>Vue</span>
          <el-progress :percentage="70" />
        </div>
        <div class="progress-item">
          <span>JavaScript</span>
          <el-progress :percentage="18" />
        </div>
        <div class="progress-item">
          <span>Css</span>
          <el-progress :percentage="12" />
        </div>
        <div class="progress-item">
          <span>ESLint</span>
          <el-progress :percentage="100" status="success" />
        </div>
      </div>
    </el-card>
  </template>
  
  <script>
  import { mapGetters } from 'vuex'
  import PanThumb from '@/components/PanThumb'
  import Mallki from '@/components/TextHoverEffect/Mallki'
a6e433928   Adam   auto commit the c... 
33
 
  // import logoPath from "~@/assets/img/yp_logo.jpeg"
d7d9c38c2   Adam   auto commit the c... 
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
107
108
109
110
111
112
113
114
115
116
117
118
119
 
  
  export default {
    components: { PanThumb, Mallki },
  
    filters: {
      statusFilter(status) {
        const statusMap = {
          success: 'success',
          pending: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        statisticsData: {
          article_count: 1024,
          pageviews_count: 1024
        }
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'avatar',
        'roles'
      ])
    }
  }
  </script>
  
  <style lang="scss" >
  .box-card-component{
    .el-card__header {
      padding: 0px!important;
    }
  }
  </style>
  <style lang="scss" scoped>
  .box-card-component {
    .box-card-header {
      position: relative;
      height: 220px;
      img {
        width: 100%;
        height: 100%;
        transition: all 0.2s linear;
        &:hover {
          transform: scale(1.1, 1.1);
          filter: contrast(130%);
        }
      }
    }
    .mallki-text {
      position: absolute;
      top: 0px;
      right: 0px;
      font-size: 20px;
      font-weight: bold;
    }
    .panThumb {
      z-index: 100;
      height: 70px!important;
      width: 70px!important;
      position: absolute!important;
      top: -45px;
      left: 0px;
      border: 5px solid #ffffff;
      background-color: #fff;
      margin: auto;
      box-shadow: none!important;
      /deep/ .pan-info {
        box-shadow: none!important;
      }
    }
    .progress-item {
      margin-bottom: 10px;
      font-size: 14px;
    }
    @media only screen and (max-width: 1510px){
      .mallki-text{
        display: none;
      }
    }
  }
  </style>