|
@@ -1,5 +1,13 @@
|
|
<template>
|
|
<template>
|
|
- <div class="drawer-statistics" />
|
|
|
|
|
|
+ <div class="drawer-statistics">
|
|
|
|
+ <transition name="fade-drawer">
|
|
|
|
+ <div v-show="show" class="statistics" />
|
|
|
|
+ </transition>
|
|
|
|
+ <div class="drawer" @click="show = !show">
|
|
|
|
+ <i v-show="show" class="el-icon-arrow-up" />
|
|
|
|
+ <i v-show="!show" class="el-icon-arrow-down" />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
@@ -19,7 +27,12 @@ export default {
|
|
type: {
|
|
type: {
|
|
type: String,
|
|
type: String,
|
|
default: 'require',
|
|
default: 'require',
|
|
- required: true
|
|
|
|
|
|
+ required: false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ show: true
|
|
}
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
@@ -40,7 +53,46 @@ export default {
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
.drawer-statistics {
|
|
.drawer-statistics {
|
|
|
|
+ position: relative;
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding-bottom: 14px;
|
|
|
|
+}
|
|
|
|
+.fade-drawer, .fade-drawer-leave {
|
|
|
|
+ opacity: 0
|
|
|
|
+}
|
|
|
|
+.fade-drawer-enter-active {
|
|
|
|
+ transition: all 1.5s ease
|
|
|
|
+}
|
|
|
|
+.fade-drawer-leave-active {
|
|
|
|
+ transition: all 1.5s ease
|
|
|
|
+}
|
|
|
|
+.statistics {
|
|
|
|
+ position: relative;
|
|
|
|
+ width: 100%;
|
|
height: 474px;
|
|
height: 474px;
|
|
|
|
+}
|
|
|
|
+.drawer-statistics:after {
|
|
|
|
+ content: '';
|
|
width: 100%;
|
|
width: 100%;
|
|
|
|
+ height: 14px;
|
|
|
|
+ background-color: #F2F3F6;
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+}
|
|
|
|
+.drawer {
|
|
|
|
+ width: 26px;
|
|
|
|
+ height: 13px;
|
|
|
|
+ left: 50%;
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 1px;
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
+ z-index: 98;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ color: #666666;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ background-color: #ffffff;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|