购物车（三）01-商品列表展示-基本布局

商品列表展示

• 商品列表布局

  结构

<div class="list-title">优购生活馆</div>
<!-- 商品列表信息 -->
<div class="ware-list">
  <div class="ware-item">
    <!-- 左侧按钮checkbox -->
    <div class="choice-button">
      <icon :color="item.checked?'red':'#eee'" type='success' size='18'/>
    </div>
    <!-- 右侧商品信息 -->
    <div class="ware-content">
      <!-- 左侧图片 -->
      <navigator class='ware-image'>
        <img :src='item.goods_small_logo' mode="aspectFill"/>
      </navigator>
      <!-- 右侧商品信息 -->
      <div class="ware-info">
        <!-- 商品名称 -->
        <navigator class='ware-title'>
          {{item.goods_name}}
        </navigator>
        <!-- 商品价格和数量变更 -->
        <div class="ware-info-btm">
          <!-- 商品价格 -->
          <div class="ware-price">
            <span>￥</span>
            {{item.goods_price}}
          </div>
          <!-- 数量变更 -->
          <div class="calculate">
            <div class="rect" >-</div>
            <div class="number">{{item.num}}</div>
            <div class="rect">+</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

展示