睿能科技
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

489 lines
20 KiB

<!doctype html>
<html lang="zh-CN">
{php}
// var_dump($hc_content);exit;
// 基本信息
$id = $hc_content['id'] ?? '';
$category_id = $hc_content['category_id'] ?? '';
$sub_category_ids = $hc_content['sub_category_ids'] ?? '';
$module_id = $hc_content['module_id'] ?? '';
$lang = $hc_content['lang'] ?? '';
$main_id = $hc_content['main_id'] ?? '';
$title = $hc_content['title'] ?? '';
$sub_title = $hc_content['sub_title'] ?? '';
$description = $hc_content['description'] ?? '';
$content = $hc_content['content'] ?? '';
$cover = $hc_content['cover'] ?? '';
$hits = $hc_content['hits'] ?? '';
$admin_id = $hc_content['admin_id'] ?? '';
$author = $hc_content['author'] ?? '';
$status = $hc_content['status'] ?? '';
$check_status = $hc_content['check_status'] ?? '';
$url = $hc_content['url'] ?? '';
$publish_time = $hc_content['publish_time'] ?? '';
$is_top = $hc_content['is_top'] ?? '';
$top_time = $hc_content['top_time'] ?? '';
$is_recommend = $hc_content['is_recommend'] ?? '';
$sort = $hc_content['sort'] ?? '';
$detail_tpl = $hc_content['detail_tpl'] ?? '';
$seo_title = $hc_content['seo_title'] ?? '';
$seo_keyword = $hc_content['seo_keyword'] ?? '';
$seo_description = $hc_content['seo_description'] ?? '';
$version = $hc_content['version'] ?? '';
$show_version = $hc_content['show_version'] ?? '';
$is_del = $hc_content['is_del'] ?? '';
$del_user_id = $hc_content['del_user_id'] ?? '';
$delete_time = $hc_content['delete_time'] ?? '';
$create_time = $hc_content['create_time'] ?? '';
$update_time = $hc_content['update_time'] ?? '';
$tag = $hc_content['tag'] ?? [];
// 缩略图
$thumbnail = (array)($hc_content['thumbnail'] ?? []);
$thumbnail_id = $thumbnail['id'] ?? '';
$thumbnail_name = $thumbnail['name'] ?? '';
$thumbnail_url = $thumbnail['url'] ?? '';
$thumbnail_type = $thumbnail['type'] ?? '';
$thumbnail_description = $thumbnail['description'] ?? '';
// 扩展内容
$main_content = $hc_content['main_content'] ?? [];
$main_content_id = $main_content['id'] ?? '';
$rich_text_two = $main_content['rich_text_two'] ?? '';
$pic_many_one = $main_content['pic_many_one'] ?? []; // 产品介绍多图
$pic_many = $main_content['pic_many'] ?? []; // 规格参数展示图集
$rich_text_three = $main_content['rich_text_three'] ?? ''; // 规格参数第一个富文本框
$rich_text_four = $main_content['rich_text_four'] ?? '';
$rich_text_five = $main_content['rich_text_five'] ?? '';
$rich_text_six = $main_content['rich_text_six'] ?? '';
$rich_text_seven = $main_content['rich_text_seven'] ?? '';
$resource_download_names = $main_content['resource_download_names'] ?? ''; // 下载文件自定义名称
$atlas = $main_content['atlas'] ?? [];
$file = $main_content['file'] ?? '';
$content_desc = $main_content['content_desc'] ?? '';
$mc_lang = $main_content['lang'] ?? '';
$lang_pid = $main_content['lang_pid'] ?? '';
$sub_id = $main_content['sub_id'] ?? '';
$mc_create_time = $main_content['create_time'] ?? '';
$mc_update_time = $main_content['update_time'] ?? '';
// 资源图片
$resource_pic = (array)($main_content['resource_pic'] ?? []);
$resource_pic_id = $resource_pic['id'] ?? '';
$resource_pic_name = $resource_pic['name'] ?? '';
$resource_pic_url = $resource_pic['url'] ?? '';
$resource_pic_type = $resource_pic['type'] ?? '';
$resource_pic_description = $resource_pic['description'] ?? '';
$resource_pic_children = $resource_pic['children'] ?? [];
// 资源下载
$resource_download = $main_content['resource_download'] ?? [];
{/php}
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{$title} - 睿能科技</title>
<meta name="keywords" content="{$seo_keyword}" />
<meta name="description" content="{$seo_description}" />
<!-- 公共CSS 自动被打包进页面 -->
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
<script>
// 设计稿 1920px 宽度下 1rem = 16Px;放在 head 里避免刷新时 rem 闪动
(function () {
var h = document.documentElement;
// 设计稿宽度
var DESIGN_WIDTH = 1920;
// 设计稿1rem = 16Px
var REM_AT_DESIGN = 16;
// 最小字体大小-限制, 同时注意所有的box的大小也有了最小限制
var MIN_ROOT_FONT_SIZE = 14;
function setRootFontSize() {
// 当前屏幕可视宽度(每次计算都取最新值)
var W = h.getBoundingClientRect().width;
var size = (W / DESIGN_WIDTH) * REM_AT_DESIGN;
if (size < MIN_ROOT_FONT_SIZE) size = MIN_ROOT_FONT_SIZE;
h.style.fontSize = size + "px";
}
setRootFontSize();
var resizeRaf = 0;
window.addEventListener("resize", function () {
if (resizeRaf) return;
resizeRaf = requestAnimationFrame(function () {
resizeRaf = 0;
setRootFontSize();
});
});
})();
</script>
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.23/dist/lenis.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
<link
href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script type="module" crossorigin src="/themes/dist_static/static/js/product.js"></script>
<link rel="modulepreload" crossorigin href="/themes/dist_static/static/js/common.js" />
<link rel="stylesheet" crossorigin href="/themes/dist_static/static/css/common.css" />
<link rel="stylesheet" crossorigin href="/themes/dist_static/static/css/product.css" />
</head>
<body>
<!-- header -->
<!-- header -->
{include file="components/header"}
<nav class="p-subnav" aria-label="产品导航" data-p-subnav aria-hidden="true">
<div class="p-subnav__inner section__wrap">
<p class="p-subnav__title">{$title}</p>
<div class="p-subnav__links" role="list">
<a class="p-subnav__link is-active" href="#p-intro" data-p-nav="p-intro" role="listitem">产品概况</a>
<a class="p-subnav__link" href="#p-spec" data-p-nav="p-spec" role="listitem">规格参数</a>
<a class="p-subnav__link" href="#p-download" data-p-nav="p-download" role="listitem">资料下载</a>
<a class="p-subnav__link" href="#p-related" data-p-nav="p-related" role="listitem">相关产品</a>
</div>
<a class="p-subnav__cta {if empty($content)}hidden{/if}" href="#p-spec" data-selection-trigger>查看选型表</a>
</div>
</nav>
<main class="main-product" data-header-dark data-nav="产品">
<section class="p-hero section__wrap">
<div class="p-hero__inner">
<h1 class="section__title">{$title}</h1>
<a class="s-btn s-btn--light s-btn--pill {if empty($content)}hidden{/if}" href="javascript:;" data-selection-trigger>查看选型表</a>
<div class="p-hero__media">
<div class="p-hero__mark" aria-hidden="true">{$sub_title}</div>
<img src="{:deal_image_url($thumbnail_url)}" width="434" height="601" alt="{$thumbnail_name}" />
</div>
</div>
</section>
<!-- 产品介绍 -->
<section class="p-intro section__wrap" id="p-intro">
<div class="p-intro__inner">
<div class="p-intro__visual">
<div class="p-intro__gallery swiper">
<div class="swiper-wrapper">
{volist name="pic_many_one" id="vo" key="key"}
<div class="swiper-slide">
<img src="{:deal_image_url($vo['url'] ?? '')}" width="200" height="514" alt="RA3产品图" />
</div>
{/volist}
</div>
</div>
<div class="p-intro__gallery-nav">
<div class="p-intro__gallery-pagination"></div>
</div>
</div>
<!-- 产品介绍,产品优势,产品特性 -->
<div class="p-intro__content">
{$rich_text_two|raw}
</div>
</div>
</section>
<!-- 规格参数 , 如果第一个富文本没有内容,则整个规格参数都不显示-->
<section class="p-spec section__wrap" id="p-spec" {if empty($rich_text_three)}style="display: none"{/if}>
<div class="p-spec__inner">
<h2 class="section__title">规格参数</h2>
<div class="p-spec__models" {if empty($pic_many)}style="display: none"{/if}>
<span class="p-spec__models-label">产品型号</span>
<div class="p-spec__tabs nav" role="tablist" aria-label="产品型号">
<!-- 规格参数,产品型号 -->
{php}
$total_standard_num = 0;
{/php}
{volist name="pic_many" id="vo" key="key"}
<button
type="button"
class="p-spec__tab nav-link {if $key==1}active{/if}"
id="p-spec-tab-{$key}"
data-bs-toggle="tab"
data-bs-target="#p-spec-panel-{$key}"
role="tab"
aria-controls="p-spec-panel-{$key}"
aria-selected="{if $key==1}true{else /}false{/if}"
>
<span class="p-spec__tab-media">
<img src="{:deal_image_url($vo['url'] ?? '')}" width="80" height="111" alt="" />
</span>
<span class="p-spec__tab-name">{$vo.description}</span>
</button>
{php}
$total_standard_num++;
{/php}
{/volist}
</div>
</div>
<div class="p-spec__body tab-content">
{volist name="pic_many" id="vo" key="key"}
<div
class="tab-pane fade {if $key==1}show active{/if}"
id="p-spec-panel-{$key}"
role="tabpanel"
aria-labelledby="p-spec-tab-{$key}"
tabindex="0"
>
{switch $key}
{case 1}{$rich_text_three|raw}{/case}
{case 2}{$rich_text_four|raw}{/case}
{case 3}{$rich_text_five|raw}{/case}
{case 4}{$rich_text_six|raw}{/case}
{case 5}{$rich_text_seven|raw}{/case}
{default /}暂无匹配内容
{/switch}
</div>
{/volist}
{if $total_standard_num == 0}
<!-- 无型号 tabs 时仅展示第一个富文本 -->
{$rich_text_three|raw}
{/if}
</div>
</div>
</section>
<!-- 资料下载 -->
<!-- 处理下载资料名称 -->
{php}
// 1. 直接按照 %% 分割
$mainArray = explode("%%", $resource_download_names);
$download_names = [];
// 2. 遍历并拆分
foreach ($mainArray as $item) {
if (trim($item) !== '' && !empty($item)) {
$download_names[] = explode("##", trim($item));
}
}
// 文件匹配
$map = [
'png' => '图片',
'jpg' => '图片',
'jpeg' => '图片',
'pdf' => 'PDF',
'doc' => 'DOC',
'docx' => 'DOC',
'zip' => '压缩包',
'7z' => '压缩包',
'rar' => '压缩包',
];
{/php}
<section class="p-download section__wrap" id="p-download">
<div class="p-download__inner">
<div class="p-download__visual">
<img src="{:deal_image_url($resource_pic['url'] ?? '')}" width="354" height="447" alt="RA3资料示意" />
</div>
<div class="p-download__content">
<h2 class="section__title">资料下载</h2>
<ul class="p-download__list">
{volist name="resource_download" id="one_resource" key="key"}
{php}
$downloadUrl = trim((string)($one_resource['url'] ?? ''));
$hasDownload = $downloadUrl !== '';
$nameTmp = $download_names[$key-1][0] ?? ($one_resource['name'] ?? '文件-'.$key);
$descTmp = $download_names[$key-1][1] ?? ('描述-'.$key);
$dateTmp = $download_names[$key-1][2] ?? ('日期-'.$key);
$ext = $hasDownload ? strtolower(pathinfo($downloadUrl, PATHINFO_EXTENSION)) : '';
$file_type_name = $map[$ext] ?? '未知文件';
// 下载文件名与页面展示名一致(展示名未带扩展名时补充)
$download_name = ($ext !== '' && strtolower(pathinfo($nameTmp, PATHINFO_EXTENSION)) === $ext) ? $nameTmp : rtrim($nameTmp, '.') . ($ext !== '' ? '.' . $ext : '');
{/php}
<li class="p-download__item">
<div class="p-download__info">
<h3 class="p-download__name">
{if $hasDownload}
<a href="{$downloadUrl}" target="_blank" rel="noopener" title="预览">{$nameTmp}</a>
{else /}
<span class="is-disabled" aria-disabled="true">{$nameTmp}</span>
{/if}
</h3>
<p class="p-download__meta">
<span>{$descTmp}</span>
<span class="p-download__meta-divider"></span>
<time datetime="2025-10-11">{$dateTmp}</time>
</p>
</div>
<a
class="p-download__link{if !$hasDownload} is-disabled{/if}"
href="{if $hasDownload}{$downloadUrl}{else /}javascript:;{/if}"
{if $hasDownload}download="{$download_name}"{else /}aria-disabled="true" tabindex="-1" onclick="return false;"{/if}
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="24.000000"
height="24.000000"
fill="none"
customFrame="#000000"
>
<g id="frame">
<path
id="Vector"
d="M16.4405 8.8999C20.0405 9.2099 21.5105 11.0599 21.5105 15.1099L21.5105 15.2399C21.5105 19.7099 19.7205 21.4999 15.2505 21.4999L8.74047 21.4999C4.27047 21.4999 2.48047 19.7099 2.48047 15.2399L2.48047 15.1099C2.48047 11.0899 3.93047 9.2399 7.47047 8.9099"
fill-rule="nonzero"
stroke="rgb(102,102,102)"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.500000"
/>
<path
id="Vector"
d="M0 0L12.88 0"
stroke="rgb(102,102,102)"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.500000"
transform="matrix(0,1,-1,0,12,2)"
/>
<path
id="Vector"
d="M15.3504 12.6499L12.0004 15.9999L8.65039 12.6499"
fill-rule="nonzero"
stroke="rgb(102,102,102)"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.500000"
/>
<path
id="Vector"
d="M24 0L0 0L0 24L24 24L24 0ZM1 23L1 1L23 1L23 23L1 23Z"
opacity="0"
fill="rgb(102,102,102)"
fill-rule="evenodd"
transform="matrix(-1,-1.22465e-16,1.22465e-16,-1,24,24)"
/>
</g>
</svg>
<span>下载{$file_type_name}</span>
</a>
</li>
{/volist}
</ul>
</div>
</div>
</section>
<!-- 相关产品 -->
<section class="p-related section__wrap" id="p-related">
<div class="p-related__inner">
<div class="p-related__header">
<h2 class="section__title">相关产品</h2>
<div class="s-arrows">
<button type="button" class="s-arrows__prev" aria-label="上一项">
<svg viewBox="0 0 12.2529 11.314" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.252930" height="11.313965" fill="none" customFrame="#000000">
<path
id="合并"
d="M5.18202 1.41422L6.59622 0L12.2531 5.65686L12.2529 5.65702L10.8389 7.07108L6.59608 11.3139L5.18186 9.89966L8.4245 6.65702L-0 6.65702L0 4.657L8.42482 4.65702L5.18202 1.41422Z"
fill="rgb(239,67,53)"
fill-rule="evenodd"
/>
</svg>
</button>
<button type="button" class="s-arrows__next" aria-label="下一项">
<svg viewBox="0 0 12.2529 11.314" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.252930" height="11.313965" fill="none" customFrame="#000000">
<path
id="合并"
d="M5.18202 1.41422L6.59622 0L12.2531 5.65686L12.2529 5.65702L10.8389 7.07108L6.59608 11.3139L5.18186 9.89966L8.4245 6.65702L-0 6.65702L0 4.657L8.42482 4.65702L5.18202 1.41422Z"
fill="rgb(239,67,53)"
fill-rule="evenodd"
/>
</svg>
</button>
</div>
</div>
<div class="p-related__swiper swiper">
<div class="swiper-wrapper">
{hcTaglib:contentPage2 cid="$category_id" mainField="id,category_id,title,sub_title,thumbnail" subField="" name="hc_content" limit="30" item="content_sub22" sort="sort asc"}
{/hcTaglib:contentPage2}
{volist name="hc_content" id="vo_content"}
<article class="swiper-slide p-related__card">
<a class="p-related__link" href="{:hcUrl('detail/index',['id'=>$vo_content['id'],'cid'=>$vo_content['category_id']])}">
<div class="p-related__media">
<img src="{$vo_content['thumbnail']['url'] ?? ''}" width="100" height="206" alt="" />
</div>
<div class="p-related__foot">
<h3 class="p-related__name">{$vo_content.title}</h3>
<span class="p-related__arrow" aria-hidden="true">
<svg viewBox="0 0 12.2529 11.314" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12.252930" height="11.313965" fill="none" customFrame="#000000">
<path
id="合并"
d="M5.18202 1.41422L6.59622 0L12.2531 5.65686L12.2529 5.65702L10.8389 7.07108L6.59608 11.3139L5.18186 9.89966L8.4245 6.65702L-0 6.65702L0 4.657L8.42482 4.65702L5.18202 1.41422Z"
fill="rgb(239,67,53)"
fill-rule="evenodd"
/>
</svg>
</span>
</div>
</a>
</article>
{/volist}
</div>
<!-- <div class="p-related__pagination swiper-pagination"></div> -->
</div>
</div>
</section>
</main>
{include file="components/mask"}
<!-- 模块:底部 -->
{include file="components/footer"}
<script src="https://unpkg.com/lenis@1.3.23/dist/lenis.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script
src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.js"></script>
<script src="https://unpkg.com/counterup2@2.0.2/dist/index.js"></script>
<div class="p-selection-modal" id="p-selection-modal" data-selection-modal hidden>
<div class="p-selection-modal__overlay" data-selection-close></div>
<div class="p-selection-modal__dialog" role="dialog" aria-modal="true" aria-label="选型表">
<div class="p-selection-modal__head">
<h2 class="p-selection-modal__title">选型表</h2>
<button type="button" class="p-selection-modal__close" aria-label="关闭" data-selection-close>
<svg
viewBox="0 0 24 24"
width="24"
height="24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path d="M6 6L18 18M18 6L6 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
</button>
</div>
<div class="p-selection-modal__body">
<div class="p-selection-modal__table-wrap" data-lenis-prevent>
{$content|raw}
</div>
</div>
</div>
</div>
</body>
</html>