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

17
about.html
View File

@ -66,13 +66,16 @@
</div>
</div>
<div class="swiper-pagination"></div>
<ul class="pull-item pull-item-02">
<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>
</ul>
<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" >

18
business-02.html
View File

@ -66,14 +66,16 @@
</div>
</div>
<div class="swiper-pagination"></div>
<ul class="pull-item pull-item-03">
<li><a href="business.html">矿产资源</a></li>
<li><a href="business.html">再生资源</a></li>
<li><a href="business.html">新材料研发</a></li>
<li><a href="business.html">矿物饲料</a></li>
<li><a href="business.html">其他业务</a></li>
<li class="cur"><a href="business-02.html">应用领域</a></li>
</ul>
<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>
<li><a href="business.html">矿物饲料</a></li>
<li><a href="business.html">其他业务</a></li>
<li class="cur"><a href="business-02.html">应用领域</a></li>
</ul>
</div>
</div>
<!-- 主体内容 -->
<div class="content w100" >

18
business.html
View File

@ -66,14 +66,16 @@
</div>
</div>
<div class="swiper-pagination"></div>
<ul class="pull-item pull-item-03">
<li class="cur"><a href="business.html">矿产资源</a></li>
<li><a href="business.html">再生资源</a></li>
<li><a href="business.html">新材料研发</a></li>
<li><a href="business.html">矿物饲料</a></li>
<li><a href="business.html">其他业务</a></li>
<li><a href="business-02.html">应用领域</a></li>
</ul>
<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>
<li><a href="business.html">矿物饲料</a></li>
<li><a href="business.html">其他业务</a></li>
<li><a href="business-02.html">应用领域</a></li>
</ul>
</div>
</div>
<!-- 主体内容 -->
<div class="content w100" >

10
contact.html
View File

@ -66,10 +66,12 @@
</div>
</div>
<div class="swiper-pagination"></div>
<ul class="pull-item">
<li class="cur"><a href="jion.html">联系方式</a></li>
<li><a href="join.html">加入我们</a></li>
</ul>
<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" >

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;

12
culture.html
View File

@ -66,11 +66,13 @@
</div>
</div>
<div class="swiper-pagination"></div>
<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 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" >

12
guide.html
View File

@ -66,11 +66,13 @@
</div>
</div>
<div class="swiper-pagination"></div>
<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 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" >

12
information.html
View File

@ -66,11 +66,13 @@
</div>
</div>
<div class="swiper-pagination"></div>
<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 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" >

12
inspect-detail.html
View File

@ -66,11 +66,13 @@
</div>
</div>
<div class="swiper-pagination"></div>
<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 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" >

12
inspect.html
View File

@ -66,11 +66,13 @@
</div>
</div>
<div class="swiper-pagination"></div>
<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 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" >

10
join.html
View File

@ -66,10 +66,12 @@
</div>
</div>
<div class="swiper-pagination"></div>
<ul class="pull-item">
<li><a href="contact.html">联系方式</a></li>
<li class="cur"><a href="join.html">加入我们</a></li>
</ul>
<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" >

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>

10
news-detail.html
View File

@ -66,10 +66,12 @@
</div>
</div>
<div class="swiper-pagination"></div>
<ul class="pull-item">
<li class="cur"><a href="news.html">公司新闻</a></li>
<li><a href="news.html">行业新闻</a></li>
</ul>
<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" >

10
news.html
View File

@ -66,10 +66,12 @@
</div>
</div>
<div class="swiper-pagination"></div>
<ul class="pull-item">
<li class="cur"><a href="news.html">公司新闻</a></li>
<li><a href="news.html">行业新闻</a></li>
</ul>
<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" >

12
results.html
View File

@ -66,11 +66,13 @@
</div>
</div>
<div class="swiper-pagination"></div>
<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 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" >

12
social.html
View File

@ -66,11 +66,13 @@
</div>
</div>
<div class="swiper-pagination"></div>
<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 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" >

12
team.html
View File

@ -66,11 +66,13 @@
</div>
</div>
<div class="swiper-pagination"></div>
<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 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" >