gaoyixia-pc/src/components/card/news/my-reply-card.vue

<template>
  <div class="card">
    <CardBox style="padding: 15px 20px" :btnList="btnList" v-on="$listeners">
      <div class="header">
        <CardHeader
          :avatar="userInfo.headimg"
          :name="userInfo.name"
          :time="info.create_at"
          :btnList="[]"
        />
      </div>
      <div class="content">
        <CardContent :content="`@${info.user_name}：${info.content}`" />
      </div>
      <div class="target" @click="$emit('handleToDetail')">
        <CardContent
          style="margin-bottom: 10px"
          :content="`@${info.parent_comment.name}：${info.parent_comment.content}`"
        />
        <CardCoverDetail
          :info="{
            app_logo: info.parent_comment.app_logo,
            app_name: info.parent_comment.app_name,
            cover: info.parent_comment.cover,
            title: info.parent_comment.title,
            series_title: info.parent_comment.series_title,
            ...info,
          }"
          :num_icon="require('@/assets/icon/eye.png')"
        />
      </div>
    </CardBox>
  </div>
</template>

<script>
import CardBox from "../card-module/card-box.vue";
import CardHeader from "../card-module/card-header.vue";
import CardContent from "../card-module/card-content.vue";
import CardCoverDetail from "../card-module/card-cover-detail.vue";

export default {
  name: "MyReplyCard",
  components: { CardBox, CardHeader, CardContent, CardCoverDetail },
  props: {
    info: {
      type: Object,
    },
    manageType: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {
    btnList() {
      let arr = ["del"];
      return this.manageType ? [] : arr;
    },
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  width: 100%;
  height: 100%;
  .content {
    margin: 10px 0;
  }
  .target {
    background: #f4f4f4;
    width: calc(100% - 20px);
    padding: 10px;
  }
}
</style>