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

<template>
  <div class="home">
    <div class="header">
      <div class="search-content">
        <input type="text" placeholder="请输入您要查找的型号或品牌">
        <span>
        <i class="iconfont icon-sousuo"></i>
      </span>
        <img src="/images/mobile/@2x/applyPurchase/home/phone.png" alt="">
      </div>
    </div>
    <ul class="link-list">
      <li>
        <nuxt-link to="/mobile/shop">
          <img src="/images/mobile/@2x/applyPurchase/home/shop.png" alt="">
          <span>店铺列表</span>
        </nuxt-link>
      </li>
      <li>
        <nuxt-link to="/mobile/brand/brandCenter/ABCD">
          <img src="/images/mobile/@2x/applyPurchase/home/brand.png" alt="">
          <span>品牌列表</span>
        </nuxt-link>
      </li>
      <li>
        <nuxt-link to="/mobile/applyPurchase/list">
          <img src="/images/mobile/@2x/applyPurchase/home/seek.png" alt="">
          <span>求购询价</span>
        </nuxt-link>
      </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;
    }
    .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;
          height: .63rem;
          margin-top: .2rem;
        }
        span {
          font-size: .22rem;
          color: #666;
          display: block;
          margin-top: .15rem;
        }
      }
    }
  }
</style>