feat: 提交

package-lock.json

@@ -15,7 +15,8 @@
         "@vitejs/plugin-vue": "^5.2.1",
         "autoprefixer": "^10.4.20",
         "daisyui": "^4.12.23",
-        "postcss": "^8.5.1",
+        "postcss": "^8.5.2",
+        "postcss-pxtorem": "^6.1.0",
         "tailwindcss": "^3.4.17",
         "vite": "^6.0.5"
       }
@@ -1974,9 +1975,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.1",
+      "version": "8.5.2",
-      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.1.tgz",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.2.tgz",
-      "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==",
+      "integrity": "sha512-MjOadfU3Ys9KYoX0AdkBlFEF1Vx37uCCeN4ZHnmwm9FfpbsGWMZeBLMmmpY+6Ocqod7mkdZ0DT31OlbsFrLlkA==",
       "funding": [
         {
           "type": "opencollective",
@@ -2101,6 +2102,16 @@
         "postcss": "^8.2.14"
       }
     },
+    "node_modules/postcss-pxtorem": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.1.0.tgz",
+      "integrity": "sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/postcss-selector-parser": {
       "version": "6.1.2",
       "resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",

package.json

@@ -16,7 +16,8 @@
     "@vitejs/plugin-vue": "^5.2.1",
     "autoprefixer": "^10.4.20",
     "daisyui": "^4.12.23",
-    "postcss": "^8.5.1",
+    "postcss": "^8.5.2",
+    "postcss-pxtorem": "^6.1.0",
     "tailwindcss": "^3.4.17",
     "vite": "^6.0.5"
   }

postcss.config.cjs

@@ -1,3 +1,16 @@
+// postcss.config.js
 module.exports = {
-  plugins: [require('tailwindcss'), require('autoprefixer')],
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer'),
+    require('postcss-pxtorem')({
+      rootValue: 16,  // 设置根字体大小，通常为 16px（你可以根据设计稿的基准修改）
+      unitPrecision: 5,  // 设置转换后的 rem 单位的精度
+      propList: ['*'],  // 可以设置哪些属性需要转换，*表示所有属性
+      selectorBlackList: [],  // 不需要转换的类名数组，可以为空
+      replace: true,  // 是否直接替换原有的 px 单位
+      mediaQuery: false,  // 是否转换媒体查询中的 px 单位
+      minPixelValue: 0,  // 小于该值的 px 单位不进行转换
+    })
+  ]
 };

src/main.js

@@ -1,6 +1,19 @@
-import { createApp } from 'vue'
+import { createApp } from "vue";
-import './style.css'
+import "./style.css";
-import App from './App.vue'
+import App from "./App.vue";
-import router from './router'
+import router from "./router";
 
-createApp(App).use(router).mount('#app')
+function setRootFontSize() {
+  const baseWidth = 1920; // 假设设计稿宽度为 1920px（可以根据实际设计稿调整）
+  const clientWidth = document.documentElement.clientWidth || window.innerWidth;
+  const rootFontSize = (clientWidth / baseWidth) * 16; // 基准字体大小为 16px
+  document.documentElement.style.fontSize = rootFontSize + "px";
+}
+
+// 页面加载时设置
+setRootFontSize();
+
+// 当窗口大小变化时重新设置
+window.addEventListener("resize", setRootFontSize);
+
+createApp(App).use(router).mount("#app");

src/views/Home.vue

@@ -100,22 +100,24 @@
         </div>
       </div>
     </div>
-    <div class="w-full custom-bgc-introduce py-[100px]">
+    <div class="w-full custom-bgc-introduce py-[100px] relative">
-      <div class="max-w-screen-xl mx-auto introduce-content">
+      <img class="absolute right-[20px] top-[25px] w-[284px]" src="../assets/Mask group (1).png" alt="" />
+      <div class="max-w-screen-xl mx-auto introduce-content flex items-center flex-col justify-center">
         <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 leading-[68px]">灵活自定义可完美适配</h1>
