更新界addrecord面样式

add_record.php

@@ -34,35 +34,35 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
         <h1>新增还款记录</h1>
         <form method="POST">
             <label>
-                <span>姓名:</span>
-                <input type="text" name="debtorName" required>
+                <span>姓名：</span>
+                <input type="text" name="debtorName" required placeholder="请输入姓名">
             </label>
             
             <label>
-                <span>还款日期:</span>
+                <span>还款日期：</span>
                 <input type="date" name="repaymentDate" required>
             </label>
             
             <label>
-                <span>还款方式:</span>
-                <input type="text" name="repaymentMethod" value="微信">
+                <span>还款方式：</span>
+                <input type="text" name="repaymentMethod" value="微信" placeholder="请输入还款方式">
             </label>
             
             <label>
-                <span>还款金额:</span>
-                <input type="number" step="0.01" name="repaymentAmount" required>
+                <span>还款金额：</span>
+                <input type="number" step="0.01" name="repaymentAmount" required placeholder="请输入金额">
             </label>
             
             <label>
-                <span>备注:</span>
-                <input type="text" name="comments">
+                <span>备注：</span>
+                <input type="text" name="comments" placeholder="可选">
             </label>
             
-            <button type="submit">完成</button>
+            <div class="form-buttons">
+                <button type="submit">完成</button>
+                <a href="index.php" class="button">返回主页</a>
+            </div>
         </form>
-        <div style="text-align: center; margin-top: 20px;">
-            <a href="index.php" class="button" style="text-decoration: none;">返回主页</a>
-        </div>
     </div>
 </body>
 </html> 

css/styles.css

@@ -165,23 +165,31 @@ button[onclick="searchDebt()"]:hover {
 
 /* 新增记录表单样式 */
 form {
-    max-width: 500px;
+    max-width: 600px;
     margin: 0 auto;
+    padding: 20px;
 }
 
 form label {
     display: block;
-    margin-bottom: 20px;
+    margin-bottom: 25px;
+}
+
+form label span {
+    display: block;
+    margin-bottom: 8px;
     color: #2c3e50;
+    font-weight: 500;
+    font-size: 16px;
 }
 
 form input {
     width: 100%;
-    padding: 10px;
+    padding: 12px 15px;
     border: 2px solid #e0e0e0;
     border-radius: 8px;
-    margin-top: 5px;
-    font-size: 16px;
+    font-size: 15px;
+    transition: all 0.3s ease;
 }
 
 form input:focus {
@@ -215,4 +223,33 @@ a.button {
 
 a.button:hover {
     background-color: #7f8c8d;
+}
+
+/* 针对不同类型输入框的特殊样式 */
+input[type="date"] {
+    font-family: inherit;
+    color: #2c3e50;
+}
+
+input[type="number"] {
+    text-align: right;
+    padding-right: 25px;
+}
+
+input[name="repaymentMethod"] {
+    color: #666;
+}
+
+/* 提交按钮容器 */
+.form-buttons {
+    margin-top: 30px;
+    display: flex;
+    gap: 15px;
+    justify-content: flex-start;
+}
+
+.form-buttons button,
+.form-buttons a.button {
+    min-width: 120px;
+    padding: 12px 25px;
 }