Merge branch 'main' of http://139.196.74.78:10010/r/zhyq/bigScreen

linwe

2024-11-15 f55ea1cfc0b5f60b01552e8b96f95e8a33c45bb8

 src/views/pd/index.vue

@@ -2,29 +2,59 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-10 15:27:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-03-13 16:02:07
 * @FilePath: \forest-fire\src\views\statistics\index.vue
 * @LastEditTime: 2024-11-12 20:02:05
 * @FilePath: \bigScreen\src\views\pd\index.vue
 * @Description: 综合设计
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup>
import leftContainer from './components/leftContainer.vue'
import rightContainer from './components/rightContainer.vue'
import dynamicPanel from './components/dynamicPanel.vue'
import { CaretLeft, CaretRight } from '@element-plus/icons-vue'

const showPanel = ref(true)

const showPanelChange = () => {
  showPanel.value = !showPanel.value
}
</script>

<template>
    <div class="container page-container">
        <left-container></left-container>

        <!-- <right-container></right-container> -->
  <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;
    width: 100%;
    height: 100%;
    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>