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

<template>
  <div class="home">
    <div class="header">
      <input type="text" placeholder="请输入您要查找的型号或品牌">
      <span>
        <i class="iconfont icon-sousuo"></i>
      </span>
      <img src="/images/mobile/@2x/applyPurchase/home/phone.png" alt="">
    </div>
    <ul class="link-list">
      <li>
        <a href="">
          <img src="/images/mobile/@2x/applyPurchase/home/shop.png" alt="">
          <span>店铺列表</span>
        </a>
      </li>
      <li>
        <a href="">
          <img src="/images/mobile/@2x/applyPurchase/home/brand.png" alt="">
          <span>品牌列表</span>
        </a>
      </li>
      <li>
        <a href="">
          <img src="/images/mobile/@2x/applyPurchase/home/seek.png" alt="">
          <span>求购询价</span>
        </a>
      </li>
    </ul>
    <div class="seek-title">
      <img src="/images/mobile/@2x/applyPurchase/home/seek-title.png" alt="">
      <span>最新求购信息</span>
      <nuxt-link to="/mobile/applyPurchase/list">查看更多 <img src="/images/mobile/@2x/applyPurchase/home/arrow-right.png" alt=""></nuxt-link>
    </div>
    <seek-list></seek-list>
  </div>
</template>
<script>
  import SeekList from './applyPurchase/SeekList.vue'
  export default {
    components: {
      SeekList
    }
  }
</script>
<style lang="scss" scoped>
  .home {
    padding-bottom: 1rem;
    .header {
      background: url('/images/mobile/@2x/applyPurchase/home/home-bg.png') no-repeat;
      background-size: cover;
      height: 3.26rem;
      input {
        width: 6.48rem;
        height: .58rem;
        border-radius: .14rem;
        margin: .15rem 0 0 .11rem;
        font-size: .23rem;
        padding: 0 0 0 .21rem;
      }
      span {
        display: inline-block;
        height: .46rem;
        line-height: .46rem;
        width: .68rem;
        color: #376ff3;
        border-left: .04rem solid #376ff3;
        margin-left: -.68rem;
        text-align: center;
        vertical-align: middle;
        margin-bottom: .08rem;
        i {
          font-size: .3rem;
        }
      }
      img {
        width: .44rem;
        height: .44rem;
        float: right;
        margin-right: .2rem;
        margin-top: .2rem;
      }
    }
    .link-list {
      background: #f3f3f7;
      height: 1.36rem;
      li {
        display: inline-block;
        width: 33.3%;
        text-align: center;
        float: left;
        height: 1.36rem;
        img {
          width: .63rem;
          margin-top: .2rem;
        }
        span {
          font-size: .22rem;
          color: #666;
          display: block;
          margin-top: .15rem;
        }
      }
    }
  }
</style>