diff --git a/settings.yaml b/settings.yaml
index 2d93b24..c674e13 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -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
diff --git a/templates/assets/css/style.css b/templates/assets/css/style.css
index 0e09bb3..f78ad64 100644
--- a/templates/assets/css/style.css
+++ b/templates/assets/css/style.css
@@ -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%;
}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 0a3531f..11a546f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,32 +6,44 @@
-
-
-
-
-
-
-
-
-
-
查看更多
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![Carousel Image]()
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+