首页编写

components/mobile/Home.vue

@@ -1,5 +1,273 @@
 <template>
-  <div>
-    <h1>啊哈哈哈</h1>
+  <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="active"><a href="#">型号</a></li>
+          <li><a href="#">品牌</a></li>
+          <li><a href="#">商家</a></li>
+        </ul>
+        <div class="home-input">
+          <input type="text" placeholder="请输入您要查找的型号或品牌">
+          <a href="#"><i class="fa fa-camera-retro"></i></a>
+        </div>
+      </div>
+    </div>
+    <div class="home-main">
+      <a herf="#" 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">
+        <div>
+          <img src="/images/qrcode/uas.png" alt="1">
+        </div>
+        <h2>3250万</h2>
+        <p>型号</p>
+      </a>
+      <a herf="#" 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">
+        <div>
+          <img src="/images/qrcode/uas.png" alt="1">
+        </div>
+        <p>店铺列表</p>
+      </a>
+      <a herf="#" class="home-main-content">
+        <div>
+          <img src="/images/qrcode/uas.png" alt="1">
+        </div>
+        <p>我的收藏</p>
+      </a>
+      <a herf="#" class="home-main-content">
+        <div>
+          <img src="/images/qrcode/uas.png" alt="1">
+        </div>
+        <p>联系我们</p>
+      </a>
+    </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>
+      <div class="search-list-bottom">
+        <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>
+    </div>
   </div>
 </template>
