feat: 提交
This commit is contained in:
parent
8e055b9940
commit
6abbee8fa0
Binary file not shown.
|
Before Width: | Height: | Size: 586 KiB After Width: | Height: | Size: 545 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 394 KiB After Width: | Height: | Size: 392 KiB |
BIN
src/assets/Rectangle 85.png
Normal file
BIN
src/assets/Rectangle 85.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
src/assets/bgc001.png
Normal file
BIN
src/assets/bgc001.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
@ -1,27 +1,36 @@
|
||||
<template>
|
||||
<header class="bg-header-background text-white fixed top-0 left-0 w-full z-50">
|
||||
<!-- 容器 -->
|
||||
<div class="max-w-screen-xl mx-auto">
|
||||
<!-- 导航条 -->
|
||||
<div class="navbar">
|
||||
<!-- Logo -->
|
||||
<div class="flex-none mr-[100px]">
|
||||
<img class="w-[76px]" src="../assets/image 111.png" alt="">
|
||||
<div class="navbar header-bg-color">
|
||||
<div class="navbar-start"></div>
|
||||
<div class="navbar-center">
|
||||
<a 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 === 'contact' ? '#00E5FF' : 'white' }">联系我们</a>
|
||||
</div>
|
||||
<!-- 导航菜单 -->
|
||||
<div class="flex-1 flex flex-center space-x-10">
|
||||
<a class="btn btn-ghost text-base btn-active" href="#">关于三优</a>
|
||||
<a class="btn btn-ghost text-base" href="#">三优云试剂管家</a>
|
||||
<a class="btn btn-ghost text-base" href="#">联系我们</a>
|
||||
<div class="navbar-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps } from "vue";
|
||||
// 接收父组件传递的 activeTag
|
||||
const props = defineProps({
|
||||
activeTag: {
|
||||
type: String,
|
||||
default: "home", // 可以定义默认值
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header-bg-color {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
height: 77px;
|
||||
z-index: 111;
|
||||
position: relative;
|
||||
}
|
||||
.btn-hover:hover {
|
||||
color: #00E5FF !important;
|
||||
}
|
||||
/* 你可以在这里添加一些自定义的样式 */
|
||||
</style>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
@tailwind utilities;
|
||||
|
||||
#app {
|
||||
background-color: #b8f0ff63;
|
||||
background-color: #00203b;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
||||
@ -1,33 +1,31 @@
|
||||
<template>
|
||||
<div class="relative">
|
||||
<Header />
|
||||
<div class="carousel w-full relative">
|
||||
<div class="carousel-item w-full">
|
||||
<img src="../assets/carousel1.png" class="w-full" alt="Tailwind CSS Carousel component" />
|
||||
<div class="carousel w-full relative home-banner">
|
||||
<div class="w-full">
|
||||
<img src="../assets/bgc001.png" class="w-full" />
|
||||
</div>
|
||||
<div class="carousel-item w-full">
|
||||
<img src="../assets/carousel2.png" class="w-full" alt="Tailwind CSS Carousel component" />
|
||||
<div class="w-full logo-image absolute top-[48px]">
|
||||
<div class="max-w-screen-xl mx-auto flex items-center">
|
||||
<img class="w-[76px] mr-[10px]" src="../assets/image 111.png" />
|
||||
<span class="text-white text-sm">三优云试剂管家</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="absolute top-[200px] w-full text-carousel-text">
|
||||
<div class="max-w-screen-xl mx-auto">
|
||||
<h1 class="text-3xl font-bold mb-[35px]">三优生物样品管理平台</h1>
|
||||
<h1 class="text-4xl font-bold text-white mb-[35px]">专业面向生物药企的样品管理平台</h1>
|
||||
<h1 class="text-5xl font-bold mb-[44px]">三优生物样品管理平台</h1>
|
||||
<h1 class="text-5xl text-white mb-[58px]">专业面向生物药企的样品管理平台</h1>
|
||||
<div class="button">
|
||||
<button
|
||||
class="btn bg-[linear-gradient(274.67deg,_#52E8FF_-5.78%,_#0D90FF_96.22%)] text-white rounded-full border-none h-[50px] w-[128px]">
|
||||
立即体验
|
||||
</button>
|
||||
<button class="btn custom-btn btn-info btn-circle btn-outline h-[50px] w-[128px]">立即体验</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-screen-xl mx-auto py-[100px]">
|
||||
<div class="flex space-x-10 justify-between items-center mb-[166px]">
|
||||
<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-1">
|
||||
<h1 class="text-3xl font-bold">替代Excel</h1>
|
||||
<h1 class="text-3xl font-bold">为您的实验室</h1>
|
||||
<h1 class="text-3xl font-bold">替代Excel 为您的实验室</h1>
|
||||
<h1 class="text-3xl font-bold mb-[30px]">搭建样本中央数据库</h1>
|
||||
<div class="text-[14px] line-height-[20px]">
|
||||
系统基于Web浏览器便捷的交互方式，帮助实验人员进行样本数据管理与业务流程管理，彻底替代纸质与Excel。
|
||||
@ -35,16 +33,14 @@
|
||||
<div class="text-[14px] line-height-[20px]">
|
||||
样本数据保管在中心化的服务器中，方便所有人共同创建、查询、使用样本信息，不再需要成员之间进行样本资料的传递。
|
||||
</div>
|
||||
<div class="text-[14px] line-height-[20px]">
|
||||
我们将为您的提供足够安全的数据管理策略，保障服务器中的数据安全。
|
||||
</div>
|
||||
<div class="text-[14px] line-height-[20px]">我们将为您的提供足够安全的数据管理策略，保障服务器中的数据安全。</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<img src="../assets/Group 20.png" class="w-full" alt="Tailwind CSS Carousel component" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-10 justify-between items-center mb-[166px]">
|
||||
<div class="flex space-x-10 justify-between items-center mb-[166px] text-white">
|
||||
<div class="flex-1">
|
||||
<img src="../assets/Group 21.png" class="w-full" alt="Tailwind CSS Carousel component" />
|
||||
</div>
|
||||
@ -54,73 +50,58 @@
|
||||
系统提供出色的库位管理方案，帮助库管人员直观精确地对样本进行定位。
|
||||
另外，空间剩余情况统计、碎片化统计、空间不足提醒、盘库工具等业务，可有效提升库区管理效率。
|
||||
</div>
|
||||
<div class="text-[14px] line-height-[20px]">
|
||||
如果您还在为库内情况不明而烦恼，三优云试剂管家不失为您的效率之选。
|
||||
<div class="text-[14px] line-height-[20px]">如果您还在为库内情况不明而烦恼，三优云试剂管家不失为您的效率之选。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center text-[36px] font-bold mb-[40px]">
|
||||
全流程覆盖，提升您的样本管理效率
|
||||
</div>
|
||||
<div class="text-center text-[36px] font-bold mb-[40px]">全流程覆盖，提升您的样本管理效率</div>
|
||||
<div class="flex">
|
||||
<div class="join join-vertical bg-group-btn">
|
||||
<button @click="handleClick(index)" v-for="(item, index) in btnList" :key="item.name"
|
||||
:class="[ 'p-[10px] join-item h-[60px] w-[120px]', item.active ? 'btn-active-custom text-white' : '' ]">{{
|
||||
item.name }}</button>
|
||||
<button
|
||||
@click="handleClick(index)"
|
||||
v-for="(item, index) in btnList"
|
||||
:key="item.name"
|
||||
:class="['p-[10px] join-item h-[60px] w-[120px]', item.active ? 'btn-active-custom text-white' : '']"
|
||||
>
|
||||
{{ item.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div class="flex gap-[20px]">
|
||||
<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"
|
||||
alt="Tailwind CSS Carousel component" />
|
||||
</div>
|
||||
<div class="text-[14px] line-height-[20px] text-center">
|
||||
符合药企特点，以批次为单位登记，无需逐份登记
|
||||
<img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto" alt="Tailwind CSS Carousel component" />
|
||||
</div>
|
||||
<div class="text-[14px] line-height-[20px] 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"
|
||||
alt="Tailwind CSS Carousel component" />
|
||||
</div>
|
||||
<div class="text-[14px] line-height-[20px] text-center">
|
||||
符合药企特点，以批次为单位登记，无需逐份登记
|
||||
<img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto" alt="Tailwind CSS Carousel component" />
|
||||
</div>
|
||||
<div class="text-[14px] line-height-[20px] 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"
|
||||
alt="Tailwind CSS Carousel component" />
|
||||
</div>
|
||||
<div class="text-[14px] line-height-[20px] text-center">
|
||||
符合药企特点，以批次为单位登记，无需逐份登记
|
||||
<img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto" alt="Tailwind CSS Carousel component" />
|
||||
</div>
|
||||
<div class="text-[14px] line-height-[20px] 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"
|
||||
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 class="text-[14px] line-height-[20px] text-center">
|
||||
符合药企特点，以批次为单位登记，无需逐份登记
|
||||
<div class="text-[14px] line-height-[20px] text-center">符合药企特点，以批次为单位登记，无需逐份登记</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="w-full custom-bgc-introduce py-[100px]">
|
||||
<div class="max-w-screen-xl mx-auto">
|
||||
<div class="flex items-center mb-[82px]">
|
||||
@ -139,33 +120,23 @@
|
||||
<div class="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] line-height-[20px] text-white">
|
||||
样本类型
|
||||
</div>
|
||||
<div class="text-[14px] line-height-[20px] text-white">样本类型</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<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] line-height-[20px] text-white">样本类型</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<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] line-height-[20px] text-white">样本类型</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<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] line-height-[20px] text-white">样本类型</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<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] line-height-[20px] text-white">样本类型</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <img src="../assets/image 20.png" class="w-full" alt="Tailwind CSS Carousel component" /> -->
|
||||
@ -173,9 +144,7 @@
|
||||
</div>
|
||||
|
||||
<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]">
|
||||
药企样品管理场景在业务流程、操作方式、数据管理、实施落地方面均有其特殊性，这也是通用型或者医院型样本管理软件无法完全胜任的原因。三优云试剂管家
|
||||
专门面向生物药企的样本管理场景而设计，如果您的实验室属于生物药及相关范畴，那么本产品将是您样本管理的不二之选。
|
||||
@ -183,56 +152,37 @@
|
||||
<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]" />
|
||||
<div class="text-[14px] line-height-[20px]">
|
||||
抗体药物
|
||||
</div>
|
||||
<div class="text-[14px] line-height-[20px]">抗体药物</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<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] line-height-[20px]">CGT</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<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] line-height-[20px]">疫苗</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<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] line-height-[20px]">发酵工程</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<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] line-height-[20px]">生物试剂</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center">
|
||||
<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] line-height-[20px]">CRO/CDMO</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center">
|
||||
<img src="../assets/image 28.png" class="w-[154px] h-[154px] mb-[20px]" />
|
||||
<div class="text-[14px] line-height-[20px]">
|
||||
其他生物实验室
|
||||
<div class="text-[14px] line-height-[20px]">其他生物实验室</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="text-left text-[32px] font-bold">
|
||||
可供多研发项目/多部门
|
||||
</div>
|
||||
<div class="text-left text-[32px] font-bold mb-[40px]">
|
||||
共同管理样本
|
||||
</div>
|
||||
<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]">
|
||||
系统通过样本数据的灵活授权、数据分级等方式，可确保各个项目/各个部门单独管理自己的容器与样本，而不会相互干扰
|
||||
@ -262,159 +212,120 @@
|
||||
</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
|
||||
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-[74px]">
|
||||
<div class="text-center text-[32px] font-bold mb-[117px]">
|
||||
功能简述
|
||||
</div>
|
||||
<div class="text-center text-[32px] font-bold mb-[117px]">功能简述</div>
|
||||
<div class="flex justify-between flex-wrap">
|
||||
<div class="flex-custom-item relative flex justify-center flex-col mb-[80px]">
|
||||
<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>
|
||||
<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]">
|
||||
<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>
|
||||
<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]">
|
||||
<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>
|
||||
<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]">
|
||||
<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>
|
||||
<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]">
|
||||
<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>
|
||||
<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]">
|
||||
<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>
|
||||
<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">
|
||||
菜单、按钮、公告、附件、基础数据、消息通知 配置、全局字典等系统配置
|
||||
</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 59.png" alt="">
|
||||
<div class="text-center text-[24px] font-bold mt-[32px]">
|
||||
库存预警
|
||||
</div>
|
||||
<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">
|
||||
动态监控样品库存状态，库存量查询与统计。 根据阈值实时检测库存量，低于阈值企微、 邮件、短信等渠道即刻发出预警通知
|
||||
</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 68.png" alt="">
|
||||
<div class="text-center text-[24px] font-bold mt-[32px]">
|
||||
可视化页面
|
||||
</div>
|
||||
<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">
|
||||
直观展示设备使用情况和库存库位信息，具备实时 更新、交互查询、全局可观等功能，支持快速了 解使用率、预警情况及库位布局
|
||||
</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 61.png" alt="">
|
||||
<div class="text-center text-[24px] font-bold mt-[32px]">
|
||||
自由扩展
|
||||
</div>
|
||||
<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系统
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full service-custom-bg py-[60px]">
|
||||
<div class="max-w-screen-xl mx-auto">
|
||||
<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 gap-[28px]">
|
||||
<div class="base-wrap flex-1">
|
||||
<div class="base-price base-one">
|
||||
<div class="base-icon base-icon-one">
|
||||
旗舰版
|
||||
</div>
|
||||
<div class="base-icon base-icon-one">旗舰版</div>
|
||||
<div class="flex items-center mt-[124px] justify-center">
|
||||
<span class="price-title mr-[16px]">早鸟价</span>
|
||||
<div>
|
||||
<span class="price-content">49,999</span>
|
||||
<span class="price-unit"> 元/年</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="base-wrap flex-1">
|
||||
<div class="base-price base-two">
|
||||
<div class="base-icon base-icon-two">
|
||||
豪华版
|
||||
</div>
|
||||
<div class="base-icon base-icon-two">豪华版</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="base-wrap flex-1">
|
||||
<div class="base-price base-three">
|
||||
<div class="base-icon base-icon-three">
|
||||
标准版
|
||||
<div class="base-icon base-icon-three">标准版</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
@ -422,64 +333,58 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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 { 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) => {
|
||||
item.active = false
|
||||
})
|
||||
btnList.value[index].active = true
|
||||
}
|
||||
item.active = false;
|
||||
});
|
||||
btnList.value[index].active = true;
|
||||
};
|
||||
|
||||
const tabActive = ref('tab1')
|
||||
const tabActive = ref("tab1");
|
||||
|
||||
const showAllList = computed(() => {
|
||||
return tabActive.value === 'tab1' ? hardwareList.value : softwareList.value
|
||||
})
|
||||
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 hardwareList = ref([Image222, Image222, Image222, Image222, Image222]);
|
||||
|
||||
const softwareList = ref([Image222, Image222, Image222, Image222, Image222]);
|
||||
|
||||
const btnList = ref([
|
||||
{
|
||||
name: '样品登记',
|
||||
active: true
|
||||
name: "样品登记",
|
||||
active: true,
|
||||
},
|
||||
{
|
||||
name: '样品入库',
|
||||
active: false
|
||||
name: "样品入库",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: '样品数据',
|
||||
active: false
|
||||
name: "样品数据",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: '库区管理',
|
||||
active: false
|
||||
name: "库区管理",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: '库区安全',
|
||||
active: false
|
||||
name: "库区安全",
|
||||
active: false,
|
||||
},
|
||||
{
|
||||
name: '系统合规',
|
||||
active: false
|
||||
name: "系统合规",
|
||||
active: false,
|
||||
},
|
||||
|
||||
])
|
||||
]);
|
||||
</script>
|
||||
<style scoped>
|
||||
.btn-active-custom {
|
||||
background: linear-gradient(270deg, #5B63F6 -3.11%, #0D90FF 100%);
|
||||
background: linear-gradient(270deg, #5b63f6 -3.11%, #0d90ff 100%);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
@ -488,12 +393,11 @@ const btnList = ref([
|
||||
}
|
||||
|
||||
.custom-bgc-introduce {
|
||||
background: linear-gradient(98.33deg, #003EA0 0%, #0AA9F8 100.12%);
|
||||
|
||||
background: linear-gradient(98.33deg, #003ea0 0%, #0aa9f8 100.12%);
|
||||
}
|
||||
|
||||
.custom-btn-bg {
|
||||
border: 2px solid #0D90FF;
|
||||
border: 2px solid #0d90ff;
|
||||
width: 190px;
|
||||
height: 42px;
|
||||
border-radius: 22px;
|
||||
@ -508,7 +412,7 @@ const btnList = ref([
|
||||
width: 214px;
|
||||
height: 214px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #D9D9D9
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
.flex-custom-item {
|
||||
@ -557,38 +461,37 @@ const btnList = ref([
|
||||
position: absolute;
|
||||
/* background: linear-gradient(96.87deg, #FFFEF9 0%, #ADA293 96.38%); */
|
||||
border-radius: 0 0 0 14px;
|
||||
font-family: 'MySubsetFont';
|
||||
font-family: "MySubsetFont";
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
.base-icon-one {
|
||||
background: linear-gradient(96.87deg, #FFFEF9 0%, #ADA293 96.38%);
|
||||
color: #493B3B;
|
||||
background: linear-gradient(96.87deg, #fffef9 0%, #ada293 96.38%);
|
||||
color: #493b3b;
|
||||
}
|
||||
|
||||
.base-icon-two {
|
||||
background: linear-gradient(96.87deg, #FFE079 0%, #BE8945 96.38%);
|
||||
color: #FFFFFF;
|
||||
background: linear-gradient(96.87deg, #ffe079 0%, #be8945 96.38%);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.base-icon-three {
|
||||
background: #FFFDF5;
|
||||
background: #fffdf5;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
|
||||
.base-one {
|
||||
background: linear-gradient(180deg, #E3EAFA 0%, #FFFFFF 100%);
|
||||
background: linear-gradient(180deg, #e3eafa 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.base-two {
|
||||
background: linear-gradient(180deg, #FFF7E4 0%, rgba(247, 243, 233, 0.1) 100%);
|
||||
background: linear-gradient(180deg, #fff7e4 0%, rgba(247, 243, 233, 0.1) 100%);
|
||||
}
|
||||
|
||||
.base-three {
|
||||
background: linear-gradient(180deg, #C9E7FF 0%, #FFFFFF 100%);
|
||||
background: linear-gradient(180deg, #c9e7ff 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.price-title {
|
||||
@ -598,11 +501,28 @@ const btnList = ref([
|
||||
}
|
||||
|
||||
.price-content {
|
||||
font-family: 'D-DIN';
|
||||
font-family: "D-DIN";
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.price-unit {
|
||||
font-size: 22px;
|
||||
}
|
||||
.home-banner {
|
||||
padding: 26px;
|
||||
/* padding-top:77px ; */
|
||||
background-color: #00203b;
|
||||
transform: translateY(-77px);
|
||||
/* height: 100vh; */
|
||||
}
|
||||
.custom-btn {
|
||||
border: 1px solid #00E5FF !important;
|
||||
color: #00E5FF !important;
|
||||
}
|
||||
|
||||
.custom-btn:hover {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user