From b9ce6cae9cbadf509048e32b34f24c6cc6a6d7d7 Mon Sep 17 00:00:00 2001
From: bob <312777916@qq.com>
Date: Wed, 30 Oct 2024 22:10:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0AddButton=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/AddButton.vue | 27 +++++++++++++++++++++++----
 src/views/message/MessageLayout.vue |  5 ++---
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/common/AddButton.vue b/src/components/common/AddButton.vue
index 388f181..6b0bd4b 100644
--- a/src/components/common/AddButton.vue
+++ b/src/components/common/AddButton.vue
@@ -1,13 +1,32 @@
 <script setup>
-import { CirclePlus } from '@element-plus/icons-vue'
+import { Plus } from '@element-plus/icons-vue'
+const props = defineProps(['size'])
 </script>
 
 <template>
-  <el-icon color="#79bbff" :size="30"><CirclePlus /></el-icon>
+  <div class="circle" :style="{ width: props.size + 'px', height: props.size + 'px' }">
+    <el-icon :size="18"><Plus /></el-icon>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-.el-icon {
-  margin-right: 10px;
+.circle {
+  border: solid 1px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  --hoverColor: gray;
+  color: var(--hoverColor);
+
+  &:hover {
+    --hoverColor: #409eff;
+    color: var(--hoverColor);
+  }
+
+  .el-icon {
+    color: var(--hoverColor);
+  }
 }
 </style>
diff --git a/src/views/message/MessageLayout.vue b/src/views/message/MessageLayout.vue
index b26793f..e176654 100644
--- a/src/views/message/MessageLayout.vue
+++ b/src/views/message/MessageLayout.vue
@@ -623,7 +623,7 @@ const onNoneSelected = () => {
       <div class="msg-aside-main">
         <div class="header">
           <SearchBox @showContactCard="onShowContactCard" @openSession="onOpenSession"></SearchBox>
-          <AddButton></AddButton>
+          <AddButton :size="30"></AddButton>
         </div>
 
         <SessionMenu :sessionId="showMenuSessionId" @selectMenu="onSelectMenu">
@@ -867,8 +867,7 @@ const onNoneSelected = () => {
       overflow: hidden; // 禁用它的滚动条
 
       .header {
-        margin-top: 10px;
-        margin-bottom: 10px;
+        padding: 10px 10px 10px 0;
         display: flex;
         align-items: center;
       }