diff --git a/src/assets/Group 20.png b/src/assets/Group 20.png
index 8ebbd1c..dbf94e7 100644
Binary files a/src/assets/Group 20.png and b/src/assets/Group 20.png differ
diff --git a/src/assets/Group 21.png b/src/assets/Group 21.png
index b99ff8d..e646b51 100644
Binary files a/src/assets/Group 21.png and b/src/assets/Group 21.png differ
diff --git a/src/assets/Rectangle 85.png b/src/assets/Rectangle 85.png
new file mode 100644
index 0000000..897ebcd
Binary files /dev/null and b/src/assets/Rectangle 85.png differ
diff --git a/src/assets/bgc001.png b/src/assets/bgc001.png
new file mode 100644
index 0000000..7839043
Binary files /dev/null and b/src/assets/bgc001.png differ
diff --git a/src/components/Header.vue b/src/components/Header.vue
index f676568..c1231a2 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,27 +1,36 @@
 <template>
-  <header class="bg-header-background text-white fixed top-0 left-0 w-full z-50">
-    <!-- 容器 -->
-    <div class="max-w-screen-xl mx-auto">
-      <!-- 导航条 -->
-      <div class="navbar">
-        <!-- Logo -->
-        <div class="flex-none mr-[100px]">
-          <img class="w-[76px]" src="../assets/image 111.png" alt="">
-        </div>
-        <!-- 导航菜单 -->
-        <div class="flex-1 flex  flex-center space-x-10">
-          <a class="btn btn-ghost text-base btn-active" href="#">关于三优</a>
-          <a class="btn btn-ghost text-base" href="#">三优云试剂管家</a>
-          <a class="btn btn-ghost text-base" href="#">联系我们</a>
-        </div>
-      </div>
+  <div class="navbar header-bg-color">
+    <div class="navbar-start"></div>
+    <div class="navbar-center">
+      <a class="btn btn-ghost btn-hover" :style="{ color: activeTag === 'about' ? '#00E5FF' : 'white' }">关于三优</a>
+      <a class="btn btn-ghost btn-hover" :style="{ color: activeTag === 'home' ? '#00E5FF' : 'white' }">三优云试剂管家</a>
+      <a class="btn btn-ghost btn-hover" :style="{ color: activeTag === 'contact' ? '#00E5FF' : 'white' }">联系我们</a>
     </div>
-  </header>
+    <div class="navbar-end"></div>
+  </div>
 </template>
 
 <script setup>
+import { defineProps } from "vue";
+// 接收父组件传递的 activeTag
+const props = defineProps({
+  activeTag: {
+    type: String,
+    default: "home", // 可以定义默认值
+  },
+});
 </script>
 
 <style scoped>
+.header-bg-color {
+  color: #fff;
+  font-size: 16px;
+  height: 77px;
+  z-index: 111;
+  position: relative;
+}
+.btn-hover:hover {
+  color: #00E5FF !important;
+}
 /* 你可以在这里添加一些自定义的样式 */
 </style>
