topnuomi
/
zxf
mirror of https://gitee.com/topnuomi/zxf
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

修改页面样式

This commit is contained in:
TOP糯米 2023-10-09 17:23:49 +08:00
parent 396c18428c
commit 0c4fac833f
12 changed files with 196 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
about.html
View File

@ -19,7 +19,7 @@
</head> </head>
<body> <body>
<div class="header"> <div class="header style1">
<div class="main main-wrap"> <div class="main main-wrap">
<div class="logo"> <div class="logo">
<a href="" target="_blank"> <a href="" target="_blank">

14
business.html
View File

@ -19,7 +19,7 @@
</head> </head>
<body> <body>
<div class="header"> <div class="header style1">
<div class="main main-wrap"> <div class="main main-wrap">
<div class="logo"> <div class="logo">
<a href="" target="_blank"> <a href="" target="_blank">
@ -45,12 +45,12 @@
</div> </div>
<div class="section main-wrap business-nav"> <div class="section main-wrap business-nav">
<ul class="nav"> <ul class="nav">
<li><a class="active" href="">综合企业服务赋能</a></li> <li><a class="active" href="#g1">综合企业服务赋能</a></li>
<li><a href="">个人债务管理咨询</a></li> <li><a href="#g2">个人债务管理咨询</a></li>
<li><a href="">融资咨询</a></li> <li><a href="#g3">融资咨询</a></li>
</ul> </ul>
</div> </div>
<div class="section main-wrap business-cont s1"> <div class="section main-wrap business-cont s1" id="g1">
<div class="title"> <div class="title">
<h2>综合企业服务赋能</h2> <h2>综合企业服务赋能</h2>
</div> </div>
@ -117,7 +117,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="section main-wrap business-cont s2"> <div class="section main-wrap business-cont s2" id="g2">
<div class="title"> <div class="title">
<h2>债务管理咨询</h2> <h2>债务管理咨询</h2>
</div> </div>
@ -215,7 +215,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="section full-wrap business-cont s3"> <div class="section full-wrap business-cont s3" id="g3">
<div class="title"> <div class="title">
<h2>融资咨询</h2> <h2>融资咨询</h2>
</div> </div>

2
contact.html
View File

@ -19,7 +19,7 @@
</head> </head>
<body> <body>
<div class="header"> <div class="header style1">
<div class="main main-wrap"> <div class="main main-wrap">
<div class="logo"> <div class="logo">
<a href="" target="_blank"> <a href="" target="_blank">

3
css/reset.css
View File

@ -3,13 +3,10 @@
margin: 0; margin: 0;
-webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:rgba(0,0,0,0);
} }
ul { ul {
list-style: none; list-style: none;
} }
a { a {
color: unset; color: unset;
text-decoration: none; text-decoration: none;
outline: none;
} }

46
css/responsive.css
View File

