vue使用stylus基本布局

Posted 1609359841qq

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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" >
      </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>

以上是关于vue使用stylus基本布局的主要内容,如果未能解决你的问题,请参考以下文章

vue中使用stylus报错问题

vue使用stylus样式预处理器

vue : 使用stylus less (包括sublime插件支持)

vue-cli中使用stylus

Stylus基本使用

在vue 中使用Stylus