.

src/main/zhi-rong-web/src/components/Banner.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="banner">
+    <div :class="fixed ? 'bannerOne' : 'bannerTwo'">
         <div class="banner_top_title">
             <div class="banner_top_title_con">
                 <div class="banner_top_title_con_content banner_top_title_con_one" @click="all('/')">首页</div>
@@ -157,6 +157,7 @@ export default {
             navTypeOptions,
             navigationId: 0,
             homeId: 0,
+            fixed: true,
             banners: [],
             policyLawList: [
                 {
@@ -233,8 +234,20 @@ export default {
     },
     mounted() {
         this.getBanner();
+        window.addEventListener('scroll', this.scroll);
+        this.$nextTick(() => {
+            this.scroll();
+        });
     },
     methods: {
+        scroll() {
+            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+            if (scrollTop >= 90) {
+                this.fixed = false;
+            } else {
+                this.fixed = true;
+            }
+        },
         onCommand(command) {
             if (command == 'supplySide') {
                 this.$store.commit('updateShowAdd', true);
@@ -320,6 +333,9 @@ export default {
             this.$store.commit('updateShowAdd', true);
             this.$router.push('/successCases?category=GENERAL');
         }
+    },
+    destroyed() {
+        window.removeEventListener('scroll', this.scroll);
     }
     // components: {
     //     Swiper,
@@ -333,202 +349,214 @@ export default {
 .appContainer {
     background: #ffffff !important;
 }
-.banner {
+.bannerOne {
+    width: 100%;
+    cursor: pointer;
+    position: absolute;
+    top: 90px;
+    left: 0px;
+}
+.bannerTwo {
     width: 100%;
     cursor: pointer;
-    .banner_top_title {
-        width: 100%;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    z-index: 999;
+}
+.banner_top_title {
+    width: 100%;
+    height: 60px;
+    background: #405cff;
+    .banner_top_title_con {
+        width: 1200px;
         height: 60px;
-        background: #405cff;
-        .banner_top_title_con {
-            width: 1200px;
+        margin: 0 auto;
+        display: flex;
+        .banner_top_title_con_content {
             height: 60px;
-            margin: 0 auto;
-            display: flex;
-            .banner_top_title_con_content {
-                height: 60px;
-                flex: 1;
-                text-align: center;
-                font-size: 18px;
-                color: #ffffff;
-                line-height: 60px;
-            }
-            .banner_top_title_con_content:hover {
-                background: #ffe54f;
-                font-size: 20px;
-                font-weight: bold;
-                color: #000000;
-            }
-            .banner_top_title_con_two:hover {
-                .banner_top_title_con_two_con {
-                    display: block;
-                }
-            }
-            .banner_top_title_con_four:hover {
-                .banner_top_title_con_two_con {
-                    display: block;
-                }
+            flex: 1;
+            text-align: center;
+            font-size: 18px;
+            color: #ffffff;
+            line-height: 60px;
+        }
+        .banner_top_title_con_content:hover {
+            background: #ffe54f;
+            font-size: 20px;
+            font-weight: bold;
+            color: #000000;
+        }
+        .banner_top_title_con_two:hover {
+            .banner_top_title_con_two_con {
+                display: block;
             }
-            .banner_top_title_con_five:hover {
-                .banner_top_title_con_two_con {
-                    display: block;
-                }
+        }
+        .banner_top_title_con_four:hover {
+            .banner_top_title_con_two_con {
+                display: block;
             }
-            .banner_top_title_con_three:hover {
-                .banner_top_title_con_two_con {
-                    display: block;
-                }
+        }
+        .banner_top_title_con_five:hover {
+            .banner_top_title_con_two_con {
+                display: block;
             }
+        }
+        .banner_top_title_con_three:hover {
             .banner_top_title_con_two_con {
+                display: block;
+            }
+        }
+        .banner_top_title_con_two_con {
+            width: 100%;
+            background: #ffffff;
+            display: none;
+            position: relative;
+            z-index: 99;
+            .banner_top_title_con_two_con_content {
                 width: 100%;
-                background: #ffffff;
-                display: none;
-                position: relative;
-                z-index: 99;
-                .banner_top_title_con_two_con_content {
-                    width: 100%;
-                    height: 56px;
-                    font-size: 14px;
-                    color: #000000;
-                    line-height: 56px;
-                    text-align: center;
-                    cursor: pointer;
-                }
-                .banner_top_title_con_two_con_content:hover {
-                    background: #e4e4e4;
-                    color: #353535;
-                    font-weight: bold;
-                }
+                height: 56px;
+                font-size: 14px;
+                color: #000000;
+                line-height: 56px;
+                text-align: center;
+                cursor: pointer;
+            }
+            .banner_top_title_con_two_con_content:hover {
+                background: #e4e4e4;
+                color: #353535;
+                font-weight: bold;
             }
         }
     }
-    .banner_con {
-        width: 1200px;
+}
+.banner_con {
+    width: 1200px;
+    margin: 0 auto;
+    .banner_con_top {
+        width: 646px;
         margin: 0 auto;
-        .banner_con_top {
-            width: 646px;
-            margin: 0 auto;
+        display: flex;
+        margin-bottom: 50px;
+        .banner_con_top_left {
+            width: 120px;
+            height: 48px;
+            background: #ffffff;
+            border: 1px solid #009f40;
+            margin-right: 1px;
+            padding: 0px 12px 0px 16px;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #727172;
+            .banner_con_top_left_img {
+                width: 16px;
+                height: 16px;
+            }
+        }
+        .banner_con_top_right {
             display: flex;
-            margin-bottom: 50px;
-            .banner_con_top_left {
-                width: 120px;
+            height: 48px;
+            align-items: center;
+            border: 1px solid #009f40;
+            background: #ffffff;
+            box-sizing: border-box;
+            .banner_con_top_right_title {
+                width: 450px;
                 height: 48px;
-                background: #ffffff;
-                border: 1px solid #009f40;
-                margin-right: 1px;
-                padding: 0px 12px 0px 16px;
-                box-sizing: border-box;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
                 font-size: 14px;
                 font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
-                color: #727172;
-                .banner_con_top_left_img {
-                    width: 16px;
-                    height: 16px;
-                }
+                color: #c8c9cc;
+                padding-left: 20px;
+                line-height: 48px;
             }
-            .banner_con_top_right {
-                display: flex;
+            .banner_con_top_right_con {
+                width: 75px;
                 height: 48px;
-                align-items: center;
-                border: 1px solid #009f40;
-                background: #ffffff;
+                background: #009e40;
+                padding: 12px 0px 0px 26px;
                 box-sizing: border-box;
-                .banner_con_top_right_title {
-                    width: 450px;
-                    height: 48px;
-                    font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #c8c9cc;
-                    padding-left: 20px;
-                    line-height: 48px;
-                }
-                .banner_con_top_right_con {
-                    width: 75px;
-                    height: 48px;
-                    background: #009e40;
-                    padding: 12px 0px 0px 26px;
-                    box-sizing: border-box;
-                    .banner_con_top_right_img {
-                        width: 24px;
-                        height: 24px;
-                    }
+                .banner_con_top_right_img {
+                    width: 24px;
+                    height: 24px;
                 }
             }
         }
-        .banner_con_titleOne {
-            width: 1200px;
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 20px;
-            .banner_con_titleOne_img {
-                width: 590px;
-                height: 180px;
-                // background: #3452fe;
-            }
-            .banner_con_titleOne_con {
-                width: 590px;
-                height: 180px;
-                position: relative;
-                .supply_side {
-                    position: absolute;
-                    top: 46px;
-                    left: 30px;
-                    .supply_side_one {
-                        font-size: 24px;
-                        font-weight: bold;
-                        color: #ffffff;
-                        line-height: 40px;
-                        margin-bottom: 8px;
-                    }
-                    .supply_side_two {
-                        font-size: 14px;
-                        font-weight: 400;
-                        color: #ffffff;
-                        line-height: 24px;
-                    }
+    }
+    .banner_con_titleOne {
+        width: 1200px;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20px;
+        .banner_con_titleOne_img {
+            width: 590px;
+            height: 180px;
+            // background: #3452fe;
+        }
+        .banner_con_titleOne_con {
+            width: 590px;
+            height: 180px;
+            position: relative;
+            .supply_side {
+                position: absolute;
+                top: 46px;
+                left: 30px;
+                .supply_side_one {
+                    font-size: 24px;
+                    font-weight: bold;
+                    color: #ffffff;
+                    line-height: 40px;
+                    margin-bottom: 8px;
+                }
+                .supply_side_two {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #ffffff;
+                    line-height: 24px;
                 }
             }
         }
-        .banner_con_titleTwo {
-            width: 1200px;
-            display: flex;
-            justify-content: space-between;
-            .banner_con_titleTwo_con {
-                width: 387px;
-                height: 161px;
-                position: relative;
-                .supply_sides {
-                    position: absolute;
-                    top: 46px;
-                    left: 30px;
-                    .supply_sides_one {
-                        font-size: 20px;
-                        font-weight: bold;
-                        color: #ffffff;
-                        line-height: 26px;
-                        margin-bottom: 12px;
-                    }
-                    .supply_sides_two {
-                        font-size: 14px;
-                        font-weight: 400;
-                        color: rgba(255, 255, 255, 0.6);
-                        line-height: 24px;
-                    }
+    }
+    .banner_con_titleTwo {
+        width: 1200px;
+        display: flex;
+        justify-content: space-between;
+        .banner_con_titleTwo_con {
+            width: 387px;
+            height: 161px;
+            position: relative;
+            .supply_sides {
+                position: absolute;
+                top: 46px;
+                left: 30px;
+                .supply_sides_one {
+                    font-size: 20px;
+                    font-weight: bold;
+                    color: #ffffff;
+                    line-height: 26px;
+                    margin-bottom: 12px;
+                }
+                .supply_sides_two {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: rgba(255, 255, 255, 0.6);
+                    line-height: 24px;
                 }
             }
-            .banner_con_titleTwo_img {
-                width: 387px;
-                height: 161px;
-                // background: #7d84ff;
-            }
+        }
+        .banner_con_titleTwo_img {
+            width: 387px;
+            height: 161px;
+            // background: #7d84ff;
         }
     }
 }
+
 /deep/ .el-carousel__container {
     height: 420px;
     min-height: 420px;
@@ -543,7 +571,7 @@ export default {
     // display: block;
 }
 .el-dropdown-menu__item:not(.is-disabled):hover {
-    color: #405CFF;
+    color: #405cff;
 }
 .banner_con_titleOne_con_one {
     background: #3452fe;
@@ -561,3 +589,4 @@ export default {
     background: #7186ff;
 }
 </style>
+

src/main/zhi-rong-web/src/components/BannerNav.vue

@@ -17,6 +17,7 @@ export default {};
 .banner_navigation {
     width: 100%;
     height: 420px;
+    margin-top: 60px;
     background-image: url('../assets/banner@3x.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;

src/main/zhi-rong-web/src/components/page/BreadPage.vue

@@ -51,6 +51,7 @@ export default {
 <style lang="less" scoped>
 .bread-page {
     padding: 30px 0 !important;
+    padding-top: 90px !important;
 }
 .el-breadcrumb {
     padding-bottom: 30px;
@@ -59,17 +60,18 @@ export default {
     content: '当前页面：';
     float: left;
     // color: #292c33;
-    color: #FFFFFF;
+    color: #ffffff;
     font-weight: bold;
     line-height: 1;
 }
-/deep/ .el-breadcrumb__inner{
-    color: rgba(255,255,255,0.6) !important;
+/deep/ .el-breadcrumb__inner {
+    color: rgba(255, 255, 255, 0.6) !important;
 }
-/deep/ .is-link{
-    color: #FFFFFF !important;
+/deep/ .is-link {
+    color: #ffffff !important;
 }
-/deep/ .el-breadcrumb__separator{
-    color: rgba(255,255,255,0.6) !important;
+/deep/ .el-breadcrumb__separator {
+    color: rgba(255, 255, 255, 0.6) !important;
 }
 </style>
+

src/main/zhi-rong-web/src/components/page/BreadPages.vue

@@ -51,6 +51,7 @@ export default {
 <style lang="less" scoped>
 .bread-pages {
     padding: 30px 0 !important;
+    padding-top: 90px !important;
 }
 .el-breadcrumb {
     padding-bottom: 30px;

src/main/zhi-rong-web/src/mixins/menu.js

@@ -137,7 +137,7 @@ export default {
                 setTimeout(
                     () => {
                         window.scrollTo({
-                            top: top + 260
+                            top: top + 180
                         });
                     },
                     isFirst ? 500 : 0

src/main/zhi-rong-web/src/views/About.vue

@@ -450,6 +450,7 @@ export default {
     margin-top: -90px;
 }
 .intro {
+    margin-top: 60px;
     width: 100%;
     height: 573px;
     background-image: url('../assets/platform_introduction.png');

src/main/zhi-rong-web/src/views/Allsearch.vue

@@ -923,7 +923,7 @@ export default {
     .search {
         display: flex;
         justify-content: center;
-        margin: 50px 0 50px 0px;
+        margin: 110px 0 50px 0px;
         font-size: 15px;
 
         .banner_con_top_left {

src/main/zhi-rong-web/src/views/agent/Index.vue

@@ -121,7 +121,7 @@ export default {
                 setTimeout(
                     () => {
                         window.scrollTo({
-                            top: top + 200
+                            top: top + 60
                         });
                     },
                     isFirst ? 500 : 0