diff --git a/src/views/BusinessServices/size768/index.vue b/src/views/BusinessServices/size768/index.vue
index e716c8f..56b2c1d 100644
--- a/src/views/BusinessServices/size768/index.vue
+++ b/src/views/BusinessServices/size768/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="home-page">
     <div class="business-page">
-      <!-- 渐变背景标题区 - 增加层次感 -->
+      <!-- 渐变背景标题区 -->
       <section class="hero-section">
         <div class="container">
           <div class="title-wrapper">
@@ -25,94 +25,30 @@
 
         <!-- 解决方案网格 - 响应式弹性布局 -->
         <div class="solution-grid">
-          <!-- 主推解决方案组 -->
-          <div class="solution-group">
-            <div class="featured-solution">
-              <div class="solution-card" :style="{ '--delay': '0s' }">
-                <div class="card-header">
-                  <div class="decorative-line"></div>
-                  <h2 class="card-title">{{ solutions[0].title }}</h2>
-                </div>
-                <ul class="card-content">
-                  <li
-                    v-for="(point, pIndex) in solutions[0].points"
-                    :key="pIndex"
-                    class="content-point"
-                  >
-                    <div class="point-icon">➤</div>
-                    <div class="point-text">{{ point }}</div>
-                  </li>
-                </ul>
-              </div>
-            </div>
-
-            <div class="featured-solution">
-              <div class="solution-card" :style="{ '--delay': '0.2s' }">
-                <div class="card-header">
-                  <div class="decorative-line"></div>
-                  <h2 class="card-title">{{ solutions[1].title }}</h2>
-                </div>
-                <ul class="card-content">
-                  <li
-                    v-for="(point, pIndex) in solutions[1].points"
-                    :key="pIndex"
-                    class="content-point"
-                  >
-                    <div class="point-icon">➤</div>
-                    <div class="point-text">{{ point }}</div>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-
-          <!-- 次推解决方案组 -->
-          <div class="solution-group">
-            <div class="featured-solution">
-              <div
-                class="solution-card"
-                style="height: auto"
-                :style="{ '--delay': '0.4s' }"
-              >
-                <div class="card-header">
-                  <div class="decorative-line"></div>
-                  <h2 class="card-title">{{ solutions[2].title }}</h2>
-                </div>
-                <ul class="card-content">
-                  <li
-                    v-for="(point, pIndex) in solutions[2].points"
-                    :key="pIndex"
-                    class="content-point"
-                  >
-                    <div class="point-icon">➤</div>
-                    <div class="point-text">{{ point }}</div>
-                  </li>
-                  <li style="padding-bottom: 45px"></li>
-                </ul>
-              </div>
-            </div>
-
-            <div class="featured-solution">
-              <div
-                class="solution-card"
-                style="height: auto"
-                :style="{ '--delay': '0.6s' }"
-              >
-                <div class="card-header">
-                  <div class="decorative-line"></div>
-                  <h2 class="card-title">{{ solutions[3].title }}</h2>
-                </div>
-                <ul class="card-content">
-                  <li
-                    v-for="(point, pIndex) in solutions[3].points"
-                    :key="pIndex"
-                    class="content-point"
-                  >
-                    <div class="point-icon">➤</div>
-                    <div class="point-text">{{ point }}</div>
-                  </li>
-                </ul>
+          <!-- 统一使用弹性列布局，通过媒体查询控制排列方式 -->
+          <div
+            v-for="(solution, sIndex) in solutions"
+            :key="sIndex"
+            class="featured-solution"
+          >
+            <div
+              class="solution-card"
+              :style="{ '--delay': `${sIndex * 0.2}s` }"
+            >
+              <div class="card-header">
+                <div class="decorative-line"></div>
+                <h2 class="card-title">{{ solution.title }}</h2>
               </div>
+              <ul class="card-content">
+                <li
+                  v-for="(point, pIndex) in solution.points"
+                  :key="pIndex"
+                  class="content-point"
+                >
+                  <div class="point-icon">➤</div>
+                  <div class="point-text">{{ point }}</div>
+                </li>
+              </ul>
             </div>
           </div>
         </div>
