Updated carousel layout and optimized top menu styling.
This commit is contained in:
parent
721bf52e32
commit
1d5605bb64
@ -12,20 +12,20 @@ spec:
|
||||
label: 轮播块
|
||||
value:
|
||||
- title: MeterSphere
|
||||
desc: MeterSphere 是一站式的开源持续测试平台，遵循 GPL v3 开源许可协议，涵盖测试跟踪、接口测试、UI 测试和性能测试等功能，全面兼容 JMeter、Selenium 等主流开源标准，有效助力开发和测试团队充分利用云弹性进行高度可扩展的自动化测试，加速高质量的软件交付。
|
||||
desc: MeterSphere 是一站式的开源持续测试平台，...
|
||||
url: https://metersphere.io
|
||||
buy: https://taobao.com
|
||||
background_img: /themes/theme-quark/assets/img/hero-bg.jpg
|
||||
- title: DataEase
|
||||
desc: DataEase 是开源的数据可视化分析工具，帮助用户快速分析数据并洞察业务趋势，从而实现业务的改进与优化。DataEase 支持丰富的数据源连接，能够通过拖拉拽方式快速制作图表，并可以方便地与他人分享。
|
||||
desc: DataEase 是开源的数据可视化分析工具，...
|
||||
url: https://dataease.io
|
||||
buy: https://taobao.com
|
||||
background_img: https://banana-pi.org.cn/web/userfiles/ad/yingwen1216/M7-1_-E8-BD-AE-E6-92-AD-E5-9B-BE.jpg
|
||||
- title: JumpServer
|
||||
desc: JumpServer 是广受欢迎的开源堡垒机，是符合 4A 规范的专业运维安全审计系统。改变世界，从一点点开始。
|
||||
desc: JumpServer 是广受欢迎的开源堡垒机，...
|
||||
url: https://www.jumpserver.org
|
||||
- title: KubeOperator
|
||||
desc: KubeOperator 是一个开源的轻量级 Kubernetes 发行版，专注于帮助企业规划、部署和运营生产级别的 Kubernetes 集群。
|
||||
url: https://kubeoperator.io
|
||||
- title: Halo
|
||||
desc: 好用又强大的开源建站工具。
|
||||
url: https://halo.run
|
||||
buy: https://taobao.com
|
||||
background_img: /themes/theme-quark/assets/img/hero-bg.jpg
|
||||
children:
|
||||
- $formkit: text
|
||||
name: title
|
||||
@ -38,11 +38,15 @@ spec:
|
||||
- $formkit: url
|
||||
name: url
|
||||
label: 跳转地址
|
||||
value:
|
||||
- $formkit: attachment
|
||||
name: carousel_bg_img
|
||||
label: 轮播块背景图片
|
||||
value: /themes/theme-quark/assets/img/hero-bg.jpg
|
||||
value:
|
||||
- $formkit: url
|
||||
name: buy
|
||||
label: 购买地址
|
||||
value:
|
||||
- $formkit: attachment
|
||||
name: background_img
|
||||
label: 背景图片
|
||||
value:
|
||||
- $formkit: radio
|
||||
name: show_card
|
||||
id: show_home_card
|
||||
@ -509,18 +513,22 @@ spec:
|
||||
title: MeterSphere
|
||||
desc: MeterSphere 是一站式的开源持续测试平台，遵循 GPL v3 开源许可协议，涵盖测试跟踪、接口测试、UI 测试和性能测试等功能，全面兼容 JMeter、Selenium 等主流开源标准，有效助力开发和测试团队充分利用云弹性进行高度可扩展的自动化测试，加速高质量的软件交付。
|
||||
url: https://metersphere.io
|
||||
buy: https://taobao.com
|
||||
- img: /themes/theme-quark/assets/img/card-2.jpg
|
||||
title: DataEase
|
||||
desc: DataEase 是开源的数据可视化分析工具，帮助用户快速分析数据并洞察业务趋势，从而实现业务的改进与优化。DataEase 支持丰富的数据源连接，能够通过拖拉拽方式快速制作图表，并可以方便地与他人分享。
|
||||
url: https://dataease.io
|
||||
buy: https://taobao.com
|
||||
- img: /themes/theme-quark/assets/img/card-3.jpg
|
||||
title: JumpServer
|
||||
desc: JumpServer 是广受欢迎的开源堡垒机，是符合 4A 规范的专业运维安全审计系统。改变世界，从一点点开始。
|
||||
url: https://www.jumpserver.org
|
||||
buy: https://taobao.com
|
||||
- img: /themes/theme-quark/assets/img/card-4.jpg
|
||||
title: KubeOperator
|
||||
desc: KubeOperator 是一个开源的轻量级 Kubernetes 发行版，专注于帮助企业规划、部署和运营生产级别的 Kubernetes 集群。
|
||||
url: https://kubeoperator.io
|
||||
url: https://kubeoperator.io
|
||||
buy: https://taobao.com
|
||||
children:
|
||||
- $formkit: attachment
|
||||
name: img
|
||||
@ -538,6 +546,10 @@ spec:
|
||||
name: url
|
||||
label: 跳转地址
|
||||
value:
|
||||
- $formkit: url
|
||||
name: buy
|
||||
label: 购买地址
|
||||
value:
|
||||
- $formkit: radio
|
||||
if: "$get(show_service).value"
|
||||
name: show_price
|
||||
|
||||
@ -78,11 +78,12 @@ h6,
|
||||
}
|
||||
|
||||
#header.header-transparent {
|
||||
box-shadow: 0 1px 40px -8px #00000080;
|
||||
background: none;
|
||||
}
|
||||
|
||||
#header.header-scrolled {
|
||||
background: rgba(30, 67, 86, 0.8);
|
||||
background: none;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
@ -98,7 +99,7 @@ h6,
|
||||
|
||||
#header .logo h1 a,
|
||||
#header .logo h1 a:hover {
|
||||
color: #fff;
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -109,7 +110,7 @@ h6,
|
||||
}
|
||||
|
||||
#main {
|
||||
margin-top: 80px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
@ -158,7 +159,7 @@ h6,
|
||||
.navbar .active,
|
||||
.navbar .active:focus,
|
||||
.navbar li:hover>a {
|
||||
color: #a2cce3;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.navbar .dropdown ul {
|
||||
@ -335,71 +336,72 @@ h6,
|
||||
--------------------------------------------------------------*/
|
||||
#hero {
|
||||
width: 100%;
|
||||
height: 90vh;
|
||||
overflow: hidden;
|
||||
height: 60vh; /* 确保高度正确 */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-top: 80px;
|
||||
background-color: #00403908;
|
||||
}
|
||||
|
||||
#hero-bg {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
width: 130%;
|
||||
height: 95%;
|
||||
z-index: 0;
|
||||
border-radius: 0 0 50% 50%;
|
||||
transform: translateX(-50%) rotate(0deg);
|
||||
}
|
||||
|
||||
#hero::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
width: 130%;
|
||||
height: 96%;
|
||||
background: #68A4C4;
|
||||
opacity: 0.3;
|
||||
z-index: 0;
|
||||
border-radius: 0 0 50% 50%;
|
||||
transform: translateX(-50%) translateY(18px) rotate(2deg);
|
||||
}
|
||||
|
||||
#hero .carousel-container {
|
||||
.container-fluid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 80%;
|
||||
height: 100%; /* 确保高度为父容器的100% */
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#hero h2 {
|
||||
color: #fff;
|
||||
margin-bottom: 30px;
|
||||
/* 左侧文字区域 */
|
||||
.left-container {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.carousel-content {
|
||||
text-align: left;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.carousel-content h2 {
|
||||
color: #000000;
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#hero p {
|
||||
width: 80%;
|
||||
-webkit-animation-delay: 0.4s;
|
||||
animation-delay: 0.4s;
|
||||
margin: 0 auto 30px auto;
|
||||
color: #fff;
|
||||
.carousel-content p {
|
||||
color: #000000;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 右侧图片区域 */
|
||||
.right-container {
|
||||
width: 50%;
|
||||
height: 100%; /* 确保高度为父容器的100% */
|
||||
}
|
||||
|
||||
.carousel-image {
|
||||
width: 100%;
|
||||
height: 100%; /* 确保高度为父容器的100% */
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* 轮播控制按钮 */
|
||||
#hero .carousel-control-prev,
|
||||
#hero .carousel-control-next {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
#hero .carousel-control-next-icon,
|
||||
#hero .carousel-control-prev-icon {
|
||||
#hero .carousel-control-prev-icon,
|
||||
#hero .carousel-control-next-icon {
|
||||
border-radius: 50%; /* 将元素变成圆形 */
|
||||
color: #000000;
|
||||
border: 2px solid #000000;
|
||||
background: none;
|
||||
font-size: 48px;
|
||||
line-height: 1;
|
||||
@ -407,80 +409,43 @@ h6,
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#hero .btn-get-started {
|
||||
/* 按钮样式 */
|
||||
.btn-get-started {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
display: inline-block;
|
||||
padding: 12px 32px;
|
||||
border-radius: 50px;
|
||||
transition: 0.5s;
|
||||
line-height: 1;
|
||||
margin: 10px;
|
||||
color: #fff;
|
||||
-webkit-animation-delay: 0.8s;
|
||||
animation-delay: 0.8s;
|
||||
border: 2px solid #68A4C4;
|
||||
color: #000000;
|
||||
border: 2px solid #000000;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#hero .btn-get-started:hover {
|
||||
.btn-get-started:hover {
|
||||
background: #68A4C4;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
#hero p {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
#hero .carousel-control-prev,
|
||||
#hero .carousel-control-next {
|
||||
width: 5%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 768px) {
|
||||
#hero::after {
|
||||
width: 180%;
|
||||
height: 95%;
|
||||
border-radius: 0 0 50% 50%;
|
||||
transform: translateX(-50%) rotate(0deg);
|
||||
.container-fluid {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#hero::before {
|
||||
top: 0;
|
||||
width: 180%;
|
||||
height: 94%;
|
||||
border-radius: 0 0 50% 50%;
|
||||
transform: translateX(-50%) translateY(20px) rotate(4deg);
|
||||
.left-container,
|
||||
.right-container {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.carousel-content {
|
||||
max-width: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
#hero h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
#hero::after {
|
||||
left: 40%;
|
||||
top: 0;
|
||||
width: 200%;
|
||||
height: 95%;
|
||||
border-radius: 0 0 50% 50%;
|
||||
transform: translateX(-50%) rotate(0deg);
|
||||
}
|
||||
|
||||
#hero::before {
|
||||
left: 50%;
|
||||
top: 0;
|
||||
width: 200%;
|
||||
height: 94%;
|
||||
border-radius: 0 0 50% 50%;
|
||||
transform: translateX(-50%) translateY(20px) rotate(4deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# Hero No Slider Section
|
||||
@ -547,7 +512,7 @@ h6,
|
||||
# Sections General
|
||||
--------------------------------------------------------------*/
|
||||
section {
|
||||
padding: 60px 0;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.section-bg {
|
||||
@ -2097,7 +2062,8 @@ section {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.blog .sidebar .categories ul a:hover,.blog .sidebar .categories ul a.active{
|
||||
.blog .sidebar .categories ul a:hover,
|
||||
.blog .sidebar .categories ul a.active {
|
||||
color: #68A4C4;
|
||||
}
|
||||
|
||||
@ -2162,7 +2128,8 @@ section {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.blog .sidebar .tags ul a:hover, .blog .sidebar .tags ul a.active{
|
||||
.blog .sidebar .tags ul a:hover,
|
||||
.blog .sidebar .tags ul a.active {
|
||||
color: #fff;
|
||||
border: 1px solid #68A4C4;
|
||||
background: #68A4C4;
|
||||
@ -2351,7 +2318,7 @@ section {
|
||||
color: #a2cce3;
|
||||
}
|
||||
|
||||
.img-max-height{
|
||||
.img-max-height {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
@ -6,32 +6,44 @@
|
||||
<body>
|
||||
|
||||
<th:block th:replace="~{modules/header::goPage('home')}" />
|
||||
<!-- ======= Hero Section ======= -->
|
||||
<section id="hero" class="d-flex justify-cntent-center align-items-center">
|
||||
<div id="heroCarousel" class="container carousel carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">
|
||||
|
||||
<!-- Slide 1 -->
|
||||
<div th:each="cs,csStat:${theme.config.home.carousel}"
|
||||
th:class="${csStat.index} == 0 ? 'carousel-item active' : 'carousel-item'">
|
||||
<div class="carousel-container">
|
||||
<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>
|
||||
<!-- ======= 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>
|
||||
|
||||
<a class="carousel-control-prev" href="#heroCarousel" 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="#heroCarousel" role="button" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon bx bx-chevron-right" aria-hidden="true"></span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div id="hero-bg"
|
||||
th:style="'background: linear-gradient(to right, rgba(30, 67, 86, 0.8), rgba(30, 67, 86, 0.6)), url('+${theme.config.home.carousel_bg_img}+') center top no-repeat;'" />
|
||||
</section><!-- End Hero -->
|
||||
|
||||
<!-- 轮播控制按钮 -->
|
||||
<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">
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user