735 lines
13 KiB
CSS
Executable File
735 lines
13 KiB
CSS
Executable File
/* 品牌页 */
|
|
.toppic {
|
|
position: relative;
|
|
}
|
|
.toppic>img {
|
|
display: block;
|
|
-o-object-fit: cover;
|
|
object-fit: cover;
|
|
pointer-events: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
width: 100%;
|
|
}
|
|
.toppic-x {
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
color: #fff !important;
|
|
}
|
|
.breadcrumbs-x .xz-main {
|
|
align-items: center;
|
|
display: flex;
|
|
height: 7rem
|
|
}
|
|
|
|
.toppic-x .breadcrumbs-x {
|
|
background: none;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%
|
|
}
|
|
#breadcrumbs span {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
gap: 1rem;
|
|
}
|
|
.toppic_content {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-flow: column;
|
|
height: 100%;
|
|
justify-content: center
|
|
}
|
|
|
|
.toppic_tit {
|
|
margin: 0;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.toppic-case-single .toppic_content {
|
|
align-items: flex-start
|
|
}
|
|
|
|
.brand-intro .wp-block-media-text__media {
|
|
align-self: start!important
|
|
}
|
|
|
|
.brand-intro .wp-block-media-text__media img {
|
|
border-radius: .8rem
|
|
}
|
|
|
|
.brand-intro .wp-block-media-text__content {
|
|
color: #333;
|
|
padding: 0 13.8% 0 0!important
|
|
}
|
|
|
|
.brand-intro .wp-block-media-text__content p {
|
|
margin: 0 0 1.5em;
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.brand-intro .wp-block-media-text__content h2 {
|
|
display: inline-flex;
|
|
flex-flow: column;
|
|
font-size: 3rem;
|
|
line-height: 1.2em;
|
|
margin: 0 0 2rem;
|
|
position: relative
|
|
}
|
|
|
|
.brand-intro .wp-block-media-text__content h2:after {
|
|
background: #2c9f1c;
|
|
border-radius: .5rem;
|
|
content: "";
|
|
display: block;
|
|
height: .3rem;
|
|
margin-top: 2rem;
|
|
width: 100%
|
|
}
|
|
|
|
.brand-cover {
|
|
padding-bottom: 3.5rem!important;
|
|
padding-top: 7rem!important
|
|
}
|
|
|
|
.brand-cover .wp-block-cover__inner-container {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-flow: column;
|
|
gap: 2.5rem;
|
|
margin: 0 auto;
|
|
max-width: 95rem
|
|
}
|
|
|
|
.brand-cover .wp-block-cover__inner-container p {
|
|
margin: 0
|
|
}
|
|
|
|
.brand-cover .wp-block-cover__inner-container:after {
|
|
align-items: center;
|
|
background: #2c9f1c;
|
|
border-radius: .8rem;
|
|
color: #fff;
|
|
content: "\e603";
|
|
display: flex;
|
|
font-family: iconfont;
|
|
font-size: 2rem;
|
|
height: 6.8rem;
|
|
justify-content: center;
|
|
width: 6.8rem
|
|
}
|
|
.facetwp-facet {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
margin-bottom: 4rem;
|
|
margin-top: 8rem;
|
|
}
|
|
.facetwp-facet .facetwp-radio {
|
|
cursor: pointer;
|
|
background: #ecf3f9;
|
|
border-radius: .4rem;
|
|
color: #2d74ba;
|
|
display: block;
|
|
font-weight: 700;
|
|
/* line-height: 3rem; */
|
|
padding: 0.4rem 1.7rem;
|
|
transition: all .3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.facetwp-facet .facetwp-radio.checked{
|
|
background: #2d74ba;
|
|
color: #fff;
|
|
}
|
|
/* brand 轮播图 */
|
|
.slick-prev:before,.slick-next:before {
|
|
color: #000000 !important;
|
|
}
|
|
.slick-prev {
|
|
left: -3vw;
|
|
}
|
|
.slick-next {
|
|
right: -3vw;
|
|
}
|
|
/* 设置间距 */
|
|
.slick-slide {
|
|
margin: 0 10px; /* 左右各 10px 间距 */
|
|
}
|
|
|
|
/* 调整幻灯片宽度（确保计算正确） */
|
|
.slick-list {
|
|
margin: 0 -10px; /* 抵消边缘间距 */
|
|
}
|
|
.xz-card-68ae {
|
|
margin-top: 5.2rem
|
|
}
|
|
|
|
.xz-cards-68ae .xz-card-68ae .tit {
|
|
color: #333;
|
|
font-family: Inter-Bold,Inter;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
line-height: 2rem;
|
|
margin: 0;
|
|
position: relative
|
|
}
|
|
|
|
.xz-cards-68ae .xz-card-68ae .tit:before {
|
|
background-color: #2d74ba;
|
|
bottom: -2rem;
|
|
content: "";
|
|
height: .2rem;
|
|
position: absolute;
|
|
width: 4rem
|
|
}
|
|
|
|
.xz-cards-68ae .xz-card-68ae .txt {
|
|
color: #666;
|
|
font-family: Inter-Regular,Inter;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
line-height: 1.5rem;
|
|
margin: 0;
|
|
padding-top: 3.4rem
|
|
}
|
|
|
|
.xz-cards-86ae {
|
|
margin-bottom: 12rem;
|
|
margin-top: 12rem
|
|
}
|
|
|
|
.xz-cards-86ae .xz-card-86ae {
|
|
display: flex;
|
|
position: relative
|
|
}
|
|
|
|
.xz-cards-86ae .xz-card-86ae .tit {
|
|
color: #333;
|
|
font-family: Inter-Black,Inter;
|
|
margin: 0;
|
|
padding-bottom: 4.6rem;
|
|
padding-top: 8rem
|
|
}
|
|
|
|
.xz-cards-86ae .xz-card-86ae .txt {
|
|
color: #333;
|
|
font-family: Inter-Regular,Inter;
|
|
font-size: 1.6rem;
|
|
font-weight: 400;
|
|
line-height: 2.4rem;
|
|
margin: 0;
|
|
padding-bottom: 8.6rem
|
|
}
|
|
|
|
|
|
|
|
.form-card{
|
|
background: #fff;
|
|
box-shadow: 0 .2rem 4rem 0 rgba(0, 0, 0, .1);
|
|
}
|
|
.form-infos {
|
|
padding:6.4rem 6rem 8.8rem 5.2rem;
|
|
background:#2d74ba;
|
|
}
|
|
.contact-info-item {
|
|
display: flex;
|
|
gap: 1.2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.contact-info-item img{
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
.contact-info-tit{
|
|
color: #c0c0c0;
|
|
font-size: 0.8rem;
|
|
line-height: 1.2rem;
|
|
margin: 0 0 0.5rem;
|
|
}
|
|
.form-card .xz-sns-ul {
|
|
margin-top: 5rem;
|
|
}
|
|
.xz-sns-ul {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 3.2rem;
|
|
justify-content: flex-start;
|
|
transform: translateX(-2px);
|
|
}
|
|
.contact-info-a {
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
line-height: 1.5rem;
|
|
transition: all .3s ease;
|
|
}
|
|
|
|
|
|
|
|
/* 底部 */
|
|
.footer-why {
|
|
background: #ecf3f9;
|
|
color: #2d74ba;
|
|
font-weight: 700;
|
|
height: 10rem;
|
|
}
|
|
.footer-why ul {
|
|
padding: 0px 10px;
|
|
height: 10rem;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
.footer-why li {
|
|
height: 10rem;
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
/* footer-why .xz-main {
|
|
height: 12.6rem;
|
|
}
|
|
.footer-why ul {
|
|
height: 100%;
|
|
justify-content: space-between
|
|
}
|
|
.xz-main {
|
|
margin: 0 auto;
|
|
width: clamp(1200px,calc(760px + 34.375vw),1440px);
|
|
}
|
|
.footer-why li,.footer-why ul {
|
|
align-items: center;
|
|
display: flex
|
|
} */
|
|
|
|
.footer-why li {
|
|
font-weight: 700;
|
|
/* gap: 1rem */
|
|
}
|
|
/*
|
|
.footer-why i {
|
|
font-size: 3rem;
|
|
font-weight: 400
|
|
} */
|
|
|
|
|
|
|
|
/* 新车详情 */
|
|
.live-sec-tit-nav {
|
|
font-size: 1.1rem;
|
|
line-height: 1.2em;
|
|
padding-left: 1.8rem;
|
|
}
|
|
.single-sider-x {
|
|
padding-top: 4rem;
|
|
position: sticky;
|
|
top: 1rem;
|
|
}
|
|
.live-sec-tit-nav .nav-item {
|
|
margin-bottom: 2.2rem;
|
|
position: relative;
|
|
}
|
|
.live-sec-tit-nav .nav-item:before {
|
|
background: transparent;
|
|
border-radius: .3rem;
|
|
content: "";
|
|
display: block;
|
|
height: 100%;
|
|
left: -1.8rem;
|
|
position: absolute;
|
|
top: 0;
|
|
transition: all .3s ease;
|
|
width: .3rem;
|
|
}
|
|
|
|
.live-sec-tit-nav .nav-item.current {
|
|
color: #333;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.live-sec-tit-nav .nav-item.current:before {
|
|
background: #2D74BA;
|
|
}
|
|
/* {
|
|
color: #333;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
scroll-behavior: smooth;
|
|
} */
|
|
.wp-block-heading {
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
margin: 0 0 3rem;
|
|
}
|
|
|
|
.pro-para-ls {
|
|
background: #f9fef8;
|
|
-moz-columns: 2;
|
|
column-count: 2;
|
|
-moz-column-rule: .1rem solid #ddd;
|
|
column-rule: .1rem solid #ddd;
|
|
gap: 10%;
|
|
padding: 3.6rem 6.2%
|
|
}
|
|
|
|
.pro-para-ls li {
|
|
align-items: baseline;
|
|
display: flex;
|
|
margin-bottom: 3rem
|
|
}
|
|
|
|
.pro-para-ls li strong {
|
|
color: #666;
|
|
flex: none;
|
|
font-weight: 400;
|
|
margin-right: 1.5rem;
|
|
min-width: 15rem
|
|
}
|
|
|
|
.pro-para-ls li a {
|
|
color: #666;
|
|
font-size: smaller;
|
|
margin: 0 0 0 1rem;
|
|
text-decoration: underline;
|
|
transition: all .3s ease
|
|
}
|
|
|
|
.pro-para-ls li a:hover {
|
|
color: #2c9f1c
|
|
}
|
|
|
|
.pro-para-ls li:last-child {
|
|
margin-bottom: 0
|
|
}
|
|
|
|
.pro-feature-ls {
|
|
-moz-columns: 2;
|
|
column-count: 2;
|
|
padding-top: 1rem
|
|
}
|
|
|
|
.pro-feature-ls li {
|
|
display: flex;
|
|
margin-bottom: 3rem
|
|
}
|
|
|
|
.pro-feature-ls li:last-child {
|
|
margin-bottom: 0
|
|
}
|
|
|
|
.pro-feature-ls li em {
|
|
-webkit-font-smoothing: antialiased;
|
|
-webkit-text-stroke-width: .2px;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
color: #666;
|
|
font-family: iconfont;
|
|
font-size: 2.4rem;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
margin-right: 1rem
|
|
}
|
|
|
|
.wp-block-yoast-faq-block {
|
|
background: #f8f8f8;
|
|
padding: 2rem 5.3%
|
|
}
|
|
.content iframe {
|
|
aspect-ratio: 16 / 9;
|
|
display: block;
|
|
}
|
|
.pcontenth2{
|
|
padding-top: 4rem;
|
|
}
|
|
.schema-faq-section {
|
|
border-bottom: .1rem solid #ddd;
|
|
padding: 2rem 0
|
|
}
|
|
|
|
.schema-faq-section:last-of-type {
|
|
border-bottom: none
|
|
}
|
|
|
|
.schema-faq-answer, .schema-faq-question {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 2rem
|
|
}
|
|
|
|
.schema-faq-answer:before, .schema-faq-question:before {
|
|
align-items: center;
|
|
background: #999;
|
|
border-radius: .4rem;
|
|
color: #fff;
|
|
content: "Q";
|
|
display: flex;
|
|
flex: none;
|
|
font-weight: 700;
|
|
height: 2.2rem;
|
|
justify-content: center;
|
|
width: 2.2rem
|
|
}
|
|
|
|
.schema-faq-answer {
|
|
color: #666;
|
|
font-size: 1rem;
|
|
margin-bottom: 0;
|
|
margin-top: 2.2rem
|
|
}
|
|
|
|
.schema-faq-answer:before {
|
|
background: #2d74ba;
|
|
content: "A"
|
|
}
|
|
|
|
.wp-block-list {
|
|
margin: 4rem 0;
|
|
padding: 0
|
|
}
|
|
|
|
.wp-block-list li:not(:last-child) {
|
|
margin-bottom: 2rem
|
|
}
|
|
|
|
.wp-block-list li {
|
|
padding-left: 3rem;
|
|
position: relative
|
|
}
|
|
|
|
.wp-block-list li:before {
|
|
background: #2c9f1c;
|
|
border-radius: 50%;
|
|
content: "";
|
|
display: block;
|
|
height: 1rem;
|
|
left: 0;
|
|
position: absolute;
|
|
top: .5em;
|
|
width: 1rem
|
|
}
|
|
|
|
.wp-block-list li strong {
|
|
display: block;
|
|
margin-bottom: .5rem
|
|
}
|
|
|
|
.nav-link {
|
|
color: #333;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
display: block;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: #2D74BA;
|
|
}
|
|
|
|
/* newcar */
|
|
.topimg img{
|
|
width: 100%;
|
|
max-height: 400px;
|
|
}
|
|
.energy{
|
|
flex: 1;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
padding: 2px 12px 12px;
|
|
}
|
|
.energy-item{
|
|
flex: none;
|
|
padding: 2px 10px;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media (max-width: 767px){
|
|
.form-infos {
|
|
padding: 4rem 2rem 4rem 3rem;
|
|
}
|
|
.footer-why li,.footer-why ul {
|
|
height: 2rem;
|
|
align-items: center;
|
|
display: flex
|
|
}
|
|
|
|
/* 搜索模块左侧折叠样式 */
|
|
.filter-wrapper {
|
|
position: fixed;
|
|
top: 58px;
|
|
left: -85%;
|
|
width: 85%;
|
|
height: calc(100vh - 58px);
|
|
background: #fff;
|
|
z-index: 5;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.filter-wrapper.expanded {
|
|
left: 0;
|
|
}
|
|
|
|
.filter-toggle {
|
|
position: absolute;
|
|
right: -30px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 30px;
|
|
height: 60px;
|
|
background: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0 4px 4px 0;
|
|
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
|
|
cursor: pointer;
|
|
z-index: 6;
|
|
}
|
|
|
|
.filter-toggle i {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.filter-wrapper.expanded .filter-toggle i {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.filter-content {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding: 15px;
|
|
}
|
|
|
|
/* 调整内容区域位置 */
|
|
.ride.my-80 {
|
|
margin-top: 80px !important;
|
|
}
|
|
|
|
/* 优化筛选器样式 */
|
|
.alphabet-filter {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0px;
|
|
}
|
|
|
|
.alphabet-item {
|
|
/* padding: 5px 10px; */
|
|
/* background: #f5f5f5; */
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
}
|
|
.brand{
|
|
padding: 6px 0px;
|
|
}
|
|
.brand-item, .energy-item {
|
|
padding: 3px 8px;
|
|
/* background: #f5f5f5; */
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
margin: 0px;
|
|
}
|
|
}
|
|
|
|
/* 移动端筛选按钮样式 */
|
|
.mobile-filter-toggle {
|
|
position: fixed;
|
|
left: 0;
|
|
/* top: 50%; */
|
|
transform: translateY(-50%);
|
|
z-index: 2;
|
|
}
|
|
|
|
.filter-btn {
|
|
background: #2D74BA;
|
|
color: white;
|
|
border: none;
|
|
padding: 6px 15px;
|
|
border-radius: 0 5px 5px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
/* gap: 8px; */
|
|
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.filter-btn i {
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* 筛选容器样式 */
|
|
.filter-container {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.filter-container {
|
|
position: fixed;
|
|
left: -100%;
|
|
top: 0;
|
|
width: 80%;
|
|
height: 100vh;
|
|
background: white;
|
|
z-index: 1001;
|
|
padding: 20px;
|
|
overflow-y: auto;
|
|
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.filter-container.active {
|
|
left: 0;
|
|
}
|
|
|
|
/* 遮罩层 */
|
|
.filter-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 1000;
|
|
}
|
|
.filter-overlay.active {
|
|
display: block;
|
|
}
|
|
.facetwp-facet{
|
|
display: flex;
|
|
gap: .2rem;
|
|
margin-bottom: 2rem;
|
|
margin-top: 2rem;
|
|
overflow-x: auto
|
|
}
|
|
.facetwp-facet .facetwp-radio {
|
|
background: #ecf3f9;
|
|
color: #2d74ba;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
padding: 5px 10px;
|
|
text-align: center;
|
|
transition: all .3s ease;
|
|
}
|
|
.facetwp-facet .facetwp-radio:hover {
|
|
background: #2d74ba;
|
|
border-radius: .2rem;
|
|
color: #fff
|
|
}
|
|
}
|
|
.brandactive {
|
|
background: #2d74ba;
|
|
color: white;
|
|
}
|
|
|
|
.slick-initialized .slick-slide {
|
|
text-align: center;
|
|
}
|