提交

2 years ago · 762aee9787
parent 039fb81c4c
commit 762aee9787
3 changed files with 100 additions and 36 deletions
--- a/css/index.css
+++ b/css/index.css
@ -23,7 +23,7 @@
 .fl {
    float: left;
 }
-
+.g1,.g2,.g3,.g4{width:100%; height:116px; margin:0 5px 5px 0}
 .fr {
    float: right;
 }
@ -497,13 +497,14 @@ a:active{
    position: absolute;
 }
 .index_main .section4{
+    position: relative;
    background: url('../images/首页-第三页bg.jpg') center top no-repeat;
 }
-.news_Container{
+.news_Container,.conpanyBrand_Container{
    display: flex;
    align-items: center;
 }
-.news_Container button{
+.news_Container button,.conpanyBrand_Container button{
    background-color: #ffffff;
 }
 /*首页新闻动态*/
@ -529,11 +530,11 @@ a:active{
    margin-top:24px;
    margin-bottom: 125px;
 }
-.newsLeftContent button{
+.newsLeftContent button,.moreBtn button{
    padding:10px 45px;
    border: 1px solid #134BA1;
    border-radius: 30px;
-
+   
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
@ -646,6 +647,7 @@ a:active{
 .index_main .section5{
 	background: url('../images/首页-第四页bg.jpg') center top no-repeat;
    background-size: 100% 100%;
+    position: relative;
 }
 .section5.active  .companyLeftContent,.section4.active .newsLeftContent,.section5.active  .sliderContainer1 { 
    -webkit-animation-duration: 1.4s; 
@ -1084,10 +1086,10 @@ a:active{
        display: none;
    }
    .newsLeftContent,.companyLeftContent{
-        display: flex;
+        /* display: flex;
        align-items: center;
        margin-top:15px;
-        justify-content: space-between;
+        justify-content: space-between; */
    }
    .newsLeftContent h2,.companyLeftContent h2{
        font-size: 18px;
@ -1095,15 +1097,24 @@ a:active{
        font-weight: bold;
        color: #124AA0;
        padding-bottom:1px;
+        border:none;
    }
    .companyLeftContent h2{
        color:#ffffff
    }
-    .newsLeftContent button,.companyLeftContent button{
+    .moreBtn{
+        position: absolute;
+        transform: translateX(-50%);
+        bottom: 5%;
+        left: 50%;
+        z-index:9;
+        width: fit-content;
+    }
+    .newsLeftContent button,.moreBtn button,.companyLeftContent button{
        padding:4px 20px;
        border: 1px solid #134BA1;
        border-radius: 30px;
-    
+        
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
@ -1124,7 +1135,7 @@ a:active{
        margin-top:10px;
    }
    .companyLeftContent{
-        margin-bottom: 20px;
+        margin-bottom: 10px;
    }
    .companyLeftContent p {
        margin: 0;
@ -1200,13 +1211,17 @@ a:active{
        bottom: 29%;width: 100%;left: 0%;
    }
    .image3{
-        bottom: 27%;width: 100%;left: 0%;
+        bottom: 27%;
+        width: 90%;
+        left: 5%;
    }
    .image4{
-        bottom: 40%;width: 100%;left: 0%;
+        bottom: 40%;
+        width: 90%;
+        left: 5%;
    }
    .image5{
-        bottom: 38%;width: 100%;left: 0%;
+        bottom: 38%;width: 90%;left: 5%;
    }
    .category__item .imgcontainer{
        height:200px;
@ -1244,14 +1259,23 @@ a:active{
        margin: 10px;
    }
    .items1{
-        background-position: 67% !important;
+        
+        background-size: auto 100%;
+        background-position: 77% !important;
    }
    .item2{
-        background-position: 22% !important;
-        background-size: 255% 100% !important;
+        background-position: 23% !important;
+        background-size: auto 100% !important;
    }
    .item4{
-        background-position: 40% !important; 
-        background-size: 200% 100% !important;
+        background-position: 40% !important;
+        background-size: auto 100% !important;
+    }
+    .g1,.g2,.g3,.g4{width:100%; height:70px; margin:0 5px 5px 0}
+    
+}
+@media (max-height: 667px) {
+    .news_Container{
+        margin-top:15%;
    }
 }
--- a/index.html
+++ b/index.html
@ -21,7 +21,7 @@
 	<link rel="stylesheet" href="css/index.css">
    <style>
        /* float:left;  */
-        .g1,.g2,.g3,.g4{width:100%; height:116px; margin:0 5px 5px 0}
+        
    </style>
 </head>
 
@ -281,8 +281,9 @@
                        <div class="newsLeftContent">
                            <h2>最新动态</h2>
                            <p>NEWS<br>INFORMATION</p>
-                            <a href="http://sct.njrenzhou.cn/news/news01.html"><button>探索更多</button></a>
                        </div>
+                        <a href="http://sct.njrenzhou.cn/news/news01.html" class="moreBtn"><button>探索更多</button></a>
+
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-9 col-xl-9 col-xxl-9 news_middle_container">
                        <div class="titleContent">
@ -301,19 +302,22 @@
        <div class="section section5">

            <!-- 上市企业 -->
-            <div class="conpanyBrand" style="width: 100%!important;margin-top:5%">
+            <div class="conpanyBrand" style="width: 100%!important;">
                <div class="container">
-                    <div class="row news_Container"> 
+                    <div class="row conpanyBrand_Container"> 
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3 sliderContainer1">
                            <div class="companyLeftContent">
                                <h2>上市企业</h2>
                                <p>LISTED<br>ENTERPRISES</p>
-                                <a href="http://sct.njrenzhou.cn/service/service14.html"><button>探索更多</button></a>
+                                <!-- <a href="http://sct.njrenzhou.cn/"><button>探索更多</button></a> -->
                                
                            </div>
+
                        </div>
+                        <a href="http://sct.njrenzhou.cn/service/service14.html" class="moreBtn"><button>探索更多</button></a>
+
                        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-9 col-xl-9 col-xxl-9 sliderContainer" style="background-color: rgba(0,0,0,0.4);border-radius:10px;">
-                            <div  style="background:#ffffff;overflow: hidden;padding-top: 18px;" class="d-none d-md-block">
+                            <div  style="background:#ffffff;overflow: hidden;padding-top: 18px;">
                                <div class="g1 scrollItem">
                                    <ul>
                                    
@ -330,14 +334,15 @@
                                    </ul>
                                </div>
                            </div>
-                            <div class="mobileIcon">
-
-                            </div>
+                            <!-- <div class="mobileIcon">
+                                <div class="row mobileIcon__slider owl-carousel">
+                                </div>
+                            </div> -->
                        </div>
-                        <div class="mobilebtn">
+                        <!-- <div class="mobilebtn">
                            <a style="margin:auto" href="/service/service14.html"><button>探索更多</button></a>

-                        </div>
+                        </div> -->
                        
                    </div>
                </div>
--- a/js/index.js
+++ b/js/index.js
@ -184,6 +184,32 @@ $(function(){
      addcss:true
    });
  }
+  function groupSlide1(){
+    imgScroll.rolling({
+      name:'g1',
+      width:'119px',
+      height:'70px',
+      direction:'left',
+      speed:10,
+      addcss:true
+    });
+    imgScroll.rolling({
+      name:'g2',
+      width:'119px',
+      height:'70px',
+      direction:'right',
+      speed:10,
+      addcss:true
+    });
+    imgScroll.rolling({
+      name:'g3',
+      width:'119px',
+      height:'70px',
+      direction:'left',
+      speed:10,
+      addcss:true
+    });
+  }
  
  //全屏滚动
  $('#index_main').fullpage({
@ -310,7 +336,7 @@ $(function(){
        let firstList = data.slice(0,num);
        let secondList = data.slice(num,num*2);
        let thirdList = data.slice(num*2,num*3);
-        let forthList = data.slice(0,8)
+        let forthList = data
        let html=''
        let html1=''
        let html2=''
@ -324,15 +350,24 @@ $(function(){
        thirdList.forEach((item,index)=>{
          html2+=`<li><img src="https://suzhou.njrenzhou.cn${item.thumb}"></li>`
        })
-        forthList.forEach((item,index)=>{
-          html3+=`<img src="https://suzhou.njrenzhou.cn${item.thumb}">`
-        })
+        // forthList.forEach((item,index)=>{
+        //   html3+=`<img src="https://suzhou.njrenzhou.cn${item.thumb}">`
+        // })
+        // if((forthList.length)%6)
+        $('.mobileIcon').css('width',(Math.ceil(forthList.length)/6)*100+'%')
        $('.g1 ul').append(html)
        $('.g2 ul').append(html1)
        $('.g3 ul').append(html2)
-        $('.mobileIcon').append(html3)
-        groupSlide()
-        // console.log(firstList,secondList,thirdList)
+        // $('.mobileIcon').append(html3)
+        
+        // 
+        console.log($(window).width())
+        if($(window).width()<=767){
+          console.log("ppp")
+          groupSlide1()
+        }else{
+          groupSlide()
+        }
      }
    })
  }