<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;
}
}
}
}
}