修改新车详情页样式

assets/css/index.css

@@ -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;

assets/css/newcar.css

@@ -272,49 +272,34 @@
 
 
 /* 底部 */
+@media (max-width: 820px) {
     .footer-why {
-    background: #ecf3f9;
+		display: none;
-	color: #2d74ba;
+    }
+}
+.footer-why {
+    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
-} */
 
 
 
@@ -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;
+}

assets/js/newcar-details.js

@@ -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)

newcar-details.html

@@ -253,6 +253,22 @@
     	</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 -->
 	<!-- 底部 -->