diff --git a/css/index.css b/css/index.css index be35cb0..f2af1cb 100644 --- a/css/index.css +++ b/css/index.css @@ -77,124 +77,85 @@ } /* ============================================ - Header 登录注册按钮重新设计 + Header 右侧导航重新设计 ============================================ */ -/* nav-right 按钮容器布局 */ +/* nav-right 布局 */ #index .nav-right { display: flex; - align-items: center; - gap: 12px; + align-items: stretch; + height: 100%; } -/* 文档、控制台按钮优化 */ -#index .nav-right .control { +/* 纯文字链接样式 */ +#index .nav-right .nav-text-link { color: #CBD5E1; - padding: 8px 16px; font-size: 14px; - font-weight: 500; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - border-radius: 8px; - position: relative; - overflow: hidden; - border: 1px solid transparent; -} - -/* 控制台按钮背景动画 */ -#index .nav-right .control::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(56, 189, 248, 0.08); - transform: scaleX(0); - transform-origin: left; - transition: transform 0.3s ease; - z-index: -1; -} - -#index .nav-right .control:hover { - color: #38BDF8; - border-color: rgba(56, 189, 248, 0.2); - transform: translateY(-2px); -} - -#index .nav-right .control:hover::before { - transform: scaleX(1); -} - -/* 登录注册按钮容器 */ -#index .no-login { + font-weight: 400; + padding: 0 16px; display: flex; align-items: center; - gap: 8px; - margin-left: 8px; + transition: all 0.3s ease; + cursor: pointer; + text-decoration: none; } -/* 登录按钮 - 线框风格 */ -#index .nav-right .btn-normal-light, -#index .nav-right #loginBtn { - padding: 8px 20px; +#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: flex; + align-items: stretch; + height: 100%; + margin-left: 0; +} + +/* 注册文字链接 */ +#index .no-login .nav-text-link { + padding-right: 20px; +} + +/* 登录按钮包装器 - 与 header 等高 */ +#index .login-btn-wrapper { + display: flex; + align-items: stretch; + margin-left: 20px; + border-left: 1px solid rgba(148, 163, 184, 0.15); +} + +/* 登录按钮 - 与 header 等高 */ +#index .btn-login, +#index #loginBtn { + padding: 0 32px; font-size: 14px; font-weight: 500; - color: #E5E7EB; - background: transparent; - border: 1px solid rgba(148, 163, 184, 0.3); - border-radius: 8px; - cursor: pointer; - transition: all 0.3s ease; - position: relative; - overflow: hidden; -} - -#index .nav-right .btn-normal-light::before, -#index .nav-right #loginBtn::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - width: 0; - height: 0; - border-radius: 50%; - background: rgba(56, 189, 248, 0.15); - transform: translate(-50%, -50%); - transition: width 0.6s ease, height 0.6s ease; -} - -#index .nav-right .btn-normal-light:hover, -#index .nav-right #loginBtn:hover { - border-color: rgba(56, 189, 248, 0.6); - color: #38BDF8; - box-shadow: 0 0 20px rgba(56, 189, 248, 0.2); - transform: translateY(-2px); -} - -#index .nav-right .btn-normal-light:hover::before, -#index .nav-right #loginBtn:hover::before { - width: 300px; - height: 300px; -} - -/* 注册按钮 - 渐变填充风格 */ -#index .nav-right .btn-normal, -#index .nav-right #registBtn { - padding: 8px 20px; - font-size: 14px; - font-weight: 600; color: #ffffff; background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); - border: 1px solid transparent; - border-radius: 8px; + border: none; + border-radius: 0; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + min-width: 100px; } -#index .nav-right .btn-normal::before, -#index .nav-right #registBtn::before { +#index .btn-login::before, +#index #loginBtn::before { content: ''; position: absolute; top: 0; @@ -206,21 +167,19 @@ transition: opacity 0.3s ease; } -#index .nav-right .btn-normal:hover, -#index .nav-right #registBtn:hover { - box-shadow: - 0 6px 20px rgba(56, 189, 248, 0.4), - 0 0 30px rgba(56, 189, 248, 0.3); - transform: translateY(-2px); +#index .btn-login:hover, +#index #loginBtn:hover { + background: linear-gradient(135deg, #6366F1 0%, #38BDF8 100%); } -#index .nav-right .btn-normal:hover::before, -#index .nav-right #registBtn:hover::before { +#index .btn-login:hover::before, +#index #loginBtn:hover::before { opacity: 1; } -#index .nav-right .btn-normal span, -#index .nav-right #registBtn span { +/* 登录按钮文字在最上层 */ +#index .btn-login span, +#index #loginBtn span { position: relative; z-index: 1; } @@ -230,15 +189,15 @@ display: flex; align-items: center; gap: 8px; - padding: 6px 12px; - border-radius: 8px; + padding: 0 20px; cursor: pointer; transition: all 0.3s ease; position: relative; + border-left: 1px solid rgba(148, 163, 184, 0.15); } #index .login-in:hover { - background: rgba(56, 189, 248, 0.08); + background: rgba(56, 189, 248, 0.05); } #index .login-in .head-img { @@ -263,17 +222,16 @@ /* 响应式适配 */ @media (max-width: 768px) { - #index .nav-right .control { - padding: 6px 12px; + #index .nav-right .nav-text-link { + padding: 0 12px; font-size: 13px; } - #index .nav-right .btn-normal-light, - #index .nav-right #loginBtn, - #index .nav-right .btn-normal, - #index .nav-right #registBtn { - padding: 6px 16px; + #index .btn-login, + #index #loginBtn { + padding: 0 24px; font-size: 13px; + min-width: 80px; } } diff --git a/public/header.html b/public/header.html index fa3fd31..03f4532 100644 --- a/public/header.html +++ b/public/header.html @@ -1,4 +1,4 @@ -
+
{php} @@ -28,36 +28,33 @@ {/if}
-
- -
文档
- - - -
控制台
- - - -
-
- +
+ 文档 + | + 控制台 + | + + +
+
+
{if isset($data.header_nav) && !empty($data.header_nav)} @@ -90,29 +87,29 @@ {/if}
- - - - - - - -
-
- {if ( isset($data.side_floating_window) ) } - {foreach $data.side_floating_window as $key=>$value} -
- -
-
-
{$value.name}
- {$value.content|raw} -
-
-
- {/foreach} - {else /} -
+
+ +
+ + + + +
+
+ {if ( isset($data.side_floating_window) ) } + {foreach $data.side_floating_window as $key=>$value} +
+ +
+
+
{$value.name}
+ {$value.content|raw} +
+
+
+ {/foreach} + {else /} +
@@ -121,8 +118,8 @@

{$data.enterprise_telephone|default=''}

-
-
+
+
@@ -131,45 +128,45 @@
立即查询
 -
-
-
-
- -
-
-
提交工单
-

专业工程师快速响应

- -
立即提交
- -
-
-
-
- -
-
-
意见反馈
-

您的意见是我们不断前进的动力

- -
立即反馈
- -
-
-
-
- -
-
-
购物车
-

从这里开始，打造云端专属空间

- -
前往购物车
- -
-
-
- {/if} -
-
+
+ + +
+ +
+
+
提交工单
+

专业工程师快速响应

+ +
立即提交
+ +
+
+
+
+ +
+
+
意见反馈
+

您的意见是我们不断前进的动力

+ +
立即反馈
+ +
+
+
+
+ +
+
+
购物车
+

从这里开始，打造云端专属空间

+ +
前往购物车
+ +
+
+
+ {/if} + +