diff --git a/src/style.css b/src/style.css
index 0561254..2d68477 100644
--- a/src/style.css
+++ b/src/style.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 #app {
-  background-color: #b8f0ff63;
+  background-color: #00203b;
 }
 
 @font-face {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 302bf24..ef35bde 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,33 +1,31 @@
 <template>
   <div class="relative">
     <Header />
-    <div class="carousel w-full relative">
-      <div class="carousel-item w-full">
-        <img src="../assets/carousel1.png" class="w-full" alt="Tailwind CSS Carousel component" />
+    <div class="carousel w-full relative home-banner">
+      <div class="w-full">
+        <img src="../assets/bgc001.png" class="w-full" />
       </div>
-      <div class="carousel-item w-full">
-        <img src="../assets/carousel2.png" class="w-full" alt="Tailwind CSS Carousel component" />
+      <div class="w-full logo-image absolute top-[48px]">
+        <div class="max-w-screen-xl mx-auto flex items-center">
+          <img class="w-[76px] mr-[10px]" src="../assets/image 111.png" />
+          <span class="text-white text-sm">三优云试剂管家</span>
+        </div>
       </div>
-
-    </div>
-    <div class="absolute top-[200px] w-full  text-carousel-text">
-      <div class="max-w-screen-xl mx-auto">
-        <h1 class="text-3xl font-bold mb-[35px]">三优生物样品管理平台</h1>
-        <h1 class="text-4xl font-bold text-white mb-[35px]">专业面向生物药企的样品管理平台</h1>
-        <div class="button">
-          <button
-            class="btn bg-[linear-gradient(274.67deg,_#52E8FF_-5.78%,_#0D90FF_96.22%)] text-white rounded-full border-none h-[50px] w-[128px]">
-            立即体验
-          </button>
-
+      <div class="absolute top-[200px] w-full text-carousel-text">
+        <div class="max-w-screen-xl mx-auto">
+          <h1 class="text-5xl font-bold mb-[44px]">三优生物样品管理平台</h1>
+          <h1 class="text-5xl text-white mb-[58px]">专业面向生物药企的样品管理平台</h1>
+          <div class="button">
+            <button class="btn custom-btn btn-info btn-circle btn-outline h-[50px] w-[128px]">立即体验</button>
+          </div>
         </div>
       </div>
     </div>
-    <div class="max-w-screen-xl mx-auto py-[100px]">
-      <div class="flex space-x-10 justify-between items-center  mb-[166px]">
+
+    <div class="max-w-screen-xl mx-auto">
+      <div class="flex space-x-10 justify-between items-center mb-[166px] text-white">
         <div class="flex-1">
-          <h1 class="text-3xl font-bold">替代Excel</h1>
-          <h1 class="text-3xl font-bold">为您的实验室</h1>
+          <h1 class="text-3xl font-bold">替代Excel 为您的实验室</h1>
           <h1 class="text-3xl font-bold mb-[30px]">搭建样本中央数据库</h1>
           <div class="text-[14px] line-height-[20px]">
             系统基于Web浏览器便捷的交互方式，帮助实验人员进行样本数据管理与业务流程管理，彻底替代纸质与Excel。
@@ -35,16 +33,14 @@
           <div class="text-[14px] line-height-[20px]">
             样本数据保管在中心化的服务器中，方便所有人共同创建、查询、使用样本信息，不再需要成员之间进行样本资料的传递。
           </div>
-          <div class="text-[14px] line-height-[20px]">
-            我们将为您的提供足够安全的数据管理策略，保障服务器中的数据安全。
-          </div>
+          <div class="text-[14px] line-height-[20px]">我们将为您的提供足够安全的数据管理策略，保障服务器中的数据安全。</div>
         </div>
         <div class="flex-1">
           <img src="../assets/Group 20.png" class="w-full" alt="Tailwind CSS Carousel component" />
         </div>
       </div>
 
-      <div class="flex space-x-10 justify-between items-center mb-[166px]">
+      <div class="flex space-x-10 justify-between items-center mb-[166px] text-white">
         <div class="flex-1">
           <img src="../assets/Group 21.png" class="w-full" alt="Tailwind CSS Carousel component" />
         </div>
@@ -54,79 +50,64 @@
             系统提供出色的库位管理方案，帮助库管人员直观精确地对样本进行定位。
             另外，空间剩余情况统计、碎片化统计、空间不足提醒、盘库工具等业务，可有效提升库区管理效率。
           </div>
-          <div class="text-[14px] line-height-[20px]">
-            如果您还在为库内情况不明而烦恼，三优云试剂管家不失为您的效率之选。
-          </div>
+          <div class="text-[14px] line-height-[20px]">如果您还在为库内情况不明而烦恼，三优云试剂管家不失为您的效率之选。</div>
         </div>
       </div>
-      <div class="text-center text-[36px] font-bold mb-[40px]">
-        全流程覆盖，提升您的样本管理效率
-      </div>
+      <div class="text-center text-[36px] font-bold mb-[40px]">全流程覆盖，提升您的样本管理效率</div>
       <div class="flex">
         <div class="join join-vertical bg-group-btn">
-          <button @click="handleClick(index)" v-for="(item, index) in btnList" :key="item.name"
-            :class="[ 'p-[10px] join-item h-[60px] w-[120px]', item.active ? 'btn-active-custom text-white' : '' ]">{{
-              item.name }}</button>
+          <button
+            @click="handleClick(index)"
+            v-for="(item, index) in btnList"
+            :key="item.name"
+            :class="['p-[10px] join-item h-[60px] w-[120px]', item.active ? 'btn-active-custom text-white' : '']"
+          >
+            {{ item.name }}
+          </button>
         </div>
 
         <div class="flex-1 ml-[43px]">
-          <div class="text-[24px] font-bold mb-[10px]">
-            样品登记
-          </div>
+          <div class="text-[24px] font-bold mb-[10px]">样品登记</div>
           <div class="text-[14px] line-height-[20px] mb-[10px]">
             在药企样本管理过程中，样本的登记入库是发生频率非常高的场景。针对样品登记，我们的产品设计始终遵循贴合场景、简化操作、减少重复的原则。
           </div>
           <div class="flex gap-[20px]">
             <div class="flex flex-col gap-[10px] w-[208px]">
-              <div class="h-[208px] w-[208px]  rounded-full rounded-full-color flex justify-center items-center">
-                <img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto"
-                  alt="Tailwind CSS Carousel component" />
-              </div>
-              <div class="text-[14px] line-height-[20px] text-center">
-                符合药企特点，以批次为单位登记，无需逐份登记
+              <div class="h-[208px] w-[208px] rounded-full rounded-full-color flex justify-center items-center">
+                <img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto" alt="Tailwind CSS Carousel component" />
               </div>
+              <div class="text-[14px] line-height-[20px] text-center">符合药企特点，以批次为单位登记，无需逐份登记</div>
             </div>
 
             <div class="flex flex-col gap-[10px] w-[208px]">
-              <div class="h-[208px] w-[208px]  rounded-full rounded-full-color flex justify-center items-center">
-                <img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto"
-                  alt="Tailwind CSS Carousel component" />
-              </div>
-              <div class="text-[14px] line-height-[20px] text-center">
-                符合药企特点，以批次为单位登记，无需逐份登记
+              <div class="h-[208px] w-[208px] rounded-full rounded-full-color flex justify-center items-center">
+                <img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto" alt="Tailwind CSS Carousel component" />
               </div>
+              <div class="text-[14px] line-height-[20px] text-center">符合药企特点，以批次为单位登记，无需逐份登记</div>
             </div>
 
             <div class="flex flex-col gap-[10px] w-[208px]">
-              <div class="h-[208px] w-[208px]  rounded-full rounded-full-color flex justify-center items-center">
-                <img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto"
-                  alt="Tailwind CSS Carousel component" />
-              </div>
-              <div class="text-[14px] line-height-[20px] text-center">
-                符合药企特点，以批次为单位登记，无需逐份登记
+              <div class="h-[208px] w-[208px] rounded-full rounded-full-color flex justify-center items-center">
+                <img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto" alt="Tailwind CSS Carousel component" />
               </div>
+              <div class="text-[14px] line-height-[20px] text-center">符合药企特点，以批次为单位登记，无需逐份登记</div>
             </div>
             <div class="flex flex-col gap-[10px] w-[208px]">
-              <div class="h-[208px] w-[208px]  rounded-full rounded-full-color flex justify-center items-center">
-                <img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto"
-                  alt="Tailwind CSS Carousel component" />
-              </div>
-              <div class="text-[14px] line-height-[20px] text-center">
-                符合药企特点，以批次为单位登记，无需逐份登记
+              <div class="h-[208px] w-[208px] rounded-full rounded-full-color flex justify-center items-center">
+                <img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto" alt="Tailwind CSS Carousel component" />
               </div>
+              <div class="text-[14px] line-height-[20px] text-center">符合药企特点，以批次为单位登记，无需逐份登记</div>
             </div>
           </div>
         </div>
       </div>
-
-
     </div>
     <div class="w-full custom-bgc-introduce py-[100px]">
       <div class="max-w-screen-xl mx-auto">
         <div class="flex items-center mb-[82px]">
-          <div class="flex flex-col   text-introduce-text mr-[100px]">
-            <h1 class="text-3xl font-bold ">灵活自定义</h1>
-            <h1 class="text-3xl font-bold ">可完美适配</h1>
+          <div class="flex flex-col text-introduce-text mr-[100px]">
+            <h1 class="text-3xl font-bold">灵活自定义</h1>
+            <h1 class="text-3xl font-bold">可完美适配</h1>
             <h1 class="text-3xl font-bold">您独特的样品管理场景</h1>
           </div>
 
@@ -139,33 +120,23 @@
         <div class="flex gap-[20px] justify-between">
           <div class="flex flex-col items-center">
             <img src="../assets/image 83.png" class="w-[170px] h-[170px] mb-[20px]" />
-            <div class="text-[14px] line-height-[20px] text-white">
-              样本类型
-            </div>
+            <div class="text-[14px] line-height-[20px] text-white">样本类型</div>
           </div>
           <div class="flex flex-col items-center">
             <img src="../assets/image 83.png" class="w-[170px] h-[170px] mb-[20px]" />
-            <div class="text-[14px] line-height-[20px] text-white">
-              样本类型
-            </div>
+            <div class="text-[14px] line-height-[20px] text-white">样本类型</div>
           </div>
           <div class="flex flex-col items-center">
             <img src="../assets/image 83.png" class="w-[170px] h-[170px] mb-[20px]" />
-            <div class="text-[14px] line-height-[20px] text-white">
-              样本类型
-            </div>
+            <div class="text-[14px] line-height-[20px] text-white">样本类型</div>
           </div>
           <div class="flex flex-col items-center">
             <img src="../assets/image 83.png" class="w-[170px] h-[170px] mb-[20px]" />
-            <div class="text-[14px] line-height-[20px] text-white">
-              样本类型
-            </div>
+            <div class="text-[14px] line-height-[20px] text-white">样本类型</div>
           </div>
           <div class="flex flex-col items-center">
             <img src="../assets/image 83.png" class="w-[170px] h-[170px] mb-[20px]" />
-            <div class="text-[14px] line-height-[20px] text-white">
-              样本类型
-            </div>
+            <div class="text-[14px] line-height-[20px] text-white">样本类型</div>
           </div>
         </div>
         <!-- <img src="../assets/image 20.png" class="w-full" alt="Tailwind CSS Carousel component" /> -->
@@ -173,9 +144,7 @@
     </div>
 
     <div class="max-w-screen-xl mx-auto py-[100px]">
-      <div class="text-center text-[32px] font-bold mb-[40px]">
-        面向生物药场景而设计，适合各细分领域
-      </div>
+      <div class="text-center text-[32px] font-bold mb-[40px]">面向生物药场景而设计，适合各细分领域</div>
       <div class="flex-1 text-[18px] line-height-[20px] mb-[40px]">
         药企样品管理场景在业务流程、操作方式、数据管理、实施落地方面均有其特殊性，这也是通用型或者医院型样本管理软件无法完全胜任的原因。三优云试剂管家
         专门面向生物药企的样本管理场景而设计，如果您的实验室属于生物药及相关范畴，那么本产品将是您样本管理的不二之选。
@@ -183,56 +152,37 @@
       <div class="flex gap-[20px] justify-between mb-[100px]">
         <div class="flex flex-col items-center">
           <img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" />
-          <div class="text-[14px] line-height-[20px]">
-            抗体药物
-          </div>
+          <div class="text-[14px] line-height-[20px]">抗体药物</div>
         </div>
         <div class="flex flex-col items-center">
           <img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" />
-          <div class="text-[14px] line-height-[20px]">
-            CGT
-          </div>
+          <div class="text-[14px] line-height-[20px]">CGT</div>
         </div>
         <div class="flex flex-col items-center">
           <img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" />
-          <div class="text-[14px] line-height-[20px]">
-            疫苗
-          </div>
+          <div class="text-[14px] line-height-[20px]">疫苗</div>
         </div>
         <div class="flex flex-col items-center">
           <img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" />
-          <div class="text-[14px] line-height-[20px]">
-            发酵工程
-          </div>
+          <div class="text-[14px] line-height-[20px]">发酵工程</div>
         </div>
         <div class="flex flex-col items-center">
           <img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" />
-          <div class="text-[14px] line-height-[20px]">
-            生物试剂
-          </div>
+          <div class="text-[14px] line-height-[20px]">生物试剂</div>
         </div>
 
         <div class="flex flex-col items-center">
           <img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" />
-          <div class="text-[14px] line-height-[20px]">
-            CRO/CDMO
-          </div>
+          <div class="text-[14px] line-height-[20px]">CRO/CDMO</div>
         </div>
 
         <div class="flex flex-col items-center">
           <img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" />
-          <div class="text-[14px] line-height-[20px]">
-            其他生物实验室
-          </div>
+          <div class="text-[14px] line-height-[20px]">其他生物实验室</div>
         </div>
-
-      </div>
-      <div class="text-left text-[32px] font-bold">
-        可供多研发项目/多部门
-      </div>
-      <div class="text-left text-[32px] font-bold mb-[40px]">
-        共同管理样本
       </div>
+      <div class="text-left text-[32px] font-bold">可供多研发项目/多部门</div>
+      <div class="text-left text-[32px] font-bold mb-[40px]">共同管理样本</div>
       <div class="flex mb-[40px]">
         <div class="text-[16px] w-[500px]">
           系统通过样本数据的灵活授权、数据分级等方式，可确保各个项目/各个部门单独管理自己的容器与样本，而不会相互干扰
@@ -261,159 +211,120 @@
           <a role="tab" :class="{ tab: true, 'tab-active': tabActive === 'tab2' }" @click="tabActive = 'tab2'">可对接软件</a>
         </div>
       </div>
-      <div class="flex flex-wrap  mt-[47px]">
-        <div v-for="(item, num) in hardwareList" class="bg-white w-[214px] custom-boder-wrap"
-          :style="{ 'margin-right': num !== 0 && num % 3 === 0 ? '0px' : '140px', 'margin-bottom': '48px' }">
-          <img class="w-full" :src="item" alt="">
+      <div class="flex flex-wrap mt-[47px]">
+        <div
+          v-for="(item, num) in hardwareList"
+          class="bg-white w-[214px] custom-boder-wrap"
+          :style="{ 'margin-right': num !== 0 && num % 3 === 0 ? '0px' : '140px', 'margin-bottom': '48px' }"
+        >
+          <img class="w-full" :src="item" alt="" />
         </div>
       </div>
     </div>
     <div class="w-full">
       <div class="max-w-screen-xl mx-auto py-[74px]">
-        <div class="text-center text-[32px] font-bold mb-[117px]">
-          功能简述
-        </div>
-        <div class="flex justify-between  flex-wrap">
+        <div class="text-center text-[32px] font-bold mb-[117px]">功能简述</div>
+        <div class="flex justify-between flex-wrap">
           <div class="flex-custom-item relative flex justify-center flex-col mb-[80px]">
-            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
-              src="../assets/image 53.png" alt="">
-            <div class="text-center text-[24px] font-bold mt-[32px]">
-              出入库
-            </div>
+            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]" src="../assets/image 53.png" alt="" />
+            <div class="text-center text-[24px] font-bold mt-[32px]">出入库</div>
             <div class="flex-1 text-center text-custom-content flex items-center">
               入库、出库、样品盘点及存储功能，支持对样 品进行分类、编码、登记和存储位置管理等
             </div>
           </div>
 
           <div class="flex-custom-item relative flex justify-center flex-col mb-[80px]">
