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.
335 lines
17 KiB
335 lines
17 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{$current_cate.seo_title}</title>
|
|
<meta name="keywords" content="{$current_cate.seo_keywords}">
|
|
<meta name="description" content="{$current_cate.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/about.js"></script>
|
|
<link rel="modulepreload" crossorigin href="/themes/dist_static/static/js/common.js">
|
|
<link rel="modulepreload" crossorigin href="/themes/dist_static/static/js/earth.js">
|
|
<link rel="stylesheet" crossorigin href="/themes/dist_static/static/css/common.css">
|
|
<link rel="stylesheet" crossorigin href="/themes/dist_static/static/css/about.css">
|
|
</head>
|
|
<body>
|
|
<!-- 引入公共头部 -->
|
|
<!-- header -->
|
|
{include file="components/header"}
|
|
|
|
<main class="main-about" data-nav="{$current_cate.title}">
|
|
<section class="ab-hero">
|
|
<div class="ab-hero__title section__wrap" data-header-dark>
|
|
<h1>
|
|
<span>{$current_cate.content|raw}</span>
|
|
</h1>
|
|
</div>
|
|
<div class="ab-hero__media" aria-hidden="true">
|
|
<video src="{$current_cate.description}" muted autoplay loop playsinline width="1920" height="720"></video>
|
|
</div>
|
|
</section>
|
|
{hcTaglib:category id="372" item="vo" field="*"}
|
|
<section class="ab-intro section__wrap" id="intro" data-header-dark>
|
|
<h2 class="ab-intro__title">{$vo.title}</h2>
|
|
<div class="ab-intro__body">
|
|
<div class="ab-intro__texts">
|
|
<p>{:nl2br($vo.description)}</p>
|
|
</div>
|
|
{php}
|
|
$stats_raw = explode(',', $vo['desc']);
|
|
$stats_list = [];
|
|
foreach ($stats_raw as $item) {
|
|
$parts = explode(';', $item);
|
|
if (count($parts) === 3) {
|
|
$stats_list[] = ['num' => $parts[0], 'unit' => $parts[1], 'text' => $parts[2]];
|
|
}
|
|
}
|
|
{/php}
|
|
<ul class="ab-intro__stats">
|
|
{volist name="stats_list" id="stat"}
|
|
<li>
|
|
<strong><span class="counter">{$stat.num}</span><span class="ab-intro__stats-unit">{$stat.unit}</span></strong>
|
|
<span>{$stat.text}</span>
|
|
</li>
|
|
{/volist}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
{/hcTaglib:category}
|
|
|
|
|
|
{hcTaglib:category id="373" item="vo" field="*"}
|
|
<section class="ab-history" id="history" data-header-dark style="background-image: url({$vo.thumbnail.url ?? ''})">
|
|
<div class="ab-history__head section__wrap">
|
|
<h2 class="ab-history__title">{$vo.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="ab-history__swiper swiper section__wrap">
|
|
<div class="swiper-wrapper">
|
|
{hcTaglib:content cid="$vo.id" moduleId="1" name="contentList" item="case_top" limit="9999" mainField="id,title,sub_title,content,thumbnail" sort="sort desc" subField="" onlyData="2"}
|
|
<article class="swiper-slide ab-history__slide">
|
|
<time class="ab-history__year" datetime="2025">{$case_top.sub_title}<span>年</span></time>
|
|
<div class="ab-history__dot" aria-hidden="true"></div>
|
|
<h3 class="ab-history__slide-title">{$case_top.title}</h3>
|
|
<!-- <p class="ab-history__slide-desc">{$case_top.content|strip_tags|raw}</p> -->
|
|
<div class="ab-history__media">
|
|
<img src="{$case_top.thumbnail.url ?? ''}" alt="" width="400" height="260" loading="lazy" />
|
|
</div>
|
|
</article>
|
|
{/hcTaglib:content}
|
|
</div>
|
|
</div>
|
|
<div class="ab-history__arrows-mobile">
|
|
<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>
|
|
</section>
|
|
{/hcTaglib:category}
|
|
{hcTaglib:category id="374" item="vo" field="*"}
|
|
<section class="ab-culture" id="culture">
|
|
<div class="ab-culture__bg" aria-hidden="true">
|
|
<img src="{$vo.thumbnail.url ?? ''}" alt="" width="1920" height="900" />
|
|
</div>
|
|
<div class="ab-culture__inner section__wrap">
|
|
<h2 class="ab-culture__title">{$vo.title}</h2>
|
|
{php}
|
|
$culture_raw = explode('#', $vo['description']);
|
|
$culture_list = [];
|
|
foreach ($culture_raw as $item) {
|
|
$parts = explode(';', $item);
|
|
if (count($parts) === 3) {
|
|
$culture_list[] = ['zh' => $parts[0], 'en' => $parts[1], 'text' => $parts[2]];
|
|
}
|
|
}
|
|
{/php}
|
|
<div class="ab-culture__list">
|
|
{volist name="culture_list" id="culture"}
|
|
<div class="ab-culture__item">
|
|
<div class="ab-culture__label">
|
|
<span class="ab-culture__label-zh">{$culture.zh}</span>
|
|
<span class="ab-culture__label-en">{$culture.en}</span>
|
|
</div>
|
|
<p class="ab-culture__text">{$culture.text|raw}</p>
|
|
</div>
|
|
{/volist}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/hcTaglib:category}
|
|
|
|
{hcTaglib:category id="375" item="vo" field="*"}
|
|
<section class="ab-global section__wrap" id="global" data-header-dark>
|
|
<h2 class="ab-global__title">{$vo.title}</h2>
|
|
{php}
|
|
$global_raw = explode(',', $vo['description']);
|
|
$global_list = [];
|
|
foreach ($global_raw as $item) {
|
|
$parts = explode(';', $item, 3);
|
|
if (count($parts) >= 2) {
|
|
$desc = isset($parts[2]) ? str_replace(';', '<br>', $parts[2]) : '';
|
|
$global_list[] = ['num' => $parts[0], 'unit' => $parts[1], 'desc' => $desc];
|
|
}
|
|
}
|
|
$global_left = array_slice($global_list, 0, 3);
|
|
$global_right = array_slice($global_list, 3);
|
|
{/php}
|
|
<div class="ab-global__layout">
|
|
<ul class="ab-global__side ab-global__side--left">
|
|
{volist name="global_left" id="item"}
|
|
<li>
|
|
<strong><span class="counter">{$item.num}</span><span>{$item.unit}</span></strong>
|
|
{if $item.desc}<span class="ab-global__side-desc">{$item.desc|raw}</span>{/if}
|
|
</li>
|
|
{/volist}
|
|
</ul>
|
|
<div class="ab-global__visual">
|
|
<canvas id="earth-canvas" class="ab-global__earth"></canvas>
|
|
</div>
|
|
<ul class="ab-global__side ab-global__side--right">
|
|
{volist name="global_right" id="item"}
|
|
<li>
|
|
<strong><span class="counter">{$item.num}</span><span>{$item.unit}</span></strong>
|
|
{if $item.desc}<span class="ab-global__side-desc">{$item.desc|raw}</span>{/if}
|
|
</li>
|
|
{/volist}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
{/hcTaglib:category}
|
|
|
|
{hcTaglib:category id="376" item="vo" field="*"}
|
|
<section class="ab-members" id="members">
|
|
<div class="ab-members__bg" aria-hidden="true">
|
|
<img src="{$vo.thumbnail.url ?? ''}" alt="" width="1920" height="900" />
|
|
</div>
|
|
<div class="ab-members__inner section__wrap">
|
|
<h2 class="ab-members__title">{$vo.title}</h2>
|
|
<div class="ab-members__card">
|
|
<div class="ab-members__panels-swiper swiper">
|
|
<div class="ab-members__panels swiper-wrapper">
|
|
{php}$member_idx = 0;{/php}
|
|
{hcTaglib:content cid="$vo.id" moduleId="1" name="contentList" item="case_top" limit="50" mainField="id,url,title,sub_title,content,thumbnail" sort="sort asc" subField="" onlyData="2"}
|
|
<div class="ab-members__panel swiper-slide" id="ab-member-panel-{$case_top.id}" data-index="{$member_idx}">
|
|
<div class="ab-members__content">
|
|
<div>
|
|
<h3 class="ab-members__name">{$case_top.title}</h3>
|
|
<p class="ab-members__desc">
|
|
{$case_top.content|strip_tags}
|
|
</p>
|
|
</div>
|
|
<a target="_blank" class="s-btn s-btn--outline s-btn--pill ab-members__more" href="{$case_top.url ?? '#'}">探索更多</a>
|
|
</div>
|
|
</div>
|
|
{php}$member_idx++;{/php}
|
|
{/hcTaglib:content}
|
|
</div>
|
|
</div>
|
|
<div class="ab-members__logos" role="tablist" aria-label="集团成员">
|
|
{php}$member_idx = 0;{/php}
|
|
{hcTaglib:content cid="$vo.id" moduleId="1" name="contentList" item="case_top" limit="50" mainField="id,title,sub_title,content,thumbnail" sort="sort desc" subField="" onlyData="2"}
|
|
<button type="button" class="ab-members__logo{if $member_idx == 0} is-active{/if}" id="ab-member-tab-{$case_top.id}"
|
|
data-index="{$member_idx}"
|
|
role="tab" aria-controls="ab-member-panel-{$case_top.id}" aria-selected="{if $member_idx == 0}true{else}false{/if}">
|
|
<img src="{$case_top.thumbnail.url ?? ''}" alt="{$case_top.title}" width="160" height="60" />
|
|
</button>
|
|
{php}$member_idx++;{/php}
|
|
{/hcTaglib:content}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/hcTaglib:category}
|
|
|
|
{hcTaglib:category id="377" item="vo" field="*"}
|
|
<section class="ab-honors section__wrap" id="honors" data-header-dark>
|
|
<div class="ab-honors__head">
|
|
<h2 class="ab-honors__title">{$vo.title}</h2>
|
|
<p class="ab-honors__desc">{$vo.description}</p>
|
|
</div>
|
|
<div class="ab-honors__body">
|
|
<ul class="ab-honors__list">
|
|
{hcTaglib:content cid="$vo.id" moduleId="1" name="contentList" item="case_top" limit="999" mainField="id,url,title,sub_title,content,thumbnail" sort="sort asc" subField="" onlyData="2"}
|
|
<li class="ab-honors__item">
|
|
<span class="ab-honors__name">{$case_top.title}</span>
|
|
<a class="ab-honors__view" href="javascript:;">
|
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
|
|
<g id="eye">
|
|
<path d="M12.0019 15.5799C10.0219 15.5799 8.42188 13.9799 8.42188 11.9999C8.42188 10.0199 10.0219 8.41992 12.0019 8.41992C13.9819 8.41992 15.5819 10.0199 15.5819 11.9999C15.5819 13.9799 13.9819 15.5799 12.0019 15.5799Z" fill-rule="nonzero" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
|
|
<path d="M21.1098 14.5907C22.0098 13.1807 22.0098 10.8107 21.1098 9.4007C18.8198 5.8007 15.5298 3.7207 11.9998 3.7207C8.46984 3.7207 5.17984 5.8007 2.88984 9.4007C1.98984 10.8107 1.98984 13.1807 2.88984 14.5907C5.17984 18.1907 8.46984 20.2707 11.9998 20.2707C15.5298 20.2707 18.8198 18.1907 21.1098 14.5907Z" fill-rule="nonzero" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" />
|
|
</g>
|
|
</svg>
|
|
|
|
<span>查看证书</span>
|
|
<span class="ab-honors__pop" aria-hidden="true">
|
|
<img class="ab-honors__cert-img" src="{$case_top.thumbnail.url ?? ''}" alt="荣誉证书" />
|
|
</span>
|
|
</a>
|
|
</li>
|
|
{/hcTaglib:content}
|
|
</ul>
|
|
<button type="button" class="ab-honors__more">
|
|
<span>展开更多</span>
|
|
<img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2011.2728%206.90918'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='11.272827'%20height='6.909180'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='矢量%202'%20d='M0.636353%200.636272L5.63635%205.63627L10.6364%200.63623'%20stroke='rgb(102,102,102)'%20stroke-width='1.800000'%20/%3e%3c/svg%3e" alt="" width="12" height="6" />
|
|
</button>
|
|
</div>
|
|
</section>
|
|
{/hcTaglib:category}
|
|
|
|
{hcTaglib:category id="378" item="vo" field="*"}
|
|
<section class="ab-csr" id="csr">
|
|
<div class="ab-csr__bg" aria-hidden="true">
|
|
<img src="{$vo.thumbnail.url ?? ''}" alt="" width="1920" height="720" />
|
|
</div>
|
|
<div class="ab-csr__inner section__wrap">
|
|
<h2 class="ab-csr__title">{$vo.title}</h2>
|
|
<div class="ab-csr__content">
|
|
<p class="ab-csr__desc">
|
|
{$vo.description}
|
|
</p>
|
|
<a class="s-btn s-btn--light s-btn--pill" href="/download.html?cid=691">社会责任报告</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{/hcTaglib:category}
|
|
</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>
|
|
<script src="/themes/dist_static/js/lib/three-r128.min.js"></script>
|
|
<script src="/themes/dist_static/js/lib/three-128-orbitControls.js"></script>
|
|
</body>
|
|
|
|
</html>
|