diff --git a/nuxt-demo/app/assets/images/img10.png b/nuxt-demo/app/assets/images/img10.png
new file mode 100644
index 0000000..1909a24
Binary files /dev/null and b/nuxt-demo/app/assets/images/img10.png differ
diff --git a/nuxt-demo/app/assets/images/img11.png b/nuxt-demo/app/assets/images/img11.png
new file mode 100644
index 0000000..58b672a
Binary files /dev/null and b/nuxt-demo/app/assets/images/img11.png differ
diff --git a/nuxt-demo/app/assets/images/img12.png b/nuxt-demo/app/assets/images/img12.png
new file mode 100644
index 0000000..c6869f6
Binary files /dev/null and b/nuxt-demo/app/assets/images/img12.png differ
diff --git a/nuxt-demo/app/assets/images/img13.png b/nuxt-demo/app/assets/images/img13.png
new file mode 100644
index 0000000..e178a3c
Binary files /dev/null and b/nuxt-demo/app/assets/images/img13.png differ
diff --git a/nuxt-demo/app/assets/images/img14.png b/nuxt-demo/app/assets/images/img14.png
new file mode 100644
index 0000000..1847e79
Binary files /dev/null and b/nuxt-demo/app/assets/images/img14.png differ
diff --git a/nuxt-demo/app/assets/images/img15.png b/nuxt-demo/app/assets/images/img15.png
new file mode 100644
index 0000000..afeefb2
Binary files /dev/null and b/nuxt-demo/app/assets/images/img15.png differ
diff --git a/nuxt-demo/app/assets/images/img16.png b/nuxt-demo/app/assets/images/img16.png
new file mode 100644
index 0000000..8cea024
Binary files /dev/null and b/nuxt-demo/app/assets/images/img16.png differ
diff --git a/nuxt-demo/app/assets/images/img17.png b/nuxt-demo/app/assets/images/img17.png
new file mode 100644
index 0000000..ae0e068
Binary files /dev/null and b/nuxt-demo/app/assets/images/img17.png differ
diff --git a/nuxt-demo/app/assets/images/img8.png b/nuxt-demo/app/assets/images/img8.png
new file mode 100644
index 0000000..abb5fb4
Binary files /dev/null and b/nuxt-demo/app/assets/images/img8.png differ
diff --git a/nuxt-demo/app/assets/images/img9.png b/nuxt-demo/app/assets/images/img9.png
new file mode 100644
index 0000000..ac3d2d9
Binary files /dev/null and b/nuxt-demo/app/assets/images/img9.png differ
diff --git a/nuxt-demo/app/pages/index.vue b/nuxt-demo/app/pages/index.vue
index 04903c5..0cb2b30 100644
--- a/nuxt-demo/app/pages/index.vue
+++ b/nuxt-demo/app/pages/index.vue
@@ -161,53 +161,298 @@
         </div>
         <div class="product_wrap">
           <div class="top_container">
-            <div class="item active">
-              基层监管平台
-            </div>
-            <div class="item">
-              GBS数字底座
-            </div>
-            <div class="item">
-              一体化智能云平台
-            </div>
-            <div class="item">
-              安全培训开发者平台
-            </div>
-            <div class="item">
-              服务机构自我赋能平台
-            </div>
-            <div class="item">
-              应急管理大数据中心
+            <div
+              v-for="(item, index) in productItems"
+              :key="index"
+              class="item"
+              :class="{ active: activeIndex === index }"
+              @click="handleItemClick(index)" >
+              {{item. name}}
             </div>
           </div>
-          <div class="main_container">
-            <div class="left">
-              <div class="img">
-                <img src="@/assets/images/img5.png" alt=""/>
+          <transition name="fade" mode="out-in">
+            <div :key="activeIndex" class="main_container">
+              <div class="left">
+                <div class="img">
+                  <img src="@/assets/images/img5.png" alt=""/>
+                </div>
+                <div class="title">{{ productItems[activeIndex].title }}</div>
+                <div class="notes">{{ productItems[activeIndex].notes }}</div>
+                <div class="info">
+                  <div v-for="(info, idx) in productItems[activeIndex].infoList" :key="idx" class="list">
+                    <img src="@/assets/images/img6.png" alt=""/>
+                    {{ info }}
+                  </div>
+                </div>
               </div>
-              <div class="title">基层监管平台</div>
-              <div class="notes">提供企业管理与政府监管的一体化服务平台。</div>
-              <div class="info">
-                <div class="list"> <img src="@/assets/images/img6.png" alt="河北秦安安全科技股份有限公司"/>  使用门槛低：ChatBI 对话式分析，小白用户通过简单对话就能获取数据和洞察结论</div>
-                <div class="list"> <img src="@/assets/images/img6.png" alt="河北秦安安全科技股份有限公司"/> 语义理解强：混元 + DeepSeek 双模加持，准确理解模糊与复杂提问，</div>
-                <div class="list"> <img src="@/assets/images/img6.png" alt="河北秦安安全科技股份有限公司"/> 回答更契合意图使用更便捷：支持小程序/PC/H5使用、嵌出集成，随时随地分析数据</div>
+              <div class="right">
+                <img src="@/assets/images/img7.png" alt=""/>
               </div>
             </div>
