feat: 提交
This commit is contained in:
parent
984bca7328
commit
87f900855c
23
index.html
23
index.html
@ -1,13 +1,16 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
<head>
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<link rel="icon" href="favicon.png" sizes="32x32" type="image/png">
|
||||||
<title>Vite + Vue</title>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
</head>
|
<title>三优云试剂管家</title>
|
||||||
<body>
|
</head>
|
||||||
<div id="app"></div>
|
|
||||||
<script type="module" src="/src/main.js"></script>
|
<body>
|
||||||
</body>
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
80
package-lock.json
generated
80
package-lock.json
generated
@ -8,7 +8,7 @@
|
|||||||
"name": "sample-website",
|
"name": "sample-website",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"aos": "^2.3.4",
|
"scrollreveal": "^4.0.9",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
"vue-router": "^4.5.0"
|
"vue-router": "^4.5.0"
|
||||||
},
|
},
|
||||||
@ -1065,17 +1065,6 @@
|
|||||||
"node": ">= 8"
|
"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": {
|
"node_modules/arg": {
|
||||||
"version": "5.0.2",
|
"version": "5.0.2",
|
||||||
"resolved": "https://registry.npmmirror.com/arg/-/arg-5.0.2.tgz",
|
"resolved": "https://registry.npmmirror.com/arg/-/arg-5.0.2.tgz",
|
||||||
@ -1266,12 +1255,6 @@
|
|||||||
"node": ">= 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": {
|
"node_modules/color-convert": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
|
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
|
||||||
@ -1673,6 +1656,21 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"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": {
|
"node_modules/is-extglob": {
|
||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
"resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
|
"resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
|
||||||
@ -1769,18 +1767,6 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/lru-cache": {
|
||||||
"version": "10.4.3",
|
"version": "10.4.3",
|
||||||
"resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-10.4.3.tgz",
|
"resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-10.4.3.tgz",
|
||||||
@ -1847,6 +1833,12 @@
|
|||||||
"node": ">=16 || 14 >=14.17"
|
"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": {
|
"node_modules/mz": {
|
||||||
"version": "2.7.0",
|
"version": "2.7.0",
|
||||||
"resolved": "https://registry.npmmirror.com/mz/-/mz-2.7.0.tgz",
|
"resolved": "https://registry.npmmirror.com/mz/-/mz-2.7.0.tgz",
|
||||||
@ -2207,6 +2199,12 @@
|
|||||||
"node": ">=8.10.0"
|
"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": {
|
"node_modules/resolve": {
|
||||||
"version": "1.22.10",
|
"version": "1.22.10",
|
||||||
"resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.10.tgz",
|
"resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.10.tgz",
|
||||||
@ -2302,6 +2300,18 @@
|
|||||||
"queue-microtask": "^1.2.2"
|
"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": {
|
"node_modules/shebang-command": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
|
"resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
|
||||||
@ -2525,6 +2535,16 @@
|
|||||||
"node": ">=14.0.0"
|
"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": {
|
"node_modules/thenify": {
|
||||||
"version": "3.3.1",
|
"version": "3.3.1",
|
||||||
"resolved": "https://registry.npmmirror.com/thenify/-/thenify-3.3.1.tgz",
|
"resolved": "https://registry.npmmirror.com/thenify/-/thenify-3.3.1.tgz",
|
||||||
|
|||||||
@ -9,7 +9,7 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"aos": "^2.3.4",
|
"scrollreveal": "^4.0.9",
|
||||||
"vue": "^3.5.13",
|
"vue": "^3.5.13",
|
||||||
"vue-router": "^4.5.0"
|
"vue-router": "^4.5.0"
|
||||||
},
|
},
|
||||||
|
|||||||
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@ -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>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 172 KiB |
BIN
src/assets/Group 82.png
Normal file
BIN
src/assets/Group 82.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 MiB After Width: | Height: | Size: 1.1 MiB |
BIN
src/assets/Vector 21.png
Normal file
BIN
src/assets/Vector 21.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 MiB After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 670 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
BIN
src/assets/general/email.png
Normal file
BIN
src/assets/general/email.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 511 B |
BIN
src/assets/general/location.png
Normal file
BIN
src/assets/general/location.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 676 B |
BIN
src/assets/general/phone.png
Normal file
BIN
src/assets/general/phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 562 B |
BIN
src/assets/general/public.png
Normal file
BIN
src/assets/general/public.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1022 B |
BIN
src/assets/image 78.png
Normal file
BIN
src/assets/image 78.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
src/assets/logo_public_security.png
Normal file
BIN
src/assets/logo_public_security.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@ -1,36 +1,82 @@
|
|||||||
<template>
|
<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">
|
<footer class="max-w-screen-xl mx-auto w-full footer text-white">
|
||||||
<nav>
|
<nav>
|
||||||
<h6 class="footer-title">Services</h6>
|
<h6 class="footer-title">关于三优</h6>
|
||||||
<a class="link link-hover">Branding</a>
|
<a class="link link-hover">公司介绍</a>
|
||||||
<a class="link link-hover">Design</a>
|
<a class="link link-hover">发展历程</a>
|
||||||
<a class="link link-hover">Marketing</a>
|
<a class="link link-hover">平台概览</a>
|
||||||
<a class="link link-hover">Advertisement</a>
|
<a class="link link-hover">核心团队</a>
|
||||||
</nav>
|
</nav>
|
||||||
<nav>
|
<nav>
|
||||||
<h6 class="footer-title">Company</h6>
|
<h6 class="footer-title">新闻中心</h6>
|
||||||
<a class="link link-hover">About us</a>
|
<a class="link link-hover">三优新闻</a>
|
||||||
<a class="link link-hover">Contact</a>
|
<a class="link link-hover">媒体报道</a>
|
||||||
<a class="link link-hover">Jobs</a>
|
<a class="link link-hover">视频中心</a>
|
||||||
<a class="link link-hover">Press kit</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
<nav>
|
<nav>
|
||||||
<h6 class="footer-title">Legal</h6>
|
<h6 class="footer-title">加入我们</h6>
|
||||||
<a class="link link-hover">Terms of use</a>
|
<a class="link link-hover">人才理念</a>
|
||||||
<a class="link link-hover">Privacy policy</a>
|
<a class="link link-hover">培训体系</a>
|
||||||
<a class="link link-hover">Cookie policy</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>
|
</nav>
|
||||||
</footer>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup></script>
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.footer-bg {
|
.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);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 你可以在这里添加一些自定义的样式 */
|
/* 你可以在这里添加一些自定义的样式 */
|
||||||
|
|||||||
@ -2,7 +2,9 @@
|
|||||||
<div class="navbar header-bg-color">
|
<div class="navbar header-bg-color">
|
||||||
<div class="navbar-start"></div>
|
<div class="navbar-start"></div>
|
||||||
<div class="navbar-center">
|
<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 === 'home' ? '#00E5FF' : 'white' }">三优云试剂管家</a>
|
||||||
<a class="btn btn-ghost btn-hover" :style="{ color: activeTag === 'contact' ? '#00E5FF' : 'white' }">联系我们</a>
|
<a class="btn btn-ghost btn-hover" :style="{ color: activeTag === 'contact' ? '#00E5FF' : 'white' }">联系我们</a>
|
||||||
</div>
|
</div>
|
||||||
@ -30,7 +32,7 @@ const props = defineProps({
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.btn-hover:hover {
|
.btn-hover:hover {
|
||||||
color: #00E5FF !important;
|
color: #00e5ff !important;
|
||||||
}
|
}
|
||||||
/* 你可以在这里添加一些自定义的样式 */
|
/* 你可以在这里添加一些自定义的样式 */
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -2,7 +2,6 @@ import { createApp } from "vue";
|
|||||||
import "./style.css";
|
import "./style.css";
|
||||||
import App from "./App.vue";
|
import App from "./App.vue";
|
||||||
import router from "./router";
|
import router from "./router";
|
||||||
import 'aos/dist/aos.css'
|
|
||||||
|
|
||||||
function setRootFontSize() {
|
function setRootFontSize() {
|
||||||
const baseWidth = 1920; // 假设设计稿宽度为 1920px（可以根据实际设计稿调整）
|
const baseWidth = 1920; // 假设设计稿宽度为 1920px（可以根据实际设计稿调整）
|
||||||
|
|||||||
@ -6,13 +6,13 @@
|
|||||||
<img src="../assets/bgc001.png" class="w-full" />
|
<img src="../assets/bgc001.png" class="w-full" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full logo-image absolute top-[48px]">
|
<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" />
|
<img class="w-[76px] mr-[10px]" src="../assets/image 111.png" />
|
||||||
<span class="text-white text-sm">三优云试剂管家</span>
|
<span class="text-white text-sm">三优云试剂管家</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute top-[200px] w-full text-carousel-text">
|
<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 font-bold mb-[44px]">三优生物样品管理平台</h1>
|
||||||
<h1 class="text-5xl text-white mb-[58px]">专业面向生物药企的样品管理平台</h1>
|
<h1 class="text-5xl text-white mb-[58px]">专业面向生物药企的样品管理平台</h1>
|
||||||
<div class="button">
|
<div class="button">
|
||||||
@ -23,8 +23,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="max-w-screen-xl mx-auto">
|
<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="flex gap-[43px] justify-between items-center mb-[120px] text-white">
|
||||||
<div class="w-[558px]" data-aos="fade-down" data-aos-offset="500" data-aos-anchor-placement="top-center">
|
<div class="w-[558px] reveal-box">
|
||||||
<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] leading-[28px] text-content-spec">
|
<div class="text-[14px] leading-[28px] text-content-spec">
|
||||||
@ -44,7 +44,7 @@
|
|||||||
<div class="flex-1 ml-[-20px]">
|
<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="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>
|
<h1 class="text-3xl font-bold mb-[30px] text-right">精于库位管理，不止于库位管理</h1>
|
||||||
<div class="text-[14px] leading-[28px] text-content-spec">
|
<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="" />
|
<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="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 items-center mb-[82px]">
|
||||||
<div class="flex flex-col text-introduce-text mr-[100px]">
|
<div class="flex flex-col text-introduce-text mr-[100px] reveal-box">
|
||||||
<h1 class="text-3xl font-bold leading-[68px]" data-aos="fade-up">灵活自定义可完美适配</h1>
|
<h1 class="text-3xl font-bold leading-[68px]">灵活自定义可完美适配</h1>
|
||||||
<h1 class="text-3xl font-bold leading-[68px]">您独特的样品管理场景</h1>
|
<h1 class="text-3xl font-bold leading-[68px]">您独特的样品管理场景</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -221,65 +221,65 @@
|
|||||||
<div class="w-full custom-bgc-cooperation py-[100px]">
|
<div class="w-full custom-bgc-cooperation py-[100px]">
|
||||||
<div class="max-w-screen-xl mx-auto cooperation-content text-white">
|
<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="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-full grid grid-cols-5 gap-4">
|
||||||
<div class="w-[229px] h-[124px]" >
|
<div class="w-[229px] h-[124px] reveal-box">
|
||||||
<img src="../assets/company/image-1.png" alt="" />
|
<img src="../assets/company/image-1.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-[229px] h-[124px]">
|
<div class="w-[229px] h-[124px] reveal-box">
|
||||||
<img src="../assets/company/image-2.png" alt="" />
|
<img src="../assets/company/image-2.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-[229px] h-[124px]">
|
<div class="w-[229px] h-[124px] reveal-box">
|
||||||
<img src="../assets/company/image-3.png" alt="" />
|
<img src="../assets/company/image-3.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-[229px] h-[124px]">
|
<div class="w-[229px] h-[124px] reveal-box">
|
||||||
<img src="../assets/company/image-4.png" alt="" />
|
<img src="../assets/company/image-4.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-[229px] h-[124px]">
|
<div class="w-[229px] h-[124px] reveal-box">
|
||||||
<img src="../assets/company/image-5.png" alt="" />
|
<img src="../assets/company/image-5.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-[229px] h-[124px]">
|
<div class="w-[229px] h-[124px] reveal-box">
|
||||||
<img src="../assets/company/image-6.png" alt="" />
|
<img src="../assets/company/image-6.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-[229px] h-[124px]">
|
<div class="w-[229px] h-[124px] reveal-box">
|
||||||
<img src="../assets/company/image-7.png" alt="" />
|
<img src="../assets/company/image-7.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-[229px] h-[124px]">
|
<div class="w-[229px] h-[124px] reveal-box">
|
||||||
<img src="../assets/company/image-8.png" alt="" />
|
<img src="../assets/company/image-8.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-[229px] h-[124px]">
|
<div class="w-[229px] h-[124px] reveal-box">
|
||||||
<img src="../assets/company/image-9.png" alt="" />
|
<img src="../assets/company/image-9.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-[229px] h-[124px]">
|
<div class="w-[229px] h-[124px] reveal-box">
|
||||||
<img src="../assets/company/image-10.png" alt="" />
|
<img src="../assets/company/image-10.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-[229px] h-[124px]">
|
<div class="w-[229px] h-[124px] reveal-box">
|
||||||
<img src="../assets/company/image-11.png" alt="" />
|
<img src="../assets/company/image-11.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-[229px] h-[124px]">
|
<div class="w-[229px] h-[124px] reveal-box">
|
||||||
<img src="../assets/company/image-12.png" alt="" />
|
<img src="../assets/company/image-12.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-[229px] h-[124px]">
|
<div class="w-[229px] h-[124px] reveal-box">
|
||||||
<img src="../assets/company/image-13.png" alt="" />
|
<img src="../assets/company/image-13.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-[229px] h-[124px]">
|
<div class="w-[229px] h-[124px] reveal-box">
|
||||||
<img src="../assets/company/image-14.png" alt="" />
|
<img src="../assets/company/image-14.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-[229px] h-[124px]">
|
<div class="w-[229px] h-[124px] reveal-box">
|
||||||
<img src="../assets/company/image-15.png" alt="" />
|
<img src="../assets/company/image-15.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-[229px] h-[124px]">
|
<div class="w-[229px] h-[124px] reveal-box">
|
||||||
<img src="../assets/company/image-16.png" alt="" />
|
<img src="../assets/company/image-16.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-[229px] h-[124px]">
|
<div class="w-[229px] h-[124px] reveal-box">
|
||||||
<img src="../assets/company/image-17.png" alt="" />
|
<img src="../assets/company/image-17.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-[229px] h-[124px]">
|
<div class="w-[229px] h-[124px] reveal-box">
|
||||||
<img src="../assets/company/image-18.png" alt="" />
|
<img src="../assets/company/image-18.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-[229px] h-[124px]">
|
<div class="w-[229px] h-[124px] reveal-box">
|
||||||
<img src="../assets/company/image-19.png" alt="" />
|
<img src="../assets/company/image-19.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-[229px] h-[124px]">
|
<div class="w-[229px] h-[124px] reveal-box">
|
||||||
<img src="../assets/company/image-20.png" alt="" />
|
<img src="../assets/company/image-20.png" alt="" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -355,44 +355,102 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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="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="flex gap-[28px]">
|
||||||
<div class="base-wrap flex-1">
|
<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="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>
|
<span class="price-title mr-[16px]">早鸟价</span>
|
||||||
<div>
|
<div>
|
||||||
<span class="price-content">49,999</span>
|
<span class="price-content">49,999</span>
|
||||||
<span class="price-unit"> 元/年</span>
|
<span class="price-unit"> 元/年</span>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
<div class="base-wrap flex-1">
|
<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="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>
|
</div>
|
||||||
<div class="base-wrap flex-1">
|
<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="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>
|
||||||
</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 />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed, ref, onMounted } from "vue";
|
import { computed, ref, onMounted } from "vue";
|
||||||
|
import ScrollReveal from "scrollreveal";
|
||||||
|
|
||||||
import Header from "../components/Header.vue";
|
import Header from "../components/Header.vue";
|
||||||
import Footer from "../components/Footer.vue";
|
import Footer from "../components/Footer.vue";
|
||||||
import AOS from "aos";
|
|
||||||
|
|
||||||
import Image101 from "../assets/image 101.png";
|
import Image101 from "../assets/image 101.png";
|
||||||
import Image48 from "../assets/image 48.png";
|
import Image48 from "../assets/image 48.png";
|
||||||
@ -447,12 +505,19 @@ const btnList = ref([
|
|||||||
]);
|
]);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
console.log("123");
|
// ScrollReveal().reveal(".reveal-box", {
|
||||||
AOS.init({
|
// distance: "50px", // 动画开始的距离
|
||||||
// offset: 200, // 调整为更大的值
|
// duration: 1000, // 动画持续时间
|
||||||
duration: 800,
|
// easing: "ease-out", // 动画的缓动效果
|
||||||
// anchorPlacement: "top-center",
|
// opacity: 0, // 初始透明度
|
||||||
// once: true,
|
// interval: 200, // 动画之间的延迟时间
|
||||||
|
// });
|
||||||
|
// 从右侧滑入
|
||||||
|
ScrollReveal().reveal(".reveal-box", {
|
||||||
|
distance: "100px",
|
||||||
|
origin: "top",
|
||||||
|
opacity: 0,
|
||||||
|
duration: 1000,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
@ -582,19 +647,33 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.price-title {
|
.price-title {
|
||||||
font-family: PingFang SC;
|
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.price-title-origin {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
.price-content {
|
.price-content {
|
||||||
font-family: "D-DIN";
|
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
font-weight: 700;
|
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 {
|
.price-unit {
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
}
|
}
|
||||||
|
.price-unit-origin {
|
||||||
|
font-size: 22px;
|
||||||
|
color: rgba(102, 102, 102, 1);
|
||||||
|
}
|
||||||
.home-banner {
|
.home-banner {
|
||||||
padding: 26px;
|
padding: 26px;
|
||||||
/* padding-top:77px ; */
|
/* padding-top:77px ; */
|
||||||
@ -622,4 +701,11 @@ onMounted(() => {
|
|||||||
.text-icon-spec {
|
.text-icon-spec {
|
||||||
color: rgba(255, 255, 255, 0.7);
|
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>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user