dev/dcp-web-gate/src_old/views/cooperationExchange/CooperationExchangeItem.vue

<template>
        <div style="width: 100%;margin-top: 20px;" class="initData">
            <ul>
                <li v-for="(item,index) in init" style="position: relative;" class="cursor" @click="toView('cooperationExchangeListDetails',item.baseActivityEntityId)" >
                    <div style="width: 100%;height: 250px;">
                        <img :src="'api/fileextend/pub/' + item.activityLogo + '?custom=460_200'" alt="" style="width: 100%;height: 100%;" v-if="item.activityLogo">
                        <img :src="'api/file/pub/' + '/def/projectdefault.png'" alt="" style="width: 100%;height: 100%;" v-if="!item.activityLogo">
                    </div>
                    <div :class="item.activityType=='会员活动'?'yellow':item.activityType=='联盟活动'?'green':'red' " v-if="$i18n.locale=='en'">
                        {{item.activityType=='会员活动'?'MemberActivities':item.activityType=='联盟活动'?'AllianceActivities':'CooperationActivities'}}
                    </div>
                    <div :class="item.activityType=='会员活动'?'yellow':item.activityType=='联盟活动'?'green':'red'" v-if="$i18n.locale=='zh'">
                      {{item.activityType}}
                    </div>
                    <div style="padding: 10px 10px;">
                        <div style="width: 100%;line-height: 25px;text-align: left;;font-weight: 700;">
                          <div style="width: 100%;line-height: 25px;height:50px;font-weight: 700;
                           -webkit-box-orient: vertical;
                            position:relative;
                            overflow: hidden;
                            cursor: pointer;" >
                          <!-- 活动名称 -->
                            <span class="activityName">{{item.activityName}}</span>
                             <div style="width: 100px;position: absolute;right: 100;height: 50px;display: inline-block;">
                                <el-button :type="item.activityStatus=='未开始'?'success':
                                    item.activityStatus=='报名中'?'primary':item.activityStatus=='已结束'?'info':'warning'" round
                                    style="height: 24px;width:100%;line-height: 4px;padding:0 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
                                    @click="toView('cooperationExchangeListDetails',item.baseActivityEntityId)" v-if="$i18n.locale=='en'">
                                    {{item.activityStatus=='未开始'?'To be started':
                                    item.activityStatus=='报名中'?'Signing Up':item.activityStatus=='已结束'?'Endeded':'In the activity'}}
                                </el-button>
                                <el-button :type="item.activityStatus=='未开始'?'success':
                                    item.activityStatus=='报名中'?'primary':item.activityStatus=='已结束'?'info':'warning'" round
                                    style="width: 76px;height: 24px;line-height: 4px;"
                                    @click="toView('cooperationExchangeListDetails',item.baseActivityEntityId)" v-if="$i18n.locale=='zh'">
                                    <span style="margin-left: -5px;">{{item.activityStatus}}</span>
                                </el-button>
                             </div>
                          </div>
                            <div style="width: 100%;line-height: 35px;font-size: 14px;color: #666666;">
                                <span style="margin-right: 15px;">{{$t('common.place')}}：{{item.activityCity}}</span>
                                <span>{{$t('common.line')}}：
                              <span :style="$i18n.locale=='en'?'font-size:13px;':''">{{formatDate(item.activityStartTime)}} - {{formatDate(item.activityEndTime)}}</span>
                            </span>

                            </div>
                        </div>
                        <div style="width: 100%;font-size: 14px;line-height: 25px;overflow: hidden;color: #666666;
                              -webkit-box-orient: vertical;
                              position:relative;
                              line-height:1.4em;
                              overflow: hidden;
                              max-height:7em;cursor: pointer;" class="plate">
                            {{item.activityIntroduce}}
                        </div>
                    </div>
                </li>
            </ul>
        </div>
</template>
<script>
 export default {
    name: 'CooperationExchangeItem',
    props:['init'],
    data () {
      return {

        }
    },
    mounted(){
      this.$forceUpdate();
      console.log(this.init)
    },
    watch:{

    },
    methods:{
        getIconUrl(url){
            return require("@/assets/img/cooperationExchange/"+url);
        },
        toView(router,json){
          let language = window.localStorage.getItem("locale")
          this.$store.commit('modify', router);
          window.localStorage.setItem('router', router);
          const { href } = this.$router.resolve({
            name: router,
            query: {
              key: json,
              language:language
            },
          });
          window.open(href, '_blank');
          // this.$router.push({name:router,query:{key:json}})
      },
    }
 }
</script>
<style scoped>
  .initData {
  }
  .initData ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap:wrap;
  }
  .initData li {
      width: 48%;

      margin-right: 8px;
      margin-left: 8px;
      margin-bottom: 10px;
      float: left;
  }
  .initData li:nth-child(2n-1){
      /* margin-right: 15px; */
  }
  .yellow,
  .green,
  .red {
    position: absolute;
    top: 0;
    left: 0;
    /* min-width: 96px;  */
    padding:0 20px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #fff;
    border-radius: 0 0 10px 0;
  }
  .yellow {
      background:rgba(255,153,0);
  }
  .green {
    background: rgba(102,204,1);
  }
  .red {
    background:rgba(224,32,32);
  }
  .activityName{
    width: 400px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  >>>.el-button{
    padding: none;
  }
</style>