root
/
yibu
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

dashbord 增加c3动画 取消card展示

main
pixel 5 years ago
parent
af86785854
commit
59ecff35a2
3 changed files with 1166 additions and 16 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1044
      QMPlusVuePage/src/style/animition.scss
  2. 93
      QMPlusVuePage/src/view/dashbord/component/animition.vue
  3. 45
      QMPlusVuePage/src/view/dashbord/index.vue

1044
QMPlusVuePage/src/style/animition.scss
File diff suppressed because it is too large
View File

93
QMPlusVuePage/src/view/dashbord/component/animition.vue
View File

@ -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>

45
QMPlusVuePage/src/view/dashbord/index.vue
View File

@ -1,33 +1,46 @@
<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>
Write Preview
Loading…
Cancel
Save