diff --git a/package-lock.json b/package-lock.json index 79723ba..2515c52 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.1.tgz", - "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==", + "version": "8.5.2", + "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.2.tgz", + "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", diff --git a/package.json b/package.json index 36750da..1b2c68f 100644 --- a/package.json +++ b/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" } diff --git a/postcss.config.cjs b/postcss.config.cjs index 3ea9307..6e17b82 100644 --- a/postcss.config.cjs +++ b/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 单位不进行转换 + }) + ] }; diff --git a/src/assets/Frame 43.png b/src/assets/Frame 43.png index 6f6fd8a..8ae7924 100644 Binary files a/src/assets/Frame 43.png and b/src/assets/Frame 43.png differ diff --git a/src/assets/Frame 45.png b/src/assets/Frame 45.png index 927ada5..5f15353 100644 Binary files a/src/assets/Frame 45.png and b/src/assets/Frame 45.png differ diff --git a/src/assets/Frame 47.png b/src/assets/Frame 47.png index c481c7a..09c3915 100644 Binary files a/src/assets/Frame 47.png and b/src/assets/Frame 47.png differ diff --git a/src/assets/Frame 50.png b/src/assets/Frame 50.png new file mode 100644 index 0000000..0756cd1 Binary files /dev/null and b/src/assets/Frame 50.png differ diff --git a/src/assets/Group 33.png b/src/assets/Group 33.png index 625e791..0a9e447 100644 Binary files a/src/assets/Group 33.png and b/src/assets/Group 33.png differ diff --git a/src/assets/Mask group (2).png b/src/assets/Mask group (2).png new file mode 100644 index 0000000..e4f7fff Binary files /dev/null and b/src/assets/Mask group (2).png differ diff --git a/src/assets/company/image-1.png b/src/assets/company/image-1.png new file mode 100644 index 0000000..3afb2dc Binary files /dev/null and b/src/assets/company/image-1.png differ diff --git a/src/assets/company/image-10.png b/src/assets/company/image-10.png new file mode 100644 index 0000000..5eccf89 Binary files /dev/null and b/src/assets/company/image-10.png differ diff --git a/src/assets/company/image-11.png b/src/assets/company/image-11.png new file mode 100644 index 0000000..c969756 Binary files /dev/null and b/src/assets/company/image-11.png differ diff --git a/src/assets/company/image-12.png b/src/assets/company/image-12.png new file mode 100644 index 0000000..50b7dae Binary files /dev/null and b/src/assets/company/image-12.png differ diff --git a/src/assets/company/image-13.png b/src/assets/company/image-13.png new file mode 100644 index 0000000..adeaff1 Binary files /dev/null and b/src/assets/company/image-13.png differ diff --git a/src/assets/company/image-14.png b/src/assets/company/image-14.png new file mode 100644 index 0000000..6684595 Binary files /dev/null and b/src/assets/company/image-14.png differ diff --git a/src/assets/company/image-15.png b/src/assets/company/image-15.png new file mode 100644 index 0000000..f62276c Binary files /dev/null and b/src/assets/company/image-15.png differ diff --git a/src/assets/company/image-16.png b/src/assets/company/image-16.png new file mode 100644 index 0000000..f01f28e Binary files /dev/null and b/src/assets/company/image-16.png differ diff --git a/src/assets/company/image-17.png b/src/assets/company/image-17.png new file mode 100644 index 0000000..b453a17 Binary files /dev/null and b/src/assets/company/image-17.png differ diff --git a/src/assets/company/image-18.png b/src/assets/company/image-18.png new file mode 100644 index 0000000..e79c9cf Binary files /dev/null and b/src/assets/company/image-18.png differ diff --git a/src/assets/company/image-19.png b/src/assets/company/image-19.png new file mode 100644 index 0000000..574cc6c Binary files /dev/null and b/src/assets/company/image-19.png differ diff --git a/src/assets/company/image-2.png b/src/assets/company/image-2.png new file mode 100644 index 0000000..0bfcdcd Binary files /dev/null and b/src/assets/company/image-2.png differ diff --git a/src/assets/company/image-20.png b/src/assets/company/image-20.png new file mode 100644 index 0000000..526db41 Binary files /dev/null and b/src/assets/company/image-20.png differ diff --git a/src/assets/company/image-3.png b/src/assets/company/image-3.png new file mode 100644 index 0000000..a885012 Binary files /dev/null and b/src/assets/company/image-3.png differ diff --git a/src/assets/company/image-4.png b/src/assets/company/image-4.png new file mode 100644 index 0000000..681c81d Binary files /dev/null and b/src/assets/company/image-4.png differ diff --git a/src/assets/company/image-5.png b/src/assets/company/image-5.png new file mode 100644 index 0000000..52d4b79 Binary files /dev/null and b/src/assets/company/image-5.png differ diff --git a/src/assets/company/image-6.png b/src/assets/company/image-6.png new file mode 100644 index 0000000..f4750ef Binary files /dev/null and b/src/assets/company/image-6.png differ diff --git a/src/assets/company/image-7.png b/src/assets/company/image-7.png new file mode 100644 index 0000000..2929baa Binary files /dev/null and b/src/assets/company/image-7.png differ diff --git a/src/assets/company/image-8.png b/src/assets/company/image-8.png new file mode 100644 index 0000000..c01ec22 Binary files /dev/null and b/src/assets/company/image-8.png differ diff --git a/src/assets/company/image-9.png b/src/assets/company/image-9.png new file mode 100644 index 0000000..d77e56e Binary files /dev/null and b/src/assets/company/image-9.png differ diff --git a/src/assets/image 101.png b/src/assets/image 101.png new file mode 100644 index 0000000..71be5b2 Binary files /dev/null and b/src/assets/image 101.png differ diff --git a/src/assets/image 122.png b/src/assets/image 122.png new file mode 100644 index 0000000..cff2808 Binary files /dev/null and b/src/assets/image 122.png differ diff --git a/src/assets/image 123.png b/src/assets/image 123.png new file mode 100644 index 0000000..fff352f Binary files /dev/null and b/src/assets/image 123.png differ diff --git a/src/assets/image 124.png b/src/assets/image 124.png new file mode 100644 index 0000000..4f5565f Binary files /dev/null and b/src/assets/image 124.png differ diff --git a/src/assets/image 125.png b/src/assets/image 125.png new file mode 100644 index 0000000..b9652c7 Binary files /dev/null and b/src/assets/image 125.png differ diff --git a/src/assets/image 48.png b/src/assets/image 48.png new file mode 100644 index 0000000..2d160ab Binary files /dev/null and b/src/assets/image 48.png differ diff --git a/src/main.js b/src/main.js index 7b19912..9ee89b4 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,19 @@ -import { createApp } from 'vue' -import './style.css' -import App from './App.vue' -import router from './router' +import { createApp } from "vue"; +import "./style.css"; +import App from "./App.vue"; +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"); diff --git a/src/views/Home.vue b/src/views/Home.vue index 080cf5b..0e50a6b 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -100,22 +100,24 @@ -
-
+
+ +
-

