首页-文章列表 (三) -列表文章布局-Cell 单元格组件-一张图和三张图 & van-ellipsis 内容超过一行会省略 & w33-宽度33%剩余1%做了图片之间间隙.md

列表文章布局-Cell 单元格组件-

Cell 单元格组件：https://youzan.github.io/vant/#/zh-CN/cell

结构：src/views/home/index.vue

放在van-cell标签内容盒子里

• 三张图

<div class="article_item">
  <h3 class="van-ellipsis">PullRefresh下拉刷新PullRefresh下拉刷新下拉刷新下拉刷新</h3>
  <div class="img_box">
     <van-image class="w33" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
     <van-image class="w33" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
     <van-image class="w33" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
  </div>
  <div class="info_box">
     <span>你像一阵风</span>
     <span>8评论</span>
     <span>10分钟前</span>
     <span class="close"><van-icon name="cross"></van-icon></span>
  </div>
</div>

• 一张图

<div class="article_item">
  <h3 class="van-ellipsis">PullRefresh下拉刷新PullRefresh下拉刷新下拉刷新下拉刷新</h3>
  <div class="img_box">
      <van-image class="w100" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
  </div>
  <div class="info_box">
     <span>你像一阵风</span>
     <span>8评论</span>
     <span>10分钟前</span>
     <span class="close"><van-icon name="cross"></van-icon></span>
  </div>
</div>

• van-ellipsis vant提供的内置样式，作用：内容超过一行会省略。
• w33 w100 宽度33%剩余1%做了图片之间间隙

样式：

.article_item{
  h3{
      //font-weight: normal  文本粗细 标准，默认值
    font-weight: normal;
    line-height: 2;
  }
  .img_box{
    display: flex;
     // 项目位于各行之间留有空白的容器内。
    justify-content: space-between;
    .w33{
      width: 33%;
      height: 90px;
    }
    .w100{
      width: 100%;
      height: 180px;
    }
  }
  .info_box{
    color: #999;
    line-height: 2;
    position: relative;
    font-size: 12px;                  
    span{
      padding-right: 10px;
      &.close{
        border: 1px solid #ddd;
        border-radius: 2px;
        line-height: 15px;
        height: 12px;
        width: 16px;
        text-align: center;
        padding-right: 0;
        font-size: 8px;
        position: absolute;
        right: 0;
        top: 7px;
      }
    }
  }
}