dashbord 增加c3动画取消card展示

5 years ago · 59ecff35a2
3 changed files with 1166 additions and 16 deletions
--- a/QMPlusVuePage/src/style/animition.scss
+++ b/QMPlusVuePage/src/style/animition.scss
--- a/QMPlusVuePage/src/view/dashbord/component/animition.vue
+++ b/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>
--- a/QMPlusVuePage/src/view/dashbord/index.vue
+++ b/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,15 +20,21 @@
          <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>