Browse Source
Merge branch 'master' of https://git-online.zhco.com/wjd/rui-neng
Merge branch 'master' of https://git-online.zhco.com/wjd/rui-neng
# Conflicts: # config/ui_ids.phpmaster
7 changed files with 673 additions and 4 deletions
-
248public/themes/dist_static/static/css/about-history.css
-
24public/themes/dist_static/static/css/about.css
-
151public/themes/dist_static/static/js/about-history.js
-
119public/themes/website/1/en/demo/about-history.html
-
7public/themes/website/1/en/demo/about.html
-
119public/themes/website/1/zh/demo/about-history.html
-
7public/themes/website/1/zh/demo/about.html
@ -0,0 +1,248 @@ |
|||
.main-about-history { |
|||
--ah-sticky-top: calc(var(--header-h) + 5rem); |
|||
background: var(--color-white); |
|||
min-height: 10vh; |
|||
} |
|||
|
|||
.ah-page { |
|||
padding-top: var(--ah-sticky-top); |
|||
padding-bottom: 7.5rem; |
|||
padding-left: 18.75rem; |
|||
padding-right: 18.75rem; |
|||
} |
|||
|
|||
.ah-layout { |
|||
display: grid; |
|||
grid-template-columns: max-content 2px minmax(0, 1fr); |
|||
gap: 5rem; /* 80px：年份 / 轨道 / 内容 */ |
|||
align-items: start; |
|||
} |
|||
|
|||
.ah-nav__years { |
|||
position: sticky; |
|||
width: 12.5rem; |
|||
top: var(--ah-sticky-top); |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-end; |
|||
gap: 1rem; |
|||
} |
|||
|
|||
.ah-nav__item { |
|||
position: relative; |
|||
display: block; |
|||
color: var(--color-text-link); |
|||
font-family: "D-DIN-PRO"; |
|||
font-size: var(--font-24); |
|||
font-weight: 400; |
|||
line-height: var(--font-24); |
|||
text-decoration: none; |
|||
transition: color 0.25s ease, font-size 0.25s ease, font-weight 0.25s ease; |
|||
} |
|||
|
|||
.ah-nav__item:hover { |
|||
color: var(--color-text-muted); |
|||
} |
|||
|
|||
.ah-nav__item.is-active { |
|||
color: var(--color-text); |
|||
font-size: var(--font-64); |
|||
font-weight: 500; |
|||
line-height: 1; |
|||
} |
|||
|
|||
.ah-nav__rail { |
|||
position: sticky; |
|||
top: var(--ah-sticky-top); |
|||
align-self: start; |
|||
width: 2px; |
|||
background: rgba(46, 53, 58, 0.1); |
|||
border-radius: 1px; |
|||
} |
|||
|
|||
/* 轨道原点：始终固定在顶部 */ |
|||
.ah-nav__rail::before { |
|||
content: ""; |
|||
position: absolute; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
top: 0; |
|||
z-index: 2; |
|||
width: .75rem; |
|||
height: .75rem; |
|||
border-radius: 50%; |
|||
background: var(--color-primary); |
|||
} |
|||
|
|||
/* 红线：从原点向下变长，不位移 */ |
|||
.ah-nav__indicator { |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 0; |
|||
width: 2px; |
|||
height: 0; |
|||
margin-left: -1px; |
|||
background: var(--color-primary); |
|||
border-radius: 1px; |
|||
transform: none; |
|||
transition: height 0.3s ease; |
|||
} |
|||
|
|||
.ah-content { |
|||
min-width: 0; |
|||
} |
|||
|
|||
.ah-block + .ah-block { |
|||
margin-top: 4.5rem; |
|||
padding-top: 1rem; |
|||
} |
|||
|
|||
.ah-block { |
|||
scroll-margin-top: calc(var(--ah-sticky-top) + 1rem); |
|||
} |
|||
|
|||
.ah-richtext { |
|||
color: #666; |
|||
font-family: "MiSans VF", "PingFang SC", sans-serif; |
|||
font-size: var(--font-18); |
|||
font-weight: 400; |
|||
line-height: var(--font-32); |
|||
} |
|||
.ah-richtext p{ |
|||
width: 100%!important; |
|||
} |
|||
.ah-richtext > *:first-child { |
|||
margin-top: 0; |
|||
} |
|||
|
|||
.ah-richtext > *:last-child { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.ah-richtext h1, |
|||
.ah-richtext h2, |
|||
.ah-richtext h3, |
|||
.ah-richtext h4, |
|||
.ah-richtext strong { |
|||
color: var(--color-text); |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.ah-richtext h1, |
|||
.ah-richtext h2, |
|||
.ah-richtext h3, |
|||
.ah-richtext h4 { |
|||
margin: 2rem 0 1rem; |
|||
font-size: var(--font-20); |
|||
line-height: var(--font-32); |
|||
} |
|||
|
|||
.ah-richtext h1:first-child, |
|||
.ah-richtext h2:first-child, |
|||
.ah-richtext h3:first-child, |
|||
.ah-richtext h4:first-child { |
|||
margin-top: 0; |
|||
} |
|||
|
|||
.ah-richtext p { |
|||
margin: 0 0 0.75rem; |
|||
} |
|||
|
|||
.ah-richtext ul, |
|||
.ah-richtext ol { |
|||
margin: 0 0 1.5rem; |
|||
padding-left: 1.25rem; |
|||
} |
|||
|
|||
.ah-richtext li + li { |
|||
margin-top: 0.75rem; |
|||
} |
|||
|
|||
.ah-richtext li::marker { |
|||
color: #999; |
|||
} |
|||
|
|||
.ah-richtext a { |
|||
color: var(--color-primary); |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
.ah-richtext img { |
|||
max-width: 100%!important; |
|||
height: auto!important; |
|||
vertical-align: middle!important; |
|||
} |
|||
|
|||
@media (max-width: 992px) { |
|||
.main-about-history { |
|||
--ah-years-h: 3.75rem; /* 移动端年份导航固定高度 */ |
|||
} |
|||
|
|||
.ah-page { |
|||
padding-top: calc(var(--header-h, 5.5rem) + 2rem); |
|||
padding-bottom: 4rem; |
|||
padding-left: var(--p-x); |
|||
padding-right: var(--p-x); |
|||
} |
|||
|
|||
.ah-layout { |
|||
grid-template-columns: 1fr; |
|||
gap: 2rem; |
|||
} |
|||
|
|||
.ah-nav__years { |
|||
position: sticky; |
|||
top: var(--header-h, 5.5rem); |
|||
z-index: 5; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
height: var(--ah-years-h); |
|||
min-height: var(--ah-years-h); |
|||
max-height: var(--ah-years-h); |
|||
flex-direction: row; |
|||
align-items: center; |
|||
gap: 1.25rem; |
|||
overflow-x: auto; |
|||
overflow-y: hidden; |
|||
-webkit-overflow-scrolling: touch; |
|||
scrollbar-width: none; |
|||
padding: 0 var(--p-x); |
|||
background: rgba(255, 255, 255, 0.96); |
|||
backdrop-filter: blur(8px); |
|||
} |
|||
|
|||
.ah-nav__years::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
|
|||
.ah-nav__item { |
|||
flex: 0 0 auto; |
|||
font-size: var(--font-18); |
|||
line-height: 1; |
|||
transform: scale(1); |
|||
transform-origin: center center; |
|||
transition: color 0.25s ease, transform 0.25s ease; |
|||
} |
|||
|
|||
.ah-nav__item.is-active { |
|||
color: var(--color-text); |
|||
font-size: var(--font-18); |
|||
font-weight: 500; |
|||
line-height: 1; |
|||
transform: scale(1.45); |
|||
transform-origin: center; |
|||
} |
|||
|
|||
.ah-nav__rail { |
|||
display: none; |
|||
} |
|||
|
|||
/* 移动端：头部 + 固定年份导航，单独偏移 */ |
|||
.ah-block { |
|||
scroll-margin-top: calc(var(--header-h, 5.5rem) + var(--ah-years-h) + 0.75rem); |
|||
} |
|||
|
|||
.ah-block + .ah-block { |
|||
margin-top: 3rem; |
|||
} |
|||
} |
|||
@ -0,0 +1,151 @@ |
|||
import "./common.js"; |
|||
//#region js/about-history.js
|
|||
function setActiveNav() { |
|||
const pageNav = document.querySelector("[data-nav]")?.getAttribute("data-nav"); |
|||
if (!pageNav) return; |
|||
document.querySelectorAll(".site-header__nav a").forEach((link) => { |
|||
const active = link.textContent.trim().startsWith(pageNav); |
|||
link.classList.toggle("is-active", active); |
|||
}); |
|||
} |
|||
|
|||
function getHeaderOffset() { |
|||
const header = document.querySelector(".site-header"); |
|||
const h = header ? header.offsetHeight : 88; |
|||
const isMobile = window.matchMedia("(max-width: 992px)").matches; |
|||
if (isMobile) { |
|||
const years = document.querySelector(".ah-nav__years"); |
|||
const yearsH = years ? years.offsetHeight : 60; |
|||
return h + yearsH + 12; |
|||
} |
|||
return h + 24; |
|||
} |
|||
|
|||
function initHistorySpy() { |
|||
const root = document.querySelector("[data-ah-spy]"); |
|||
if (!root) return; |
|||
const navItems = Array.from(root.querySelectorAll(".ah-nav__item[data-year]")); |
|||
const blocks = Array.from(root.querySelectorAll(".ah-block[data-year]")); |
|||
const yearsWrap = root.querySelector(".ah-nav__years"); |
|||
const rail = root.querySelector(".ah-nav__rail"); |
|||
const indicator = root.querySelector(".ah-nav__indicator"); |
|||
if (!navItems.length || !blocks.length) return; |
|||
|
|||
let activeYear = navItems[0].dataset.year; |
|||
let clicking = false; |
|||
|
|||
const syncRailHeight = () => { |
|||
if (!yearsWrap || !rail) return; |
|||
rail.style.height = `${yearsWrap.offsetHeight}px`; |
|||
}; |
|||
|
|||
const updateLine = (item) => { |
|||
if (!indicator || !item || !yearsWrap) return; |
|||
syncRailHeight(); |
|||
const itemRect = item.getBoundingClientRect(); |
|||
const yearsRect = yearsWrap.getBoundingClientRect(); |
|||
// 原点固定在顶部，线条延伸到当前高亮年份底部
|
|||
const height = Math.max(itemRect.bottom - yearsRect.top, 8); |
|||
indicator.style.height = `${height}px`; |
|||
indicator.style.transform = ""; |
|||
}; |
|||
|
|||
const updateLineSoon = (item) => { |
|||
updateLine(item); |
|||
requestAnimationFrame(() => updateLine(item)); |
|||
window.setTimeout(() => updateLine(item), 320); |
|||
}; |
|||
|
|||
const setActive = (year) => { |
|||
if (!year || year === activeYear) { |
|||
const current = navItems.find((el) => el.dataset.year === activeYear); |
|||
updateLineSoon(current); |
|||
return; |
|||
} |
|||
activeYear = year; |
|||
navItems.forEach((el) => { |
|||
el.classList.toggle("is-active", el.dataset.year === year); |
|||
}); |
|||
const current = navItems.find((el) => el.dataset.year === year); |
|||
updateLineSoon(current); |
|||
if (current && current.closest(".ah-nav__years") && window.matchMedia("(max-width: 992px)").matches) { |
|||
current.scrollIntoView({ |
|||
inline: "center", |
|||
block: "nearest", |
|||
behavior: "smooth" |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
const scrollToYear = (year) => { |
|||
const target = blocks.find((el) => el.dataset.year === year); |
|||
if (!target) return; |
|||
clicking = true; |
|||
setActive(year); |
|||
const top = window.scrollY + target.getBoundingClientRect().top - getHeaderOffset(); |
|||
const done = () => { |
|||
clicking = false; |
|||
}; |
|||
if (window.lenis) { |
|||
window.lenis.scrollTo(top, { |
|||
duration: 1, |
|||
onComplete: done |
|||
}); |
|||
} else { |
|||
window.scrollTo({ |
|||
top, |
|||
behavior: "smooth" |
|||
}); |
|||
window.setTimeout(done, 800); |
|||
} |
|||
}; |
|||
|
|||
navItems.forEach((item) => { |
|||
item.addEventListener("click", (event) => { |
|||
event.preventDefault(); |
|||
scrollToYear(item.dataset.year); |
|||
}); |
|||
}); |
|||
|
|||
const io = new IntersectionObserver((entries) => { |
|||
if (clicking) return; |
|||
const visible = entries.filter((e) => e.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio); |
|||
if (!visible.length) return; |
|||
const year = visible[0].target.getAttribute("data-year"); |
|||
if (year) setActive(year); |
|||
}, { |
|||
root: null, |
|||
rootMargin: `-${getHeaderOffset()}px 0px -45% 0px`, |
|||
threshold: [0.05, 0.2, 0.4, 0.6] |
|||
}); |
|||
|
|||
blocks.forEach((block) => io.observe(block)); |
|||
|
|||
const onScrollFallback = () => { |
|||
if (clicking) return; |
|||
const offset = getHeaderOffset() + 8; |
|||
let current = blocks[0]?.dataset.year; |
|||
for (const block of blocks) { |
|||
if (block.getBoundingClientRect().top <= offset) current = block.dataset.year; |
|||
} |
|||
if (current) setActive(current); |
|||
}; |
|||
|
|||
if (window.lenis) window.lenis.on("scroll", onScrollFallback); |
|||
else window.addEventListener("scroll", onScrollFallback, { passive: true }); |
|||
|
|||
setActive(activeYear); |
|||
window.addEventListener("resize", () => { |
|||
const current = navItems.find((el) => el.dataset.year === activeYear); |
|||
updateLineSoon(current); |
|||
}); |
|||
|
|||
const hashYear = (location.hash || "").replace(/^#year-/, ""); |
|||
if (hashYear && blocks.some((el) => el.dataset.year === hashYear)) { |
|||
requestAnimationFrame(() => scrollToYear(hashYear)); |
|||
} |
|||
} |
|||
|
|||
setActiveNav(); |
|||
initHistorySpy(); |
|||
//#endregion
|
|||
@ -0,0 +1,119 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
|
|||
<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-history.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/about-history.css"> |
|||
</head> |
|||
|
|||
<body> |
|||
<!-- 引入公共头部 --> |
|||
<!-- header --> |
|||
{include file="components/header"} |
|||
|
|||
<main class="main-about-history" data-header-dark data-nav="About Raynen"> |
|||
{php} |
|||
$ui_about_history = uiId('about_history'); |
|||
$seller_id = (int)($seller_id ?? 1); |
|||
$history_items = getContentByCategory($ui_about_history, $seller_id, 9999, 'sort desc', []); |
|||
if (!is_array($history_items)) { |
|||
$history_items = []; |
|||
} |
|||
usort($history_items, function ($a, $b) { |
|||
return (int)($b['sub_title'] ?? 0) - (int)($a['sub_title'] ?? 0); |
|||
}); |
|||
foreach ($history_items as &$history_item) { |
|||
if (!empty($history_item['content'])) { |
|||
$history_item['content'] = htmlspecialchars_decode($history_item['content']); |
|||
} |
|||
} |
|||
unset($history_item); |
|||
{/php} |
|||
<div class="ah-page section__wrap"> |
|||
<div class="ah-layout" data-ah-spy> |
|||
<nav class="ah-nav__years" aria-label="Year navigation"> |
|||
{volist name="history_items" id="item" key="hk"} |
|||
{php}$year = trim((string)($item['sub_title'] ?? ''));{/php} |
|||
{if $year !== ''} |
|||
<a class="ah-nav__item{if $hk == 1} is-active{/if}" href="#year-{$year}" data-year="{$year}"> |
|||
<span class="ah-nav__year">{$year}</span> |
|||
</a> |
|||
{/if} |
|||
{/volist} |
|||
</nav> |
|||
<div class="ah-nav__rail" aria-hidden="true"> |
|||
<span class="ah-nav__indicator"></span> |
|||
</div> |
|||
<div class="ah-content"> |
|||
{volist name="history_items" id="item"} |
|||
{php}$year = trim((string)($item['sub_title'] ?? ''));{/php} |
|||
{if $year !== ''} |
|||
<section class="ah-block" id="year-{$year}" data-year="{$year}"> |
|||
<div class="ah-richtext"> |
|||
{$item.content|raw} |
|||
</div> |
|||
</section> |
|||
{/if} |
|||
{/volist} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</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> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,119 @@ |
|||
<!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-history.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/about-history.css"> |
|||
</head> |
|||
|
|||
<body> |
|||
<!-- 引入公共头部 --> |
|||
<!-- header --> |
|||
{include file="components/header"} |
|||
|
|||
<main class="main-about-history" data-header-dark data-nav="关于睿能"> |
|||
{php} |
|||
$ui_about_history = uiId('about_history'); |
|||
$seller_id = (int)($seller_id ?? 1); |
|||
$history_items = getContentByCategory($ui_about_history, $seller_id, 9999, 'sort desc', []); |
|||
if (!is_array($history_items)) { |
|||
$history_items = []; |
|||
} |
|||
usort($history_items, function ($a, $b) { |
|||
return (int)($b['sub_title'] ?? 0) - (int)($a['sub_title'] ?? 0); |
|||
}); |
|||
foreach ($history_items as &$history_item) { |
|||
if (!empty($history_item['content'])) { |
|||
$history_item['content'] = htmlspecialchars_decode($history_item['content']); |
|||
} |
|||
} |
|||
unset($history_item); |
|||
{/php} |
|||
<div class="ah-page section__wrap"> |
|||
<div class="ah-layout" data-ah-spy> |
|||
<nav class="ah-nav__years" aria-label="年份导航"> |
|||
{volist name="history_items" id="item" key="hk"} |
|||
{php}$year = trim((string)($item['sub_title'] ?? ''));{/php} |
|||
{if $year !== ''} |
|||
<a class="ah-nav__item{if $hk == 1} is-active{/if}" href="#year-{$year}" data-year="{$year}"> |
|||
<span class="ah-nav__year">{$year}</span> |
|||
</a> |
|||
{/if} |
|||
{/volist} |
|||
</nav> |
|||
<div class="ah-nav__rail" aria-hidden="true"> |
|||
<span class="ah-nav__indicator"></span> |
|||
</div> |
|||
<div class="ah-content"> |
|||
{volist name="history_items" id="item"} |
|||
{php}$year = trim((string)($item['sub_title'] ?? ''));{/php} |
|||
{if $year !== ''} |
|||
<section class="ah-block" id="year-{$year}" data-year="{$year}"> |
|||
<div class="ah-richtext"> |
|||
{$item.content|raw} |
|||
</div> |
|||
</section> |
|||
{/if} |
|||
{/volist} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</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> |
|||
</body> |
|||
|
|||
</html> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue