main
liudan 2 years ago
parent 03c401b115
commit 039fb81c4c
  1. 116
      css/index.css
  2. 35
      index.html
  3. 8
      js/index.js

@ -61,19 +61,19 @@
height: 100%;
z-index: 0;
}
.img1{
.image1{
bottom: 18%;width: 60%;left: 20%;
}
.img2{
.image2{
bottom: 29%;width: 54%;left: 28%;
}
.img3{
.image3{
bottom: 27%;width: 37%;left: 11%;
}
.img4{
.image4{
bottom: 20%;width: 58%;left: 14%;
}
.img5{
.image5{
bottom: 38%;width: 50%;left: 25%;
}
.index_main .section1 .index_banner .items:after{
@ -254,6 +254,12 @@ a:active{
.section3{
position:relative;
}
.mobileIcon{
display: none;
}
.mobilebtn{
display: none;
}
.section3.active .second3Title{
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
@ -926,7 +932,30 @@ a:active{
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.mobileIcon{
display: block;
background-color: #ffffff;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
border-radius: 10px;
padding: 10px 0 0 0
}
.mobilebtn{
display: block;
text-align: center;
}
.mobilebtn button{
padding:4px 20px;
border: 1px solid #134BA1;
border-radius: 30px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #134BA1;
margin: 10px;
}
}
@media (max-width: 575px) {
.numberContent{
@ -1057,7 +1086,7 @@ a:active{
.newsLeftContent,.companyLeftContent{
display: flex;
align-items: center;
margin-top:10px;
margin-top:15px;
justify-content: space-between;
}
.newsLeftContent h2,.companyLeftContent h2{
@ -1080,6 +1109,17 @@ a:active{
font-weight: 400;
color: #134BA1;
}
.newsLeftContent p{
margin:0;
padding: 0;
font-size: 16px;
font-family: Arial;
font-weight: 400;
color: #999999;
line-height: 20px;
margin-top:0px;
margin-bottom: 0px;
}
.middleContent{
margin-top:10px;
}
@ -1089,12 +1129,13 @@ a:active{
.companyLeftContent p {
margin: 0;
padding: 0;
font-size: 20px;
font-size: 16px;
font-family: Arial;
font-weight: 400;
color: #FFFFFF;
margin-top: 20px;
margin-bottom: 20px;
margin-top: 0px;
line-height: 20px;
margin-bottom: 0px;
}
.footer {
/* margin-top: 32px; */
@ -1152,22 +1193,65 @@ a:active{
position: absolute;
top:25%;
}
.img1{
bottom: 18%;width: 100%;left: 0%;
.image1{
bottom: 10%;width: 100%;left: 0%;
}
.img2{
.image2{
bottom: 29%;width: 100%;left: 0%;
}
.img3{
.image3{
bottom: 27%;width: 100%;left: 0%;
}
.img4{
bottom: 20%;width: 100%;left: 0%;
.image4{
bottom: 40%;width: 100%;left: 0%;
}
.img5{
.image5{
bottom: 38%;width: 100%;left: 0%;
}
.category__item .imgcontainer{
height:200px;
}
.mobileIcon{
display: block;
background-color: #ffffff;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
border-radius: 10px;
padding: 10px 0 0 0
}
.mobileIcon img{
width:45%;
}
.sliderContainer {
overflow: hidden;
padding-top: 10px;
padding-bottom: 10px;
}
.mobilebtn{
display: block;
text-align: center;
}
.mobilebtn button{
padding:4px 20px;
border: 1px solid #134BA1;
border-radius: 30px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #134BA1;
margin: 10px;
}
.items1{
background-position: 67% !important;
}
.item2{
background-position: 22% !important;
background-size: 255% 100% !important;
}
.item4{
background-position: 40% !important;
background-size: 200% 100% !important;
}
}

@ -151,30 +151,30 @@
<div class="section section1">
<div class="index_banner">
<div class="item">
<div class="items scaleBg" style="background-image: url(images/1t.png);">
<img src="/images/text1.png" alt="" class="img1">
<div class="items scaleBg items1" style="background-image: url(images/1t.png);">
<img src="/images/text1.png" alt="" class="image1">
</div>
</div>
<div class="item">
<div class="items scaleBg" style="background-image: url(images/2t.png);">
<img src="/images/text2.png" alt="" class="img2">
<div class="items scaleBg item2" style="background-image: url(images/2t.png);">
<img src="/images/text2.png" alt="" class="image2">
</div>
</div>
<div class="item">
<div class="items scaleBg" style="background-image: url(images/3t.png);">
<img src="/images/text3.png" alt="" class="img3">
<img src="/images/text3.png" alt="" class="image3">
</div>
</div>
<div class="item">
<div class="items scaleBg" style="background-image: url(images/4t.png);">
<img src="/images/text4.png" alt="" class="img4">
<div class="items scaleBg item4" style="background-image: url(images/4t.png);">
<img src="/images/text4.png" alt="" class="image4">
</div>
</div>
<div class="item">
<div class="items scaleBg" style="background-image: url(images/5t.png);">
<img src="/images/text5.png" alt="" class="img5">
<img src="/images/text5.png" alt="" class="image5">
</div>
</div>
@ -280,7 +280,7 @@
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3 news_left_container">
<div class="newsLeftContent">
<h2>最新动态</h2>
<p class="d-none d-md-block">NEWS<br>INFORMATION</p>
<p>NEWS<br>INFORMATION</p>
<a href="http://sct.njrenzhou.cn/news/news01.html"><button>探索更多</button></a>
</div>
</div>
@ -301,19 +301,19 @@
<div class="section section5">
<!-- 上市企业 -->
<div class="conpanyBrand" style="width: 100%!important;">
<div class="conpanyBrand" style="width: 100%!important;margin-top:5%">
<div class="container">
<div class="row news_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 class="d-none d-md-block">LISTED<br>ENTERPRISES</p>
<p>LISTED<br>ENTERPRISES</p>
<a href="http://sct.njrenzhou.cn/service/service14.html"><button>探索更多</button></a>
</div>
</div>
<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;">
<div style="background:#ffffff;overflow: hidden;padding-top: 18px;" class="d-none d-md-block">
<div class="g1 scrollItem">
<ul>
@ -330,7 +330,15 @@
</ul>
</div>
</div>
<div class="mobileIcon">
</div>
</div>
<div class="mobilebtn">
<a style="margin:auto" href="/service/service14.html"><button>探索更多</button></a>
</div>
</div>
</div>
</div>
@ -394,6 +402,9 @@
</div>
</div>
</div>
<div class="section section6 fp-auto-height fp-section">
<div class="footer-bottom">
<div class="container">
<div class="registerContainer">

@ -309,10 +309,12 @@ $(function(){
let data = res.data.data
let firstList = data.slice(0,num);
let secondList = data.slice(num,num*2);
let thirdList = data.slice(num*2,num*3)
let thirdList = data.slice(num*2,num*3);
let forthList = data.slice(0,8)
let html=''
let html1=''
let html2=''
let html3=''
firstList.forEach((item,index)=>{
html+=`<li><img src="https://suzhou.njrenzhou.cn${item.thumb}"></li>`
})
@ -322,9 +324,13 @@ $(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}">`
})
$('.g1 ul').append(html)
$('.g2 ul').append(html1)
$('.g3 ul').append(html2)
$('.mobileIcon').append(html3)
groupSlide()
// console.log(firstList,secondList,thirdList)
}

Loading…
Cancel
Save