修改样式

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

@@ -635,6 +635,9 @@
         font-size: 12px;
         margin: 0px;
     }
+	.brand-item{
+	    width: 116px;
+	}
 }
 
 /* 移动端筛选按钮样式 */
@@ -758,3 +761,35 @@
 .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,6 +160,7 @@
 						<div class="col-lg-1 col-sm-2">
 						</div>
 						<div class="col-lg-11 col-sm-10 brand">
+							<div class="brand-container">
 								<div v-for="brand in brandListAll" 
 									:key="brand.id"
 									class="brand-item brand_brands"
@@ -167,6 +168,11 @@
 									@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>
 					<div class="filter-section row pt-40 al-c">