feat(solution2): 机器人解决方案方案架构重构

public/themes/dist_static/static/css/solution2.css

@@ -55,7 +55,7 @@
 
 .sl2-adv {
   padding-top: 7.5rem;
-  padding-bottom: 0;
+  padding-bottom: 7.5rem;
 }
 .sl2-adv__title {
   margin: 0 0 3.125rem;
@@ -66,14 +66,14 @@
   line-height: var(--font-64);
 }
 .sl2-adv__list {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  display: flex;
   gap: 2.5rem;
   margin: 0;
   padding: 0;
   list-style: none;
 }
 .sl2-adv__item {
+  flex: 1;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
@@ -113,17 +113,39 @@
 
 .sl2-arch {
   padding-top: 7.5rem;
-  padding-bottom: 0;
+  padding-bottom: 7.5rem;
+  background: rgba(175, 181, 185, 0.15);
+}
+.sl2-arch__layout {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 10.625rem;
+}
+.sl2-arch__copy {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 }
 .sl2-arch__title {
-  margin: 0 0 3.125rem;
   color: var(--color-text);
   font-family: "MiSans VF", "PingFang SC", sans-serif;
   font-size: var(--font-48);
   font-weight: 400;
   line-height: var(--font-64);
+  margin-bottom: 2rem;
+}
+.sl2-arch__desc {
+  margin: 0;
+  color: var(--color-text);
+  font-family: "MiSans VF", "PingFang SC", sans-serif;
+  font-size: var(--font-20);
+  font-weight: 400;
+  line-height: var(--font-28);
+  margin-bottom: 2.5rem;
 }
 .sl2-arch__panel {
+  width: 60rem;
   overflow: hidden;
   border-radius: 1.875rem;
   background: var(--color-white);
@@ -530,8 +552,27 @@
   .sl2-more {
     padding-top: 4rem;
   }
+  .sl2-arch {
+    padding-bottom: 4rem;
+  }
+  .sl2-arch__layout {
+    flex-direction: column;
+    gap: 2rem;
+  }
+  .sl2-arch__copy {
+    width: 100%;
+  }
+  .sl2-arch__title {
+    margin-bottom: 1.5rem;
+  }
+  .sl2-arch__desc {
+    margin-bottom: 1.5rem;
+  }
+  .sl2-arch__panel {
+    width: 100%;
+  }
   .sl2-adv__list {
-    grid-template-columns: 1fr;
+    flex-direction: column;
     gap: 24Px;
   }
   .sl2-core__slide {
@@ -576,14 +617,18 @@
     padding-top: calc(var(--header-h) + 5rem);
   }
   .sl2-hero__title,
-  .sl2-hero .sl2-adv__title,
-  .sl2-hero .sl2-arch__title,
-  .sl2-hero .sl2-core__title,
-  .sl2-hero .sl2-scene__title,
-  .sl2-hero .sl2-more__title {
+  .sl2-adv__title,
+  .sl2-arch__title,
+  .sl2-core__title,
+  .sl2-scene__title,
+  .sl2-more__title {
     font-size: 32Px;
     line-height: 44Px;
   }
+  .sl2-arch__desc {
+    font-size: 18Px;
+    line-height: 26Px;
+  }
   .sl2-hero__media {
     height: 280Px;
   }

public/themes/dist_static/static/js/solution2.js

@@ -113,8 +113,18 @@ function initMoreSwiper() {
 		}
 	});
 }
+/** 查看产品组合表（点击逻辑待补充） */
+function onArchProductTableClick() {
+	// TODO
+}
+function initArchTableBtn() {
+	const btn = document.querySelector("[data-arch-table-btn]");
+	if (!btn) return;
+	btn.addEventListener("click", onArchProductTableClick);
+}
 $(function () {
 	setActiveNav();
+	initArchTableBtn();
 	initCoreSwiper();
 	initSceneSwiper();
 	initMoreSwiper();

public/themes/website/1/zh/demo/solution2.html

@@ -93,9 +93,15 @@ $current_cate_id = $current_cate['id'] ?? 0;
     {/if}
     {if !empty($sub_cates[2])}
     <section class="sl2-arch section__wrap" id="arch" data-header-dark>
-      <h2 class="sl2-arch__title">{$sub_cates[2]['title'] ?? ''}</h2>
-      <div class="sl2-arch__panel">
-        <img src="{$sub_cates[2]['thumbnail']['url'] ?? ''}" alt="{$sub_cates[2]['description'] ?? ''}" width="1630" height="650" />
+      <div class="sl2-arch__layout">
+        <div class="sl2-arch__copy">
+          <h2 class="sl2-arch__title">{$sub_cates[2]['title'] ?? ''}</h2>
+          <p class="sl2-arch__desc">{$sub_cates[2]['description'] ?? ''}</p>
+          <button type="button" class="s-btn s-btn--primary s-btn--pill sl2-arch__btn" data-arch-table-btn>查看产品组合表</button>
+        </div>
+        <div class="sl2-arch__panel">
+          <img src="{$sub_cates[2]['thumbnail']['url'] ?? ''}" alt="{$sub_cates[2]['title'] ?? ''}" width="1180" height="650" loading="lazy" />
+        </div>
       </div>
     </section>
     {/if}