-            <div class="right">
-              <img src="@/assets/images/img7.png" alt="河北秦安安全科技股份有限公司"/>
+          </transition>
+        </div>
+      </div>
+    </div>
+
+    <!--  解决方案-->
+    <div class="solution">
+      <div class="solution_container">
+        <div class="title">
+          <div class="tit">解决方案</div>
+          <p>助力提升安全管理效益,满足多行业的安全生产需求</p>
+        </div>
+        <div class="solution_main">
+          <div class="item">
+            <div class="img"> <img src="@/assets/images/img8.png" alt="河北秦安安全科技股份有限公司"/></div>
+            <div class="title">政府机构</div>
+            <div class="info">
+              <div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
+              <div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
             </div>
           </div>
+          <div class="item">
+            <div class="img"> <img src="@/assets/images/img9.png" alt="河北秦安安全科技股份有限公司"/></div>
+            <div class="title">民爆</div>
+            <div class="info">
+              <div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
+              <div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="img"> <img src="@/assets/images/img10.png" alt="河北秦安安全科技股份有限公司"/></div>
+            <div class="title">机械</div>
+            <div class="info">
+              <div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
+              <div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="img"> <img src="@/assets/images/img11.png" alt="河北秦安安全科技股份有限公司"/></div>
+            <div class="title">军工</div>
+            <div class="info">
+              <div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
+              <div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="img"> <img src="@/assets/images/img16.png" alt="河北秦安安全科技股份有限公司"/></div>
+            <div class="title">水务</div>
+            <div class="info">
+              <div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
+              <div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="img"> <img src="@/assets/images/img12.png" alt="河北秦安安全科技股份有限公司"/></div>
+            <div class="title">农牧</div>
+            <div class="info">
+              <div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
+              <div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="img"> <img src="@/assets/images/img13.png" alt="河北秦安安全科技股份有限公司"/></div>
+            <div class="title">风电</div>
+            <div class="info">
+              <div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
+              <div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="img"> <img src="@/assets/images/img14.png" alt="河北秦安安全科技股份有限公司"/></div>
+            <div class="title">其他</div>
+            <div class="info">
+              <div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
+              <div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+    <!--  客户案例-->
+    <div class="case">
+      <div class="case_container">
+        <div class="title">
+          <div class="tit">客户案例</div>
+          <p>助力提升安全管理效益,满足多行业的安全生产需求</p>
+        </div>
+        <div class="case_main">
+          <swiper
+            :modules="modules"
+            :slides-per-view="3"
+            :space-between="25"
+            :loop="true"
+            :pagination="{ clickable: true }"
+            class="case-swiper"
+          >
+            <swiper-slide>
+              <div class="item">
+                <div class="img"></div>
+                <div class="info">
+                  <div class="title">秦皇岛港股份有限公司</div>
+                  <div class="text">把危险化学品安全摆在防范化解重大风险的突出位置，推进新一代信息技术和危险化学品安全生产深度融合，实现数字化转型...</div>
+                  <div class="details">了解详情 ></div>
+                </div>
+              </div>
+            </swiper-slide>
+            <swiper-slide>
+              <div class="item">
+                <div class="img"></div>
+                <div class="info">
+                  <div class="title">秦皇岛港股份有限公司</div>
+                  <div class="text">把危险化学品安全摆在防范化解重大风险的突出位置，推进新一代信息技术和危险化学品安全生产深度融合，实现数字化转型...</div>
+                  <div class="details">了解详情 ></div>
+                </div>
+              </div>
+            </swiper-slide>
+            <swiper-slide>
+              <div class="item">
+                <div class="img"></div>
+                <div class="info">
+                  <div class="title">秦皇岛港股份有限公司</div>
+                  <div class="text">把危险化学品安全摆在防范化解重大风险的突出位置，推进新一代信息技术和危险化学品安全生产深度融合，实现数字化转型...</div>
+                  <div class="details">了解详情 ></div>
+                </div>
+              </div>
+            </swiper-slide>
+            <swiper-slide>
+              <div class="item">
+                <div class="img"></div>
+                <div class="info">
+                  <div class="title">秦皇岛港股份有限公司</div>
+                  <div class="text">把危险化学品安全摆在防范化解重大风险的突出位置，推进新一代信息技术和危险化学品安全生产深度融合，实现数字化转型...</div>
+                  <div class="details">了解详情 ></div>
+                </div>
+              </div>
+            </swiper-slide>
+            <swiper-slide>
+              <div class="item">
+                <div class="img"></div>
+                <div class="info">
+                  <div class="title">秦皇岛港股份有限公司</div>
+                  <div class="text">把危险化学品安全摆在防范化解重大风险的突出位置，推进新一代信息技术和危险化学品安全生产深度融合，实现数字化转型...</div>
+                  <div class="details">了解详情 ></div>
+                </div>
+              </div>
+            </swiper-slide>
+            <swiper-slide>
+              <div class="item">
+                <div class="img"></div>
+                <div class="info">
+                  <div class="title">秦皇岛港股份有限公司</div>
+                  <div class="text">把危险化学品安全摆在防范化解重大风险的突出位置，推进新一代信息技术和危险化学品安全生产深度融合，实现数字化转型...</div>
+                  <div class="details">了解详情 ></div>
+                </div>
+              </div>
+            </swiper-slide>
+            <swiper-slide>
+              <div class="item">
+                <div class="img"></div>
+                <div class="info">
+                  <div class="title">秦皇岛港股份有限公司</div>
+                  <div class="text">把危险化学品安全摆在防范化解重大风险的突出位置，推进新一代信息技术和危险化学品安全生产深度融合，实现数字化转型...</div>
+                  <div class="details">了解详情 ></div>
+                </div>
+              </div>
+            </swiper-slide>
+          </swiper>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
+import { ref } from "vue";
 import { Swiper, SwiperSlide } from "swiper/vue";
