<template>
   <div class="ActivityStatus">
      <div class="active-wrap">
          <div class="active-wrap-header">
             <!-- <img class="active-wrap_img" src="@/assets/addvert.jpg">  -->
             <img class="active-wrap_img" :src="`${hostURL}${data.coverImg}`">
          </div>
          <div class="active-wrap-main">
             <h4 class="active-wrap-theme">{{data.title}}</h4>
             <p v-if="data.abstr" class="active-wrap-content">{{data.abstr}}</p>
          </div>
      </div>
   </div>
</template>

<script>
import api from "@/api/index.js";
let URL = api.serverURI;

export default {
  name: "ActivityStatus",
  props: {
    data: {
      type: Object,
      default: {},
      required: true
    }
  },
  components: {
    //addPane
  },
  computed: {
    // ...mapState({
          
    // })
  },
  mounted() {
      
  },
  data: function() {
    return {
      name: "template",
      hostURL: URL
    };
  },
  methods: {

  }
};
</script>
<style scoped lang='less'>
@themeHeight:24px;
@contentHeight:15px;
    .ActivityStatus{
      .active-wrap {
        margin-left: 16px;
        width: 343px;
        overflow: hidden;
        background: #fff;
        .active-wrap-header {
          width: 343px;
          height: 120px;
          .active-wrap_img {
            width: 100%;
            height: 100%;
          }
        }
        .active-wrap-main {
          width: 343px;
          overflow: hidden;
          .active-wrap-theme {
            font-size: 17px;
            /*height: @themeHeight;*/
            line-height: @themeHeight;
            text-align: left;
            margin: 10px 5px;
          }
          .active-wrap-content {
            text-align: left;
            font-size: 12px;
            height: @contentHeight;
            line-height: @contentHeight;
            margin-left: 15px;
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
        }

      }
    }
</style>