yunzerwebsite/tp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加产品模块

Browse Source
This commit is contained in:
hero920103
2026-03-20 19:48:32 +08:00
parent 14c305f518
commit b3a25ceb82
17 changed files with 916 additions and 469 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/themes/template3/index.php
+187 -95
View File
@@ -49,6 +49,29 @@ require_once __DIR__ . '/header.php';
}
document.getElementById('hero-indicator').textContent = (currentIndex + 1) + ' / ' + banners.length;
}
// 自动轮播：每 5 秒切换一张
var heroTimer = null;
function startHeroAutoplay() {
if (heroTimer) clearInterval(heroTimer);
heroTimer = setInterval(function () {
switchBanner(1);
}, 5000);
}
function stopHeroAutoplay() {
if (heroTimer) clearInterval(heroTimer);
heroTimer = null;
}
// 鼠标移入暂停，移出继续
var heroSection = document.getElementById('hero');
if (heroSection) {
heroSection.addEventListener('mouseenter', stopHeroAutoplay);
heroSection.addEventListener('mouseleave', startHeroAutoplay);
}
// 初始化启动
startHeroAutoplay();
</script>
<?php endif; ?>
@@ -147,7 +170,29 @@ require_once __DIR__ . '/header.php';
<div class="row g-0">
<div class="col-xl-5 img-bg" data-aos="fade-up" data-aos-delay="100">
<img src="<?php echo $apiUrl; ?>/themes/template3/assets/img/why-us-bg.jpg" alt="">
<?php
// why-us 左侧图片随 productsList 的 swiper 切换
$whyUsFallbackImg = $apiUrl . '/themes/template3/assets/img/why-us-bg.jpg';
$whyUsThumbs = [];
if (!empty($productsList)) {
foreach ($productsList as $product) {
$thumb = $product['thumb'] ?? '';
if (!empty($thumb)) {
if (strpos($thumb, 'http') === 0) {
$whyUsThumbs[] = $thumb;
} elseif (strpos($thumb, '/') === 0) {
$whyUsThumbs[] = $baseUrl . $thumb; // /storage/... 直接拼站点域名
} else {
$whyUsThumbs[] = $baseUrl . '/' . $thumb;
}
} else {
$whyUsThumbs[] = $whyUsFallbackImg;
}
}
}
$whyUsInitialImg = !empty($whyUsThumbs) ? ($whyUsThumbs[0] ?? $whyUsFallbackImg) : $whyUsFallbackImg;
?>
<img id="why-us-img" src="<?php echo htmlspecialchars($whyUsInitialImg); ?>" alt="" data-fallback="<?php echo htmlspecialchars($whyUsFallbackImg); ?>">
</div>
<div class="col-xl-7 slides position-relative" data-aos="fade-up" data-aos-delay="200">
@@ -175,46 +220,59 @@ require_once __DIR__ . '/header.php';
</script>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="item">
<h3 class="mb-3">让我们一起成长</h3>
<h4 class="mb-3">Optio reiciendis accusantium iusto architecto at quia minima maiores quidem, dolorum.
</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, ipsam perferendis asperiores
explicabo vel tempore velit totam, natus nesciunt accusantium dicta quod quibusdam ipsum maiores nobis
non, eum. Ullam reiciendis dignissimos laborum aut, magni voluptatem velit doloribus quas sapiente
optio.</p>
</div>
</div><!-- End slide item -->
<?php if (!empty($productsList)): ?>
<?php foreach ($productsList as $i => $product): ?>
<?php
$title = $product['title'] ?? '';
$desc = $product['desc'] ?? '';
if (mb_strlen($desc) > 200) {
$desc = mb_substr($desc, 0, 200) . '...';
}
?>
<div class="swiper-slide">
<div class="item">
<h3 class="mb-3"><?php echo htmlspecialchars($title); ?></h3>
<p><?php echo htmlspecialchars($desc); ?></p>
</div>
</div><!-- End slide item -->
<?php endforeach; ?>
<?php else: ?>
<!-- productsList 为空时兜底展示（保持原示例） -->
<div class="swiper-slide">
<div class="item">
<h3 class="mb-3">让我们一起成长</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, ipsam perferendis asperiores
explicabo vel tempore velit totam, natus nesciunt accusantium dicta quod quibusdam ipsum maiores nobis
non, eum. Ullam reiciendis dignissimos laborum aut, magni voluptatem velit doloribus quas sapiente
optio.</p>
</div>
</div><!-- End slide item -->
<div class="swiper-slide">
<div class="item">
<h3 class="mb-3">Unde perspiciatis ut repellat dolorem</h3>
<h4 class="mb-3">Amet cumque nam sed voluptas doloribus iusto. Dolorem eos aliquam quis.</h4>
<p>Dolorem quia fuga consectetur voluptatem. Earum consequatur nulla maxime necessitatibus cum
accusamus. Voluptatem dolorem ut numquam dolorum delectus autem veritatis facilis. Et ea ut repellat
ea. Facere est dolores fugiat dolor.</p>
</div>
</div><!-- End slide item -->
<div class="swiper-slide">
<div class="item">
<h3 class="mb-3">Unde perspiciatis ut repellat dolorem</h3>
<p>Dolorem quia fuga consectetur voluptatem. Earum consequatur nulla maxime necessitatibus cum
accusamus. Voluptatem dolorem ut numquam dolorum delectus autem veritatis facilis. Et ea ut repellat
ea. Facere est dolores fugiat dolor.</p>
</div>
</div><!-- End slide item -->
<div class="swiper-slide">
<div class="item">
<h3 class="mb-3">Aliquid non alias minus</h3>
<h4 class="mb-3">Necessitatibus voluptatibus explicabo dolores a vitae voluptatum.</h4>
<p>Neque voluptates aut. Soluta aut perspiciatis porro deserunt. Voluptate ut itaque velit. Aut
consectetur voluptatem aspernatur sequi sit laborum. Voluptas enim dolorum fugiat aut.</p>
</div>
</div><!-- End slide item -->
<div class="swiper-slide">
<div class="item">
<h3 class="mb-3">Aliquid non alias minus</h3>
<p>Neque voluptates aut. Soluta aut perspiciatis porro deserunt. Voluptate ut itaque velit. Aut
consectetur voluptatem aspernatur sequi sit laborum. Voluptas enim dolorum fugiat aut.</p>
</div>
</div><!-- End slide item -->
<div class="swiper-slide">
<div class="item">
<h3 class="mb-3">Necessitatibus suscipit non voluptatem quibusdam</h3>
<h4 class="mb-3">Tempora quos est ut quia adipisci ut voluptas. Deleniti laborum soluta nihil est. Eum
similique neque autem ut.</h4>
<p>Ut rerum et autem vel. Et rerum molestiae aut sit vel incidunt sit at voluptatem. Saepe dolorem et
sed voluptate impedit. Ad et qui sint at qui animi animi rerum.</p>
</div>
</div><!-- End slide item -->
<div class="swiper-slide">
<div class="item">
<h3 class="mb-3">Necessitatibus suscipit non voluptatem quibusdam</h3>
<p>Ut rerum et autem vel. Et rerum molestiae aut sit vel incidunt sit at voluptatem. Saepe dolorem et
sed voluptate impedit. Ad et qui sint at qui animi animi rerum.</p>
</div>
</div><!-- End slide item -->
<?php endif; ?>
</div>
<div class="swiper-pagination"></div>
@@ -230,79 +288,112 @@ require_once __DIR__ . '/header.php';
</section><!-- /Why Us Section -->
<script>
(function () {
const section = document.getElementById('why-us');
if (!section) return;
const swiperEl = section.querySelector('.swiper.init-swiper');
const imgEl = section.querySelector('#why-us-img');
if (!swiperEl || !imgEl) return;
const wrapper = swiperEl.querySelector('.swiper-wrapper');
if (!wrapper) return;
const slides = Array.from(wrapper.querySelectorAll('.swiper-slide'));
const thumbs = <?php echo json_encode($whyUsThumbs ?? [], JSON_UNESCAPED_SLASHES); ?>;
function getActiveIndex() {
const active = wrapper.querySelector('.swiper-slide-active');
if (!active) return 0;
const idx = slides.indexOf(active);
return idx >= 0 ? idx : 0;
}
function updateImg() {
const idx = getActiveIndex();
const fallback = imgEl.dataset.fallback || imgEl.src;
const src = thumbs[idx] || thumbs[0] || fallback;
if (src) imgEl.src = src;
}
// 初始化 + 兼容 swiper 初始化时机
window.addEventListener('load', function () {
setTimeout(updateImg, 300);
});
wrapper.addEventListener('transitionend', updateImg);
swiperEl.addEventListener('transitionend', updateImg);
})();
</script>
<!-- Services Section -->
<section id="services" class="services section">
<!-- Section Title -->
<div class="container section-title" data-aos="fade-up">
<h2>我们的服务</h2>
<p>Necessitatibus eius consequatur ex aliquid fuga eum quidem sint consectetur velit</p>
<p>OUR SERVICES</p>
</div><!-- End Section Title -->
<div class="container">
<div class="row gy-4">
<?php
// 服务列表图标与颜色兜底（当接口没返回 thumb 时使用）
$serviceIcons = ['bi-briefcase', 'bi-card-checklist', 'bi-bar-chart', 'bi-binoculars', 'bi-brightness-high', 'bi-calendar4-week'];
$serviceColors = ['#f57813', '#15a04a', '#d90769', '#15bfbc', '#f5cf13', '#1335f5'];
?>
<div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="100">
<div class="icon flex-shrink-0"><i class="bi bi-briefcase" style="color: #f57813;"></i></div>
<div>
<h4 class="title">Lorem Ipsum</h4>
<p class="description">Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint
occaecati cupiditate non provident</p>
<a href="#" class="readmore stretched-link"><span>了解更多</span><i class="bi bi-arrow-right"></i></a>
</div>
</div>
<!-- End Service Item -->
<?php if (!empty($servicesList)): ?>
<?php foreach ($servicesList as $i => $item): ?>
<?php
$title = $item['title'] ?? '';
$desc = $item['desc'] ?? '';
$serviceUrl = !empty($item['url']) ? $item['url'] : '#';
<div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="200">
<div class="icon flex-shrink-0"><i class="bi bi-card-checklist" style="color: #15a04a;"></i></div>
<div>
<h4 class="title">Dolor Sitema</h4>
<p class="description">Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat tarad limino ata</p>
<a href="#" class="readmore stretched-link"><span>了解更多</span><i class="bi bi-arrow-right"></i></a>
</div>
</div><!-- End Service Item -->
$thumb = $item['thumb'] ?? '';
if ($thumb) {
if (strpos($thumb, 'http') === 0) {
$imgSrc = $thumb;
} elseif (strpos($thumb, '/') === 0) {
// 站点内相对路径，例如：/storage/uploads/xxx.jpg
$imgSrc = $baseUrl . $thumb;
} else {
// 兜底：当接口返回非以 / 开头的相对路径时
$imgSrc = $apiUrl . $thumb;
}
} else {
$imgSrc = '';
}
<div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="300">
<div class="icon flex-shrink-0"><i class="bi bi-bar-chart" style="color: #d90769;"></i></div>
<div>
<h4 class="title">Sed ut perspiciatis</h4>
<p class="description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur</p>
<a href="#" class="readmore stretched-link"><span>了解更多</span><i class="bi bi-arrow-right"></i></a>
</div>
</div><!-- End Service Item -->
$icon = $serviceIcons[$i % count($serviceIcons)];
$color = $serviceColors[$i % count($serviceColors)];
$delay = ($i + 1) * 100;
?>
<div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="400">
<div class="icon flex-shrink-0"><i class="bi bi-binoculars" style="color: #15bfbc;"></i></div>
<div>
<h4 class="title">Magni Dolores</h4>
<p class="description">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum</p>
<a href="#" class="readmore stretched-link"><span>了解更多</span><i class="bi bi-arrow-right"></i></a>
<div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="<?php echo $delay; ?>">
<div class="icon flex-shrink-0">
<?php if (!empty($imgSrc)): ?>
<img src="<?php echo htmlspecialchars($imgSrc); ?>" alt=""
style="width: 34px; height: 34px; object-fit: contain;">
<?php else: ?>
<i class="bi <?php echo $icon; ?>" style="color: <?php echo $color; ?>;"></i>
<?php endif; ?>
</div>
<div>
<h4 class="title"><?php echo htmlspecialchars($title); ?></h4>
<p class="description"><?php echo htmlspecialchars($desc); ?></p>
<a href="<?php echo htmlspecialchars($serviceUrl); ?>" class="readmore stretched-link">
<span>了解更多</span><i class="bi bi-arrow-right"></i>
</a>
</div>
</div><!-- End Service Item -->
<?php endforeach; ?>
<?php else: ?>
<div class="col-12 text-center">
<p>暂无服务数据</p>
</div>
</div><!-- End Service Item -->
<div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="500">
<div class="icon flex-shrink-0"><i class="bi bi-brightness-high" style="color: #f5cf13;"></i></div>
<div>
<h4 class="title">Nemo Enim</h4>
<p class="description">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque</p>
<a href="#" class="readmore stretched-link"><span>了解更多</span><i class="bi bi-arrow-right"></i></a>
</div>
</div><!-- End Service Item -->
<div class="col-lg-4 col-md-6 service-item d-flex" data-aos="fade-up" data-aos-delay="600">
<div class="icon flex-shrink-0"><i class="bi bi-calendar4-week" style="color: #1335f5;"></i></div>
<div>
<h4 class="title">Eiusmod Tempor</h4>
<p class="description">Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum
soluta nobis est eligendi</p>
<a href="#" class="readmore stretched-link"><span>了解更多</span><i class="bi bi-arrow-right"></i></a>
</div>
</div><!-- End Service Item -->
<?php endif; ?>
</div>
@@ -314,6 +405,7 @@ require_once __DIR__ . '/header.php';
<div class="container section-title" data-aos="fade-up">
<h2>最新新闻</h2>
<p>LATEST NEWS</p>
</div>
<div class="container">
<div class="row gy-5">