Lee
/
snkcgw
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

手机端分类导航调整

master
Lee1203 2022-02-25 22:04:19 +08:00
parent 61434c0e78
commit 207b35303c
19 changed files with 183 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
about.html
View File

@ -66,14 +66,17 @@
</div>
</div>
<div class="swiper-pagination"></div>
<ul class="pull-item pull-item-02">
<div class="pull-item-all">
<ul class="pull-item">
<li class="abstract-btn cur"><a href="javaScript:void(0);" rel="nofollow">企业简介</a></li>
<li class="speech-btn"><a href="javaScript:void(0);" rel="nofollow">领导致辞</a></li>
<li class="team-btn"><a href="javaScript:void(0);" rel="nofollow">管理团队</a></li>
<li class="organization-btn"><a href="javaScript:void(0);" rel="nofollow">组织机构</a></li>
<li class="memorabilia-btn"><a href="javaScript:void(0);" rel="nofollow">大事记</a></li>
<li class="speech-btn"><a href="javaScript:void(0);" rel="nofollow">企业文化</a></li>
</ul>
</div>
</div>
<!-- 主体内容 -->
<div class="content w100" >
<!-- 企业简介 -->

4
business-02.html
View File

@ -66,7 +66,8 @@
</div>
</div>
<div class="swiper-pagination"></div>
<ul class="pull-item pull-item-03">
<div class="pull-item-all">
<ul class="pull-item">
<li><a href="business.html">矿产资源</a></li>
<li><a href="business.html">再生资源</a></li>
<li><a href="business.html">新材料研发</a></li>
@ -75,6 +76,7 @@
<li class="cur"><a href="business-02.html">应用领域</a></li>
</ul>
</div>
</div>
<!-- 主体内容 -->
<div class="content w100" >
<div class="news-bg w1690">

4
business.html
View File

@ -66,7 +66,8 @@
</div>
</div>
<div class="swiper-pagination"></div>
<ul class="pull-item pull-item-03">
<div class="pull-item-all">
<ul class="pull-item">
<li class="cur"><a href="business.html">矿产资源</a></li>
<li><a href="business.html">再生资源</a></li>
<li><a href="business.html">新材料研发</a></li>
@ -75,6 +76,7 @@
<li><a href="business-02.html">应用领域</a></li>
</ul>
</div>
</div>
<!-- 主体内容 -->
<div class="content w100" >
<div class="news-bg w1690">

2
contact.html
View File

@ -66,11 +66,13 @@
</div>
</div>
<div class="swiper-pagination"></div>
<div class="pull-item-all">
<ul class="pull-item">
<li class="cur"><a href="jion.html">联系方式</a></li>
<li><a href="join.html">加入我们</a></li>
</ul>
</div>
</div>
<!-- 主体内容 -->
<div class="content w100" >
<div class="news-bg w1690">

119
css/style.css
View File