-            <h1 class="text-3xl font-bold">可完美适配</h1>
+            <h1 class="text-3xl font-bold leading-[68px]">您独特的样品管理场景</h1>
-            <h1 class="text-3xl font-bold">您独特的样品管理场景</h1>
           </div>
 
-          <div class="flex-1 text-[18px] leading-[28px] text-white">
+          <div class="flex-1 text-[16px] leading-[36px] text-white">
-            鉴于公司业务的差异，各实验室均有自己样本管理上的独特性。
+            <div>鉴于公司业务的差异，各实验室均有自己样本管理上的独特性。</div>
+            <div>
               因此，为了能够充分适配具体的管理特点，系统在管理要素上提供足够的自定义空间，包括但不限于样本类型、样本属性、容器结构、冻存架（盒）结构、编码方式、标签模板等等...
-            以此，系统可确保与具体样本管理场景的灵活适配。
+            </div>
+            <div>以此，系统可确保与具体样本管理场景的灵活适配。</div>
           </div>
         </div>
-        <div class="flex gap-[20px] justify-between">
+        <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]" />
             <div class="text-[14px] leading-[28px] text-white">样本类型</div>
@@ -141,9 +143,9 @@
       </div>
     </div>
 
-    <div class="max-w-screen-xl mx-auto py-[100px]">
+    <div class="max-w-screen-xl mx-auto py-[100px] text-white">
       <div class="text-center text-[32px] font-bold mb-[40px]">面向生物药场景而设计，适合各细分领域</div>
-      <div class="flex-1 text-[18px] leading-[28px] mb-[40px]">
+      <div class="flex-1 text-[16px] leading-[36px] mb-[40px] text-content-spec">
         药企样品管理场景在业务流程、操作方式、数据管理、实施落地方面均有其特殊性，这也是通用型或者医院型样本管理软件无法完全胜任的原因。三优云试剂管家
         专门面向生物药企的样本管理场景而设计，如果您的实验室属于生物药及相关范畴，那么本产品将是您样本管理的不二之选。
       </div>
@@ -182,21 +184,21 @@
       <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]">
+        <div class="text-[16px] w-[500px] text-content-spec">
           系统通过样本数据的灵活授权、数据分级等方式，可确保各个项目/各个部门单独管理自己的容器与样本，而不会相互干扰
         </div>
         <div class="flex-1 flex gap-[10px] justify-end">
           <div class="custom-btn-bg">
             <img class="w-[56px]" src="../assets/Frame 43.png" />
-            <span class="text-[12px] leading-3">RESEARCH AND DEVELOPMENT</span>
+            <span class="text-[12px] leading-3 text-icon-spec">RESEARCH AND DEVELOPMENT</span>
           </div>
           <div class="custom-btn-bg">
             <img class="w-[56px]" src="../assets/Frame 45.png" />
-            <span class="text-[12px] leading-3">CONDUCT PRODUCTION</span>
+            <span class="text-[12px] leading-3 text-icon-spec">CONDUCT PRODUCTION</span>
           </div>
           <div class="custom-btn-bg">
             <img class="w-[56px]" src="../assets/Frame 47.png" />
-            <span class="text-[12px] leading-3">CONDUCT QUALITY CHECK</span>
+            <span class="text-[12px] leading-3 text-icon-spec">CONDUCT QUALITY CHECK</span>
           </div>
           <!-- <img src="../assets/image 29.png" class="w-[154px] h-[154px] mb-[20px]" /> -->
         </div>
@@ -209,62 +211,121 @@
           <a role="tab" :class="{ tab: true, 'tab-active': tabActive === 'tab2' }" @click="tabActive = 'tab2'">可对接软件</a>
         </div>
       </div>
