修改样式

assets/css/index.css

@@ -757,14 +757,17 @@ input:focus {
     background-color: #f7f8fc;
 }
 .brand_brands{
-    /* width: 120px; */
+    width: 120px;
     padding: 2px 10px;
     flex: none;
     margin: 0px 0;
     font-size: 13px;
     line-height: 20px;
-    overflow: hidden;
     cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+	display: inline-block;
 }
 /* .brand_brands:hover{
 	color:  #2d74ba;

assets/css/newcar.css

@@ -68,7 +68,7 @@
 }
 
 .brand-intro .wp-block-media-text__content p {
-    margin: 0 0 1.5em;
+    margin: 0 0 1.5em;
 	white-space: pre-line;
 }
 
@@ -129,7 +129,7 @@
     margin-bottom: 4rem;
     margin-top: 8rem;
 }
-.facetwp-facet .facetwp-radio {
+.facetwp-facet .facetwp-radio {
 	cursor: pointer;
     background: #ecf3f9;
     border-radius: .4rem;
@@ -634,7 +634,10 @@
         border-radius: 4px;
         font-size: 12px;
         margin: 0px;
-    }
+    }
+	.brand-item{
+	    width: 116px;
+	}
 }
 
 /* 移动端筛选按钮样式 */
@@ -709,8 +712,8 @@
 	.facetwp-facet .facetwp-radio {
 	    background: #ecf3f9;
 	    color: #2d74ba;
-	    display: flex;
-		justify-content: center;
+	    display: flex;
+		justify-content: center;
 		align-items: center;
 	    font-size: 11px;
 	    font-weight: 600;
@@ -722,29 +725,29 @@
 	    background: #2d74ba;
 	    border-radius: .2rem;
 	    color: #fff
-	}
-	.nav-menu{
-		margin-bottom: 2px !important;
-	}
-	.nav-item {
-		margin-bottom: 5px !important;
-		width: 48%;
-		margin: auto 1%;
-		display: inline-block;
-		border: 1px solid #2d74ba;
-		border-radius: 4px;
-		text-align: center;
-	}
-	.sidebar {
-	    padding: 10px 0px 0px !important;
-		z-index: 11;
-		background: #ffff;
-	}
-	
-	
-	
-	
-	
+	}
+	.nav-menu{
+		margin-bottom: 2px !important;
+	}
+	.nav-item {
+		margin-bottom: 5px !important;
+		width: 48%;
+		margin: auto 1%;
+		display: inline-block;
+		border: 1px solid #2d74ba;
+		border-radius: 4px;
+		text-align: center;
+	}
+	.sidebar {
+	    padding: 10px 0px 0px !important;
+		z-index: 11;
+		background: #ffff;
+	}
+	
+	
+	
+	
+	
 	
 }
 .brandactive {
@@ -754,7 +757,39 @@
 
 .slick-initialized .slick-slide {
     text-align: center;
-}
-.colorsib img{
-	width:30%;
+}
+.colorsib img{
+	width:30%;
+}
+
+.brand {
+    position: relative;
+}
+
+.brand-container {
+    max-height: 150px;
+    overflow: hidden;
+    transition: max-height 0.3s ease-in-out;
+    width: 100%;
+}
+
+.brand-container.expanded {
+    max-height: none;
+}
+
+.brand-toggle {
+    text-align: center;
+    padding: 10px 0;
+    cursor: pointer;
+    color: #2D74BA;
+    font-size: 14px;
+    width: 100%;
+}
+
+.brand-toggle:hover {
+    color: #1a5a9c;
+}
+
+.brand-toggle .fa {
+    margin-left: 5px;
 }

assets/js/newcar.js

@@ -27,6 +27,7 @@ $(function() {
 			is_hot:'',
 			isnone:false,
 			isFilterOpen: false, // 控制筛选面板的开关状态
+			isBrandsExpanded: false,
 		},
 		computed: {
 			// 当前页数据（前端分页）
@@ -175,6 +176,15 @@ $(function() {
 			godetil(item) {
 				window.location.href = 'newcar-details.html?id=' + item.id
 			},
+			toggleBrands() {
+				this.isBrandsExpanded = !this.isBrandsExpanded;
+				const container = document.querySelector('.brand-container');
+				if (this.isBrandsExpanded) {
+					container.classList.add('expanded');
+				} else {
+					container.classList.remove('expanded');
+				}
+			},
 		},
 	})
 })

newcar.html

@@ -160,12 +160,18 @@
 						<div class="col-lg-1 col-sm-2">
 						</div>
 						<div class="col-lg-11 col-sm-10 brand">
-							<div v-for="brand in brandListAll" 
-								:key="brand.id"
-								class="brand-item brand_brands"
-								:class="{brandactive: selectedBrand === brand.id}"
-								@click="selectBrand(brand.id)"
-							><img :src="brand.logo_full" alt="" />{{brand.name}}</div>
+							<div class="brand-container">
+								<div v-for="brand in brandListAll" 
+									:key="brand.id"
+									class="brand-item brand_brands"
+									:class="{brandactive: selectedBrand === brand.id}"
+									@click="selectBrand(brand.id)"
+								><img :src="brand.logo_full" alt="" />{{brand.name}}</div>
+							</div>
+							<div class="brand-toggle" v-if="brandListAll.length > 12">
+								<span class="toggle-text" @click="toggleBrands">{{ isBrandsExpanded ? 'Collapse' : 'Expand' }} <i class="fa" :class="isBrandsExpanded ? 'fa-angle-up' : 'fa-angle-down'"></i></span>
+								
+							</div>
 						</div>
 						
 					</div>