pengkai/moblie-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 提交

Browse Source
This commit is contained in:
owen 2025-02-15 22:00:54 +08:00
parent 6abbee8fa0
commit 891b9000c7
1 changed files with 41 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/views/Home.vue
View File

@ -23,38 +23,36 @@
</div> </div>
<div class="max-w-screen-xl mx-auto"> <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 gap-[43px] justify-between items-center mb-[120px] text-white">
<div class="flex-1"> <div class="w-[558px]">
<h1 class="text-3xl font-bold">替代Excel 为您的实验室</h1> <h1 class="text-3xl font-bold">替代Excel 为您的实验室</h1>
<h1 class="text-3xl font-bold mb-[30px]">搭建样本中央数据库</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。 系统基于Web浏览器便捷的交互方式，帮助实验人员进行样本数据管理与业务流程管理，彻底替代纸质与Excel。
</div> </div>
<div class="text-[14px] line-height-[20px]"> <div class="text-[14px] leading-[28px] text-content-spec">
样本数据保管在中心化的服务器中，方便所有人共同创建、查询、使用样本信息，不再需要成员之间进行样本资料的传递。 样本数据保管在中心化的服务器中，方便所有人共同创建、查询、使用样本信息，不再需要成员之间进行样本资料的传递。
</div> </div>
<div class="text-[14px] line-height-[20px]">我们将为您的提供足够安全的数据管理策略，保障服务器中的数据安全。</div> <div class="text-[14px] leading-[28px] text-content-spec">我们将为您的提供足够安全的数据管理策略，保障服务器中的数据安全。</div>
</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" /> <img src="../assets/Group 20.png" class="w-full" alt="Tailwind CSS Carousel component" />
</div> </div>
</div> </div>
<div class="flex space-x-10 justify-between items-center mb-[166px] text-white"> <div class="flex gap-[142px] justify-between items-center mb-[120px] text-white">
<div class="flex-1"> <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="Tailwind CSS Carousel component" />
</div> </div>
<div class="flex-1"> <div class="w-[467px]">
<h1 class="text-3xl font-bold mb-[30px]">精于库位管理，不止于库位管理</h1> <h1 class="text-3xl font-bold mb-[30px] text-right">精于库位管理，不止于库位管理</h1>
<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> </div>
</div> </div>
<div class="text-center text-[36px] font-bold mb-[40px]">全流程覆盖，提升您的样本管理效率</div> </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"> <div class="join join-vertical bg-group-btn">
<button <button
@click="handleClick(index)" @click="handleClick(index)"
@ -68,35 +66,35 @@
<div class="flex-1 ml-[43px]"> <div class="flex-1 ml-[43px]">
<div class="text-[24px] font-bold mb-[10px]">样品登记</div> <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>
<div class="flex gap-[20px]"> <div class="flex gap-[20px] justify-between">
<div class="flex flex-col gap-[10px] w-[208px]"> <div class="flex flex-col w-[208px]">
<div class="h-[208px] w-[208px] rounded-full rounded-full-color flex justify-center items-center"> <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" /> <img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto" alt="Tailwind CSS Carousel component" />
</div> </div>
<div class="text-[14px] line-height-[20px] text-center">符合药企特点，以批次为单位登记，无需逐份登记</div> <div class="text-[14px] leading-[28px] text-center">符合药企特点，以批次为单位登记，无需逐份登记</div>
</div> </div>
<div class="flex flex-col gap-[10px] w-[208px]"> <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"> <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" /> <img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto" alt="Tailwind CSS Carousel component" />
</div> </div>
<div class="text-[14px] line-height-[20px] text-center">符合药企特点，以批次为单位登记，无需逐份登记</div> <div class="text-[14px] leading-[28px] text-center">符合药企特点，以批次为单位登记，无需逐份登记</div>
</div> </div>
<div class="flex flex-col gap-[10px] w-[208px]"> <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"> <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" /> <img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto" alt="Tailwind CSS Carousel component" />
</div> </div>
<div class="text-[14px] line-height-[20px] text-center">符合药企特点，以批次为单位登记，无需逐份登记</div> <div class="text-[14px] leading-[28px] text-center">符合药企特点，以批次为单位登记，无需逐份登记</div>
</div> </div>
<div class="flex flex-col gap-[10px] w-[208px]"> <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"> <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" /> <img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto" alt="Tailwind CSS Carousel component" />
</div> </div>
<div class="text-[14px] line-height-[20px] text-center">符合药企特点，以批次为单位登记，无需逐份登记</div> <div class="text-[14px] leading-[28px] text-center">符合药企特点，以批次为单位登记，无需逐份登记</div>
</div> </div>
</div> </div>
</div> </div>
@ -111,7 +109,7 @@
<h1 class="text-3xl font-bold">您独特的样品管理场景</h1> <h1 class="text-3xl font-bold">您独特的样品管理场景</h1>
</div> </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 gap-[20px] justify-between">
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<img src="../assets/image 83.png" class="w-[170px] h-[170px] mb-[20px]" /> <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>
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<img src="../assets/image 83.png" class="w-[170px] h-[170px] mb-[20px]" /> <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>
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<img src="../assets/image 83.png" class="w-[170px] h-[170px] mb-[20px]" /> <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>
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<img src="../assets/image 83.png" class="w-[170px] h-[170px] mb-[20px]" /> <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>
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<img src="../assets/image 83.png" class="w-[170px] h-[170px] mb-[20px]" /> <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>
</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="Tailwind CSS Carousel component" /> -->
@ -145,40 +143,40 @@
<div class="max-w-screen-xl mx-auto py-[100px]"> <div class="max-w-screen-xl mx-auto py-[100px]">
<div class="text-center text-[32px] font-bold mb-[40px]">面向生物药场景而设计，适合各细分领域</div> <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>
<div class="flex gap-[20px] justify-between mb-[100px]"> <div class="flex gap-[20px] justify-between mb-[100px]">
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" /> <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="flex flex-col items-center"> <div class="flex flex-col items-center">
<img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" /> <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>
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" /> <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="flex flex-col items-center"> <div class="flex flex-col items-center">
<img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" /> <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="flex flex-col items-center"> <div class="flex flex-col items-center">
<img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" /> <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="flex flex-col items-center"> <div class="flex flex-col items-center">
<img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" /> <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>
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" /> <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> </div>
<div class="text-left text-[32px] font-bold">可供多研发项目/多部门</div> <div class="text-left text-[32px] font-bold">可供多研发项目/多部门</div>
@ -516,13 +514,14 @@ const btnList = ref([
/* height: 100vh; */ /* height: 100vh; */
} }
.custom-btn { .custom-btn {
border: 1px solid #00E5FF !important; border: 1px solid #00e5ff !important;
color: #00E5FF !important; color: #00e5ff !important;
} }
.custom-btn:hover { .custom-btn:hover {
color: #fff !important; color: #fff !important;
} }
.text-content-spec {
color: rgba(255, 255, 255, 0.9);
}
</style> </style>