单元格cell-代码广场-One Line

bboyer
代码

 <div class="ol-w-300 ol-b-light_1">
<!--  -->
<div class="ol-cells__title">我是标题</div>
<div class="ol-cells">

  <!--  -->
  <div class="ol-cell">


    <span class="ol-cell__bd">标题</span>
    <span class="ol-cell__ft">说明文字</span> 

  </div>
  <!--  -->
  <!--  -->
  <div class="ol-cell ol-cell_access">
    <span class="ol-cell__hd">
      <i class="fab fa-weixin ol-cell__icon"></i>
    </span>

    <span class="ol-cell__bd">标题</span>
    <span class="ol-cell__ft"></span>

  </div>


  <!--  -->
  <div class="ol-cell ol-cell_access">
    <span class="ol-cell__hd">
      <i class="fab fa-weibo ol-cell__icon"></i>
    </span>

    <span class="ol-cell__bd">标题</span>
    <span class="ol-cell__ft">说明文字</span>

  </div>
  <!--  -->


</div>
<!--  -->
    
    
<!-- 第二种 -->
<div class="ol-cells__title">另外</div>
<div class="ol-cells">


  <div class="ol-cell ol-cell_access">
    <span class="ol-cell__hd">
      <i class="fas fa-check ol-cell__icon"  ></i>
    </span>
    <span class="ol-cell__bd">标题</span>
    <span class="ol-cell__ft">说明文字</span>
  </div>


  <div class="ol-cell ol-cell_swipe">

    <span class="ol-cell__bd ol-cell_swipe__bd" style="transform: translateX(-216px)">
      <span class="ol-cell ol-cell_access">

        <span class="ol-cell__hd">
          <i class="fab fa-weixin ol-cell__icon"></i>
        </span>

        <span class="ol-cell__bd">
          hello
        </span>
        <span class="ol-cell__ft">说明文字</span>

      </span>
    </span>
    <span class="ol-cell__ft ol-cell_swipe__ft">
      <button class="ol-btn_auto ol-btn ol-btn_primary">
        <i class="fas fa-download"></i>
        <!--  -->
      </button>
      <button class="ol-btn_auto ol-btn ol-btn_danger">
        <i class="fas fa-trash-alt"></i>
      </button>
      <button class="ol-btn_auto ol-btn ol-btn_success">
        启动
      </button>
    </span>
  </div>

</div>
      <!--  -->
</div>
预览

我是标题
标题说明文字
标题
标题说明文字
另外
标题说明文字
hello 说明文字
@oneline/style cell 单元格