初步完成登录、注册、修改账号、主页内容

Project/static/css/index.css

@@ -7,53 +7,124 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
+    overflow-x: hidden;  /* 防止出现水平滚动条 */
 }
 
 header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     background-color: rgba(28, 108, 178, 0.9);
     color: white;
-    padding: 20px 0;
-    text-align: center;
+    padding: 20px;
     width: 100%;
 }
 
-nav ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+.header-content {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
 }
 
-nav ul li {
-    display: inline;
-    margin: 0 10px;
+.logo {
+    font-size: 24px;
+    font-weight: bold;
+    margin-left: 20px;
 }
 
-nav ul li a {
+.nav-buttons {
+    display: flex;
+    gap: 20px;
+}
+
+.nav-buttons a {
     color: white;
     text-decoration: none;
-    font-weight: bold;
+    font-size: 16px;
+    padding: 10px;
+    border-radius: 5px;
 }
 
-main {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
+.nav-buttons a:hover {
+    background-color: #155a8c;
 }
 
-.background-container {
-    width: 100%;
-    max-width: 1500px;
-    height: 600px; /* Adjust according to the desired size */
-    background-image: url('/static/images/banner-login-20200629.jpg');
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.user-menu {
     position: relative;
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+}
+
+.user-menu span {
+    margin-right: 10px;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropbtn {
+    background-color: rgba(28, 108, 178, 0.9);
+    color: white;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    right: 0;  /* 确保下拉菜单靠右对齐 */
+}
+
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+.dropdown-content a:hover {
+    background-color: #f1f1f1;
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.slides {
+    position: relative;
+    width: 100%;
+    height: 400px;
+    overflow: hidden;
+}
+
+.slides ul {
+    display: flex;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    list-style: none;
+    margin: 0;
+    transition: transform 0.6s ease-in-out;
+}
+
+.slides li {
+    min-width: 100%;
+    box-sizing: border-box;
+}
+
+.slides img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
 
 .content {
@@ -61,28 +132,79 @@ main {
     padding: 20px;
     border-radius: 10px;
     text-align: center;
-    position: absolute;
+    width: 80%;
+    max-width: 800px;
+    margin: -50px auto 20px;
+    position: relative;
 }
 
-h2 {
-    color: #1c6cb2;
+.tabcontent {
+    display: block;
+    padding: 20px;
 }
 
-.links {
-    margin-top: 20px;
+.form-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 15px;
 }
 
-.links .btn {
+.form-row label {
+    flex: 1;
+    margin-right: 10px;
+    text-align: right;
+    line-height: 32px;
+}
+
+.form-row input,
+.form-row select {
+    flex: 2;
+    padding: 8px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.passenger-input {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.passenger-input button {
+    padding: 5px 10px;
+    font-size: 18px;
     background-color: #1c6cb2;
     color: white;
-    padding: 10px 20px;
-    text-decoration: none;
+    border: none;
     border-radius: 5px;
-    margin: 10px;
-    display: inline-block;
+    cursor: pointer;
 }
 
-.links .btn:hover {
+.passenger-input button:hover {
+    background-color: #155a8c;
+}
+
+.passenger-input input {
+    width: 50px;
+    text-align: center;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.btn {
+    padding: 10px 20px;
+    background-color: #1c6cb2;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    text-decoration: none;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.btn:hover {
     background-color: #155a8c;
 }
 
@@ -92,4 +214,12 @@ footer {
     text-align: center;
     padding: 10px 0;
     width: 100%;
+    margin-top: auto;
+}
+
+.error-message {
+    color: red;
+    font-size: 12px;
+    text-align: left;
+    margin-top: 5px;
 }