优化

src/views/lessor/equipment/equipType/index.vue

@@ -2,14 +2,10 @@
     <!-- 类型管理 -->
     <div class="app-container" id="toolsType">
         <el-row :gutter="10" class="main-content">
-            <el-col v-show="showTrees" :span="10">
+            <el-col :span="showTrees ? 10 : 0" class="left-tree">
-                <el-card>
+                <el-card v-show="showTrees">
                     <div slot="header" class="tree-card-header">
                         <span>类型选择</span>
-                        <el-button type="text" size="mini" @click="toggleTrees">
-                            <i :class="showTrees ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"></i>
-                            {{ showTrees ? '折叠左侧树' : '展开左侧树' }}
-                        </el-button>
                     </div>
                     <el-row :gutter="10">
                         <el-col :span="12">
@@ -84,13 +80,10 @@
                     </el-row>
                 </el-card>
             </el-col>
-            <el-col :span="tableSpan">
+            <el-col :span="tableSpan" class="table-content">
                 <el-card class="table-container">
                     <div slot="header" class="table-card-header">
                         <span>列表</span>
-                        <el-button v-if="!showTrees" type="text" size="mini" @click="toggleTrees">
-                            <i class="el-icon-d-arrow-right"></i> 展开左侧树
-                        </el-button>
                     </div>
                     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
                         <el-form-item label="关键字" prop="keyWord">
@@ -195,6 +188,12 @@
                         :limit.sync="queryParams.pageSize"
                     />
                 </el-card>
+
+                <div class="toggleButton1">
+                    <el-button type="text" @click="toggleTrees">
+                        <i :class="showTrees ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"></i>
+                    </el-button>
+                </div>
             </el-col>
         </el-row>
 
@@ -555,6 +554,18 @@ export default {
     overflow: auto;
 }
 
+.table-content {
+    position: relative;
+
+    .toggleButton1 {
+        position: absolute;
+        top: 50%;
+        left: -10px;
+        transform: translateY(-50%);
+        z-index: 999;
+    }
+}
+
 .tree-card-header {
     display: flex;
     justify-content: space-between;
@@ -571,4 +582,15 @@ export default {
     justify-content: space-between;
     align-items: center;
 }
+
+.left-tree {
+    position: relative;
+
+    .toggleButton {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+    }
+}
 </style>