houde_web_api/public/static/css/headNavFoot.css
2023-04-16 23:05:17 +08:00

1058 lines
16 KiB
CSS

/*public*/
a {
text-decoration: none !important;
}
.f1 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
font-size: 15px;
}
.f2 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
font-size: 13px;
}
.f3 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
font-size: 13px;
}
.headerBox a {
text-decoration: none !important;
}
.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;
}
/*.phoneReactive {*/
/* height: 315px !important;*/
/*}*/
.posterReactive {
height: 344px !important;
}
.showReactive {
/*height: 744px!important;*/
}
.showsBox {
width: 100% !important;
}
.productItem {
height: 520px !important;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
/*.phoneReactive {*/
/* height: 420px !important;*/
/*}*/
.posterReactive {
height: 400px !important;
}
.phoneProductInfoReactive {
height: 420px !important;
}
/*.showReactive {*/
/* height: 440px !important;*/
/*}*/
}
@media (min-width: 991px) {
.container {
max-width: 960px;
}
/*.phoneReactive {*/
/* height: 471px !important;*/
/*}*/
.posterReactive {
height: 472px !important;
}
.phoneProductInfoReactive {
height: 520px !important;
}
.showReactive {
height: 650px !important;
}
.show-items {
height: 337px !important;
}
.productsBigBox {
max-width: 1028px !important;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
/*.phoneReactive {*/
/* height: 700px !important;*/
/*}*/
.posterReactive {
height: 515px !important;
}
.phoneProductInfoReactive {
height: 620px !important;
}
.showReactive {
height: 715px !important;
}
.aboutCertificate {
display: -webkit-box;
overflow: hidden;
position: absolute !important;
bottom: 30px !important;
}
.show-items {
height: 370px !important;
}
.productsBigBox {
max-width: 1248px !important;
}
}
@media (min-width: 1540px) {
.container {
max-width: 1440px;
}
/*.phoneReactive {*/
/* height: 900px !important;*/
/*}*/
.posterReactive {
height: 605px !important;
}
.phoneProductInfoReactive {
height: 720px !important;
}
.showReactive {
height: 834px !important;
}
.show-items {
height: 429px !important;
}
.productsBigBox {
max-width: 1588px !important;
}
}
@media (max-width: 1273px) {
.phoneHeadNone {
display: none !important;
overflow: hidden;
}
.phoneBlock-head {
display: flex !important;
justify-content: right;
justify-content: flex-end;
padding-left: 55%;
margin-right: 4%;
width: 100%;
}
.phoneMoreBlockImportant {
display: block !important;
;
}
}
@media (max-width: 991px) {
.phoneNone {
display: none !important;
}
.showLine {
border-right: 1px solid rgb(51, 186, 164) !important;
}
}
@media (max-width: 993px) {
.phoneBlock {
display: block;
}
.phoneBlockImportant {
display: block !important;
;
}
.phoneShowContentBoxFlex {
display: flex !important;
}
.phone-f-c {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.phone-w-100 {
width: 100% !important;
}
.phoneFoot-df_jc_ac_fc {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column !important;
}
.phoneShowItem {
display: flex;
flex-direction: column;
!important;
justify-content: center;
!important;
align-items: center;
!important;
}
}
@media (max-width: 588px) {
.phoneSmallNone {
display: none !important;
}
.phoneSmallBlock {
display: block;
}
/*.phoneReactive {*/
/* height: 215px !important;*/
/*}*/
.swiper-button-prev {
display: none !important;
}
.swiper-button-next {
display: none !important;
}
.posterReactive {
height: 230px !important;
}
.phoneProductInfoReactive {
height: 400px !important;
}
.showsBox {
width: 100% !important;
}
.showButtonBox .showButton {
width: 85%;
}
.showLeftButton>img,
.showRightButton>img {
cursor: pointer;
padding: 0;
}
.showReactive {
/*height: 550px!important;*/
}
.showImg {
/*height: 430px!important;*/
}
.productItem {
height: 520px !important;
}
}
/* max-width:570px */
@media (max-width:575px) {
.showLine {
border-right: 1px solid rgb(250, 250, 250) !important;
}
}
@media (max-width: 350px) {
.psHead {
width: 185px !important;
}
.posterReactive {
height: 162px !important;
}
/*.phoneReactive {*/
/* height: 142px !important;*/
/*}*/
.pscontainer {
padding: 0 !important;
}
.pscontainer>.productsBox {
padding: 20px 0 20px 0 !important;
}
.phoneProductInfoReactive {
height: 350px !important;
}
.productItem {
height: 520px !important;
}
}
/*修改*/
.phoneBlock-head {
padding-left: 150px;
}
.phoneReactive{
width: 100%!important;
height: 49vw!important;
}
/*pc端*/
/*menu*/
/* .productMenusItem{
color: black;
} */
.phoneHideBox {
z-index: 9999;
backdrop-filter: blur(2px);
background: rgba(0, 10, 10, 0.5);
color: white;
height: 100vh;
width: 100%;
overflow-y: auto;
position: fixed;
}
.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;
}
/*nav*/
.swiper-slide img {
position: relative;
left: auto;
top: auto;
/* transform: translate(0) scale(1.02); */
width: 100%;
max-width: none;
transition: all 1.8s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
.swiper-slide-active img,
.swiper-slide-duplicate-active img {
transition: 1s linear;
transform: translate(0) scale(1) !important;
z-index: 99;
}
.navHeader {
display: flex;
flex-direction: column;
}
.navHeader>a {
padding: 30px;
cursor: pointer;
border-bottom: 1px solid #e2e3e5;
font-weight: 600;
transition: 0.6s;
color: white !important;
}
.navHeader>a:hover {
background: #e2e3e5;
color: #4e555b;
}
.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;
color: white !important;
}
.sMenuBox {
display: flex;
flex-direction: column;
}
.sMenu:hover {
background: #e2e3e5;
color: #4e555b;
}
/*head*/
.headerBox {
background: #11bea0;
position: fixed;
margin-left: 0;
margin-right: 0;
width: 100%;
margin-bottom: 0;
z-index: 1001;
padding: 3px;
}
.headList {
margin-left: 40%;
margin-right: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 20px;
transition: 0.4s;
}
.headList>.f1 {
font-weight: 600;
margin: 0 20px 0 10px;
cursor: pointer;
color: white;
font-size: 16px;
transition: 0.4s;
height: 65px;
line-height: 65px;
width: 70px;
text-align: center;
}
.headList>.f1:after {
content: ' ';
position: relative;
z-index: 2;
display: block;
margin: -2px 0 0 0;
height: 2px;
}
.headList>.f1:hover:after {
height: 2px;
animation: ad_width .2s linear forwards;
background: #ffffff;
}
@keyframes ad_width {
from {
width: 0
}
to {
width: 100%
}
}
.active {
background: #4e555b;
color: white;
font-weight: 500;
}
.headerIcon {
height: 115px;
position: absolute;
margin: -11px 1.5%;
width: 315px;
padding: 0 !important;
z-index: -15;
}
.headerIcon>img {
height: 50%;
/* width: 80%; */
/* position: absolute; */
/* z-index: -50; */
margin: 15px 60px;
}
.headerIcon2 {
height: 84px;
position: absolute;
margin: -11px 1.5%;
width: 263px;
padding: 0 !important;
display: none;
}
.headerIcon2>img {
height: 50%;
margin: 20px 60px 20px 0;
}
.phoneBlock>div {
padding: 20px 10px 25px 16px;
}
.search {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.search>img {
cursor: pointer;
height: 20px;
width: 20px;
}
.moreButton {
display: none;
}
.moreButton>img {
cursor: pointer;
height: 20px;
width: 20px;
}
.index a {
text-decoration: none !important;
}
.messagePhone {
padding: 6px 10px 0 16px !important;
color: white;
}
.messagePhone>div:nth-of-type(1) {
font-size: 18px;
!important;
}
.messagePhone>div:nth-of-type(2) {
font-weight: 600;
font-size: 24px;
!important;
width: 180px;
}
/*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;
color: #7a7a7a !important;
}
.footRightTitle {
font-weight: 550;
font-size: 18px;
}
.footRightContent {
display: flex;
justify-content: left;
flex-direction: column;
color: #7a7a7a;
font-weight: 550;
}
.footRightContent>a {
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;
height: 100%;
}
.footRightBoxImgItem>img {
height: 100%;
width: 100%;
}
.footRightBoxImgItemText {
font-size: 8px;
color: #7a7a7a;
text-align: center;
}
.footFootBox {
margin: 20px auto;
width: 100%;
}
.footFootBox>div {
color: #7a7a7a;
font-size: 15px;
font-weight: 550;
font-family: "Microsoft YaHei", ;
}
/*nav*/
.swiper {
width: 100%;
height: 900px;
}
.swiper-slide>img {
height: 100% !important;
width: 100% !important;
object-fit: fill;
}
.swiper-pagination>span {
cursor: pointer;
}
.swiper-button-prev:after {
color: #989899 !important;
}
.swiper-button-next:after {
color: #989899 !important;
}
.swiper-pagination-bullet-active {
background: #11bea0 !important;
}
.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;
}
.navIcon {
position: absolute;
display: flex;
justify-content: space-between;
align-items: center;
height: 500px;
top: 0;
left: 0;
width: 100%;
}
.navIcon>div {
height: 50px;
width: 50px;
cursor: pointer;
margin: 0 40px;
}
.navIcon img {
height: 100%;
width: 100%;
}
.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;
font-family: "Microsoft YaHei", ;
}
.titleBottom>span:nth-of-type(1) {
color: #2faf94;
}
.titleBottom>span:nth-of-type(2) {
color: #e1e1e1;
}
/*搜索*/
.searchBox:focus {
outline: none;
}
.searchBigBox {
height: 0;
width: 100%;
position: fixed;
z-index: 99999;
top: 75px;
left: 0;
text-align: center;
transition: 0.8s;
background: #11bea0;
padding-top: 0;
}
.searchBox {
height: 80%;
width: 80%;
margin: 0 auto;
border: none;
border-radius: 10px 10px 10px 10px;
display: none;
transition: 0.4s;
padding-left: 20px !important;
}
.searchDetail {
width: 80%;
display: none;
background: white;
margin: 0 auto;
text-align: left;
border-radius: 0 0 10px 10px;
}
.searchDetailItem {
padding: 20px;
text-decoration: none !important;
display: inline-block;
width: 100%;
color: #000000;
overflow: hidden;
overflow-y: visible;
overflow-x: visible;
}
/*score*/
::-webkit-scrollbar {
width: 10px;
background-color: white;
}
::-webkit-scrollbar-thumb {
border-radius: 20px;
background: linear-gradient(#ffffff, #7cbe8b, #429b57, #1e7e34);
}