@@ -166,6 +102,7 @@ const solutions = computed(() => [
 .container {
   margin: 0 auto;
   padding: 0 2rem;
+  max-width: 1600px;
 }
 
 /* 标题区样式 */
@@ -188,13 +125,25 @@ const solutions = computed(() => [
 }
 
 .hero-title {
-  font-size: 40px;
+  font-size: 2.5rem;
   color: #2c3e50;
   margin-bottom: 2rem;
-  animation: slideIn 1s ease;
+  position: relative;
+}
+
+.hero-title::after {
+  content: "";
+  position: absolute;
+  bottom: -10px;
+  left: 0;
+  width: 80px;
+  height: 4px;
+  background: linear-gradient(135deg, #895bff 0%, #6a11cb 100%);
+  border-radius: 2px;
 }
 
 .hero-description {
+  max-width: 1000px;
   margin: 0 auto;
   font-size: 1.1rem;
   line-height: 1.8;
@@ -211,6 +160,7 @@ const solutions = computed(() => [
     var(--primary-color) 100%
   );
 }
+
 .home-page {
   background-image: url("@/assets/image/bg-mobile.png");
   background-size: 100% 100%;
@@ -218,99 +168,29 @@ const solutions = computed(() => [
   background-repeat: no-repeat;
 }
 
-.container {
-  margin: 0 auto;
-  padding: 0 2rem;
-}
-
-/* 标题区 - 紫色渐变 */
-.hero-section {
-  background: var(--primary-gradient);
-  padding: 10rem 0 8rem;
-  position: relative;
-  overflow: hidden;
-  color: white;
-}
-
-.hero-section::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path fill="rgba(255,255,255,0.05)" d="M0,0 L100,0 L100,100 Q50,80 0,100 Z"></path></svg>')
-    no-repeat bottom/100% 30%;
-}
-.title-decoration {
-  position: absolute;
-  bottom: -15px;
-  left: 0;
-  width: 80%;
-  height: 4px;
-  background: rgba(255, 255, 255, 0.5);
-  border-radius: 2px;
-}
-
-/* 解决方案网格 */
+/* 解决方案网格 - 响应式布局 */
 .solution-grid {
-  padding: 6rem 0 4rem;
-}
-
-.solution-group {
-  display: flex;
-  flex-direction: column;
+  padding: 6rem 0;
+  display: grid;
+  grid-template-columns: 1fr; /* 默认单列（移动端） */
   gap: 3rem;
-  margin-bottom: 4rem;
 }
 
-/* 桌面端布局（>=768px） */
-@media (min-width: 768px) {
-  .solution-group {
-    flex-direction: row;
-    gap: 4rem;
-  }
-
-  .featured-solution {
-    flex: 1;
-  }
-
-  .solution-card {
-    height: 350px;
+/* 中等屏幕（768px-1439px） - 单列布局 */
+@media (min-width: 768px) and (max-width: 1439px) {
+  .solution-grid {
+    grid-template-columns: 1fr;
   }
 }
 
-/* 移动端布局（<768px） */
-@media (max-width: 767px) {
-  .home-page {
-    background-image: url("@/assets/image/bg-mobile.png");
-  }
-
-  .hero-title {
-    font-size: 1.8rem;
-  }
-
-  .solution-group {
-    flex-direction: column;
-    gap: 2rem;
-  }
-
-  .featured-solution {
-    width: 100% !important; /* 强制占满容器 */
-    margin-bottom: 2rem;
-  }
-
-  .solution-card {
-    padding: 2rem;
-    height: auto;
-  }
-
-  .content-point {
-    padding: 1rem 0;
+/* 大屏幕（≥1440px） - 双列布局 */
+@media (min-width: 1440px) {
+  .solution-grid {
+    grid-template-columns: 1fr 1fr;
   }
 }
 
-/* 卡片公共样式 */
+/* 卡片样式 */
 .solution-card {
   background: white;
   border-radius: 16px;
@@ -322,22 +202,17 @@ const solutions = computed(() => [
   position: relative;
   overflow: hidden;
   border: 1px solid rgba(137, 91, 255, 0.2);
-  background: linear-gradient(135deg, #f9f6ff 0%, #f0e9ff 100%);
+  transition: all 0.3s ease;
 }
 
-.solution-card::after {
+.solution-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    135deg,
-    rgba(137, 91, 255, 0.03) 0%,
-    rgba(137, 91, 255, 0) 100%
-  );
-  z-index: -1;
+  height: 4px;
+  background: var(--primary-gradient);
 }
 
 .solution-card:hover {
@@ -355,6 +230,7 @@ const solutions = computed(() => [
   background: var(--primary-gradient);
   margin-bottom: 1rem;
   border-radius: 3px;
+  transition: width 0.3s ease;
 }
 
 .solution-card:hover .decorative-line {
@@ -374,6 +250,10 @@ const solutions = computed(() => [
   border-bottom: 1px solid rgba(137, 91, 255, 0.1);
 }
 
+.content-point:last-child {
+  border-bottom: none;
+}
+
 .point-icon {
   color: var(--primary-color);
   font-size: 1.2rem;