提交

app/home/view/public/newnav.html

@@ -33,13 +33,17 @@
             </div>
 
             <div class="nav-user-actions">
+                {if session('user.id')}
                 <a class="nav-user-link" href="{:url('user/index')}">
                     <i class="bi bi-person-circle"></i><span>个人中心</span>
                 </a>
-                {if session('user.id')}
+                <a class="nav-user-link nav-user-link--plain" href="{:url('login/logout')}">
-                <a class="nav-user-link" href="{:url('login/logout')}">
                     <i class="bi bi-box-arrow-right"></i><span>退出</span>
                 </a>
+                {else/}
+                <a class="nav-user-link" href="{:url('user/index')}">
+                    <i class="bi bi-person-circle"></i><span>登录</span>
+                </a>
                 {/if}
             </div>
 

public/static/css/newin.css

@@ -618,6 +618,56 @@ footer a:hover{ color:#fff; text-decoration:underline; }
     font-size: 18px;
     line-height: 1;
 }
+.topbar .nav-user-actions{
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+    flex: 0 0 auto;
+    margin-left: 12px;
+}
+.topbar .nav-user-link{
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 7px;
+    min-height: 38px;
+    padding: 7px 14px;
+    border: 1px solid rgba(255,255,255,.36);
+    border-radius: 12px;
+    background: rgba(255,255,255,.08);
+    color: #fff;
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
+}
+.topbar .nav-user-link:hover,
+.topbar .nav-user-link:focus{
+    background: rgba(255,255,255,.16);
+    border-color: rgba(255,255,255,.56);
+    color: #fff;
+    text-decoration: none;
+}
+.topbar .nav-user-link i{
+    font-size: 18px;
+    line-height: 1;
+}
+.topbar .nav-user-link--plain{
+    padding-left: 10px;
+    padding-right: 10px;
+    border-color: transparent;
+    background: transparent;
+    font-weight: 500;
+    color: rgba(255,255,255,.86);
+}
+.topbar .nav-user-link--plain:hover,
+.topbar .nav-user-link--plain:focus{
+    background: rgba(255,255,255,.08);
+    border-color: rgba(255,255,255,.18);
+}
 /* PC：#nav 在同一行靠右 */
 @media (min-width: 1200px){
     .topbar .topbar-inner{
@@ -700,6 +750,17 @@ footer a:hover{ color:#fff; text-decoration:underline; }
         width: 28px;
         height: 28px;
     }
+    .topbar .nav-user-actions{
+        width: 100%;
+        justify-content: center;
+        flex-wrap: wrap;
+        margin-left: 0;
+        padding-top: 8px;
+    }
+    .topbar .nav-user-link{
+        min-height: 36px;
+        padding: 8px 12px;
+    }
 }