refactor:dashboard

src/views/dashboard/admin/components/BoxCard.vue

@@ -0,0 +1,110 @@
+<template>
+  <el-card class="box-card" 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 class="panThumb" :image="avatar"></pan-thumb>
+      <mallki className='mallki-text' text='vue-element-admin'></mallki>
+      <div class='progress-item'>
+        <span>Vue</span>
+        <el-progress :percentage="70"></el-progress>
+      </div>
+      <div class='progress-item'>
+        <span>JavaScript</span>
+        <el-progress :percentage="18"></el-progress>
+      </div>
+      <div class='progress-item'>
+        <span>Css</span>
+        <el-progress :percentage="12"></el-progress>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import PanThumb from '@/components/PanThumb'
+import Mallki from '@/components/TextHoverEffect/Mallki'
+
+export default {
+  components: { PanThumb, Mallki },
+
+  data() {
+    return {
+      statisticsData: {
+        article_count: 1024,
+        pageviews_count: 1024
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'name',
+      'avatar',
+      'roles'
+    ])
+  },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        success: 'success',
+        pending: 'danger'
+      }
+      return statusMap[status]
+    }
+  },
+  created() {
+
+  },
+  methods: {
+  }
+
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" >
+.box-card {
+  .el-card__header {
+    padding: 0px!important;
+  }
+}
+</style>
+<style rel="stylesheet/scss" lang="scss" scoped>
+.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: -10px;
+  right: 0px;
+  font-size: 20px;
+  font-weight: bold;
+}
+.panThumb {
+  z-index: 100;
+  height: 70px!important;
+  width: 70px!important;
+  position: absolute;
+  top: -45px;
+  left: 0px;
+  border: 5px solid #ffffff;
+  background-color: #fff;
+  margin: auto;
+  box-shadow: none!important;
+}
+.progress-item {
+  margin-bottom: 10px;
+  font-size: 14px;
+}
+</style>