feat: 右侧浮窗组件重写 — 4 种模块 + JS 动态渲染
All checks were successful
continuous-integration/drone/push Build is passing
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
242
css/float-widget.css
Normal file
242
css/float-widget.css
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -107,6 +107,8 @@
|
||||
<script src="/web/BlackFruit-web/js/nav-third-level.js"></script>
|
||||
<script src="/web/BlackFruit-web/js/i18n.js"></script>
|
||||
<script src="/web/BlackFruit-web/js/ai.js"></script>
|
||||
<link rel="stylesheet" href="/web/BlackFruit-web/css/float-widget.css">
|
||||
<script src="/web/BlackFruit-web/js/float-widget.js"></script>
|
||||
|
||||
<link rel="alternate" hreflang="zh-Hans" href="{$url}">
|
||||
<link rel="canonical" href="{$url}">
|
||||
|
||||
140
js/float-widget.js
Normal file
140
js/float-widget.js
Normal file
@@ -0,0 +1,140 @@
|
||||
/**
|
||||
* 右侧浮窗组件 — float-widget.js
|
||||
* 根据后台配置数据动态渲染浮窗按钮
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
// SVG 图标定义
|
||||
var ICONS = {
|
||||
qq: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M672 1024c-64 0-115.2-12.8-160-40.533l-2.133 0C469.333 1011.2 413.867 1024 347.733 1024c-61.867 0-115.2-14.933-157.867-40.533-51.2-29.867-78.933-76.8-78.933-130.133 0-10.667 2.133-23.467 4.267-34.133-36.267-21.333-61.867-61.867-68.267-113.067-6.4-46.933 0-100.267 19.2-160C76.8 512 93.867 469.333 128 435.2c2.133-27.733 8.533-55.467 17.067-78.933C147.2 264.533 183.467 181.333 251.733 106.667 324.267 34.133 411.733 0 512 0c102.4 0 189.867 36.267 260.267 106.667 68.267 68.267 104.533 153.6 106.667 251.733 10.667 27.733 14.933 49.067 17.067 74.667 23.467 29.867 49.067 68.267 64 115.2 19.2 59.733 25.6 113.067 19.2 160-6.4 55.467-29.867 93.867-68.267 113.067 2.133 10.667 4.267 21.333 4.267 32 0 51.2-25.6 96-78.933 130.133C793.6 1009.067 738.133 1024 672 1024z" fill="#ffffff"/></svg>',
|
||||
service: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M516.668 807.863c5.004 0 10.096-.308 15.222-.917 49.158-5.9 90.9-40.26 106.307-87.61 1.163-3.541-.516-7.336-3.907-8.892-3.352-1.562-7.41-.212-9.306 2.966-.18.302-19.71 31.849-95.746 42.118-11.382 1.527-22.458 2.328-32.956 2.328-53.271-.034-77.01-20.113-77.227-20.298-2.68-2.384-6.772-2.445-9.52-.123-2.775 2.322-3.414 6.358-1.521 9.447C431.202 784.477 472.816 807.863 516.668 807.863zM925.504 336.634c-.67 0-1.281.123-1.918.123C879.034 143.879 708.803 0 504.704 0 295.001 0 120.853 151.824 82.257 352.685 44.729 359.438 16.165 392.423 16.165 432.314v159.654c0 44.747 35.883 81.032 80.189 81.032 24.992 0 47.052-11.802 61.726-29.928 35.458 93.781 107.642 169.397 198.995 209.293.218-.476 1.947-3.839 4.029-6.52 1.438-1.858 3.05-3.38 4.432-3.38 1.433 0 2.748.52 3.872 1.314-21.143-15.742-97.513-96.657-114.056-209.572-7.258-49.699 29.968-98.488 73.322-106.558 69.6-12.96 138.836-27.723 208.436-40.437 44.244-8.07 74.48-32.34 92.97-72.75 4.332-9.447 10.588-28.547 13.459-56.092.761-4.096 4.12-7.24 8.422-7.24 2.871 0 5.311 1.465 6.928 3.575l1.92-1.192c27.432 39.827 81.833 128.013 89.645 220.999 8.971 106.311 3.967 179.125-77.406 253.616-.096.094-.22.212-.337.308-1.13 1.219-1.802 2.808-1.802 4.554 0 2.29 1.221 4.248 2.988 5.44.672.275 1.344.643 2.016.918.547.123 1.069.302 1.617.302.553 0 1.04-.179 1.527-.302 1.159-.61 2.255-1.315 3.385-1.925 82.293-45.336 145.423-121.046 174.596-212.108 11.81 17.544 30.299 30.17 51.777 34.574C874.367 816.571 734.624 914.634 561.493 929.52c-10.375-25.737-35.916-44.015-65.911-44.015-39.174 0-70.938 31.026-70.938 69.265 0 38.24 31.758 69.23 70.938 69.23 31.585 0 58.037-20.292 67.22-48.172 200.407-16.29 361.058-135.41 394.596-320.495 29.627-12.384 50.433-41.45 50.433-75.381V418.407c0-45.151-36.862-81.773-82.326-81.773z" fill="#ffffff"/></svg>',
|
||||
group: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M784.344 938.278c-12.192 0-23.923-3.469-33.94-10.041l-32.314-20.83c-1.648-.879-4.025-2.303-6.403-4.525l-18.779-12.422c-72.405 9.644-143.027-2.402-204.866-35.003-11.388-6.009-15.664-19.959-9.535-31.141 2.93-5.386 7.926-9.4 13.875-11.161a23.77 23.77 0 0 1 17.847 1.782c55.295 29.164 119.103 39.127 184.489 28.76a23.837 23.837 0 0 1 16.805 3.628l28.817 19.034c.96.641 1.899 1.361 2.767 2.133l33.136 21.387c4.369 2.884 9.106 3.175 16.355.886 4.138-2.856 6.562-7.232 6.562-12.008v-58.643c.004-7.657 3.887-14.818 10.36-19.091 65.017-42.872 103.829-110.157 103.829-179.972 0-16.419-1.899-32.42-5.63-47.574-3.359-13.51-8.458-27.183-15.09-40.615-5.648-11.427-.801-25.192 10.839-30.741 11.664-5.538 25.638-.783 31.286 10.64 8.096 16.352 14.297 33.118 18.478 49.838 4.62 18.74 6.952 38.394 6.952 58.452 0 81.326-42.444 159.365-114.186 211.01v46.695c0 21.787-12.188 42.072-31.811 52.942a23.049 23.049 0 0 1-3.476 1.58c-9.378 3.36-17.998 5-26.367 5M281.533 849.288c-10.222 0-20.444-2.569-29.525-7.444-19.37-9.889-32.129-30.624-32.129-52.591v-75.126C121.903 647.898 63.816 545.146 63.816 436.903c0-193.641 181.789-351.181 405.225-351.181 223.46 0 405.246 157.54 405.246 351.181 0 193.638-181.786 351.174-405.246 351.174-22.138 0-44.803-1.697-67.465-5.042l-36.112 23.481c-1.736 1.417-3.27 2.385-4.319 3.033l-46.791 30.287c-8.717 5.973-20.562 9.452-32.821 9.452" fill="#ffffff"/><path d="M364.833 433.714c0 21.624-17.957 39.265-39.974 39.265-22.017 0-39.978-17.641-39.978-39.265 0-21.62 17.96-39.258 39.978-39.258 22.017 0 39.974 17.637 39.974 39.258zm147.162 7.518c0 19.544-16.238 35.488-36.14 35.488-19.905 0-36.137-15.944-36.137-35.488 0-19.548 16.231-35.492 36.137-35.492 19.901 0 36.14 15.945 36.14 35.492zm133.035 0c0 19.544-16.238 35.488-36.137 35.488-19.906 0-36.14-15.944-36.14-35.488 0-19.548 16.235-35.492 36.14-35.492 19.899 0 36.137 15.945 36.137 35.492z" fill="#ffffff"/></svg>',
|
||||
wechat: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M947 480.6l-62.9-62.9c-4.2-4.2-9.8-6.5-15.7-6.5-19.8 0-29.7 23.9-15.7 37.9l47.2 47.2c8.7 8.7 8.7 22.7 0 31.4L797.4 630.2v145c0 12.3-9.9 22.2-22.2 22.2h-145L527.7 899.9c-8.7 8.7-22.7 8.7-31.4 0l-89.5-89.5-13-13h-145c-12.3 0-22.2-9.9-22.2-22.2v-145L124.1 527.7c-8.7-8.7-8.7-22.7 0-31.4l102.5-102.5v-145c0-12.3 9.9-22.2 22.2-22.2h145l102.5-102.5c8.7-8.7 22.7-8.7 31.4 0l89.5 89.5 13 13h145c12.3 0 22.2 9.9 22.2 22.2V277c0 12.3 9.9 22.2 22.2 22.2 12.3 0 22.2-9.9 22.2-22.2v-50.4c0-24.5-19.9-44.4-44.4-44.4H648.6L543.4 77c-17.3-17.3-45.5-17.3-62.8 0L375.4 182.2H226.6c-24.5 0-44.4 19.9-44.4 44.4v148.8L77 480.6c-17.3 17.3-17.3 45.5 0 62.8l105.2 105.2v148.8c0 24.5 19.9 44.4 44.4 44.4h148.8L480.6 947c17.3 17.3 45.5 17.3 62.8 0l105.2-105.2h148.8c24.5 0 44.4-19.9 44.4-44.4V648.6L947 543.4c17.3-17.3 17.3-45.5 0-62.8zm-276.6-95.3L464.5 591.2 353.6 480.3c-8.7-8.7-23-8.7-31.7 0s-8.7 23 0 31.7l126.7 126.7c4.4 4.4 10.1 6.5 15.8 6.5 5.7 0 11.5-2.2 15.8-6.5L702.1 417c8.7-8.7 8.7-23 0-31.7s-23-8.7-31.7 0z" fill="#ffffff"/></svg>',
|
||||
arrowUp: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="18 15 12 9 6 15"/></svg>'
|
||||
};
|
||||
|
||||
/**
|
||||
* 从后台注入的数据或默认 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 = '<div class="fw-popup-title">QQ客服</div><div class="fw-qq-list">';
|
||||
for (var i = 0; i < item.items.length; i++) {
|
||||
var entry = item.items[i];
|
||||
html += '<a class="fw-qq-entry" href="https://wpa.qq.com/msgrd?v=3&uin=' + entry.qq + '&site=qq&menu=yes" target="_blank">' +
|
||||
'<div class="fw-qq-avatar">' + ICONS.qq + '</div>' +
|
||||
'<div class="fw-qq-info">' +
|
||||
'<span class="fw-qq-num">' + entry.qq + '</span>' +
|
||||
'<span class="fw-qq-time">' + entry.time + '</span>' +
|
||||
'</div>' +
|
||||
'<div class="fw-qq-status"></div>' +
|
||||
'</a>';
|
||||
}
|
||||
html += '</div>';
|
||||
return html;
|
||||
}
|
||||
|
||||
function buildServicePopup(item) {
|
||||
return '<div class="fw-service-hint">点击跳转在线客服</div>';
|
||||
}
|
||||
|
||||
function buildQRPopup(item) {
|
||||
return '<div class="fw-popup-title">' + item.label + '</div>' +
|
||||
'<div class="fw-qr">' +
|
||||
'<img src="' + item.qrcode + '" alt="' + item.label + '">' +
|
||||
'<div class="fw-qr-hint">扫码' + (item.type === 'group' ? '加群' : '关注') + '</div>' +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
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 += '<a class="fw-item" data-type="service" href="' + (item.url || 'javascript:;') + '" target="_blank">' +
|
||||
icon +
|
||||
'<div class="fw-popup">' + popupContent + '</div>' +
|
||||
'</a>';
|
||||
} else {
|
||||
html += '<div class="fw-item" data-type="' + item.type + '">' +
|
||||
icon +
|
||||
'<div class="fw-popup">' + popupContent + '</div>' +
|
||||
'</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// 回到顶部按钮
|
||||
html += '<div class="fw-item fw-back-top" id="fwBackTop">' + ICONS.arrowUp + '</div>';
|
||||
|
||||
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();
|
||||
}
|
||||
})();
|
||||
@@ -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>
|
||||
<!-- 右侧浮窗 — 由 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>
|
||||
</div>
|
||||
<div class="float-widget"></div>
|
||||
Reference in New Issue
Block a user