This commit is contained in:
123
css/index.css
123
css/index.css
@@ -76,129 +76,6 @@
|
||||
color: #38BDF8;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Header 右侧导航重新设计
|
||||
============================================ */
|
||||
|
||||
/* nav-header 确保高度 */
|
||||
#index .nav-header {
|
||||
max-width: var(--container-max-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--container-padding-x);
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
#index .nav-header .nav-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* nav-right 布局 */
|
||||
#index .nav-right {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 纯文字链接样式 */
|
||||
#index .nav-right .nav-text-link {
|
||||
color: #CBD5E1;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#index .nav-right .nav-text-link:hover {
|
||||
color: #38BDF8;
|
||||
}
|
||||
|
||||
/* 分隔符样式 */
|
||||
#index .nav-right .nav-divider {
|
||||
color: rgba(148, 163, 184, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* 登录注册容器 - 与其他导航项平级 */
|
||||
#index .no-login {
|
||||
display: contents; /* 让子元素直接参与父级 flex 布局 */
|
||||
}
|
||||
|
||||
/* 登录和注册文字链接 */
|
||||
#index .no-login .nav-text-link {
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #CBD5E1;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#index .no-login .nav-text-link:hover {
|
||||
color: #38BDF8;
|
||||
}
|
||||
|
||||
/* 已登录状态样式 */
|
||||
#index .login-in {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
border-left: 1px solid rgba(148, 163, 184, 0.15);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#index .login-in:hover {
|
||||
background: rgba(56, 189, 248, 0.05);
|
||||
}
|
||||
|
||||
#index .login-in .head-img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%);
|
||||
border: 2px solid rgba(148, 163, 184, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#index .login-in:hover .head-img {
|
||||
border-color: rgba(56, 189, 248, 0.6);
|
||||
box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
|
||||
}
|
||||
|
||||
#index .login-in .name {
|
||||
color: #E5E7EB;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 768px) {
|
||||
#index .nav-header {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
#index .nav-right .nav-text-link {
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 首页下拉菜单优化 - 确保高层级 */
|
||||
#index .nav-cont {
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
|
||||
@@ -29,14 +29,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<a href="/document.html" class="nav-text-link">文档</a>
|
||||
<span class="nav-divider">|</span>
|
||||
<a href="/home.htm" class="nav-text-link">控制台</a>
|
||||
<span class="nav-divider">|</span>
|
||||
<a href="/document.html">
|
||||
<div class="control">文档</div>
|
||||
</a>
|
||||
<a href="/home.htm">
|
||||
<div class="control">控制台</div>
|
||||
</a>
|
||||
<div class="no-login" style="display: none;">
|
||||
<span class="nav-text-link" id="loginBtn">登录</span>
|
||||
<span class="nav-divider">|</span>
|
||||
<span class="nav-text-link" id="registBtn">注册</span>
|
||||
<div class="btn btn-normal-light mr-10" id="loginBtn">登录</div>
|
||||
<div class="btn btn-normal" id="registBtn">立即注册</div>
|
||||
</div>
|
||||
<div class="login-in " style="display: none;">
|
||||
<div id="headImg" class="head-img"></div>
|
||||
|
||||
Reference in New Issue
Block a user