-            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
-              src="../assets/image 53.png" alt="">
-            <div class="text-center text-[24px] font-bold mt-[32px]">
-              容器管理
-            </div>
-            <div class="text-center text-custom-content flex-1  flex items-center">
+            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]" src="../assets/image 53.png" alt="" />
+            <div class="text-center text-[24px] font-bold mt-[32px]">容器管理</div>
+            <div class="text-center text-custom-content flex-1 flex items-center">
               多维度自定义设备容器结构层级，可视化样品 定位入库、出库、移库等，快速精准查找样品 位置和状态
             </div>
           </div>
 
           <div class="flex-custom-item relative flex justify-center flex-col mb-[80px]">
-            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
-              src="../assets/image 53.png" alt="">
-            <div class="text-center text-[24px] font-bold mt-[32px]">
-              用户管理
-            </div>
-            <div class="text-center text-custom-content flex-1  flex items-center">
+            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]" src="../assets/image 53.png" alt="" />
+            <div class="text-center text-[24px] font-bold mt-[32px]">用户管理</div>
+            <div class="text-center text-custom-content flex-1 flex items-center">
               多用户、多角色、权限明确划分配置，审批流 和数据安全严格遵循标准执行，灵活自定义 可完美匹配
             </div>
           </div>
 
           <div class="flex-custom-item relative flex justify-center flex-col mb-[80px]">
