c4dd22ac10
All checks were successful
continuous-integration/drone/push Build is passing
新增文件: - css/float-widget.css: 浮窗按钮/弹出面板/QQ列表/二维码样式 - js/float-widget.js: 4 种模块渲染 + 回到顶部 + 后台数据接口 修改文件: - header.html: 引入新 CSS/JS - public/header.html: 替换旧 aside-tools 为 float-widget 容器 模块类型: 1. QQ客服: hover 弹出 QQ 号列表+在线时间 2. 在线客服: 点击新标签页跳转 3. 群聊: hover 弹出二维码 4. 公众号: hover 弹出二维码 数据来源: window.__FLOAT_WIDGET_DATA__ (后台注入) 或 JS 内 demo 数据
228 lines
9.3 KiB
HTML
228 lines
9.3 KiB
HTML
<div class="nav-shadow">
|
||
<nav class="section-content nav-header">
|
||
<div class="nav-left">
|
||
{php}
|
||
// Logo 链接使用独立配置，不占用导航数组
|
||
$__logoLink = isset($data['site_config']['logo_link']) && !empty($data['site_config']['logo_link'])
|
||
? $data['site_config']['logo_link']
|
||
: 'index.html';
|
||
{/php}
|
||
<div class="nav-icon">
|
||
<a href="{$__logoLink}">
|
||
<img src="{$data.official_website_logo|default='assets/img/index/logo.png'}" alt="Logo" id="logo">
|
||
</a>
|
||
</div>
|
||
<div class="nav-menu">
|
||
{if isset($data.header_nav) && !empty($data.header_nav)}
|
||
{foreach $data.header_nav as $k=>$item}
|
||
{if !empty($item.file_address)}
|
||
<a href="{$item.file_address}" {if !empty($item.blank)}target="_blank" {/if}>
|
||
<div class="nav-item">{$item.name}</div>
|
||
</a>
|
||
{else /}
|
||
<div class="nav-item">{$item.name}</div>
|
||
{/if}
|
||
{/foreach}
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
<div class="nav-right">
|
||
<!-- 语言切换（始终显示，放在最左边） -->
|
||
<div class="lang-switch nav-desktop-link" id="langSwitch" onclick="i18n.toggle()">
|
||
<span class="lang-text">CN</span>
|
||
<span class="lang-sep">/</span>
|
||
<span class="lang-alt">EN</span>
|
||
</div>
|
||
<!-- 未登录状态 -->
|
||
<div class="no-login nav-desktop-link d-none">
|
||
<span class="nav-text-link" id="loginBtn" data-i18n="nav_login">登录</span>
|
||
<span class="nav-divider">|</span>
|
||
<div class="btn btn-normal" id="registBtn">
|
||
<img src="/web/BlackFruit-web/assets/img/header/liwu.svg" class="regist-icon" alt="Gift">
|
||
<span class="regist-text" data-i18n="nav_register">立即注册</span>
|
||
</div>
|
||
</div>
|
||
<!-- 已登录状态 -->
|
||
<div class="login-in nav-desktop-link d-none">
|
||
<a href="/home.htm" class="nav-text-link" data-i18n="nav_console">控制台</a>
|
||
<span class="nav-divider">|</span>
|
||
<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 data-i18n="menu_account">账户信息</span>
|
||
<span class="no-real-name real-name" id="noCertification" data-i18n="menu_not_certified">未实名</span>
|
||
<span class="real-name d-none" id="isCertification" data-i18n="menu_certified">已实名</span>
|
||
</div>
|
||
<div class="login-menu-item" id="financeBtn" data-i18n="menu_unpaid">未付款订单</div>
|
||
<div class="login-menu-item" id="ticketBtn" data-i18n="menu_ticket">我的工单</div>
|
||
<div class="login-menu-item" id="logout" data-i18n="menu_logout">退出账户</div>
|
||
</div>
|
||
</div>
|
||
<!-- 移动端汉堡菜单按钮 -->
|
||
<button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle navigation">
|
||
<img src="/web/BlackFruit-web/assets/img/header/bar.svg" alt="Menu" class="mobile-menu-icon">
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="nav-cont">
|
||
<div class="nav-dropdown-inner">
|
||
{if isset($data.header_nav) && !empty($data.header_nav)}
|
||
{foreach $data.header_nav as $k=>$item}
|
||
{if isset($item.children) && !empty($item.children)}
|
||
<div class="nav-cont-menu">
|
||
|
||
{php}
|
||
$hasThirdLevel = false;
|
||
foreach ($item['children'] as $child) {
|
||
if (isset($child['children']) && !empty($child['children'])) {
|
||
$hasThirdLevel = true;
|
||
break;
|
||
}
|
||
}
|
||
{/php}
|
||
|
||
{if $hasThirdLevel}
|
||
<!-- 方案 C：二级分组标题 + 三级国旗链接网格 -->
|
||
<div class="nav-groups">
|
||
{foreach $item.children as $childIndex=>$child}
|
||
{if isset($child.children) && !empty($child.children)}
|
||
<div class="nav-group">
|
||
<div class="nav-group-title">
|
||
{if !empty($child.icon)}
|
||
<img src="{$child.icon}" alt="{$child.name}" class="nav-group-icon">
|
||
{/if}
|
||
<span>{$child.name}</span>
|
||
{if !empty($child.description)}
|
||
<span class="nav-group-desc">— {$child.description}</span>
|
||
{/if}
|
||
</div>
|
||
<div class="nav-group-grid">
|
||
{foreach $child.children as $grandchild}
|
||
<a href="{if !empty($grandchild.file_address)}{$grandchild.file_address}{else/}javascript:;{/if}"
|
||
class="nav-grid-link" {if !empty($grandchild.blank)}target="_blank" {/if}
|
||
title="{$grandchild.name}{if !empty($grandchild.description)} - {$grandchild.description}{/if}">
|
||
{if !empty($grandchild.country_code)}
|
||
<img src="/web/BlackFruit-web/assets/country/{$grandchild.country_code}.png"
|
||
alt="{$grandchild.country_code}" class="country-flag" onerror="this.style.display='none'">
|
||
{/if}
|
||
{$grandchild.name}
|
||
</a>
|
||
{/foreach}
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
{/foreach}
|
||
</div>
|
||
{else}
|
||
<!-- 纯二级：简单网格 -->
|
||
<div class="nav-simple-grid">
|
||
{foreach $item.children as $child}
|
||
<a href="{if !empty($child.file_address)}{$child.file_address}{else/}javascript:;{/if}"
|
||
class="nav-simple-item" {if !empty($child.blank)}target="_blank" {/if}>
|
||
{if !empty($child.icon)}
|
||
<div class="nav-simple-icon">
|
||
<img src="{$child.icon}" alt="{$child.name}">
|
||
</div>
|
||
{/if}
|
||
<div class="nav-simple-info">
|
||
<div class="nav-simple-title">{$child.name}</div>
|
||
{if !empty($child.description)}
|
||
<div class="nav-simple-desc">{$child.description}</div>
|
||
{/if}
|
||
</div>
|
||
</a>
|
||
{/foreach}
|
||
</div>
|
||
{/if}
|
||
|
||
</div>
|
||
{else /}
|
||
<div class="nav-cont-menu nav-cont-empty"></div>
|
||
{/if}
|
||
{/foreach}
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 移动端侧边导航栏 -->
|
||
<div class="mobile-sidebar" id="mobileSidebar">
|
||
<div class="mobile-sidebar-overlay" id="mobileSidebarOverlay"></div>
|
||
<div class="mobile-sidebar-content">
|
||
<div class="mobile-sidebar-header">
|
||
<div class="mobile-sidebar-logo">
|
||
<img src="{$data.official_website_logo|default='assets/img/index/logo.png'}" alt="">
|
||
</div>
|
||
<div class="mobile-sidebar-close" id="mobileSidebarClose">
|
||
<span>✕</span>
|
||
</div>
|
||
</div>
|
||
<div class="mobile-sidebar-body">
|
||
<!-- 主导航菜单 -->
|
||
{if isset($data.header_nav) && !empty($data.header_nav)}
|
||
{foreach $data.header_nav as $k=>$item}
|
||
<div class="mobile-nav-item">
|
||
{if !empty($item.file_address)}
|
||
<a href="{$item.file_address}" {if !empty($item.blank)}target="_blank" {/if} class="mobile-nav-link">
|
||
{$item.name}
|
||
</a>
|
||
{else /}
|
||
<div class="mobile-nav-link">{$item.name}</div>
|
||
{/if}
|
||
</div>
|
||
{/foreach}
|
||
{/if}
|
||
<!-- 分隔线 -->
|
||
<div class="mobile-nav-divider"></div>
|
||
<!-- 控制台（已登录时显示） -->
|
||
<div class="mobile-nav-item mobile-login-in" style="display: none;">
|
||
<a href="/home.htm" class="mobile-nav-link" data-i18n="nav_console">控制台</a>
|
||
</div>
|
||
<!-- 登录注册（未登录状态） -->
|
||
<div class="mobile-nav-actions mobile-no-login" style="display: none;">
|
||
<div class="mobile-nav-item">
|
||
<span class="mobile-nav-link" id="mobileLoginBtn" data-i18n="nav_login">登录</span>
|
||
</div>
|
||
<div class="mobile-nav-item">
|
||
<div class="mobile-nav-btn" id="mobileRegistBtn" data-i18n="nav_register">立即注册</div>
|
||
</div>
|
||
</div>
|
||
<!-- 用户信息（已登录状态） -->
|
||
<div class="mobile-nav-user mobile-login-in" style="display: none;">
|
||
<div class="mobile-nav-divider"></div>
|
||
<div class="mobile-user-info">
|
||
<div class="mobile-user-avatar" id="mobileHeadImg"></div>
|
||
<div class="mobile-user-name" id="mobileUsername"></div>
|
||
</div>
|
||
<div class="mobile-nav-item">
|
||
<span class="mobile-nav-link" id="mobileAccountBtn" data-i18n="menu_account">账户信息</span>
|
||
</div>
|
||
<div class="mobile-nav-item">
|
||
<span class="mobile-nav-link" id="mobileFinanceBtn" data-i18n="menu_unpaid">未付款订单</span>
|
||
</div>
|
||
<div class="mobile-nav-item">
|
||
<span class="mobile-nav-link" id="mobileTicketBtn" data-i18n="menu_ticket">我的工单</span>
|
||
</div>
|
||
<div class="mobile-nav-item">
|
||
<span class="mobile-nav-link" id="mobileLogout" data-i18n="menu_logout">退出账户</span>
|
||
</div>
|
||
</div>
|
||
<!-- 语言切换 -->
|
||
<div class="mobile-nav-divider"></div>
|
||
<div class="mobile-nav-item">
|
||
<span class="mobile-nav-link" onclick="i18n.toggle()">🌐 <span class="lang-text">中</span> / EN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧浮窗 — 由 float-widget.js 动态渲染 -->
|
||
{if ( isset($data.side_floating_window) && !empty($data.side_floating_window) ) }
|
||
<script>
|
||
window.__FLOAT_WIDGET_DATA__ = {:json_encode($data['side_floating_window'])};
|
||
</script>
|
||
{/if}
|
||
<div class="float-widget"></div> |