From f2011039bed0506540eb52960dbcf4e375898a60 Mon Sep 17 00:00:00 2001
From: mxr612 <academic@mxr612.io>
Date: Wed, 5 Mar 2025 04:08:00 +0000
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=86CSS=EF=BC=9A?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E9=80=89=E9=A1=B9=E5=B0=BA=E5=AF=B8=E5=92=8C?=
 =?UTF-8?q?=E5=9C=A8=E7=A7=BB=E5=8A=A8=E8=AE=BE=E5=A4=87=E4=B8=8A=E7=9A=84?=
 =?UTF-8?q?=E8=A1=A8=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/styles.css    | 61 +++++---------------------------------------
 templates/scale.html |  2 +-
 2 files changed, 8 insertions(+), 55 deletions(-)

diff --git a/static/styles.css b/static/styles.css
index 4c92bac..357397d 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -15,80 +15,33 @@ body {
     /* 设置背景颜色为纯白色 */
     background-color: #ffffff;
     color: #333;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 @media (max-width: 768px) {
     body {
-        width: 100%;
+        width: 95%;
         /* 全屏展示 */
         padding: 10px;
         /* 适当调整内边距 */
     }
 }
 
-/* 容器样式 */
-.container {
-    width: 40%;
-    max-width: 1200px;
-    margin: 0 auto;
-
-    /* 可选：添加一些内边距，让内容不紧贴容器边缘 */
-    padding: 20px;
-}
-
-/* 标题样式 */
-h1,
-h2,
-h3 {
-    color: #444;
-}
-
-/* 链接样式 */
-a {
-    color: #007BFF;
-    text-decoration: none;
-}
-
-a:hover {
-    text-decoration: underline;
-}
-
-/* 表单样式 */
-form {
-    background-color: #fff;
-    padding: 20px;
-    border-radius: 5px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-}
-
-/* 按钮样式 */
-button {
-    background-color: #007BFF;
-    color: #fff;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-button:hover {
-    background-color: #0056b3;
-}
-
 /* 定义单选按钮容器样式 */
-.radio-button-group {
+.scale-button {
     display: flex;
     gap: 10px;
     /* 按钮之间的间距 */
 }
 
 /* 定义单选按钮隐藏样式 */
-.radio-button-group input[type="radio"] {
+.scale-button input[type="radio"] {
     display: none;
 }
 
 /* 定义单选按钮标签样式 */
-.radio-button-group label {
+.scale-button label {
+    flex-grow: 1;
     padding: 10px 20px;
     border: 1px solid #ccc;
     border-radius: 5px;
@@ -96,7 +49,7 @@ button:hover {
 }
 
 /* 定义单选按钮选中时标签样式 */
-.radio-button-group input[type="radio"]:checked+label {
+.scale-button input[type="radio"]:checked+label {
     background-color: #007BFF;
     color: white;
 }
\ No newline at end of file
diff --git a/templates/scale.html b/templates/scale.html
index 7dddb45..522086e 100644
--- a/templates/scale.html
+++ b/templates/scale.html
@@ -14,7 +14,7 @@
     <form action="{{ url_for('result', scale_id=scale_id) }}" method="post">
         {% for question in scale.questions %}
         <label for="{{ question.id }}">{{ question.text }}</label>
-        <div class="radio-button-group">
+        <div class="scale-button">
             <!-- 将下拉菜单替换为单选按钮 -->
             {% for option in range(question.range[0], question.range[1]+1) %}
             <input type="radio" id="{{ question.id }}_{{ option }}" name="{{ question.id }}" value="{{ option }}" {% if