-            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
-              src="../assets/image 66.png" alt="">
-            <div class="text-center text-[24px] font-bold mt-[32px]">
-              检索追踪
-            </div>
-            <div class="text-center text-custom-content flex-1  flex items-center">
+            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]" src="../assets/image 66.png" alt="" />
+            <div class="text-center text-[24px] font-bold mt-[32px]">检索追踪</div>
+            <div class="text-center text-custom-content flex-1 flex items-center">
               通过样品编号、名称、类型等多种方式快速定 位样品信息，实时记录样品的流通和 使用情况综合查询
             </div>
           </div>
 
           <div class="flex-custom-item relative flex justify-center flex-col mb-[80px]">
-            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
-              src="../assets/image 57.png" alt="">
-            <div class="text-center text-[24px] font-bold mt-[32px]">
-              库存库位
-            </div>
-            <div class="text-center text-custom-content flex-1  flex items-center">
+            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]" src="../assets/image 57.png" alt="" />
+            <div class="text-center text-[24px] font-bold mt-[32px]">库存库位</div>
+            <div class="text-center text-custom-content flex-1 flex items-center">
               分类编码、库位规划布局以及智能化推荐库位，通 过标识迅速追踪定位，支持可视化自定义创建库 位，实现了通过库位查样品或通过样品查库位
             </div>
           </div>
 