-      <div class="flex flex-wrap mt-[47px]">
+      <div class="flex flex-wrap mt-[47px] gap-x-[140px] gap-y-[48px]">
-        <div
+        <div v-for="item in hardwareList" class="custom-boder-wrap">
-          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 custom-bgc-cooperation py-[100px]">
+      <div class="max-w-screen-xl mx-auto cooperation-content  text-white">
+        <div class="text-center text-[32px] font-bold mb-[40px]">合作客户</div>
+        <div class="w-full grid grid-cols-5 gap-4">
+          <div class="w-[229px] h-[124px]">
+            <img src="../assets/company/image-1.png" alt="">
+          </div>
+          <div class="w-[229px] h-[124px]">
+            <img src="../assets/company/image-2.png" alt="">
+          </div>
+          <div class="w-[229px] h-[124px]">
+            <img src="../assets/company/image-3.png" alt="">
+          </div>
+          <div class="w-[229px] h-[124px]">
+            <img src="../assets/company/image-4.png" alt="">
+          </div>
+          <div class="w-[229px] h-[124px]">
+            <img src="../assets/company/image-5.png" alt="">
+          </div>
+          <div class="w-[229px] h-[124px]">
+            <img src="../assets/company/image-6.png" alt="">
+          </div>
+          <div class="w-[229px] h-[124px]">
+            <img src="../assets/company/image-7.png" alt="">
+          </div>
+          <div class="w-[229px] h-[124px]">
+            <img src="../assets/company/image-8.png" alt="">
+          </div>
+          <div class="w-[229px] h-[124px]">
+            <img src="../assets/company/image-9.png" alt="">
+          </div>
+          <div class="w-[229px] h-[124px]">
+            <img src="../assets/company/image-10.png" alt="">
+          </div>
+          <div class="w-[229px] h-[124px]">
+            <img src="../assets/company/image-11.png" alt="">
+          </div>
+          <div class="w-[229px] h-[124px]">
+            <img src="../assets/company/image-12.png" alt="">
+          </div>
+          <div class="w-[229px] h-[124px]">
+            <img src="../assets/company/image-13.png" alt="">
+          </div>
+          <div class="w-[229px] h-[124px]">
+            <img src="../assets/company/image-14.png" alt="">
+          </div>
+          <div class="w-[229px] h-[124px]">
+            <img src="../assets/company/image-15.png" alt="">
+          </div>
+          <div class="w-[229px] h-[124px]">
+            <img src="../assets/company/image-16.png" alt="">
+          </div>
+          <div class="w-[229px] h-[124px]">
+            <img src="../assets/company/image-17.png" alt="">
+          </div>
+          <div class="w-[229px] h-[124px]">
+            <img src="../assets/company/image-18.png" alt="">
+          </div>
+          <div class="w-[229px] h-[124px]">
+            <img src="../assets/company/image-19.png" alt="">
+          </div>
+          <div class="w-[229px] h-[124px]">
+            <img src="../assets/company/image-20.png" alt="">
+          </div>
+        </div>
+        <!-- <img src="../assets/image 20.png" class="w-full" alt="Tailwind CSS Carousel component" /> -->
+      </div>
+    </div>
     <div class="w-full">
-      <div class="max-w-screen-xl mx-auto py-[74px]">
+      <div class="max-w-screen-xl mx-auto py-[74px] text-white">
-        <div class="text-center text-[32px] font-bold mb-[117px]">功能简述</div>
+        <div class="text-center text-[32px] font-bold mb-[40px]">功能简述</div>
         <div class="flex justify-between flex-wrap">
-          <div class="flex-custom-item relative flex justify-center flex-col mb-[80px]">
+          <div class="flex-custom-item relative flex justify-center flex-col mb-[24px]">
-            <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]">
+          <div class="flex-custom-item relative flex justify-center flex-col mb-[24px]">
-            <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]">
+          <div class="flex-custom-item relative flex justify-center flex-col mb-[24px]">
-            <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]">
+          <div class="flex-custom-item relative flex justify-center flex-col mb-[24px]">
-            <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]">
+          <div class="flex-custom-item relative flex justify-center flex-col mb-[24px]">
-            <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]">
+          <div class="flex-custom-item relative flex justify-center flex-col mb-[24px]">
-            <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">
               菜单、按钮、公告、附件、基础数据、消息通知 配置、全局字典等系统配置
