引入

import SwipeCell from '@/components/swipe-cell'

Html

<swipe-cell class="msg_ct">
  <div slot="body" class="msg flex">
    <div class="msg_tu bgTu bgImg"></div>
    <div class="msg_info">
      <div class="flex msg_title"><h2>系统消息</h2><span>上午 09:34</span></div>
      <div class="msg_text">[消息]提成收益12.5元</div>
    </div>
  </div>
  <div slot="right" class="msg_an">
    <button class="info">未读</button>
    <button class="danger">删除</button>
  </div>
</swipe-cell>

CSS

.msg_ct{margin: 1px 0;}
.msg{padding: 16px 16px; background-color: #FFF;}
.msg_tu{width: 48px; height: 48px; background-color: #F2F4F6;}
.msg_info{width: calc(100% - 64px);}
.msg_title{line-height: 26px;}
.msg_title h2{width: calc(100% - 100px); font-size: 18px; font-weight: normal;}
.msg_title span{font-size: 12px; color: #999;}
.msg_text{font-size: 14px; color: #999;}
.msg_an{height: 100%;}

JavaScript

export default {
  components: {SwipeCell},
}