diff --git a/src/views/Home.vue b/src/views/Home.vue
index ef35bde..6e68812 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -23,38 +23,36 @@
     </div>
 
     <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">
+      <div class="flex gap-[43px] justify-between items-center mb-[120px] text-white">
+        <div class="w-[558px]">
           <h1 class="text-3xl font-bold">替代Excel 为您的实验室</h1>
           <h1 class="text-3xl font-bold mb-[30px]">搭建样本中央数据库</h1>
-          <div class="text-[14px] line-height-[20px]">
+          <div class="text-[14px] leading-[28px] text-content-spec">
             系统基于Web浏览器便捷的交互方式，帮助实验人员进行样本数据管理与业务流程管理，彻底替代纸质与Excel。
           </div>
-          <div class="text-[14px] line-height-[20px]">
+          <div class="text-[14px] leading-[28px] text-content-spec">
             样本数据保管在中心化的服务器中，方便所有人共同创建、查询、使用样本信息，不再需要成员之间进行样本资料的传递。
           </div>
-          <div class="text-[14px] line-height-[20px]">我们将为您的提供足够安全的数据管理策略，保障服务器中的数据安全。</div>
+          <div class="text-[14px] leading-[28px] text-content-spec">我们将为您的提供足够安全的数据管理策略，保障服务器中的数据安全。</div>
         </div>
-        <div class="flex-1">
+        <div class="flex-1 mr-[-20px]">
           <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] text-white">
-        <div class="flex-1">
+      <div class="flex gap-[142px] justify-between items-center mb-[120px] text-white">
+        <div class="flex-1 ml-[-20px]">
           <img src="../assets/Group 21.png" class="w-full" alt="Tailwind CSS Carousel component" />
         </div>
-        <div class="flex-1">
-          <h1 class="text-3xl font-bold mb-[30px]">精于库位管理，不止于库位管理</h1>
-          <div class="text-[14px] line-height-[20px]">
-            系统提供出色的库位管理方案，帮助库管人员直观精确地对样本进行定位。
-            另外，空间剩余情况统计、碎片化统计、空间不足提醒、盘库工具等业务，可有效提升库区管理效率。
+        <div class="w-[467px]">
+          <h1 class="text-3xl font-bold mb-[30px] text-right">精于库位管理，不止于库位管理</h1>
+          <div class="text-[14px] leading-[28px] text-content-spec">
+            系统提供出色的库位管理方案，帮助库管人员直观精确地对样本进行定位。另外，空间剩余情况统计、碎片化统计、空间不足提醒、盘库工具等业务，可有效提升库区管理效率。如果您还在为库内情况不明而烦恼，三优云试剂管家不失为您的效率之选。
           </div>
-          <div class="text-[14px] line-height-[20px]">如果您还在为库内情况不明而烦恼，三优云试剂管家不失为您的效率之选。</div>
         </div>
       </div>
-      <div class="text-center text-[36px] font-bold mb-[40px]">全流程覆盖，提升您的样本管理效率</div>
-      <div class="flex">
+      <div class="text-center text-[36px] font-bold mb-[40px] text-white">全流程覆盖，提升您的样本管理效率</div>
+      <div class="flex w-full text-white mb-[130px]">
         <div class="join join-vertical bg-group-btn">
           <button
             @click="handleClick(index)"
@@ -68,35 +66,35 @@
 
         <div class="flex-1 ml-[43px]">
           <div class="text-[24px] font-bold mb-[10px]">样品登记</div>
-          <div class="text-[14px] line-height-[20px] mb-[10px]">
+          <div class="text-[14px] leading-[28px] mb-[10px]">
             在药企样本管理过程中，样本的登记入库是发生频率非常高的场景。针对样品登记，我们的产品设计始终遵循贴合场景、简化操作、减少重复的原则。
           </div>
-          <div class="flex gap-[20px]">
-            <div class="flex flex-col gap-[10px] w-[208px]">
+          <div class="flex gap-[20px] justify-between">
+            <div class="flex flex-col 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>
+              <div class="text-[14px] leading-[28px] 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>
+              <div class="text-[14px] leading-[28px] 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>
+              <div class="text-[14px] leading-[28px] 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>
+              <div class="text-[14px] leading-[28px] text-center">符合药企特点，以批次为单位登记，无需逐份登记</div>
             </div>
           </div>
         </div>
@@ -111,7 +109,7 @@
             <h1 class="text-3xl font-bold">您独特的样品管理场景</h1>
           </div>
 
-          <div class="flex-1 text-[18px] line-height-[20px] text-white">
+          <div class="flex-1 text-[18px] leading-[28px] text-white">
             鉴于公司业务的差异，各实验室均有自己样本管理上的独特性。
             因此，为了能够充分适配具体的管理特点，系统在管理要素上提供足够的自定义空间，包括但不限于样本类型、样本属性、容器结构、冻存架（盒）结构、编码方式、标签模板等等...
             以此，系统可确保与具体样本管理场景的灵活适配。
@@ -120,23 +118,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] leading-[28px] 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] leading-[28px] 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] leading-[28px] 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] leading-[28px] 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] leading-[28px] text-white">样本类型</div>
           </div>
         </div>
         <!-- <img src="../assets/image 20.png" class="w-full" alt="Tailwind CSS Carousel component" /> -->
@@ -145,40 +143,40 @@
 
     <div class="max-w-screen-xl mx-auto py-[100px]">
       <div class="text-center text-[32px] font-bold mb-[40px]">面向生物药场景而设计，适合各细分领域</div>
-      <div class="flex-1 text-[18px] line-height-[20px] mb-[40px]">
+      <div class="flex-1 text-[18px] leading-[28px] mb-[40px]">
         药企样品管理场景在业务流程、操作方式、数据管理、实施落地方面均有其特殊性，这也是通用型或者医院型样本管理软件无法完全胜任的原因。三优云试剂管家
         专门面向生物药企的样本管理场景而设计，如果您的实验室属于生物药及相关范畴，那么本产品将是您样本管理的不二之选。
       </div>
       <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] leading-[28px]">抗体药物</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] leading-[28px]">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] leading-[28px]">疫苗</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] leading-[28px]">发酵工程</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] leading-[28px]">生物试剂</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] leading-[28px]">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] leading-[28px]">其他生物实验室</div>
         </div>
       </div>
       <div class="text-left text-[32px] font-bold">可供多研发项目/多部门</div>
@@ -515,14 +513,15 @@ const btnList = ref([
   transform: translateY(-77px);
   /* height: 100vh; */
 }
-.custom-btn  {
-  border: 1px solid #00E5FF !important;
-  color: #00E5FF !important;
+.custom-btn {
+  border: 1px solid #00e5ff !important;
+  color: #00e5ff !important;
 }
 
 .custom-btn:hover {
   color: #fff !important;
 }
-
-
+.text-content-spec {
+  color: rgba(255, 255, 255, 0.9);
+}
 </style>