626 lines
11 KiB
CSS
626 lines
11 KiB
CSS
/*index.css*/
|
|
/*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;
|
|
}
|
|
/*产品展示*/
|
|
.showButtonBox{
|
|
margin: 40px auto;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
}
|
|
.showButtonBox > div{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #ffffff;
|
|
padding: 15px;
|
|
cursor: pointer;
|
|
font-weight: 550;
|
|
margin: 10px auto;
|
|
}
|
|
.showButton>div{
|
|
font-size: 15px!important;
|
|
}
|
|
.showActive{
|
|
background: #ededed!important;
|
|
color: #33baa4;
|
|
}
|
|
.showButton{
|
|
transition: 0.2s;
|
|
}
|
|
.showButton:hover{
|
|
background: #ededed!important;
|
|
color: #33baa4;
|
|
}
|
|
.showButtonBox img{
|
|
margin-right: 10px;
|
|
object-fit: cover;
|
|
}
|
|
.shows{
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin: 40px auto;
|
|
}
|
|
.show{
|
|
height: 100%;
|
|
background: #7abaff;
|
|
}
|
|
.showItem{
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
max-width: 100%;
|
|
}
|
|
.showImg{
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid #e2e3e5;
|
|
margin-bottom: 30px;
|
|
}
|
|
.showImg > img{
|
|
height:100%;
|
|
width:100%;
|
|
object-fit: cover;
|
|
}
|
|
.showContentBox{
|
|
height: 100%;
|
|
width: 52%;
|
|
padding-left: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
.showContent{
|
|
width: 100%;
|
|
background: #11bea0;
|
|
height: 70%;
|
|
color: white;
|
|
padding: 10px 30px 0 30px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.showContentLine{
|
|
height: 2px;
|
|
width: 37px;
|
|
background: white;
|
|
margin: 15px 0;
|
|
}
|
|
.showContentType{
|
|
font-size: 28px;
|
|
}
|
|
.showContentText{
|
|
font-size: 8px;
|
|
}
|
|
.showContentButton{
|
|
display: flex;
|
|
justify-content: left;
|
|
align-items: center;
|
|
margin: 15px 0;
|
|
}
|
|
.detailButton {
|
|
margin: 0 20px 0 0;
|
|
border-radius: 30px;
|
|
border: 1px solid white;
|
|
padding: 5px 20px;
|
|
cursor: pointer;
|
|
transition: 0.6s;
|
|
}
|
|
.detailButton:hover{
|
|
background: white;
|
|
color: #11bea0;
|
|
}
|
|
.buyButton{
|
|
cursor: pointer;
|
|
}
|
|
.showContentIcon{
|
|
position: absolute;
|
|
border-left: 30px solid #11bea0;
|
|
border-right: 30px solid transparent;
|
|
border-top: 30px solid transparent;
|
|
transform: rotate(45deg);
|
|
left: 20px;
|
|
}
|
|
.showLeftButton > img,.showRightButton > img{
|
|
cursor: pointer;
|
|
}
|
|
.showsDetailBox{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 150px;
|
|
margin: 0 0 30px 0;
|
|
}
|
|
.showsDetailBox > div{
|
|
margin: 0 30px 0 10px;
|
|
height: 100%;
|
|
}
|
|
.showDetailSign{
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width:30px;
|
|
background: #11bea0;
|
|
color: white;
|
|
font-weight: 550;
|
|
padding: 15px;
|
|
}
|
|
.showDetail{
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
margin: 0 auto;
|
|
}
|
|
.showDetailItem{
|
|
height: 100%;
|
|
margin: 0 15px;
|
|
}
|
|
.showDetailItem >img{
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
/*show2*/
|
|
._showContentBox{
|
|
display: none;
|
|
height: 100%;
|
|
width: 80%;
|
|
padding-left: 30px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
._showContentIcon{
|
|
position: absolute;
|
|
border-left: 30px solid #11bea0;
|
|
border-right: 30px solid transparent;
|
|
border-top: 30px solid transparent;
|
|
transform: rotate(135deg);
|
|
margin: 0 auto;
|
|
top: 0;
|
|
}
|
|
._showContentText{
|
|
font-size: 15px;
|
|
margin-bottom: 30px;
|
|
}
|
|
._showContent{
|
|
width: 100%;
|
|
background: #11bea0;
|
|
height: 70%;
|
|
color: white;
|
|
padding: 10px 10% 0 10%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
._showContentType{
|
|
font-size:25px;
|
|
}
|
|
/*about*/
|
|
.aboutsBox{
|
|
position: relative;
|
|
background: white;
|
|
|
|
}
|
|
.aboutsBg{
|
|
height: 385px;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
.aboutsBg > img{
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.abouts{
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
.about{
|
|
width: 100%;
|
|
height: 100%;
|
|
background: white;
|
|
margin: 270px 0 0 0;
|
|
border: 1px solid #d9d9d9;
|
|
padding: 30px;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
}
|
|
.aboutImg{
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.aboutImg > img{
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.aboutContent{
|
|
height: 100%;
|
|
width: 100%;
|
|
padding-left: 30px;
|
|
}
|
|
.aboutTitle{
|
|
color: #11bea0;
|
|
font-weight: 550;
|
|
font-size: 28px;
|
|
}
|
|
.aboutSmallTitle{
|
|
font-weight: 550;
|
|
font-size: 16px;
|
|
}
|
|
.aboutContentText{
|
|
margin: 20px auto;
|
|
color: #9b9b9b;
|
|
font-size: 14px;
|
|
}
|
|
.aboutCertificate{
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
}
|
|
.aboutCertificate > div{
|
|
height: 100%;
|
|
}
|
|
.aboutCertificate >div >img{
|
|
height: 100%;
|
|
width: 95%;
|
|
object-fit: cover;
|
|
}
|
|
/*about2*/
|
|
.aboutsBox2{
|
|
display: none;
|
|
position: relative;
|
|
background: white;
|
|
}
|
|
._aboutContent{
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
._aboutsBg{
|
|
height: 285px;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
._aboutsBg > img{
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.aboutHeadBox{
|
|
padding: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
background: white;
|
|
}
|
|
.aboutHeadTitle{
|
|
color: #11bea0;
|
|
font-size: 28px;
|
|
font-weight: 550;
|
|
}
|
|
.aboutHeadMiddle{
|
|
color: #11bea0;
|
|
font-size: 28px;
|
|
}
|
|
.aboutHeadBottom{
|
|
color: #d7d7d7;
|
|
|
|
}
|
|
._about{
|
|
width: 90%;
|
|
height: 100%;
|
|
background: white;
|
|
margin: 100px 0 0 0;
|
|
border: 1px solid #d9d9d9;
|
|
padding: 30px;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
}
|
|
/*new*/
|
|
.newsBox{
|
|
background: white;
|
|
padding-bottom: 70px;
|
|
}
|
|
.newsBox > .title{
|
|
margin: 0 auto;
|
|
padding: 70px 0;
|
|
}
|
|
.news{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.news > div{
|
|
padding: 0;
|
|
height: 600px;
|
|
}
|
|
.newLeft{
|
|
|
|
display: flex;
|
|
justify-content: left;
|
|
position: relative;
|
|
background: #f8f8f8;
|
|
}
|
|
|
|
.newBg{
|
|
height: 200px;
|
|
background: #11bea0;
|
|
width: 100%;
|
|
position: absolute;
|
|
}
|
|
.newLeftContent{
|
|
position: relative;
|
|
padding: 0 30px;
|
|
}
|
|
.newLeftContent > div{
|
|
margin: 30px 0;
|
|
}
|
|
.newLeftContentHead{
|
|
color: white;
|
|
}
|
|
.newLeftContentHeadTitle{
|
|
font-size: 24px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.newLeftContentHeadText{
|
|
font-size: 12px;
|
|
}
|
|
.newLeftContent > div{
|
|
margin-bottom: 30px;
|
|
}
|
|
.newLeftContentImg > img{
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.newLeftContentText > div{
|
|
color: #909090;
|
|
font-size: 18px;
|
|
}
|
|
.newLeftContentTime{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.newRight{
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 40px;
|
|
}
|
|
.newRight > div{
|
|
height: 50%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
padding: 30px;
|
|
background: #f8f8f8;
|
|
}
|
|
.newRight > div:nth-of-type(1){
|
|
margin-bottom: 5%;
|
|
}
|
|
|
|
|
|
.newRightHead{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.newRightHeadLeft > div:nth-of-type(1){
|
|
font-size: 28px;
|
|
}
|
|
.newRightHeadLeft > div:nth-of-type(2){
|
|
color: #999999;
|
|
}
|
|
.newRightHeadRight{
|
|
display: flex;
|
|
}
|
|
.newButton{
|
|
height: 15px;
|
|
width: 15px;
|
|
background: #dedede;
|
|
border-radius: 50%;
|
|
margin: 0 5px;
|
|
cursor: pointer;
|
|
}
|
|
.newButtonActive{
|
|
height: 15px;
|
|
width: 30px;
|
|
border-radius: 25px;
|
|
background: #11bea0;
|
|
}
|
|
.newRightTop{
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.newRightContentBox{
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.newRightContent{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
right: 0;
|
|
user-select: none;
|
|
}
|
|
.newRightContent > div{
|
|
padding-right: 30px ;
|
|
}
|
|
.newRightContentLeft{
|
|
cursor: pointer;
|
|
}
|
|
.newRightContentLeftTitle{
|
|
margin: 15px auto;
|
|
color: #2d2d2d;
|
|
font-weight: 550;
|
|
font-size: 14px;
|
|
}
|
|
.newRightContentLeftText{
|
|
color: #a8a8a8;
|
|
}
|
|
.newRightContentRightTitle{
|
|
margin: 15px auto;
|
|
color: #2d2d2d;
|
|
font-weight: 550;
|
|
font-size: 14px;
|
|
}
|
|
.newRightContentRightText{
|
|
color: #a8a8a8;
|
|
}
|
|
.newRightContentLeftTime{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 20px;
|
|
}
|
|
/*new2*/
|
|
.news2{
|
|
display: none;
|
|
}
|
|
.new2Item{
|
|
background: #f8f8f8;
|
|
padding: 20px;
|
|
}
|
|
.new2Content{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.new2Content > div:nth-of-type(1){
|
|
padding-right: 30px;
|
|
}
|
|
|
|
.new2ContentLeftTitle{
|
|
margin: 15px auto;
|
|
color: #2d2d2d;
|
|
font-weight: 550;
|
|
font-size: 14px;
|
|
}
|
|
.new2ContentLeftText{
|
|
color: #a8a8a8;
|
|
}
|
|
.new2ContentRightTitle{
|
|
margin: 15px auto;
|
|
color: #2d2d2d;
|
|
font-weight: 550;
|
|
font-size: 14px;
|
|
}
|
|
.new2ContentRightText{
|
|
color: #a8a8a8;
|
|
}
|
|
.new2ContentLeftTime{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 20px;
|
|
}
|
|
.new2ContentLeftTime{
|
|
display: flex;
|
|
}
|