diff --git a/assets/css/index.css b/assets/css/index.css index 9e8d4a8..4fcc7de 100755 --- a/assets/css/index.css +++ b/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; diff --git a/assets/css/newcar.css b/assets/css/newcar.css index c62d03c..e98f168 100755 --- a/assets/css/newcar.css +++ b/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; } diff --git a/assets/js/newcar.js b/assets/js/newcar.js index a51f997..6c9ae77 100755 --- a/assets/js/newcar.js +++ b/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'); + } + }, }, }) }) \ No newline at end of file diff --git a/newcar.html b/newcar.html index 9e4ba01..8c5cbf3 100755 --- a/newcar.html +++ b/newcar.html @@ -160,12 +160,18 @@
-
{{brand.name}}
+
+
{{brand.name}}
+
+
+ {{ isBrandsExpanded ? 'Collapse' : 'Expand' }} + +