dashbord 增加c3动画 取消card展示

QMPlusVuePage/src/view/dashbord/component/animition.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="container">
+    <ul class="moon">
+      <li class="crater"></li>
+      <li class="crater"></li>
+      <li class="crater"></li>
+    </ul>
+    <ul class="mountain-range">
+      <li class="mountain"></li>
+      <li class="mountain"></li>
+      <li class="mountain"></li>
+      <li class="mountain"></li>
+      <li class="mountain"></li>
+      <li class="mountain"></li>
+      <li class="mountain"></li>
+      <li class="mountain"></li>
+      <li class="mountain"></li>
+      <li class="mountain"></li>
+      <li class="mountain"></li>
+    </ul>
+    <div class="mountain-range-mask"></div>
+    <ul class="forest">
+      <li class="hill"></li>
+      <li class="hill"></li>
+      <li class="hill"></li>
+    </ul>
+    <ul class="sparkles">
+      <li class="sparkle one"></li>
+      <li class="sparkle one"></li>
+      <li class="sparkle one"></li>
+      <li class="sparkle one"></li>
+      <li class="sparkle two"></li>
+      <li class="sparkle two"></li>
+      <li class="sparkle two"></li>
+      <li class="sparkle two"></li>
+      <li class="sparkle three"></li>
+      <li class="sparkle three"></li>
+      <li class="sparkle three"></li>
+      <li class="sparkle three"></li>
+      <li class="sparkle four"></li>
+      <li class="sparkle four"></li>
+      <li class="sparkle four"></li>
+      <li class="sparkle four"></li>
+      <li class="sparkle five"></li>
+      <li class="sparkle five"></li>
+      <li class="sparkle five"></li>
+      <li class="sparkle five"></li>
+      <li class="sparkle six"></li>
+      <li class="sparkle six"></li>
+      <li class="sparkle six"></li>
+      <li class="sparkle six"></li>
+      <li class="sparkle seven"></li>
+      <li class="sparkle seven"></li>
+      <li class="sparkle seven"></li>
+      <li class="sparkle seven"></li>
+      <li class="sparkle eight"></li>
+      <li class="sparkle eight"></li>
+      <li class="sparkle eight"></li>
+      <li class="sparkle eight"></li>
+    </ul>
+    <div class="grass">
+      <div class="pokemon">
+        <div class="poke" id="bulbasaur">
+          <div class="ear"></div>
+          <div class="ear"></div>
+          <div class="head"></div>
+          <div class="leg"></div>
+          <div class="bulba-body"></div>
+          <div class="bulbs">
+            <div class="bulb"></div>
+          </div>
+        </div>
+        <div class="poke" id="pikachu">
+          <div class="ear"></div>
+          <div class="ear"></div>
+          <div class="hand"></div>
+          <div class="pika-body"></div>
+          <div class="head"></div>
+          <div class="pika-tail"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'Animition'
+}
+</script>
+<style lang="scss">
+  @import '@/style/animition.scss';
+
+</style>

QMPlusVuePage/src/view/dashbord/index.vue

@@ -1,5 +1,12 @@
 <template>
-  <el-card class="box-card" shadow="hover">
+  <div>
+    <h2 style="text-align:center">
+    gin-vue-admin by 奇淼 And Spike
+    </h2>
+    <h4 style="text-align:center">
+      微信：shouzi_1994
+    </h4>
+    <!-- <el-card class="box-card" shadow="hover">
       <div class="clearfix" slot="header">
         <span>用户信息</span>
       </div>
@@ -13,21 +20,27 @@
           <div>用户组：{{userInfo.authority&&userInfo.authority.authorityName}}</div>
         </div>
       </el-row>
-  </el-card>
+    </el-card> -->
+    <Animition />
+  </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import Animition from '@/view/dashbord/component/animition.vue'
 export default {
   name: 'Dashbord',
   computed: {
     ...mapGetters('user', ['userInfo'])
+  },
+  components: {
+    Animition
   }
 }
 </script>
 
 <style scoped>
-.box-card{
+.box-card {
   width: 600px;
 }
 </style>