master
Lee 2021-12-29 11:13:48 +08:00
parent 667cee0ab2
commit 2ed5fc1976
2 changed files with 407 additions and 360 deletions

View File

@ -24,8 +24,8 @@ i {
} }
/* 去掉li 的小圆点 */ /* 去掉li 的小圆点 */
ul, ul,
ol, ol,
li { li {
list-style: none; list-style: none;
} }
@ -96,16 +96,16 @@ textarea {
.logo h1 a { .logo h1 a {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.w100{ width: 100%; margin: auto;} .w100{ width: 100%; margin: auto;}
.w1300{ width: 1320px; margin: auto;} .w1300{ width: 1320px; margin: auto;}
.clips1{ .clips1{
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
text-overflow:ellipsis; text-overflow:ellipsis;
} }
.clips2{display: -webkit-box;-webkit-line-clamp: 2;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;} .clips2{display: -webkit-box;-webkit-line-clamp: 2;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}
@ -114,354 +114,354 @@ textarea {
.clips5{display: -webkit-box;-webkit-line-clamp: 5;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;} .clips5{display: -webkit-box;-webkit-line-clamp: 5;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}
.clips6{display: -webkit-box;-webkit-line-clamp: 6;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;} .clips6{display: -webkit-box;-webkit-line-clamp: 6;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}
.clips7{display: -webkit-box;-webkit-line-clamp: 7;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;} .clips7{display: -webkit-box;-webkit-line-clamp: 7;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}
/* 头部 */ /* 头部 */
body.active{ body.active{
margin-right: 270px; margin-right: 270px;
} }
.header{ .header{
height: 90px; height: 90px;
background-color: rgba(255,255,255,0.75); background-color: rgba(255,255,255,0.75);
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: 99; z-index: 99;
} }
.index-header{ .index-header{
background: none; background: none;
} }
.head{ .head{
width: 90%; width: 90%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.head .logo{ .head .logo{
width: 30%; width: 30%;
} }
.head .logo img{ .head .logo img{
height: 55px; height: 55px;
} }
.head .nav{ .head .nav{
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
.head .nav .nav-logo, .head .nav .nav-logo,
.head .nav-bg{ .head .nav-bg{
display: none; display: none;
} }
.head .nav li{ .head .nav li{
margin-left: 55px; margin-left: 55px;
height: 90px; height: 90px;
position: relative; position: relative;
} }
.head .nav li>a{ .head .nav li>a{
display: block; display: block;
padding: 0 2px; padding: 0 2px;
font-size: 18px; font-size: 18px;
line-height: 2; line-height: 2;
margin-top: 27px; margin-top: 27px;
color: #262626; color: #262626;
transition: all .8s; transition: all .8s;
} }
.head .nav li.active>a{ .head .nav li.active>a{
font-weight: bold; font-weight: bold;
color: #72C152; color: #72C152;
border-bottom: 3px solid #72C152; border-bottom: 3px solid #72C152;
} }
.head .nav li:hover>a{ .head .nav li:hover>a{
transform: rotateY(360deg); transform: rotateY(360deg);
transition: all .8s; transition: all .8s;
} }
.head .nav li.active:hover>a{ .head .nav li.active:hover>a{
transform: none; transform: none;
} }
.head .nav li .sub-nav{ .head .nav li .sub-nav{
height: 0; height: 0;
width: 173px; width: 173px;
border-radius: 3px; border-radius: 3px;
background-color: rgba(255,255,255,0.75); background-color: rgba(255,255,255,0.75);
position: absolute; position: absolute;
left: -25px; left: -25px;
top: 86px; top: 86px;
z-index: 9; z-index: 9;
transition: all .4s; transition: all .4s;
overflow: hidden; overflow: hidden;
} }
.head .nav li .sub-nav>a{ .head .nav li .sub-nav>a{
display: block; display: block;
padding: 0 22px; padding: 0 22px;
line-height: 44px; line-height: 44px;
font-size: 15px; font-size: 15px;
color: #585858; color: #585858;
} }
.head .nav li .sub-nav>a.active{ .head .nav li .sub-nav>a.active{
background-color: #ebf2e9; background-color: #ebf2e9;
color: #72C152; color: #72C152;
} }
.head .nav li:hover .sub-nav{ .head .nav li:hover .sub-nav{
height: auto; height: auto;
padding: 7px 9px; padding: 7px 9px;
box-shadow: 0 0 8px 3px rgba(224,224,224,0.32); box-shadow: 0 0 8px 3px rgba(224,224,224,0.32);
transition: all .4s; transition: all .4s;
} }
.head .head-btn{ display: none; width: 24px; float: right; position: relative; cursor: pointer; margin-top: 5px;} .head .head-btn{ display: none; width: 24px; float: right; position: relative; cursor: pointer; margin-top: 5px;}
.head .head-btn i{ display: block; width: 100%; height: 2px; float: left; background-color: #262626; border-radius: 50px; .head .head-btn i{ display: block; width: 100%; height: 2px; float: left; background-color: #262626; border-radius: 50px;
transition: all .5s ease 0s; transition: all .5s ease 0s;
-webkit-transition: all .5s ease 0s; -webkit-transition: all .5s ease 0s;
-moz-transition: all .5s ease 0s; -moz-transition: all .5s ease 0s;
} }
.head .head-btn i.bar-top{ margin-top: 0;} .head .head-btn i.bar-top{ margin-top: 0;}
.head .head-btn i.bar-cen{ margin-top: 5px;} .head .head-btn i.bar-cen{ margin-top: 5px;}
.head .head-btn i.bar-bom{ margin-top: 5px;} .head .head-btn i.bar-bom{ margin-top: 5px;}
.head .head-btn.cur i{background-color: #FFFFFF;} .head .head-btn.cur i{background-color: #FFFFFF;}
.head .head-btn.cur i.bar-cen{ opacity: 0;} .head .head-btn.cur i.bar-cen{ opacity: 0;}
.head .head-btn.cur i.bar-top{ -webkit-transform:rotate(45deg) translate(6px, 6px);transform:rotate(45deg) translate(6px, 6px);} .head .head-btn.cur i.bar-top{ -webkit-transform:rotate(45deg) translate(6px, 6px);transform:rotate(45deg) translate(6px, 6px);}
.head .head-btn.cur i.bar-bom{ -webkit-transform: rotate(-45deg) translate(5.5px, -5px);transform: rotate(-45deg) translate(5.5px, -5px);} .head .head-btn.cur i.bar-bom{ -webkit-transform: rotate(-45deg) translate(5.5px, -5px);transform: rotate(-45deg) translate(5.5px, -5px);}
/* 尾部 */ /* 尾部 */
/* 留言板 */ /* 留言板 */
.index-seek{ .index-seek{
padding-top: 114px; padding-top: 114px;
background-image: url(../imgs/seek-bg.jpg); background-image: url(../imgs/seek-bg.jpg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top; background-position: top;
background-size: cover; background-size: cover;
} }
.seek{ .seek{
display: flex; display: flex;
background: linear-gradient(rgba(123,188,43,0.8),rgba(33,165,60,0.8)); background: linear-gradient(rgba(123,188,43,0.8),rgba(33,165,60,0.8));
} }
.seek .left{ .seek .left{
width: 38.1%; width: 38.1%;
padding: 30px 4%; padding: 30px 4%;
border-right: 1px solid rgba(255,255,255,0.1); border-right: 1px solid rgba(255,255,255,0.1);
color: #FFFFFF; color: #FFFFFF;
text-align: center; text-align: center;
} }
.seek .left img{ .seek .left img{
width: 130px; width: 130px;
margin: 0 auto; margin: 0 auto;
} }
.seek .left strong{ .seek .left strong{
display: block; display: block;
font-family: "douyu-font"; font-family: "douyu-font";
font-size: 42px; font-size: 42px;
line-height: 1.5; line-height: 1.5;
margin-top: 10px; margin-top: 10px;
font-weight: normal; font-weight: normal;
} }
.seek .left p{ .seek .left p{
font-size: 26px; font-size: 26px;
line-height: 1.2; line-height: 1.2;
} }
.seek .left span{ .seek .left span{
display: block; display: block;
font-size: 15px; font-size: 15px;
line-height: 1.8; line-height: 1.8;
margin-top: 12px; margin-top: 12px;
} }
.seek .right{ .seek .right{
width: 61.9%; width: 61.9%;
padding: 44px 50px; padding: 44px 50px;
} }
.seek .right .form-top{ .seek .right .form-top{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
} }
.seek .right .form-top input{ .seek .right .form-top input{
width: 49%; width: 49%;
line-height: 44px; line-height: 44px;
padding: 0 10px; padding: 0 10px;
margin-bottom: 15px; margin-bottom: 15px;
background: none; background: none;
border: 1px solid rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.5);
font-size: 14px; font-size: 14px;
color: rgba(255,255,255,0.7); color: rgba(255,255,255,0.7);
} }
.seek .right .form-top input::-webkit-input-placeholder, .seek .right .form-top input::-webkit-input-placeholder,
.seek .right .form-top textarea::-webkit-input-placeholder .seek .right .form-top textarea::-webkit-input-placeholder
{ {
color: rgba(255,255,255,0.7); color: rgba(255,255,255,0.7);
} }
.seek .right .form-top input::-ms-input-placeholder, .seek .right .form-top input::-ms-input-placeholder,
.seek .right .form-top textarea::-ms-input-placeholder{ .seek .right .form-top textarea::-ms-input-placeholder{
color: rgba(255,255,255,0.7); color: rgba(255,255,255,0.7);
} }
.seek .right .form-top input::-moz-input-placeholder, .seek .right .form-top input::-moz-input-placeholder,
.seek .right .form-top textarea::-ms-input-placeholder{ .seek .right .form-top textarea::-ms-input-placeholder{
color: rgba(255,255,255,0.7); color: rgba(255,255,255,0.7);
} }
.seek .right .form-top input::-o-input-placeholder, .seek .right .form-top input::-o-input-placeholder,
.seek .right .form-top textarea::-ms-input-placeholder{ .seek .right .form-top textarea::-ms-input-placeholder{
color: rgba(255,255,255,0.7); color: rgba(255,255,255,0.7);
} }
.seek .right .form-top input::input-placeholder, .seek .right .form-top input::input-placeholder,
.seek .right .form-top textarea::-ms-input-placeholder{ .seek .right .form-top textarea::-ms-input-placeholder{
color: rgba(255,255,255,0.7); color: rgba(255,255,255,0.7);
} }
.seek .right .form-top textarea{ .seek .right .form-top textarea{
width: 100%; width: 100%;
height: 82px; height: 82px;
padding: 0 10px; padding: 10px;
line-height: 44px; line-height: 24px;
background: none; background: none;
border: 1px solid rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.5);
font-size: 14px; font-size: 14px;
color: rgba(255,255,255,0.7); color: rgba(255,255,255,0.7);
} }
.seek .right button{ .seek .right button{
display: block; display: block;
width: 140px; width: 140px;
height: 48px; height: 48px;
background-color: rgba(255,255,255,0.7); background-color: rgba(255,255,255,0.7);
border: 0; border: 0;
font-size: 17px; font-size: 17px;
color: #212121; color: #212121;
margin: 30px auto 0; margin: 30px auto 0;
} }
/* 联系方式 */ /* 联系方式 */
.index-contact{ .index-contact{
padding: 28px 0; padding: 28px 0;
background-color: #3a3e39; background-color: #3a3e39;
} }
.contact{ .contact{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.contact .left, .contact .left,
.contact .middle{ .contact .middle{
width: 32%; width: 32%;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
} }
.contact .left>img, .contact .left>img,
.contact .middle>img{ .contact .middle>img{
height: 58px; height: 58px;
margin-right: 17px; margin-right: 17px;
} }
.contact .left p, .contact .left p,
.contact .middle p{ .contact .middle p{
font-size: 14px; font-size: 14px;
line-height: 29px; line-height: 29px;
color: #FFFFFF; color: #FFFFFF;
} }
.contact .middle{ .contact .middle{
width: 46%; width: 46%;
} }
.contact .right{ .contact .right{
width: 22%; width: 22%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.contact .right>.section{ .contact .right>.section{
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
} }
.contact .right>.section p{ .contact .right>.section p{
width: 16px; width: 16px;
margin-right: 14px; margin-right: 14px;
font-size: 14px; font-size: 14px;
line-height: 25.5px; line-height: 25.5px;
color: rgba(255,255,255,0.8); color: rgba(255,255,255,0.8);
} }
.contact .right>.section>img{ .contact .right>.section>img{
height: 102px; height: 102px;
} }
/* 友情链接 */ /* 友情链接 */
.links{ .links{
padding: 20px 0; padding: 20px 0;
} }
.links-item li{ .links-item li{
display: inline-block; display: inline-block;
font-size: 15px; font-size: 15px;
line-height: 2; line-height: 2;
color: #262626; color: #262626;
margin-right: 24px; margin-right: 24px;
cursor: pointer; cursor: pointer;
transition: all .8s; transition: all .8s;
} }
.links-item li.active{ .links-item li.active{
color: #72C152; color: #72C152;
transition: all .8s; transition: all .8s;
} }
.links-list{ .links-list{
margin-top: 10px; margin-top: 10px;
} }
.links-list li{ .links-list li{
display: none; display: none;
} }
.links-list li>a{ .links-list li>a{
font-size: 14px; font-size: 14px;
line-height: 2.2; line-height: 2.2;
color: #585858; color: #585858;
margin-right: 20px; margin-right: 20px;
} }
.links-list li.active{ .links-list li.active{
display: block; display: block;
} }
/* 版权备案 */ /* 版权备案 */
.footer .foot{ .footer .foot{
border-top: 1px solid #eeefef; border-top: 1px solid #eeefef;
} }
.footer .foot p{ .footer .foot p{
font-size: 14px; font-size: 14px;
line-height: 54px; line-height: 54px;
color: #585858; color: #585858;
} }
.footer .foot p>a{ .footer .foot p>a{
color: #585858; color: #585858;
margin: 0 9px; margin: 0 9px;
} }
/* 侧边咨询 */ /* 侧边咨询 */
.index-sider{ .index-sider{
width: 106px; width: 106px;
height: auto; height: auto;
position: fixed; position: fixed;
right: 0; right: 0;
bottom: 80px; bottom: 80px;
text-align: center; text-align: center;
z-index: 999; z-index: 999;
} }
.index-sider .top{ .index-sider .top{
height: 95px; height: 95px;
background-color: #72C152; background-color: #72C152;
padding-top: 16px; padding-top: 16px;
font-size: 15px; font-size: 15px;
line-height: 1.4; line-height: 1.4;
color: #FFFFFF; color: #FFFFFF;
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
.index-sider .bottom{ .index-sider .bottom{
border: 1px solid #c7e1bc; border: 1px solid #c7e1bc;
background-color: rgba(255,255,255,1); background-color: rgba(255,255,255,1);
} }
.index-sider .bottom p{ .index-sider .bottom p{
font-size: 13px; font-size: 13px;
color: #72C152; color: #72C152;
line-height: 1.2; line-height: 1.2;
} }
.index-sider .bottom img{ .index-sider .bottom img{
max-width: 90px; max-width: 90px;
margin: 10px auto; margin: 10px auto;
} }
.index-sider .bottom strong{ .index-sider .bottom strong{
font-size: 12px; font-size: 12px;
line-height: 1.2; line-height: 1.2;
color: #72C152; color: #72C152;
} }

View File

@ -723,8 +723,39 @@
.serve-survey .more{ .serve-survey .more{
height: 42px; height: 42px;
margin-top: 22px; margin-top: 22px;
overflow: hidden; /* overflow: hidden; */
} }
/* 新增 */
.serve-survey .more{
position: relative;
}
.serve-survey .openEwm{
background: #FFFFFF;
width: 334px;
position: absolute;
left: 0;
bottom: 60px;
z-index: -1;
overflow: hidden;
transition: all .6s;
opacity: 0;
}
.serve-survey .openEwm img{
display: block;
width: 100%;
margin: 10px auto 0;
}
.serve-survey .openEwm.cur{
z-index: 10;
box-shadow: 0 0 8px 3px rgba(0,0,0,0.1);
opacity: 1;
transition: all .6s;
}
/* 新增 */
.serve-survey .more>a{ .serve-survey .more>a{
display: block; display: block;
width: 162px; width: 162px;
@ -740,6 +771,7 @@
margin-right: 10px; margin-right: 10px;
} }
.serve-nav-bg{ .serve-nav-bg{
background-color: #72C152; background-color: #72C152;
} }
@ -1599,6 +1631,8 @@
color: rgba(0,0,0,0.5); color: rgba(0,0,0,0.5);
} }
@media screen and (max-width:1600px){ @media screen and (max-width:1600px){
.banner-title .left>strong{ .banner-title .left>strong{
font-size: 34px; font-size: 34px;
@ -2870,6 +2904,19 @@
width: 100%; width: 100%;
font-size: 13px; font-size: 13px;
} }
/* 新增 */
.serve-survey .openEwm{
background: #FFFFFF;
width: calc(80% + 10px);
position: absolute;
left: 50%;
bottom: 60px;
z-index: -1;
overflow: hidden;
transition: all .6s;
transform: translateX(-50%);
opacity: 0;
}
} }
@media screen and (max-width:350px){ @media screen and (max-width:350px){
.banner-title .left>strong{ .banner-title .left>strong{