巡检计划调整

src/views/pms/inspect/plan/index.vue

@@ -5,17 +5,18 @@
         <DeptTree @node-click="handleDeptNodeClick" />
       </ContentWrap>
     </el-col>
-    <div
-      class="toggle-button"
-      :style="{ left: isLeftContentCollapsed ? '0px' : '16%' }"
-      @click="toggleLeftContent"
-      @mouseover="handleMouseOver"
-      @mouseout="handleMouseOut"
-      :title="hoverText"
-    >
-      <span style="font-size: 5px" :class="{'triangle': true, 'rotated': isLeftContentCollapsed}"></span>
-    </div>
-    <el-col class="rightcontent" :span="isLeftContentCollapsed ? 24 : 20" :xs="24">
+
+    <el-col class="rightcontent" :span="isLeftContentCollapsed ? 24 : 20" :xs="24" style="position: relative;height: 100vh;">
+        <div
+            class="toggle-button"
+            :style="{ left: isLeftContentCollapsed ? '0px' : '-13px' }"
+            @click="toggleLeftContent"
+            @mouseover="handleMouseOver"
+            @mouseout="handleMouseOut"
+            :title="hoverText"
+          >
+            <span style="font-size: 5px;" :class="{'triangle': true, 'rotated': isLeftContentCollapsed}"></span>
+        </div>
       <ContentWrap>
         <!-- 搜索工作栏 -->
         <el-form
@@ -165,6 +166,7 @@ import { DICT_TYPE } from "@/utils/dict";
 import DeptTree from "@/views/system/user/DeptTree.vue";
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+const message = useMessage() // 消息弹窗
 
 const { push } = useRouter();
 const { t } = useI18n();
@@ -285,29 +287,40 @@ onMounted(() => {
   overflow: hidden;
 }
 
+.rightcontent {
+  position: relative;
+}
+
 .toggle-button {
   position: absolute;
-  top:0;
-  bottom:0;
-  margin: auto;
-  transform: translateY(-50%);
-  width: 15px;
-  height: 18px;
-  background-color: #ccc;
+  top: 44%;
+  transform: translate(-65%,-50%);
+  width: 12px;
+  height: 40px;
+  background-color: #f0f0f0;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1;
+  clip-path: polygon(0 0, 100% 18%, 100% 85%, 0 100%);
+  border-radius: 8px;
 }
 
+/* 添加鼠标悬停样式 */
+.toggle-button:hover {
+  background-color: gray;
+}
+
+
 .triangle {
   width: 0;
   height: 0;
-  border-top: 6px solid transparent;
-  border-bottom: 6px solid transparent;
-  border-left: 5px solid #333;
-  transition: transform 0.3s ease;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  transition: transform 0.4s ease;
+  border-right: 5px solid gray; /* 修改为右边框显示颜色 */
+  border-left: none; /* 移除左边框 */
 }
 
 .triangle.rotated {