diff --git a/src/components/AboutUs.vue b/src/components/AboutUs.vue
index 0e7f88d..0f136c5 100644
--- a/src/components/AboutUs.vue
+++ b/src/components/AboutUs.vue
@@ -5,9 +5,9 @@
       line1="专业水下视学设备团队，研发出品,多年的使用经验打磨的好产品，支持定制，想您所想,另外公司有硬件研发团队"
       line2="软件研发团队、结构研发团队、外观研发团队也能帮您研发设计其他产品。"
     />
-    <div class="more_btn" @click="toAboutPage()">
-      <span>了解更多</span>
-      <span>→</span>
+    <div class="more_btn" @click="toAboutPage()" ref="el">
+      <span ref="elLeft">了解更多</span>
+      <span ref="elRight">→</span>
     </div>
     <FourCard />
   </div>
@@ -17,10 +17,26 @@
 import HeadLine from '@/components/HeadLine'
 import FourCard from '@/components/FourCard'
 import { useRouter } from 'vue-router'
+import { animateCSS } from '@/constant'
+import { ref, onMounted } from 'vue'
 const router = useRouter()
 const toAboutPage = () => {
   router.push('/about')
 }
+const elRight = ref(null)
+const elLeft = ref(null)
+const el = ref(null)
+onMounted(() => {
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        animateCSS(elRight.value, 'backInRight')
+        animateCSS(elLeft.value, 'backInLeft')
+      }
+    })
+  })
+  observer.observe(el.value)
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/HeadLine.vue b/src/components/HeadLine.vue
index 1245641..d6d578d 100644
--- a/src/components/HeadLine.vue
+++ b/src/components/HeadLine.vue
@@ -13,6 +13,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import { animateCSS } from '@/constant'
 const el = ref(null)
 const props = defineProps({
   title: {
@@ -38,21 +39,6 @@ onMounted(() => {
   })
   observer.observe(el.value)
 })
-const animateCSS = (node, animation, prefix = 'animate__') =>
-  // We create a Promise and return it
-  new Promise((resolve, reject) => {
-    const animationName = `${prefix}${animation}`
-    if (node) {
-      node.classList.add(`${prefix}animated`, animationName)
-      // When the animation ends, we clean the classes and resolve the Promise
-      function handleAnimationEnd(event) {
-        event.stopPropagation()
-        node.classList.remove(`${prefix}animated`, animationName)
-        resolve('Animation ended')
-      }
-      node.addEventListener('animationend', handleAnimationEnd, { once: true })
-    }
-  })
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Product.vue b/src/components/Product.vue
index 82bbb5e..40b3eff 100644
--- a/src/components/Product.vue
+++ b/src/components/Product.vue
@@ -69,13 +69,14 @@ import A1 from '@/static/img/index/a1.png'
       height: 393px;
       box-sizing: border-box;
       position: relative;
+
       .product_img {
         width: 100%;
         height: 100%;
         &:hover {
           ~ {
             .detail_show_container {
-              display: flex;
+              width: 100%;
             }
           }
         }
@@ -96,7 +97,7 @@ import A1 from '@/static/img/index/a1.png'
         &:hover {
           ~ {
             .detail_show_container {
-              display: flex;
+              width: 100%;
             }
           }
         }
@@ -114,15 +115,19 @@ import A1 from '@/static/img/index/a1.png'
         }
       }
       .detail_show_container {
-        display: none;
+        display: flex;
         position: absolute;
         top: 0;
-        width: 100%;
+        width: 0;
         background: #fcfcfc;
         height: 100%;
+        overflow: hidden;
         box-sizing: border-box;
         z-index: 20;
         padding: 94px 0 194px 0;
+        transition-property: all;
+        animation-fill-mode: forwards;
+        transition-duration: 0.5s;
         .content {
           border-left: solid 4px #f95926;
           width: 80%;
diff --git a/src/components/about/Intro.vue b/src/components/about/Intro.vue
index 63fb932..0cff0a7 100644
--- a/src/components/about/Intro.vue
+++ b/src/components/about/Intro.vue
@@ -48,7 +48,7 @@ import HeadLine from '@/components/HeadLine.vue'
         font-size: 55px;
         font-family: Zona Pro;
         font-weight: 900;
-        color: #5064f4;
+        color: $theme-color;
       }
       .unit {
         margin-left: 22px;
diff --git a/src/components/detail/Overview.vue b/src/components/detail/Overview.vue
index 87ac8bc..3849220 100644
--- a/src/components/detail/Overview.vue
+++ b/src/components/detail/Overview.vue
@@ -12,8 +12,8 @@
             快速的帮助工程师从环境上优化机器视觉方案 双 x
           </p>
           <div class="btn">
-            <span>联系我们</span>
-            <span>→</span>
+            <span class="animate__animated animate__backInLeft">联系我们</span>
+            <span class="animate__animated animate__backInRight">→</span>
           </div>
         </div>
       </div>
@@ -90,7 +90,7 @@ const changeTab = index => {
         .btn {
           width: 206px;
           height: 55px;
-          background: linear-gradient(90deg, #7182ff, #5064f4);
+          background: $btn-gradient;
           border-radius: 28px;
           display: flex;
           cursor: pointer;
diff --git a/src/components/detail/Parameter.vue b/src/components/detail/Parameter.vue
index 6f66ab4..9a19b27 100644
--- a/src/components/detail/Parameter.vue
+++ b/src/components/detail/Parameter.vue
@@ -51,7 +51,7 @@ import HeadLine from '../HeadLine'
     .tb_header {
       display: flex;
       align-items: center;
-      background: #5064f4;
+      background: $theme-color;
       height: 90px;
       font-size: 28px;
       font-weight: 500;
diff --git a/src/components/detail/RelativeMerits.vue b/src/components/detail/RelativeMerits.vue
index 00529b7..c8f14e9 100644
--- a/src/components/detail/RelativeMerits.vue
+++ b/src/components/detail/RelativeMerits.vue
@@ -101,7 +101,7 @@ import Info from './Info'
         height: 365px;
       }
       .new_btn {
-        background: linear-gradient(90deg, #7182ff, #5064f4);
+        background: $btn-gradient;
       }
       .old_btn {
         background: #cbcbcb;
diff --git a/src/constant/index.js b/src/constant/index.js
index fe62c7e..e8e7f1a 100644
--- a/src/constant/index.js
+++ b/src/constant/index.js
@@ -1,3 +1,19 @@
 // export const DOMAIN = 'https://www.iflytop.com'
 
 export const DOMAIN = 'http://localhost:5173'
+
+export const animateCSS = (node, animation, prefix = 'animate__') =>
+  // We create a Promise and return it
+  new Promise((resolve, reject) => {
+    const animationName = `${prefix}${animation}`
+    if (node) {
+      node.classList.add(`${prefix}animated`, animationName)
+      // When the animation ends, we clean the classes and resolve the Promise
+      function handleAnimationEnd(event) {
+        event.stopPropagation()
+        node.classList.remove(`${prefix}animated`, animationName)
+        resolve('Animation ended')
+      }
+      node.addEventListener('animationend', handleAnimationEnd, { once: true })
+    }
+  })
diff --git a/src/static/a.mp4 b/src/static/a.mp4
deleted file mode 100644
index 9629803..0000000
Binary files a/src/static/a.mp4 and /dev/null differ
diff --git a/src/static/img.zip b/src/static/img.zip
new file mode 100644
index 0000000..97d843b
Binary files /dev/null and b/src/static/img.zip differ