修改新车详情页样式

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)