feat: 右侧浮窗组件重写 — 4 种模块 + JS 动态渲染
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 数据
This commit is contained in:
yiqiu
2026-03-18 22:06:15 +08:00
parent f96b967474
commit c4dd22ac10
4 changed files with 391 additions and 82 deletions

View File

@@ -219,85 +219,10 @@
</div>
</div>
<!-- 侧边 -->
<!-- 回到顶部按钮 - 独立在侧边工具栏上方 -->
<div class="back-top-wrapper" id="backTop">
<img src="/web/BlackFruit-web/assets/img/header/up.png" alt="回到顶部">
</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">
<h5>电话咨询</h5>
<p>7*24h不间断服务</p>
<p class="com-contact-tel">{$data.enterprise_telephone|default=''}</p>
</div>
</div>
</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">
<h5>在线客服</h5>
<p>工作日 09:00-18:00</p>
<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>
<!-- 右侧浮窗 — 由 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>