|
|
@@ -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>
|
|
|
+
|
