From 762aee97879123bfd30edf5a93e393f985a6e001 Mon Sep 17 00:00:00 2001 From: liudan <18634735655@163.com> Date: Sat, 31 Dec 2022 01:43:36 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/index.css | 60 +++++++++++++++++++++++++++++++++++---------------- index.html | 27 +++++++++++++---------- js/index.js | 49 +++++++++++++++++++++++++++++++++++------ 3 files changed, 100 insertions(+), 36 deletions(-) diff --git a/css/index.css b/css/index.css index 766844b..c19911a 100644 --- 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%; } } \ No newline at end of file diff --git a/index.html b/index.html index dca8e37..e0d8511 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@ @@ -281,8 +281,9 @@

最新动态

NEWS
INFORMATION

-
+ +
@@ -301,19 +302,22 @@
-
+
-
+

上市企业

LISTED
ENTERPRISES

- +
+
+ +
-
+
    @@ -330,14 +334,15 @@
-
- -
+
-
+
diff --git a/js/index.js b/js/index.js index 1350c68..6ff9367 100644 --- 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+=`
    • ` }) - forthList.forEach((item,index)=>{ - html3+=`` - }) + // forthList.forEach((item,index)=>{ + // html3+=`` + // }) + // 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() + } } }) }