<template>
   <div id="communityActivites">
       <div class="community_activites">
         <p class="community__activites-img">
           <img class="community__activites-imgurl" :src="`${hostURL}${data.coverImg}`">
         </p>
         <p class="community__activites-name">
           {{data.title}}
         </p>
         <p class="join_people">
           <span class="join_people_photo_box">
             <img v-for="(userImg,index) in (data.userImags == null?[]:data.userImags.slice(0,4))" :key="index" :src="userImg == null?baseImg:`${hostURL}${userImg}`">         
            <!--  <img v-if="userImg == 'null'" v-for="(userImg,index) in data.userImags"  :key="index" :src="userImg">  -->                   
            </span> 
            <b class="join_nums" v-if="data.userImags == null">已有0人参加</b>         
            <b class="join_nums" v-if="data.userImags != null">已有{{data.applys}}人参加</b>
         </p>
         <p class="to_look">
          <router-link class="link to__look-button" :to="`/communityActivityDetail/${data.id}`">去看看</router-link>
         </p>
       </div>
   </div>
</template>

<script>
//import { mapState } from 'vuex'
import api from "@/api/index.js";
import baseImg from "@/assets/img/common_def_avatar@3x.png";
let URL = api.serverURI;
export default {
  name: "this",
  props: {
    data: {
      type: Object,
      default: {},
      required: true
    }
  },
  components: {
    //addPane
  },
  computed: {
    // ...mapState({
          
    // })
  },
  mounted() {
      
  },
  data: function() {
    return {
      name: "template",
      hostURL: URL,
      baseImg: baseImg
    };
  },
  methods: {

  }
};
</script>
<style scoped lang='less'>
  @import "~@/common/less/variable.less";
   .community_activites {
     width: 322.86px;
     height: 294.64px;
     background:@nice-bgwhite;
     border-radius: 3px;
     box-shadow: 0 0 6px rgba(0,0,0,0.11);
     border-bottom:1px solid @nice-searchbg;
     .community__activites-img {
      width: 322.86px;
      height: 130.61px;
      .community__activites-imgurl {
      display: block;
      width: 322.86px;
      height: 130.61px;
      }
     }
     .community__activites-name {
      width: 100%;
      height: 26px;
      line-height: 26px;
      font-size: 19px;
      color: #313131;
      text-align: center;
      margin-top: 15px;
     }
     .join_people {
      width: 100%;
      height: 34.16px;
      margin-top: 16.84px;
      line-height: 34.16px;
      .join_people_photo_box {
        float: left;
        margin-left: 71.18px;
        position: relative;
        img:nth-child(1) {
         position: absolute;
         width: 34.16px;
         height: 34.16px;
         border-radius: 50%;
         border:1px solid #fff;
         top: 0;
         left: 0;        
        }
         img:nth-child(2) {
         position: absolute;
         width: 34.16px;
         height: 34.16px;
         border-radius: 50%;
         border:1px solid #fff;
         top: 0;
         left: 26.22px;
         z-index: 1;        
        }
         img:nth-child(3) {
         position: absolute;
         width: 34.16px;
         height: 34.16px;
         border-radius: 50%;
         border:1px solid #fff;
         top: 0;
         left: 52.44px;        
        }
         img:nth-child(4) {
           position: absolute;
           width: 34.16px;
           height: 34.16px;
           border-radius: 50%;
           border:1px solid #fff;
           top: 0;
           left: 78.66px;        
        }
      }      
      .join_nums {
        float: right;
        height: 34.16px;
        line-height: 34.16px;
        font-size: 12px;
        color: #AAAAAAA;
        margin-right: 57px;  
      }
     }
     .to_look {
      width: 100%;
      height: 34px;
      margin-top: 19px;
      position: relative;
      .to__look-button {
        display: block;
        width: 121px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        font-size: 17px;
        color: #2BAA76;
        border:1px solid #2BAA76;
        border-radius:17px;
        position: absolute;
        margin:auto;
        left: 0;
        top: 0;
        left: 0;
        right: 0;
      }
     }


   }

   
</style>