437 lines
16 KiB
PHP
437 lines
16 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;
|
|
}
|
|
</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">
|
|
<img src="<?php echo $apiUrl; ?>/themes/template3/assets/img/why-us-bg.jpg" alt="">
|
|
</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">
|
|
|
|
<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 -->
|
|
|
|
<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">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">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>
|
|
<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 -->
|
|
|
|
<!-- 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>
|
|
</div><!-- End Section Title -->
|
|
|
|
<div class="container">
|
|
|
|
<div class="row gy-4">
|
|
|
|
<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 -->
|
|
|
|
<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 -->
|
|
|
|
<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 -->
|
|
|
|
<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>
|
|
</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 -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section id="recent-posts" class="recent-posts section">
|
|
|
|
<div class="container section-title" data-aos="fade-up">
|
|
<h2>最新新闻</h2>
|
|
</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";
|
|
}
|
|
|
|
// 文章详情链接
|
|
$articleUrl = $apiUrl . '/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'; ?>
|