yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

的撒法
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
yiqiu
2025-11-23 23:47:15 +08:00
parent c4744cb73c
commit e5c9c18b6b
2 changed files with 169 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
css/index.css
View File

@@ -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;
}
}

193
public/header.html
View File

@@ -1,4 +1,4 @@
<div class="nav-shadow">
<div class="nav-shadow">
<div class="section-content nav-header">
<div class="nav-left">
{php}
@@ -28,36 +28,33 @@
{/if}
</div>
</div>
<div class="nav-right">
<a href="/document.html">
<div class="control">文档</div>
</a>
<!-- <a href="">
<div class="control">备案</div>
</a> -->
<a href="/home.htm">
<div class="control">控制台</div>
</a>
<div class="no-login" style="display: none;">
<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>
<span class="ml-10 font-el1 name" id="username"></span>
<div class="login-menu animated fadeIn">
<div class="login-menu-item" id="accountBtn">账户信息
<span class="no-real-name real-name" id="noCertification">未实名</span>
<span class="real-name " id="isCertification" style="display: none;">已实名</span>
</div>
<div class="login-menu-item" id="financeBtn">未付款订单</div>
<div class="login-menu-item" id="ticketBtn">我的工单</div>
<div class="login-menu-item" id="logout">退出账户</div>
</div>
</div>
</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>
<div class="no-login" style="display: none;">
<span class="nav-text-link" id="registBtn">注册</span>
<div class="login-btn-wrapper">
<div class="btn btn-login" id="loginBtn">登录</div>
</div>
</div>
<div class="login-in " style="display: none;">
<div id="headImg" class="head-img"></div>
<span class="ml-10 font-el1 name" id="username"></span>
<div class="login-menu animated fadeIn">
<div class="login-menu-item" id="accountBtn">账户信息
<span class="no-real-name real-name" id="noCertification">未实名</span>
<span class="real-name " id="isCertification" style="display: none;">已实名</span>
</div>
<div class="login-menu-item" id="financeBtn">未付款订单</div>
<div class="login-menu-item" id="ticketBtn">我的工单</div>
<div class="login-menu-item" id="logout">退出账户</div>
</div>
</div>
</div>
</div>
<div class="nav-cont">
<div class="section-content">
{if isset($data.header_nav) && !empty($data.header_nav)}
@@ -90,29 +87,29 @@
{/if}
</div>
</div>
</div>
</div>
<!-- 侧边 -->
<div class="aside-tools">
<div class="tools-list">
{if ( isset($data.side_floating_window) ) }
{foreach $data.side_floating_window as $key=>$value}
<div class="tools-item">
<img src="{$value.icon}" alt="">
<div class="tools-box">
<div class="tools-box-s">
<h5>{$value.name}</h5>
{$value.content|raw}
</div>
</div>
</div>
{/foreach}
{else /}
<div class="tools-item">
</div>
</div>
<!-- 侧边 -->
<div class="aside-tools">
<div class="tools-list">
{if ( isset($data.side_floating_window) ) }
{foreach $data.side_floating_window as $key=>$value}
<div class="tools-item">
<img src="{$value.icon}" alt="">
<div class="tools-box">
<div class="tools-box-s">
<h5>{$value.name}</h5>
{$value.content|raw}
</div>
</div>
</div>
{/foreach}
{else /}
<div class="tools-item">
<img src="/web/BlackFruit-web/assets/img/index/phone.png" alt="">
<div class="tools-box">
<div class="tools-box-s">
@@ -121,8 +118,8 @@
<p class="com-contact-tel">{$data.enterprise_telephone|default=''}</p>
</div>
</div>
</div>
<div class="tools-item">
</div>
<div class="tools-item">
<img src="/web/BlackFruit-web/assets/img/index/listen.png" alt="">
<div class="tools-box">
<div class="tools-box-s">
@@ -131,45 +128,45 @@
<a href="{$data.online_customer_service_link|default='javascript:;'}" class="line-server-btn" target="_blank">
<div class="button">立即查询</div>
</a>
</div>
</div>
</div>
<div class="tools-item">
<img src="/web/BlackFruit-web/assets/img/index/worl-order.png" alt="">
<div class="tools-box">
<div class="tools-box-s">
<h5>提交工单</h5>
<p>专业工程师快速响应</p>
<a href="/plugin/27/ticket.htm">
<div class="button">立即提交</div>
</a>
</div>
</div>
</div>
<div class="tools-item">
<img src="/web/BlackFruit-web/assets/img/index/message.png" alt="">
<div class="tools-box">
<div class="tools-box-s">
<h5>意见反馈</h5>
<p>您的意见是我们不断前进的动力</p>
<a href="/feedback.html">
<div class="button">立即反馈</div>
</a>
</div>
</div>
</div>
<div class="tools-item">
<img src="/web/BlackFruit-web/assets/img/index/cart.png" alt="">
<div class="tools-box">
<div class="tools-box-s">
<h5>购物车</h5>
<p>从这里开始，打造云端专属空间</p>
<a href="/cart/shoppingCar.htm">
<div class="button">前往购物车</div>
</a>
</div>
</div>
</div>
{/if}
</div>
</div>
</div>
</div>
</div>
<div class="tools-item">
<img src="/web/BlackFruit-web/assets/img/index/worl-order.png" alt="">
<div class="tools-box">
<div class="tools-box-s">
<h5>提交工单</h5>
<p>专业工程师快速响应</p>
<a href="/plugin/27/ticket.htm">
<div class="button">立即提交</div>
</a>
</div>
</div>
</div>
<div class="tools-item">
<img src="/web/BlackFruit-web/assets/img/index/message.png" alt="">
<div class="tools-box">
<div class="tools-box-s">
<h5>意见反馈</h5>
<p>您的意见是我们不断前进的动力</p>
<a href="/feedback.html">
<div class="button">立即反馈</div>
</a>
</div>
</div>
</div>
<div class="tools-item">
<img src="/web/BlackFruit-web/assets/img/index/cart.png" alt="">
<div class="tools-box">
<div class="tools-box-s">
<h5>购物车</h5>
<p>从这里开始，打造云端专属空间</p>
<a href="/cart/shoppingCar.htm">
<div class="button">前往购物车</div>
</a>
</div>
</div>
</div>
{/if}
</div>
</div>