+
+<script>
+
+</script>
+
+<style lang="scss" scoped>
+.home{
+  font-size:.28rem;
+  margin-bottom:1rem;
+  margin-top:.88rem;
+  .home-header{
+    width:100%;
+    padding-top:1.3rem;
+    background:#ecede2;
+    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;
+      ul{
+        display:inline-flex;
+      li{
+        flex:1;
+        text-align:center;
+      a{
+        display:inline-block;
+        width:.72rem;
+        line-height:.32rem;
+        background: #fff;
+        color:#000;
+        border-radius: .05rem .05rem 0 0 ;
+      }
+    }
+    li.active{
+      a{
+        background: #3c7cf5;
+        color:#fff;
+        cursor:pointer;
+      }
+    }
+    }
+    input{
+      width:6rem;
+      padding: 0 1.2rem 0 .2rem;
+      margin-right:-1rem;
+      font-size:.23rem;
+      line-height: .61rem;
+      border:.02rem solid #3c7cf5;
+      border-radius:.05rem;
+    }
+    a{
+      display:inline-block;
+      text-align: center;
+      width:1rem;
+      line-height: .61rem;
+      font-size:.23rem;
+      border-left:none;
+      border-radius:   0 .05rem .05rem 0;
+      background: #3c7cf5;
+      color:#fff;
+    }
+    }
+  }
+}
+.home-main{
+  width:100%;
+  display:flex;
+  justify-content:space-between;
+  flex-wrap:wrap;
+  text-align: center;
+  padding-top:1rem;
+  background: #f7fbff;
+}
+.home-main a.home-main-content {
+  width:33%;
+  margin-bottom:.55rem;
+}
+.home-main .home-main-content div{
+  border-radius: .2rem;
+  width:1.14rem;
+  height:1.14rem;
+  margin:0 auto;
+  position:relative;
+}
+.home-main .home-main-content div:first-child{
+  background:rgb(255,48,100);
+}
+.home-main .home-main-content:nth-child(2) div{
+  background:rgb(250,103,67);
+}
+.home-main .home-main-content:nth-child(3) div {
+  background: rgb(252, 184, 54);
+}
+.home-main .home-main-content:nth-child(4) div{
+  background:rgb(99,147,255);
+}
+.home-main .home-main-content:nth-child(5) div{
+  background:rgb(67,201,173);
+}
+.home-main .home-main-content:last-child div{
+  background:rgb(135,201,79);
+}
+.home-main .home-main-content div>img{
+  width: .8rem;
+  height:.8rem;
+  position:absolute;
+  left:50%;
+  top:50%;
+  margin-left:-36%;
+  margin-top:-36%;
+}
+
+.home-main .home-main-content p{
+  font-size:.28rem;
+  color:rgb(51,51,51);
+  line-height: .52rem;
+}
+.home-main .home-main-content h2{
+  font-size:.3rem;
+  color:#ff7800;
+  line-height: .32rem;
+  margin:0;
+  margin-top:.1rem;
+}
+.home-search-list{
+  /*display:none;*/
+  width:80%;
+  margin:0 auto;
+  margin-top:.1rem;
+  .search-list-top{
+    h5{
+      font-size:.3rem;
+      position:relative;
+      line-height: .4rem;
+      color:rgb(102,102,102);
+      i{
+        position:absolute;
+        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-bottom{
+    margin-top:-.07rem;
+    h5{
+      color:rgb(255,120,0);
+      font-size:.3rem;
+      text-align: center;
+      i{
+        margin-right:.15rem;
+      }
+    }
+    a{
+      display:inline-block;
+      font-size:.24rem;
+      color:rgb(255,120,0);
+      background: #fff;
+      max-width:1.62rem;
+      line-height: .35rem;
+      padding:0 .1rem;
+      border:1px solid rgb(255,120,0);
+      overflow:hidden;
+      text-overflow : ellipsis;
+      margin-left:.12rem;
+    }
+  }
+}
+</style>

components/mobile/MobileFooter.vue

@@ -1,14 +1,8 @@
 <template>
 <div class="mobile-footer">
-  <div>
-    <nuxt-link to="/provider" class="fa fa-camera-retro fa-3x"></nuxt-link>
-  </div>
-  <div>
-    <nuxt-link to="/provider" class="fa fa-camera-retro fa-3x"></nuxt-link>
-  </div>
-  <div>
-    <nuxt-link to="/provider" class="fa fa-camera-retro fa-3x"></nuxt-link>
-  </div>
+    <nuxt-link to="/provider"><i class="fa fa-camera-retro"></i><p>首页</p></nuxt-link>
+    <nuxt-link to="/provider"><i class="fa fa-camera-retro"></i><p>店铺</p></nuxt-link>
+    <nuxt-link to="/provider"><i class="fa fa-camera-retro"></i><p>我</p></nuxt-link>
 </div>
 </template>
 <script>
@@ -19,15 +13,21 @@
     position:fixed;
     bottom:0;
     width:100%;
-    height:60px;
+    height:49px;
     display:flex;
     text-align: center;
     justify-content:space-between;
-    align-items:center;
+    /*align-items:center;*/
     border-top:1px solid #ccc;
-    background: #f8f8f8;
+    background: #ffffff;
   }
-  .mobile-footer div{
+  .mobile-footer a{
     flex:1;
+    font-size:16px;
+    color:#b0b0b0;
+    padding-top:5px;
+  }
+  .mobile-footer a:hover{
+    color:#3976f4;
   }
 </style>

components/mobile/MobileHeader.vue

@@ -1,8 +1,8 @@
 <template>
 <div class="mobile-header">
-  <nuxt-link class="fa fa-camera-retro fa-3x span" to="/news"></nuxt-link>
+  <nuxt-link class="fa fa-camera-retro fa-2x" to="/news">返回</nuxt-link>
   <p>优软商城</p>
-  <span class="fa fa-camera-retro fa-3x"></span>
+  <nuxt-link class="fa fa-camera-retro fa-2x" to="/"></nuxt-link>
 </div>
 </template>
 <script>
@@ -11,17 +11,28 @@
 <style>
 .mobile-header{
   width:100%;
-  height:60px;
+  position:fixed;
+  top:0;
+  height:44px;
   display:flex;
-  padding:.9rem;
   justify-content:space-around;
+  align-items:center;
   border-bottom:1px solid #ccc;
-  background: #f8f8f8;
+  background: #3e82f5;
+  padding:0 20px 0 10px;
+  color:#fff;
 }
   .mobile-header p{
     flex:1;
-    font-size:.24rem;
+    font-size:18px;
     text-align: center;
     margin-top:10px;
   }
+  .mobile-header a{
+    font-size:14px;
+    color:#fff;
+  }
+  .mobile-header a:last-child{
+    font-size:16px;
+  }
 </style>

pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="index">
     <div v-if="isMobile">
-      <!--<Home></Home>-->
+      <Home></Home>
     </div>
     <div v-else>
       <carousel>