修改新车详情页样式
This commit is contained in:
浅念
parent
329fbcf836
commit
ed56637b1b
@ -74,7 +74,7 @@
|
||||
padding: 0px 1px;
|
||||
}
|
||||
.as-nav-slider {
|
||||
margin: 24px 50px 0px !important;
|
||||
margin: -108px 50px 0px !important;
|
||||
}
|
||||
.vehica-car-card__info .cus-btn{
|
||||
height: 30px;
|
||||
@ -121,7 +121,7 @@
|
||||
height: 240px;
|
||||
}
|
||||
.as-nav-slider {
|
||||
margin: 24px 10px 0px !important;
|
||||
margin: -50px 10px 0px !important;
|
||||
}
|
||||
.tag{
|
||||
margin-left: 10px !important;
|
||||
|
||||
@ -271,50 +271,35 @@
|
||||
|
||||
|
||||
|
||||
/* 底部 */
|
||||
/* 底部 */
|
||||
@media (max-width: 820px) {
|
||||
.footer-why {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.footer-why {
|
||||
background: #ecf3f9;
|
||||
color: #2d74ba;
|
||||
background: #2d74ba;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
height: 10rem;
|
||||
height: 7rem;
|
||||
}
|
||||
.footer-why ul {
|
||||
padding: 0px 10px;
|
||||
height: 10rem;
|
||||
height: 7rem;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
.footer-why li {
|
||||
height: 10rem;
|
||||
height: 7rem;
|
||||
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
|
||||
} */
|
||||
|
||||
|
||||
|
||||
@ -634,9 +619,9 @@
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
margin: 0px;
|
||||
}
|
||||
.brand-item{
|
||||
width: 116px;
|
||||
}
|
||||
.brand-item{
|
||||
width: 116px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -758,10 +743,6 @@
|
||||
.slick-initialized .slick-slide {
|
||||
text-align: center;
|
||||
}
|
||||
.colorsib img{
|
||||
width:30%;
|
||||
}
|
||||
|
||||
.brand {
|
||||
position: relative;
|
||||
}
|
||||
@ -793,3 +774,42 @@
|
||||
.brand-toggle .fa {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.colorsib {
|
||||
padding: 0px 20px;
|
||||
}
|
||||
.color-slide-item p{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.color-slider-arrows {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none; /* 让箭头以外区域可点 */
|
||||
}
|
||||
.color-slider-arrows .arrow-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
pointer-events: auto; /* 让按钮可点 */
|
||||
}
|
||||
.color-slider-arrows .arrow-btn svg {
|
||||
width: 10px;
|
||||
}
|
||||
.color-slider-arrows .btn-prev {
|
||||
left: -16px;
|
||||
}
|
||||
.color-slider-arrows .btn-next {
|
||||
right: -16px;
|
||||
}
|
||||
|
||||
@ -39,6 +39,13 @@ $(function() {
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// $(".color-slider").slick({
|
||||
// slidesToShow: 3,
|
||||
// slidesToScroll: 1,
|
||||
// dots: false,
|
||||
// arrows: false,
|
||||
// });
|
||||
}
|
||||
// 生成HTML
|
||||
function generateslide(product) {
|
||||
@ -62,6 +69,19 @@ $(function() {
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function generateColorSlide(color) {
|
||||
if (!color.skuAttributes) {
|
||||
return '';
|
||||
}
|
||||
return `
|
||||
<div class="color-slide-item">
|
||||
<img src="${color.skuAttributes[0].img_full}" alt="car color">
|
||||
<p> ${color.skuAttributes[0].value_name}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// 渲染轮播图
|
||||
function renderbanner(lbdata) {
|
||||
const rentalslider = document.getElementById('rental-slider');
|
||||
@ -74,6 +94,15 @@ $(function() {
|
||||
).join('');
|
||||
initSlick()
|
||||
}
|
||||
|
||||
function renderColorSlider(colors) {
|
||||
if (!colors || colors.length === 0) {
|
||||
return;
|
||||
}
|
||||
const colorSlider = document.querySelector('.color-slider');
|
||||
colorSlider.innerHTML = colors.map(color => generateColorSlide(color)).join('');
|
||||
}
|
||||
|
||||
// Introduction
|
||||
function Introductionhtml(data){
|
||||
$(".nav-menu").append(
|
||||
@ -213,6 +242,10 @@ $(function() {
|
||||
$(".views").html(carinfo.views)
|
||||
$("#brands").html('<a href="brand.html?id='+carinfo.brand+'">'+carinfo.brand_name+'</a>')
|
||||
renderbanner(carinfo.album)
|
||||
// if (carinfo.sku) {
|
||||
// renderColorSlider(carinfo.sku);
|
||||
// }
|
||||
// initSlick();
|
||||
|
||||
Introductionhtml(carinfo.content)
|
||||
Highlightedhtml(carinfo.trait)
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 993 B After Width: | Height: | Size: 777 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 982 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 691 B |
Binary file not shown.
|
Before Width: | Height: | Size: 880 B After Width: | Height: | Size: 632 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.0 KiB |
@ -252,7 +252,23 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section>
|
||||
<div class="footer-why">
|
||||
<div class="xz-main">
|
||||
<ul class="row unstyled">
|
||||
<li class="col-lg-1 col-md-1"></li>
|
||||
<li class="col-lg-2 col-md-2 mb-24"><img src="assets/media/icons/zhuans.png" alt="" /> <span data-i18n="newcars.Fast"></span></li>
|
||||
<li class="col-lg-2 col-md-2 mb-24"><img src="assets/media/icons/proect.png" alt="" /><span data-i18n="newcars.Diverse"></span></li>
|
||||
<li class="col-lg-2 col-md-2 mb-24"><img src="assets/media/icons/meony.png" alt="" /><span data-i18n="newcars.Competitive"></span></li>
|
||||
<li class="col-lg-2 col-md-2 mb-24"><img src="assets/media/icons/zan.png" alt="" /><span data-i18n="newcars.Quality"></span></li>
|
||||
<li class="col-lg-2 col-md-2 mb-24"><img src="assets/media/icons/xing.png" alt="" /><span data-i18n="newcars.Operation"></span></li>
|
||||
<li class="col-lg-1 col-md-1"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container-fluid services pt-80 pb-80">
|
||||
<!-- 中间区域（左侧导航固定，右侧内容自由滚动） -->
|
||||
<div class="middle-container row" id="contapp">
|
||||
@ -407,29 +423,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- title end -->
|
||||
|
||||
<!-- vicheles-end -->
|
||||
|
||||
<!-- catagory -->
|
||||
|
||||
<!--Footer-start -->
|
||||
<section>
|
||||
<div class="footer-why">
|
||||
<div class="xz-main">
|
||||
<ul class="row unstyled">
|
||||
<li class="col-lg-1"></li>
|
||||
<li class="col-lg-2 col-md-6 col-sm-6 mb-24"><img src="assets/media/icons/zhuans.png" alt="" /> <span data-i18n="newcars.Fast"></span></li>
|
||||
<li class="col-lg-2 col-md-6 col-sm-6 mb-24"><img src="assets/media/icons/proect.png" alt="" /><span data-i18n="newcars.Diverse"></span></li>
|
||||
<li class="col-lg-2 col-md-6 col-sm-6 mb-24"><img src="assets/media/icons/meony.png" alt="" /><span data-i18n="newcars.Competitive"></span></li>
|
||||
<li class="col-lg-2 col-md-6 col-sm-6 mb-24"><img src="assets/media/icons/zan.png" alt="" /><span data-i18n="newcars.Quality"></span></li>
|
||||
<li class="col-lg-2 col-md-6 col-sm-6 mb-24"><img src="assets/media/icons/xing.png" alt="" /><span data-i18n="newcars.Operation"></span></li>
|
||||
<li class="col-lg-1"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- start -->
|
||||
|
||||
<!--Footer-start -->
|
||||
<!-- 底部 -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user