diff --git a/css/common.css b/css/common.css new file mode 100644 index 0000000..c23c588 --- /dev/null +++ b/css/common.css @@ -0,0 +1,443 @@ +/* ============================================ + 通用样式 - Header/Footer/Mobile Sidebar + 所有页面共享的样式 + ============================================ */ + +/* ============================================ + Header - 导航栏通用样式 + ============================================ */ + +/* 强制提升 header 和导航菜单的层级 */ +header, +#header { + z-index: 99999 !important; + position: relative; + transition: background 0.3s ease !important; +} + +#header { + position: sticky !important; +} + +#header:hover, +header:hover { + background: rgba(15, 23, 42, 0.6) !important; +} + +/* 导航栏:使用统一的容器系统 */ +.nav-header { + max-width: 1440px; + margin: 0 auto; + padding: 0 20px; + display: flex; + align-items: stretch; + height: 70px; +} + +.nav-header .nav-left { + display: flex; + align-items: center; + flex: 1; +} + +.nav-right { + display: flex; + align-items: stretch; + height: 100%; +} + +.nav-right>a { + display: flex; + align-items: center; +} + +/* 纯文字链接样式 */ +.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; +} + +.nav-right .nav-text-link:hover { + color: #38BDF8; +} + +/* 分隔符样式 */ +.nav-right .nav-divider { + color: rgba(148, 163, 184, 0.3); + display: flex; + align-items: center; + font-size: 14px; + user-select: none; +} + +/* nav-shadow 样式和 hover 效果 */ +.nav-shadow { + background: rgba(15, 23, 42, 0.8) !important; + backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(148, 163, 184, 0.15); + box-shadow: 0 4px 24px rgba(15, 23, 42, 0.4); + transition: background 0.3s ease !important; +} + +.nav-shadow:hover { + background: rgba(15, 23, 42, 0.95) !important; +} + +/* 导航文字颜色 */ +.nav-menu .nav-item { + color: #E5E7EB; + border-bottom-color: transparent; +} + +.nav-menu .nav-item:hover { + color: #38BDF8; + border-bottom-color: #38BDF8; +} + +.nav-right .control { + color: #E5E7EB; +} + +.nav-right .control:hover { + color: #38BDF8; +} + +/* ============================================ + 登录注册区域 - 撑满高度设计 + ============================================ */ + +/* 登录注册容器 */ +.no-login { + display: flex !important; + align-items: stretch !important; + height: 100% !important; + gap: 0 !important; + margin: 0 !important; + padding: 0 !important; + flex-direction: row !important; + visibility: visible !important; +} + +/* 注册按钮 - 渐变背景样式,撑满高度 */ +.no-login .btn.btn-normal#registBtn { + display: flex !important; + align-items: center !important; + justify-content: center !important; + gap: 8px !important; + padding: 0 36px !important; + font-size: 16px !important; + font-weight: 600 !important; + color: #ffffff !important; + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%) !important; + border: none !important; + border-left: 1px solid rgba(148, 163, 184, 0.15) !important; + border-radius: 0 !important; + cursor: pointer !important; + transition: all 0.3s ease !important; + position: relative !important; + overflow: hidden !important; + margin: 0 !important; + min-width: 120px !important; + flex-shrink: 0 !important; + box-shadow: none !important; + height: 100% !important; + box-sizing: border-box !important; +} + +/* 注册按钮文字 - 确保始终在最上层 */ +.no-login .btn.btn-normal#registBtn .regist-text { + position: relative; + z-index: 3; + display: inline-flex; + align-items: center; +} + +/* 注册按钮图标 */ +.no-login .btn.btn-normal#registBtn::before { + content: ''; + display: block; + width: 16px; + height: 16px; + background-image: url('/web/BlackFruit-web/assets/img/header/zhuce.png'); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + position: relative; + z-index: 3; + flex-shrink: 0; +} + +/* 注册按钮悬停效果背景层 */ +.no-login .btn.btn-normal#registBtn::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, #6366F1 0%, #38BDF8 100%); + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; + z-index: 1; +} + +.no-login .btn.btn-normal#registBtn:hover { + box-shadow: 0 4px 16px rgba(56, 189, 248, 0.4) !important; +} + +.no-login .btn.btn-normal#registBtn:hover::after { + opacity: 1; +} + +/* 注册按钮图标 - 默认隐藏 (桌面端) */ +.regist-icon { + width: 16px; + height: 16px; + margin-right: 4px; + display: none; +} + +/* ============================================ + 下拉菜单优化 - 确保高层级 + ============================================ */ +.nav-cont { + background: rgba(15, 23, 42, 0.95); + backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(148, 163, 184, 0.15); + z-index: 99998 !important; + position: absolute !important; +} + +.nav-item-box { + background: rgba(30, 41, 59, 0.8); + border: 1px solid rgba(148, 163, 184, 0.15); +} + +.nav-item-box:hover { + background: rgba(30, 41, 59, 1); + border-color: rgba(56, 189, 248, 0.3); +} + +.nav-item-box .title { + color: #E5E7EB; +} + +.nav-item-box .desc { + color: rgba(148, 163, 184, 0.8); +} + +/* ============================================ + 移动端导航优化 + ============================================ */ +@media (max-width: 768px) { + + /* 调整导航栏高度 */ + .nav-header { + height: 56px; + padding: 0 0 0 16px !important; + display: flex !important; + align-items: center !important; + justify-content: space-between; + } + + /* Ensure Right Container handles children alignment */ + .nav-right { + display: flex; + align-items: center; + height: 100%; + margin: 0; + } + + /* 隐藏桌面端导航菜单 */ + .nav-menu { + display: none !important; + } + + /* 隐藏桌面端的文档、控制台链接 */ + .nav-desktop-link { + display: none !important; + } + + /* Logo 缩小 - 但比之前稍微大一点 */ + .nav-icon img { + max-height: 48px; + width: auto; + object-fit: contain; + } + + /* 调整移动端注册按钮样式 - 长方形无圆角,撑满导航栏高度 */ + .no-login .btn.btn-normal#registBtn { + padding: 0 25px !important; + font-size: 15px !important; + min-width: auto !important; + border-radius: 0 !important; + border-left: none !important; + height: 100% !important; + max-height: 56px; + margin-right: 0 !important; + display: flex; + align-items: center; + justify-content: center; + margin-top: 0 !important; + gap: 2px !important; + } + + /* 移动端注册按钮图标显示 */ + .no-login .btn.btn-normal#registBtn .regist-icon { + display: block; + margin-right: 0 !important; + } + + /* 移动端注册按钮图标隐藏 - 旧样式移除 */ + .no-login .btn.btn-normal#registBtn::before { + display: none; + } + + /* 移动端登录按钮(如果需要显示) */ + .no-login .nav-text-link#loginBtn { + padding: 0 12px !important; + font-size: 14px !important; + } + + /* 确保汉堡菜单按钮显示 - 无背景,只显示白色横线 */ + .mobile-menu-toggle { + display: flex !important; + background: transparent !important; + border: none !important; + align-self: center; + margin-top: 0; + } +} +/* ============================================ + 移动端侧边栏 + ============================================ */ +.mobile-sidebar-content { + background: linear-gradient(180deg, #020617 0%, #0F172A 100%); +} + +.mobile-sidebar-header { + background: rgba(15, 23, 42, 0.95); + border-bottom: 1px solid rgba(148, 163, 184, 0.1); +} + +.mobile-nav-link { + color: #E5E7EB; + transition: all 0.3s ease; +} + +.mobile-nav-link:hover { + color: #38BDF8; +} + +.mobile-user-info { + background: rgba(30, 41, 59, 0.6); + border: 1px solid rgba(148, 163, 184, 0.1); + border-radius: 8px; + padding: 12px; + margin-bottom: 12px; +} + +.mobile-user-avatar { + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); + box-shadow: 0 0 12px rgba(56, 189, 248, 0.3); +} + +.mobile-user-name { + color: #E5E7EB; +} + +/* ============================================ + 侧边栏工具条 + ============================================ */ +.aside-tools { + background: rgba(15, 23, 42, 0.9); + backdrop-filter: blur(20px); + border: 1px solid rgba(148, 163, 184, 0.15); + border-radius: 12px; + box-shadow: 0 8px 32px rgba(15, 23, 42, 0.5); +} + +.aside-tools .aside-box { + border-bottom-color: rgba(148, 163, 184, 0.15); +} + +.aside-tools .aside-box:hover { + background: rgba(56, 189, 248, 0.1); +} + +.aside-tools .aside-text { + color: #E5E7EB; +} + +.aside-tools .aside-box:hover .aside-text { + color: #38BDF8; +} + +/* 返回顶部按钮 */ +.aside-tools .back-top { + background: rgba(56, 189, 248, 0.15); + transition: all 0.3s ease; +} + +.aside-tools .back-top:hover { + background: linear-gradient(135deg, #38BDF8 0%, #6366F1 100%); + box-shadow: 0 4px 16px rgba(56, 189, 248, 0.4); +} + +/* 返回顶部按钮优化 */ +.back-top-wrapper { + background: rgba(56, 189, 248, 0.15); + border: 1px solid rgba(56, 189, 248, 0.3); + box-shadow: 0 0 12px rgba(56, 189, 248, 0.2); + transition: all 0.3s ease; +} + +.back-top-wrapper:hover { + background: rgba(56, 189, 248, 0.3); + box-shadow: 0 0 20px rgba(56, 189, 248, 0.4); +} + +/* ============================================ + 登录菜单下拉 + ============================================ */ +.nav-header .login-in .login-menu .login-menu-item { + color: #E5E7EB; +} + +.nav-header .login-in .login-menu .login-menu-item:hover { + background: rgba(56, 189, 248, 0.15); + color: #38BDF8; +} + +/* ============================================ + Mobile Menu Toggle Button + ============================================ */ +.mobile-menu-toggle { + display: flex !important; + gap: 0; + cursor: pointer; + width: 24px; + height: 24px; + justify-content: center; + align-items: center; + margin-right: 0; + order: 3; + padding: 0; + background: none; + border: none; +} + +.mobile-menu-toggle .mobile-menu-icon { + width: 100%; + height: 100%; + display: block; +} + diff --git a/header.html b/header.html index 0256013..5c74ad0 100644 --- a/header.html +++ b/header.html @@ -2,110 +2,112 @@ - {php} - // 在渲染阶段从主题配置插件读取配置,并覆盖 $data 与 SEO 变量,实现 SSR - if (class_exists('\\addon\\theme_configurator\\model\\ThemeConfigModel')) { - $cfgModel = new \addon\theme_configurator\model\ThemeConfigModel(); - $themeCfg = $cfgModel->getConfig(); + {php} + // 在渲染阶段从主题配置插件读取配置,并覆盖 $data 与 SEO 变量,实现 SSR + if (class_exists('\\addon\\theme_configurator\\model\\ThemeConfigModel')) { + $cfgModel = new \addon\theme_configurator\model\ThemeConfigModel(); + $themeCfg = $cfgModel->getConfig(); - if (is_array($themeCfg)) { - $site = isset($themeCfg['site_config']) && is_array($themeCfg['site_config']) - ? $themeCfg['site_config'] - : []; + if (is_array($themeCfg)) { + $site = isset($themeCfg['site_config']) && is_array($themeCfg['site_config']) + ? $themeCfg['site_config'] + : []; - if (!isset($data) || !is_array($data)) { - $data = []; - } + if (!isset($data) || !is_array($data)) { + $data = []; + } - // 覆盖 / 补充首页相关结构数据 - if (isset($themeCfg['banner'])) { - $data['banner'] = $themeCfg['banner']; - } - if (isset($themeCfg['honor'])) { - $data['honor'] = $themeCfg['honor']; - } - if (isset($themeCfg['friendly_link'])) { - $data['friendly_link'] = $themeCfg['friendly_link']; - } - if (isset($themeCfg['header_nav'])) { - $data['header_nav'] = $themeCfg['header_nav']; - } - if (isset($themeCfg['footer_nav'])) { - $data['footer_nav'] = $themeCfg['footer_nav']; - } - if (isset($themeCfg['side'])) { - $data['side_floating_window'] = $themeCfg['side']; - } + // 覆盖 / 补充首页相关结构数据 + if (isset($themeCfg['banner'])) { + $data['banner'] = $themeCfg['banner']; + } + if (isset($themeCfg['honor'])) { + $data['honor'] = $themeCfg['honor']; + } + if (isset($themeCfg['friendly_link'])) { + $data['friendly_link'] = $themeCfg['friendly_link']; + } + if (isset($themeCfg['header_nav'])) { + $data['header_nav'] = $themeCfg['header_nav']; + } + if (isset($themeCfg['footer_nav'])) { + $data['footer_nav'] = $themeCfg['footer_nav']; + } + if (isset($themeCfg['side'])) { + $data['side_floating_window'] = $themeCfg['side']; + } - // 站点基础信息,供 header/footer 与其他模板直接使用 - $data['enterprise_name'] = $site['enterprise_name'] ?? ($data['enterprise_name'] ?? ''); - $data['enterprise_telephone'] = $site['enterprise_telephone'] ?? ($data['enterprise_telephone'] ?? ''); - $data['enterprise_mailbox'] = $site['enterprise_mailbox'] ?? ($data['enterprise_mailbox'] ?? ''); - $data['enterprise_qrcode'] = $site['enterprise_qrcode'] ?? ($data['enterprise_qrcode'] ?? ''); - $data['official_website_logo']= $site['official_website_logo']?? ($data['official_website_logo']?? ''); - $data['online_customer_service_link'] = - $site['online_customer_service_link'] ?? ($data['online_customer_service_link'] ?? ''); - $data['icp_info'] = $site['icp_info'] ?? ($data['icp_info'] ?? ''); - $data['icp_info_link'] = $site['icp_info_link'] ?? ($data['icp_info_link'] ?? ''); - $data['public_security_network_preparation'] = - $site['public_security_network_preparation'] ?? - ($data['public_security_network_preparation'] ?? ''); - $data['public_security_network_preparation_link'] = - $site['public_security_network_preparation_link'] ?? - ($data['public_security_network_preparation_link'] ?? ''); - $data['telecom_appreciation'] = $site['telecom_appreciation'] ?? ($data['telecom_appreciation'] ?? ''); - $data['copyright_info'] = $site['copyright_info'] ?? ($data['copyright_info'] ?? ''); - $data['terms_service_url'] = $site['terms_service_url'] ?? ($data['terms_service_url'] ?? ''); - $data['terms_privacy_url'] = $site['terms_privacy_url'] ?? ($data['terms_privacy_url'] ?? ''); - $data['cloud_product_link'] = $site['cloud_product_link'] ?? ($data['cloud_product_link'] ?? ''); - $data['dcim_product_link'] = $site['dcim_product_link'] ?? ($data['dcim_product_link'] ?? ''); + // 站点基础信息,供 header/footer 与其他模板直接使用 + $data['enterprise_name'] = $site['enterprise_name'] ?? ($data['enterprise_name'] ?? ''); + $data['enterprise_telephone'] = $site['enterprise_telephone'] ?? ($data['enterprise_telephone'] ?? ''); + $data['enterprise_mailbox'] = $site['enterprise_mailbox'] ?? ($data['enterprise_mailbox'] ?? ''); + $data['enterprise_qrcode'] = $site['enterprise_qrcode'] ?? ($data['enterprise_qrcode'] ?? ''); + $data['official_website_logo']= $site['official_website_logo']?? ($data['official_website_logo']?? ''); + $data['online_customer_service_link'] = + $site['online_customer_service_link'] ?? ($data['online_customer_service_link'] ?? ''); + $data['icp_info'] = $site['icp_info'] ?? ($data['icp_info'] ?? ''); + $data['icp_info_link'] = $site['icp_info_link'] ?? ($data['icp_info_link'] ?? ''); + $data['public_security_network_preparation'] = + $site['public_security_network_preparation'] ?? + ($data['public_security_network_preparation'] ?? ''); + $data['public_security_network_preparation_link'] = + $site['public_security_network_preparation_link'] ?? + ($data['public_security_network_preparation_link'] ?? ''); + $data['telecom_appreciation'] = $site['telecom_appreciation'] ?? ($data['telecom_appreciation'] ?? ''); + $data['copyright_info'] = $site['copyright_info'] ?? ($data['copyright_info'] ?? ''); + $data['terms_service_url'] = $site['terms_service_url'] ?? ($data['terms_service_url'] ?? ''); + $data['terms_privacy_url'] = $site['terms_privacy_url'] ?? ($data['terms_privacy_url'] ?? ''); + $data['cloud_product_link'] = $site['cloud_product_link'] ?? ($data['cloud_product_link'] ?? ''); + $data['dcim_product_link'] = $site['dcim_product_link'] ?? ($data['dcim_product_link'] ?? ''); - // SEO:如插件配置了 SEO,则覆盖控制器传入的标题/关键词/描述 - if (!empty($themeCfg['seo']['title'])) { - $title = $themeCfg['seo']['title']; - } - if (!empty($themeCfg['seo']['keywords'])) { - $keywords = $themeCfg['seo']['keywords']; - } - if (!empty($themeCfg['seo']['description'])) { - $description = $themeCfg['seo']['description']; - } - } - } - {/php} + // SEO:如插件配置了 SEO,则覆盖控制器传入的标题/关键词/描述 + if (!empty($themeCfg['seo']['title'])) { + $title = $themeCfg['seo']['title']; + } + if (!empty($themeCfg['seo']['keywords'])) { + $keywords = $themeCfg['seo']['keywords']; + } + if (!empty($themeCfg['seo']['description'])) { + $description = $themeCfg['seo']['description']; + } + } + } + {/php} - - {$title} - - + + {$title} + + - - - + + + - - - - - - - - - + + + + + + + + + + + - - - - - - + + + + + + - - + + - - - - + \ No newline at end of file