-
           <div class="flex-custom-item relative flex justify-center flex-col mb-[80px]">
-            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
-              src="../assets/image 67.png" alt="">
-            <div class="text-center text-[24px] font-bold mt-[32px]">
-              系统管理
-            </div>
-            <div class="text-center text-custom-content flex-1  flex items-center">
+            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]" src="../assets/image 67.png" alt="" />
+            <div class="text-center text-[24px] font-bold mt-[32px]">系统管理</div>
+            <div class="text-center text-custom-content flex-1 flex items-center">
               菜单、按钮、公告、附件、基础数据、消息通知 配置、全局字典等系统配置
             </div>
           </div>
 
           <div class="flex-custom-item relative flex justify-center flex-col">
-            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
-              src="../assets/image 59.png" alt="">
-            <div class="text-center text-[24px] font-bold mt-[32px]">
-              库存预警
-            </div>
-            <div class="text-center text-custom-content flex-1  flex items-center">
+            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]" src="../assets/image 59.png" alt="" />
+            <div class="text-center text-[24px] font-bold mt-[32px]">库存预警</div>
+            <div class="text-center text-custom-content flex-1 flex items-center">
               动态监控样品库存状态，库存量查询与统计。 根据阈值实时检测库存量，低于阈值企微、 邮件、短信等渠道即刻发出预警通知
             </div>
           </div>
 
           <div class="flex-custom-item relative flex justify-center flex-col">
