From c4dd22ac1079e157a43c2d4b016b34218a47614c Mon Sep 17 00:00:00 2001 From: yiqiu Date: Wed, 18 Mar 2026 22:06:15 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8F=B3=E4=BE=A7=E6=B5=AE=E7=AA=97?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=87=8D=E5=86=99=20=E2=80=94=204=20?= =?UTF-8?q?=E7=A7=8D=E6=A8=A1=E5=9D=97=20+=20JS=20=E5=8A=A8=E6=80=81?= =?UTF-8?q?=E6=B8=B2=E6=9F=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新增文件: - 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 数据 --- css/float-widget.css | 242 +++++++++++++++++++++++++++++++++++++++++++ header.html | 2 + js/float-widget.js | 140 +++++++++++++++++++++++++ public/header.html | 89 ++-------------- 4 files changed, 391 insertions(+), 82 deletions(-) create mode 100644 css/float-widget.css create mode 100644 js/float-widget.js diff --git a/css/float-widget.css b/css/float-widget.css new file mode 100644 index 0000000..d1a702c --- /dev/null +++ b/css/float-widget.css @@ -0,0 +1,242 @@ +/* ============================================ + 右侧浮窗组件 — float-widget + ============================================ */ + +.float-widget { + position: fixed; + right: 20px; + bottom: 100px; + z-index: 9998; + display: flex; + flex-direction: column; + gap: 6px; +} + +/* 单个浮窗按钮 */ +.fw-item { + position: relative; + width: 44px; + height: 44px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(14, 16, 26, 0.88); + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 12px; + cursor: pointer; + transition: all 0.25s ease; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); +} + +.fw-item:hover { + background: rgba(30, 41, 59, 0.95); + border-color: rgba(56, 189, 248, 0.15); + transform: translateX(-4px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); +} + +.fw-item svg { + width: 22px; + height: 22px; + opacity: 0.7; + transition: opacity 0.2s ease; +} + +.fw-item:hover svg { + opacity: 1; +} + +/* ---- 弹出面板 ---- */ +.fw-popup { + position: absolute; + right: calc(100% + 12px); + top: 50%; + transform: translateY(-50%); + min-width: 200px; + background: rgba(14, 16, 26, 0.96); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 14px; + padding: 16px 20px; + opacity: 0; + visibility: hidden; + transition: all 0.2s ease; + pointer-events: none; + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); + white-space: nowrap; +} + +/* 小三角 */ +.fw-popup::after { + content: ''; + position: absolute; + right: -6px; + top: 50%; + transform: translateY(-50%) rotate(45deg); + width: 10px; + height: 10px; + background: rgba(14, 16, 26, 0.96); + border-right: 1px solid rgba(255, 255, 255, 0.08); + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +.fw-item:hover .fw-popup { + opacity: 1; + visibility: visible; + pointer-events: auto; +} + +/* 面板标题 */ +.fw-popup-title { + font-size: 13px; + font-weight: 600; + color: rgba(226, 232, 240, 0.9); + margin-bottom: 12px; + display: flex; + align-items: center; + gap: 6px; +} + +.fw-popup-title svg { + width: 14px; + height: 14px; + opacity: 0.5; +} + +/* ---- QQ 客服样式 ---- */ +.fw-qq-list { + display: flex; + flex-direction: column; + gap: 10px; +} + +.fw-qq-entry { + display: flex; + align-items: center; + gap: 12px; + padding: 8px 12px; + background: rgba(30, 41, 59, 0.3); + border-radius: 8px; + transition: background 0.2s ease; +} + +.fw-qq-entry:hover { + background: rgba(30, 41, 59, 0.5); +} + +.fw-qq-avatar { + width: 32px; + height: 32px; + border-radius: 50%; + background: rgba(56, 189, 248, 0.1); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.fw-qq-avatar svg { + width: 18px; + height: 18px; + opacity: 0.6; +} + +.fw-qq-info { + display: flex; + flex-direction: column; + gap: 2px; +} + +.fw-qq-num { + font-size: 13px; + color: rgba(226, 232, 240, 0.85); + font-weight: 500; +} + +.fw-qq-time { + font-size: 11px; + color: rgba(148, 163, 184, 0.5); +} + +/* 在线状态点 */ +.fw-qq-status { + width: 6px; + height: 6px; + border-radius: 50%; + background: #22C55E; + flex-shrink: 0; + box-shadow: 0 0 6px rgba(34, 197, 94, 0.4); +} + +/* ---- 二维码样式（群聊 / 公众号） ---- */ +.fw-qr { + text-align: center; +} + +.fw-qr img { + width: 140px; + height: 140px; + border-radius: 8px; + background: #fff; + padding: 6px; + margin-bottom: 8px; +} + +.fw-qr-hint { + font-size: 11px; + color: rgba(148, 163, 184, 0.5); +} + +/* ---- 在线客服 —— 无弹出框，直接跳转 ---- */ +.fw-item[data-type="service"] .fw-popup { + padding: 10px 16px; + min-width: auto; +} + +.fw-service-hint { + font-size: 12px; + color: rgba(226, 232, 240, 0.7); +} + +/* ---- 回到顶部按钮融合 ---- */ +.fw-back-top { + opacity: 0; + visibility: hidden; + transition: all 0.25s ease; +} + +.fw-back-top.show { + opacity: 1; + visibility: visible; +} + +.fw-back-top svg { + width: 18px; + height: 18px; +} + +/* ---- 移动端 ---- */ +@media (max-width: 768px) { + .float-widget { + right: 12px; + bottom: 80px; + gap: 4px; + } + + .fw-item { + width: 38px; + height: 38px; + border-radius: 10px; + } + + .fw-item svg { + width: 18px; + height: 18px; + } + + .fw-popup { + display: none !important; + } +} diff --git a/header.html b/header.html index fbed475..2b454f0 100644 --- a/header.html +++ b/header.html @@ -107,6 +107,8 @@ + + diff --git a/js/float-widget.js b/js/float-widget.js new file mode 100644 index 0000000..a3bacaa --- /dev/null +++ b/js/float-widget.js @@ -0,0 +1,140 @@ +/** + * 右侧浮窗组件 — float-widget.js + * 根据后台配置数据动态渲染浮窗按钮 + */ +(function () { + 'use strict'; + + // SVG 图标定义 + var ICONS = { + qq: '', + service: '', + group: '', + wechat: '', + arrowUp: '' + }; + + /** + * 从后台注入的数据或默认 demo 数据 + * window.__FLOAT_WIDGET_DATA__ 可被后台模板覆盖 + */ + var defaultData = [ + { + type: 'qq', + label: 'QQ客服', + items: [ + { qq: '10001', time: '09:00 - 22:00' }, + { qq: '10002', time: '09:00 - 18:00' } + ] + }, + { + type: 'service', + label: '在线客服', + url: 'javascript:;' + }, + { + type: 'group', + label: '交流群', + qrcode: '/web/BlackFruit-web/assets/img/index/qrcode-placeholder.png' + }, + { + type: 'wechat', + label: '公众号', + qrcode: '/web/BlackFruit-web/assets/img/index/qrcode-placeholder.png' + } + ]; + + function getData() { + return window.__FLOAT_WIDGET_DATA__ || defaultData; + } + + function buildQQPopup(item) { + var html = '
QQ客服
'; + for (var i = 0; i < item.items.length; i++) { + var entry = item.items[i]; + html += '' + + '
' + ICONS.qq + '
' + + '
' + + '' + entry.qq + '' + + '' + entry.time + '' + + '
' + + '
' + + ''; + } + html += '
'; + return html; + } + + function buildServicePopup(item) { + return '
点击跳转在线客服
'; + } + + function buildQRPopup(item) { + return '
' + item.label + '
' + + '
' + + '' + item.label + '' + + '
扫码' + (item.type === 'group' ? '加群' : '关注') + '
' + + '
'; + } + + function render() { + var data = getData(); + var container = document.querySelector('.float-widget'); + if (!container) return; + + var html = ''; + + for (var i = 0; i < data.length; i++) { + var item = data[i]; + var icon = ICONS[item.type] || ''; + var popupContent = ''; + + if (item.type === 'qq') { + popupContent = buildQQPopup(item); + } else if (item.type === 'service') { + popupContent = buildServicePopup(item); + } else if (item.type === 'group' || item.type === 'wechat') { + popupContent = buildQRPopup(item); + } + + if (item.type === 'service') { + html += '' + + icon + + '
' + popupContent + '
' + + ''; + } else { + html += '
' + + icon + + '
' + popupContent + '
' + + '
'; + } + } + + // 回到顶部按钮 + html += '
' + ICONS.arrowUp + '
'; + + container.innerHTML = html; + + // 回到顶部逻辑 + var backTopBtn = document.getElementById('fwBackTop'); + if (backTopBtn) { + window.addEventListener('scroll', function () { + if (window.scrollY > 300) { + backTopBtn.classList.add('show'); + } else { + backTopBtn.classList.remove('show'); + } + }); + backTopBtn.addEventListener('click', function () { + window.scrollTo({ top: 0, behavior: 'smooth' }); + }); + } + } + + // DOM ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', render); + } else { + render(); + } +})(); diff --git a/public/header.html b/public/header.html index 5356d7a..f17940a 100644 --- a/public/header.html +++ b/public/header.html @@ -219,85 +219,10 @@ - - -
- 回到顶部 -
- -
-
- {if ( isset($data.side_floating_window) ) } - {foreach $data.side_floating_window as $key=>$value} -
- -
-
-
{$value.name}
- {$value.content|raw} -
-
-
- {/foreach} - {else /} -
- -
-
-
电话咨询
-

7*24h不间断服务

-

{$data.enterprise_telephone|default=''}

-
-
-
-
- -
-
-
在线客服
-

工作日 09:00-18:00

- -
立即查询
- -
-
-
-
- -
-
-
提交工单
-

专业工程师快速响应

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

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

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

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

- -
前往购物车
- -
-
-
- {/if} -
-
\ No newline at end of file + +{if ( isset($data.side_floating_window) && !empty($data.side_floating_window) ) } + +{/if} +
\ No newline at end of file