3 changed files with 126 additions and 2 deletions
-
2config/ui_ids.php
-
119public/themes/website/1/en/demo/about-history.html
-
7public/themes/website/1/en/demo/about.html
@ -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> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue