<template>
<div class="main">
<div class="left_main" :class="{ left_main_show: !openStatus }"></div>
<div class="right_main">
<div class="open_close">
<i @click="change" v-if="open_close" class="el-icon-s-fold"></i>
<i @click="change" v-else class="el-icon-s-unfold"></i>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
openStatus: true,
open_close: true,
}
},
methods: {
change() {
this.openStatus = !this.openStatus
if (this.openStatus) {
setTimeout(() => {
this.open_close = true
}, 1000)
} else {
setTimeout(() => {
this.open_close = false
}, 1000)
}
},
},
}
</script>
<style lang="scss" scoped>
.main {
display: flex;
width: 100%;
height: 100vh;
.left_main {
margin: 0;
width: 300px;
text-align: center;
background-color: aquamarine;
transition: width 1s;
}
.right_main {
flex: 1;
background-color: brown;
position: relative;
.open_close {
position: absolute;
left: 0;
top: 0;
color: white;
font-size: 24px;
}
}
.left_main_show {
width: 0px;
}
}
</style>
