From d7b7a824d2a9697dbbdc1ab1e545405f8668ac19 Mon Sep 17 00:00:00 2001
From: jzy-chitong56 <48715223+jzy-chitong56@users.noreply.github.com>
Date: Wed, 25 Sep 2024 14:06:25 +0800
Subject: [PATCH] Update home.component.scss

---
 Electron/src/app/home/home.component.scss | 30 ++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/Electron/src/app/home/home.component.scss b/Electron/src/app/home/home.component.scss
index 82a622265..f04f28985 100644
--- a/Electron/src/app/home/home.component.scss
+++ b/Electron/src/app/home/home.component.scss
@@ -168,4 +168,32 @@
        transform: translateX(100%);
        margin-left: -1px;
     }
-}
\ No newline at end of file
+
+  .radio-group {
+    display: flex; /* 使按钮在同一行显示 */
+    align-items: center; /* 垂直居中 */
+    gap: 4px; /* 按钮间隔 */
+  }
+
+  .radio-btn {
+    display: inline-block;
+    padding: 4px 40px; /* 内边距，根据需要调整 */
+    border-radius: 12px; /* 圆角 */
+    background-color: #ccc; /* 未选中时背景色 */
+    cursor: pointer; /* 鼠标悬停时显示指针 */
+    position: relative; /* 用于后续可能需要的定位 */
+    transition: background-color 0.3s; /* 背景色变化过渡效果 */
+  }
+
+  /* 鼠标悬停样式 */
+  .radio-btn:hover {
+    color: #FFFFFF; /* 选中时文字颜色 */  
+    background-color: #75BDFF; /* 选中时背景色 */
+  }
+
+  input[type="radio"]:checked + .radio-btn {
+    background-color: #007bff; /* 选中时背景色 */
+    color: #FFFFFF; /* 选中时文字颜色 */
+  }
+
+}