feat: 提交

package-lock.json

@@ -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",

package.json

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

src/main.js

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

src/router/index.js

@@ -1,27 +1,31 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from "vue-router";
 
 // 导入页面组件
-import Home from '../views/Home.vue'
+import Home from "../views/Home.vue";
-import About from '../views/About.vue'
+import About from "../views/About.vue";
 
 // 配置路由
 const routes = [
   {
-    path: '/',
+    path: "/",
-    name: 'Home',
+    name: "Home",
     component: Home,
   },
   {
-    path: '/about',
+    path: "/about",
-    name: '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;

src/views/Home.vue

@@ -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="flex gap-[43px] justify-between items-center mb-[120px] text-white" id="anchor-element">
-        <div class="w-[558px]">
+        <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>
 
@@ -219,68 +219,68 @@
     </div>
 
     <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="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]">
+          <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 {