renzhou
/
suzhou
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交

Browse Source
main
liudan 2 years ago
parent 03c401b115
commit 039fb81c4c
3 changed files with 136 additions and 35 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 116
      css/index.css
  2. 43
      index.html
  3. 8
      js/index.js

116
css/index.css
Unescape View File

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

43
index.html
Unescape View File

@ -151,30 +151,30 @@
<div class="section section1"> <div class="section section1">
<div class="index_banner"> <div class="index_banner">
<div class="item"> <div class="item">
<div class="items scaleBg" style="background-image: url(images/1t.png);"> <div class="items scaleBg items1" style="background-image: url(images/1t.png);">
<img src="/images/text1.png" alt="" class="img1"> <img src="/images/text1.png" alt="" class="image1">
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div class="items scaleBg" style="background-image: url(images/2t.png);"> <div class="items scaleBg item2" style="background-image: url(images/2t.png);">
<img src="/images/text2.png" alt="" class="img2"> <img src="/images/text2.png" alt="" class="image2">
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div class="items scaleBg" style="background-image: url(images/3t.png);"> <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> </div>
<div class="item"> <div class="item">
<div class="items scaleBg" style="background-image: url(images/4t.png);"> <div class="items scaleBg item4" style="background-image: url(images/4t.png);">
<img src="/images/text4.png" alt="" class="img4"> <img src="/images/text4.png" alt="" class="image4">
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div class="items scaleBg" style="background-image: url(images/5t.png);"> <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>
</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="col-xs-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3 news_left_container">
<div class="newsLeftContent"> <div class="newsLeftContent">
<h2>最新动态</h2> <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> <a href="http://sct.njrenzhou.cn/news/news01.html"><button>探索更多</button></a>
</div> </div>
</div> </div>
@ -301,19 +301,19 @@
<div class="section section5"> <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="container">
<div class="row news_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="col-xs-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 col-xxl-3 sliderContainer1">
<div class="companyLeftContent"> <div class="companyLeftContent">
<h2>上市企业</h2> <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> <a href="http://sct.njrenzhou.cn/service/service14.html"><button>探索更多</button></a>
</div> </div>
</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 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"> <div class="g1 scrollItem">
<ul> <ul>
@ -330,7 +330,15 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="mobileIcon">
</div>
</div> </div>
<div class="mobilebtn">
<a style="margin:auto" href="/service/service14.html"><button>探索更多</button></a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -394,6 +402,9 @@
</div> </div>
</div> </div>
</div>
<div class="section section6 fp-auto-height fp-section">
<div class="footer-bottom"> <div class="footer-bottom">
<div class="container"> <div class="container">
<div class="registerContainer"> <div class="registerContainer">
@ -413,12 +424,12 @@
</div> </div>
<!-- <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 col-xxl-8"> <!-- <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 col-xxl-8">
<div class="leftContent"> <div class="leftContent">
<img src="./images/ewm.jpg" alt=""> <img src="./images/ewm.jpg" alt="">
</div> </div>
<div class="contactUs"> <div class="contactUs">
©2015-2022 苏州创新投资集团有限公司 苏ICP备10219514号-1 苏公网安备 4401060342d234275号营业执照 ©2015-2022 苏州创新投资集团有限公司 苏ICP备10219514号-1 苏公网安备 4401060342d234275号营业执照
</div> </div>
</div> </div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 col-xxl-4 selectContainer"> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 col-xxl-4 selectContainer">
<select placeholder="相关链接" class="select"> <select placeholder="相关链接" class="select">

8
js/index.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save