@ -263,7 +263,7 @@
.index-news-left span>em{
width: 53px;
height: 11px;
background-image: url(../images/news-more.png);
background-image: url(../imgs/news-more.png);
background-size: 100%;
}
.index-news-left:hover .left-title{
@ -285,7 +285,7 @@
height: 159px;
padding: 18px 15px;
background-color: #FFFFFF;
box-shadow: 0 0 8px rgba(201,201,201,0.3);
box-shadow: 0 0 12px rgba(160,160,160,0.4);
}
.index-news-first>a{
display: flex;
@ -507,7 +507,7 @@
.index-about{
margin-top: 50px;
padding: 50px;
background-image: url(../images/about-bg.jpg);
background-image: url(../imgs/about-bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
@ -611,7 +611,7 @@
/* 尾部 */
.footer{
background-image: url(../images/foot-bg.jpg);
background-image: url(../imgs/foot-bg.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
@ -759,18 +759,21 @@
background-color: #FFFFFF;
margin: 0 auto;
}
.pull-item{
display: flex;
justify-content: center;
.pull-item-all{
width: 100%;
height: 58px;
background-color: rgba(0,0,0,0.4);
position: absolute;
bottom: 0;
left: 0;
z-index: 99;
}
.pull-item.pull-item-fixed{
.pull-item{
display: flex;
justify-content: center;
width: auto;
height: 58px;
background-color: rgba(0,0,0,0.4);
}
.pull-item-all.pull-item-fixed{
width: 1690px;
position: fixed;
top: 90px;
@ -835,7 +838,7 @@
/* 领导致辞 */
.speech-bg{
padding: 75px 0;
background-image: url(../images/speech-bg.jpg);
background-image: url(../imgs/speech-bg.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
@ -938,6 +941,8 @@
}
.team-list .team-item span{
display: block;
width: 100%;
height: 27px;
font-size: 18px;
line-height: 1.5;
margin: 15px 0 10px;
@ -950,7 +955,7 @@
/* 组织机构 */
.organization-bg{
background-image: url(../images/organization-bg.jpg);
background-image: url(../imgs/organization-bg.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
@ -967,7 +972,7 @@
/* 大事记 */
.memorabilia-bg{
background-image: url(../images/memorabilia-bg.jpg);
background-image: url(../imgs/memorabilia-bg.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
@ -1060,7 +1065,7 @@
background-color: #de0011;
margin-top: -25.5px;
left: 0;
background-image: url(../images/join-arrow-left.png);
background-image: url(../imgs/join-arrow-left.png);
background-size: 20px 22px;
}
.memorabili-swiper .swiper-button-next{
@ -1070,7 +1075,7 @@
background-color: #de0011;
margin-top: -25.5px;
right: 0;
background-image: url(../images/join-arrow-right.png);
background-image: url(../imgs/join-arrow-right.png);
background-size: 20px 22px;
}
.memorabili-swiper .swiper-button-disabled{
@ -1093,7 +1098,7 @@
/* 新闻动态 */
.news-bg{
background-image: url(../images/news-bg.jpg);
background-image: url(../imgs/news-bg.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
@ -1147,7 +1152,7 @@
.news-txt span>em{
width: 53px;
height: 11px;
background-image: url(../images/news-more.png);
background-image: url(../imgs/news-more.png);
background-size: 100%;
}
.news-list li:hover img{
@ -1162,7 +1167,7 @@
transition: all .6s;
}
.news-list li:hover .news-txt span>em{
background-image: url(../images/news-more2.png);
background-image: url(../imgs/news-more2.png);
transition: all .6s;
}
@ -1361,7 +1366,7 @@
width: 58px;
height: 48px;
border: 1px solid #e7626c;
background-image: url(../images/arrow-left.png);
background-image: url(../imgs/arrow-left.png);
background-repeat: no-repeat;
background-position: center;
background-size: 21px 20px;
@ -1374,7 +1379,7 @@
width: 58px;
height: 48px;
border: 1px solid #e7626c;
background-image: url(../images/arrow-right.png);
background-image: url(../imgs/arrow-right.png);
background-repeat: no-repeat;
background-position: center;
background-size: 21px 20px;
@ -1389,11 +1394,11 @@
}
.preview-arrow .preview-arrow-prev:hover{
background-color: #de0011;
background-image: url(../images/arrow-left2.png);
background-image: url(../imgs/arrow-left2.png);
}
.preview-arrow .preview-arrow-next:hover{
background-color: #de0011;
background-image: url(../images/arrow-right2.png);
background-image: url(../imgs/arrow-right2.png);
}
.preview-arrow .swiper-button-disabled{
@ -1406,11 +1411,11 @@
}
.preview-arrow .preview-arrow-prev.swiper-button-disabled:hover{
background-color: rgba(0,0,0,0);
background-image: url(../images/arrow-left.png);
background-image: url(../imgs/arrow-left.png);
}
.preview-arrow .preview-arrow-next.swiper-button-disabled:hover{
background-color: rgba(0,0,0,0);
background-image: url(../images/arrow-right.png);
background-image: url(../imgs/arrow-right.png);
}
@ -1465,7 +1470,7 @@
display: block;
width: 16px;
height: 10px;
background-image: url(../images/area-more.png);
background-image: url(../imgs/area-more.png);
background-size: 16px 10px;
margin-left: 6px;
}
@ -1563,7 +1568,7 @@
.inspect-list li:hover .inspect-txt>span>em{
width: 53px;
height: 11px;
background-image: url(../images/news-more.png);
background-image: url(../imgs/news-more.png);
background-size: 100%;
}
@ -2019,7 +2024,7 @@ textarea::-webkit-input-placeholder {
.w1690{
width: 94%;
}
.pull-item.pull-item-fixed{
.pull-item-all.pull-item-fixed{
width: 94%;
}
.logo h1{
@ -2335,15 +2340,6 @@ textarea::-webkit-input-placeholder {
padding: 0 20px;
font-size: 15px;
}
.pull-item-02 li>a{
padding: 0 15px;
font-size: 14px;
}
.pull-item-03 li>a{
padding: 0 12px;
font-size: 14px;
text-align: center;
}
.banner-swiper{
width: 100%;
height: 400px;
@ -2718,7 +2714,34 @@ textarea::-webkit-input-placeholder {
.pull-title span{
font-size: 14px;
}
.pull-item.pull-item-fixed{
.pull-item-all{
width: 100%;
height: 58px;
overflow-y: hidden;
position: absolute;
left: 0;
bottom: 0;
}
.pull-item{
display: flex;
justify-content: center;
height: 58px;
overflow-x: auto;
overflow-y: hidden;
}
.pull-item>li{
display: block;
width: 90px;
float: left;
}
.pull-item>li a{
line-height: 58px;
padding: 0;
text-align: center;
}
.pull-item-all.pull-item-fixed{
width: 100%;
top: 70px;
}
.news-list li,
@ -3005,31 +3028,11 @@ textarea::-webkit-input-placeholder {
}
}
@media screen and (max-width:414px){
.pull-item.pull-item-fixed{
.pull-item-all.pull-item-fixed{
width: 100%;
}
.pull-item-02 li>a{
padding: 0 8px;
font-size: 14px;
}
.pull-item-03 li>a{
padding: 7px 12px;
line-height: 22px;
font-size: 15px;
text-align: center;
}
}
@media screen and (max-width:350px){
.pull-item-02 li>a{
padding: 0 6px;
font-size: 13px;
}
.pull-item-03 li>a{
padding: 9px 8px;
line-height: 20px;
font-size: 14px;
text-align: center;
}
.pase-size a{
width: 22px;
line-height: 22px;

2
culture.html
View File

@ -66,12 +66,14 @@
</div>
</div>
<div class="swiper-pagination"></div>
<div class="pull-item-all">
<ul class="pull-item">
<li class="cur"><a href="culture.html">企业理念</a></li>
<li><a href="team.html">团队风采</a></li>
<li><a href="social.html">社会责任</a></li>
</ul>
</div>
</div>
<!-- 主体内容 -->
<div class="content w100" >
<div class="news-bg w1690">

2
guide.html
View File

@ -66,12 +66,14 @@
</div>
</div>
<div class="swiper-pagination"></div>
<div class="pull-item-all">
<ul class="pull-item">
<li><a href="information.html">基本信息</a></li>
<li><a href="results.html">经营成果</a></li>
<li class="cur"><a href="guide.html">公开指南</a></li>
</ul>
</div>
</div>
<!-- 主体内容 -->
<div class="content w100" >
<div class="news-bg w1690">

2
information.html
View File

@ -66,12 +66,14 @@
</div>
</div>
<div class="swiper-pagination"></div>
<div class="pull-item-all">
<ul class="pull-item">
<li class="cur"><a href="information.html">基本信息</a></li>
<li><a href="results.html">经营成果</a></li>
<li><a href="guide.html">公开指南</a></li>
</ul>
</div>
</div>
<!-- 主体内容 -->
<div class="content w100" >
<div class="news-bg w1690">

2
inspect-detail.html
View File

@ -66,12 +66,14 @@
</div>
</div>
<div class="swiper-pagination"></div>
<div class="pull-item-all">
<ul class="pull-item">
<li class="cur"><a href="inspect.html">党群工作</a></li>
<li><a href="inspect.html">纪检监察</a></li>
<li><a href="inspect.html">学习园地</a></li>
</ul>
</div>
</div>
<!-- 主体内容 -->
<div class="content w100" >
<div class="news-bg news-detail-bg w1690">

2
inspect.html
View File

@ -66,12 +66,14 @@
</div>
</div>
<div class="swiper-pagination"></div>
<div class="pull-item-all">
<ul class="pull-item">
<li class="cur"><a href="inspect.html">党群工作</a></li>
<li><a href="inspect.html">纪检监察</a></li>
<li><a href="inspect.html">学习园地</a></li>
</ul>
</div>
</div>
<!-- 主体内容 -->
<div class="content w100" >
<div class="news-bg w1690">

2
join.html
View File

@ -66,11 +66,13 @@
</div>
</div>
<div class="swiper-pagination"></div>
<div class="pull-item-all">
<ul class="pull-item">
<li><a href="contact.html">联系方式</a></li>
<li class="cur"><a href="join.html">加入我们</a></li>
</ul>
</div>
</div>
<!-- 主体内容 -->
<div class="content w100" >
<div class="news-bg w1690">

12
js/about.js
View File

@ -1,5 +1,5 @@
if(screen.width <= 980){
let navTop = $(".pull-item").offset().top-70;
let navTop = $(".pull-item-all").offset().top-70;
let abstractTop = $(".abstract-bg").offset().top-129;
let speechTop = $(".speech-bg").offset().top-129;
let teamTop = $(".team-bg").offset().top-129;
@ -8,9 +8,9 @@ if(screen.width <= 980){
$(window).bind("scroll",function(){
let topScroll=$(this).scrollTop();//当前窗口的滚动距离
if(topScroll > navTop){
$(".pull-item").addClass("pull-item-fixed")
$(".pull-item-all").addClass("pull-item-fixed")
}else{
$(".pull-item").removeClass("pull-item-fixed")
$(".pull-item-all").removeClass("pull-item-fixed")
}
if(topScroll > abstractTop){
@ -35,7 +35,7 @@ if(screen.width <= 980){
}
});
}else{
let navTop = $(".pull-item").offset().top-90;
let navTop = $(".pull-item-all").offset().top-90;
let abstractTop = $(".abstract-bg").offset().top-149;
let speechTop = $(".speech-bg").offset().top-149;
let teamTop = $(".team-bg").offset().top-149;
@ -44,9 +44,9 @@ if(screen.width <= 980){
$(window).bind("scroll",function(){
let topScroll=$(this).scrollTop();//当前窗口的滚动距离
if(topScroll > navTop){
$(".pull-item").addClass("pull-item-fixed")
$(".pull-item-all").addClass("pull-item-fixed")
}else{
$(".pull-item").removeClass("pull-item-fixed")
$(".pull-item-all").removeClass("pull-item-fixed")
}
if(topScroll > abstractTop){
$(".pull-item li").removeClass("cur");

7
js/javascript.js
View File

@ -213,7 +213,12 @@ jQuery(function($){
});
}
// 获取nav宽度
if(screen.width <= 780){
var liNumber = $(".pull-item>li").length;
var ulWidth = liNumber*90 + 'px';
$('.pull-item').css('min-width',ulWidth)
}
// 团队风采滚动
if(screen.width <= 860){

9
new_file.html
View File

@ -1,9 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>

2
news-detail.html
View File

@ -66,11 +66,13 @@
</div>
</div>
<div class="swiper-pagination"></div>
<div class="pull-item-all">
<ul class="pull-item">
<li class="cur"><a href="news.html">公司新闻</a></li>
<li><a href="news.html">行业新闻</a></li>
</ul>
</div>
</div>
<!-- 主体内容 -->
<div class="content w100" >
<div class="news-bg news-detail-bg w1690">

2
news.html
View File

@ -66,11 +66,13 @@
</div>
</div>
<div class="swiper-pagination"></div>
<div class="pull-item-all">
<ul class="pull-item">
<li class="cur"><a href="news.html">公司新闻</a></li>
<li><a href="news.html">行业新闻</a></li>
</ul>
</div>
</div>
<!-- 主体内容 -->
<div class="content w100" >
<div class="news-bg w1690">

2
results.html
View File

@ -66,12 +66,14 @@
</div>
</div>
<div class="swiper-pagination"></div>
<div class="pull-item-all">
<ul class="pull-item">
<li><a href="information.html">基本信息</a></li>
<li class="cur"><a href="results.html">经营成果</a></li>
<li><a href="guide.html">公开指南</a></li>
</ul>
</div>
</div>
<!-- 主体内容 -->
<div class="content w100" >
<div class="news-bg w1690">

2
social.html
View File

@ -66,12 +66,14 @@
</div>
</div>
<div class="swiper-pagination"></div>
<div class="pull-item-all">
<ul class="pull-item">
<li><a href="culture.html">企业理念</a></li>
<li><a href="team.html">团队风采</a></li>
<li class="cur"><a href="social.html">社会责任</a></li>
</ul>
</div>
</div>
<!-- 主体内容 -->
<div class="content w100" >
<div class="news-bg w1690">

2
team.html
View File

@ -66,12 +66,14 @@
</div>
</div>
<div class="swiper-pagination"></div>
<div class="pull-item-all">
<ul class="pull-item">
<li><a href="culture.html">企业理念</a></li>
<li class="cur"><a href="team.html">团队风采</a></li>
<li><a href="social.html">社会责任</a></li>
</ul>
</div>
</div>
<!-- 主体内容 -->
<div class="content w100" >
<div class="news-bg w1690">