调整展开动画

This commit is contained in:
aixianling
2024-06-05 16:10:13 +08:00
parent 426f081cbc
commit ec09a998f7

View File

@@ -21,8 +21,8 @@ export default {
<div class="copilot" v-if="show"> <div class="copilot" v-if="show">
<div class="flex header"> <div class="flex header">
<b class="fill" v-text="title"/> <b class="fill" v-text="title"/>
<div class="expandBtn" v-text="expandBtn" @click="expand=!expand"/> <div class="expandBtn pointer" v-text="expandBtn" @click="expand=!expand"/>
<div class="minimal" v-text="'最小化'" @click="show=false"/> <div class="minimal pointer" v-text="'最小化'" @click="show=false"/>
</div> </div>
<div class="flex content"> <div class="flex content">
<div class="left" :class="{expand}"></div> <div class="left" :class="{expand}"></div>
@@ -60,6 +60,7 @@ export default {
& > b { & > b {
font-size: 16px; font-size: 16px;
cursor: default;
} }
.expandBtn, .minimal { .expandBtn, .minimal {
@@ -81,19 +82,25 @@ export default {
} }
.content { .content {
height: max-content; height: calc(100% - 48px);
.left { .left {
width: 0; width: 0;
height: 100%;
transition: width 1s; transition: width 1s;
&.expand { &.expand {
width: 332px; width: 260px;
& + .right {
border-left: 1px solid #ddd;
}
} }
} }
.right { .right {
width: 348px; width: 420px;
height: 100%;
} }
} }
} }