品牌墙二级页面

components/brandCenter/BrandIndex.vue

@@ -33,15 +33,9 @@
       </div>
     </div>
     <div class="brand-center-index" id="index" @click="showSimilarWord = false">
-      <div class="brand-index-tab">
-        <div class="brand-index-group" v-for="(indexGroup, index) in indexGroups">
-          <span v-if="index == 5"></span>
-          <a @click="goBrandIndex(group_index)" v-for="group_index in indexGroup" :class="{'active': activeIndex==group_index}">{{group_index}}</a>
-          <span v-if="index == 5"></span>
-        </div>
-      </div>
       <div class="brand-center-index-list">
         <div class="brand-list-nav">
+          <span class="search-index-show">品牌索引</span>
           <div class="search">
             <span v-show="!isSearch">
               以{{activeIndex&&activeIndex.length==1?'字母':''}}
@@ -55,11 +49,11 @@
               搜索
               <span class="active-index">"{{showKeyword}}"&nbsp;</span>，为您找到
               <span class="active-number">{{brandList.totalElements || 0}}&nbsp;</span>个相关品牌：
-          </span>
+            </span>
           </div>
           <div class="filter-area">
             <input type="text" placeholder="请输入您要搜索的品牌" @input="onKeywordInput()" v-model="keyword" @keyup.13="searchBrands()">
-            <img src="/images/brandCenter/search-btn.png" alt="" @click="searchBrands()">
+            <b class="search-btn" @click="searchBrands()">搜 索</b>
             <span v-if="brandList.totalElements > 0">{{nowPage}}/{{brandList.totalPages}}
             <a href="javascript:void(0)" class="icon-xiangzuo iconfont" @click="changePage('pre')" :class="{'is-border': nowPage==1}"></a>
             <a href="javascript:void(0)" @click="changePage('next')" class="icon-xiangyou iconfont" :class="{'is-border': nowPage>=brandList.totalPages}"></a>
@@ -69,20 +63,14 @@
             </ul>
           </div>
         </div>
+        <div class="brand-index-tab">
+          <div class="brand-index-group" v-for="(indexGroup, index) in indexGroups">
+            <span v-if="index == 5"></span>
+            <a @click="goBrandIndex(group_index)" v-for="group_index in indexGroup" :class="{'active': activeIndex==group_index}">{{group_index}}</a>
+            <span v-if="index == 5"></span>
+          </div>
+        </div>
         <div class="brand-list-items">
-        <span v-show="!isSearch">
-          以{{activeIndex&&activeIndex.length==1?'字母':''}}
-          <span class="active-index">{{activeIndex}}&nbsp;</span>开头共有
-          <span class="active-number">{{brandList.totalElements || 0}}&nbsp;</span>个品牌
-          <span v-if="brandList.totalElements > 0">，当前是第
-            <span class="active-number">{{nowPage}}&nbsp;</span>页
-          </span>
-        </span>
-          <span v-show="isSearch">
-          搜索
-          <span class="active-index">"{{showKeyword}}"&nbsp;</span>，为您找到
-          <span class="active-number">{{brandList.totalElements || 0}}&nbsp;</span>个相关品牌：
-        </span>
           <div class="brand-list-item-wrap" v-for="brand in brandList.content">
             <a :href="'/product/brand/'+brand.uuid" target="_blank">
               <span v-if="brand.nameEn">{{brand.nameEn}}</span>
@@ -101,7 +89,6 @@
         <page :total="brandList.totalElements" :page-size="pageSize"
               :current="nowPage" v-on:childEvent="listenPage"></page>
       </div>
-      <img src="/images/brandCenter/features.png" alt="">
     </div>
   </div>
 </template>
@@ -356,6 +343,12 @@
               -webkit-line-clamp: 2;
               -webkit-box-orient: vertical;
             }
