feat: 提交

src/components/Header.vue

@@ -4,8 +4,8 @@
     <div class="navbar-center flex gap-[80px]">
       <a href="https://www.sanyoubio.com.cn" 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 === 'home' ? '#00E5FF' : 'white' }" @click="goIndex">三优云试剂管家</a>
-      <a class="btn btn-ghost btn-hover" :style="{ color: activeTag === 'contact' ? '#00E5FF' : 'white' }">联系我们</a>
+      <a class="btn btn-ghost btn-hover" :style="{ color: activeTag === 'contact' ? '#00E5FF' : 'white' }" @click="goContact">联系我们</a>
     </div>
     <div class="navbar-end"></div>
   </div>
@@ -13,6 +13,7 @@
 
 <script setup>
 import { defineProps } from "vue";
+import { useRouter } from 'vue-router';
 // 接收父组件传递的 activeTag
 const props = defineProps({
   activeTag: {
@@ -20,6 +21,16 @@ const props = defineProps({
     default: "home", // 可以定义默认值
   },
 });
+
+const router = useRouter();
+
+const goIndex = () => {
+  router.push('/');
+};
+
+const goContact = () => {
+  router.push('/contact');
+};
 </script>
 
 <style scoped>

src/router/index.js

@@ -2,8 +2,7 @@ import { createRouter, createWebHistory } from "vue-router";
 
 // 导入页面组件
 import Home from "../views/Home.vue";
-import About from "../views/About.vue";
+import Contact from "../views/Contact.vue";
-
 // 配置路由
 const routes = [
   {
@@ -12,9 +11,9 @@ const routes = [
     component: Home,
   },
   {
-    path: "/about",
+    path: "/contact",
-    name: "About",
+    name: "Contact",
-    component: About,
+    component: Contact,
   },
 ];
 

src/views/About.vue

@@ -1,11 +0,0 @@
-<template>
-  <div>
-    <Header />
-    <h1>Home Page</h1>
-    <p>Welcome to the Home page!</p>
-  </div>
-</template>
-
-<script setup>
-import Header from '../components/Header.vue'
-</script>

src/views/Contact.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <Header activeTag="contact" />
+    <div class="w-full ">
+      <img class="w-fll" src="../assets/banner00001.jpeg" alt="">
+      <div class="absolute top-[250px] right-[400px]  text-white">
+        <h1 class="text-3xl font-bold mb-[10px]">让技术服务于人类健康</h1>
+        <h1 class="text-xl ">三优云试剂管家致力于通过数字化技术提高药物研发与生产效率</h1>
+      </div>
+    </div>
+    <div class="w-full py-[100px]">
+      <h1 class="text-5xl font-bold mb-[44px] text-center text-white">联系我们</h1>
+      <div class="flex  gap-[50px] max-w-screen-xl mx-auto items-center">
+        <img class="w-[500px]" src="../assets/location.png" alt="">
+        <div class="flex-1 text-white">
+          <div class="mb-[20px] text-spec-color">
+            我们的愿景，是让技术真正服务于人类健康。我们的经营理念，是通过我们的数字化产品，切实解决科研工作者的业务问题，一切行为的导向，均指向各科研场景下问题的解决方案。
+          </div>
+          <div class="mb-[20px] text-spec-color">
+            如果您是我们的客户，我们将以最大的热忱帮助您分析业务问题，通过我们产品+服务的组合方案，帮助您获得科研业务上的收益。
+          </div>
+          <div class="mb-[20px] text-spec-color">
+            如实您是生命科学领域内的设备或服务提供商，我们以欢迎、开放的态度，愿同您建立合作伙伴关系，一道为我们的客户解决问题，提供价值。
+          </div>
+          <div class="mb-[20px] text-spec-color">
+            欢迎与我们联系。
+          </div>
+          <div>
+            电话：18553207110/13205322747
+          </div>
+          <div>
+            邮箱：service@sanyoubio.com
+          </div>
+          <div>
+            地址：上海闵行区竹园路559号T3幢
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <Footer />
+  <Contact />
+</template>
+
+<script setup>
+import Header from '../components/Header.vue'
+import Footer from '../components/Footer.vue'
+import Contact from '../components/Contact.vue'
+</script>
+<style scoped>
+.text-spec-color {
+  color: #A7B5B8;
+}
+</style>

src/views/Home.vue

@@ -2,9 +2,6 @@
   <div class="relative">
     <Header />
     <div class="carousel w-full relative home-banner">
-      <!-- <div class="w-full">
-        <img src="../assets/bgc001.png" class="w-full" />
-      </div> -->
       <div class="w-full logo-image absolute top-[48px]">
         <div class="max-w-screen-xl mx-auto flex items-center reveal-box">
           <img class="w-[76px] mr-[10px]" src="../assets/image 111.png" />
@@ -36,13 +33,13 @@
           <div class="text-[14px] leading-[28px] text-content-spec">我们将为您的提供足够安全的数据管理策略，保障服务器中的数据安全。</div>
         </div>
         <div class="flex-1 mr-[-20px]">
-          <img src="../assets/Group 20.png" class="w-full" alt="Tailwind CSS Carousel component" />
+          <img src="../assets/Group 20.png" class="w-full" alt="" />
         </div>
       </div>
 
       <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" />
+          <img src="../assets/Group 21.png" class="w-full" alt="" />
         </div>
         <div class="w-[467px] reveal-box">
           <h1 class="text-3xl font-bold mb-[30px] text-right">精于库位管理，不止于库位管理</h1>
@@ -60,41 +57,236 @@
           </button>
         </div>
 
-        <div class="flex-1 ml-[43px]">
+        <div v-show="btnList[ 0 ].active" class="flex-1 ml-[43px] ">
           <div class="text-[24px] font-bold mb-[10px]">样品登记</div>
-          <div class="text-[14px] leading-[28px] mb-[10px]">
+          <div class="text-[14px] leading-[28px] mb-[30px]">
             在药企样本管理过程中，样本的登记入库是发生频率非常高的场景。针对样品登记，我们的产品设计始终遵循贴合场景、简化操作、减少重复的原则。
           </div>
           <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"
+                <img src="../assets/1-1.webp" class="w-[122px] h-[122px] mx-auto"
-                  alt="Tailwind CSS Carousel component" />
+                  alt="" />
               </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"
+                <img src="../assets/1-2.webp" class="w-[122px] h-[122px] mx-auto"
-                  alt="Tailwind CSS Carousel component" />
+                  alt="" />
               </div>
-              <div class="text-[14px] leading-[28px] 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"
+                <img src="../assets/1-3.webp" class="w-[122px] h-[122px] mx-auto"
-                  alt="Tailwind CSS Carousel component" />
+                  alt="" />
               </div>
-              <div class="text-[14px] leading-[28px] text-center">符合药企特点，以批次为单位登记，无需逐份登记</div>
+              <div class="text-[14px] leading-[28px] text-center">根据预设规则，系统自动生成样本ID，无需手工操作，不重不漏</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"
+                <img src="../assets/1-4.webp" class="w-[122px] h-[122px] mx-auto"
-                  alt="Tailwind CSS Carousel component" />
+                  alt="" />
               </div>
-              <div class="text-[14px] leading-[28px] text-center">符合药企特点，以批次为单位登记，无需逐份登记</div>
+              <div class="text-[14px] leading-[28px] text-center">登记完成，系统自生成标签，无需手工设计，一键驱动打印机进行打印</div>
+            </div>
+          </div>
+        </div>
+
+        <div v-show="btnList[ 1 ].active" class="flex-1 ml-[43px] ">
+          <div class="text-[24px] font-bold mb-[10px]">样品入库</div>
+          <div class="text-[14px] leading-[28px] mb-[30px]">
+            样本入库是库管人员的高频操作，过程中要求速度快、放对位置、记对位置。同样，我们也是针对这几个指标来进行系统的功能设计。
+          </div>
+          <div class="flex gap-[60px]">
+            <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/2-1.webp" class="w-[122px] h-[122px] mx-auto"
+                  alt="" />
+              </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/2-2.webp" class="w-[122px] h-[122px] mx-auto"
+                  alt="" />
+              </div>
+              <div class="text-[14px] leading-[28px] text-center">提供入库引导，提升操作速度的同时，将入库错放率降低80%</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/2-3.webp" class="w-[122px] h-[122px] mx-auto"
+                  alt="" />
+              </div>
+              <div class="text-[14px] leading-[28px] text-center">通过PAD引导终端方案，将效率进一步提升</div>
+            </div>
+          </div>
+        </div>
+
+
+        <div v-show="btnList[ 2 ].active" class="flex-1 ml-[43px] ">
+          <div class="text-[24px] font-bold mb-[10px]">样品出库</div>
+          <div class="text-[14px] leading-[28px] mb-[30px]">
+            当库中样本量达到一定的规模，“找样本”逐渐变成一件令人头痛的事情。通过本系统，可以帮助您在庞杂的样本库中，找得快、找得对！
+          </div>
+          <div class="flex gap-[60px]">
+            <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/3-1.webp" class="w-[122px] h-[122px] mx-auto"
+                  alt="" />
+              </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/3-2.webp" class="w-[122px] h-[122px] mx-auto"
+                  alt="" />
+              </div>
+              <div class="text-[14px] leading-[28px] text-center">自动定位出库样本，帮助库管人员节省60%样本寻找时间</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/3-3.webp" class="w-[122px] h-[122px] mx-auto"
+                  alt="" />
+              </div>
+              <div class="text-[14px] leading-[28px] text-center">系统引导样本取出操作，提升操作速度的同时，将出库错拿率降低80%</div>
+            </div>
+          </div>
+        </div>
+
+        <div v-show="btnList[ 3 ].active" class="flex-1 ml-[43px] ">
+          <div class="text-[24px] font-bold mb-[10px]">样品数据</div>
+          <div class="text-[14px] leading-[28px] mb-[30px]">
+            除了位置信息以外，样本本身的各个维度的信息，实际上对药物研发、质量追溯、合规审查都有非常大的帮助。作为样本数据中心，系统提供完善的样本数据管理与样本数据使用方案。
+          </div>
+          <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/4-1.webp" class="w-[122px] h-[122px] mx-auto"
+                  alt="" />
+              </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/4-2.webp" class="w-[122px] h-[122px] mx-auto"
+                  alt="" />
+              </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/4-3.webp" class="w-[122px] h-[122px] mx-auto"
+                  alt="" />
+              </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/4-4.webp" class="w-[122px] h-[122px] mx-auto"
+                  alt="" />
+              </div>
+              <div class="text-[14px] leading-[28px] text-center">全程追溯！可全程追踪样本的业务记录，监控样本的来源到流向</div>
+            </div>
+          </div>
+        </div>
+
+        <div v-show="btnList[ 4 ].active" class="flex-1 ml-[43px] ">
+          <div class="text-[24px] font-bold mb-[10px]">库区管理</div>
+          <div class="text-[14px] leading-[28px] mb-[30px]">
+            在库区的管理上，我们致力于提供便捷好用的工具，帮助库管人员减轻管理负担。
+          </div>
+          <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/5-1.webp" class="w-[122px] h-[122px] mx-auto"
+                  alt="" />
+              </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/5-2.webp" class="w-[122px] h-[122px] mx-auto"
+                  alt="" />
+              </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/5-3.webp" class="w-[122px] h-[122px] mx-auto"
+                  alt="" />
+              </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/5-4.webp" class="w-[122px] h-[122px] mx-auto"
+                  alt="" />
+              </div>
+              <div class="text-[14px] leading-[28px] text-center">提醒工具！低库存提醒、冻存架不足提醒、样本过期提醒
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-show="btnList[ 5 ].active" class="flex-1 ml-[43px] ">
+          <div class="text-[24px] font-bold mb-[10px]">库区安全</div>
+          <div class="text-[14px] leading-[28px] mb-[20px]">
+            系统自带【样本库安全云平台】，可与容器温度监控探头、环境温湿度监控探头进行对接，统一保管库内的监控数据。平台具备完善的远程报警、移动端管理、历史温度追溯功能。
+          </div>
+          <img src="../assets/6-1.webp" class="w-full"
+          alt="" />
+        </div>
+
+
+
+        <div v-show="btnList[ 6 ].active" class="flex-1 ml-[43px] ">
+          <div class="text-[24px] font-bold mb-[10px]">系统合规</div>
+          <div class="text-[14px] leading-[28px] mb-[30px]">
+            系统满足GMP、21 CFR Part1l条款的审计追踪要求，针对样本的所有操作均形成记录。我们参照《GAMP5指南》，形成指导系统设计的90个合规要点，协助您进行合规化的样品管理。
+          </div>
+          <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/7-1.webp" class="w-[122px] h-[122px] mx-auto"
+                  alt="" />
+              </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/7-2.webp" class="w-[122px] h-[122px] mx-auto"
+                  alt="" />
+              </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/7-3.webp" class="w-[122px] h-[122px] mx-auto"
+                  alt="" />
+              </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/7-4.webp" class="w-[122px] h-[122px] mx-auto"
+                  alt="" />
+              </div>
+              <div class="text-[14px] leading-[28px] text-center">单据规范</div>
             </div>
           </div>
         </div>
@@ -119,27 +311,27 @@
         </div>
         <div class="w-full 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]" />
+            <img src="../assets/yp01.png" class="w-[170px] h-[170px] mb-[20px]" />
-            <div class="text-[14px] leading-[28px] 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]" />
+            <img src="../assets/yp02.png" class="w-[170px] h-[170px] mb-[20px]" />
-            <div class="text-[14px] leading-[28px] 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]" />
+            <img src="../assets/yp03.png" class="w-[170px] h-[170px] mb-[20px]" />
-            <div class="text-[14px] leading-[28px] 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]" />
+            <img src="../assets/yp04.png" class="w-[170px] h-[170px] mb-[20px]" />
-            <div class="text-[14px] leading-[28px] 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]" />
+            <img src="../assets/yp05.png" class="w-[170px] h-[170px] mb-[20px]" />
-            <div class="text-[14px] leading-[28px] 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" /> -->
+        <!-- <img src="../assets/image 20.png" class="w-full" alt="" /> -->
       </div>
     </div>
 
@@ -151,33 +343,33 @@
       </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]" />
+          <img src="../assets/.png" class="w-[154px] h-[154px] mb-[20px]" />
           <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]" />
+          <img src="../assets/i01.png" class="w-[154px] h-[154px] mb-[20px]" />
           <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]" />
