bug修改完成

about.html

@@ -436,7 +436,11 @@
 				</div>
 				<ul class="vision-list">
 					<li>
-						<div class="vision-img"><img src="images/vision01.jpg" alt=""></div>
+						<div class="vision-txt">
+							<img src="images/vision01.jpg" alt="">
+						</div>
+					</li>
+					<li>
 						<div class="vision-txt">
 							<img src="images/vision02.jpg" alt="">
 							<p>
@@ -446,7 +450,6 @@
 						</div>
 					</li>
 					<li>
-						<div class="vision-img"><img src="images/vision04.jpg" alt=""></div>
 						<div class="vision-txt">
 							<img src="images/vision03.jpg" alt="">
 							<p>
@@ -455,6 +458,11 @@
 							</p>
 						</div>
 					</li>
+					<li>
+						<div class="vision-txt">
+							<img src="images/vision04.jpg" alt="">
+						</div>
+					</li>
 				</ul>
 			</div>
 		</div>
@@ -818,5 +826,38 @@
 			}  
 		});
 		// ]]>
+		let surveyTop = $(".about-survey-bg").offset().top-80;
+		let courseTop = $(".about-course-bg").offset().top-80;
+		let strengthTop = $(".strength-bg").offset().top-80;
+		let visionTop = $(".vision-bg").offset().top-80;
+		let honorTop = $(".honor-bg").offset().top-80;
+		let socialTop = $(".social-bg").offset().top-80;
+		$(window).bind("scroll",function(){
+			let topScroll=$(this).scrollTop();//当前窗口的滚动距离
+			if(topScroll > surveyTop){
+				$(".pull-nav .swiper-slide>a").removeClass("active");
+				$(".survey-btn").addClass("active");
+			}
+			if(topScroll > surveyTop && topScroll > courseTop){
+				$(".pull-nav .swiper-slide>a").removeClass("active");
+				$(".course-btn").addClass("active");
+			}
+			if(topScroll > surveyTop && topScroll > courseTop && topScroll > strengthTop){
+				$(".about-nav>a").removeClass("active");
+				$(".strength-btn").addClass("active");
+			}
+			if(topScroll > surveyTop && topScroll > courseTop && topScroll > strengthTop && topScroll > visionTop){
+				$(".pull-nav .swiper-slide>a").removeClass("active");
+				$(".vision-btn").addClass("active");
+			}
+			if(topScroll > surveyTop && topScroll > courseTop && topScroll > strengthTop && topScroll > visionTop && topScroll > honorTop){
+				$(".pull-nav .swiper-slide>a").removeClass("active");
+				$(".honor-btn").addClass("active");
+			}
+			if(topScroll > surveyTop && topScroll > courseTop && topScroll > strengthTop && topScroll > visionTop && topScroll > honorTop && topScroll > socialTop){
+				$(".pull-nav .swiper-slide>a").removeClass("active");
+				$(".social-btn").addClass("active");
+			}
+		});
 	</script>
 </html>

css/style.css

@@ -1653,29 +1653,28 @@
 	margin-top: 10px;
 }
 .vision-list{
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	flex-wrap: wrap;
 	margin-top: 40px;
 }
 .vision-list>li{
 	display: flex;
 	justify-content: flex-start;
 	align-items: center;
-}
+	width: 50%;
-.vision-list>li:nth-of-type(2n){
-	flex-direction: row-reverse;
-}
-.vision-list>li>div{
-	width: 100%;
 	height: 430px;
 	overflow: hidden;
 }
