From a62d2ecbfba6f4e69648de071b48e29834f4a069 Mon Sep 17 00:00:00 2001
From: Gzx1999 <guozhengxin@kylinos.cn>
Date: Tue, 28 Nov 2023 16:04:10 +0800
Subject: [PATCH] beautify transfer layout

---
 frontend/src/views/Cluster/CreateBatch.vue | 31 +++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/Cluster/CreateBatch.vue b/frontend/src/views/Cluster/CreateBatch.vue
index b69b995..b676ec5 100644
--- a/frontend/src/views/Cluster/CreateBatch.vue
+++ b/frontend/src/views/Cluster/CreateBatch.vue
@@ -16,9 +16,13 @@
                     <el-input class="ipInput" type="text" autocomplete="off"></el-input>
                 </el-form-item>
             </el-form>
-            <el-transfer filterable filter-placeholder="请输入关键字" :titles="['备选项', '已选项']" style="width:100%">
-                <el-button class="transfer-footer" slot="left-footer" type="primary" plain size="small">重置</el-button>
-                <el-button class="transfer-footer" slot="right-footer" type="primary" plain size="small">创建</el-button>
+            <el-transfer class="transfer" filterable filter-placeholder="请输入关键字" :titles="['备选项', '已选项']">
+                <template #left-footer>
+                    <el-button class="" type="primary">重置</el-button>
+                </template>
+                <template #right-footer>
+                    <el-button type="primary">创建</el-button>
+                </template>
             </el-transfer>
         </div>
     </div>
@@ -49,6 +53,27 @@ onMounted(() => {
     .creater {
         width: 80%;
         height: 100%;
+
+        .transfer {
+            width: 100%;
+            height: 80%;
+            display: flex;
+            align-items: center;
+            justify-content: space-evenly;
+
+            :deep(.el-transfer-panel) {
+                width: 40%;
+                height: 100%;
+
+                .el-transfer-panel__body {
+                    height: 80%;
+                }
+
+                .el-transfer-panel__footer {
+                    text-align: center;
+                }
+            }
+        }
     }
 }
 </style>
-- 
Gitee