add tittle and desc before product list
This commit is contained in:
parent
97521f1526
commit
52468a7b70
@ -56,17 +56,27 @@ spec:
|
||||
name: show_card
|
||||
id: show_home_card
|
||||
key: show_home_card
|
||||
label: 显示卡片块
|
||||
label: 显示产品列表
|
||||
value: true
|
||||
options:
|
||||
- label: 是
|
||||
value: true
|
||||
- label: 否
|
||||
value: false
|
||||
- $formkit: text
|
||||
if: "$get(show_home_card).value"
|
||||
name: product_tittle
|
||||
label: 标题
|
||||
value: 产品系列
|
||||
- $formkit: text
|
||||
if: "$get(show_home_card).value"
|
||||
name: product_desc
|
||||
label: 描述
|
||||
value: 专注智能设备核心平台研发与制造。
|
||||
- $formkit: repeater
|
||||
if: "$get(show_home_card).value"
|
||||
name: service
|
||||
label: 企业文化
|
||||
label: 产品列表
|
||||
help: 必须是五个的排版 目前不支持其他的
|
||||
value:
|
||||
- product_img: /themes/theme-quark/assets/img/Sige1.png
|
||||
|
||||
@ -673,6 +673,52 @@ section {
|
||||
/*--------------------------------------------------------------
|
||||
# Our Services
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
.pull-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.pull-title h2 {
|
||||
font-size: 28px;
|
||||
line-height: 1.5;
|
||||
color: #1d1d1d;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.pull-title p {
|
||||
font-size: 24px;
|
||||
line-height: 1.7;
|
||||
color: #3e3a39;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pull-title>a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 140px;
|
||||
height: 30px;
|
||||
background-color: #085ca9;
|
||||
border: 1px solid #085ca9;
|
||||
border-radius: 6px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
transition: all .6s;
|
||||
}
|
||||
|
||||
.pull-title>a:hover {
|
||||
background-color: #fff;
|
||||
color: #085ca9;
|
||||
transition: all .6s;
|
||||
}
|
||||
|
||||
.pull-title>a em {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.services {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
@ -6,74 +6,86 @@
|
||||
<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>
|
||||
<!-- ======= 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 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>
|
||||
<!-- 轮播控制按钮 -->
|
||||
<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">
|
||||
<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;"/>
|
||||
<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">
|
||||
<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;"/>
|
||||
<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> -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user