From ad4471c35df47a66a2dccc69655adc539136e6fd Mon Sep 17 00:00:00 2001
From: jdysya <1912377458@qq.com>
Date: Sat, 15 Feb 2025 16:58:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(gateway):=20=E9=87=8D=E6=9E=84=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E6=B3=A8=E5=86=8C=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加了全局变量和基本样式，提升了页面的视觉效果
- 优化了表单元素的样式，使其更加统一和美观
- 增加了响应式设计，提高了移动端的用户体验
- 改进了选择框的样式，使其更加现代化和易用
- 添加了错误提示样式，提高了表单验证的用户体验
- 优化了按钮样式，增加了悬停效果
---
 gateway/templates/register.html | 149 +++++++++++++++++++++++++++++++-
 1 file changed, 145 insertions(+), 4 deletions(-)

diff --git a/gateway/templates/register.html b/gateway/templates/register.html
index 29d7770..58812d4 100644
--- a/gateway/templates/register.html
+++ b/gateway/templates/register.html
@@ -5,6 +5,104 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>用户注册 - 余氏族谱</title>
     <style>
+        :root {
+            --primary-color: #2c3e50;
+            --accent-color: #42b983;
+            --error-color: #e74c3c;
+        }
+
+        body {
+            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+            background: #f5f5f5;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 2rem;
+            margin: 0;
+        }
+
+        .login-container {
+            background: white;
+            padding: 2.5rem;
+            border-radius: 12px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            width: 100%;
+            max-width: 500px;
+            margin-top: 4rem;
+        }
+
+        h1 {
+            color: var(--primary-color);
+            text-align: center;
+            margin-bottom: 2rem;
+            font-size: 1.8rem;
+        }
+
+        .form-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+
+        label {
+            color: var(--primary-color);
+            font-weight: 500;
+        }
+
+        input, .form-select {
+            padding: 0.8rem;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 1rem;
+            transition: border-color 0.3s ease;
+        }
+
+        input:focus, .form-select:focus {
+            outline: none;
+            border-color: var(--accent-color);
+            box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2);
+        }
+
+        /* 新增响应式设计 */
+        @media (max-width: 480px) {
+            body {
+                padding: 1rem;
+            }
+            .login-container {
+                padding: 1.5rem;
+                margin-top: 2rem;
+            }
+            .form-group-row {
+                grid-template-columns: 1fr; /* 移动端单列布局 */
+            }
+        }
+
+        /* 统一表单元素样式 */
+        .form-select {
+            padding: 0.8rem;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 1rem;
+            transition: border-color 0.3s ease;
+            background: white url("data:image/svg+xml,%3csvg...") no-repeat right 0.75rem center/8px 10px;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+        }
+
+        /* 统一错误提示样式 */
+        .error-message {
+            background: #fee;
+            color: var(--error-color);
+            padding: 1rem;
+            border-radius: 6px;
+            border: 1px solid #ffd6d6;
+            margin-top: 1rem;
+            text-align: center;
+        }
+
         /* 复用登录页样式，新增部分样式 */
         .login-container {
             max-width: 500px;
@@ -22,20 +120,63 @@
             color: var(--accent-color);
             text-decoration: none;
         }
-        .form-select {
+
+        /* 美化按钮样式 */
+        button {
+            background: var(--accent-color);
+            color: white;
+            padding: 0.8rem;
+            border: none;
+            border-radius: 6px;
+            font-size: 1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background 0.3s ease;
+            width: 100%;
+            margin-top: 1rem;
+        }
+
+        button:hover {
+            background: #3aa876;
+        }
+
+        /* 美化选择框样式 */
+        select {
+            width: 100%;
             padding: 0.8rem;
             border: 1px solid #ddd;
             border-radius: 6px;
             font-size: 1rem;
-            background: white url("data:image/svg+xml,%3csvg...") no-repeat right 0.75rem center/8px 10px;
+            color: var(--primary-color);
+            background: white;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%232c3e50' d='M6 8.825L1.175 4 2.238 2.938 6 6.7l3.763-3.763L10.825 4z'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 0.8rem center;
             -webkit-appearance: none;
             -moz-appearance: none;
             appearance: none;
+            cursor: pointer;
         }
-        .form-select:focus {
+
+        select:focus {
+            outline: none;
             border-color: var(--accent-color);
             box-shadow: 0 0 0 2px rgba(66, 185, 131, 0.2);
         }
+
+        select:hover {
+            border-color: var(--accent-color);
+        }
+
+        /* 修改选择框的placeholder颜色 */
+        select option:first-child {
+            color: #999;
+        }
+
+        /* 移除之前重复的样式 */
+        .form-select {
+            display: none;
+        }
     </style>
 </head>
 <body>
@@ -65,7 +206,7 @@
 
             <div class="form-group">
                 <label for="region">所在地区</label>
-                <select name="region" class="form-control">
+                <select name="region" id="region" required>
                     <option value="">请选择所在地区</option>
                     {{ range .regions }}
                     <option value="{{ .ID }}" {{ if eq .ID $.form.region }}selected{{ end }}>{{ .Name }}</option>