-import { Autoplay, Pagination } from "swiper/modules";
+import { Autoplay, Pagination, Navigation } from "swiper/modules";
 import "swiper/css";
 import "swiper/css/pagination";
-const modules = [Autoplay, Pagination];
+import "swiper/css/navigation";
+
+const modules = [Autoplay, Pagination, Navigation];
+
+const activeIndex = ref(0);
+
+const productItems = [
+  {
+    name: "基层监管平台",
+    leftImg: "@/assets/images/img5.png",
+    title: "基层监管平台",
+    notes: "提供企业管理与政府监管的一体化服务平台。",
+    rightImg: "@/assets/images/img7.png",
+    infoList: [
+      "使用门槛低：ChatBI 对话式分析，小白用户通过简单对话就能获取数据和洞察结论",
+      "语义理解强：混元 + DeepSeek 双模加持，准确理解模糊与复杂提问",
+      "回答更契合意图使用更便捷：支持小程序/PC/H5使用、嵌出集成，随时随地分析数据",
+    ],
+  },
+  {
+    name: "GBS数字底座",
+    leftImg: "@/assets/images/img5.png",
+    title: "GBS数字底座",
+    notes: "提供安全可控的企业级数据中台解决方案。",
+    rightImg: "@/assets/images/img7.png",
+    infoList: [
+      "数据统一管理：实现数据资产的统一存储与管理",
+      "高效开发：提供低代码开发能力，快速构建业务应用",
+      "灵活扩展：支持私有化部署，满足不同规模企业需求",
+    ],
+  },
+  {
+    name: "一体化智能云平台",
+    leftImg: "@/assets/images/img5.png",
+    title: "一体化智能云平台",
+    notes: "安全生产全流程数字化管理平台。",
+    rightImg: "@/assets/images/img7.png",
+    infoList: [
+      "云端部署：无需本地安装，开箱即用",
+      "智能预警：AI驱动的风险预警机制",
+      "移动办公：支持多终端访问，随时随地办公",
+    ],
+  },
+  {
+    name: "安全培训开发者平台",
+    leftImg: "@/assets/images/img5.png",
+    title: "安全培训开发者平台",
+    notes: "提供专业安全培训课程开发与管理工具。",
+    rightImg: "@/assets/images/img7.png",
+    infoList: [
+      "海量课件：内置20000+专业安全培训课件",
+      "自定义开发：支持企业自定义培训内容",
+      "智能考试：自动生成考题，完美闭环管理",
+    ],
+  },
+  {
+    name: "服务机构自我赋能平台",
+    leftImg: "@/assets/images/img5.png",
+    title: "服务机构自我赋能平台",
+    notes: "帮助安全服务机构提升服务能力与效率。",
+    rightImg: "@/assets/images/img7.png",
+    infoList: [
+      "项目管理：全流程项目跟踪与管理",
+      "报告生成：智能化报告生成工具",
+      "数据分析：多维度数据分析与展示",
+    ],
+  },
+  {
+    name: "应急管理大数据中心",
+    leftImg: "@/assets/images/img5.png",
+    title: "应急管理大数据中心",
+    notes: "应急管理数据汇聚与分析平台。",
+    rightImg: "@/assets/images/img7.png",
+    infoList: [
+      "数据汇聚：整合多源应急数据资源",
+      "实时监控：7x24小时应急态势监控",
+      "智能决策：基于大数据的应急决策支持",
+    ],
+  },
+];
+
+const handleItemClick = (index: number) => {
+  activeIndex.value = index;
+};
 </script>
 <style>
 body{
@@ -482,16 +727,17 @@ body{
         .main_container{
           width: 100%;
           background: #ffffff;
-          padding: 20px;
+          padding: 50px;
           border-radius: 4px;
           margin-top: 40px;
           display: flex;
+          align-items: center;
           .left{
             width: 50%;
             padding-left: 50px;
             .title{
               text-align: left;
-              font-size: 18px;
+              font-size: 24px;
               font-weight: bold;
               margin-top: 20px;
             }
@@ -512,11 +758,196 @@ body{
               }
             }
           }
+          .right{
+            text-align: center;
+            padding-left: 50px;
+          }
         }
       }
 
     }
 
   }
