vue使用stylus基本布局

 

 

 

<template>

  <div class="recommend">

    <!--  -->

    <van-loading v-show="isshow" />

    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

      <div class="recommend-top">

          <img src="https://img11.360buyimg.com/jdphoto/jfs/t1/31601/22/15554/14040/5cc2a86fEbdb1098b/88174b36f85283b6.png" alt="">

      </div>

      <ul>

        <li v-for="(item,i) in ment" :key="i">

            <img v-lazy="item.extend.appEntryImage"  :key="i" />

            <span>{{item.name.title}}</span> 

        </li>

      </ul>

    </van-list>

  </div>

</template>

<style scoped lang="stylus">

.recommend 

  margin: 0 0.2rem;

  border-radius: 0.5rem;

  background: #F0F2F5;

  img 

    width: 100%;

.van-loading

    width 1rem

    margin .3rem auto

.van-list

    ul

       width 100%

       li

        width 48%

        height 7.8rem

        float left

        margin-left .1rem

        background-color #ffffff

        margin-top .1rem

        img 

            width 100%

        span 

            font-size .4rem

</style>