-.vision-list>li>div img{
+.vision-list>li .vision-txt{
+	position: relative;
+}
+.vision-list>li img{
 	width: 100%;
 	min-height: 430px;
 	transition: all .6s;
 }
-.vision-list>li .vision-txt{
-	position: relative;
-}
 .vision-list>li  .vision-txt p{
 	color: #FFFFFF;
 	text-align: center;
@@ -1695,7 +1694,7 @@
 	line-height: 1.5;
 	margin-top: 8px;
 }
-.vision-list>li:hover .vision-img img{
+.vision-list>li:hover .vision-txt img{
 	transform: scale(1.2);
 	transition: all .6s;
 }
@@ -3736,10 +3735,10 @@ textarea::-webkit-input-placeholder{
 	.txt-bg .img img{
 		min-height: 300px;
 	}
-	.vision-list>li>div{
+	.vision-list>li{
 		height: 400px;
 	}
-	.vision-list>li>div img{
+	.vision-list>li img{
 		min-height: 400px;
 	}
 	.social-img{
@@ -3780,10 +3779,10 @@ textarea::-webkit-input-placeholder{
 	.txt-bg .img img{
 		min-height: 280px;
 	}
-	.vision-list>li>div{
+	.vision-list>li{
 		height: 380px;
 	}
-	.vision-list>li>div img{
+	.vision-list>li img{
 		min-height: 380px;
 	}
 	.social-img{
@@ -3848,10 +3847,10 @@ textarea::-webkit-input-placeholder{
 	.txt-bg .img img{
 		min-height: 260px;
 	}
-	.vision-list>li>div{
+	.vision-list>li{
 		height: 360px;
 	}
-	.vision-list>li>div img{
+	.vision-list>li img{
 		min-height: 360px;
 	}
 	.social-img{
@@ -4506,17 +4505,25 @@ textarea::-webkit-input-placeholder{
 		font-size: 14px;
 	}
 	.vision-list>li{
-		flex-wrap: wrap;
+		width: 100%;
 	}
-	.vision-list>li>div{
+	.vision-list>li{
 		height: 210px;
 	}
-	.vision-list>li>div img{
+	.vision-list>li img{
+		width: 100%;
 		min-height: 210px;
 	}
 	.vision-list>li .vision-txt p{
 		width: calc(100% - 30px);
 	}
+	.vision-list>li:nth-of-type(3){
+		transform: translateY(210px);
+	}
+	.vision-list>li:nth-of-type(4){
+		transform: translateY(-210px);
+	}
+	
 	.honor-bg{
 		padding: 20px 0;
 	}

index.html

@@ -237,7 +237,7 @@
 		<div class="banner-swiper swiper w1690">
 			<div class="swiper-wrapper">
 				<div class="swiper-slide video-slide">
-					<video src="video/A001_720.mp4" controls="controls"></video>
+					<video src="video/video.mp4" controls="controls"></video>
 				</div>
 				<div class="swiper-slide">
 					<img src="images/banner/banner.jpg" width="100%" height="100%" alt="">

js/javascript.js

@@ -396,7 +396,7 @@ jQuery(function($){
 			$(this).addClass("active");
 		});
 		$('.vision-btn').click(function(){
-			$('html,body').animate({scrollTop:$('.vision-bg').offset().top - 50}, 1000);
+			$('html,body').animate({scrollTop:$('.vision').offset().top - 50}, 1000);
 			$('.pull-nav .swiper-slide>a').removeClass("active");
 			$(this).addClass("active");
 		});
@@ -406,7 +406,7 @@ jQuery(function($){
 			$(this).addClass("active");
 		});
 		$('.social-btn').click(function(){
-			$('html,body').animate({scrollTop:$('.social-bg').offset().top - 50}, 1000);
+			$('html,body').animate({scrollTop:$('.social').offset().top - 50}, 1000);
 			$('.pull-nav .swiper-slide>a').removeClass("active");
 			$(this).addClass("active");
 		});
@@ -427,7 +427,7 @@ jQuery(function($){
 			$(this).addClass("active");
 		});
 		$('.vision-btn').click(function(){
-			$('html,body').animate({scrollTop:$('.vision-bg').offset().top - 80}, 1000);
+			$('html,body').animate({scrollTop:$('.vision').offset().top - 80}, 1000);
 			$('.pull-nav .swiper-slide>a').removeClass("active");
 			$(this).addClass("active");
 		});
@@ -437,7 +437,7 @@ jQuery(function($){
 			$(this).addClass("active");
 		});
 		$('.social-btn').click(function(){
-			$('html,body').animate({scrollTop:$('.social-bg').offset().top - 80}, 1000);
+			$('html,body').animate({scrollTop:$('.social').offset().top - 80}, 1000);
 			$('.pull-nav .swiper-slide>a').removeClass("active");
 			$(this).addClass("active");
 		});