店铺搜索页样式调整

components/main/Search.vue

@@ -167,7 +167,7 @@
     height: 40px;
     position: relative;
     .search-input{
-      width: 364px;
+      width: 371px;
       float: left;
     }
     .search-input, .search-btn {
@@ -175,7 +175,7 @@
       border-width: 2px;
     }
     .select-type{
-      width: 78px;
+      width: 70px;
       float: left;
       border: #5078cb 2px solid;
       height: 40px;

components/searchStore/SearchTitle.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="search-store-title">
     <span class="search-result">
-      搜索"
-      <span>{{keyword}}</span>
+      搜索 "
+      <span style="color: #ff0101">{{keyword}}</span>
       "，为您找到
       <span v-text="goodsCount">1000</span>
       家店铺：
@@ -26,7 +26,7 @@
     </div>
       <div class="off">
         <a @click="showClick">
-          <span v-text="show?'收起':'展开'"></span>
+          <span v-text="show?'收起':'展开'" style="margin-right: 10px;"></span>
           <i v-show="!show" class="fa fa-angle-down"></i>
           <i v-show="show" class="fa fa-angle-up"></i>
         </a>
@@ -95,7 +95,7 @@
 </script>
 <style>
   .search-store-title {
-    margin-top: 10px;
+    margin-top: 22px;
   }
   .search-store-title .select-type {
     min-width: 87px;
@@ -103,10 +103,11 @@
   .tab-filter{
     width: 1190px;
     height: 40px;
-    margin: 10px auto;
+    margin-top: 14px;
     line-height: 40px;
-    margin-bottom: 10px;
-    background: #f1efef;
+    background: #f4f8ff;
+    border: 1px solid rgb( 231, 231, 231 );
+    border-bottom: none;
   }
   .tab-filter .fl,.tab-filter .fr{
     float: left;
@@ -116,13 +117,14 @@
   }
   .tab-filter .fr{
     max-width: 1050px;
+    margin-left: 10px;
   }
   .tab-filter .fl span{
     font-size: 14px;
   }
   .tab-filter .fr div{
     float: left;
-    margin: 0 5px;
+    margin-right: 10px;
   }
   .tab-filter .fr div.active a, .tab-filter .fr div.active select{
     border: #5078cb 1px solid;
@@ -133,13 +135,13 @@
   }
   .tab-filter .fr a{
     display: inline-block;
-    padding: 1px 10px;
+    padding: 0 10px;
     border: #ccc 1px solid;
-    line-height: 26px;
+    line-height: 30px;
     font-size: 14px;
     text-align: center;
     color: #333;
-    max-height: 30px;
+    height: 30px;
     background: #fff;
   }
   .tab-filter .fr a i{
@@ -161,7 +163,6 @@
   .tab-filter .off a{
     border: none;
     text-align: right;
-    padding-left: 360px;
     background: none;
     color: #333;
   }
@@ -169,9 +170,10 @@
     font-size: 16px;
   }
   .tab-filter .fr .form-control{
-    width: 70px;
+    width: 85px;
     height: 30px;
+    line-height: 30px;
     border-radius: 0;
-    padding-left: 5px;
+    padding: 0 5px;
   }
 </style>

components/searchStore/StoreContent.vue

@@ -3,30 +3,42 @@
   <ul class="store-list" v-if="storeData.content && storeData.content.length > 0">
     <li v-for="(store, index) in storeData.content">
       <div class="store-content-left">
-        <a :href="'/store/' + store.uuid">
+        <a :href="'/store/' + store.uuid" target="_blank">
           <img :src="store.logoUrl?store.logoUrl:'/images/all/default.png'" class="storeImg" alt="">
         </a>
         <div class="store-detail">
-          <a :href="'/store/' + store.uuid">{{store.storeName}}</a>
-          <span href="">电话：{{store.enterprise.enTel}}</span>
-          <span href="">传真：{{store.enterprise.enFax}}</span>
-          <span href="">地址：{{store.enterprise.enAddress}}</span>
-        </div>
-        <div class="btn-content">
+          <a :href="'/store/' + store.uuid" target="_blank">{{store.storeName}}</a>
           <span style="position: relative;" class="call-seller">
             <img src="static/img/common/songguo.png?_v=1503050008623">
 							<a name="21059" href="javascript:void(0)" class="contact_btn">联系卖家</a>
           </span>
+          <span class="main-product">
+             <a :href="'/store/' + store.uuid" target="_blank" v-text="'店铺简介：' + store.description"></a>
+          </span>
+        </div>
+        <div class="component-count">
+          <span style="margin-right: 30px">销量：<span>0</span></span>
+          <span>库存量：<span v-text="store.totalReserve"></span></span>
+        </div>
+        <div class="btn-content">
           <a class="focus-store store-btn" @click="focusStore(store, index)" v-text="focusData[index] === 'true'?'已关注':'关注店铺'"></a>
-          <a :href="'/store/' + store.uuid" class="enter-store store-btn">进入店铺</a>
+          <a :href="'/store/' + store.uuid" target="_blank" class="enter-store store-btn">进入店铺</a>
         </div>
       </div>
       <ul class="store-component-list" v-if="componentData">
         <li v-for="item in componentData[index].content">
-          <a :href="`/product/component/${item.uuid}`"><img :src="item.img?item.img:'/images/all/default.png'" alt=""></a>
-          <a :href="`/product/component/${item.uuid}`" class="store-component-code" v-text="item.code" :title="item.code"></a>
-          <a :href="`/product/brand/${item.branduuid}`" v-text="item.brandNameEn"></a>
-          <a :href="`/product/kind/${item.kindUuid}`" v-text="item.kindNameCn"></a>
+          <!--<a :href="`/product/component/${item.uuid}`" style="display: block"><img :src="item.img?item.img:'/images/all/default.png'" alt=""></a>
+          <div class="describe-list">
+            <a style="margin-bottom: 8px" :href="`/product/component/${item.uuid}`" class="store-component-code" v-text="item.code" :title="item.code"></a>
+            <a style="margin-bottom: 8px" :href="`/product/brand/${item.branduuid}`" v-text="item.brandNameEn"></a>
+            <a :href="`/product/kind/${item.kindUuid}`" v-text="item.kindNameCn"></a>
+          </div>-->
+          <a style="display: block"><img :src="item.img?item.img:'/images/all/default.png'" alt=""></a>
+          <div class="describe-list">
+            <a class="store-component-code" v-text="item.code" :title="item.code"></a>
+            <a v-text="item.brandNameEn"></a>
+            <a v-text="item.kindNameCn"></a>
+          </div>
         </li>
       </ul>
     </li>
@@ -113,33 +125,38 @@
 </script>
 <style scoped>
   .store-list {
-    border-right: 1px solid;
-    border-left: 1px solid;
+    border-right: 1px solid rgb( 231, 231, 231 );
+    border-left: 1px solid rgb( 231, 231, 231 );
   }
   .store-list >li{
-    border-bottom: 1px solid;
+    border-bottom: 1px solid rgb( 231, 231, 231 );
     padding: 20px 0;
   }
   .store-content-left {
-    width: 550px;
     display: inline-block;
+    margin-right: 27px;
+  }
+  .store-content-left .component-count{
+    display: block;
+    margin-left: 10px;
+    margin-top: 20px;
   }
   .store-content-left >div {
     display: inline-block;
   }
   .store-content-left >a {
     color: black;
+    float: left;
   }
   .store-content-left >a >img.storeImg {
-    border: 1px solid;
-    width: 250px;
-    height: 200px;
+    border: 1px solid rgb( 231, 231, 231 );
+    width: 100px;
+    height: 100px;
     margin-left: 10px;
   }
   .btn-content {
-    position: relative;
-    top: 30px;
-    float: right;
+    display: block!important;
+    margin-top: 20px;
   }
   .btn-content >span {
     display: block;
@@ -155,19 +172,15 @@
     font-weight: 700;
     color: black;
   }
-  .store-detail a:hover {
-    color: #f39801;
-  }
   .store-detail >span{
     display: block;
-    margin-top: 10px;
     font-size: 12px;
-    width: 178px;
+    width: 190px;
   }
-  .btn-content .call-seller {
-    margin-bottom: 30px;
+  .store-detail .call-seller {
+    margin-top: 14px;
   }
-  .btn-content .call-seller .contact_btn {
+  .store-detail .call-seller .contact_btn {
     width: 62px;
     height: 18px;
     line-height: 18px;
@@ -177,60 +190,96 @@
     color: #fff;
     font-size: 12px;
     border-radius: 5px;
+    margin-left: 5px;
+  }
+  .store-detail .main-product {
+    margin-top: 12px;
+  }
+  .store-detail .main-product a:hover {
+    cursor: pointer;
+    color: #5078cb!important;
+  }
+  .store-detail .main-product a {
+    color: #333;
+    width: 126px;
+    display: inline-block;
+    float: left;
+    overflow: hidden;
+    word-break: break-all;
+    height: 35px;
+    line-height: 16px;
+    text-overflow: ellipsis;
+    /*-webkit-line-clamp: 2;
+    -moz-line-clamp: 2;
+    -o-line-clamp: 2;
+    -ms-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    -moz-box-orient: vertical;
+    -o-box-orient: vertical;
+    -ms-box-orient: vertical;*/
   }
   .btn-content .store-btn {
-    padding: 5px;
-    background: #169bd5;
-    text-align: center;
-    border-radius: 5px;
+    padding: 4px 14px;
     color: white;
-    display: block;
+    display: inline-block;
   }
   .btn-content .focus-store {
-    margin-bottom: 30px;
+    margin-right: 30px;
+    margin-left: 10px;
+    background: #5078cb;
+    border: 1px solid #5078cb;
   }
   .btn-content .enter-store {
-
+    background: #ff8522;
+    border: 1px solid #ff8522;
   }
   .store-component-list {
-    width: 638px;
     display: inline-block;
-    vertical-align: middle;
-    padding-left: 20px;
+    margin-right: 6px;
   }
   .store-component-list >li {
     display: inline-block;
     text-align: center;
-    padding: 5px 15px;
-    border: 1px solid;
-    margin-left: 20px;
-    width: 132px;
-    height: 132px;
+    border: 1px solid rgb( 231, 231, 231 );
+    margin-right: 14px;
+    width: 152px;
+    height: 178px;
+  }
+  .store-component-list >li:hover {
+    cursor: pointer;
+    color: #fff!important;
+    border: 1px solid #5078cb;
+  }
+  .store-component-list >li:hover .describe-list {
+    background: #5078cb;
+  }
+  .store-component-list >li:hover div a {
+    color: #fff;
   }
   .store-component-list >li img {
-    width: 100px;
-    height:60px;
+    width: 150px;
+    height:114px;
   }
-  .store-component-list >li img:hover {
-    cursor: pointer;
+  .store-component-list >li .describe-list {
+    padding: 2px 10px;
+    background: #dee0e5;
+    height: 64px;
   }
-  .store-component-list >li a:not(:first-child) {
+  .store-component-list >li div a {
     display: block;
-    font-size: 10px;
-    color: black;
-    margin-top: 3px;
-    max-width: 100px;
+    font-size: 14px;
+    text-align: left;
+    color: #333;
     overflow: hidden;
     text-overflow: ellipsis;
-    height: 16px;
-    line-height: 16px;
+    line-height: 20px;
+    white-space: nowrap;
   }
-  .store-component-list >li a:hover {
+ /* .store-component-list >li a:hover {
     color: #f39801;
-  }
-  .store-component-list .store-component-code {
-    font-weight: 600;
-  }
+  }*/
+  /*.store-component-list .store-component-code {
+  }*/
   .header-text {
     text-align: center;
     font-size: 20px;

nuxt.config.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const isProdMode = Object.is(process.env.NODE_ENV, 'production')
-const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://www.usoftmall.com/' : 'http://192.168.253.121:8080/platform-b2c/')
+const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://www.usoftmall.com/' : 'http://192.168.253.123:8080/platform-b2c/')
 
 module.exports = {
   router: {