灵活自定义

-

可完美适配

-

您独特的样品管理场景

+

灵活自定义可完美适配

+

您独特的样品管理场景

-
- 鉴于公司业务的差异，各实验室均有自己样本管理上的独特性。 - 因此，为了能够充分适配具体的管理特点，系统在管理要素上提供足够的自定义空间，包括但不限于样本类型、样本属性、容器结构、冻存架（盒）结构、编码方式、标签模板等等... - 以此，系统可确保与具体样本管理场景的灵活适配。 +
+
鉴于公司业务的差异，各实验室均有自己样本管理上的独特性。
+
+ 因此，为了能够充分适配具体的管理特点，系统在管理要素上提供足够的自定义空间，包括但不限于样本类型、样本属性、容器结构、冻存架（盒）结构、编码方式、标签模板等等... +
+
以此，系统可确保与具体样本管理场景的灵活适配。
-
+
样本类型
@@ -141,9 +143,9 @@
-
+
面向生物药场景而设计，适合各细分领域
-
+
药企样品管理场景在业务流程、操作方式、数据管理、实施落地方面均有其特殊性，这也是通用型或者医院型样本管理软件无法完全胜任的原因。三优云试剂管家 专门面向生物药企的样本管理场景而设计，如果您的实验室属于生物药及相关范畴，那么本产品将是您样本管理的不二之选。
@@ -182,21 +184,21 @@
可供多研发项目/多部门
共同管理样本
-
+
系统通过样本数据的灵活授权、数据分级等方式，可确保各个项目/各个部门单独管理自己的容器与样本，而不会相互干扰
- RESEARCH AND DEVELOPMENT + RESEARCH AND DEVELOPMENT
- CONDUCT PRODUCTION + CONDUCT PRODUCTION
- CONDUCT QUALITY CHECK + CONDUCT QUALITY CHECK
@@ -209,62 +211,121 @@ 可对接软件
-
-
+
+
+ +
+
+
合作客户
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
-
-
功能简述
+
+
功能简述
-
- +
出入库
入库、出库、样品盘点及存储功能，支持对样 品进行分类、编码、登记和存储位置管理等
-
- +
容器管理
多维度自定义设备容器结构层级，可视化样品 定位入库、出库、移库等，快速精准查找样品 位置和状态
-
- +
用户管理
多用户、多角色、权限明确划分配置，审批流 和数据安全严格遵循标准执行，灵活自定义 可完美匹配
-
- +
检索追踪
通过样品编号、名称、类型等多种方式快速定 位样品信息，实时记录样品的流通和 使用情况综合查询
-
- +
库存库位
分类编码、库位规划布局以及智能化推荐库位，通 过标识迅速追踪定位，支持可视化自定义创建库 位，实现了通过库位查样品或通过样品查库位
-
- +
系统管理
菜单、按钮、公告、附件、基础数据、消息通知 配置、全局字典等系统配置 @@ -272,7 +333,6 @@
-
库存预警
动态监控样品库存状态，库存量查询与统计。 根据阈值实时检测库存量，低于阈值企微、 邮件、短信等渠道即刻发出预警通知 @@ -280,7 +340,6 @@
-
可视化页面
直观展示设备使用情况和库存库位信息，具备实时 更新、交互查询、全局可观等功能，支持快速了 解使用率、预警情况及库位布局 @@ -288,7 +347,6 @@
-
自由扩展
支持接入智能化监控设备，如温感、烟感、温湿 器等设备，提供REST API接口衔接各种 LIMS系统 @@ -297,7 +355,7 @@
-
+
服务与价格
@@ -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); }