@ -9,6 +9,26 @@
width: 92%; width: 92%;
max-width: 500px; max-width: 500px;
} }
.header.style1 .menu .link {
color: #FFFFFF;
}
.header.style1 .menu .link.active {
color: #FFFFFF;
font-weight: bold;
}
.header.style1 .menu .link:hover {
color: #FFFFFF;
}
.header.style2 .menu .link {
color: #FFFFFF;
}
.header.style2 .menu .link.active {
color: #FFFFFF;
font-weight: bold;
}
.header.style2 .menu .link:hover {
color: #FFFFFF;
}
.header .logo { .header .logo {
font-size: 0; font-size: 0;
} }
@ -19,7 +39,7 @@
height: 45px; height: 45px;
} }
.header .menu .menu-group { .header .menu .menu-group {
z-index: 20; z-index: 10;
display: none; display: none;
position: fixed; position: fixed;
left: 0; left: 0;
@ -28,16 +48,18 @@
animation-duration: 0.2s; animation-duration: 0.2s;
} }
.header .menu .menu-mask { .header .menu .menu-mask {
z-index: 10; z-index: 5;
display: none; display: none;
position: fixed; position: fixed;
top: 45px; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
animation-duration: 0.35s; animation-duration: 0.35s;
} }
.header .menu .menu-btn { .header .menu .menu-btn {
z-index: 10;
position: relative;
font-size: 0; font-size: 0;
} }
.header .menu .menu-btn .btn-img { .header .menu .menu-btn .btn-img {
@ -54,10 +76,6 @@
border-bottom: 2px solid #D02121; border-bottom: 2px solid #D02121;
padding: 15px 0; padding: 15px 0;
} }
.header .menu .item .link.active,
.header .menu .item .link:hover {
font-weight: normal;
}
.header .menu .item:first-child { .header .menu .item:first-child {
padding-top: 25px; padding-top: 25px;
} }
@ -122,7 +140,7 @@
height: auto; height: auto;
margin-top: 10px; margin-top: 10px;
padding: 20px; padding: 20px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
} }
.section.idx-culture .title { .section.idx-culture .title {
margin-bottom: 14px; margin-bottom: 14px;
@ -206,7 +224,7 @@
.section.contact-map .cm-desc { .section.contact-map .cm-desc {
width: 339px; width: 339px;
border: 1px solid #DDDDDD; border: 1px solid #DDDDDD;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
} }
.section.contact-map .cm-desc .logo { .section.contact-map .cm-desc .logo {
width: 127px; width: 127px;
@ -353,8 +371,8 @@
color: #666666; color: #666666;
font-size: 14px; font-size: 14px;
line-height: 30px; line-height: 30px;
background-color: #F3F3F3; padding: 2px 12px;
padding: 2px 5px; box-sizing: border-box;
} }
.section.business-cont .title { .section.business-cont .title {
font-size: 0px; font-size: 0px;
@ -439,7 +457,7 @@
width: 100%; width: 100%;
height: auto; height: auto;
padding: 20px 0; padding: 20px 0;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
border-radius: 10px; border-radius: 10px;
} }
.s-content.g2 li { .s-content.g2 li {
@ -450,7 +468,7 @@
width: 100%; width: 100%;
height: auto; height: auto;
border: 1px solid #DDDDDD; border: 1px solid #DDDDDD;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
} }
.s-content.g2 .icon-cont { .s-content.g2 .icon-cont {
height: auto; height: auto;
@ -486,7 +504,7 @@
width: 100%; width: 100%;
height: auto; height: auto;
border: 1px solid #DDDDDD; border: 1px solid #DDDDDD;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
} }
.s-content.g3 .desc, .s-content.g3 .desc,
.s-content.g4 .desc { .s-content.g4 .desc {

63
css/responsive.less
View File

@ -19,6 +19,40 @@
max-width: 500px; max-width: 500px;
} }
.header.style1 {
.menu {
.link {
color: #FFFFFF;
}
.link.active {
color: #FFFFFF;
font-weight: bold;
}
.link:hover {
color: #FFFFFF;
}
}
}
.header.style2 {
.menu {
.link {
color: #FFFFFF;
}
.link.active {
color: #FFFFFF;
font-weight: bold;
}
.link:hover {
color: #FFFFFF;
}
}
}
.header { .header {
.logo { .logo {
font-size: 0; font-size: 0;
@ -34,7 +68,7 @@
.menu { .menu {
.menu-group { .menu-group {
z-index: 20; z-index: 10;
display: none; display: none;
position: fixed; position: fixed;
left: 0; left: 0;
@ -44,18 +78,19 @@
} }
.menu-mask { .menu-mask {
z-index: 10; z-index: 5;
display: none; display: none;
position: fixed; position: fixed;
top: 45px; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
animation-duration: 0.35s; animation-duration: 0.35s;
// background-image: url('../images/transparent-bg.png');
} }
.menu-btn { .menu-btn {
z-index: 10;
position: relative;
font-size: 0; font-size: 0;
.btn-img { .btn-img {
@ -74,11 +109,6 @@
border-bottom: 2px solid #D02121; border-bottom: 2px solid #D02121;
padding: 15px 0; padding: 15px 0;
} }
.link.active,
.link:hover {
font-weight: normal;
}
} }
.item:first-child { .item:first-child {
@ -172,7 +202,7 @@
height: auto; height: auto;
margin-top: 10px; margin-top: 10px;
padding: 20px; padding: 20px;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.35); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
} }
.title { .title {
@ -279,7 +309,7 @@
.cm-desc { .cm-desc {
width: 339px; width: 339px;
border: 1px solid #DDDDDD; border: 1px solid #DDDDDD;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
.logo { .logo {
width: 127px; width: 127px;
@ -390,6 +420,7 @@
.text-con { .text-con {
padding: 9px 10px; padding: 9px 10px;
p { p {
height: 16px; height: 16px;
font-size: @mt; font-size: @mt;
@ -473,8 +504,8 @@
color: #666666; color: #666666;
font-size: @st; font-size: @st;
line-height: 30px; line-height: 30px;
background-color: #F3F3F3; padding: 2px 12px;
padding: 2px 5px; box-sizing: border-box;
} }
} }
} }
@ -584,7 +615,7 @@
width: 100%; width: 100%;
height: auto; height: auto;
padding: 20px 0; padding: 20px 0;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
border-radius: 10px; border-radius: 10px;
} }
} }
@ -599,7 +630,7 @@
width: 100%; width: 100%;
height: auto; height: auto;
border: 1px solid #DDDDDD; border: 1px solid #DDDDDD;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
} }
.icon-cont { .icon-cont {
@ -642,7 +673,7 @@
width: 100%; width: 100%;
height: auto; height: auto;
border: 1px solid #DDDDDD; border: 1px solid #DDDDDD;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
} }
.desc { .desc {

47
css/style.css
View File

@ -57,6 +57,34 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.header.style1 {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
background-color: unset;
}
.header.style1 .menu .link {
color: #FFFFFF;
}
.header.style1 .menu .link.active {
color: #FFFFFF;
font-weight: bold;
}
.header.style1 .menu .link:hover {
color: #E72A3A;
}
.header.style2 {
background-color: #FFFFFF;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
}
.header.style2 .menu .link {
color: #666666;
}
.header.style2 .menu .link.active {
color: #E72A3A;
font-weight: bold;
}
.header.style2 .menu .link:hover {
color: #E72A3A;
}
.header { .header {
z-index: 20; z-index: 20;
position: fixed; position: fixed;
@ -64,9 +92,10 @@
left: 0; left: 0;
right: 0; right: 0;
width: 100%; width: 100%;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
animation-name: headerFadeInDown; animation-name: headerFadeInDown;
animation-duration: 0.8s; animation-duration: 0.8s;
transition: all 0.35s;
box-sizing: border-box;
} }
.header .main { .header .main {
height: 90px; height: 90px;
@ -85,11 +114,7 @@
} }
.header .menu .link { .header .menu .link {
font-size: 18px; font-size: 18px;
color: #FFFFFF; transition: all 0.35s;
}
.header .menu .link.active,
.header .menu .link:hover {
font-weight: bold;
} }
.footer { .footer {
width: 100%; width: 100%;
@ -238,7 +263,7 @@
height: 156px; height: 156px;
background: rgba(248, 248, 248, 0); background: rgba(248, 248, 248, 0);
border: 1px solid #DDDDDD; border: 1px solid #DDDDDD;
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
border-radius: 20px; border-radius: 20px;
box-sizing: border-box; box-sizing: border-box;
padding: 30px; padding: 30px;
@ -387,7 +412,7 @@
width: 1045px; width: 1045px;
display: flex; display: flex;
border: 2px solid #DDDDDD; border: 2px solid #DDDDDD;
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
box-sizing: border-box; box-sizing: border-box;
margin: 0 auto; margin: 0 auto;
} }
@ -673,7 +698,7 @@
height: 303px; height: 303px;
background: rgba(229, 0, 32, 0); background: rgba(229, 0, 32, 0);
border: 2px solid #DDDDDD; border: 2px solid #DDDDDD;
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
border-radius: 20px; border-radius: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -722,7 +747,7 @@
height: 349px; height: 349px;
background: #FFFFFF; background: #FFFFFF;
border: 2px solid #DDDDDD; border: 2px solid #DDDDDD;
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
box-sizing: border-box; box-sizing: border-box;
} }
.s-content.g2 .icon-cont { .s-content.g2 .icon-cont {
@ -804,7 +829,7 @@
width: 420px; width: 420px;
background: #FFFFFF; background: #FFFFFF;
border: 2px solid #DDDDDD; border: 2px solid #DDDDDD;
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
box-sizing: border-box; box-sizing: border-box;
} }
.s-content.g3 .icon-cont, .s-content.g3 .icon-cont,

61
css/style.less
View File

@ -75,6 +75,47 @@
margin-right: auto; margin-right: auto;
} }
.header.style1 {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
background-color: unset;
.menu {
.link {
color: #FFFFFF;
}
.link.active {
color: #FFFFFF;
font-weight: bold;
}
.link:hover {
color: #E72A3A;
}
}
}
.header.style2 {
background-color: #FFFFFF;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
.menu {
.link {
color: #666666;
}
.link.active {
color: #E72A3A;
font-weight: bold;
}
.link:hover {
color: #E72A3A;
}
}
}
.header { .header {
z-index: 20; z-index: 20;
position: fixed; position: fixed;
@ -82,9 +123,10 @@
left: 0; left: 0;
right: 0; right: 0;
width: 100%; width: 100%;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
animation-name: headerFadeInDown; animation-name: headerFadeInDown;
animation-duration: 0.8s; animation-duration: 0.8s;
transition: all .35s;
box-sizing: border-box;
.main { .main {
height: 90px; height: 90px;
@ -110,12 +152,7 @@
.link { .link {
font-size: 18px; font-size: 18px;
color: #FFFFFF; transition: all .35s;
}
.link.active,
.link:hover {
font-weight: bold;
} }
} }
} }
@ -306,7 +343,7 @@
height: 156px; height: 156px;
background: rgba(248, 248, 248, 0); background: rgba(248, 248, 248, 0);
border: 1px solid #DDDDDD; border: 1px solid #DDDDDD;
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
border-radius: 20px; border-radius: 20px;
box-sizing: border-box; box-sizing: border-box;
padding: 30px; padding: 30px;
@ -495,7 +532,7 @@
width: 1045px; width: 1045px;
display: flex; display: flex;
border: 2px solid #DDDDDD; border: 2px solid #DDDDDD;
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
box-sizing: border-box; box-sizing: border-box;
margin: 0 auto; margin: 0 auto;
@ -860,7 +897,7 @@
height: 303px; height: 303px;
background: rgba(229, 0, 32, 0); background: rgba(229, 0, 32, 0);
border: 2px solid #DDDDDD; border: 2px solid #DDDDDD;
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
border-radius: 20px; border-radius: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -921,7 +958,7 @@
height: 349px; height: 349px;
background: #FFFFFF; background: #FFFFFF;
border: 2px solid #DDDDDD; border: 2px solid #DDDDDD;
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
box-sizing: border-box; box-sizing: border-box;
} }
@ -1021,7 +1058,7 @@
width: 420px; width: 420px;
background: #FFFFFF; background: #FFFFFF;
border: 2px solid #DDDDDD; border: 2px solid #DDDDDD;
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
box-sizing: border-box; box-sizing: border-box;
} }

