mall-web-ssr/components/mobile/Home.vue

<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="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>