头部特效

src/components/Card.vue

@@ -61,7 +61,7 @@ const props = defineProps({
         position: absolute;
         left: -50%;
         bottom: -7px;
-        background: #000;
+        background: rgba(0, 0, 0, 0.2);
         display: flex;
         padding: 5px 0;
         align-items: center;

src/components/Top.vue

@@ -1,7 +1,12 @@
 <template>
-  <div class="top_container">
-    <img class="logo" :src="Logo" alt="" />
-    <img class="fold_icon" :src="Icon" alt="" @click="openDrawer" />
+  <div :class="istop ? 'top_container' : 'top_container container_bg'">
+    <img class="logo" :src="istop ? Logo : Logo1" alt="" />
+    <img
+      class="fold_icon"
+      :src="istop ? Icon : Icon1"
+      alt=""
+      @click="openDrawer"
+    />
     <div class="modal_drawer" v-if="drawer">
       <img :src="Close" class="close" alt="" @click="drawer = false" />
       <div class="content">
@@ -22,10 +27,12 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import Close from '@/static/img/banner/x.png'
 import Logo from '@/static/img/banner/logo.png'
 import Icon from '@/static/img/banner/liebiao.png'
+import Icon1 from '@/static/img/banner/liebiao2.png'
+import Logo1 from '@/static/img/banner/logo2.png'
 import { useRouter } from 'vue-router'
 const router = useRouter()
 const drawer = ref(false)
@@ -36,6 +43,25 @@ const openDrawer = () => {
 const toPage = path => {
   router.push(path)
 }
+
+onMounted(() => {
+  window.addEventListener('scroll', scrollToTop)
+})
+
+const istop = ref(true)
+
+const scrollToTop = () => {
+  var scrollTop =
+    window.pageYOffset ||
+    document.documentElement.scrollTop ||
+    document.body.scrollTop
+  console.log(scrollTop)
+  if (scrollTop == 0) {
+    istop.value = true
+  } else {
+    istop.value = false
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -117,4 +143,10 @@ const toPage = path => {
     }
   }
 }
+.container_bg {
+  background: #fff;
+  transition-property: all;
+  transition-duration: 0.7s;
+  animation-fill-mode: forwards;
+}
 </style>

src/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home_container">
+  <div class="home_container" @mousewheel="scrollChange">
     <Swiper />
     <CaseShow />
     <Hardware />