800 lines
12 KiB
CSS
800 lines
12 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 0 40px 0;
|
|
display: flex;
|
|
justify-content: left;
|
|
align-items: center;
|
|
}
|
|
|
|
.showButtonBox>* {
|
|
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: #33baa4 !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.showButton {
|
|
transition: 0.2s;
|
|
color: black;
|
|
}
|
|
|
|
.showButton:hover {
|
|
background: #33baa4 !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.showButtonBox img {
|
|
margin-right: 10px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.shows {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin: 50px auto;
|
|
padding: 0 0 20px 0;
|
|
background: #ededed;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.show {
|
|
height: 100%;
|
|
background: #7abaff;
|
|
}
|
|
|
|
/*xiugai*/
|
|
.showsBox {
|
|
height: 100%;
|
|
}
|
|
|
|
.show-item-poster {
|
|
margin-left: 0 !important;
|
|
height: 100%;
|
|
width: 60%;
|
|
margin-right: 30px;
|
|
}
|
|
|
|
.show-item-poster img {
|
|
height: 100%;
|
|
width: 100%;
|
|
/*object-fit: scale-down;*/
|
|
object-fit: fill;
|
|
}
|
|
|
|
.show-itemsBox {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
/*align-items: center;*/
|
|
width: 100%;
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.show-itemsBox a {
|
|
display: inline;
|
|
}
|
|
|
|
.show-items {
|
|
padding: 0 12px 24px 12px;
|
|
height: 300px;
|
|
width: 100%;
|
|
}
|
|
|
|
.show-item {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: relative;
|
|
/*background: #0b2e13;*/
|
|
cursor: pointer;
|
|
transition: 0.8s;
|
|
overflow: hidden;
|
|
border-left: 1px solid #e4e4e4;
|
|
border-right: 1px solid #e4e4e4;
|
|
border-top: 1px solid #e4e4e4;
|
|
}
|
|
|
|
.show-item:hover.show-item>img {
|
|
height: 90%;
|
|
}
|
|
|
|
.show-item>img {
|
|
position: absolute;
|
|
height: 85%;
|
|
width: 100%;
|
|
object-fit: contain;
|
|
top: 0;
|
|
right: 0;
|
|
transition: 0.8s;
|
|
}
|
|
|
|
.show-item-content {
|
|
position: absolute;
|
|
bottom: -43px;
|
|
right: 0;
|
|
z-index: 999;
|
|
background: rgba(48, 182, 158, 0.8);
|
|
width: 100%;
|
|
padding: 6px 0 12px 0;
|
|
backdrop-filter: blur(4px);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
color: white;
|
|
transition: 0.8s;
|
|
}
|
|
|
|
.show-item:hover .show-item-content {
|
|
bottom: 0;
|
|
}
|
|
|
|
.show-item-detail {
|
|
margin-top: 10px;
|
|
border: 1px solid white;
|
|
border-radius: 5px;
|
|
padding: 2px 20px;
|
|
transition: 0.4s;
|
|
}
|
|
|
|
.show-item-detail:hover {
|
|
background: white;
|
|
color: rgb(48, 182, 158);
|
|
border: 1px solid rgb(48, 182, 158);
|
|
|
|
}
|
|
|
|
.showLine {
|
|
border-right: 1px solid rgb(250, 250, 250);
|
|
}
|
|
|
|
/*xiugai*/
|
|
|
|
/*show2*/
|
|
._showContentBox {
|
|
display: none;
|
|
height: 100%;
|
|
width: 80%;
|
|
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;
|
|
color: white;
|
|
padding: 10px 10% 0 10%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
._showContentType {
|
|
font-size: 25px;
|
|
}
|
|
|
|
/*about*/
|
|
.aboutsBox {
|
|
position: relative;
|
|
background: white;
|
|
|
|
}
|
|
|
|
.aboutsBg {
|
|
height: 496px;
|
|
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;
|
|
position: relative;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.aboutImg {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.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: 24px !important;
|
|
}
|
|
|
|
.aboutSmallTitle {
|
|
font-weight: 550;
|
|
font-size: 16px !important;
|
|
}
|
|
|
|
.aboutContentText {
|
|
margin: 20px auto;
|
|
color: #9b9b9b;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.aboutCertificate {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.aboutCertificate>div {
|
|
position: relative;
|
|
right: 0;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.aboutCertificate>div>img {
|
|
height: 150px;
|
|
width: 100%;
|
|
/*object-fit: cover;*/
|
|
object-fit: contain;
|
|
}
|
|
|
|
/*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;
|
|
}
|
|
|
|
.newLeftContentHead>.newLeftContentHeadTitle:nth-of-type(1) {
|
|
font-size: 24px !important;
|
|
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;
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
.newLeftContentTime>div:nth-of-type(1) {
|
|
color: #a8a8a8;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.newLeftContentTime>div:nth-of-type(2) {
|
|
font-size: 14px;
|
|
color: #a8a8a8;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
.new2RightHeadRight {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.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;
|
|
transition: 0.6s cubic-bezier(0.58, -0.58, 0, 2.13);
|
|
}
|
|
|
|
.newButtonActive {
|
|
height: 15px;
|
|
width: 30px;
|
|
border-radius: 25px;
|
|
background: #11bea0;
|
|
}
|
|
|
|
.newRightTop {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.newRightContentBox {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
position: relative;
|
|
transition: 0.4s;
|
|
}
|
|
|
|
/*.newRightContentBox:hover{*/
|
|
/* background: white;*/
|
|
/*}*/
|
|
.newRightContent {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
right: 0;
|
|
user-select: none;
|
|
width: 50%;
|
|
}
|
|
|
|
.newRightContent>div {
|
|
padding-right: 30px;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.newRightContentLeft {
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.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: 35px;
|
|
bottom: 0;
|
|
}
|
|
|
|
/*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;
|
|
}
|
|
.showsDetailButton{
|
|
width: 150px;
|
|
display:flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #58c4b0;
|
|
color: white;
|
|
cursor: pointer;
|
|
margin: 0 auto;
|
|
padding: 5px;
|
|
text-decoration: none;
|
|
transition: 0.4s;
|
|
|
|
}
|
|
.showItemHandle{
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: start;
|
|
justify-content: center;
|
|
height: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
.showsDetailButton:hover{
|
|
background: #ffffff!important;
|
|
color: #58c4b0!important;
|
|
|
|
}
|
|
/*re shit*/
|
|
.showItemBox {
|
|
display: none;
|
|
}
|
|
|
|
.showItemBoxActive {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.showDetailBox2 {
|
|
display: none;
|
|
}
|
|
|
|
.showDetailBox2Active {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.showItem {
|
|
display: none !important;
|
|
}
|
|
|
|
.showItemActive {
|
|
display: flex !important;
|
|
}
|
|
|
|
.showsButtonActive{
|
|
display: flex;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
} |