样式调整

public/static/css/style.css

@@ -211,13 +211,15 @@ input,select,textarea{outline:medium none; resize: none;}
 .about-box4{ padding: 3.75rem 0;}
 .about-box4 .top-box{ text-align: center; margin-top: 6.25rem; position: relative;}
 .about-box4 .top-box::after{ content: ''; width: 100%; height: 1px; background: #B3B3B3; position: absolute; left: 0; bottom: 0.95rem;}
-.about-box4 .top-box .swiper-container .swiper-slide{ color: #B3B3B3; font-size: 1.4rem; cursor: pointer;}
+.about-box4 .top-box .swiper-container .swiper-slide{ color: #B3B3B3; font-size: 1.4rem; cursor: pointer; font-weight: bold;}
-.about-box4 .top-box .swiper-container .swiper-slide p span{ font-size: 3.125rem; font-weight: bold;}
+.about-box4 .top-box .swiper-container .swiper-slide p span{ font-size: 3.6rem;}
+.about-box4 .top-box .swiper-container .swiper-slide p em{ display: none; font-style: initial; margin-left: 0.4rem;}
 .about-box4 .top-box .swiper-container .swiper-slide i{ width: 1.3rem; height: 1.3rem; display: inline-block; border-radius: 100%; border: 0.375rem solid #B3B3B3; background: #fff; margin: 0.625rem 0 0;}
 .about-box4 .top-box .swiper-container .swiper-slide.swiper-slide-active{ color: #01418E;}
+.about-box4 .top-box .swiper-container .swiper-slide.swiper-slide-active p em{ display: inline-block;}
 .about-box4 .top-box .swiper-container .swiper-slide.swiper-slide-active i{ border-color: #01418E;}
 .about-box4 .lower-box{ padding: 2.5rem 30%;}
-.about-box4 .lower-box .center-block{ line-height: 1.6; font-size: 1rem; color: #888;}
+.about-box4 .lower-box .center-block{ line-height: 1.6; font-size: 1rem; color: #888; margin-left: 29%;}
 .about-box4 .swiper-btn{ width: 14.375rem; position: relative; float: left; left: 50%; transform: translate(-50%,0);}
 .about-box4 .swiper-btn .swiper-button-next{ float: right; right: 0;}
 .about-box4 .swiper-btn .swiper-button-prev{ float: left; left: 0;}
@@ -225,6 +227,7 @@ input,select,textarea{outline:medium none; resize: none;}
 .about-box4 .swiper-btn .swiper-button-next::after,.about-box4 .swiper-btn .swiper-button-prev::after{ color: #c9c9c8; transition: all .6s; font-size: 2.4rem;}
 .about-box4 .swiper-btn .swiper-button-next:hover,.about-box4 .swiper-btn .swiper-button-prev:hover{ background: #00418f;}
 .about-box4 .swiper-btn .swiper-button-next:hover::after,.about-box4 .swiper-btn .swiper-button-prev:hover::after{ color: #fff;}
+.about-box4 .swiper-btn span{ white-space: nowrap; font-size: 14px; color: #888; line-height: 4.25rem; position: absolute; left: 100%; top: 0; margin-left: 2.5rem;}
 .about-box4 .lower-box .lower-box-item{margin-bottom: 20px;}
 .about-box4 .lower-box .lower-box-item:last-child{margin-bottom: 0px;}
 
@@ -384,6 +387,7 @@ input,select,textarea{outline:medium none; resize: none;}
     html,body{ font-size: 80%;}
     .w-1500{ width: 1200px;}
     .news-info .lower-box a.btns{ padding: 0 3rem;}
+    .about-box4 .lower-box .center-block{  margin-left: 32%;}
 }
 @media screen and (max-width:1366px){
 }

view/page/about.html

@@ -72,7 +72,7 @@
                     <div class="swiper-wrapper">
                     {if isset($historyList) && count($historyList) > 0}
                         {foreach $historyList as $history}
-                        <div class="swiper-slide"><p><span>{$history.title}</span></p><i></i></div>
+                        <div class="swiper-slide"><p><span>{$history.title}</span><em>&nbsp;&nbsp;/&nbsp;&nbsp;年</em></p><i></i></div>
                         {/foreach}
                     {/if}
                     </div>
@@ -92,6 +92,7 @@
             <div class="swiper-btn">
                 <div class="swiper-button-prev"></div>
                 <div class="swiper-button-next"></div>
+                <span>点击前后翻看</span>
             </div>
         </div>
     </div>
@@ -106,8 +107,13 @@
 </div>
 
 <script>
+    var initialSlide = 0;
+    if($('.about-box4 .lower-box .center-block').length > 1){
+        initialSlide = 1
+    }
     var swiper = new Swiper('.about-box4 .swiper-container', {
         loop:true,
+        initialSlide:initialSlide,
         slidesPerView: 3,
         spaceBetween: 0,
         centeredSlides : true,
@@ -123,7 +129,7 @@
         },
         on:{
             init: function(){
-                $('.about-box4 .lower-box .center-block').hide().eq(0).show()
+                $('.about-box4 .lower-box .center-block').hide().eq(initialSlide).show()
             },
             transitionEnd: function(){
             },