<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-03-10 15:27:59
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2024-11-25 20:33:22
|
* @FilePath: \bigScreen\src\views\pd\index.vue
|
* @Description: 综合设计
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
<script setup>
|
import EventBus from 'utils/bus'
|
import dynamicPanel from './components/dynamicPanel.vue'
|
import { CaretLeft, CaretRight } from '@element-plus/icons-vue'
|
import { nextTick, onUnmounted } from 'vue'
|
|
const showPanel = ref(true)
|
|
const showPanelChange = () => {
|
showPanel.value = !showPanel.value
|
}
|
|
nextTick(() => {
|
EventBus.emit('restHandleCheckChange', `3-3-4`)
|
})
|
|
onUnmounted(() => {
|
EventBus.emit('restHandleDelChange', `3-3-4`)
|
})
|
</script>
|
|
<template>
|
<div class="container page-container">
|
<div class="telescopic-panel" @click="showPanelChange">
|
<el-icon v-show="showPanel">
|
<CaretLeft />
|
</el-icon>
|
<el-icon v-show="!showPanel">
|
<CaretRight />
|
</el-icon>
|
</div>
|
|
<dynamic-panel v-show="showPanel" @closePanel="showPanelChange"></dynamic-panel>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.container {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
|
.telescopic-panel {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: absolute;
|
top: 50%;
|
left: 0;
|
width: 20px;
|
height: 60px;
|
border-radius: 0 6px 6px 0;
|
box-shadow: inset 0 0 40px #409eff;
|
pointer-events: all;
|
color: #fff;
|
transform: translate(0, -50%);
|
cursor: pointer;
|
}
|
}
|
</style>
|
