尝试首页视频

src/components/Header.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    id="header_container_height"
     :class="
       detail
         ? 'header_container detail_header'

src/components/HomeScreen.vue

@@ -1,5 +1,13 @@
 <template>
   <div class="home_screen_container">
+    <!-- <video
+      autoplay
+      loop
+      :src="V1"
+      muted
+      style="height: 100%; width: 100%; object-fit: cover"
+    ></video>
+    <div class="mask"></div> -->
     <h1 class="main_title">
       做铁路相关的设备<span class="sign">研发和制造</span>
     </h1>
@@ -14,6 +22,7 @@
 </template>
 
 <script setup>
+import V1 from '@/static/a.mp4'
 const toNextPage = () => {
   document.getElementById('about_us').scrollIntoView({
     behavior: 'smooth',
@@ -28,8 +37,19 @@ const toNextPage = () => {
   height: 100vh;
   background: url(../static/img/index/1.png) no-repeat;
   background-size: 100% 100%;
+  .mask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(4, 205, 255, 0.18);
+  }
   .main_title {
     font-size: 76px;
+    letter-spacing: 2px;
     font-family: Alibaba PuHuiTi;
     font-weight: bold;
     color: #f1f1f1;

src/components/detail/Detail.vue

@@ -2,9 +2,10 @@
   <div class="product_detail_card_container">
     <HeadLine title="产品细节" line1="注重产品的每一个细节" />
     <div class="detail_card">
-      <div class="mask">
+      123
+      <!-- <div class="mask">
         <div class="btn">点击查看详情</div>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>

src/pages/index.vue

@@ -22,8 +22,9 @@ onMounted(() => {
   window.addEventListener('scroll', () => {
     const scrollTop =
       document.documentElement.scrollTop || document.body.scrollTop
+    const height = window.innerHeight
 
-    if (scrollTop === 0) {
+    if (scrollTop < height) {
       isDetail.value = false
     } else {
       isDetail.value = true