增加背景图片

components/mobile/Home.vue

@@ -1,14 +1,6 @@
 <template>
   <div class="home">
     <div class="home-header">
-      <div class="home-top">
-        <p>
-          <span>搜品牌</span> |
-          <span>搜现货</span> |
-          <span>搜好店</span> |
-          <span>搜规格书</span>
-        </p>
-      </div>
       <div class="home-search">
         <ul>
           <li :class="activeType=='model'?'active':''" @click="activeType='model'"><span>型号</span></li>
@@ -25,40 +17,40 @@
     <div class="home-main">
       <a class="home-main-content">
         <div>
-          <img src="/imgs/home/brand@2x.png" alt="1">
+          <img src="/images/mobile/@2x/home/brand@2x.png" alt="1">
         </div>
         <h2>4036万</h2>
         <p>品牌</p>
       </a>
       <a class="home-main-content">
         <div>
-          <img src="/imgs/home/modelbrand@2x.png" alt="1">
+          <img src="/images/mobile/@2x/home/modelbrand@2x.png" alt="1">
         </div>
         <h2>3250万</h2>
         <p>型号</p>
       </a>
       <a class="home-main-content">
         <div>
-          <img src="/imgs/home/bookbrand@2x.png" alt="1">
+          <img src="/images/mobile/@2x/home/bookbrand@2x.png">
         </div>
         <h2>926万</h2>
         <p>规格书</p>
       </a>
       <nuxt-link to="/mobile/shop" class="home-main-content">
         <div>
-          <img src="/imgs/home/shopbrand@2x.png" alt="1">
+          <img src="/images/mobile/@2x/home/shopbrand@2x.png">
         </div>
         <p>店铺列表</p>
       </nuxt-link>
       <nuxt-link to="/mobile/user" class="home-main-content">
         <div>
-          <img src="/imgs/home/storebrand@2x.png" alt="1">
+          <img src="/images/mobile/@2x/home/storebrand@2x.png">
         </div>
         <p>我的收藏</p>
       </nuxt-link>
       <nuxt-link to="/brand" class="home-main-content">
         <div>
-          <img src="/imgs/home/phonebrand@2x.png" alt="1">
+          <img src="/images/mobile/@2x/home/phonebrand@2x.png">
         </div>
         <p>联系我们</p>
       </nuxt-link>
@@ -129,24 +121,19 @@
   .home{
     margin-top: .88rem;
     font-size:.28rem;
+    background: #f7fbff;
     margin-bottom:1rem;
     .home-header{
       width:100%;
-      padding-top:1.3rem;
-      background:#ecede2;
+      height:6.12rem;
+      background:url('/images/mobile/@2x/home/background@2x.png')no-repeat;
+      background-size: 100% 6.14rem;
       padding-bottom:1rem;
-      .home-top{
-        text-align: center;
-        margin-bottom:.4rem;
-        p{
-          font-size:.32rem;
-          color:rgb(23,21,26);
-        }
-      }
       .home-search{
         width:6rem;
         line-height: .3rem;
         margin:0 auto;
+        padding-top:2rem;
         ul{
           display:inline-flex;
         li{
@@ -203,12 +190,11 @@
       justify-content:space-between;
       flex-wrap:wrap;
       text-align: center;
-      padding-top:1rem;
-      background: #f7fbff;
+      padding-top:.22rem;
     }
     .home-main a.home-main-content {
       width:33%;
-      margin-bottom:.55rem;
+      margin-bottom:.52rem;
     }
     .home-main .home-main-content div{
       border-radius: .2rem;
@@ -220,7 +206,6 @@
       width: 100%;
       height:100%;
     }
-
     .home-main .home-main-content p{
       font-size:.28rem;
       color:rgb(51,51,51);
@@ -237,7 +222,7 @@
     /*  搜索记录  */
     .home-search-list {
       position:absolute;
-      top:4.5rem;
+      top:6.5rem;
       width:100%;
       min-height: 4rem;
       background: #fff;

pages/mobile/shop/index.vue

@@ -20,7 +20,7 @@
           <p>电话：<span>{{item.enterprise.enTel}}</span></p>
           <p>传真：<span>{{item.enterprise.enFax}}</span></p>
           <p>商家介绍： <nuxt-link :to="'/mobile/merchantDescription/'+item.uuid">点击查看</nuxt-link></p>
-          <i class="iconfont icon-shoucang"></i>
+          <i class="iconfont icon-shoucang" @click="callClick()"></i>
         </div>
       </div>
     </div>
@@ -35,7 +35,8 @@
         page: '',
         count: '',
         types: '',
-        down: false
+        down: false,
+        callIcon: false
       }
     },
     fetch ({ store }) {
@@ -51,6 +52,9 @@
     methods: {
       onClick () {
         this.down = !this.down
+      },
+      callClick () {
+        this.callIcon = !this.callIcon
       }
     }
   }
@@ -130,7 +134,7 @@
           position:absolute;
           width:.65rem;
           height:.33rem;
-          background: url(/imgs/shop/daili@2x.png)no-repeat;
+          background: url(/images/mobile/@2x/shop/daili@2x.png)no-repeat;
           background-size: .65rem .33rem;
         }
         img{
@@ -156,6 +160,9 @@
           font-size:.4rem;
           color:#ff7800;
         }
+        i.active{
+          color:#333;
+        }
       }
     }
     }