更新AddButton组件的样式

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>