修改样式

src/components/windows/topIndex.vue

@@ -1,50 +1,48 @@
 <template>
-      <el-row class="topMain  animate__animated animate__zoomIn">
-            <el-col :span="24" class="info">
-                  <el-col :span="24" class="title">
-                        {{ info.title }}
-                  </el-col>
-                  <el-col :span="24" class="enTitle">
-                        {{ info.enTitle }}
-                  </el-col>
-            </el-col>
-      </el-row>
+  <el-row class="topMain animate__animated animate__zoomIn">
+    <el-col :span="24" class="info">
+      <el-col :span="24" class="title">
+        {{ info.title }}
+      </el-col>
+      <el-col :span="24" class="enTitle">
+        {{ info.enTitle }}
+      </el-col>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup lang="ts">
-
 const info = defineModel('info', {
-      type: Object,
-      default: () => ({ title: '', enTitle: '' })
+  type: Object,
+  default: () => ({ title: '', enTitle: '' }),
 })
 </script>
 
 <style scoped lang="scss">
 .topMain {
-      height: calc(480px - 66px);
-      overflow: hidden;
-      padding: 10% 0;
-
-      .info {
+  height: calc(480px - 66px);
+  overflow: hidden;
+  padding: 15% 0 10%;
 
-            .title {
-                  color: rgb(25, 25, 26);
-                  font-family: '宋体';
-                  font-size: 64px;
-                  font-weight: 700;
-                  line-height: 92px;
-                  letter-spacing: 8px;
-            }
+  .info {
+    .title {
+      color: rgb(25, 25, 26);
+      font-family: '宋体';
+      font-size: 64px;
+      font-weight: 700;
+      line-height: 92px;
+      letter-spacing: 8px;
+    }
 
-            .enTitle {
-                  color: rgb(25, 25, 26);
-                  font-family: '宋体';
-                  font-size: 36px;
-                  font-weight: 900;
-                  line-height: 52px;
-                  letter-spacing: 0px;
-                  text-transform: uppercase;
-            }
-      }
+    .enTitle {
+      color: rgb(25, 25, 26);
+      font-family: '宋体';
+      font-size: 36px;
+      font-weight: 900;
+      line-height: 52px;
+      letter-spacing: 0px;
+      text-transform: uppercase;
+    }
+  }
 }
 </style>

src/views/win/introduceDetail.vue