+          <img src="../assets/i02.png" class="w-[154px] h-[154px] mb-[20px]" />
           <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]" />
+          <img src="../assets/i03.png" class="w-[154px] h-[154px] mb-[20px]" />
           <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]" />
+          <img src="../assets/i04.png" class="w-[154px] h-[154px] mb-[20px]" />
           <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]" />
+          <img src="../assets/i05.png" class="w-[154px] h-[154px] mb-[20px]" />
           <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]" />
+          <img src="../assets/i06.png" class="w-[154px] h-[154px] mb-[20px]" />
           <div class="text-[14px] leading-[28px]">其他生物实验室</div>
         </div>
       </div>
@@ -203,7 +395,7 @@
           <!-- <img src="../assets/image 29.png" class="w-[154px] h-[154px] mb-[20px]" /> -->
         </div>
       </div>
-      <img src="../assets/Group 33.png" class="w-full mb-[90px]" alt="Tailwind CSS Carousel component" />
+      <img src="../assets/Group 33.png" class="w-full mb-[90px]" alt="" />
       <div class="text-center text-[32px] font-bold mb-[40px]">
         系统具备完善的软硬件扩展能力
         <div role="tablist" class="tabs tabs-boxed float-right">
@@ -283,7 +475,7 @@
             <img src="../assets/company/image-20.png" alt="" />
           </div>
         </div>
-        <!-- <img src="../assets/image 20.png" class="w-full" alt="Tailwind CSS Carousel component" /> -->
+        <!-- <img src="../assets/image 20.png" class="w-full" alt="" /> -->
       </div>
     </div>
     <div class="w-full">
@@ -498,6 +690,10 @@ const btnList = ref([
     name: "样品入库",
     active: false,
   },
+  {
+    name: "样品出库",
+    active: false,
+  },
   {
     name: "样品数据",
     active: false,