搜索和店铺列表

components/mobile/Home.vue

@@ -22,55 +22,57 @@
       </div>
     </div>
     <div class="home-main">
-      <a herf="#" class="home-main-content">
+      <nuxt-link to="/mobile/brand" class="home-main-content">
         <div>
           <img src="/images/qrcode/uas.png" alt="1">
         </div>
         <h2>4036万</h2>
         <p>品牌</p>
-      </a>
-      <a herf="#" class="home-main-content">
+      </nuxt-link>
+      <nuxt-link to="/mobile/brand" class="home-main-content">
         <div>
           <img src="/images/qrcode/uas.png" alt="1">
         </div>
         <h2>3250万</h2>
         <p>型号</p>
-      </a>
-      <a herf="#" class="home-main-content">
+      </nuxt-link>
+      <nuxt-link to="/brand" class="home-main-content">
         <div>
           <img src="/images/qrcode/uas.png" alt="1">
         </div>
         <h2>926万</h2>
         <p>规格书</p>
-      </a>
-      <a herf="#" class="home-main-content">
+      </nuxt-link>
+      <nuxt-link to="/mobile/shop" class="home-main-content">
         <div>
           <img src="/images/qrcode/uas.png" alt="1">
         </div>
         <p>店铺列表</p>
-      </a>
-      <a herf="#" class="home-main-content">
+      </nuxt-link>
+      <nuxt-link to="/mobile/user" class="home-main-content">
         <div>
           <img src="/images/qrcode/uas.png" alt="1">
         </div>
         <p>我的收藏</p>
-      </a>
-      <a herf="#" class="home-main-content">
+      </nuxt-link>
+      <nuxt-link to="/brand" class="home-main-content">
         <div>
           <img src="/images/qrcode/uas.png" alt="1">
         </div>
         <p>联系我们</p>
-      </a>
+      </nuxt-link>
     </div>
     <div class="home-search-list">
       <div class="search-list-top">
         <h5>历史搜索：<i class="fa fa-camera-retro"></i></h5>
-        <a href="#">smk212121288</a>
-        <a href="#">CPU</a>
-        <a href="#">CPU</a>
-        <a href="#">CPU</a>
-        <a href="#">CPU</a>
-        <a href="#">CPU</a>
+        <div class="search-list-item">
+          <a href="#">smk212121288</a>
+          <a href="#">CPU</a>
+          <a href="#">CPU</a>
+          <a href="#">CPU</a>
+          <a href="#">CPU</a>
+          <a href="#">CPU</a>
+        </div>
       </div>
       <div class="search-list-bottom">
         <h5><i class="fa fa-camera-retro"></i>热搜器件</h5>
@@ -80,6 +82,8 @@
         <a href="#">CPU</a>
         <a href="#">CPU</a>
         <a href="#">CPU</a>
+        <a href="#">CPU</a>
+        <a href="#">CPU</a>
       </div>
     </div>
   </div>
