486 lines
8.3 KiB
CSS
486 lines
8.3 KiB
CSS
|
|
/*public*/
|
|
.f1{
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-line-clamp: 1;
|
|
font-size: 13px;
|
|
}
|
|
.f2{
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-line-clamp: 2;
|
|
font-size: 13px;
|
|
}
|
|
.f7{
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-line-clamp: 7;
|
|
font-size: 13px;
|
|
}
|
|
.f5{
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-webkit-line-clamp: 5;
|
|
font-size: 13px;
|
|
}
|
|
.dNone{
|
|
display: none!important;
|
|
}
|
|
.df_jc_ac{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.df_jw_ac{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.df_jc_ac_fc{
|
|
display: flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
flex-direction:column;
|
|
}
|
|
.dBlock{
|
|
display: block!important;
|
|
}
|
|
.index{
|
|
background: #f3f3f3;
|
|
}
|
|
/*移动端*/
|
|
@media (min-width: 576px) {
|
|
.container {
|
|
max-width: 540px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.container {
|
|
max-width: 720px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.container {
|
|
max-width: 960px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.container {
|
|
max-width: 1140px;
|
|
}
|
|
}
|
|
@media (min-width: 1540px) {
|
|
.container {
|
|
max-width: 1440px;
|
|
}
|
|
}
|
|
@media (max-width: 993px) {
|
|
.phoneNone {
|
|
display: none!important;
|
|
}
|
|
.phoneBlock-head {
|
|
display: flex!important;
|
|
justify-content: center;
|
|
margin-left: 55%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
@media (max-width: 993px) {
|
|
.phoneBlock {
|
|
display: block;
|
|
}
|
|
.phoneBlockImportant{
|
|
display: block!important;;
|
|
}
|
|
.phoneShowContentBoxFlex{
|
|
display: flex!important;
|
|
|
|
}
|
|
.phoneFoot-df_jc_ac_fc{
|
|
display: flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
flex-direction:column!important;
|
|
}
|
|
.phoneReactive{
|
|
height: 400px!important;
|
|
}
|
|
.phoneShowItem{
|
|
display: flex!important;
|
|
flex-direction: column;!important;
|
|
justify-content: center;!important;
|
|
align-items: center;!important;
|
|
}
|
|
}
|
|
@media (max-width: 480px) {
|
|
.phoneSmallNone {
|
|
display: none!important;
|
|
}
|
|
.phoneSmallBlock{
|
|
display: block;
|
|
}
|
|
.phoneReactive{
|
|
height: 250px!important;
|
|
}
|
|
}
|
|
/*pc端*/
|
|
|
|
/*menu*/
|
|
.phoneHideBox{
|
|
z-index: 999;
|
|
backdrop-filter: blur(2px);
|
|
background: rgba(0,10,10,0.5);
|
|
color: white;
|
|
height: 100vh;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
.phoneHideBox::-webkit-scrollbar-track{
|
|
background: #999;
|
|
border-radius: 0;
|
|
}
|
|
.phoneHideBox::-webkit-scrollbar-thumb{
|
|
background: #f7f7f7;
|
|
border-radius: 0;
|
|
}
|
|
.phoneHideBox::selection{
|
|
background: #b3d4fc;
|
|
text-shadow: none;
|
|
}
|
|
.fMenu{
|
|
padding: 30px;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid #e2e3e5;
|
|
font-weight: 600;
|
|
transition: 0.6s;
|
|
}
|
|
.fMenu:hover{
|
|
background: #e2e3e5;
|
|
color: #4e555b;
|
|
}
|
|
.sMenu{
|
|
font-weight: 600;
|
|
padding: 30px 30px 30px 45px;
|
|
cursor: pointer;
|
|
transition: 0.6s;
|
|
}
|
|
.sMenu:hover{
|
|
background: #e2e3e5;
|
|
color: #4e555b;
|
|
}
|
|
/*head*/
|
|
.headerBox{
|
|
background: #11bea0;
|
|
position: relative;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
margin-bottom: 0;
|
|
}
|
|
.headList{
|
|
margin-left: 200px;
|
|
margin-right: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.phoneBlock > div{
|
|
padding: 20px 10px 25px 6%;
|
|
}
|
|
.headList > .f1{
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
color: white;
|
|
}
|
|
.active{
|
|
background: #4e555b;
|
|
color: white;
|
|
font-weight: 500;
|
|
}
|
|
.headerIcon{
|
|
height: 70px;
|
|
position: absolute;
|
|
margin: 0 2%;
|
|
width: 192px;
|
|
padding: 0!important;
|
|
}
|
|
.headerIcon > img{
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.search > img{
|
|
cursor: pointer;
|
|
height: 20px;
|
|
width: 20px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.moreButton>img{
|
|
cursor: pointer;
|
|
height: 20px;
|
|
width: 20px;
|
|
object-fit: cover;
|
|
}
|
|
.index a{
|
|
text-decoration: none!important;
|
|
}
|
|
.messagePhone{
|
|
padding: 10px 10px 0 6%!important;
|
|
color: white;
|
|
}
|
|
.messagePhone >div:nth-of-type(2){
|
|
font-weight: 600;
|
|
font-size: 18px;!important;
|
|
width: 152px;
|
|
}/*foot*/
|
|
footer{
|
|
padding: 0!important;
|
|
}
|
|
.footBgBox{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 0;
|
|
position: relative;
|
|
}
|
|
.footItem{
|
|
padding: 0;
|
|
position: relative;
|
|
height: 110px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.footItem>img{
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.footContent{
|
|
color: white;
|
|
position: relative;
|
|
}
|
|
.footTitle{
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
}
|
|
.footText{
|
|
font-size: 14px;
|
|
}
|
|
.footBigBox{
|
|
width: 100%;
|
|
color: white;
|
|
background: #222222;
|
|
padding: 30px 5% 30px 5%;
|
|
}
|
|
.footBox{
|
|
width: 100%;
|
|
}
|
|
.footLeftBoxLeft{
|
|
display: flex;
|
|
justify-content: left;
|
|
flex-direction: column;
|
|
}
|
|
.footLeftBox{
|
|
padding-left: 0;
|
|
}
|
|
.footLeftBox > div{
|
|
padding-left: 0;
|
|
}
|
|
.footLeftTitle{
|
|
font-weight: 550;
|
|
font-size: 18px;
|
|
}
|
|
.footLine{
|
|
margin: 20px auto;
|
|
width: 100%;
|
|
height: 1px;
|
|
background: #7a7a7a;
|
|
}
|
|
.footLeftContent{
|
|
display: flex;
|
|
justify-content: left;
|
|
flex-direction: column;
|
|
color: #7a7a7a;
|
|
font-weight: 550;
|
|
}
|
|
.footLeftContentItem{
|
|
margin: 5px 0;
|
|
cursor: pointer;
|
|
}
|
|
.footRightTitle{
|
|
font-weight: 550;
|
|
font-size: 18px;
|
|
}
|
|
.footRightContent{
|
|
display: flex;
|
|
justify-content: left;
|
|
flex-direction: column;
|
|
color: #7a7a7a;
|
|
font-weight: 550;
|
|
}
|
|
.footRightContent > div{
|
|
margin: 5px 0;
|
|
cursor: pointer;
|
|
}
|
|
.footRightPhone{
|
|
display: flex;
|
|
justify-content: left;
|
|
align-items: center;
|
|
}
|
|
.footRightPhoneContent{
|
|
margin-left: 10px;
|
|
}
|
|
.footRightPhoneContentText{
|
|
color: #7a7a7a;
|
|
font-size: 8px;
|
|
}
|
|
.footRightPhoneContentTitle{
|
|
font-weight: 550;
|
|
color: white;
|
|
font-size: 22px;
|
|
}
|
|
.footRightContentItem{
|
|
margin: 5px 0;
|
|
cursor: pointer;
|
|
}
|
|
.footRightBoxRight{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
.footRightBoxImgItem{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
margin: 5px;
|
|
width: 125px;
|
|
}
|
|
.footRightBoxImgItem>img{
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.footRightBoxImgItemText{
|
|
font-size: 8px;
|
|
color: #7a7a7a;
|
|
}
|
|
.footFootBox{
|
|
margin: 20px auto;
|
|
width: 100%;
|
|
}
|
|
.footFootBox > div{
|
|
color: #7a7a7a;
|
|
font-size: 15px;
|
|
font-weight: 550;
|
|
}
|
|
/*nav*/
|
|
.MenuActive{
|
|
border-bottom: 1px solid #4e555b;
|
|
background: #e2e3e5;
|
|
color: #4e555b;
|
|
}
|
|
.navBigBox{
|
|
position: relative;
|
|
|
|
}
|
|
.navBox{
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
position: relative;
|
|
right: 0;
|
|
transition: 1s;
|
|
|
|
}
|
|
.navItem{
|
|
cursor: pointer;
|
|
height: 650px;
|
|
width: 100%;
|
|
position: relative;
|
|
right: 0;
|
|
transition: 0.5s;
|
|
}
|
|
.navItem>img{
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
.navSmallItem{
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
bottom: 0;
|
|
width: 100%;
|
|
margin: 30px auto;
|
|
|
|
}
|
|
.navSmallItem>img{
|
|
height: 12%;
|
|
width: 12%;
|
|
object-fit: cover;
|
|
opacity: 0.3;
|
|
}
|
|
.navSmallItem > .navActive{
|
|
opacity: 1;
|
|
}
|
|
/*title*/
|
|
.title{
|
|
text-align: center;
|
|
margin: 70px auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
.titleTop{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.titleTop > div{
|
|
margin: 0 5px 0 5px;
|
|
}
|
|
.titleMiddle{
|
|
font-size: 28px;
|
|
font-weight: 800;
|
|
margin: 0 10px 0 10px;
|
|
}
|
|
.titleAside{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.titleAside > div{
|
|
margin: 0 5px 0 5px;
|
|
height: calc(var(--i)*10px);
|
|
opacity: calc(var(--i)*0.2);
|
|
width: 5px;
|
|
background: #24c3a9;
|
|
}
|
|
.titleBottom{
|
|
font-weight: 600;
|
|
}
|
|
.titleBottom > span:nth-of-type(1){
|
|
color: #2faf94;
|
|
}
|
|
.titleBottom > span:nth-of-type(2){
|
|
color: #e1e1e1;
|
|
} |