店铺

assets/scss/common.scss

@@ -845,3 +845,49 @@ img.new-animate{
     }
   }
 }
+//原厂搜索
+#store-list table .search-content-pc{
+  position: relative;
+  float: left;
+  padding-left: 558px;
+}
+#store-list table .search-content-pc .form-control{
+  width: 190px;
+  height: 28px;
+  background-color: #ffffff;
+  border-radius: 3px;
+  border: solid 1px #2496f1;
+}
+#store-list table .search-content-pc .input-group-btn{
+  position: absolute;
+  top: 0;
+  right: 0px;
+}
+#store-list table .search-content-pc .input-group-btn button{
+  width: 69px;
+  height: 28px;
+  font-size: 14px;
+  color: #fff;
+  background-color: #2496f1;
+  outline: none;
+}
+#store-list a .btn {
+  width: 110px;
+  height: 28px;
+  background-color: #ffffff;
+  border-radius: 3px;
+  border: solid 1px #2496f1;
+  outline: none;
+}
+
+//品牌索引
+.recommend-brand .brand-content .brand-index-tab .index-group:nth-child(5) a{
+  width: 33px!important;
+}
+.recommend-brand .brand-content .brand-index-tab .index-group:nth-child(6){
+  width: 100px!important;
+  margin: 0 0 0 10px!important;
+}
+.recommend-brand .brand-content .brand-index-tab .index-group:nth-child(6) a{
+  width: 100px!important;
+}

components/brandCenter/BrandIndex.vue

@@ -1,28 +1,75 @@
 <template>
-  <div class="brand-center-index" id="index" @click="showSimilarWord = false">
-    <img src="/images/brandCenter/brand-index-title1.png" alt="">
-    <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 class="search-index">
+    <div class="brand-recommend">
+      <div class="recommend-area">
+        <div class="recommend-head">
+          <img src="/images/brandCenter/brand-recommend.png"/>品牌推荐
+        </div>
+        <ul class="recommend-items">
+          <li v-for="item in hotBrands.data">
+            <a :href="item.detailsLink" target="_blank">
+              <img :src="item.pictureLink" alt="">
+              <div class="brand-item">
+                <p>{{item.title}}</p>
+                <span class="brand-application" v-if="item.metadatas.contExp_abstract">应用领域：{{item.metadatas.contExp_abstract | applicationFilter}}</span>
+                <span class="brand-application" v-if="!item.metadatas.contExp_abstract">应用领域：-</span>
+                <span class="brand-introduce" v-if="item.metadatas.contExp_select">品牌介绍：{{item.metadatas.contExp_select | introduceFilter}}</span>
+                <span class="brand-introduce" v-if="!item.metadatas.contExp_select">品牌介绍：-</span>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div class="recommend-prod">
+        <div class="item">
+          <img src="/images/brandCenter/11.png" style="margin-top: 12px;"><span>秒速搜索全球器件品牌，精准查找品牌授权代理商,最优产品，为采购提供最可靠的资质信息。</span>
+        </div>
+        <div class="item">
+          <img src="/images/brandCenter/22.png" style="margin-top: 5px;"><span>元器件标准参数自由筛选，性能差异横向比较，生产配料一清二楚。</span>
+        </div>
+        <div class="item">
+          <img src="/images/brandCenter/33.png"><span>推荐品牌，让您的品牌处于最亮眼的位置。</span>
+        </div>
       </div>
     </div>
-    <div class="brand-center-index-list">
-      <div class="brand-list-nav">
-        <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()">
-          <span v-if="brandList.totalElements > 0">{{nowPage}}/{{brandList.totalPages}}
+    <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">
+          <div class="search">
+            <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>
+          <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()">
+            <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>
           </span>
-          <ul class="similar-list" v-show="showSimilarWord && keyword && keyword.length">
-            <li class="text-ellipse" v-for="similar in similarList" @click.stop="setSimilar(similar.nameCn)">{{similar.nameCn}}</li>
-          </ul>
+            <ul class="similar-list" v-show="showSimilarWord && keyword && keyword.length">
+              <li class="text-ellipse" v-for="similar in similarList" @click.stop="setSimilar(similar.nameCn)">{{similar.nameCn}}</li>
+            </ul>
+          </div>
         </div>
-      </div>
-      <div class="brand-list-items">
+        <div class="brand-list-items">
         <span v-show="!isSearch">
           以{{activeIndex&&activeIndex.length==1?'字母':''}}
           <span class="active-index">{{activeIndex}}&nbsp;</span>开头共有
@@ -31,30 +78,31 @@
             <span class="active-number">{{nowPage}}&nbsp;</span>页
           </span>
         </span>
-        <span v-show="isSearch">
+          <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>
-            <span v-if="brand.nameCn != brand.nameEn">{{brand.nameCn}}</span>
-            <div class="brand-intro">
-              <span class="brand-application">应用领域：{{brand.application | applicationFilter}}</span>
-              <span >品牌介绍：{{brand.brief | introduceFilter}}</span>
-            </div>
-          </a>
-        </div>
-        <div v-if="brandList.totalElements <= 0" class="empty-remind">
-          商城暂未收录您想要查找的品牌，可前往<a @click="goBrandApply">“品牌申请”</a>提醒我们完善该品牌信息
+          <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>
+              <span v-if="brand.nameCn != brand.nameEn">{{brand.nameCn}}</span>
+              <div class="brand-intro">
+                <span class="brand-application">应用领域：{{brand.application | applicationFilter}}</span>
+                <span >品牌介绍：{{brand.brief | introduceFilter}}</span>
+              </div>
+            </a>
+          </div>
+          <div v-if="brandList.totalElements <= 0" class="empty-remind">
+            商城暂未收录您想要查找的品牌，可前往<a @click="goBrandApply">“品牌申请”</a>提醒我们完善该品牌信息
+          </div>
+          <div class="search-modal-wrap" v-if="showSearchModal"></div>
         </div>
-        <div class="search-modal-wrap" v-if="showSearchModal"></div>
+        <page :total="brandList.totalElements" :page-size="pageSize"
+              :current="nowPage" v-on:childEvent="listenPage"></page>
       </div>
