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-17 23:56:44 +08:00
parent 984bca7328
commit 87f900855c
23 changed files with 263 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -1,13 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" href="favicon.png" sizes="32x32" type="image/png">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
<title>三优云试剂管家</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

80
package-lock.json generated
View File

@ -8,7 +8,7 @@
"name": "sample-website",
"version": "0.0.0",
"dependencies": {
"aos": "^2.3.4",
"scrollreveal": "^4.0.9",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
@ -1065,17 +1065,6 @@
"node": ">= 8"
}
},
"node_modules/aos": {
"version": "2.3.4",
"resolved": "https://registry.npmmirror.com/aos/-/aos-2.3.4.tgz",
"integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==",
"license": "MIT",
"dependencies": {
"classlist-polyfill": "^1.0.3",
"lodash.debounce": "^4.0.6",
"lodash.throttle": "^4.0.1"
}
},
"node_modules/arg": {
"version": "5.0.2",
"resolved": "https://registry.npmmirror.com/arg/-/arg-5.0.2.tgz",
@ -1266,12 +1255,6 @@
"node": ">= 6"
}
},
"node_modules/classlist-polyfill": {
"version": "1.2.0",
"resolved": "https://registry.npmmirror.com/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
"integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ==",
"license": "Unlicense"
},
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
@ -1673,6 +1656,21 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/is-dom-node": {
"version": "1.0.4",
"resolved": "https://registry.npmmirror.com/is-dom-node/-/is-dom-node-1.0.4.tgz",
"integrity": "sha512-NEnTHKCeyGJTL0cKdzATF8SWzyTMYf5CbNKWBvsXvyMxZG32g+a09qkeCbrfQNLTD85CbPeHb4YjIJCjyzF0yA==",
"license": "MIT"
},
"node_modules/is-dom-node-list": {
"version": "1.2.1",
"resolved": "https://registry.npmmirror.com/is-dom-node-list/-/is-dom-node-list-1.2.1.tgz",
"integrity": "sha512-P1H071iT5TGG8pAHslhrLDo/tQLYc8tGuWABVqhGU4l2mm7aDNb9cx2myQ2AujEQO6B2cAujcW4a0/+6UfXInw==",
"license": "MIT",
"dependencies": {
"is-dom-node": "^1.0.4"
}
},
"node_modules/is-extglob": {
"version": "2.1.1",
"resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
@ -1769,18 +1767,6 @@
"dev": true,
"license": "MIT"
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmmirror.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
"license": "MIT"
},
"node_modules/lodash.throttle": {
"version": "4.1.1",
"resolved": "https://registry.npmmirror.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
"license": "MIT"
},
"node_modules/lru-cache": {
"version": "10.4.3",
"resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-10.4.3.tgz",
@ -1847,6 +1833,12 @@
"node": ">=16 || 14 >=14.17"
}
},
"node_modules/miniraf": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/miniraf/-/miniraf-1.0.0.tgz",
"integrity": "sha512-XpvhtJYzVrpXe+JoAthrT9E40NIrSDDMcdHEYL2M+lR/OCas0nadetcBBq/MWYqlgV5aDWVQ3mfAqd+fG6Y/EQ==",
"license": "MIT"
},
"node_modules/mz": {
"version": "2.7.0",
"resolved": "https://registry.npmmirror.com/mz/-/mz-2.7.0.tgz",
@ -2207,6 +2199,12 @@
"node": ">=8.10.0"
}
},
"node_modules/rematrix": {
"version": "0.3.0",
"resolved": "https://registry.npmmirror.com/rematrix/-/rematrix-0.3.0.tgz",
"integrity": "sha512-xB/9ZvJIKaDgXX0qkvV9/pLD8zK23A6TVV6F8Vhsl+SrxbBeVYutz5uszxgC6Rt3RP9LZiH8OXaYjr+x6WXWmQ==",
"license": "MIT"
},
"node_modules/resolve": {
"version": "1.22.10",
"resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.10.tgz",
@ -2302,6 +2300,18 @@
"queue-microtask": "^1.2.2"
}
},
"node_modules/scrollreveal": {
"version": "4.0.9",
"resolved": "https://registry.npmmirror.com/scrollreveal/-/scrollreveal-4.0.9.tgz",
"integrity": "sha512-fefGvzVS8YbXbDK1+T0kvy2yqxaiBJZeGUhPeqajf+7sGqtX4xikbKGAlzQuPCpswAMswx94ZwhDjXKnRIqW1w==",
"hasInstallScript": true,
"license": "GPL-3.0",
"dependencies": {
"miniraf": "1.0.0",
"rematrix": "0.3.0",
"tealight": "0.3.6"
}
},
"node_modules/shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
@ -2525,6 +2535,16 @@
"node": ">=14.0.0"
}
},
"node_modules/tealight": {
"version": "0.3.6",
"resolved": "https://registry.npmmirror.com/tealight/-/tealight-0.3.6.tgz",
"integrity": "sha512-Dys3N8jFBThD9pNVpPCyUiu6DfWcTBdqWQJIvnAuVaFkGEdrPBJ43070vVbn6sTlLvn2IQK2zFW4FrVIrTo8eQ==",
"license": "MIT",
"dependencies": {
"is-dom-node": "^1.0.4",
"is-dom-node-list": "^1.2.1"
}
},
"node_modules/thenify": {
"version": "3.3.1",
"resolved": "https://registry.npmmirror.com/thenify/-/thenify-3.3.1.tgz",

2
package.json
View File

@ -9,7 +9,7 @@
"preview": "vite preview"
},
"dependencies": {
"aos": "^2.3.4",
"scrollreveal": "^4.0.9",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},

