feat: 首页
This commit is contained in:
parent
0c7f10a936
commit
b2aa97d11b
1641
package-lock.json
generated
1641
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -9,10 +9,15 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"vue": "^3.5.13"
|
"vue": "^3.5.13",
|
||||||
|
"vue-router": "^4.5.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vitejs/plugin-vue": "^5.2.1",
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"daisyui": "^4.12.23",
|
||||||
|
"postcss": "^8.5.1",
|
||||||
|
"tailwindcss": "^3.4.17",
|
||||||
"vite": "^6.0.5"
|
"vite": "^6.0.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
3
postcss.config.cjs
Normal file
3
postcss.config.cjs
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: [require('tailwindcss'), require('autoprefixer')],
|
||||||
|
};
|
||||||
29
src/App.vue
29
src/App.vue
@ -1,30 +1,3 @@
|
|||||||
<script setup>
|
|
||||||
import HelloWorld from './components/HelloWorld.vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<router-view />
|
||||||
<a href="https://vite.dev" target="_blank">
|
|
||||||
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
|
||||||
</a>
|
|
||||||
<a href="https://vuejs.org/" target="_blank">
|
|
||||||
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<HelloWorld msg="Vite + Vue" />
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.logo {
|
|
||||||
height: 6em;
|
|
||||||
padding: 1.5em;
|
|
||||||
will-change: filter;
|
|
||||||
transition: filter 300ms;
|
|
||||||
}
|
|
||||||
.logo:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #646cffaa);
|
|
||||||
}
|
|
||||||
.logo.vue:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #42b883aa);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
BIN
src/assets/Frame 43.png
Normal file
BIN
src/assets/Frame 43.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/Frame 45.png
Normal file
BIN
src/assets/Frame 45.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/assets/Frame 47.png
Normal file
BIN
src/assets/Frame 47.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/Group 20.png
Normal file
BIN
src/assets/Group 20.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 586 KiB |
BIN
src/assets/Group 21.png
Normal file
BIN
src/assets/Group 21.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 394 KiB |
BIN
src/assets/Group 33.png
Normal file
BIN
src/assets/Group 33.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 825 KiB |
BIN
src/assets/carousel1.png
Normal file
BIN
src/assets/carousel1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 670 KiB |
BIN
src/assets/carousel2.png
Normal file
BIN
src/assets/carousel2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
src/assets/image 19.png
Normal file
BIN
src/assets/image 19.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
src/assets/image 28.png
Normal file
BIN
src/assets/image 28.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 179 KiB |
BIN
src/assets/image 30.png
Normal file
BIN
src/assets/image 30.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
src/assets/image 76.png
Normal file
BIN
src/assets/image 76.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/image 83.png
Normal file
BIN
src/assets/image 83.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
37
src/components/Footer.vue
Normal file
37
src/components/Footer.vue
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
<template>
|
||||||
|
<div class="w-full footer-bg">
|
||||||
|
<footer class="max-w-screen-xl mx-auto w-full footer text-white p-10">
|
||||||
|
<nav>
|
||||||
|
<h6 class="footer-title">Services</h6>
|
||||||
|
<a class="link link-hover">Branding</a>
|
||||||
|
<a class="link link-hover">Design</a>
|
||||||
|
<a class="link link-hover">Marketing</a>
|
||||||
|
<a class="link link-hover">Advertisement</a>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<h6 class="footer-title">Company</h6>
|
||||||
|
<a class="link link-hover">About us</a>
|
||||||
|
<a class="link link-hover">Contact</a>
|
||||||
|
<a class="link link-hover">Jobs</a>
|
||||||
|
<a class="link link-hover">Press kit</a>
|
||||||
|
</nav>
|
||||||
|
<nav>
|
||||||
|
<h6 class="footer-title">Legal</h6>
|
||||||
|
<a class="link link-hover">Terms of use</a>
|
||||||
|
<a class="link link-hover">Privacy policy</a>
|
||||||
|
<a class="link link-hover">Cookie policy</a>
|
||||||
|
</nav>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.footer-bg {
|
||||||
|
background: linear-gradient(91.27deg, #0D90FF -23.63%, #0D387E 97.65%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 你可以在这里添加一些自定义的样式 */
|
||||||
|
</style>
|
||||||
27
src/components/Header.vue
Normal file
27
src/components/Header.vue
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<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 76.png" alt="">
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* 你可以在这里添加一些自定义的样式 */
|
||||||
|
</style>
|
||||||
@ -1,43 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
defineProps({
|
|
||||||
msg: String,
|
|
||||||
})
|
|
||||||
|
|
||||||
const count = ref(0)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<h1>{{ msg }}</h1>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<button type="button" @click="count++">count is {{ count }}</button>
|
|
||||||
<p>
|
|
||||||
Edit
|
|
||||||
<code>components/HelloWorld.vue</code> to test HMR
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Check out
|
|
||||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
|
||||||
>create-vue</a
|
|
||||||
>, the official Vue + Vite starter
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Learn more about IDE Support for Vue in the
|
|
||||||
<a
|
|
||||||
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
|
||||||
target="_blank"
|
|
||||||
>Vue Docs Scaling up Guide</a
|
|
||||||
>.
|
|
||||||
</p>
|
|
||||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.read-the-docs {
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,5 +1,6 @@
|
|||||||
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'
|
||||||
|
|
||||||
createApp(App).mount('#app')
|
createApp(App).use(router).mount('#app')
|
||||||
|
|||||||
27
src/router/index.js
Normal file
27
src/router/index.js
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
|
||||||
|
// 导入页面组件
|
||||||
|
import Home from '../views/Home.vue'
|
||||||
|
import About from '../views/About.vue'
|
||||||
|
|
||||||
|
// 配置路由
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'Home',
|
||||||
|
component: Home,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/about',
|
||||||
|
name: 'About',
|
||||||
|
component: About,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
// 创建并导出路由实例
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(), // 使用 HTML5 history 模式
|
||||||
|
routes, // 路由配置
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
@ -1,79 +1,7 @@
|
|||||||
:root {
|
@tailwind base;
|
||||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
@tailwind components;
|
||||||
line-height: 1.5;
|
@tailwind utilities;
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
color-scheme: light dark;
|
|
||||||
color: rgba(255, 255, 255, 0.87);
|
|
||||||
background-color: #242424;
|
|
||||||
|
|
||||||
font-synthesis: none;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #646cff;
|
|
||||||
text-decoration: inherit;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #535bf2;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
place-items: center;
|
|
||||||
min-width: 320px;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 3.2em;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
padding: 0.6em 1.2em;
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: 500;
|
|
||||||
font-family: inherit;
|
|
||||||
background-color: #1a1a1a;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color 0.25s;
|
|
||||||
}
|
|
||||||
button:hover {
|
|
||||||
border-color: #646cff;
|
|
||||||
}
|
|
||||||
button:focus,
|
|
||||||
button:focus-visible {
|
|
||||||
outline: 4px auto -webkit-focus-ring-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
max-width: 1280px;
|
background-color: #b8f0ff63;
|
||||||
margin: 0 auto;
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
:root {
|
|
||||||
color: #213547;
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #747bff;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
11
src/views/About.vue
Normal file
11
src/views/About.vue
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Header />
|
||||||
|
<h1>Home Page</h1>
|
||||||
|
<p>Welcome to the Home page!</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import Header from '../components/Header.vue'
|
||||||
|
</script>
|
||||||
331
src/views/Home.vue
Normal file
331
src/views/Home.vue
Normal file
@ -0,0 +1,331 @@
|
|||||||
|
<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>
|
||||||
|
<div class="carousel-item w-full">
|
||||||
|
<img src="../assets/carousel2.png" class="w-full" alt="Tailwind CSS Carousel component" />
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
</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="flex-1">
|
||||||
|
<h1 class="text-3xl font-bold">替代Excel</h1>
|
||||||
|
<h1 class="text-3xl font-bold">为您的实验室</h1>
|
||||||
|
<h1 class="text-3xl font-bold mb-[30px]">搭建样本中央数据库</h1>
|
||||||
|
<div class="text-[14px] line-height-[20px]">
|
||||||
|
系统基于Web浏览器便捷的交互方式，帮助实验人员进行样本数据管理与业务流程管理，彻底替代纸质与Excel。
|
||||||
|
</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-1">
|
||||||
|
<img src="../assets/Group 21.png" class="w-full" alt="Tailwind CSS Carousel component" />
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<h1 class="text-3xl font-bold mb-[30px]">精于库位管理，不止于库位管理</h1>
|
||||||
|
<div class="text-[14px] line-height-[20px]">
|
||||||
|
系统提供出色的库位管理方案，帮助库管人员直观精确地对样本进行定位。
|
||||||
|
另外，空间剩余情况统计、碎片化统计、空间不足提醒、盘库工具等业务，可有效提升库区管理效率。
|
||||||
|
</div>
|
||||||
|
<div class="text-[14px] line-height-[20px]">
|
||||||
|
如果您还在为库内情况不明而烦恼，三优云试剂管家不失为您的效率之选。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-1 ml-[43px]">
|
||||||
|
<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">
|
||||||
|
符合药企特点，以批次为单位登记，无需逐份登记
|
||||||
|
</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">
|
||||||
|
符合药企特点，以批次为单位登记，无需逐份登记
|
||||||
|
</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">
|
||||||
|
符合药企特点，以批次为单位登记，无需逐份登记
|
||||||
|
</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">
|
||||||
|
符合药企特点，以批次为单位登记，无需逐份登记
|
||||||
|
</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]">
|
||||||
|
<div class="flex flex-col text-introduce-text mr-[100px]">
|
||||||
|
<h1 class="text-3xl font-bold ">灵活自定义</h1>
|
||||||
|
<h1 class="text-3xl font-bold ">可完美适配</h1>
|
||||||
|
<h1 class="text-3xl font-bold">您独特的样品管理场景</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-1 text-[18px] line-height-[20px] text-white">
|
||||||
|
鉴于公司业务的差异，各实验室均有自己样本管理上的独特性。
|
||||||
|
因此，为了能够充分适配具体的管理特点，系统在管理要素上提供足够的自定义空间，包括但不限于样本类型、样本属性、容器结构、冻存架（盒）结构、编码方式、标签模板等等...
|
||||||
|
以此，系统可确保与具体样本管理场景的灵活适配。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<!-- <img src="../assets/image 20.png" class="w-full" alt="Tailwind CSS Carousel component" /> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="max-w-screen-xl mx-auto py-[100px]">
|
||||||
|
<div class="text-center text-[32px] font-bold mb-[40px]">
|
||||||
|
面向生物药场景而设计，适合各细分领域
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 text-[18px] line-height-[20px] mb-[40px]">
|
||||||
|
药企样品管理场景在业务流程、操作方式、数据管理、实施落地方面均有其特殊性，这也是通用型或者医院型样本管理软件无法完全胜任的原因。三优云试剂管家
|
||||||
|
专门面向生物药企的样本管理场景而设计，如果您的实验室属于生物药及相关范畴，那么本产品将是您样本管理的不二之选。
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
</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]">
|
||||||
|
系统通过样本数据的灵活授权、数据分级等方式，可确保各个项目/各个部门单独管理自己的容器与样本，而不会相互干扰
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
<div class="custom-btn-bg">
|
||||||
|
<img class="w-[56px]" src="../assets/Frame 45.png" />
|
||||||
|
<span class="text-[12px] leading-3">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>
|
||||||
|
</div>
|
||||||
|
<!-- <img src="../assets/image 29.png" class="w-[154px] h-[154px] mb-[20px]" /> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import Header from '../components/Header.vue'
|
||||||
|
import Footer from '../components/Footer.vue'
|
||||||
|
|
||||||
|
const handleClick = (index) => {
|
||||||
|
btnList.value.forEach((item) => {
|
||||||
|
item.active = false
|
||||||
|
})
|
||||||
|
btnList.value[index].active = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const btnList = ref([
|
||||||
|
{
|
||||||
|
name: '样品登记',
|
||||||
|
active: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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%);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounded-full-color {
|
||||||
|
background: linear-gradient(180deg, rgba(131, 193, 210, 0.18) 0%, rgba(255, 255, 255, 0) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-bgc-introduce {
|
||||||
|
background: linear-gradient(98.33deg, #003EA0 0%, #0AA9F8 100.12%);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-btn-bg {
|
||||||
|
border: 2px solid #0D90FF;
|
||||||
|
width: 190px;
|
||||||
|
height: 42px;
|
||||||
|
border-radius: 22px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 11px;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
22
tailwind.config.cjs
Normal file
22
tailwind.config.cjs
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
module.exports = {
|
||||||
|
content: ['./src/**/*.{vue,js,ts}'],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
'primary': '#ffff', // 主色（可以根据设计稿修改）
|
||||||
|
'secondary': '#4CAF50', // 辅助色（可以根据设计稿修改）
|
||||||
|
'accent': '#1E40AF', // 强调色（可以根据设计稿修改）
|
||||||
|
'neutral': '#F0F0F0', // 中性色（可以根据设计稿修改）
|
||||||
|
'dark': '#2D2D2D', // 深色（可以根据设计稿修改）
|
||||||
|
'header-background': '#00000033', // 头部背景颜色
|
||||||
|
'header-text': '#ffffff', // 头部文字颜色
|
||||||
|
'header-hover': '#FF6347', // 头部hover颜色
|
||||||
|
'carousel-text': '#00E5FF', // 轮播图文字颜色
|
||||||
|
'group-btn': '#a4e3f4b3', // 组按钮颜色
|
||||||
|
'background-active': 'linear-gradient(270deg, #5B63F6 -3.11%, #0D90FF 100%)', // 背景颜色
|
||||||
|
'introduce-text': '#00FFEE', // 介绍文字颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [require('daisyui')],
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user