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.
388 lines
19 KiB
388 lines
19 KiB
<!doctype html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<base href="../">
|
|
<title>经典案例 - 宅极慧</title>
|
|
<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 = 10
|
|
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/aos@next/dist/aos.css" />
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
|
|
<link rel="stylesheet" href="themes/static_new/styles/font.css">
|
|
<link rel="stylesheet" href="themes/static_new/styles/var.css">
|
|
<link rel="stylesheet" href="themes/static_new/styles/font-size.css">
|
|
<link rel="stylesheet" href="themes/static_new/styles/base.css">
|
|
<link rel="stylesheet" href="themes/static_new/styles/layout.css">
|
|
<link rel="stylesheet" href="themes/static_new/styles/components.css">
|
|
<link rel="stylesheet" href="themes/static_new/styles/sections/header.css">
|
|
<link rel="stylesheet" href="themes/static_new/styles/sections/footer.css">
|
|
<link rel="stylesheet" href="themes/static_new/styles/sections/mask.css">
|
|
<link rel="stylesheet" href="themes/static_new/styles/sections/contact-us.css">
|
|
|
|
<script type="module" crossorigin src="themes/static_new/static/js/casePage.js"></script>
|
|
<link rel="modulepreload" crossorigin href="themes/static_new/static/js/modulepreload-polyfill.js">
|
|
<link rel="stylesheet" crossorigin href="themes/static_new/static/css/casePage.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- header--START -->
|
|
{include file="components/header"}
|
|
<!-- header--END -->
|
|
|
|
<div class="case-page">
|
|
{hcTaglib:category id="253" item="vo" field="*"}
|
|
<section class="section__banner" style="background-image: url('{$vo.banner.url|default=''}');">
|
|
<div class="section__banner__inner">
|
|
<h1 class="section__banner__title">{$vo.sub_title}</h1>
|
|
</div>
|
|
</section>
|
|
{/hcTaglib:category}
|
|
|
|
<section class="cp-section-1" data-header-dark>
|
|
<div class="section__inner">
|
|
<div class="section__inner_head">
|
|
<div class="section__header align-items-center">
|
|
{hcTaglib:category id="253" item="vo" field="*"}
|
|
<p class="section__title__red">{$vo.sub_title}</p>
|
|
{/hcTaglib:category}
|
|
{hcTaglib:category id="310" item="vo" field="*"}
|
|
<h2 id="yimei-section-1-title" class="section__title">{$vo.title}</h2>
|
|
{/hcTaglib:category}
|
|
|
|
</div>
|
|
<ul class="nav" role="tablist">
|
|
<li class="nav-item active" role="tab" data-bs-toggle="tab"
|
|
data-bs-target="#case-page-s2-panel-all" role="tab">
|
|
全部
|
|
</li>
|
|
|
|
{hcTaglib:subcategory pid="310" name="hc_content" item="vo" sort="sort asc"}
|
|
<li class="nav-item" role="tab" data-bs-toggle="tab" data-bs-target="#case-page-s2-panel-{$key-1}"
|
|
role="tab">
|
|
{$vo.title}
|
|
</li>
|
|
{/hcTaglib:subcategory}
|
|
|
|
|
|
<!-- <li class="nav-item" role="tab" data-bs-toggle="tab" data-bs-target="#case-page-s2-panel-0" -->
|
|
<!-- role="tab"> -->
|
|
<!-- 智能家居系统 -->
|
|
<!-- </li> -->
|
|
|
|
<!-- <li class="nav-item" role="tab" data-bs-toggle="tab" data-bs-target="#case-page-s2-panel-1" -->
|
|
<!-- role="tab"> -->
|
|
<!-- 酒店客房控制系统 -->
|
|
<!-- </li> -->
|
|
|
|
<!-- <li class="nav-item" role="tab" data-bs-toggle="tab" data-bs-target="#case-page-s2-panel-2" -->
|
|
<!-- role="tab"> -->
|
|
<!-- 灯光控制系统 -->
|
|
<!-- </li> -->
|
|
|
|
<!-- <li class="nav-item" role="tab" data-bs-toggle="tab" data-bs-target="#case-page-s2-panel-3" -->
|
|
<!-- role="tab"> -->
|
|
<!-- 智慧医疗解决方案 -->
|
|
<!-- </li> -->
|
|
|
|
<!-- <li class="nav-item" role="tab" data-bs-toggle="tab" data-bs-target="#case-page-s2-panel-4" -->
|
|
<!-- role="tab"> -->
|
|
<!-- 中央空调系统 -->
|
|
<!-- </li> -->
|
|
|
|
<!-- <li class="nav-item" role="tab" data-bs-toggle="tab" data-bs-target="#case-page-s2-panel-5" -->
|
|
<!-- role="tab"> -->
|
|
<!-- 绿色能源 -->
|
|
<!-- </li> -->
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
<div class="section__inner_body">
|
|
<div class="tab-content">
|
|
{hcTaglib:subcategory pid="310" name="hc_subcategory" item="vo" sort="sort asc" onlyData="1"}
|
|
{/hcTaglib:subcategory}
|
|
|
|
{php}
|
|
$finalData = [];
|
|
$allData = [];
|
|
{/php}
|
|
{volist name="hc_subcategory" id="vo" key="key"}
|
|
{hcTaglib:contentPage2 cid="$vo.id" mainField="*" subField="*" name="hc_content" limit="10" item="vo22" sort="sort asc"}
|
|
{php}
|
|
$finalData[$vo['id']][] = $vo22;
|
|
if (!empty($vo22)) {
|
|
$allData[] = $vo22->toArray();
|
|
}
|
|
{/php}
|
|
{/hcTaglib:contentPage2}
|
|
{/volist}
|
|
|
|
{php}
|
|
// 进行多字段排序
|
|
if (!empty($allData)) {
|
|
// 提取排序字段
|
|
$sorts = array_column($allData, 'sort');
|
|
// $createTimes = array_column($allData, 'create_time');
|
|
// 多字段排序：sort 倒序，create_time 倒序
|
|
// array_multisort($sorts, SORT_DESC, $createTimes, SORT_DESC, $allData);
|
|
array_multisort($sorts, SORT_DESC, $allData);
|
|
}
|
|
{/php}
|
|
|
|
<div class="tab-pane fade show active" id="case-page-s2-panel-all" role="tabpanel">
|
|
<div class="case-grid">
|
|
<!-- 获取所有分类 -->
|
|
{volist name="allData" id="vo" key="key"}
|
|
<div class="case-card">
|
|
<div class="card-image">
|
|
<img src="{$vo.thumbnail.url|default=''}" alt="{$vo.title}">
|
|
</div>
|
|
<div class="card-content">
|
|
<h3 class="card-title">{$vo.title} </h3>
|
|
<p class="card-desc">{$vo.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/volist}
|
|
</div>
|
|
</div>
|
|
|
|
{volist name="hc_subcategory" id="vo" key="key"}
|
|
<div class="tab-pane fade" id="case-page-s2-panel-{$key-1}" role="tabpanel">
|
|
<div class="case-grid">
|
|
{php}
|
|
$currentList = $finalData[$vo['id']] ?? [];
|
|
{/php}
|
|
{volist name="currentList" id="vo2" key="key"}
|
|
<div class="case-card">
|
|
<div class="card-image">
|
|
<img src="{$vo2.thumbnail.url|default=''}" alt="{$vo2.title}">
|
|
</div>
|
|
<div class="card-content">
|
|
<h3 class="card-title">{$vo2.title} </h3>
|
|
<p class="card-desc">{$vo2.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/volist}
|
|
|
|
</div>
|
|
</div>
|
|
{/volist}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="cp-section-2 section-wrap" data-header-dark>
|
|
<div class="section__inner">
|
|
<div class="section__inner_head">
|
|
<div class="section__header align-items-center">
|
|
<p class="section__title__red">联系我们</p>
|
|
<h2 id="yimei-section-1-title" class="section__title">用智能科技让每一座建筑都更懂生活</h2>
|
|
</div>
|
|
</div>
|
|
<!-- 联系我们表单 -->
|
|
<div class="contact-us" data-aos="fade-up">
|
|
<!-- 左侧：联系信息 -->
|
|
<div class="content_left">
|
|
<!-- 手机号 -->
|
|
<div class="info-item">
|
|
<label>
|
|
{hcTaglib:category id="80" item="vo" field="*"}
|
|
<img src="{$vo['thumbnail']['url']|default=''}" class="case-icon" />
|
|
<span>{$vo.title}</span>
|
|
{/hcTaglib:category}
|
|
</label>
|
|
<div class="info-detail">
|
|
{hcTaglib:content cid="80" moduleId='1' mainField="*" subField="*" name="case_top" item="vo" sort="sort asc"}
|
|
<!-- <span class="number">{$vo.title}</span> -->
|
|
<span class="number">{$vo.title}<small>{$vo.sub_title}</small></span>
|
|
{/hcTaglib:content}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 邮箱 -->
|
|
<div class="info-item">
|
|
{hcTaglib:category id="81" item="vo" field="*"}
|
|
<label>
|
|
<img src="{$vo['thumbnail']['url']|default=''}" class="case-icon email" />
|
|
<span>{$vo.sub_title}</span>
|
|
</label>
|
|
<div class="info-detail">
|
|
<span class="number">{$vo.sub_title}</span>
|
|
</div>
|
|
{/hcTaglib:category}
|
|
</div>
|
|
|
|
<!-- 二维码 -->
|
|
<div class="qr-group">
|
|
{hcTaglib:content cid="82" moduleId='1' mainField="*" subField="*" name="case_top" item="vo" sort="sort asc"}
|
|
<div class="qr-item">
|
|
<img src="{$vo['thumbnail']['url']|default=''}" alt="{$vo.title}">
|
|
<span>{$vo.sub_title}<br />
|
|
{$vo.title}</span>
|
|
</div>
|
|
{/hcTaglib:content}
|
|
|
|
<!-- <div class="qr-item"> -->
|
|
<!-- <img src="../assets/images/case-page/section-2-img-1.png" alt="微信"> -->
|
|
<!-- <span>扫码添加<br /> -->
|
|
<!-- 微信</span> -->
|
|
<!-- </div> -->
|
|
<!-- <div class="qr-item"> -->
|
|
<!-- <img src="../assets/images/case-page/section-2-img-2.png" alt="微信"> -->
|
|
<!-- <span>扫码添加<br />Whatsapp</span> -->
|
|
<!-- </div> -->
|
|
|
|
</div>
|
|
|
|
<!-- 办事处 -->
|
|
<div class="office-group">
|
|
<label>
|
|
{hcTaglib:category id="83" item="vo" field="*"}
|
|
<img src="{$vo['thumbnail']['url']|default=''}" class="case-icon" />
|
|
<span>{$vo.title}</span>
|
|
{/hcTaglib:category}
|
|
</label>
|
|
|
|
<div class="office-list">
|
|
|
|
{hcTaglib:content cid="83" moduleId='1' mainField="*" subField="*" name="case_top" item="vo" sort="sort asc"}
|
|
<div class="office-item">
|
|
<img src="{$vo['thumbnail']['url']|default=''}">
|
|
<span>{$vo.title}</span>
|
|
</div>
|
|
|
|
<!-- <div class="office-item"> -->
|
|
<!-- <img src="../assets/images/case-page/section-2-icon-5.png"> -->
|
|
<!-- <span>上海韩浓机电有限公司</span> -->
|
|
<!-- </div> -->
|
|
|
|
<!-- <div class="office-item"> -->
|
|
<!-- <img src="../assets/images/case-page/section-2-icon-6.png"> -->
|
|
<!-- <span>香港宅极慧有限公司</span> -->
|
|
<!-- </div> -->
|
|
{/hcTaglib:content}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 右侧：表单预约 在线预约 -->
|
|
<div class="content_right">
|
|
<h2 class="form-title">在线预约</h2>
|
|
<form class="booking-form">
|
|
<div class="input-group">
|
|
<input type="text" placeholder="请输入您的姓名">
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="tel" placeholder="请输入您的电话">
|
|
</div>
|
|
<div class="input-group">
|
|
<textarea placeholder="留言内容"></textarea>
|
|
</div>
|
|
<button type="submit" class="submit-btn s-btn glass-card">立即提交</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
<!-- footer--START -->
|
|
{include file="components/footer"}
|
|
<!-- footer--END -->
|
|
|
|
<div class="mask" id="mask">
|
|
<header class="mask-header">
|
|
<button class="mask-header__icon-btn search-btn toggle" type="button" aria-expanded="false" aria-controls="mask"
|
|
aria-label="关闭导航菜单">
|
|
<svg class="nav-toggle-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<rect class="nav-toggle-icon__bar nav-toggle-icon__bar--top" x="4" y="6" width="16" height="2" rx="1" />
|
|
<rect class="nav-toggle-icon__bar nav-toggle-icon__bar--mid" x="4" y="11" width="16" height="2" rx="1" />
|
|
<rect class="nav-toggle-icon__bar nav-toggle-icon__bar--bot" x="4" y="16" width="16" height="2" rx="1" />
|
|
</svg>
|
|
</button>
|
|
</header>
|
|
<div class="mask-content">
|
|
<div class="mask-footer__nav-col">
|
|
<h4>产品中心</h4>
|
|
<a href="/product-smart-home/index.html">智能家居系统</a>
|
|
<a href="/yimei/index.html">智慧医养解决方案</a>
|
|
<a href="/jiudian/index.html">酒店客房控制系统</a>
|
|
<a href="/dengguang/index.html">智能灯控系统</a>
|
|
<a href="/kongtiao/index.html">中央空调系统</a>
|
|
<a href="/green-energy/index.html">绿色能源解决方案</a>
|
|
</div>
|
|
<div class="mask-footer__nav-col">
|
|
<h4>解决方案</h4>
|
|
</div>
|
|
<div class="mask-footer__nav-col">
|
|
<h4>经典案例</h4>
|
|
<a href="#">智能家居</a>
|
|
<a href="#">智慧酒店</a>
|
|
<a href="#">智慧商建</a>
|
|
<a href="#">智能照明</a>
|
|
</div>
|
|
<div class="mask-footer__nav-col">
|
|
<h4>关于宅极慧</h4>
|
|
<a href="/about/index.html">宅极慧iHM</a>
|
|
<a href="#">企业文化</a>
|
|
<a href="#">发展历史</a>
|
|
<a href="#">荣誉资质</a>
|
|
<a href="#">加入我们</a>
|
|
<a href="#">联系我们</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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/gsap@3.15/dist/SplitText.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
|
<script src="https://unpkg.com/lenis@1.3.23/dist/lenis.min.js"></script>
|
|
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
|
|
<script src="https://unpkg.com/counterup2@2.0.2/dist/index.js"></script>
|
|
<script src="themes/static_new/index.js"></script>
|
|
|
|
</body>
|
|
|
|
</html>
|