112 lines
2.3 KiB
Vue
112 lines
2.3 KiB
Vue
<template>
|
|
<div :class="isOpen?'expend-open':'expend-close'">
|
|
<div class="switch-button-open" @click="handlerOpen" v-if="!isOpen">
|
|
<img src="/public/statistical/switch-button.png" alt="">
|
|
</div>
|
|
<div class="switch-button-close" @click="handlerOpen" v-if="isOpen">
|
|
<img src="/public/statistical/switch-button-active.png" alt="">
|
|
</div>
|
|
<LeftChartsContainer class="expend"></LeftChartsContainer>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import {ref} from 'vue'
|
|
import LeftChartsContainer from './left_charts_container.vue'
|
|
|
|
const isOpen = ref(false);
|
|
|
|
function handlerOpen(){
|
|
isOpen.value = !isOpen.value;
|
|
}
|
|
</script>
|
|
<style type="less" scoped>
|
|
|
|
|
|
|
|
.charts-main-container{
|
|
width:100vw;
|
|
height:100vh;
|
|
background:rgba(0,0,0,0.6);
|
|
position:absolute;
|
|
top:0px;
|
|
left: calc( 100vw - 580px);
|
|
z-index:1;
|
|
|
|
}
|
|
|
|
.switch-button-open{
|
|
width:50px;
|
|
height:100px;
|
|
position:absolute;
|
|
left:-36px;
|
|
top:50%;
|
|
transform:translate(0,-50%);
|
|
cursor:pointer;
|
|
z-index:999;
|
|
img{
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
}
|
|
|
|
.switch-button-close{
|
|
width:50px;
|
|
height:100px;
|
|
position:absolute;
|
|
left:0px;
|
|
top:50%;
|
|
z-index:999;
|
|
transform:translate(0,-50%);
|
|
cursor:pointer;
|
|
img{
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
}
|
|
|
|
.expend-open {
|
|
width:100vw;
|
|
height:100vh;
|
|
background:rgba(0,0,0,0.6);
|
|
position:absolute;
|
|
top:0px;
|
|
z-index:1;
|
|
animation: expend-open 1s;
|
|
}
|
|
|
|
.expend-close {
|
|
width:100vw;
|
|
height:100vh;
|
|
background:rgba(0,0,0,0.6);
|
|
position:absolute;
|
|
top:0px;
|
|
left:calc( 100vw - 580px);
|
|
z-index:1;
|
|
animation: expend-close 1s;
|
|
}
|
|
|
|
@keyframes expend-open {
|
|
from {
|
|
top: 0px;
|
|
left:calc( 100vw - 580px);
|
|
}
|
|
|
|
to {
|
|
top: 0px;
|
|
left:0;
|
|
}
|
|
}
|
|
|
|
@keyframes expend-close {
|
|
from {
|
|
top: 0px;
|
|
left:0;
|
|
}
|
|
|
|
to {
|
|
top: 0px;
|
|
left:calc( 100vw - 580px);
|
|
}
|
|
}
|
|
|
|
</style> |