@@ -272,7 +333,6 @@
           </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">
               动态监控样品库存状态，库存量查询与统计。 根据阈值实时检测库存量，低于阈值企微、 邮件、短信等渠道即刻发出预警通知
@@ -280,7 +340,6 @@
           </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">
               直观展示设备使用情况和库存库位信息，具备实时 更新、交互查询、全局可观等功能，支持快速了 解使用率、预警情况及库位布局
@@ -288,7 +347,6 @@
           </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">
               支持接入智能化监控设备，如温感、烟感、温湿 器等设备，提供REST API接口衔接各种 LIMS系统
@@ -297,7 +355,7 @@
         </div>
       </div>
     </div>
-    <div class="w-full service-custom-bg py-[60px]">
+    <div class="w-full py-[60px] text-white">
       <div class="max-w-screen-xl mx-auto">
         <div class="text-center text-[32px] font-bold mb-[40px]">服务与价格</div>
         <div class="flex gap-[28px]">
@@ -334,7 +392,13 @@
 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 Image101 from "../assets/image 101.png";
+import Image48 from "../assets/image 48.png";
+import Frame50 from "../assets/Frame 50.png";
+import Image122 from "../assets/image 122.png";
+import Image123 from "../assets/image 123.png";
+import Image124 from "../assets/image 124.png";
+import Image125 from "../assets/image 125.png";
 
 const handleClick = (index) => {
   btnList.value.forEach((item) => {
@@ -349,9 +413,9 @@ const showAllList = computed(() => {
   return tabActive.value === "tab1" ? hardwareList.value : softwareList.value;
 });
 
-const hardwareList = ref([Image222, Image222, Image222, Image222, Image222]);
+const hardwareList = ref([Image101, Image48, Frame50, Image122, Image123, Image124, Image125]);
 
-const softwareList = ref([Image222, Image222, Image222, Image222, Image222]);
+const softwareList = ref([]);
 
 const btnList = ref([
   {
@@ -393,7 +457,15 @@ const btnList = ref([
 .custom-bgc-introduce {
   /* height: 568px; */
   background-image: url("../assets/Rectangle 83.png");
-  background-size: calc(100% - 40px) 100%; /* 宽度是100%，去掉左右各20px */
+  background-size: calc(100% - 40px) auto; /* 宽度是100%，去掉左右各20px */
+  background-position: 20px center; /* 背景图片左右各20px，垂直居中 */
+  background-repeat: no-repeat; /* 防止图片重复 */
+  margin: 0; /* 去除默认的边距 */
+}
+
+.custom-bgc-cooperation {
+  background-image: url("../assets/Mask group (2).png");
+  background-size: calc(100% - 40px) auto; /* 宽度是100%，去掉左右各20px */
   background-position: 20px center; /* 背景图片左右各20px，垂直居中 */
   background-repeat: no-repeat; /* 防止图片重复 */
   margin: 0; /* 去除默认的边距 */
@@ -415,7 +487,8 @@ const btnList = ref([
   width: 214px;
   height: 214px;
   border-radius: 8px;
-  border: 1px solid #d9d9d9;
+  border: 1px solid rgba(217, 250, 255, 0.3);
+  padding: 20px;
 }
 
 .flex-custom-item {
@@ -426,14 +499,13 @@ const btnList = ref([
 }
 
 .text-custom-content {
-  font-family: PingFang SC;
   font-size: 16px;
   font-weight: 400;
   line-height: 24px;
+  color: rgba(255, 255, 255, 0.8);
   text-align: center;
   text-underline-position: from-font;
   text-decoration-skip-ink: none;
-  color: #666666;
   padding: 0px 16px;
 }
 
@@ -530,6 +602,12 @@ const btnList = ref([
   color: rgba(255, 255, 255, 0.9);
 }
 .introduce-content {
-  min-height: 568px;
+  height: 568px;
+}
+.cooperation-content {
+  height: 675px;
+}
+.text-icon-spec {
+  color: rgba(255, 255, 255, 0.7);
 }
 </style>