feat: 提交

src/components/Header.vue

@@ -6,7 +6,7 @@
       <div class="navbar">
         <!-- Logo -->
         <div class="flex-none mr-[100px]">
-          <img class="w-[76px]" src="../assets/image 76.png" alt="">
+          <img class="w-[76px]" src="../assets/image 111.png" alt="">
         </div>
         <!-- 导航菜单 -->
         <div class="flex-1 flex  flex-center space-x-10">

src/views/Home.vue

@@ -256,6 +256,59 @@
       <img src="../assets/Group 33.png" class="w-full mb-[90px]" alt="Tailwind CSS Carousel component" />
       <div class="text-center text-[32px] font-bold mb-[40px]">
         系统具备完善的软硬件扩展能力
+        <div role="tablist" class="tabs tabs-boxed float-right">
+          <a role="tab" :class="{ tab: true, 'tab-active': tabActive === 'tab1' }" @click="tabActive = 'tab1'">可对接硬件</a>
+          <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>
+      </div>
+    </div>
+    <div class="w-full">
+      <div class="max-w-screen-xl mx-auto py-[100px]">
+        <div class="text-center text-[32px] font-bold mb-[117px]">
+          功能简述
+        </div>
+        <div class="flex justify-between">
+          <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 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">
+            <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">
+            <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>
       </div>
     </div>
     <Footer />
@@ -263,9 +316,10 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+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) => {
@@ -274,6 +328,21 @@ const handleClick = (index) => {
   btnList.value[index].active = true
 }
 
+const tabActive = ref('tab1')
+
+const showAllList = computed(() => {
+  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 btnList = ref([
   {
     name: '样品登记',
@@ -328,4 +397,30 @@ const btnList = ref([
   padding: 11px;
   gap: 10px;
 }
+
+.custom-boder-wrap {
+  width: 214px;
+  height: 214px;
+  border-radius: 8px;
+  border: 1px solid #D9D9D9
+}
+
+.flex-custom-item {
+  width: 384px;
+  height: 170px;
+  border-radius: 8px;
+  background: linear-gradient(180deg, rgba(217, 249, 255, 0.2592) 1.13%, rgba(156, 191, 255, 0.3) 100%);
+}
+
+.text-custom-content {
+  font-family: PingFang SC;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: center;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  color: #666666;
+  padding: 0px 31px;
+}
 </style>