<template> <div class="moment-item"> <div class="baseInfo"> <img class="avatar" src="@/assets/images/avatar.png" alt="用户头像" /> <span class="userName">丁晓霞</span> <span class="time">10分钟前</span> </div> <div class="detail"> <p class="content"> 这是发布的一些文字内容,文字内容,文字过多显示第二行效果。 </p> <div class="img-list"> <img v-for="item in 4" :key="item.name" src="@/assets/images/avatar.png" alt /> </div> <!-- <div class="share"> <div class="share-item"> <img :src=" shareSelected ? `${require('@/assets/images/转发_选中.png')}` : `${require('@/assets/images/转发.png')}` " alt @click="onShare" /> <span>12</span> </div> <div class="share-item"> <img :src=" agreeSelected ? `${require('@/assets/images/点赞_选中.png')}` : `${require('@/assets/images/点赞.png')}` " alt @click="onAgree" /> <span>12</span> </div> </div> --> </div> </div> </template> <script> export default { name: "MomentItem", data() { return { shareSelected: false, agreeSelected: false }; }, methods: { onShare() { this.shareSelected = !this.shareSelected; }, onAgree() { this.agreeSelected = !this.agreeSelected; } } }; </script> <style lang="scss" scoped> .moment-item { margin-bottom: 10px; padding: 10px 16px; font-size: 16px; background-color: #ffffff; p { margin: 0; padding: 0; } &:nth-child(1) { margin-top: 10px; } } .baseInfo { position: relative; display: flex; align-items: center; .avatar { width: 31px; height: 31px; border-radius: 50%; } .userName { margin: 0 15px; font-size: 16px; font-weight: bold; } .time { position: absolute; right: 0; font-family: PingFang-SC-Regular; font-size: 12px; color: #999999; } } .detail { padding-left: 46px; .content { margin-bottom: 10px; font-family: PingFang-SC-Regular; font-size: 14px; color: #333333; } .img-list { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; img { width: auto; height: 76px; margin: 7px 7px 0 7px; } } .share { display: flex; justify-content: flex-end; align-items: center; flex-wrap: nowrap; .share-item { font-size: 14px; color: #666666; &:nth-child(1) { margin-right: 20px; } } img { width: 16px; height: 14px; margin-right: 5px; } } } </style>