@@ -218,9 +222,12 @@
 }
 .home-search-list{
   /*display:none;*/
-  width:80%;
+  width:6.55rem;
   margin:0 auto;
   margin-top:.1rem;
+  .search-list-top{
+
+  }
   .search-list-top{
     h5{
       font-size:.3rem;
@@ -232,17 +239,28 @@
         right:0;
       }
     }
-    a{
-      display:inline-block;
-      font-size:.28rem;
-      line-height: .45rem;
-      color:rgb(102,102,102);
-      background: #fff;
-      width:2.18rem;
-      padding:0 .1rem;
-      overflow:hidden;
-      text-overflow : ellipsis;
-      margin-left:.12rem;
+    .search-list-item{
+      a{
+        display:inline-block;
+        font-size:.28rem;
+        line-height: .45rem;
+        color:rgb(102,102,102);
+        background: #fff;
+        padding:0 .1rem;
+        width:2.18rem;
+        overflow:hidden;
+        text-overflow : ellipsis;
+        &:nth-child(2){
+           border-left:1px solid #a5a6a6;
+           border-right:1px solid #a5a6a6;
+           text-align: center;
+         }
+        &:nth-child(5){
+           border-left:1px solid #a5a6a6;
+           border-right:1px solid #a5a6a6;
+           text-align: center;
+         }
+      }
     }
   }
   .search-list-bottom{

components/mobile/brand/BrandDetail.vue

@@ -173,6 +173,9 @@
       .brand-param-item {
         font-size: .28rem;
         margin-bottom: .48rem;
+
+
+
         .remind-tag {
           color: rgb(4,198,96);
           font-size: .24rem;

components/mobile/common/shopList.vue

@@ -0,0 +1,59 @@
+<template>
+<div class="shop-list">
+    <h3>深圳华商龙商务互联科技有限公司</h3>
+    <div class="list-item">
+      <div class="item-img">
+        <i></i>
+        <img src="/images/component/default.png" alt="">
+      </div>
+      <div class="list-item-phone">
+        <p>电话：<span>0755-1234567</span></p>
+        <p>传真：<span>0755-1234567</span></p>
+        <p>商家介绍： <a href="#">点击查看</a></p>
+        <i></i>
+      </div>
+    </div>
+</div>
+</template>
+
+<script>
+    export default {}
+</script>
+
+<style scoped lang="scss">
+.shop-list{
+  background:#fff;
+  margin-top:.12rem;
+  padding-bottom:.28rem;
+  h3{
+    font-size:.32rem;
+    line-height: .8rem;
+    margin:0;
+    margin-left:.27rem;
+    margin-bottom:.14rem;
+  }
+  .list-item{
+    width:6.77rem;
+    margin-left:.39rem;
+    justify-content: space-around;
+    display:inline-flex;
+    .item-img{
+      width:2.42rem;
+      i{}
+      img{
+        width:2.4rem;
+        height:1.69rem;
+      }
+    }
+    .list-item-phone{
+      width:3.95rem;
+      padding-top:.18rem;
+      p{
+        font-size:.28rem;
+        line-height: .45rem;
+        margin:0;
+      }
+    }
+  }
+}
+</style>

components/mobile/search/brandList.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="brand-list">
+    <div class="brand-list-content">
+      <div class="brand-list-top">
+        <span>品牌墙</span>
+        <span>展开<i></i></span>
+      </div>
+      <div class="brand-list-item">
+        <img src="/images/component/default.png"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {}
+</script>
+
+<style scoped lang="scss">
+.brand-list{
+  width:100%;
+  .brand-list-content{
+    margin:0 auto;
+    border-top:.02rem solid #dedfdf;
+    border-bottom:.02rem solid #dedfdf;
+    width:7.1rem;
+    min-height:3.02rem;
+    text-align: center;
+    padding-top:.33rem;
+    .brand-list-top{
+      span:first-child{
+         font-size:.32rem;
+        margin-right:4.78rem;
+      }
+      span:last-child{
+        font-size:.28rem;
+        i{}
+      }
+    }
+    .brand-list-item{
+      justify-content: flex-start;
+      flex-wrap: wrap;
+      display:flex;
+      img{
+        width:1.75rem;
+        height:.78rem;
+        margin-top:.2rem;
+      }
+    }
+  }
+}
+</style>

components/mobile/search/detailBrand.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="detail-brand">
+    <div class="detail-brand-content">
+      <h4>主营产品</h4>
+      <div class="brand-list">
+        <img src="/images/component/default.png"/>
+        <p>陶瓷电容，多层陶瓷电容陶瓷电容，多层陶瓷电容,陶瓷电容，多层陶瓷电容陶瓷电容电容，多层陶电容瓷瓷电电容瓷电电容瓷电电容……</p>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+    export default {}
+</script>
+
+<style scoped lang="scss">
+.detail-brand{
+  width:100%;
+  .detail-brand-content{
+    margin:0 auto;
+    border-top:.02rem solid #dedfdf;
+    border-bottom:.02rem solid #dedfdf;
+    width:7.1rem;
+    height:3.02rem;
+    padding-top:.18rem;
+    h4{
+      font-size:.32rem;
+      line-height: .6rem;
+      margin:0;
+      margin-left:3.97rem;
+    }
+    .brand-list{
+      display:flex;
+      img{
+        display:inline-block;
+        margin:0 .15rem;
+        width:2.03rem;
+        height:1.73rem;
+      }
+      p{
+        font-size:.28rem;
+        line-height: .4rem;
+        padding:.12rem .46rem 0 .05rem;
+      }
+    }
+  }
+}
+</style>

components/mobile/search/goodList.vue

@@ -0,0 +1,38 @@
+<template>
+<div class="detail-brand">
+  <div class="brand-item">
+    <p>型号：<span>PSAHNSJLK-56289T</span></p>
+    <p>品牌：<span>松下</span></p>
+    <p>产品描述：<span>缓冲器、整券、芯片、缓冲器、整券、芯片缓冲器、整券、芯片缓冲器、</span></p>
+    <i></i>
+  </div>
+</div>
+</template>
+
+<script>
+    export default {}
+</script>
+
+<style scoped lang="scss">
+  .detail-brand{
+    background: #f8fcff;
+    width:100%;
+    min-height:2.5rem;
+    padding-top:.2rem;
+    .brand-item{
+      width:7rem;
+      margin:0 auto;
+      border-radius:.1rem;
+      background: #fff;
+      padding:.2rem;
+      p{
+        font-size:.28rem;
+        line-height:.4rem;
+        color:#333;
+        margin:0;
+        span{}
+      }
+      i{}
+    }
+  }
+</style>

components/mobile/search/index.js

@@ -0,0 +1,5 @@
+import BrandList from './brandlist.vue'
+import DetailBrand from './detailBrand.vue'
+import GoodList from './goodList.vue'
+
+export { BrandList, DetailBrand, GoodList }

nuxt.config.js

@@ -108,5 +108,5 @@ module.exports = {
     ssr: false
   }],
   /* TODO 暂时代理到商城测试版，之后再做出调整 */
-  proxyTable: ['/api/**', '/search/**', '/user/**', '/login/**', '/register/**', '/logout/**', '/static/**', '/vendor**', '/user**', '/trade/**', '/recommendation/**', '/store-service/**', '/basic/**', '/logout**', '/operation/**', '/help**', '/product**', '/store**', '/order/proxy**', '/report/**', '/store/**#/**', '/kdn/**', '/product/**Submit', '/admin**', '/product/**Submit/**', '/release/**', '/auth/store/**', '/produce/**', '/file**']
+  proxyTable: ['/api/**', '/searchs/**', '/user/**', '/login/**', '/register/**', '/logout/**', '/static/**', '/vendor**', '/user**', '/trade/**', '/recommendation/**', '/store-service/**', '/basic/**', '/logout**', '/operation/**', '/help**', '/product**', '/store**', '/order/proxy**', '/report/**', '/store/**#/**', '/kdn/**', '/product/**Submit', '/admin**', '/product/**Submit/**', '/release/**', '/auth/store/**', '/produce/**', '/file**']
 }

pages/mobile/search/_keycode.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="search-list">
+    <div class="search-item">
+      <span :class="activeType=='store'?'active':''" @click="activeType='store'">仅看有货</span>
+      <span :class="activeType=='support'?'active':''" @click="activeType='support'">店铺自营</span>
+    </div>
+    <brand-list></brand-list>
+    <detail-brand></detail-brand>
+    <good-list></good-list>
+  </div>
+</template>
+
+<script>
+  import { BrandList, DetailBrand, GoodList } from '~components/mobile/search'
+  export default {
+    layout: 'main',
+    data () {
+      return {
+        activeType: 'store'
+      }
+    },
+    components: {
+      BrandList,
+      DetailBrand,
+      GoodList
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .search-list{
+    margin-top:.88rem;
+    width:100%;
+    .search-item{
+      justify-content: space-around;
+      text-align: center;
+      display:flex;
+      span{
+        display:inline-block;
+        width:1.41rem;
+        line-height: .76rem;
+        font-size:.32rem;
+        color:#666;
+      }
+      span.active{
+        color:#3976f4;
+        border-bottom:2px solid #3976f4;
+      }
+    }
+  }
+
+</style>