-            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
-              src="../assets/image 68.png" alt="">
-            <div class="text-center text-[24px] font-bold mt-[32px]">
-              可视化页面
-            </div>
-            <div class="text-center text-custom-content flex-1  flex items-center">
+            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]" src="../assets/image 68.png" alt="" />
+            <div class="text-center text-[24px] font-bold mt-[32px]">可视化页面</div>
+            <div class="text-center text-custom-content flex-1 flex items-center">
               直观展示设备使用情况和库存库位信息，具备实时 更新、交互查询、全局可观等功能，支持快速了 解使用率、预警情况及库位布局
             </div>
           </div>
 
           <div class="flex-custom-item relative flex justify-center flex-col">
-            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
-              src="../assets/image 61.png" alt="">
-            <div class="text-center text-[24px] font-bold mt-[32px]">
-              自由扩展
-            </div>
-            <div class="text-center text-custom-content flex-1  flex items-center">
+            <img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]" src="../assets/image 61.png" alt="" />
+            <div class="text-center text-[24px] font-bold mt-[32px]">自由扩展</div>
+            <div class="text-center text-custom-content flex-1 flex items-center">
               支持接入智能化监控设备，如温感、烟感、温湿 器等设备，提供REST API接口衔接各种 LIMS系统
             </div>
           </div>
