158 lines
6.7 KiB
HTML
158 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<th:block th:replace="~{modules/import}" />
|
|
|
|
<body>
|
|
|
|
<th:block th:replace="~{modules/header::goPage('home')}" />
|
|
<!-- ======= Hero Section ======= -->
|
|
<section id="hero" class="d-flex align-items-center">
|
|
<div class="container-fluid">
|
|
<!-- 合并后的轮播组件 -->
|
|
<div id="heroCarouselContent" class="carousel carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">
|
|
<div class="carousel-inner">
|
|
<!-- 轮播项 -->
|
|
<div th:each="cs,csStat:${theme.config.home.carousel}"
|
|
th:class="${csStat.index} == 0 ? 'carousel-item active' : 'carousel-item'">
|
|
<div class="d-flex">
|
|
<!-- 左侧文字部分 -->
|
|
<div class="left-container">
|
|
<div class="carousel-content">
|
|
<h2 class="animate__animated animate__fadeInDown" th:text="${cs.title}"></h2>
|
|
<p class="animate__animated animate__fadeInUp" th:text="${cs.desc}"></p>
|
|
<a th:href="${cs.url}" class="btn-get-started animate__animated animate__fadeInUp">查看更多</a>
|
|
<a th:href="${cs.buy}" class="btn-get-started animate__animated animate__fadeInUp">立即购买>></a>
|
|
</div>
|
|
</div>
|
|
<!-- 右侧图片部分 -->
|
|
<div class="right-container">
|
|
<img th:src="${cs.background_img}" alt="Carousel Image" class="carousel-image" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 轮播控制按钮 -->
|
|
<a class="carousel-control-prev" href="#heroCarouselContent" role="button" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon bx bx-chevron-left" aria-hidden="true"></span>
|
|
</a>
|
|
<a class="carousel-control-next" href="#heroCarouselContent" role="button" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon bx bx-chevron-right" aria-hidden="true"></span>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<main id="main">
|
|
<section class="services">
|
|
|
|
<div class="container">
|
|
<div class="pull-title wow fadeInUp animated" data-wow-duration=".8s" data-wow-delay="0"
|
|
style="visibility: visible; animation-duration: 0.8s; animation-name: fadeInUp;">
|
|
<span>
|
|
<h2>
|
|
<p th:text="${theme.config.home.product_tittle}">
|
|
</h2>
|
|
<p>
|
|
<p th:text="${theme.config.home.product_desc}">
|
|
</p>
|
|
</span>
|
|
<a href="/product" target="_self">全部产品
|
|
<em>></em></a>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="row">
|
|
<!-- 左边大框 -->
|
|
<div class="col-lg-5 col-md-12 mb-4" th:with="firstItem=${theme.config.home.service[0]}" data-aos="fade-up">
|
|
<a th:href="${firstItem.list_url}" class="card-link">
|
|
<div class="icon-box-pink icon-box h-100">
|
|
<img th:src="${firstItem.product_img}" alt="" class="img-fluid rounded" style="margin-bottom: 15px;" />
|
|
<h4 class="title" th:text="${firstItem.title}"></h4>
|
|
<!-- 如果没有desc字段可以移除或替换 -->
|
|
<!-- <p class="description" th:text="${firstItem.desc}"></p> -->
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 右边4个小框 -->
|
|
<div class="col-lg-7 col-md-12">
|
|
<div class="row">
|
|
<div th:each="item,iter : ${theme.config.home.service}" th:if="${iter.index} > 0"
|
|
class="col-lg-6 col-md-6 mb-4" th:data-aos-delay="${iter.index}*100" data-aos="fade-up">
|
|
<a th:href="${item.list_url}" class="card-link">
|
|
<div class="icon-box-pink icon-box h-100">
|
|
<img th:src="${item.product_img}" alt="" class="img-fluid rounded"
|
|
style="margin-bottom: 10px; max-height: 120px;" />
|
|
<h4 class="title" th:text="${item.title}"></h4>
|
|
<!-- 如果没有desc字段可以移除或替换 -->
|
|
<!-- <p class="description" th:text="${item.desc}"></p> -->
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ======= Why Us Section ======= -->
|
|
<section class="why-us section-bg" th:if="${theme.config.home.show_why_us}" data-aos="fade-up" date-aos-delay="200">
|
|
<div class="container">
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6 video-box">
|
|
<img th:src="${theme.config.home.why_bg_img}" class="img-fluid" alt="">
|
|
<a th:if="${!#strings.isEmpty(theme.config.home.why_video_url)}"
|
|
th:href="${theme.config.home.why_video_url}" class="venobox play-btn mb-4" data-vbtype="video"
|
|
data-autoplay="true"></a>
|
|
</div>
|
|
|
|
<div class="col-lg-6 d-flex flex-column justify-content-center p-5">
|
|
|
|
<div class="icon-box" th:each="it : ${theme.config.home.why_us_items}">
|
|
<div class="icon"><i th:class="${it.icon} + ' bx'"></i></div>
|
|
<h4 class="title" th:text="${it.title}"></h4>
|
|
<p class="description" th:text="${it.desc}"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section><!-- End Why Us Section -->
|
|
|
|
<!-- ======= Features Section ======= -->
|
|
<section class="features" th:if="${theme.config.home.show_features}">
|
|
<div class="container">
|
|
<div class="section-title">
|
|
<h2 th:text="${theme.config.home.features_title}">优势</h2>
|
|
<p th:text="${theme.config.home.features_desc}">
|
|
我们有最强的团队，最佳的文化就可以在竞争中脱颖而出。因为优秀的团队和文化带来的是正确的战略，合理的架构，非凡的执行力和团结的凝聚力。</p>
|
|
</div>
|
|
|
|
<div class="row" data-aos="fade-up" th:each="ft,ftState:${theme.config.home.features_items}">
|
|
<div th:class="${ftState.index} % 2 == 0 ? 'col-md-5 order-1 order-md-2' : 'col-md-5'">
|
|
<img th:src="${ft.img}" class="img-fluid" alt="">
|
|
</div>
|
|
<div th:class="${ftState.index} % 2 == 0 ? 'col-md-7 pt-5 order-2 order-md-1' : 'col-md-7 pt-4'">
|
|
<h3 th:text="${ft.title}"></h3>
|
|
<p class="fst-italic" th:text="${ft.desc}">
|
|
</p>
|
|
<ul>
|
|
<li th:each="it : ${ft.items}"><i class="bi bi-check"></i><span th:text="${it.desc}"></span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section><!-- End Features Section -->
|
|
|
|
</main><!-- End #main -->
|
|
|
|
<!-- ======= Footer ======= -->
|
|
<th:block th:replace="~{modules/footer}" />
|
|
<!-- End Footer -->
|
|
</body>
|
|
|
|
</html> |