530 lines
18 KiB
PHP
530 lines
18 KiB
PHP
<!-- index.php -->
|
|
<?php
|
|
require_once __DIR__ . '/header.php';
|
|
?>
|
|
|
|
<!-- Hero Section -->
|
|
<section id="hero" class="hero-section">
|
|
|
|
<?php if (!empty($bannersList)): ?>
|
|
<div class="hero-banner">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6">
|
|
<h1 id="hero-title"><?php echo htmlspecialchars($bannersList[0]['title'] ?? ''); ?></h1>
|
|
<p id="hero-desc"><?php echo htmlspecialchars($bannersList[0]['desc'] ?? ''); ?></p>
|
|
<?php if (!empty($bannersList[0]['url'])): ?>
|
|
<a href="<?php echo htmlspecialchars($bannersList[0]['url']); ?>" class="btn-hero" id="hero-link">查看详情</a>
|
|
<?php endif; ?>
|
|
<?php if (count($bannersList) > 1): ?>
|
|
<div class="hero-nav">
|
|
<button onclick="switchBanner(-1)">❮</button>
|
|
<span id="hero-indicator">1 / <?php echo count($bannersList); ?></span>
|
|
<button onclick="switchBanner(1)">❯</button>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<img src="<?php echo htmlspecialchars($bannersList[0]['image'] ?? ''); ?>" alt="" id="hero-img">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php if (count($bannersList) > 1): ?>
|
|
<script>
|
|
var banners = <?php echo json_encode($bannersList); ?>;
|
|
var currentIndex = 0;
|
|
function switchBanner(direction) {
|
|
currentIndex = (currentIndex + direction + banners.length) % banners.length;
|
|
var banner = banners[currentIndex];
|
|
document.getElementById('hero-img').src = banner.image || '';
|
|
document.getElementById('hero-title').textContent = banner.title || '';
|
|
document.getElementById('hero-desc').textContent = banner.desc || '';
|
|
var linkBtn = document.getElementById('hero-link');
|
|
if (banner.url) {
|
|
linkBtn.href = banner.url;
|
|
linkBtn.style.display = 'inline-block';
|
|
} else {
|
|
linkBtn.style.display = 'none';
|
|
}
|
|
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; ?>
|
|
|
|
<?php else: ?>
|
|
<div class="hero-banner">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6">
|
|
<h1>专注为您提供优质服务</h1>
|
|
<p>致力于成为您最信赖的合作伙伴</p>
|
|
<a href="#about" class="btn-hero">了解更多</a>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<img src="<?php echo $apiUrl; ?>/themes/template3/assets/img/hero-bg.jpg" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php endif; ?>
|
|
|
|
<style>
|
|
.hero-section {
|
|
background: #1a1a2e;
|
|
padding: 120px 0 60px;
|
|
min-height: 100vh;
|
|
}
|
|
.hero-banner {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
.hero-section .row {
|
|
align-items: center;
|
|
}
|
|
.hero-section h1 {
|
|
color: #fff;
|
|
font-size: 42px;
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
}
|
|
.hero-section p {
|
|
color: rgba(255,255,255,0.8);
|
|
font-size: 18px;
|
|
margin-bottom: 30px;
|
|
line-height: 1.6;
|
|
}
|
|
.hero-section img {
|
|
width: 100%;
|
|
border-radius: 10px;
|
|
}
|
|
.btn-hero {
|
|
display: inline-block;
|
|
padding: 12px 30px;
|
|
background: #e94560;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
border-radius: 5px;
|
|
font-weight: 600;
|
|
transition: background 0.3s;
|
|
}
|
|
.btn-hero:hover {
|
|
background: #d63d56;
|
|
}
|
|
.hero-nav {
|
|
margin-top: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
.hero-nav button {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 1px solid rgba(255,255,255,0.3);
|
|
background: rgba(255,255,255,0.1);
|
|
color: #fff;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
}
|
|
.hero-nav button:hover {
|
|
background: #e94560;
|
|
border-color: #e94560;
|
|
}
|
|
.hero-nav span {
|
|
color: rgba(255,255,255,0.7);
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
|
|
</section>
|
|
|
|
<section id="why-us" class="why-us section">
|
|
|
|
<div class="container">
|
|
|
|
<div class="row g-0">
|
|
|
|
<div class="col-xl-5 img-bg" data-aos="fade-up" data-aos-delay="100">
|
|
<?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">
|
|
|
|
<div class="swiper init-swiper">
|
|
<script type="application/json" class="swiper-config">
|
|
{
|
|
"loop": true,
|
|
"speed": 600,
|
|
"autoplay": {
|
|
"delay": 5000
|
|
},
|
|
"slidesPerView": "auto",
|
|
"centeredSlides": true,
|
|
"pagination": {
|
|
"el": ".swiper-pagination",
|
|
"type": "bullets",
|
|
"clickable": true
|
|
},
|
|
"navigation": {
|
|
"nextEl": ".swiper-button-next",
|
|
"prevEl": ".swiper-button-prev"
|
|
}
|
|
}
|
|
</script>
|
|
<div class="swiper-wrapper">
|
|
|
|
<?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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
|
|
<div class="swiper-button-prev"></div>
|
|
<div class="swiper-button-next"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</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>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'];
|
|
?>
|
|
|
|
<?php if (!empty($servicesList)): ?>
|
|
<?php foreach ($servicesList as $i => $item): ?>
|
|
<?php
|
|
$title = $item['title'] ?? '';
|
|
$desc = $item['desc'] ?? '';
|
|
$serviceUrl = !empty($item['url']) ? $item['url'] : '#';
|
|
|
|
$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 = '';
|
|
}
|
|
|
|
$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="<?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>
|
|
<?php endif; ?>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section id="recent-posts" class="recent-posts section">
|
|
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>最新新闻</h2>
|
|
<p>LATEST NEWS</p>
|
|
</div>
|
|
<div class="container">
|
|
<div class="row gy-5">
|
|
|
|
<?php if (!empty($newsList)): ?>
|
|
<?php foreach ($newsList as $i => $item): ?>
|
|
<?php
|
|
// 处理新闻数据
|
|
$title = $item['title'] ?? '无标题';
|
|
$summary = $item['summary'] ?? $item['description'] ?? '';
|
|
// 截取摘要长度
|
|
$displaySummary = mb_strlen($summary) > 80 ? mb_substr($summary, 0, 80) . '...' : $summary;
|
|
|
|
// 格式化日期
|
|
$postDate = !empty($item['publish_date']) ? date('Y年m月d日', strtotime($item['publish_date'])) : '';
|
|
|
|
// 处理图片地址：如果接口返回的是相对路径，需要拼接 $apiUrl
|
|
$thumbUrl = $item['thumb'] ?? $item['image'] ?? '';
|
|
if ($thumbUrl) {
|
|
$imgSrc = (strpos($thumbUrl, 'http') === 0) ? $thumbUrl : ($apiUrl . $thumbUrl);
|
|
} else {
|
|
// 默认占位图
|
|
$imgIndex = ($i % 4) + 1;
|
|
$imgSrc = $baseUrl . "/themes/template3/assets/img/blog/blog-{$imgIndex}.jpg";
|
|
}
|
|
|
|
// 文章详情链接
|
|
// 文章详情链接必须走前台域名，否则 api.yunzer.cn 上租户解析不生效
|
|
$articleUrl = $baseUrl . '/article_detail/' . ($item['id'] ?? 0);
|
|
|
|
// 计算 AOS 动画延迟
|
|
$delay = ($i % 4) * 200;
|
|
?>
|
|
|
|
<div class="col-xl-3 col-md-6" data-aos="fade-up" data-aos-delay="<?php echo $delay; ?>">
|
|
<div class="post-box">
|
|
<div class="post-img">
|
|
<img src="<?php echo $imgSrc; ?>" class="img-fluid" alt="<?php echo htmlspecialchars($title); ?>">
|
|
</div>
|
|
<div class="meta">
|
|
<!-- <span class="post-date"><?php echo $postDate; ?></span> -->
|
|
<!-- <?php if (!empty($item['author'])): ?>
|
|
<span class="post-author"> / <?php echo htmlspecialchars($item['author']); ?></span>
|
|
<?php endif; ?> -->
|
|
</div>
|
|
<h3 class="post-title"><?php echo htmlspecialchars($title); ?></h3>
|
|
<p><?php echo htmlspecialchars($displaySummary); ?></p>
|
|
<a href="<?php echo $articleUrl; ?>" class="readmore stretched-link">
|
|
<span>阅读更多</span><i class="bi bi-arrow-right"></i>
|
|
</a>
|
|
</div>
|
|
</div><?php endforeach; ?>
|
|
<?php else: ?>
|
|
<div class="col-12 text-center">
|
|
<p>暂无新闻数据</p>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
<section id="call-to-action" class="call-to-action section dark-background">
|
|
|
|
<img src="<?php echo $apiUrl; ?>/themes/template3/assets/img/cta-bg.jpg" alt="">
|
|
|
|
<div class="container">
|
|
<div class="row justify-content-center" data-aos="zoom-in" data-aos-delay="100">
|
|
<div class="col-xl-10">
|
|
<div class="text-center">
|
|
<h3>联系我们</h3>
|
|
<p><?php echo $homeInfo['contact']['contact_phone']; ?></p>
|
|
<p><?php echo $homeInfo['contact']['contact_email']; ?></p>
|
|
<p><?php echo $homeInfo['contact']['address']; ?></p>
|
|
<p><?php echo $homeInfo['contact']['worktime']; ?></p>
|
|
<a class="cta-btn" href="/">联系我们</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section id="features" class="features section">
|
|
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>合作伙伴</h2>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="row gy-4">
|
|
|
|
<?php if (!empty($friendlinkList)): ?>
|
|
<?php foreach ($friendlinkList as $link): ?>
|
|
<div class="col-xl-3 col-md-6" data-aos="zoom-out" data-aos-delay="200">
|
|
<div class="feature-box">
|
|
<a href="<?php echo htmlspecialchars($link['link_url'] ?? '#'); ?>" target="_blank" rel="noopener noreferrer">
|
|
<?php if (!empty($link['link_logo'])): ?>
|
|
<img src="<?php echo htmlspecialchars($link['link_logo']); ?>"
|
|
alt="<?php echo htmlspecialchars($link['link_name'] ?? ''); ?>" class="img-fluid">
|
|
<?php endif; ?>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php else: ?>
|
|
<div class="col-12 text-center">
|
|
<p>暂无合作伙伴</p>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
|
</main>
|
|
|
|
<?php require_once __DIR__ . '/footer.php'; ?>
|