-
-
         </div>
       </div>
     </div>
     <div class="w-full service-custom-bg py-[60px]">
       <div class="max-w-screen-xl mx-auto">
-        <div class="text-center text-[32px] font-bold mb-[40px]">
-          服务与价格
-        </div>
+        <div class="text-center text-[32px] font-bold mb-[40px]">服务与价格</div>
         <div class="flex gap-[28px]">
           <div class="base-wrap flex-1">
-            <div class="base-price  base-one">
-              <div class="base-icon base-icon-one">
-                旗舰版
-              </div>
+            <div class="base-price base-one">
+              <div class="base-icon base-icon-one">旗舰版</div>
               <div class="flex items-center mt-[124px] justify-center">
                 <span class="price-title mr-[16px]">早鸟价</span>
                 <div>
                   <span class="price-content">49,999</span>
                   <span class="price-unit"> 元/年</span>
                 </div>
-
               </div>
             </div>
           </div>
           <div class="base-wrap flex-1">
-            <div class="base-price  base-two">
-              <div class="base-icon base-icon-two">
-                豪华版
-              </div>
+            <div class="base-price base-two">
+              <div class="base-icon base-icon-two">豪华版</div>
             </div>
           </div>
           <div class="base-wrap flex-1">
-            <div class="base-price  base-three">
-              <div class="base-icon base-icon-three">
-                标准版
-              </div>
+            <div class="base-price base-three">
+              <div class="base-icon base-icon-three">标准版</div>
             </div>
           </div>
-
         </div>
       </div>
     </div>
@@ -422,64 +333,58 @@
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
-import Header from '../components/Header.vue'
-import Footer from '../components/Footer.vue'
-import Image222 from '../assets/image 222.png'
+import { computed, ref } from "vue";
+import Header from "../components/Header.vue";
+import Footer from "../components/Footer.vue";
+import Image222 from "../assets/image 222.png";
 
 const handleClick = (index) => {
   btnList.value.forEach((item) => {
-    item.active = false
-  })
-  btnList.value[index].active = true
-}
+    item.active = false;
+  });
+  btnList.value[index].active = true;
+};
 
-const tabActive = ref('tab1')
+const tabActive = ref("tab1");
 
 const showAllList = computed(() => {
-  return tabActive.value === 'tab1' ? hardwareList.value : softwareList.value
-})
+  return tabActive.value === "tab1" ? hardwareList.value : softwareList.value;
+});
 
-const hardwareList = ref([
-  Image222, Image222, Image222, Image222, Image222
-])
-
-const softwareList = ref([
-  Image222, Image222, Image222, Image222, Image222
-])
+const hardwareList = ref([Image222, Image222, Image222, Image222, Image222]);
 
