顶栏

web/dbzq.css

@@ -4,11 +4,16 @@
     box-sizing: border-box;
 }
 
+html {
+    background: #ECEBF1;
+}
+
 body {
     width: 1600px;
     margin: 0 auto;
-    background: #FFFFFF;
-    font-family: "Microsoft YaHei", Arial, sans-serif;
+    background: #ECEBF1;
+    font-family: "Microsoft YaHei-Regular", Arial, sans-serif;
+    font-weight: Regular;
     color: #333;
 }
 
@@ -36,51 +41,60 @@ img {
     position: relative;
     width: 1600px;
     height: 43px;
-    background: #f5f5f5;
+    background: #F7F7F7;
     border-bottom: 1px solid #e5e5e5;
     font-size: 12px;
     color: #555;
+    margin-bottom: 10px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
 }
 
 .topbar .wrap {
+    position: relative;
+    width: 1600px;
     height: 100%;
-    display: flex;
-    align-items: center;
 }
 
-.topbar .welcome {
+/* 房子图标 */
+.topbar .welcome-icon {
     position: absolute;
     left: 203px;
     top: 50%;
     transform: translateY(-50%);
-    color: #333;
-    display: flex;
-    align-items: center;
-}
-
-.topbar .welcome img {
     width: 13px;
     height: 13px;
-    margin-right: 6px;
 }
 
-.topbar .welcome .arrow {
+/* 欢迎文字 */
+.topbar .welcome-text {
+    position: absolute;
+    left: 222px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #414141;
+    white-space: nowrap;
+}
+
+/* 欢迎右侧箭头 */
+.topbar .welcome-arrow {
+    position: absolute;
+    left: 380px;
+    top: 50%;
+    transform: translateY(-50%);
     width: 8px;
     height: 5px;
-    margin-left: 14px;
-    margin-right: 0;
 }
 
+/* 军网导航 */
 .topbar .nav {
     position: absolute;
     left: 416px;
     top: 50%;
     transform: translateY(-50%);
-    color: #333;
-    display: flex;
-    align-items: center;
+    color: #414141;
 }
 
+/* 军网导航箭头 */
 .topbar .nav-arrow {
     position: absolute;
     left: 474px;
@@ -90,21 +104,45 @@ img {
     height: 5px;
 }
 
+/* 搜索框 */
 .topbar .searchbox {
     position: absolute;
     left: 688px;
     top: 50%;
     transform: translateY(-50%);
     display: flex;
+    height: 33px;
+}
+
+.topbar .search-input-wrap {
+    position: relative;
+    width: 228px;
+    height: 33px;
 }
 
 .topbar .searchbox input {
-    height: 33px;
     width: 228px;
-    padding: 0 8px;
+    height: 33px;
+    padding: 0 8px 0 28px;
     border: 1px solid #ccc;
+    border-right: 0;
     font-size: 12px;
     outline: none;
+    color: #626468;
+}
+
+.topbar .searchbox input::placeholder {
+    color: #626468;
+}
+
+.topbar .search-icon {
+    position: absolute;
+    left: 9px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 13px;
+    height: 13px;
+    pointer-events: none;
 }
 
 .topbar .searchbox button {
@@ -116,63 +154,76 @@ img {
     background: #fff;
     cursor: pointer;
     font-size: 12px;
+    color: #626468;
 }
 
-.topbar .toplinks {
+/* 用户信息 */
+.user-info {
     position: absolute;
-    right: 20px;
+    left: 1046px;
     top: 50%;
     transform: translateY(-50%);
+    color: #414141;
+    font-size: 12px;
 }
 
-.topbar .toplinks a {
-    color: #555;
-    margin: 0 4px;
+/* 右侧链接组 - 每个链接独立绝对定位 */
+.topbar .toplinks-link {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    display: inline-flex;
+    align-items: center;
+    gap: 14px;
+    color: #414141;
 }
 
-.topbar .toplinks a:hover {
+.topbar .toplinks-link .top-icon {
+    width: 12px;
+    height: 12px;
+}
+
+.topbar .link-exit .top-icon {
+    width: 17px;
+    height: 18px;
+}
+
+.topbar .link-register .top-icon {
+    width: 16px;
+    height: 18px;
+}
+
+.topbar .link-disk .top-icon {
+    width: 16px;
+    height: 15px;
+}
+
+.topbar .link-exit {
+    left: 1164px;
+}
+
+.topbar .link-register {
+    left: 1246px;
+}
+
+.topbar .link-disk {
+    left: 1326px;
+}
+
+/* 最右侧箭头 */
+.topbar .links-arrow {
+    position: absolute;
+    left: 1388px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 8px;
+    height: 5px;
+}
+
+.topbar .toplinks-link:hover {
     color: #c00;
 }
 
-/* ========== 板块2：导航栏 53px ========== */
-.navbar {
-    width: 100%;
-    height: 53px;
-    background: #1a4a8a;
-}
-
-.navbar .wrap {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.navbar ul {
-    display: flex;
-    height: 100%;
-}
-
-.navbar ul li {
-    height: 100%;
-}
-
-.navbar ul li a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    padding: 0 32px;
-    color: #fff;
-    font-size: 16px;
-    font-weight: bold;
-}
-
-.navbar ul li a:hover,
-.navbar ul li a.active {
-    background: #0d3266;
-}
-
 /* ========== 板块3：网站头部切图 ========== */
 .header-banner {
     width: 100%;