+            &:hover p{
+              color: #2496f1;
+             }
+            &:hover span{
+              color: #2496f1;
+            }
           }
           &:last-child {
              padding-top: 5px;
@@ -401,163 +394,85 @@
       }
     }
     .brand-index-tab {
-      height: 206px;
+      margin-top: 7px;
       position: relative;
-      background: url(/images/brandCenter/brand-index-tree.png) no-repeat;
-      background-position: 60px 71.7px;
-      background-color: #eef1fd;
+      width: 955px;
+      height: 34px;
+      border-radius: 5px;
+      border: solid 1px #e5e5e5;
       .brand-index-group {
-        height: 40px;
+        float: left;
+        height: 34px;
         text-align: center;
-        position: absolute;
         a {
-          width: 40px;
-          height: 40px;
+          width: 32px;
+          height: 32px;
           text-align: center;
           display: inline-block;
-          color: #fff;
-          line-height: 40px;
-          font-size: 16px;
-          vertical-align: middle;
-        }
-        span {
-          width: 10px;
-          height: 40px;
-          display: inline-block;
-          background: #898ef3;
+          color: #666;
+          line-height: 32px;
+          font-size: 14px;
           vertical-align: middle;
+          &:hover{
+             background-color: #2496f1;
+             border-radius: 2px;
+             color: #fff;
+           }
         }
-        &:nth-child(1) {
-          left: 184px;
-          top: 32px;
-          a {
-            background: #fc524a;
-            &.active {
-              font-weight: bold;
-              background-color: #ec190f;
-              position: relative;
-              bottom: 2px;
-            }
-            &:hover {
-              font-weight: bold;
-              position: relative;
-              bottom: 2px;
-              background-color: #ec190f;
-            }
-          }
-        }
-        &:nth-child(2) {
-          left: 322px;
-          bottom: 22px;
-          a {
-            background: #fdad33;
-            &.active {
-              font-weight: bold;
-              background-color: #ea8f02;
-              position: relative;
-              bottom: 2px;
-            }
-            &:hover {
-              font-weight: bold;
-              position: relative;
-              bottom: 2px;
-              background-color: #ea8f02;
-            }
-          }
-        }
-        &:nth-child(3) {
-          left: 472px;
-          top: 32px;
-          a {
-            background: #12c8b1;
-            &.active {
-              font-weight: bold;
-              background-color: #009b87;
-              position: relative;
-              bottom: 2px;
-            }
-            &:hover {
-              font-weight: bold;
-              position: relative;
-              bottom: 2px;
-              background-color: #009b87;
-            }
-          }
-        }
-        &:nth-child(4) {
-          left: 612px;
-          bottom: 22px;
-          a {
-            background: #24b8fe;
-            &.active {
-              font-weight: bold;
-              background-color: #0095db;
-              position: relative;
-              bottom: 2px;
-            }
-            &:hover {
-              font-weight: bold;
-              position: relative;
-              bottom: 2px;
-              background-color: #0095db;
-            }
-          }
-        }
-        &:nth-child(5) {
-          left: 745px;
-          top: 32px;
-          a {
-            background: #008cff;
-            &.active {
-              font-weight: bold;
-              background-color: #026dc5;
-              position: relative;
-              bottom: 2px;
-            }
-            &:hover {
-              font-weight: bold;
-              position: relative;
-              bottom: 2px;
-              background-color: #026dc5;
-            }
-          }
-        }
-        &:nth-child(6) {
-          left: 958px;
-          bottom: 22px;
-          a {
-            background: #898ef3;
-            &.active {
-              font-weight: bold;
-              background-color: #7479eb;
-              position: relative;
-              bottom: 2px;
-            }
-            &:hover {
-              font-weight: bold;
-              position: relative;
-              bottom: 2px;
-              background-color: #7479eb;
-            }
-          }
+        a.active{
+          background-color: #2496f1;
+          border-radius: 2px;
+          color: #fff;
         }
+        &:last-child{
+           margin-left: 55px;
+         }
+        &:last-child a{
+          letter-spacing: 12px;
+         }
+        &:last-child a:hover{
+           width: 56px;
+           padding-left: 3px;
+         }
       }
     }
     .brand-center-index-list {
       .brand-list-nav {
-        height: 56px;
-        padding-top: 8px;
+        width: 955px;
+        height: 34px;
+        line-height: 34px;
         position: relative;
-        &::after{
-          content: '';
-          height: 25px;
-          width: 1px;
-          position: absolute;
-          display: block;
-          border-left: 1px solid #c6c6c6;
-          top: 21px;
-          right: 192px;
-          z-index: 1000;
+        overflow: hidden;
+        border-bottom: solid 1px #e5e5e5;
+        span.search-index-show {
+          float: left;
+          display: inline-block;
+          width: 98px;
+          height: 34px;
+          line-height: 34px;
+          text-align: center;
+          background-color: #2496f1;
+          font-size: 14px;
+          color: #fdfbfb;
+          border-radius: 3px 3px 0px 0px;
+        }
+         span {
+            font-size: 14px;
+            color: #333;
+            margin-bottom: 20px;
+            .active-index {
+              font-size: 16px;
+              color: #3c7cf5;
+            }
+            .active-number {
+              font-weight: bold;
+              font-size: 16px;
+              color: #fc524a;
+            }
+          }
+        div.search{
+          float: left;
+          margin-left: 10px;
         }
         .filter-area {
           float: right;
@@ -566,23 +481,35 @@
           margin-right: 9px;
           position: relative;
           input {
-            height: 32px;
-            width: 318px;
-            line-height: 32px;
+            height: 28px;
+            width: 258px;
+            line-height: 28px;
             padding-left: 11px;
-            border: 1px solid #c6c6c6;
-            background-color: #fff;
+            background-color: #ffffff;
+            border-radius: 3px;
+            border: solid 1px #2496f1;
             padding-right: 32px;
             position: absolute;
             right: 150px;
-            top: 9px;
+            top: 0px;
           }
-          img {
+          b.search-btn {
             position: absolute;
-            top: 15px;
-            right: 154px;
+            top: 0px;
+            right: 150px;
+            width: 69px;
+            height: 28px;
+            line-height: 28px;
+            text-align: center;
+            font-size: 14px;
+            color: #fff;
+            background-color: #2496f1;
+            border-radius: 5px;
           }
           span {
+            height: 28px;
+            line-height: 28px;
+            float:left;
             margin-left: 47px;
             color: #666;
             a {
@@ -627,10 +554,11 @@
       }
       .brand-list-items {
         padding-top: 20px;
-        background: url('/images/brandCenter/brand-index-bg.png')no-repeat;
         background-size: cover;
         padding-bottom: 20px;
         position: relative;
+        height: 1034px;
+        border-bottom: 1px solid #dcdcdc;
         .search-modal-wrap {
           background: rgba(255, 255, 255, 0.3);
           position: absolute;
@@ -657,7 +585,7 @@
         }
         .brand-list-item-wrap {
           display: inline-block;
-          width: 297.5px;
+          width: 25%;
           margin-bottom: 29px;
           position: relative;
           height: 30px;
@@ -686,16 +614,18 @@
               right: 31px;
               top:0;
               border-radius: 4px;
-              background-color: rgb( 102, 102, 102 );
-              box-shadow: 1.5px 2.598px 7px 0px rgba(0, 0, 0,0.58);
               color: #fff;
               font-size: 11px;
               padding: 13px 15px;
               line-height: 18px;
               text-align: left;
               word-break: break-all;
+              background-color: #ffffff;
+              box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.19);
               span {
                 display: block;
+                font-size: 12px;
+                color: #333;
                 &.brand-application {
                   overflow: hidden;
                   text-overflow: ellipsis;
@@ -729,8 +659,17 @@
       }
       .page-wrap {
         text-align: right;
-        margin: 0 0 20px 0;
+        margin: 30px 0 115px 0;
         float: none;
+        .el-pagination .el-pager li.active{
+          border-color: #20a0ff;
+          background-color: #20a0ff;
+          color: #fff;
+          cursor: default;
+        }
+        .page-a{
+          background-color: #2496f1!important ;
+        }
       }
     }
   }

components/brandCenter/RecommendBrand.vue

@@ -40,6 +40,9 @@
           ['U', 'V', 'W', 'X', 'Y', 'Z'],
           ['0~9']
         ],
+        nowPage: 1,
+        keyword: '',
+        isSearch: false,
         activeSlide: 0,
         swiperOption: {
           autoplay: 6000,
@@ -103,6 +106,27 @@
       activeIndex () {
         return !this.isSearch ? this.$route.params.initial : ''
       }
+    },
+    methods: {
+      goBrandIndex: function (index) {
+        if (index === this.$route.params.initial) {
+          this.initParams()
+          this.reloadData()
+        } else {
+          this.$router.push('/product/brand/brandList/' + index)
+//            window.location.href = '/product/brand/brandList/' + index + '#index'
+//            window.open('/product/brand/brandList/' + index + '#index', '_self')
+        }
+      },
+      initParams: function () {
+        this.nowPage = 1
+        this.isSearch = false
+        this.keyword = ''
+        this.reloadData()
+      },
+      reloadData: function () {
+        !this.isSearch ? this.$store.dispatch('product/loadBrandsPager', {'initial': this.$route.params.initial, 'page': this.nowPage, 'count': this.pageSize, 'keyword': this.keyword}) : this.searchData()
+      }
     }
   }
 </script>
@@ -161,6 +185,10 @@
           &:last-child{
              margin-bottom: 0;
            }
+           &:last-child a{
+              letter-spacing: 15px;
+              padding-left: 12px;
+            }
         }
       }
     }
@@ -285,4 +313,9 @@
       }
     }
   }
+  .recommend-brand .brand-content .brand-index-tab .brand-index-group a.active{
+    background-color: #2496f1;
+    border-radius: 2px;
+    color: #fff;
+  }
 </style>

components/common/page/pageComponent.vue

@@ -95,7 +95,8 @@
     border-color: #ddd;
   }
   .el-pager li.active {
-    background: #5078cb!important;
+    background: #20a0ff!important;
+    border: none;
   }
   .el-icon-arrow-left:before {
     content: "\f100";
@@ -138,13 +139,13 @@
     transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
   }
   .page-a {
-    background: #5078cb !important;
+    background: #2496f1 !important;
     color: #fff !important;
     float: right!important;
   }
   .page-a {
     color: #fff;
-    border-color: #4574e8;
+    border-color: #2496f1;
     padding: 6px 6px!important;
     font-size: 14px!important;
     border-top-right-radius: 4px!important;

components/search/GoodList.vue

@@ -735,7 +735,7 @@
     transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
   }
   div.ng-table-pager a.page-a{
-    background: #5078cb !important;
+    background: #2496f1 !important;
     color: #fff;
     float: right;
   }