dashbord 增加c3动画 取消card展示

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

+<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>
\ No newline at end of file

QMPlusVuePage/src/view/dashbord/index.vue

 <template>
-  <el-card class="box-card" shadow="hover">
-    <div class="clearfix" slot="header">
-      <span>用户信息</span>
-    </div>
-    <el-row>
-      <div class="fl-left left-mg-xs">
-        <el-avatar :size="120" :src="userInfo.headerImg" shape="square"></el-avatar>
+  <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>
-      <div class="fl-left left-mg-lg">
-        <div>用户ID：{{userInfo.uuid}}</div>
-        <div>用户昵称：{{userInfo.nickName}}</div>
-        <div>用户组：{{userInfo.authority&&userInfo.authority.authorityName}}</div>
-      </div>
-    </el-row>
-  </el-card>
+      <el-row>
+        <div class="fl-left left-mg-xs">
+          <el-avatar :size="120" :src="userInfo.headerImg" shape="square"></el-avatar>
+        </div>
+        <div class="fl-left left-mg-lg">
+          <div>用户ID：{{userInfo.uuid}}</div>
+          <div>用户昵称：{{userInfo.nickName}}</div>
+          <div>用户组：{{userInfo.authority&&userInfo.authority.authorityName}}</div>
+        </div>
+      </el-row>
+    </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{
-    width: 600px;
+.box-card {
+  width: 600px;
 }
 </style>
\ No newline at end of file