Vue里面 ul li 列表 最后一个子元素 “不需要列表横线写法”

.block
   flex 1
    text-align center
    border-right 1px solid rgba(7,17,27,0.1) 
    &:last-child
        border-right 0px solid rgba(7,17,27,0.1) 

重点在这里

    &:last-child
         border-right 0px solid rgba(7,17,27,0.1)

    &:last-child
         border-none()

border-none() :是公用 .stly 里面的方法

html部分

    <ul class="remark">
          <li class="block">
              <h2>起送价</h2>
              <div class="content">
                  <span class="stress">{{seller.minPrice}}</span>
              </div>
          </li>
          <li class="block">
              <h2>商家起送</h2>
              <div class="content">
                  <span class="stress">{{seller.deliveryPrice}}</span>
              </div>
          </li>
          <li class="block">
              <h2>平均配送时间</h2>
              <div class="content">
                  <span class="stress">{{seller.deliveryTime}}分钟</span>
              </div>
          </li>

      </ul> 

    .remark
        .block
           flex 1
           text-align center
           border-right 1px solid rgba(7,17,27,0.1) 
           &:last-child
               border-right 0px solid rgba(7,17,27,0.1) 
Logo

前往低代码交流专区

更多推荐