You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
2.2 KiB
115 lines
2.2 KiB
<template>
|
|
<view class="list">
|
|
<view class="list-item" v-for="item in list" :key="item.id">
|
|
<view class="flex user">
|
|
<view class="avatar">
|
|
<image class="img" :src="item.avatar" mode="scaleToFill"></image>
|
|
</view>
|
|
<view class="name">{{ item.name }}</view>
|
|
<view class="time">{{ item.createTime }}</view>
|
|
</view>
|
|
<view class="flex content">
|
|
<view class="content-text">{{ item.content }}</view>
|
|
<view class="content-img">
|
|
<image class="img" v-if="getCoverImg(item)" :src="getCoverImg(item)" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
getCoverImg(obj) {
|
|
const { image } = obj
|
|
|
|
return image?.split?.(',')?.[0]
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.list {
|
|
padding: 32rpx;
|
|
background: #FAFAFA;
|
|
border: 2rpx solid #FFFFFF;
|
|
border-radius: 32rpx;
|
|
|
|
&-item {
|
|
& + & {
|
|
margin-top: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user {
|
|
justify-content: flex-start;
|
|
|
|
.avatar {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border: 4rpx solid #FFFFFF;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
margin-left: 8rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
color: #252545;
|
|
}
|
|
|
|
.time {
|
|
margin-left: 16rpx;
|
|
font-size: 24rpx;
|
|
line-height: 1;
|
|
color: #8B8B8B;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
margin-top: 24rpx;
|
|
|
|
&-text {
|
|
flex: 1;
|
|
font-size: 32rpx;
|
|
color: #181818;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display:-webkit-box; //作为弹性伸缩盒子模型显示。
|
|
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
|
-webkit-line-clamp:4; //显示的行
|
|
}
|
|
|
|
&-img {
|
|
flex: none;
|
|
width: 190rpx;
|
|
height: 190rpx;
|
|
border-radius: 16rpx;
|
|
overflow: hidden;
|
|
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|