add product list

settings.yaml

@@ -11,21 +11,26 @@ spec:
           name: carousel
           label: 轮播块
           value: 
-            - title: MeterSphere
-              desc: MeterSphere 是一站式的开源持续测试平台，...
-              url: https://metersphere.io
+            - title: Sige7
+              desc: Rockchip RK3588 SBC with 8K UI supported and 2x2.5GbE
+              url: https://www.armsom.org/sige7
               buy: https://taobao.com
-              background_img: /themes/theme-quark/assets/img/hero-bg.jpg
-            - title: DataEase
-              desc: DataEase 是开源的数据可视化分析工具，...
-              url: https://dataease.io
+              background_img: /themes/theme-quark/assets/img/Sige7.png
+            - title: Sige5
+              desc: Rockchip RK3576 SBC with 4K UI supported and 2xGbE
+              url: https://www.armsom.org/sige5
               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 是广受欢迎的开源堡垒机，...
-              url: https://www.jumpserver.org
+              background_img: /themes/theme-quark/assets/img/Sige5.png
+            - title: Sige3
+              desc: Rockchip RK3568 SBC with 4K UI supported and 2.5GbE&GbE
+              url: https://www.armsom.org/sige3
               buy: https://taobao.com
-              background_img: /themes/theme-quark/assets/img/hero-bg.jpg
+              background_img: /themes/theme-quark/assets/img/Sige3.png
+            - title: Sige1
+              desc: Empower Your Innovations with Our 4K Single Board Computer!
+              url: https://www.armsom.org/sige1
+              buy: https://taobao.com
+              background_img: /themes/theme-quark/assets/img/Sige1.png
           children:
             - $formkit: text
               name: title
@@ -62,33 +67,36 @@ spec:
           if: "$get(show_home_card).value"
           name: service
           label: 企业文化
-          help: 必须是四个的排版 目前不支持其他的
+          help: 必须是五个的排版 目前不支持其他的
           value: 
-            - icon: bxl-dribbble
-              title: 平等
-              desc: 公司是我们共同的老板
-            - icon: bx-file
-              title: 价值
-              desc: 软件用起来才有价值，才有改进的机会
-            - icon: bx-tachometer
-              title: 求真
-              desc: 不断求真，坚持有所不为有所为
-            - icon: bx-world
-              title: 担当
-              desc: 做问题的终结者，而不是转发者和抱怨者  
+            - product_img: /themes/theme-quark/assets/img/Sige1.png
+              title: Sige系列
+              url: https://www.armsom.org/sige
+            - product_img: /themes/theme-quark/assets/img/CM5.png
+              title: CM系列
+              list_url: https://www.armsom.org/cm
+            - product_img: /themes/theme-quark/assets/img/LM7.jpg
+              title: LM系列
+              list_url: https://www.armsom.org/lm
+            - product_img: /themes/theme-quark/assets/img/AIM7.jpg
+              title: AI模组系列
+              list_url: https://www.armsom.org/aim
+            - product_img: /themes/theme-quark/assets/img/Accessory.png
+              title: 配件
+              list_url: https://www.armsom.org/accessory
           children:
-            - $formkit: text
-              name: icon
-              label: 图标
+            - $formkit: attachment
+              name: product_img
+              label: 背景图
               value: 
-              help: 选择boxicons的icon样式
+              help: 选择产品背景图片
             - $formkit: text
               name: title
               label: 标题
               value: 
-            - $formkit: text
-              name: desc
-              label: 描述
+            - $formkit: url
+              name: list_url
+              label: 跳转地址
               value: 
         - $formkit: radio
           name: show_why_us

templates/assets/css/style.css

@@ -676,13 +676,28 @@ section {
 .services {
   padding-bottom: 20px;
 }
-
+.card-link {
+  height: 100%;
+  display: block;
+  color: inherit;
+  text-decoration: none;
+  transition: transform 0.3s ease;
+}
+.card-link:hover {
+  transform: translateY(-5px);
+  text-decoration: none;
+}
+.icon-box {
+  padding: 20px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  text-align: center;
+}
 .services .icon-box {
   width: 100%;
   padding: 30px;
   position: relative;
   overflow: hidden;
-  margin: 0 0 40px 0;
   background: #fff;
   box-shadow: 0 5px 26px 0 rgba(68, 88, 144, 0.14);
   transition: all 0.3s ease-in-out;

templates/index.html

@@ -47,24 +47,44 @@
 
   <main id="main">
 
-    <!-- ======= Services Section ======= -->
     <section class="services">
       <div class="container">
-
-        <div class="row" th:with="srSize = ${#arrays.length(theme.config.home.service)}">
-          <div th:each="sr,srStat:${theme.config.home.service}"
-            th:class="'col-lg-'+ 12/${srSize} + ' col-md-6 d-flex align-items-stretch'"
-            th:data-aos-delay="${srStat.index}*100" data-aos="fade-up">
-            <div class="icon-box-pink icon-box">
-              <div class="icon"><i th:class="${sr.icon} + ' bx'"></i></div>
-              <h4 class="title" th:text="${sr.title}"></h4>
-              <p class="description" th:text="${sr.desc}"></p>
+        <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><!-- End Services Section -->
+    </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">