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

<template>
    <div style="width: 100%;margin-top: 20px;" class="initData2" v-if="this.$i18n.locale=='en'">
        <ul>
            <li v-for="(item,index) in Exhibition">
                <div style="width: 200px;height: 200px;display: inline-block;float:left;margin-top: 10px;">
                    <img :src="getIconUrl(item.img)" alt="" style="width: 100%;height: 100%;">
                </div>
                <div style="padding: 10px 10px;display: inline-block;width: 70%;float:left; ">
                    <div style="width: 100%;line-height: 25px;text-align: left;;font-weight: 700;" class="cursor" @click="toView('cooperationExchangeListDetails',item)">
                        {{item.title}}
                      </div>
                    <div style="width: 100%;line-height: 35px;font-size: 14px; position: relative;">
                        <span style="margin-right: 15px;">地点：{{item.place}}</span>
                        <span>时间： {{item.time1}} - {{item.time2}}</span>
                        <div style="width: 90%;font-size: 14px;">
                           {{item.describe}}
                        </div>
                        <div style="position: absolute;right: 0;bottom: 0;">
                            <el-button :type="item.identification==1?'success':
                                                item.identification==2?'primary':'info'" round style="float: right;">
                                {{item.identification==1?'报名中':
                                        item.identification==2?'活动中':'已结束'}}</el-button>
                         </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>   
</template>
<script>
export default {
name: 'CooperationExchangeList',
data () {
  return {
        Exhibition:[{
              title:'2020国际水资源大会',
              img:'20200608.gif',
              time1:'2020-10-05',
              time2:'2020-10-05',
              place:'中国-北京',
              describe:'各界专家从人类命运共同体的高度出发,围绕全球治理下的政治、经济、军事、公共卫生、青年等话题进行理论探讨。当前新冠肺炎疫情继续在全球蔓延，形势严峻复杂，新冠疫情再次表明人类休戚与共，唯有守望相助、携手应对、合作抗疫、成果共享，才能共建美好的地球家园。',
              identification:'1'
      },{
              title:'2020国际水资源大会',
              time1:'2020-10-05',
              img:'20200608.gif',
              time2:'2020-10-05',
              place:'中国-北京',
              describe:'各界专家从人类命运共同体的高度出发,围绕全球治理下的政治、经济、军事、公共卫生、青年等话题进行理论探讨。当前新冠肺炎疫情继续在全球蔓延，形势严峻复杂，新冠疫情再次表明人类休戚与共，唯有守望相助、携手应对、合作抗疫、成果共享，才能共建美好的地球家园。',
              identification:'2'
      },{
              title:'2020国际水资源大会',
              img:'20200608.gif',
              time1:'2020-10-05',
              time2:'2020-10-05',
              place:'中国-北京',
              describe:'各界专家从人类命运共同体的高度出发,围绕全球治理下的政治、经济、军事、公共卫生、青年等话题进行理论探讨。当前新冠肺炎疫情继续在全球蔓延，形势严峻复杂，新冠疫情再次表明人类休戚与共，唯有守望相助、携手应对、合作抗疫、成果共享，才能共建美好的地球家园。',
              identification:'3'
      },{
              title:'2020国际水资源大会',
              time1:'2020-10-05',
              img:'20200608.gif',
              time2:'2020-10-05',
              place:'中国-北京',
              describe:'各界专家从人类命运共同体的高度出发,围绕全球治理下的政治、经济、军事、公共卫生、青年等话题进行理论探讨。当前新冠肺炎疫情继续在全球蔓延，形势严峻复杂，新冠疫情再次表明人类休戚与共，唯有守望相助、携手应对、合作抗疫、成果共享，才能共建美好的地球家园。',
              identification:'1'
      }],
    }
},
methods:{
    getIconUrl(url){
        return require("@/assets/img/cooperationExchange/"+url);
    },
    toView(router,json){
        this.$router.push({name:router,params:{key:json}})
    },
}
}
</script>
<style scoped>
.initData2 {
  /* height: 1200px; */
}
.initData2 li {
  width: 100%;
  height: 220px;
  border-bottom: 1px solid #b9b9b9;
  display: block;
}
.initData2 li:nth-child(2n-1){
  margin-right: 15px;
}
</style>