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 00:16:11 +08:00
parent 56aaafc423
commit 984bca7328
5 changed files with 88 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "sample-website",
"version": "0.0.0",
"dependencies": {
"aos": "^2.3.4",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
@ -1064,6 +1065,17 @@
"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",
@ -1254,6 +1266,12 @@
"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",
@ -1751,6 +1769,18 @@
"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",

1
package.json
View File

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

1
src/main.js
View File

@ -2,6 +2,7 @@ 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（可以根据实际设计稿调整）

24
src/router/index.js
View File

@ -1,27 +1,31 @@
import { createRouter, createWebHistory } from 'vue-router'
import { createRouter, createWebHistory } from "vue-router";
// 导入页面组件
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Home from "../views/Home.vue";
import About from "../views/About.vue";
// 配置路由
const routes = [
{
path: '/',
name: 'Home',
path: "/",
name: "Home",
component: Home,
},
{
path: '/about',
name: 'About',
path: "/about",
name: "About",
component: About,
},
]
];
// 创建并导出路由实例
const router = createRouter({
history: createWebHistory(), // 使用 HTML5 history 模式
routes, // 路由配置
})
scrollBehavior(to, from, savedPosition) {
// 刷新时返回顶部
return { x: 0, y: 0 };
},
});
export default router
export default router;

68
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">
<div class="max-w-screen-xl mx-auto flex items-center" data-aos="fade-down">
<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">
<div class="max-w-screen-xl mx-auto" data-aos="fade-down">
<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">
<div class="w-[558px]">
<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">
<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]">
<div class="w-[467px]" data-aos="fade-down" data-aos-offset="600" data-aos-anchor-placement="top-center">
<h1 class="text-3xl font-bold mb-[30px] text-right">精于库位管理，不止于库位管理</h1>
<div class="text-[14px] leading-[28px] text-content-spec">
系统提供出色的库位管理方案，帮助库管人员直观精确地对样本进行定位。另外，空间剩余情况统计、碎片化统计、空间不足提醒、盘库工具等业务，可有效提升库区管理效率。如果您还在为库内情况不明而烦恼，三优云试剂管家不失为您的效率之选。
@ -105,7 +105,7 @@
<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]">灵活自定义可完美适配</h1>
<h1 class="text-3xl font-bold leading-[68px]" data-aos="fade-up">灵活自定义可完美适配</h1>
<h1 class="text-3xl font-bold leading-[68px]">您独特的样品管理场景</h1>
</div>
@ -221,66 +221,66 @@
<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">
<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]" >
<img src="../assets/company/image-1.png" alt="">
<img src="../assets/company/image-1.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<img src="../assets/company/image-2.png" alt="">
<img src="../assets/company/image-2.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<img src="../assets/company/image-3.png" alt="">
<img src="../assets/company/image-3.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<img src="../assets/company/image-4.png" alt="">
<img src="../assets/company/image-4.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<img src="../assets/company/image-5.png" alt="">
<img src="../assets/company/image-5.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<img src="../assets/company/image-6.png" alt="">
<img src="../assets/company/image-6.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<img src="../assets/company/image-7.png" alt="">
<img src="../assets/company/image-7.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<img src="../assets/company/image-8.png" alt="">
<img src="../assets/company/image-8.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<img src="../assets/company/image-9.png" alt="">
<img src="../assets/company/image-9.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<img src="../assets/company/image-10.png" alt="">
<img src="../assets/company/image-10.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<img src="../assets/company/image-11.png" alt="">
<img src="../assets/company/image-11.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<img src="../assets/company/image-12.png" alt="">
<img src="../assets/company/image-12.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<img src="../assets/company/image-13.png" alt="">
<img src="../assets/company/image-13.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<img src="../assets/company/image-14.png" alt="">
<img src="../assets/company/image-14.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<img src="../assets/company/image-15.png" alt="">
<img src="../assets/company/image-15.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<img src="../assets/company/image-16.png" alt="">
<img src="../assets/company/image-16.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<img src="../assets/company/image-17.png" alt="">
<img src="../assets/company/image-17.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<img src="../assets/company/image-18.png" alt="">
<img src="../assets/company/image-18.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<img src="../assets/company/image-19.png" alt="">
<img src="../assets/company/image-19.png" alt="" />
</div>
<div class="w-[229px] h-[124px]">
<img src="../assets/company/image-20.png" alt="">
<img src="../assets/company/image-20.png" alt="" />
</div>
</div>
<!-- <img src="../assets/image 20.png" class="w-full" alt="Tailwind CSS Carousel component" /> -->
@ -389,9 +389,11 @@
</template>
<script setup>
import { computed, ref } from "vue";
import { computed, ref, onMounted } from "vue";
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";
import Frame50 from "../assets/Frame 50.png";
@ -443,6 +445,16 @@ const btnList = ref([
active: false,
},
]);
onMounted(() => {
console.log("123");
AOS.init({
// offset: 200, // 调整为更大的值
duration: 800,
// anchorPlacement: "top-center",
// once: true,
});
});
</script>
<style scoped>
.btn-active-custom {