+const softwareList = ref([Image222, Image222, Image222, Image222, Image222]);
 
 const btnList = ref([
   {
-    name: '样品登记',
-    active: true
+    name: "样品登记",
+    active: true,
   },
   {
-    name: '样品入库',
-    active: false
+    name: "样品入库",
+    active: false,
   },
   {
-    name: '样品数据',
-    active: false
+    name: "样品数据",
+    active: false,
   },
   {
-    name: '库区管理',
-    active: false
+    name: "库区管理",
+    active: false,
   },
   {
-    name: '库区安全',
-    active: false
+    name: "库区安全",
+    active: false,
   },
   {
-    name: '系统合规',
-    active: false
+    name: "系统合规",
+    active: false,
   },
-
-])
+]);
 </script>
 <style scoped>
 .btn-active-custom {
-  background: linear-gradient(270deg, #5B63F6 -3.11%, #0D90FF 100%);
+  background: linear-gradient(270deg, #5b63f6 -3.11%, #0d90ff 100%);
   transition: all 0.3s ease;
 }
 
@@ -488,12 +393,11 @@ const btnList = ref([
 }
 
 .custom-bgc-introduce {
-  background: linear-gradient(98.33deg, #003EA0 0%, #0AA9F8 100.12%);
-
+  background: linear-gradient(98.33deg, #003ea0 0%, #0aa9f8 100.12%);
 }
 
 .custom-btn-bg {
-  border: 2px solid #0D90FF;
+  border: 2px solid #0d90ff;
   width: 190px;
   height: 42px;
   border-radius: 22px;
@@ -508,7 +412,7 @@ const btnList = ref([
   width: 214px;
   height: 214px;
   border-radius: 8px;
-  border: 1px solid #D9D9D9
+  border: 1px solid #d9d9d9;
 }
 
 .flex-custom-item {
@@ -557,38 +461,37 @@ const btnList = ref([
   position: absolute;
   /* background: linear-gradient(96.87deg, #FFFEF9 0%, #ADA293 96.38%); */
   border-radius: 0 0 0 14px;
-  font-family: 'MySubsetFont';
+  font-family: "MySubsetFont";
   font-size: 32px;
   text-align: center;
   line-height: 64px;
 }
 
 .base-icon-one {
-  background: linear-gradient(96.87deg, #FFFEF9 0%, #ADA293 96.38%);
-  color: #493B3B;
+  background: linear-gradient(96.87deg, #fffef9 0%, #ada293 96.38%);
+  color: #493b3b;
 }
 
 .base-icon-two {
-  background: linear-gradient(96.87deg, #FFE079 0%, #BE8945 96.38%);
-  color: #FFFFFF;
+  background: linear-gradient(96.87deg, #ffe079 0%, #be8945 96.38%);
+  color: #ffffff;
 }
 
 .base-icon-three {
-  background: #FFFDF5;
+  background: #fffdf5;
   color: #333333;
 }
 
-
 .base-one {
-  background: linear-gradient(180deg, #E3EAFA 0%, #FFFFFF 100%);
+  background: linear-gradient(180deg, #e3eafa 0%, #ffffff 100%);
 }
 
 .base-two {
-  background: linear-gradient(180deg, #FFF7E4 0%, rgba(247, 243, 233, 0.1) 100%);
+  background: linear-gradient(180deg, #fff7e4 0%, rgba(247, 243, 233, 0.1) 100%);
 }
 
 .base-three {
-  background: linear-gradient(180deg, #C9E7FF 0%, #FFFFFF 100%);
+  background: linear-gradient(180deg, #c9e7ff 0%, #ffffff 100%);
 }
 
 .price-title {
@@ -598,11 +501,28 @@ const btnList = ref([
 }
 
 .price-content {
-  font-family: 'D-DIN';
+  font-family: "D-DIN";
   font-size: 40px;
   font-weight: 700;
 }
 .price-unit {
   font-size: 22px;
 }
+.home-banner {
+  padding: 26px;
+  /* padding-top:77px ; */
+  background-color: #00203b;
+  transform: translateY(-77px);
+  /* height: 100vh; */
+}
+.custom-btn  {
+  border: 1px solid #00E5FF !important;
+  color: #00E5FF !important;
+}
+
+.custom-btn:hover {
+  color: #fff !important;
+}
+
+
 </style>