BIN
public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
public/vite.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/Group 33.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 172 KiB

BIN
src/assets/Group 82.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

BIN
src/assets/Mask group (2).png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
src/assets/Vector 21.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/bgc001.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
src/assets/carousel1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 670 KiB

BIN
src/assets/carousel2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 MiB

BIN
src/assets/fonts/9RNKTxomYL9P.woff2
View File

Binary file not shown.

BIN
src/assets/general/email.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 511 B

BIN
src/assets/general/location.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 676 B

BIN
src/assets/general/phone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 562 B

BIN
src/assets/general/public.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1022 B

BIN
src/assets/image 78.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
src/assets/logo_public_security.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

82
src/components/Footer.vue
View File

@ -1,36 +1,82 @@
<template>
<div class="w-full footer-bg py-[80px]">
<div class="w-full footer-bg pt-[36px] pb-[19px]">
<footer class="max-w-screen-xl mx-auto w-full footer text-white">
<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>
<h6 class="footer-title">关于三优</h6>
<a class="link link-hover">公司介绍</a>
<a class="link link-hover">发展历程</a>
<a class="link link-hover">平台概览</a>
<a class="link link-hover">核心团队</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>
<h6 class="footer-title">新闻中心</h6>
<a class="link link-hover">三优新闻</a>
<a class="link link-hover">媒体报道</a>
<a class="link link-hover">视频中心</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>
<h6 class="footer-title">加入我们</h6>
<a class="link link-hover">人才理念</a>
<a class="link link-hover">培训体系</a>
<a class="link link-hover">晋升发展</a>
<a class="link link-hover">薪酬福利</a>
<a class="link link-hover">招聘岗位</a>
</nav>
<nav>
<h6 class="footer-title">联系我们</h6>
<div class="flex items-center gap-[8px]">
<img class="w-[16px]" src="../assets/general/phone.png" alt="" />
<span>400-821-0776</span>
</div>
<div class="flex items-center gap-[8px]">
<img class="w-[16px]" src="../assets/general/email.png" alt="" />
<span>service@sanyoubio.com</span>
</div>
<div class="flex items-center gap-[8px]">
<img class="w-[16px]" src="../assets/general/public.png" alt="" />
<span>www.sanyoubio.com.cn</span>
</div>
<div class="flex items-center gap-[8px]">
<img class="w-[16px]" src="../assets/general/location.png" alt="" />
<span>上海闵行区竹园路559号T3幢</span>
</div>
</nav>
<nav>
<h6 class="footer-title">微信公众号</h6>
<img class="w-[133px]" src="../assets/image 78.png" alt="" />
</nav>
</footer>
<!-- <div class="w-full line-split"></div> -->
<div class="w-full mt-[22px]">
<img class="w-full" src="../assets/Vector 21.png" alt="" />
</div>
<div class="text-center text-bottom mt-[22px]">Copyright @ 2015-2024 三优生物医药（上海）有限公司 All Rights Reserved</div>
<div class="w-full text-center text-bottom flex items-center justify-center">
<span> 沪ICP备15044189号-3 </span>
<img class="w-[18px]" src="../assets/logo_public_security.png" alt="" />
<span> 沪公网安备31011202013866号</span>
</div>
</div>
</template>
<script setup>
</script>
<script setup></script>
<style scoped>
.footer-bg {
background: linear-gradient(91.27deg, #0D90FF -23.63%, #0D387E 97.65%);
background: linear-gradient(91.27deg, #052846 -23.63%, #0d387e 97.65%);
}
.line-split {
height: 0.883442759513855px;
border-width: 1px;
border: 1px solid;
border-image-source: radial-gradient(50% 50% at 50% 50%, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}
.text-bottom {
font-weight: 400;
font-size: 16px;
line-height: 28px;
color: rgba(255, 247, 247, 0.5);
}
/* 你可以在这里添加一些自定义的样式 */

6
src/components/Header.vue
View File

@ -2,7 +2,9 @@
<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 href="https://www.sanyoubio.com.cn" 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>
@ -30,7 +32,7 @@ const props = defineProps({
position: relative;
}
.btn-hover:hover {
color: #00E5FF !important;
color: #00e5ff !important;
}
/* 你可以在这里添加一些自定义的样式 */
</style>

1
src/main.js
View File

@ -2,7 +2,6 @@ import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import router from "./router";
import 'aos/dist/aos.css'
function setRootFontSize() {
const baseWidth = 1920; // 假设设计稿宽度为 1920px（可以根据实际设计稿调整）

172
src/views/Home.vue
View File

@ -6,13 +6,13 @@
<img src="../assets/bgc001.png" class="w-full" />
</div>
<div class="w-full logo-image absolute top-[48px]">
<div class="max-w-screen-xl mx-auto flex items-center" data-aos="fade-down">
<div class="max-w-screen-xl mx-auto flex items-center reveal-box">
<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" data-aos="fade-down">
<div class="max-w-screen-xl mx-auto">
<h1 class="text-5xl font-bold mb-[44px]">三优生物样品管理平台</h1>
<h1 class="text-5xl text-white mb-[58px]">专业面向生物药企的样品管理平台</h1>
<div class="button">
@ -23,8 +23,8 @@
</div>
<div class="max-w-screen-xl mx-auto">
<div class="flex gap-[43px] justify-between items-center mb-[120px] text-white" id="anchor-element">
<div class="w-[558px]" data-aos="fade-down" data-aos-offset="500" data-aos-anchor-placement="top-center">
<div class="flex gap-[43px] justify-between items-center mb-[120px] text-white">
<div class="w-[558px] reveal-box">
<h1 class="text-3xl font-bold">替代Excel 为您的实验室</h1>
<h1 class="text-3xl font-bold mb-[30px]">搭建样本中央数据库</h1>
<div class="text-[14px] leading-[28px] text-content-spec">
@ -44,7 +44,7 @@
<div class="flex-1 ml-[-20px]">
<img src="../assets/Group 21.png" class="w-full" alt="Tailwind CSS Carousel component" />
</div>
<div class="w-[467px]" data-aos="fade-down" data-aos-offset="600" data-aos-anchor-placement="top-center">
<div class="w-[467px] reveal-box">
<h1 class="text-3xl font-bold mb-[30px] text-right">精于库位管理，不止于库位管理</h1>
<div class="text-[14px] leading-[28px] text-content-spec">
系统提供出色的库位管理方案，帮助库管人员直观精确地对样本进行定位。另外，空间剩余情况统计、碎片化统计、空间不足提醒、盘库工具等业务，可有效提升库区管理效率。如果您还在为库内情况不明而烦恼，三优云试剂管家不失为您的效率之选。
@ -104,8 +104,8 @@
<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 leading-[68px]" data-aos="fade-up">灵活自定义可完美适配</h1>
<div class="flex flex-col text-introduce-text mr-[100px] reveal-box">
<h1 class="text-3xl font-bold leading-[68px]">灵活自定义可完美适配</h1>
<h1 class="text-3xl font-bold leading-[68px]">您独特的样品管理场景</h1>
</div>
@ -221,65 +221,65 @@
<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" data-aos="flip-left" data-aos-anchor-placement="center-bottom" >
<div class="w-[229px] h-[124px]" >
<div class="w-full grid grid-cols-5 gap-4">
<div class="w-[229px] h-[124px] reveal-box">
<img src="../assets/company/image-1.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<div class="w-[229px] h-[124px] reveal-box">
<img src="../assets/company/image-2.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<div class="w-[229px] h-[124px] reveal-box">
<img src="../assets/company/image-3.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<div class="w-[229px] h-[124px] reveal-box">
<img src="../assets/company/image-4.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<div class="w-[229px] h-[124px] reveal-box">
<img src="../assets/company/image-5.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<div class="w-[229px] h-[124px] reveal-box">
<img src="../assets/company/image-6.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<div class="w-[229px] h-[124px] reveal-box">
<img src="../assets/company/image-7.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<div class="w-[229px] h-[124px] reveal-box">
<img src="../assets/company/image-8.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<div class="w-[229px] h-[124px] reveal-box">
<img src="../assets/company/image-9.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<div class="w-[229px] h-[124px] reveal-box">
<img src="../assets/company/image-10.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<div class="w-[229px] h-[124px] reveal-box">
<img src="../assets/company/image-11.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<div class="w-[229px] h-[124px] reveal-box">
<img src="../assets/company/image-12.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<div class="w-[229px] h-[124px] reveal-box">
<img src="../assets/company/image-13.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<div class="w-[229px] h-[124px] reveal-box">
<img src="../assets/company/image-14.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<div class="w-[229px] h-[124px] reveal-box">
<img src="../assets/company/image-15.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<div class="w-[229px] h-[124px] reveal-box">
<img src="../assets/company/image-16.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<div class="w-[229px] h-[124px] reveal-box">
<img src="../assets/company/image-17.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<div class="w-[229px] h-[124px] reveal-box">
<img src="../assets/company/image-18.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<div class="w-[229px] h-[124px] reveal-box">
<img src="../assets/company/image-19.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<div class="w-[229px] h-[124px] reveal-box">
<img src="../assets/company/image-20.png" alt="" />
</div>
</div>
@ -355,44 +355,102 @@
</div>
</div>
</div>
<div class="w-full py-[60px] text-white">
<div class="w-full py-[60px] text-black">
<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] text-white">服务与价格</div>
<div class="flex gap-[28px]">
<div class="base-wrap flex-1">
<div class="base-price base-one">
<div class="base-price base-one relative">
<div class="base-icon base-icon-one">旗舰版</div>
<div class="flex items-center mt-[124px] justify-center">
<div class="flex items-center mt-[107px] 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 class="flex items-center justify-center">
<span class="price-title-origin mr-[16px]">原价</span>
<div>
<span class="price-content-origin">200,000</span>
<span class="price-unit-origin"> 元/年</span>
</div>
</div>
<div class="text-price-desc">适合样品量较多、有明确的业务规范的用户，我们提供定制开发服务，让 系统更适合用户的个性化管理场景</div>
<div class="btn-box-price absolute bottom-[16px] left-[7px] right-[7px]">
<button class="h-[56px] w-full btn btn-info btn-wide">立即咨询</button>
</div>
</div>
</div>
<div class="base-wrap flex-1">
<div class="base-price base-two">
<div class="base-price base-two relative">
<div class="base-icon base-icon-two">豪华版</div>
<div class="flex items-center mt-[107px] justify-center">
<span class="price-title mr-[16px]">早鸟价</span>
<div>
<span class="price-content">19,999</span>
<span class="price-unit"> 元/年</span>
</div>
</div>
<div class="flex items-center justify-center">
<span class="price-title-origin mr-[16px]">原价</span>
<div>
<span class="price-content-origin">100,000</span>
<span class="price-unit-origin"> 元/年</span>
</div>
</div>
<div class="text-price-desc">
专为中小型企业设计，提供核心的样品管理功能，旨在简化操作流程，提 升管理效率，同时保持成本效益， 适合预算有限的企业。
</div>
<div class="btn-box-price absolute bottom-[16px] left-[7px] right-[7px]">
<button class="h-[56px] w-full btn btn-info btn-wide">立即咨询</button>
</div>
</div>
</div>
<div class="base-wrap flex-1">
<div class="base-price base-three">
<div class="base-price base-three relative">
<div class="base-icon base-icon-three">标准版</div>
<div class="flex items-center mt-[107px] justify-center">
<span class="price-title mr-[16px]">早鸟价</span>
<div>
<span class="price-content">9,999</span>
<span class="price-unit"> 元/年</span>
</div>
</div>
<div class="flex items-center justify-center">
<span class="price-title-origin mr-[16px]">原价</span>
<div>
<span class="price-content-origin">50,000</span>
<span class="price-unit-origin"> 元/年</span>
</div>
</div>
<div class="text-price-desc">
标准版是样品管理系统的基础版本，它提供了样品管理的基本功能，旨在满足各高校实验室、科研院所等企业对样品管理的基本需求。
</div>
<div class="btn-box-price absolute bottom-[16px] left-[7px] right-[7px]">
<button class="h-[56px] w-full btn btn-info btn-wide">立即咨询</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w-full mt-[72px]">
<div class="max-w-screen-xl mx-auto">
<div class="text-center text-[32px] font-bold mb-[40px] text-white">版本选择</div>
<img class="w-full mb-[133px]" src="../assets/Group 82.png" alt="" />
</div>
</div>
<Footer />
</div>
</template>
<script setup>
import { computed, ref, onMounted } from "vue";
import ScrollReveal from "scrollreveal";
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
import AOS from "aos";
import Image101 from "../assets/image 101.png";
import Image48 from "../assets/image 48.png";
@ -447,12 +505,19 @@ const btnList = ref([
]);
onMounted(() => {
console.log("123");
AOS.init({
// offset: 200, // 调整为更大的值
duration: 800,
// anchorPlacement: "top-center",
// once: true,
// ScrollReveal().reveal(".reveal-box", {
// distance: "50px", // 动画开始的距离
// duration: 1000, // 动画持续时间
// easing: "ease-out", // 动画的缓动效果
// opacity: 0, // 初始透明度
// interval: 200, // 动画之间的延迟时间
// });
// 从右侧滑入
ScrollReveal().reveal(".reveal-box", {
distance: "100px",
origin: "top",
opacity: 0,
duration: 1000,
});
});
</script>
@ -582,19 +647,33 @@ onMounted(() => {
}
.price-title {
font-family: PingFang SC;
font-size: 20px;
font-weight: 600;
}
.price-title-origin {
font-size: 20px;
font-weight: 500;
}
.price-content {
font-family: "D-DIN";
font-size: 40px;
font-weight: 700;
color: rgba(255, 132, 0, 1);
}
.price-content-origin {
font-weight: 700;
font-size: 32px;
color: rgba(102, 102, 102, 1);
text-decoration: line-through;
}
.price-unit {
font-size: 22px;
}
.price-unit-origin {
font-size: 22px;
color: rgba(102, 102, 102, 1);
}
.home-banner {
padding: 26px;
/* padding-top:77px ; */
@ -622,4 +701,11 @@ onMounted(() => {
.text-icon-spec {
color: rgba(255, 255, 255, 0.7);
}
.text-price-desc {
font-weight: 400;
font-size: 20px;
line-height: 40px;
color: rgba(102, 102, 102, 1);
padding: 33px 20px;
}
</style>