xiaoguangbin/AnalysisSystemForRadionuclide_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化Station Operation左侧列表页，收起/展开放到右上角，collapse头部图标增加展开动画

Browse Source
This commit is contained in:
Xu Zhimeng 2023-06-26 15:59:03 +08:00
parent e94c0a2007
commit 33c7a82f84
1 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/views/stationOperation/index.vue
View File

@ -4,7 +4,7 @@
<div :class="'data-container' + (!leftPaneShow ? ' hide' : '')"> <div :class="'data-container' + (!leftPaneShow ? ' hide' : '')">
<a-collapse v-model="activeKey" expandIconPosition="right" accordion> <a-collapse v-model="activeKey" expandIconPosition="right" accordion>
<template slot="expandIcon"> <template slot="expandIcon">
<img src="@/assets/images/station-operation/toggle.png" alt="" @click.stop="leftPaneShow = false" /> <img src="@/assets/images/station-operation/toggle.png" alt="" />
</template> </template>
<!-- All Data --> <!-- All Data -->
<a-collapse-panel key="1"> <a-collapse-panel key="1">
@ -132,8 +132,9 @@
</a-collapse> </a-collapse>
<!-- 展开左侧配置栏按钮开始 --> <!-- 展开左侧配置栏按钮开始 -->
<div class="toggle-show-btn" v-if="!leftPaneShow"> <div class="toggle-show-btn" @click="leftPaneShow = !leftPaneShow">
<img src="@/assets/images/station-operation/toggle-2.png" @click="leftPaneShow = true" /> <a-icon v-if="leftPaneShow" type="menu-fold" />
<a-icon v-else type="menu-unfold" />
</div> </div>
<!-- 展开左侧配置栏按钮结束 --> <!-- 展开左侧配置栏按钮结束 -->
</div> </div>
@ -275,6 +276,7 @@ export default {
// 显示搜索栏 // 显示搜索栏
handleShowSearch() { handleShowSearch() {
this.activeKey = 1
if (this.filterVisible) { if (this.filterVisible) {
this.searchVisible = true this.searchVisible = true
this.filterVisible = false this.filterVisible = false
@ -289,6 +291,7 @@ export default {
// 显示筛选栏 // 显示筛选栏
handleShowFilter() { handleShowFilter() {
this.activeKey = 1
if (this.searchVisible) { if (this.searchVisible) {
this.searchVisible = false this.searchVisible = false
this.filterVisible = true this.filterVisible = true
@ -402,15 +405,22 @@ export default {
.toggle-show-btn { .toggle-show-btn {
position: absolute; position: absolute;
right: -20px; right: -40px;
top: 50%; top: 10px;
transform: translateY(-50%);
cursor: pointer; cursor: pointer;
font-size: 20px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #00E9FE;
background-color: #021a1d;
} }
::v-deep { ::v-deep {
.ant-collapse { .ant-collapse {
height: 100%; height: 100%;
padding-top: 10px;
padding-bottom: 11px; padding-bottom: 11px;
@titleHeight: 45px; @titleHeight: 45px;
@ -418,6 +428,12 @@ export default {
max-height: calc(100% - @titleHeight); max-height: calc(100% - @titleHeight);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&-active {
.ant-collapse-arrow {
transform: translateY(-50%) rotate(-90deg)
}
}
} }
&-header { &-header {
@ -426,11 +442,11 @@ export default {
border-bottom: 4px solid rgba(12, 235, 201, 0.2); border-bottom: 4px solid rgba(12, 235, 201, 0.2);
height: auto; height: auto;
background-color: rgba(1, 18, 20, 0.6); background-color: rgba(1, 18, 20, 0.6);
padding-right: 25px;
.ant-collapse-arrow { .ant-collapse-arrow {
right: 9px; right: 9px;
transition: transform 0.24s; transition: transform 0.24s;
transform-origin: 5px 11px;
} }
} }
@ -581,6 +597,7 @@ export default {
height: 50px; height: 50px;
background: linear-gradient(to top, #021c21 0, transparent 100%); background: linear-gradient(to top, #021c21 0, transparent 100%);
transition: opacity 0.24s linear; transition: opacity 0.24s linear;
pointer-events: none;
} }
&.scroll-end { &.scroll-end {
.shadow { .shadow {