产品类型排版逻辑

assets/css/style.css

@@ -3184,7 +3184,7 @@
                 height: 49px;
                 line-height: 49px;
                 color:#fff;
-                background: url(http://usky.cn/assets/v1/images/h1_bg.png) no-repeat;
+                /* background: url(http://usky.cn/assets/v1/images/h1_bg.png) no-repeat; */
                 position:absolute;
                 left:0;
                 top:35px;
@@ -4173,6 +4173,7 @@
             }
             
             .product-grid-section ul a {
+                vertical-align: bottom;
                 /* width: 10%; */
                 height: 100%;
                 display: -ms-flexbox;
@@ -4181,28 +4182,42 @@
                 justify-content: center;
                 -ms-flex-align: center;
                 align-items: center;
-                background-color: rgba(210, 227, 255, 1);
-                color: #409eff;
+                /* background-color: rgba(210, 227, 255, 1); */
+                background: rgba(0,0,0,0.3);
+                
+                border: 1px solid rgba(255,255,255,0.6);    
+                color: #fff;
                 font-size: 16px;
                 font-weight: bold;
-                padding: 20px 20px;
+                /* padding: 20px 20px; */
+                height:90px;
+                line-height:90px;
                 display: inline-block;
-                margin: 0 10px 5px;
+                margin: 0 ;
+            }
+            .product-grid-section ul{
+                height:110px;
+                line-height:110px;
+                
             }
-            
             .product-grid-section ul a.active,
             .product-grid-section ul a:hover {
-                background-color: #409eff;
+                height:110px;
+                line-height:110px;
+                background: linear-gradient(0deg, rgba(255,255,255,0.3), rgba(50,133,216,0.3));
+                border: 1px solid #43648B;
                 color: white;
                 cursor: pointer;
+                vertical-align: bottom;
             }
             
             .product-grid-section ul a.active {
                 color: #fff;
+                
             }
             
             .product-grid-section ul a:hover {
-                background-color: #409eff;
+                
                 color: white !important;
                 cursor: pointer;
             }
@@ -4211,9 +4226,13 @@
 
                 .product-grid-section ul a {
                     text-align: center;
-                    padding: 13px 10px;
                     font-size:15px;
-                    margin: 0 4px 5px
+                    height:75px;
+                    line-height:75px
+                }
+                .product-grid-section ul a.active, .product-grid-section ul a:hover {
+                    height: 90px;
+                    line-height: 90px;
                 }
                 .product-grid-section .content .img {
                     height: 180px;
@@ -4233,11 +4252,21 @@
                 }
                 .product-grid-section ul a {
                 
-                    padding: 13px 13px ;
+                    padding:0;
                 }
             }
             
             @media (max-width: 575px) {
+                .product-grid-section ul a {
+                    text-align: center;
+                    font-size:15px;
+                    height:40px;
+                    line-height:40px
+                }
+                .product-grid-section ul a.active, .product-grid-section ul a:hover {
+                    height: 50px;
+                    line-height: 50px;
+                }
                 .product-grid-section ul a {
                     /* text-align: center;
                     padding: 10px 10px;

assets/js/commonVue.js

@@ -18,6 +18,7 @@ var app = new Vue({
     articalArray: [], //详情数组
     articalArrayRelated: [], //相关推荐
     columnTypes: [], //栏目类型
+    colL:0,
     columnImage: '', //栏目图片
 
     // 公共弹框
@@ -101,6 +102,7 @@ var app = new Vue({
 
             //进入当前栏目页
             _this.columnTypes = res.data[i].children 
+            _this.colL= _this.columnTypes.childten;
             if (res.data[i].children.length > 0) {
               _this.requestParams.categoryid = (_this.getQuery('isUrlId') == 1) ? _this.getQuery('id') : _this.columnTypes[0].id;
             } else {

product/index.html

@@ -148,27 +148,21 @@
         <!--====== HEADER END ======-->
 
         <!--====== COMMON BREADCRUMB START ======-->
-        <section class="common-bradcrumb-section">
+        <section class="common-bradcrumb-section" v-if="columnTypes.length>1">
             <img :src="columnImage" alt="">
+            <section class="product-grid-section " style="text-align: center;position:absolute;bottom:0"    :style="{'width': '100%'}" >
+                <ul class="cannot_selected tabs_selected" >
+                    <a v-for="(item,i) in columnTypes" :class="item.id == requestParams.categoryid ? 'active' : ''"
+                    v-on:mouseover="facilityClick(i, item)" :style="{'width':(1/columnTypes.length*100)+'%' }">{{item.categoryName}}</a>
+                </ul>
+            </section>
+           
         </section>
         <!--====== COMMON BREADCRUMB END ======-->
 
         <!--====== PRODUCT GRID START======-->
         <section class="product-grid-section  pt-20 pb-60" >
-            <div class="container">
-                <!-- <div class="section-title both-border mb-20 " style="text-align: center;">
-                    <span class="title-tag2">产品类别</span>
-                </div> -->
-                <div class="row row-tabs  pt-40 " >
-                    <div class="col-lg-12">
-                        <div class="">
-                            <ul class="cannot_selected tabs_selected" style="text-align: center;">
-                                <a v-for="(item,i) in columnTypes" :class="item.id == requestParams.categoryid ? 'active' : ''"
-                                v-on:mouseover="facilityClick(i, item)">{{item.categoryName}}</a>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
+
 
                 <div class="row pt-80 content"  >
                     <div class="col-md-4 newItemOne "  v-for="item in articalArray" :key="item.id">