From afeed637a84c0752c73966b882aa385ad6b4323b Mon Sep 17 00:00:00 2001
From: chen <2659004835@qq.com>
Date: Fri, 10 Dec 2021 11:25:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=A6=96=E9=A1=B5=E5=BA=95?=
 =?UTF-8?q?=E9=83=A8=E8=BD=AE=E6=92=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/style.css            | 36 +++++++++++++++++++++++++++---------
 index.html               | 33 ++++++++++++++++++++++++++-------
 pages/htmls/massage.html |  4 ++--
 3 files changed, 55 insertions(+), 18 deletions(-)

diff --git a/css/style.css b/css/style.css
index ce4f3a0..d9014f3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,5 +1,5 @@
 /* 轮播样式 start */
-.banner-swiper {
+/* .banner-swiper {
 	overflow-x: hidden;
 	height: 76vh;
 	position: relative;
@@ -16,20 +16,20 @@
 	position: absolute;
 	color: #FFFFFF;
 	text-shadow: 2px 3px 10px rgba(0,0,0,.8);
-}
+} */
 /* 指示点默认样式 */
-.banner-swiper .swiper-pagination-bullet {
+/* .banner-swiper .swiper-pagination-bullet {
 	width: 20px;
 	height: 20px;
 	line-height: 20px;
 	text-align: center;
-}
+} */
 /* 鼠标悬浮样式、当前选中指示点样式 */
-.banner-swiper .swiper-pagination-bullet:hover,.banner-swiper .swiper-pagination-bullet-active {
+/* .banner-swiper .swiper-pagination-bullet:hover,.banner-swiper .swiper-pagination-bullet-active {
 	background-color: rgba(0,0,0,.8);
 	color: #FFFFFF;
 	opacity: 1;
-}
+} */
 /* 轮播样式 end */
 
 /* 导航 start */
@@ -100,6 +100,7 @@
 	box-shadow: 0px 0px 10px rgba(0,0,0,.4);
 	color: #b22f2c;
 	margin-bottom: 40px;
+	overflow: hidden;
 }
 .huigu-box p {
 	font-size: 1rem;
@@ -116,8 +117,8 @@
 	object-fit: contain;
 }
 .play-img {
-	width: 65px;
-	height: 65px;
+	width: 65px!important;
+	height: 65px!important;
 	position: absolute;
 	top: 50%;
 	left: 50%;
@@ -283,4 +284,21 @@
 	width: 50px!important;
 	height: 50px!important;
 	display: none;
-}
\ No newline at end of file
+}
+
+.swiper-container {width: 100%;height: 160px;overflow: visible!important;margin-bottom: 20px;}
+.swiper-container .swiper-wrapper .swiper-slide{ border-radius: 12px;width: 57%;position: relative;}
+.swiper-container .swiper-wrapper .swiper-slide img{height: 160px; border-radius: 12px;}
+.swiper-container .swiper-wrapper .swiper-slide-prev{ height: 160px;}
+.swiper-container .swiper-wrapper .swiper-slide-prev img{ height: 160px;}
+.swiper-container .swiper-wrapper .swiper-slide-next{ height: 160px;}
+.swiper-container .swiper-wrapper .swiper-slide-next img{ height: 160px;}
+.swiper-container .swiper-wrapper .swiper-slide-active{ width: 57%;}
+.swiper-container .swiper-wrapper .swiper-slide-active .play-img {
+	width: 65px!important;
+	height: 65px!important;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%,-50%);
+}
diff --git a/index.html b/index.html
index d41333a..5483021 100644
--- a/index.html
+++ b/index.html
@@ -104,23 +104,42 @@
 					<span>感恩奋进70年，致敬时代金沙人！</span>
 				</div>
 				<div class="huigu-box">
-					<div class="banner-swiper swiper">
+					<p style="margin-bottom: 10px;">- 展览回顾相册 -</p>
+					<div class="swiper-container swiper">
 						<div class="swiper-wrapper">
 							<div class="swiper-slide">
-								<img src="imgs/secondary/banner/banner-01.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
-								<h1 class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-01</h1>
+								<a href="javascript:;">
+									<img src="imgs/secondary/banner/banner-01.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
+									<img src="imgs/public/play-icon.png"  class="play-img">
+								</a>
 							</div>
 							<div class="swiper-slide">
-								<img src="imgs/secondary/banner/banner-02.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
-								<h1 class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-02</h1>
+								<a href="javascript:;">
+									<img src="imgs/secondary/banner/banner-02.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
+									<img src="imgs/public/play-icon.png"  class="play-img">
+								</a>
 							</div>
 							<div class="swiper-slide">
-								<img src="imgs/secondary/banner/banner-03.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
-								<h1 class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">banner-03</h1>
+								<a href="javascript:;">
+									<img src="imgs/secondary/banner/banner-03.png" width="100%" height="100%" alt="" onerror="this.src='./imgs/public/小桶龙.png'">
+									<img src="imgs/public/play-icon.png"  class="play-img">
+								</a>
 							</div>
 						</div>
 					</div>
 				</div>
+				<script type="text/javascript">
+					window.onload = function () {
+						var mySwiper = new Swiper('.swiper-container', {
+							direction: 'horizontal',
+							loop: true,
+							autoplay: 5000,
+							slidesPerView: "auto",
+							centeredSlides:true,
+							spaceBetween: 20,
+						})
+					}
+				</script>
 			</div>
 			<!-- 视频播放 -->
 			<div class="video-play-box" id="video-box">
diff --git a/pages/htmls/massage.html b/pages/htmls/massage.html
index 666a9af..c7f2136 100644
--- a/pages/htmls/massage.html
+++ b/pages/htmls/massage.html
@@ -119,8 +119,8 @@
 			<a href="javascript:;"><img src="../../imgs/public/vr-icon.png" ></a>
 			<a href="javascript:;"><img src="../../imgs/public/jiyu-icon.png" ></a>
 		</footer>
-		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
-		<script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>
+		<!-- <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
+		<script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script> -->
 		<script src="../../js/barrageWall.js"></script>
 		<script>
 			var val = '';