H5列表基础不局代码

<section class="address-list" v-if="addressList.length">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="loading" :finished="finished" @load="getNewsList" :offset="50" finished-text="没有更多了">
            <div class="card-item" v-for="item in addressList" :key="item._id">
                <header class="header">
                     <div class="title ellipsis left">所在村居:<span>XX村</span></div>
                    <div class="right"><van-icon name="arrow" /></div>
                </header>
                <article class="content">
                  <div class="cell">录入时间:<span>2022-05-01</span></div>
                  <div class="cell">建筑地址:<span>人民北路222号</span></div>
                </article>
                <footer class="footer">
                  <van-button plain hairline type="info" size="small">编辑</van-button>
                </footer>
            </div>
        </van-list>
    </van-pull-refresh>
</section>

css部分:

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.ellipsis2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}
    .address-list {
    padding: 12px;
    .card-item {
      padding: 0 15px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.03);
      .header, .footer {
        display: flex;
        justify-content: space-between;
      }
      .header {
        font-size: 15px;
        color: #1D1D1D;
        padding-top: 15px;
        .left {
          flex: 1;
          width: 80%;
        }
      }
      .footer {
        font-size: 12px;
        color: #3178C8;
        height: 48px;
        align-items: center;
        .left {
          flex: 1;
        }
        /deep/ .van-button {
          width: 48px;
          height: 24px;
        }
      }
      .content {
        font-size: 14px;
        color: #666;
        padding: 10px 0 15px 0;
        border-bottom: 1px solid #E7E7E7;
        .cell {
          line-height: 20px;
          margin-top: 6px;
          &:first-child{
            margin-top: 0;
          }
        }
      }
    }
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容