momentItem.vue

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