+
+  .solution{
+    width:100% ;
+    background: #ffffff;
+    padding: 50px;
+    box-sizing: border-box;
+    .solution_container{
+      width: 1400px;
+       margin: 0 auto;
+      .title{
+        text-align: center;
+        .tit{
+          margin: 0;
+          padding: 0;
+          font-size: 36px;
+          color: #4c4b4b;
+
+        }
+        p{
+          margin: 0;
+          padding: 0;
+          color: #999999;
+          font-size: 14px;
+        }
+      }
+      .solution_main{
+        width: 100%;
+        display: flex;
+        margin-top: 30px;
+        flex-wrap: wrap;
+        .item{
+          width: 330px;
+          height: 195px;
+          position: relative;
+          margin: 10px;
+          overflow: hidden;
+          .img{
+            width: 100%;
+            height: 100%;
+            img{
+              width: 100%;
+              height: 100%;
+              border-radius: 10px;
+            }
+          }
+
+          .title{
+            position: absolute;
+            top:15px;
+            left: 15px;
+            background: rgba(0,0,0,0.23);
+            padding: 10px 20px;
+            border-radius: 50px;
+            color: #ffffff;
+            font-weight: bold;
+            z-index: 2;
+            transition: background 0.3s ease;
+          }
+          .info{
+            width: 100%;
+            height: 100%;
+            background: rgba(0,22,60,0.6);
+            border-radius: 10px;
+            position: absolute;
+            left: 0;
+            top: 0;
+            box-sizing: border-box;
+            color: #ffffff;
+            padding: 80px 20px;
+            z-index: 1;
+            opacity: 0;
+            transform: translateY(100%);
+            transition: all 0.4s ease;
+            .more{
+              text-align: right;
+              margin-top: 20px;
+            }
+          }
+       &:hover{
+         .info{
+           opacity: 1;
+           transform: translateY(0);
+         }
+         .title{
+           background: #1d78ff;
+         }
+       }
+        }
+      }
+    }
+  }
+   .case{
+     width: 100%;
+     background: #ebf2ff;
+     padding: 50px;
+     box-sizing: border-box;
+     .case_container{
+       width: 1400px;
+       margin: 0 auto;
+       .title{
+         text-align: center;
+         .tit{
+           margin: 0;
+           padding: 0;
+           font-size: 36px;
+           color: #4c4b4b;
+
+         }
+         p{
+           margin: 0;
+           padding: 0;
+           color: #999999;
+           font-size: 14px;
+         }
+       }
+       .case_main{
+         width: 100%;
+         margin-top: 30px;
+         position: relative;
+         .case-swiper {
+           width: 100%;
+           padding-bottom: 60px;
+           :deep(.swiper-pagination) {
+             bottom: 10px;
+            .swiper-pagination-bullet {
+              width: 10px;
+              height: 10px;
+              background: #d0d0d0;
+              opacity: 1;
+              margin: 0 5px;
+              transition: all 0.3s ease;
+            }
+            .swiper-pagination-bullet-active {
+              background: #1d78ff;
+              width: 24px;
+              border-radius: 5px;
+            }
+          }
+         }
+         .item{
+           width: 440px;
+           background: #ffffff;
+           border-radius: 16px;
+           margin: 0 10px;
+           .img{
+             width: 100%;
+             height: 250px;
+             background: url("@/assets/images/img17.png") no-repeat top center;
+             border-radius: 20px;
+           }
+           .info{
+             background: #ffffff;
+             padding: 20px;
+             border-radius: 20px;
+             margin-top: -40px;
+             .title{
+               font-size: 18px;
+               text-align: left;
+               margin-bottom: 20px;
+               color: #222222;
+
+             }
+             .text{
+               font-size: 14px;
+               color: #575d63;
+             }
+             .details{
+               color: #1d78ff;
+               text-align: right;
+               font-size: 14px;
+               margin-top: 20px;
+
+             }
+           }
+         }
+       }
+     }
+   }
+
+
+
 }
 </style>