@@ -63,12 +63,18 @@ function useWindowScroll() {
 <style scoped lang="scss">
 .introduce {
   .info {
+    position: relative;
+    background-image: url('/water1.png');
+    background-repeat: no-repeat;
+    background-size: 100% 480px;
     .top {
       height: 480px;
-      background-image: url('/water1.png');
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
       .menus {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
         height: 66px;
         -webkit-transition: all 1.5s ease;
         -moz-transition: all 1.5s ease;
@@ -84,7 +90,7 @@ function useWindowScroll() {
         width: 100%;
         z-index: 1000;
         background-color: #fff;
-         -webkit-transition: all 1.5s ease;
+        -webkit-transition: all 1.5s ease;
         -moz-transition: all 1.5s ease;
         -ms-transition: all 1.5s ease;
         -o-transition: all 1.5s ease;

src/views/win/introduceIndex.vue

@@ -72,12 +72,18 @@ function useWindowScroll() {
 <style scoped lang="scss">
 .introduce {
   .info {
+    position: relative;
+    background-image: url('/brief5.png');
+    background-repeat: no-repeat;
+    background-size: 100% 480px;
     .top {
       height: 480px;
-      background-image: url('/brief5.png');
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
       .menus {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
         height: 66px;
         -webkit-transition: all 1.5s ease;
         -moz-transition: all 1.5s ease;
@@ -93,7 +99,7 @@ function useWindowScroll() {
         width: 100%;
         z-index: 1000;
         background-color: #fff;
-         -webkit-transition: all 1.5s ease;
+        -webkit-transition: all 1.5s ease;
         -moz-transition: all 1.5s ease;
         -ms-transition: all 1.5s ease;
         -o-transition: all 1.5s ease;
@@ -103,7 +109,7 @@ function useWindowScroll() {
         padding: 0 17%;
       }
     }
-   
+
     .bottom {
       margin: 40px 0 0 0;
       .zero {

src/views/win/inwaterDetail.vue

@@ -60,12 +60,18 @@ function useWindowScroll() {
 <style scoped lang="scss">
 .introduce {
   .info {
+    position: relative;
+    background-image: url('/water1.png');
+    background-repeat: no-repeat;
+    background-size: 100% 480px;
     .top {
       height: 480px;
-      background-image: url('/water1.png');
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
       .menus {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
         height: 66px;
         -webkit-transition: all 1.5s ease;
         -moz-transition: all 1.5s ease;

src/views/win/inwaterIndex.vue

@@ -46,32 +46,38 @@ import footIndex from '../../components/windows/footIndex.vue'
 const { y } = useWindowScroll()
 
 function useWindowScroll() {
-  const y = ref(0);
+  const y = ref(0)
 
   const handleScroll = () => {
-    y.value = window.scrollY;
-  };
+    y.value = window.scrollY
+  }
 
   onMounted(() => {
-    window.addEventListener('scroll', handleScroll);
-  });
+    window.addEventListener('scroll', handleScroll)
+  })
 
   onUnmounted(() => {
-    window.removeEventListener('scroll', handleScroll);
-  });
+    window.removeEventListener('scroll', handleScroll)
+  })
 
-  return { y };
+  return { y }
 }
 </script>
 <style scoped lang="scss">
 .inwater {
   .info {
+    position: relative;
+    background-image: url('/inwater1.png');
+    background-repeat: no-repeat;
+    background-size: 100% 480px;
     .top {
       height: 480px;
-      background-image: url('/inwater1.png');
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
       .menus {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
         height: 66px;
         -webkit-transition: all 1.5s ease;
         -moz-transition: all 1.5s ease;
@@ -87,7 +93,7 @@ function useWindowScroll() {
         width: 100%;
         z-index: 1000;
         background-color: #fff;
-         -webkit-transition: all 1.5s ease;
+        -webkit-transition: all 1.5s ease;
         -moz-transition: all 1.5s ease;
         -ms-transition: all 1.5s ease;
         -o-transition: all 1.5s ease;
@@ -97,7 +103,7 @@ function useWindowScroll() {
         padding: 0 17%;
       }
     }
-    
+
     .bottom {
       margin: 40px 0 0 0;
       .zero {

src/views/win/messDetail.vue

@@ -74,12 +74,18 @@ function useWindowScroll() {
 <style scoped lang="scss">
 .mess {
   .info {
+    position: relative;
+    background-image: url('/water1.png');
+    background-repeat: no-repeat;
+    background-size: 100% 480px;
     .top {
       height: 480px;
-      background-image: url('/water1.png');
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
       .menus {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
         height: 66px;
         -webkit-transition: all 1.5s ease;
         -moz-transition: all 1.5s ease;
@@ -87,7 +93,6 @@ function useWindowScroll() {
         -o-transition: all 1.5s ease;
         transition: all 1.5s ease;
       }
-
       .new_style {
         position: fixed;
         left: 0;

src/views/win/messDetailSec.vue

@@ -54,12 +54,18 @@ function useWindowScroll() {
 <style scoped lang="scss">
 .mess {
   .info {
+    position: relative;
+    background-image: url('/water1.png');
+    background-repeat: no-repeat;
+    background-size: 100% 480px;
     .top {
       height: 480px;
-      background-image: url('/water1.png');
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
       .menus {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
         height: 66px;
         -webkit-transition: all 1.5s ease;
         -moz-transition: all 1.5s ease;

src/views/win/messIndex.vue

@@ -67,12 +67,18 @@ function useWindowScroll() {
 <style scoped lang="scss">
 .mess {
   .info {
+    position: relative;
+    background-image: url('/messBg.png');
+    background-repeat: no-repeat;
+    background-size: 100% 480px;
     .top {
       height: 480px;
-      background-image: url('/messBg.png');
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
       .menus {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
         height: 66px;
         -webkit-transition: all 1.5s ease;
         -moz-transition: all 1.5s ease;

src/views/win/newsDetail.vue

@@ -52,12 +52,18 @@ function useWindowScroll() {
 <style scoped lang="scss">
 .introduce {
   .info {
+    position: relative;
+    background-image: url('/mess0.png');
+    background-repeat: no-repeat;
+    background-size: 100% 480px;
     .top {
       height: 480px;
-      background-image: url('/mess0.png');
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
       .menus {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
         height: 66px;
         -webkit-transition: all 1.5s ease;
         -moz-transition: all 1.5s ease;
@@ -65,7 +71,6 @@ function useWindowScroll() {
         -o-transition: all 1.5s ease;
         transition: all 1.5s ease;
       }
-
       .new_style {
         position: fixed;
         left: 0;

src/views/win/newsIndex.vue

@@ -60,12 +60,18 @@ function useWindowScroll() {
 <style scoped lang="scss">
 .news {
   .info {
+    position: relative;
+    background-image: url('/news5.png');
+    background-repeat: no-repeat;
+    background-size: 100% 480px;
     .top {
       height: 480px;
-      background-image: url('/news5.png');
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
       .menus {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
         height: 66px;
         -webkit-transition: all 1.5s ease;
         -moz-transition: all 1.5s ease;

src/views/win/popularwillDetail.vue

@@ -53,12 +53,18 @@ function useWindowScroll() {
 <style scoped lang="scss">
 .mess {
   .info {
+    position: relative;
+    background-image: url('/water1.png');
+    background-repeat: no-repeat;
+    background-size: 100% 480px;
     .top {
       height: 480px;
-      background-image: url('/water1.png');
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
       .menus {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
         height: 66px;
         -webkit-transition: all 1.5s ease;
         -moz-transition: all 1.5s ease;

src/views/win/popularwillIndex.vue

@@ -61,12 +61,18 @@ function useWindowScroll() {
 <style scoped lang="scss">
 .inwater {
   .info {
+    position: relative;
+    background-image: url('/popu1.png');
+    background-repeat: no-repeat;
+    background-size: 100% 480px;
     .top {
       height: 480px;
-      background-image: url('/popu1.png');
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
       .menus {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
         height: 66px;
         -webkit-transition: all 1.5s ease;
         -moz-transition: all 1.5s ease;

src/views/win/queryDetail.vue

@@ -53,12 +53,18 @@ function useWindowScroll() {
 <style scoped lang="scss">
 .introduce {
   .info {
+    position: relative;
+    background-image: url('/water1.png');
+    background-repeat: no-repeat;
+    background-size: 100% 480px;
     .top {
       height: 480px;
-      background-image: url('/water1.png');
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
       .menus {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
         height: 66px;
         -webkit-transition: all 1.5s ease;
         -moz-transition: all 1.5s ease;
@@ -66,7 +72,6 @@ function useWindowScroll() {
         -o-transition: all 1.5s ease;
         transition: all 1.5s ease;
       }
-
       .new_style {
         position: fixed;
         left: 0;

src/views/win/queryIndex.vue

@@ -60,12 +60,18 @@ function useWindowScroll() {
 <style scoped lang="scss">
 .query {
   .info {
+    position: relative;
+    background-image: url('/water1.png');
+    background-repeat: no-repeat;
+    background-size: 100% 480px;
     .top {
       height: 480px;
-      background-image: url('/water1.png');
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
       .menus {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
         height: 66px;
         -webkit-transition: all 1.5s ease;
         -moz-transition: all 1.5s ease;

src/views/win/watersupplyDetail.vue

@@ -59,12 +59,18 @@ function useWindowScroll() {
 <style scoped lang="scss">
 .introduce {
   .info {
+    position: relative;
+    background-image: url('/water1.png');
+    background-repeat: no-repeat;
+    background-size: 100% 480px;
     .top {
       height: 480px;
-      background-image: url('/water1.png');
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
       .menus {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
         height: 66px;
         -webkit-transition: all 1.5s ease;
         -moz-transition: all 1.5s ease;

src/views/win/watersupplyIndex.vue

@@ -62,12 +62,18 @@ function useWindowScroll() {
 <style scoped lang="scss">
 .watersupply {
   .info {
+    position: relative;
+    background-image: url('/water1.png');
+    background-repeat: no-repeat;
+    background-size: 100% 480px;
     .top {
       height: 480px;
-      background-image: url('/water1.png');
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
       .menus {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
         height: 66px;
         -webkit-transition: all 1.5s ease;
         -moz-transition: all 1.5s ease;

src/views/winParts/topIndex.vue

@@ -22,7 +22,7 @@ defineOptions({ name: 'topIndex' })
 </script>
 <style scoped lang="scss">
 .topIndex {
-      margin: 10% 0 5% 0;
+      margin: 15% 0 5% 0;
 
       .info {
             display: flex;

src/views/windowsIndex.vue

@@ -99,12 +99,17 @@ onUnmounted(() => {
 .main {
   .info {
     position: relative;
+    background-image: url('/home1.png');
+    background-repeat: no-repeat;
+    background-size: 100% 635px; /* 设置背景图片高度为 480px，宽度自动适应 */
     .top {
       height: 635px;
-      background-image: url('/home1.png');
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
       .menus {
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1000;
         height: 66px;
         -webkit-transition: all 1.5s ease;
         -moz-transition: all 1.5s ease;