From 7b79e7baa1376546761494f5530bcc911570851d Mon Sep 17 00:00:00 2001
From: Gzx1999 <guozhengxin@kylinos.cn>
Date: Wed, 29 Nov 2023 19:40:34 +0800
Subject: [PATCH] update user info page layout

---
 .../src/views/Cluster/MachineDetail/Index.vue | 24 +++++++++-
 .../src/views/Cluster/MachineDetail/User.vue  | 45 ++++++++++++++++++-
 frontend/src/views/Home/Home.vue              |  2 +-
 3 files changed, 67 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/Cluster/MachineDetail/Index.vue b/frontend/src/views/Cluster/MachineDetail/Index.vue
index 0962125..cf3bc66 100644
--- a/frontend/src/views/Cluster/MachineDetail/Index.vue
+++ b/frontend/src/views/Cluster/MachineDetail/Index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="content">
-        <el-tabs v-model="activePane">
+        <el-tabs class="tab" v-model="activePane">
             <el-tab-pane name="base" label="机器信息">
                 <Base />
             </el-tab-pane>
@@ -42,4 +42,24 @@ const activePane = ref("base")
 
 </script>
 
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.content {
+    width: 100%;
+    height: 100%;
+
+    .tab {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        :deep(.el-tabs__content) {
+            flex: 1;
+
+            .el-tab-pane {
+                height: 100%;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/Cluster/MachineDetail/User.vue b/frontend/src/views/Cluster/MachineDetail/User.vue
index b96e178..cfdf3f8 100644
--- a/frontend/src/views/Cluster/MachineDetail/User.vue
+++ b/frontend/src/views/Cluster/MachineDetail/User.vue
@@ -29,4 +29,47 @@ import { ref } from "vue";
 const userName = ref("")
 
 </script>
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .users {
+      width: 100%;
+      height: 20%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .current {
+        width: 20%;
+        height: 100%;
+        font-weight: bold;
+        color: rgb(92, 85, 85);
+        border: 1px solid rgb(236, 235, 255);
+        background: rgb(236, 235, 255);
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+        svg {
+          width: 36%;
+          height: 100%;
+        }
+      }
+      .search {
+        width: 70%;
+      }
+    }
+    .info {
+      width: 100%;
+      height: 80%;
+      display: flex;
+      flex-direction: column;
+      .title {
+        width: 30%;
+        margin: 2% 0;
+      }
+    }
+ }
+ </style>
\ No newline at end of file
diff --git a/frontend/src/views/Home/Home.vue b/frontend/src/views/Home/Home.vue
index fed29af..34ff2f3 100644
--- a/frontend/src/views/Home/Home.vue
+++ b/frontend/src/views/Home/Home.vue
@@ -116,7 +116,7 @@ function doLogout() {
 </script>
 
 
-<style lang="scss">
+<style lang="scss" scoped>
 .el-popover.el-popper {
     min-width: 100px;
     width: auto !important;
-- 
Gitee