-      <page :total="brandList.totalElements" :page-size="pageSize"
-            :current="nowPage" v-on:childEvent="listenPage"></page>
+      <img src="/images/brandCenter/features.png" alt="">
     </div>
-    <img src="/images/brandCenter/features.png" alt="">
   </div>
 </template>
 <script>
@@ -131,6 +179,9 @@
         },
         user () {
           return this.$store.state.option.user
+        },
+        hotBrands () {
+          return this.$store.state.product.brand.recommends.data
         }
       },
       watch: {
@@ -231,13 +282,119 @@
     }
 </script>
 <style lang="scss" scoped>
-  .brand-center-index {
+  .search-index {
+    margin: 0 auto;
+    margin-top: 20px;
     width: 1190px;
+    overflow: hidden;
+    .brand-recommend {
+      float: left;
+      margin-right: 15px;
+      .recommend-area {
+        width: 220px;
+        height: 862px;
+        background-color: #ffffff;
+        border-radius: 5px;
+        border: solid 1px #d2d2d2;
+      }
+      .recommend-head {
+        padding-left: 10px;
+        width: 220px;
+        height: 34px;
+        line-height: 34px;
+        background-color: #2496f1;
+        font-size: 14px;
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+        color: #fff;
+          img{
+            margin-right: 6px;
+            margin-top: -2px;
+          }
+      }
+      .recommend-items{
+        li {
+          padding: 0px 0 11px 13px;
+          overflow: hidden;
+          height: 82px;
+          border-bottom: solid 1px #e5e5e5;
+          img{
+            float: left;
+            margin: 10px 10px 0 0;
+            width: 60px;
+            height: 60px;
+            background-color: #ffffff;
+            border-radius: 4px;
+            border: solid 1px #e5e5e5;
+          }
+          div.brand-item{
+            float: left;
+            margin-top: 6px;
+            width: 128px;
+            p{
+              margin-bottom: 6px;
+              font-size: 12px;
+              color: #666666;
+              width: 128px;
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+            span {
+              display: inline-block;
+              width: 128px;
+              font-size: 12px;
+              color: #666;
+              overflow: hidden;
+            }
+            span.brand-application{
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            }
+            span.brand-introduce {
+              display: -webkit-box;
+              -webkit-line-clamp: 2;
+              -webkit-box-orient: vertical;
+            }
+          }
+          &:last-child {
+             padding-top: 5px;
+             border-bottom: none;
+          }
+        }
+      }
+      .recommend-prod {
+        padding: 20px 0 0px 10px;
+        margin-top: 20px;
+        width: 220px;
+        height: 229px;
+        border-radius: 4px;
+        border: solid 1px rgba(210, 210, 210, 0.8);
+        .item {
+          overflow: hidden;
+          margin-bottom: 22px;
+          img{
+            margin-right: 10px;
+            float: left;
+            width: 39px;
+            height: 39px;
+          }
+          span {
+            float: left;
+            display: inline-block;
+            width: 155px;
+            word-break: break-all;
+          }
+        }
+      }
+    }
+  }
+  .brand-center-index {
+    float: left;
+    width: 955px;
     margin: 0 auto;
     >img {
-      width: 1190px;
-      height: 50px;
-      margin-top: 20px;
+      /*height: 50px;*/
       &:last-child{
         height: 70px;
         margin-bottom: 40px;

components/brandCenter/RecommendBrand.vue

@@ -1,32 +1,30 @@
 <template>
   <div class="recommend-brand">
-    <div v-swiper:mySwiper="swiperOption">
-      <div class="swiper-wrapper">
-        <div class="swiper-slide" v-for="banner in sliceBanners">
-          <a :href="banner.detailsLink" target="_blank">
-            <img :src="banner.pictureLink"/>
-          </a>
+    <div class="brand-content">
+      <div class="brand-index-tab">
+        <div class="index-head">
+          <img src="/images/brandCenter/search-index.png"/>品牌索引
         </div>
-        <div v-if="sliceBanners.length === 0" class="swiper-button-prev"><i class="iconfont icon-swiper-left"></i></div>
-        <div v-if="sliceBanners.length === 0"class="swiper-button-next"><i class="iconfont icon-swiper-right"></i></div>
-       </div>
-      <div v-if="sliceBanners.length === 0" class="swiper-pagination swiper-pagination-bullets"></div>
-    </div>
-    <div class="recommend-area">
-      <ul class="recommend-items">
-        <li v-for="item in hotBrands.data">
-          <a :href="item.detailsLink" target="_blank">
-            <img :src="item.pictureLink" alt="">
-            <div>
-              <p>{{item.title}}</p>
-              <span class="brand-application" v-if="item.metadatas.contExp_abstract">应用领域：{{item.metadatas.contExp_abstract | applicationFilter}}</span>
-              <span class="brand-application" v-if="!item.metadatas.contExp_abstract">应用领域：-</span>
-              <span class="brand-introduce" v-if="item.metadatas.contExp_select">品牌介绍：{{item.metadatas.contExp_select | introduceFilter}}</span>
-              <span class="brand-introduce" v-if="!item.metadatas.contExp_select">品牌介绍：-</span>
-            </div>
-          </a>
-        </li>
-      </ul>
+        <div style="padding-top: 8px;">
+          <div class="brand-index-group 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>
+      <div v-swiper:mySwiper="swiperOption" class="swiper-container">
+        <div class="swiper-wrapper">
+          <div class="swiper-slide" v-for="banner in sliceBanners">
+            <a :href="banner.detailsLink" target="_blank">
+              <img :src="banner.pictureLink"/>
+            </a>
+          </div>
+          <div v-if="sliceBanners.length === 0" class="swiper-button-prev"><i class="iconfont icon-swiper-left"></i></div>
+          <div v-if="sliceBanners.length === 0"class="swiper-button-next"><i class="iconfont icon-swiper-right"></i></div>
+        </div>
+        <div v-if="sliceBanners.length === 0" class="swiper-pagination swiper-pagination-bullets"></div>
+      </div>
     </div>
   </div>
 </template>
@@ -34,6 +32,14 @@
   export default {
     data () {
       return {
+        indexGroups: [
+          ['A', 'B', 'C', 'D', 'E'],
+          ['F', 'G', 'H', 'I', 'J'],
+          ['K', 'L', 'M', 'N', 'O'],
+          ['P', 'Q', 'R', 'S', 'T'],
+          ['U', 'V', 'W', 'X', 'Y', 'Z'],
+          ['0~9']
+        ],
         activeSlide: 0,
         swiperOption: {
           autoplay: 6000,
@@ -88,14 +94,14 @@
       floors () {
         return this.$store.state.floor.list.data
       },
-      hotBrands () {
-        return this.$store.state.product.brand.recommends.data
-      },
       banners () {
         return this.$store.state.carousel.brandCarousel.data
       },
       sliceBanners () {
         return this.banners.data && this.banners.data.length ? this.banners.data.slice(0, 3) : []
+      },
+      activeIndex () {
+        return !this.isSearch ? this.$route.params.initial : ''
       }
     }
   }
@@ -105,18 +111,75 @@
     width: 1190px;
     margin: 0 auto;
     margin-top: 10px;
+    .brand-content{
+      overflow: hidden;
+      .brand-index-tab {
+        margin-right: 15px;
+        float: left;
+        width: 220px;
+        height: 400px;
+        background-color: #ffffff;
+        border-radius: 5px;
+        border: solid 1px #d2d2d2;
+        .index-head {
+          padding-left: 10px;
+          width: 220px;
+          height: 34px;
+          line-height: 34px;
+          background-color: #2496f1;
+          font-size: 14px;
+          border-top-left-radius: 5px;
+          border-top-right-radius: 5px;
+          color: #fff;
+          img{
+            margin-right: 6px;
+            margin-top: -2px;
+          }
+        }
+        .brand-index-group {
+          margin: 0 auto 22px;
+          width: 200px;
+          height: 40px;
+          background-color: rgba(36, 150, 241, 0.1);
+          border-radius: 4px;
+          /*opacity: 0.1;*/
+          a{
+            display: inline-block;
+            width: 40px;
+            height: 40px;
+            line-height: 40px;
+            text-align: center;
+            font-size: 16px;
+            color: #666;
+            border-radius: 5px;
+            /*background-color: #2496f1;*/
+            &:hover{
+               background-color: #2496f1;
+               color: #fff;
+             }
+          }
+          &:last-child{
+             margin-bottom: 0;
+           }
+        }
+      }
+    }
     .swiper-container {
       z-index: 2;
+      float: left;
+      width: 955px;
+      height: 400px;
       .swiper-wrapper {
-        width: 1190px;
+        width: 955px;
+        height: 400px;
         margin: 0 auto;
         .swiper-slide {
-          height: 163px;
+          height: 400px;
           margin: 0 auto;
           display: flex;
           img {
-            width: 1190px;
-            height: 163px;
+            width: 955px;
+            height: 400px;
             border: 1px solid #ccc;
           }
         }

components/provider/Carousel.vue

@@ -69,14 +69,14 @@
 <style lang="scss" scoped>
   @import '~assets/scss/variables';
 
-  $carousel_width: 910px;
-  $carousel_width_670: 670px;
-  $carousel_height: 358px;
+  $carousel_width: 955px;
+  /*$carousel_width_670: 670px;*/
+  $carousel_height: 400px;
 
   .carousel {
-    &.width_670{
-      width: $carousel_width_670;
-    }
+    /*&.width_670{*/
+      /*width: $carousel_width_670;*/
+    /*}*/
     width: $carousel_width;
     height: $carousel_height;
     transition: background-color .3s;
@@ -87,7 +87,7 @@
       .swiper-slide {
         img {
           display: block;
-          width: 100%;
+          width: 955px;
           height: $carousel_height;
         }
       }

components/provider/HotCommodity.vue

@@ -1,14 +1,58 @@
 <template>
-  <div class="container marketing hot-commodity">
-    <div class="title">热销器件</div>
-    <ul class="list-unstyled list-inline">
-      <li class="hot-commodity-box" v-for="(component, index) in hotComponents" :class="{ 'border-right' : index % 5 == 4 }">
-        <a :href="'/store/productDetail/' + component.batchCode" target="_blank">
-          <img :src="component.img || '/images/store/common/default.png'"/>
-          <span>{{component.code}}</span>
-        </a>
-      </li>
-    </ul>
+  <div class="hot-commodity recommend-fragment">
+    <div class="title-icon">
+      <span>产品推荐</span>
+      <img src="/images/original/line.png" alt=""/>
+    </div>
+    <div v-swiper:mySwiper="swiperOption" v-if="hotComponents || hotComponents.length>0">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide" v-if="hotComponents.length>0">
+          <ul class="recommend-list clearfix">
+            <li v-for="(component, index) in hotComponents.slice(0,2)" class="big">
+              <a :href="'/store/productDetail/' + component.batchCode" target="_blank">
+                <div class="img"><img :src="component.img || '/images/store/common/default.png'"/></div>
+                <span class="name">{{component.code}}</span>
+                <div class="price">1111.23242</div>
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div class="swiper-slide" v-if="hotComponents.length>=2">
+          <ul class="recommend-list clearfix">
+            <li v-for="(component, index) in hotComponents.slice(2,4)" class="big">
+              <a :href="'/store/productDetail/' + component.batchCode" target="_blank">
+                <div class="img"><img :src="component.img || '/images/store/common/default.png'"/></div>
+                <span class="name">{{component.code}}</span>
+                <div class="price">1111.23242</div>
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div class="swiper-slide" v-if="hotComponents.length>=4">
+          <ul class="recommend-list clearfix">
+            <li v-for="(component, index) in hotComponents.slice(4,6)" class="big">
+              <a :href="'/store/productDetail/' + component.batchCode" target="_blank">
+                <div class="img"><img :src="component.img || '/images/store/common/default.png'"/></div>
+                <span class="name">{{component.code}}</span>
+                <div class="price">1111.23242</div>
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div class="swiper-slide" v-if="hotComponents.length>=6">
+          <ul class="recommend-list clearfix">
+            <li v-for="(component, index) in hotComponents.slice(6,8)" class="big">
+              <a :href="'/store/productDetail/' + component.batchCode" target="_blank">
+                <div class="img"><img :src="component.img || '/images/store/common/default.png'"/></div>
+                <span class="name">{{component.code}}</span>
+                <div class="price">1111.23242</div>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="swiper-pagination swiper-pagination-bullets" style="bottom: -3px!important;"></div>
+    </div>
   </div>
 </template>
 <script>
@@ -17,68 +61,84 @@ export default {
   name: 'hot-commodity',
   computed: {
     hotComponents () {
+      console.log(this.$store.state.provider.storeCms.hotComponents.data, 'c')
       return this.$store.state.provider.storeCms.hotComponents.data
+    },
+    // 产品推荐轮播
+    swiperOption () {
+      return {
+        autoplay: 5000,
+        initialSlide: 0,
+        loop: true,
+        effect: this.effect,
+        lazyLoading: true,
+        // 解决点击分页器后图片就不能轮播的问题
+        autoplayDisableOnInteraction: false,
+        pagination: '.swiper-pagination',
+        paginationClickable: true,
+        paginationElement: 'li'
+      }
     }
   }
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
   .hot-commodity {
-    margin-bottom: 40px;
-  }
-
-  .marketing .title {
-    font-size: 24px;
-    font-family: "Microsoft Yahei", "微软雅黑";
-    line-height: 60px;
-    height: 60px;
-    font-weight: inherit;
-  }
-
-  .hot-commodity .hot-commodity-box {
-    width: 238px;
-    height: 239px;
-    border-top: 1px solid #D6D3CE;
-    border-left: 1px solid #D6D3CE;
-    overflow: hidden;
-  }
-
-  .hot-commodity > ul > li {
-    /*float: left;*/
-  }
-  .hot-commodity > ul > li:hover{
-    border: #5078cb 1px solid;
-  }
-  .hot-commodity > ul > li:hover span{
-    color: #5078cb;
-    font-weight: bold;
-  }
-  .hot-commodity > ul > li:hover img{
-    transform: scale(1.1);
-  }
-  .hot-commodity ul {
-    border-bottom: 1px solid #D6D3CE;
-    font-size: 0px;
-  }
-
-  .hot-commodity-box img {
-    width: 226px;
-    height: 180px;
     margin-top: 10px;
-  }
-
-  .hot-commodity-box span {
-    font-size: 14px;
-    color: #333434;
-    text-align: center;
-    display: inline-block;
-    width: 100%;
-    height: 30px;
-    line-height: 30px;
-    margin-top: 12px;
-  }
-
-  .hot-commodity .border-right {
-    border-right: 1px solid #D6D3CE;
+    width: 220px;
+    height: 464px;
+    background-color: #fff;
+    border-radius: 5px;
+    .title-icon {
+      position: relative;
+      width: 100%;
+      height: 34px;
+      line-height: 34px;
+      text-align: center;
+      span{
+        font-family: AdobeHeitiStd-Regular;
+        font-size: 16px;
+        color: #333;
+      }
+      img{
+        position: absolute;
+        top: 14px;
+        left: 25px;
+      }
+    }
+    ul{
+      padding: 14px 0 0;
+      width: 220px;
+      li{
+        margin: 0 auto 25px;
+        text-align: center;
+        .img{
+          margin: 0 auto;
+          width: 181px;
+          height: 117px;
+          border-radius: 2px;
+          border: solid 1px #e2e2e2;
+          img{
+            width: 91px;
+            height: 87px;
+          }
+        }
+        .name {
+          display: inline-block;
+          margin: 10px auto;
+          font-size: 14px;
+          color: #333;
+        }
+        .price{
+          margin: 0 auto;
+          width: 124px;
+          height: 21px;
+          line-height: 21px;
+          font-size: 13px;
+          color: #fff;
+          background-color: #e6382f;
+        }
+      }
+    }
   }
 </style>

components/provider/NewStore.vue

@@ -1,40 +1,37 @@
 <template>
   <div class="new-sign-module">
     <div class="head">
-      <div class="img">
-        <img src="/images/store/home/new.png" />
-      </div>
       <div class="title">新入驻的商家</div>
     </div>
-    <ul class="list-unstyled list-inline" style="height: 210px;">
+    <ul class="list-unstyled list-inline">
       <li class="new-store" v-for="(store, index) in stores">
         <div class="img">
-          <img :src="store.logoUrl || '/images/store/common/default.png'" style="max-width: 100%;max-height: 100%;" />
+          <img :src="store.logoUrl || '/images/store/common/default.png'"/>
         </div>
         <div class="content">
           <div class="name"><a target="_blank" :href="'/store/' + store.uuid" :title="store.storeName">{{store.storeName}}</a></div>
-          <div class="subject" style="display: none;">
-            主营：<span>暂无</span>
-          </div>
-          <div class="subject">
-            企业介绍：<span>{{store.enterprise.description || '暂无企业介绍'}}</span>
-          </div>
+          <!--<div class="subject" style="display: none;">-->
+            <!--主营：<span>暂无</span>-->
+          <!--</div>-->
+          <!--<div class="subject">-->
+            <!--企业介绍：<span>{{store.enterprise.description || '暂无企业介绍'}}</span>-->
+          <!--</div>-->
         </div>
       </li>
     </ul>
-    <div class="sign">
-      <div class="img">
-        <img src="/images/store/home/shop.png"/>
-      </div>
-      <div class="content">
-        <div class="count">
-          已入驻商家<span>{{storeCount}}</span>家
-        </div>
-        <div>
-          <a @click="goStoreApply"><button>立即入驻</button></a>
-        </div>
-      </div>
-    </div>
+    <!--<div class="sign">-->
+      <!--<div class="img">-->
+        <!--<img src="/images/store/home/shop.png"/>-->
+      <!--</div>-->
+      <!--<div class="content">-->
+        <!--<div class="count">-->
+          <!--已入驻商家<span>{{storeCount}}</span>        家-->
+        <!--</div>-->
+        <!--<div>-->
+          <!--<a @click="goStoreApply"><button>立即入驻</button></a>-->
+        <!--</div>-->
+      <!--</div>-->
+    <!--</div>-->
   </div>
 </template>
 <script>
@@ -61,96 +58,60 @@ export default {
   @import '~assets/scss/variables';
 
   .new-sign-module {
-    width: 280px;
-    height: 360px;
-    padding-left: 10px;
-    border-right: 1px solid #D6D3CE;
-    border-bottom: 1px solid #D6D3CE;
-    border-top: 1px solid #D6D3CE;
-
-    a {
-      color: #337ab7;
-      text-decoration: none;
-    }
-
-    ul {
-      margin-bottom: 10px;
-    }
-
+    width: 220px;
+    height: 352px;
+    background-color: #ffffff;
+    border-radius: 5px;
     .head {
-      height: 60px;
-
-      .img {
-        margin-right: 14px;
-        width: 50px;
-        height: 50px;
-        display: inline-block;
-        text-align: center;
-        line-height: 50px;
-
-        img {
-          vertical-align: middle;
-        }
-      }
-
+      width: 220px;
+      height: 34px;
+      line-height: 34px;
+      text-align: center;
+      background-color: #2496f1;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
       .title {
-        height: 60px;
-        line-height: 60px;
-        font-size: 18px;
-        font-weight: 600;
-        display: inline-block;
+        font-size: 16px;
+        color: #fff;
       }
     }
-
-    .new-store {
-      display: inline-block;
-      height: 70px;
-      padding-bottom: 0;
-      width: 260px;
-
-      .img {
-        width: 50px;
-        height: 50px;
-        display: inline-block;
-        text-align: center;
-        line-height: 45px;
-        border: #e8e8e8 1px solid;
-
-        img {
-          vertical-align: middle;
+    .list-inline {
+      padding: 14px 0px 0 8px;
+      li{
+        margin-bottom: 12px;
+        overflow: hidden;
+        .img {
+          float: left;
+          margin-right: 8px;
+          width: 48px;
+          height: 48px;
+          border: 1px solid #dcdcdc;
+          img{
+            width: 100%;
+            height: 100%;
+          }
         }
-      }
-
-      .content {
-        width: 185px;
-        display: inline-block;
-        padding: 8px;
-        vertical-align: middle;
-        margin-left: 10px;
-
-        .name {
-          font-size: 16px;
-          color: #6D6B66;
-          width: 190px;
-          line-height: 28px;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-          word-break: keep-all;
-        }
-
-        .subject {
-          font-size: 14px;
-          color: #777570;
-          line-height: 28px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          word-break: keep-all;
+        .content{
+          float: left;
+          width: 145px;
+          line-height: 48px;
+          .name {
+            width: 145px;
+            font-size: 14px;
+            color: #333333;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            a{
+              color: #333;
+              &:hover{
+                  color:#2496f1;
+               }
+            }
+          }
         }
       }
     }
-
     .sign {
       height: 80px;
       box-shadow: 0px -5px 20px 0px #E3E1DE;

components/provider/RecommendOriginal.vue

@@ -1,7 +1,9 @@
 <template>
-  <div class="container" id="recommends">
-    <div class="title-icon">原厂推荐</div>
-    <div class="hr-blue"></div>
+  <div id="recommends">
+    <div class="title-icon">
+      <span>店铺推荐</span>
+      <img src="/images/original/line.png" alt=""/>
+    </div>
     <ul class="recommend-list list-unstyled list-inline">
       <li class="recommend" v-for="(store, index) in stores">
         <a :href="'/store/' + store.uuid" target="_blank">
@@ -12,10 +14,10 @@
             </div>
             <!--<div class="subject" style="min-height: 5px;">
             </div>-->
-            <div class="description">
-              <strong>企业介绍</strong>：
-              <span>{{store.enterprise.description || '暂无企业介绍'}}</span>
-            </div>
+            <!--<div class="description">-->
+              <!--<strong>企业介绍</strong>：-->
+              <!--<span>{{store.enterprise.description || '暂无企业介绍'}}</span>-->
+            <!--</div>-->
           </div>
         </a>
       </li>
@@ -28,121 +30,76 @@ export default {
   name: 'recommend-original',
   computed: {
     stores () {
-      return this.$store.state.provider.storeCms.recommendStore.data
+      return this.$store.state.provider.storeCms.recommendStore.data ? this.$store.state.provider.storeCms.recommendStore.data.slice(0, 3) : []
     }
   }
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
   #recommends {
-		width: 1190px;
-		padding: 0px;
-	}
-
-  .title-icon {
-	  font-size: 24px;
-    color: #323232;
-    margin-bottom: 10px;
-	}
-
-	#recommends .hr-blue {
-		border-bottom: 2px solid #6493FF;
-		border-right: 0px;
-		border-top: 0px;
-		border-left: 0px;
-		width: 100%;
-		margin-bottom: 20px;
-	}
-
-	#recommends .recommend-list {
-		margin-bottom: 20px;
-		margin: 0;
-	}
-
-	#recommends .recommend-list .recommend {
+    margin: 10px 0;
 		width: 220px;
-		height: 210px;
-		border: 1px solid #D6D3CE;
-		margin-right: 22.5px;
-	}
-	#recommends .recommend-list .recommend:last-child{
-		margin-right: 0px !important;
-	}
-	.margin-left-zero {
-		margin-left: 0px !important;
-	}
-	#recommends .recommend-list .recommend a {
-		text-decoration: none;
-	}
-	#recommends .recommend-list .recommend .img{
-		width: 200px;
-		height: 80px;
-		display: inline-block;
-		overflow: hidden;
-		line-height: 80px;
-		text-align: center;
-		margin-top: 5px;
-	}
-	#recommends .recommend-list .recommend img{
-		max-height: 75px;
-		max-width: 200px;
-		margin-top: 5px;
-	}
-
-	#recommends .recommend-list .recommend .content {
-		margin: 0 10px;
-		height: 108px;
-		text-align: left;
+    height: 377px;
+    background-color: #ffffff;
+    border-radius: 5px;
+    .title-icon {
+      position: relative;
+      width: 100%;
+      height: 34px;
+      line-height: 34px;
+      text-align: center;
+      span{
+        font-family: AdobeHeitiStd-Regular;
+        font-size: 16px;
+        color: #333;
+      }
+      img{
+        position: absolute;
+        top: 14px;
+        left: 25px;
+      }
+    }
+    ul.recommend-list{
+      padding: 14px 0px 0 8px;
+      width: 220px;
+      li.recommend{
+        margin-bottom: 12px;
+        .img {
+          margin-right: 8px;
+          float: left;
+          width: 96px;
+          height: 96px;
+          border-radius: 2px;
+          border: solid 1px #e2e2e2;
+          img{
+            width: 100%;
+            height: 100%;
+          }
+        }
+      .content{
+        float: left;
+        width: 95px;
+        line-height: 96px;
+        .name {
+          width: 95px;
+          font-size: 14px;
+          color: #333333;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          span{
+            color: #333;
+            &:hover{
+               color:#2496f1;
+             }
+            }
+          }
+        }
+      &:last-child{
+        margin-bottom: 0;
+       }
+      }
+    }
 	}
 
-	#recommends .recommend-list .recommend .name {
-		font-size: 16px;
-		color: #383939;
-		font-weight: 600;
-		width: 200px;
-		height: 30px;
-		margin-top: 10px;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		word-break: break-all;
-	}
-	/*#recommends .recommend-list .recommend:hover .name{*/
-		/*width: auto;*/
-	/*}*/
-	#recommends .recommend-list .recommend .subject, #recommends .recommend-list .recommend .description {
-		font-size: 12px;
-		color: #797979;
-		line-height: 18px;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		display: -webkit-box;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: 2;
-		max-height: 36px;
-	}
-	#recommends .recommend-list .recommend .description{
-		margin-top: 5px;
-		width: 200px;
-		height: 35px;
-	}
-	#recommends .recommend-list .recommend .subject span {
-		width: 204px;
-		white-space: pre-wrap;
-		word-wrap : break-word ;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-	#recommends .recommend-list .recommend:hover{
-		border: #5078cb 1px solid;
-	}
-	#recommends .recommend-list .recommend .description span {
-		word-break: break-all;
-		width: 204px;
-		display: inline;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: pre-wrap;
-		word-wrap : break-word ;
-	}
 </style>

components/provider/RecommendStore.vue

@@ -1,26 +1,21 @@
 <template>
   <div class="container marketing">
-    <div class="sales-rank" v-if="providerType === 'original'">
-      <sales-rank />
+    <div class="toggle-store">
+      <toggle-store />
     </div>
-    <div class="carousel" :class="{carousel_670: providerType === 'original'}">
+    <div class="carousel">
       <carousel />
     </div>
-    <div class="new-store">
-      <new-store />
-    </div>
   </div>
 </template>
 <script>
-import SalesRank from './SalesRank.vue'
-import NewStore from './NewStore.vue'
+import ToggleStore from './ToggleStore.vue'
 import Carousel from './Carousel.vue'
 
 export default {
   name: 'recommend-store',
   components: {
-   SalesRank,
-    NewStore,
+    ToggleStore,
     Carousel
   },
   computed: {
@@ -36,30 +31,30 @@ export default {
   .marketing {
     width: 1190px;
     min-height: 360px;
-    padding: 0;
-
-    .sales-rank {
-      width: 240px;
-      min-height: 360px;
+    padding-top: 20px!important ;
+    overflow: hidden;
+    .toggle-store {
       float: left;
-      display: inline-block;
+      margin-right: 15px;
+      width: 220px;
+      height: 402px
     }
 
     .carousel {
-      width: 910px;
-      min-height: 360px;
+      width: 955px;
+      min-height: 400px;
       display: inline-block;
       float: left;
       border: 1px solid #D6D3CE;
     }
 
-    .carousel_670 {
-      width: 670px;
-      min-height: 360px;
-      display: inline-block;
-      float: left;
-      border: 1px solid #D6D3CE;
-    }
+    /*.carousel_670 {*/
+      /*width: 670px;*/
+      /*min-height: 360px;*/
+      /*display: inline-block;*/
+      /*float: left;*/
+      /*border: 1px solid #D6D3CE;*/
+    /*}*/
 
     .new-store {
       width: 280px;

components/provider/RecommendStoreShow.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="container showAll">
+    <div class="new">
+      <new-store/>
+      <recommend-original/>
+      <hot-commodity/>
+    </div>
+    <div class="search">
+      <suppliers/>
+    </div>
+  </div>
+</template>
+<script>
+import NewStore from './NewStore.vue'
+import RecommendOriginal from './RecommendOriginal.vue'
+import HotCommodity from './HotCommodity.vue'
+import Suppliers from './Suppliers.vue'
+
+export default {
+  name: 'recommend-store',
+  components: {
+    NewStore,
+    RecommendOriginal,
+    HotCommodity,
+    Suppliers
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import '~assets/scss/variables';
+
+  .showAll {
+    margin-top: 15px;
+    width: 1190px;
+    padding: 0;
+    overflow: hidden;
+    .new {
+      float: left;
+      margin-right: 15px;
+      width: 220px;
+    }
+    .search {
+      width: 955px;
+      float: left;
+    }
+  }
+</style>

components/provider/Suppliers.vue

@@ -1,27 +1,22 @@
 <template>
-  <div class="container" id="store-list">
+  <div id="store-list">
     <table class="table">
       <thead>
-      <tr>
-        <td width="175"></td>
-        <td width="auto"></td>
-        <td width="400">
-          <search-header :outerKeyword="keyword" @searchAction="search" :placeholder="'品牌/类目/型号/店铺名'"></search-header>
-          <!--<div class="input-group" style="display: table;">-->
-            <!--<input class="form-control" type="search" v-model="keyword" placeholder="品牌/类目/型号/店铺名" @search="search()" />-->
-            <!--<span class="input-group-btn">-->
-							<!--<button type="button" class="btn btn-default" @click="search()"><i class="iconfont">&#xe6fc;</i></button>-->
-						<!--</span>-->
-          <!--</div>-->
-        </td>
-        <td width="150" style="vertical-align: middle"><span>入驻商家：</span><span class="text-message">{{stores ? stores.totalElements : 0}}</span><span>家</span></td>
-        <td width="150" style="vertical-align: middle;">
-          <a @click="goStoreApply" style="width: 100px; height: 30px; display: inline-block;"><button class="btn btn-primary" style="margin-left: 6px;">立即入驻</button></a>
-        </td>
-      </tr>
+      <tr data-v-12978a78="">
+        <td width="120" data-v-12978a78=""><span data-v-12978a78="">原&nbsp;&nbsp;厂</span></td>
+        <td width="100" data-v-12978a78=""></td>
+        <td width="450" data-v-12978a78=""></td>
+        <td width="150" style="vertical-align: middle" data-v-12978a78=""></td>
+        <td width="120" style="vertical-align: middle;" data-v-12978a78=""></td></tr>
       </thead>
       <tbody>
       <!--<tr>{{$data}}</tr>-->
+      <tr style="height: 50px;">
+        <td colspan="5">
+          <search-header :outerKeyword="keyword" @searchAction="search" :placeholder="'品牌/类目/型号/店铺名'"></search-header>
+          <a @click="goStoreApply" class="btn-sure"><button class="btn btn-primary">立即入驻</button></a>
+        </td>
+      </tr>
       <tr v-for="store in stores.content" v-if="store">
         <td>
           <div class="logo">
@@ -35,8 +30,8 @@
             <span style="word-break: break-word;">{{showLittleDescription(store.enterprise.description)}}<em v-if="store.description && store.description.length > 160">...</em></span>
           </div>
         </td>
-        <td class="vertical-middle">
-          <a :href="'/store/' + store.uuid" target="_blank"><button class="btn btn-primary">进入店铺&nbsp;&gt;</button></a>
+        <td class="vertical-middle" style="text-align: center">
+          <a :href="'/store/' + store.uuid" target="_blank"><button class="btn btn-primary">进入店铺</button></a>
         </td>
       </tr>
       <tr v-if="!stores.content || stores.content.length == 0">
@@ -128,57 +123,106 @@ export default {
   }
 }
 </script>
-<style scoped>
-  .el-pagination .el-pager li.active{
-    background-color: #5078cb;
-    border-color: #337ab7;
-  }
-
+<style lang="scss" scoped>
   #store-list{
-		width: 1190px;
-		padding: 0;
-	}
-
-	#store-list table {
-		border: 1px solid #d8d4d4;
-		font-size: 14px;
-	}
-
-	#store-list table>thead>tr {
-	  background: none;
-		background-color: #f7f7f7;
-		font-size: 14px;
-		font-weight: 600;
-		color: rgb(50,50,50);
+		width: 955px;
+    table{
+      table-layout: fixed;
+      width: 955px;
+      height: 1216px;
+      thead{
+        padding: 10px 0 9px 9px;
+        width: 955px;
+        height: 34px;
+        line-height: 34px;
+        tr{
+          vertical-align: middle;
+          td{
+            padding: 0!important;
+            height: 34px;
+            line-height: 34px;
+            background-color: #2496f1;
+            span{
+              padding-left: 10px;
+              font-size: 16px;
+              color: #fff;
+            }
+            &:first-child {
+               border-top-left-radius: 5px;
+             }
+           &:last-child {
+              border-top-right-radius: 5px;
+            }
+          }
+        }
+      }
+      tbody{
+        background: #fff;
+        tr{
+          height: 112px;
+          td{
+            padding: 0!important;
+            vertical-align: middle;
+            a.btn-sure{
+              button{
+                margin: 0px 0 0 80px;
+                width: 110px !important;
+                height: 28px;
+                font-size: 14px;
+                color: #2496f1;
+                background-color: #fff;
+                border-radius: 3px;
+                border: solid 1px #2496f1;
+                &:hover{
+                   background-color: #2496f1;
+                   font-size: 14px;
+                   color: #fff;
+                 }
+              }
+            }
+          }
+          &:hover td div{
+             color: #2496f1;
+           }
+        }
+      }
+    }
 	}
-
 	#store-list table>thead>tr input {
 		font-weight: 100;
 	}
-
 	#store-list .text-message {
 		color: rgb(80,120,203);
 	}
 
 	#store-list .btn-primary {
-		background-color: rgb(80,120,203);
-		color: #fff;
-		width: 100px;
-		height: 30px;
-		line-height: 14px;
+    width: 88px;
+    height: 28px;
+    font-size: 14px;
+    color: #2496f1;
+    background-color: #ffffff;
+    border-radius: 3px;
+    border: solid 1px #2496f1;
 	}
-
+  #store-list .btn-primary:hover{
+    background-color: #2496f1;
+    border: solid 1px #2496f1;
+    color: #fff;
+  }
 	#store-list table>tbody .logo {
-		width: 150px;
-		height: 76px;
-		text-align: center;
-		line-height: 72px;
-		border:1px solid #ccc;
+    margin-left: 15px;
+    width: 80px;
+    height: 80px;
+    line-height: 80px;
+    text-align: center;
+    border-radius: 2px;
+    border: solid 1px #e2e2e2;
+    overflow: hidden;
 	}
 
 	#store-list table>tbody img {
-		max-width: 148px;
-		max-height: 72px;
+		max-width: 80px;
+		max-height: 80px;
 	}
 
 	#store-list table>tbody .vertical-middle{
@@ -201,8 +245,9 @@ export default {
 	}
 
 	#store-list table>tbody .store-message {
+    margin-top: 15px;
     color: #999;
-    width: 95%;
+    width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
@@ -222,5 +267,9 @@ export default {
     url('//at.alicdn.com/t/font_sw3uw5ndd9uow29.ttf') format('truetype'),
     url('//at.alicdn.com/t/font_sw3uw5ndd9uow29.svg#iconfont') format('svg');
   }
+  .el-pagination .el-pager li.active{
+    background-color: #5078cb;
+    border-color: #337ab7;
+  }
 </style>
 

components/provider/ToggleStore.vue

@@ -0,0 +1,207 @@
+<template>
+  <div class="toggleStore">
+    <!--原厂-->
+    <div class="factory list-item">
+      <div class="header">
+        <div class="kind"><span></span>原&nbsp;&nbsp;&nbsp;&nbsp;厂</div>
+        <div class="count">
+          <span>已入驻</span>
+          <div class="count_num">
+            <span>1</span><span>2</span><span>3</span>
+          </div>
+        </div>
+      </div>
+      <div class="body">
+        <p>原厂直营，品质保障</p>
+        <p>全球品牌，自由筛选</p>
+        <p>原装现货，买得放心</p>
+      </div>
+    </div>
+    <!--代理经销-->
+    <div class="agent list-item">
+      <div class="header">
+        <div class="kind"><span></span>代理经销</div>
+        <div class="count">
+          <span>已入驻</span>
+          <div class="count_num">
+            <span>1</span><span>2</span><span>3</span>
+          </div>
+        </div>
+      </div>
+      <div class="body">
+        <p>百强代理，资源共享</p>
+        <p>物料询价，极速响应</p>
+        <p>千万型号，一站找齐</p>
+      </div>
+    </div>
+    <!--寄售-->
+    <div class="sale list-item">
+      <div class="header">
+        <div class="kind"><span></span>优软寄售</div>
+        <a class="enter" @click="open('/store/33069557578d44e69bd91ad12d28a8d4')">进入店铺 <i class="fa fa-angle-right"></i></a>
+      </div>
+      <div class="body">
+        <p>海量库存、不赚差价</p>
+        <p>在线下单、在线跟踪</p>
+        <p>价格透明、节约成本</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'excellent-suppliers',
+  props: ['isShowMore'],
+  computed: {
+    stores () {
+      return this.$store.state.provider.storeCms.recommendStore.data
+    }
+  },
+  methods: {
+    // 店铺入驻数量
+    formatNumber (num, key) {
+      let count = ('000' + num).substr(-key)
+      let _arr = []
+      for (var i = 0; i < count.length; i++) {
+        _arr.push(count[i])
+      }
+      return _arr
+    },
+    // 寄售
+    open (url) {
+      window.open(url)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .toggleStore {
+    float: left;
+		width: 220px;
+    height: 402px;
+		padding: 0;
+    .list-item{
+      width: 100%;
+      height: 134px;
+      background: #fff;
+      border-bottom: 1px solid #ece9ec;
+      .header {
+        overflow: hidden;
+        padding: 10px 8px 0;
+        .kind{
+          float: left;
+          font-size: 16px;
+          font-weight: bold;
+          color: #2496f1;
+            span{
+              display: inline-block;
+              margin-right: 4px;
+              width: 6px;
+              height: 12px;
+              background: url('/images/original/angle-blue.png') no-repeat;
+            }
+        }
+        .count{
+          overflow: hidden;
+          float: right;
+          padding: 0 5px;
+          width: 112px;
+          height: 26px;
+          line-height: 26px;
+          background-color: #fff;
+          border-radius: 2px;
+          border: solid 1px #bfbfbf;
+          span {
+            float: left;
+            margin-right: 4px;
+            font-size: 12px;
+            letter-spacing: 0;
+            color: #666;
+          }
+          .count_num{
+            float: left;
+            margin-top: 3px;
+            span{
+              display: inline-block;
+              margin-right: 3px;
+              width: 18px;
+              height: 18px;
+              line-height: 18px;
+              font-size: 12px;
+              color: #fff;
+              text-align: center;
+              background-color: #a1a0a0;
+              border-radius: 2px;
+              &:last-child{
+                margin-right: 0;
+               }
+            }
+          }
+        }
+        .enter{
+          float: right;
+          display: inline-block;
+          width: 72px;
+          height: 22px;
+          line-height: 20px;
+          text-align: center;
+          font-size: 12px;
+          color: #2496f1;
+          background-color: #ffffff;
+          border-radius: 11px;
+          border: solid 1px #2496f1;
+          i{
+            font-size: 16px;
+          }
+          &:hover{
+            color: #fff;
+            background: #2496f1;
+            border: solid 1px #2496f1;
+           }
+        }
+      }
+      .body {
+        margin-top: 20px;
+        padding: 0 12px 0;
+        p{
+          width: 195px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          font-size: 14px;
+          letter-spacing: 0;
+          color: #666666;
+        }
+      }
+      &:hover{
+         background: #fa9819;
+         cursor: pointer;
+        .kind {
+          color: #fff;
+          span{
+            background: url('/images/original/angle-white.png') no-repeat;
+          }
+        }
+        .count{
+          background-color: #d87c05;
+          border: solid 1px #d87c05;
+          span {
+            color: #fff;
+          }
+          .count_num{
+            span{
+              color: #626364;
+              background-color: #fff;
+            }
+          }
+        }
+        .body{
+          p{
+            color: #fff;
+          }
+        }
+      }
+    }
+	}
+</style>

components/provider/index.js

@@ -3,5 +3,7 @@ import RecommendOriginal from './RecommendOriginal.vue'
 import ExcellentSuppliers from './ExcellentSuppliers.vue'
 import HotCommodity from './HotCommodity.vue'
 import Suppliers from './Suppliers.vue'
+import ToggleStore from './ToggleStore.vue'
+import RecommendStoreShow from './RecommendStoreShow.vue'
 
-export { RecommendStore, RecommendOriginal, ExcellentSuppliers, HotCommodity, Suppliers }
+export { RecommendStore, RecommendOriginal, ExcellentSuppliers, HotCommodity, Suppliers, ToggleStore, RecommendStoreShow }

pages/provider/shop.vue

@@ -0,0 +1,41 @@
+<template>
+  <!-- 组件模板只能包含一个根元素，除非使用v-if 和 v-if-else -->
+  <div>
+    <!-- 轮播及店铺推荐 -->
+    <recommend-store/>
+
+    <recommendStore-show/>
+  </div>
+</template>
+<script>
+import { RecommendStore, RecommendStoreShow } from '~components/provider'
+
+export default {
+  layout: 'main',
+  fetch ({ store }) {
+    return Promise.all([
+      store.dispatch('loadBanners', {type: 'Brand'}),
+      store.dispatch('provider/loadSalesStore', { isOriginal: true }),
+      store.dispatch('provider/loadNewStores', { types: 'ORIGINAL_FACTORY' }),
+      store.dispatch('provider/loadRecommendOriginal', { types: 'ORIGINAL_FACTORY', num: 5 }),
+      store.dispatch('provider/findSimilarStoreList', { page: 1, count: 10, types: 'ORIGINAL_FACTORY' }),
+      store.dispatch('provider/loadHotComponents'),
+      store.dispatch('loadStoreStatus', { op: 'check' })
+    ])
+  },
+  components: {
+    RecommendStore,
+    RecommendStoreShow
+  },
+  data () {
+    return {
+      msg: 'hello vue'
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+  div{
+    background: #efefef;
+  }
+</style>