product_wx/pages/index/components/activity.vue

<template>
    <div class="activity">
        <div v-for="(item,index) in activityList" :key="index+100" class="activityItem">
          <img :src="item.img" class="itemBg">
          <div class="activityItemRight">
             <div class="activityItemRightTop">
               <span class="activityItemRightName">{{item.name}}</span>
               <span class="activityItemRightType">{{item.type}}</span>
             </div>
             <div class="canyu">36人参与</div>
             <div class="activityItemRightBottom">
               <div class="shoucang" @click="clickColl(index)"><image :src="item.isColl?heartSel:heart" class="scImg"> 收藏</div>
               <div :class="item.isSign?'baoming':'baoming2'">{{ item.isSign ? '去报名' : '报名结束' }}</div>
             </div>
          </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "activity",
  data(){
    return{
      heartSel:require('../image/heartSel.png'),
      heart:require('../image/heart.png'),
      activityList:[
        {name:'互联网私募如何入门？',type:'培训活动',img:require('../image/img1.png'),isColl:true ,isSign:true},
        {name:'公募基金中的大数据啊啊啊？',type:'活动',img:require('../image/img2.png'),isColl:false,isSign:true},
        {name:'年度小艾杯篮球赛开...？',type:'体育',img:require('../image/img3.png'),isColl:false,isSign:false},
      ]
    }
  },
  methods:{
    clickColl(index){
      // console.log(index)
      this.activityList[index].isColl = !this.activityList[index].isColl
      // item.isColl = !item.isColl
    }
  }
}
</script>

<style lang="scss">
    .activity{
         .activityItem{
           width: 702rpx;
           height: 216rpx;
           background: #F5F7FA;
           padding: 0 24rpx;
           display: flex;
           align-items: center;
           box-sizing: border-box;
           border-radius: 16rpx;
           margin: 12rpx 0;
           .itemBg{
             width: 220rpx;
             height: 160rpx;
           }
           .activityItemRight{
             display: flex;
             flex-direction: column;
             margin-left: 24rpx;
             .activityItemRightTop{
               width: 420rpx;
               display: flex;
               justify-content: space-between;
               .activityItemRightName{
                 width: 280rpx;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 color: #18172A;
                 font-size: 28rpx;
               }
               .activityItemRightType{
                 padding: 2rpx 12rpx;
                 background: rgba(3, 101, 249, 0.20);
                 color: rgba(3, 101, 249, 1);
                 border-radius: 4rpx;
                 font-size: 24rpx;
               }
             }
             .canyu{
               font-size: 28rpx;
               color: rgba(102, 102, 102, 1);
               margin: 14rpx 0;
             }
             .activityItemRightBottom{
               display: flex;
               justify-content: space-between;
               align-items: center;
               .shoucang{
                 display: flex;
                 align-items: center;
                 font-size: 28rpx;
                 color: rgba(141, 146, 155, 1);
                 .scImg{
                   width: 32rpx;
                   height: 28rpx;
                   margin-right: 8rpx;
                 }
               }
               .baoming{
                 width: 160rpx;
                 height: 60rpx;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 font-size: 28rpx;
                 background: linear-gradient( 316deg, #84AAFF 0%, #0365F9 100%);
                 border-radius: 32rpx;
                 font-size: 28rpx;
                 color: white;
               }
               .baoming2{
                 width: 160rpx;
                 height: 60rpx;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 font-size: 28rpx;
                 background: rgba(226, 232, 239, 1);
                 border-radius: 32rpx;
                 font-size: 28rpx;
                 color: rgba(141, 146, 155, 1);
               }
             }
           }
         }
    }
</style>