2
detail.html
View File

@ -19,7 +19,7 @@
</head> </head>
<body> <body>
<div class="header"> <div class="header style1">
<div class="main main-wrap"> <div class="main main-wrap">
<div class="logo"> <div class="logo">
<a href="" target="_blank"> <a href="" target="_blank">

2
index.html
View File

@ -19,7 +19,7 @@
</head> </head>
<body> <body>
<div class="header"> <div class="header style1">
<div class="main main-wrap"> <div class="main main-wrap">
<div class="logo"> <div class="logo">
<a href="" target="_blank"> <a href="" target="_blank">

45
js/main.js
View File

@ -1,21 +1,17 @@
window.Config = { window.Config = {
staticDir: ".", staticDir: '.'
}; };
let isClose = true, let isClose = true,
header = $('.header'), header = $('.header'),
heaerMenuGroup = $('.menu-group'), heaerMenuGroup = $('.menu-group'),
headerMask = $('.menu-mask'), headerMask = $('.menu-mask'),
headerMenuBtn = $('.btn-img'), headerMenuBtn = $('.btn-img');
headerBg = header.css('background-image');
function showMenu() { function showMenu() {
heaerMenuGroup.show().addClass('fadeIn'); heaerMenuGroup.show().addClass('fadeIn');
headerMask.show().addClass('fadeIn'); headerMask.show().addClass('fadeIn');
headerMenuBtn.attr('src', window.Config.staticDir + '/images/guanbi.png'); headerMenuBtn.attr('src', window.Config.staticDir + '/images/guanbi.png');
header.css({
'background-image': 'url(\'' + window.Config.staticDir + '/images/transparent-bg.png\')'
});
isClose = false; isClose = false;
} }
@ -23,30 +19,25 @@ function hideMenu() {
heaerMenuGroup.removeClass('fadeIn').hide(); heaerMenuGroup.removeClass('fadeIn').hide();
headerMask.removeClass('fadeIn').hide(); headerMask.removeClass('fadeIn').hide();
headerMenuBtn.attr('src', window.Config.staticDir + '/images/menu.png'); headerMenuBtn.attr('src', window.Config.staticDir + '/images/menu.png');
header.css({
'background-image': headerBg
});
isClose = true; isClose = true;
} }
$(function () { $(function () {
$('.header .menu-group').load('/common/header.html'); $('.header .menu-group').load('../common/header.html');
$('.footer').load('/common/footer.html'); $('.footer').load('../common/footer.html');
// if ($(window).width() > 768) { $(window).scroll(function () {
// let headerBg = header.css('background-image'); let t = $(document).scrollTop(), flag;
// $(window).scroll(function () { if ($(window).width() > 768) {
// let t = $(document).scrollTop(); flag = t > 400;
// if (t > 430) { } else {
// header.css({ flag = t > 60;
// 'background-image': "url('/static/module/index/zxf/images/transparent-bg.png')" }
// }); if (flag) {
// } else { header.removeClass('style1').addClass('style2');
// header.css({ } else {
// 'background-image': headerBg header.removeClass('style2').addClass('style1');
// }); }
// } });
// });
// }
header.on('click', '.menu-btn', function () { header.on('click', '.menu-btn', function () {
(isClose == true) ? showMenu() : hideMenu(); (isClose == true) ? showMenu() : hideMenu();
}); });

2
story.html
View File

@ -19,7 +19,7 @@
</head> </head>
<body> <body>
<div class="header"> <div class="header style1">
<div class="main main-wrap"> <div class="main main-wrap">
<div class="logo"> <div class="logo">
<a href="" target="_blank"> <a href="" target="_blank">