CooperationExchangeList.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <template>
  2. <div style="width: 100%;margin-top: 20px;" class="initData2" v-if="this.$i18n.locale=='en'">
  3. <ul>
  4. <li v-for="(item,index) in Exhibition">
  5. <div style="width: 200px;height: 200px;display: inline-block;float:left;margin-top: 10px;">
  6. <img :src="getIconUrl(item.img)" alt="" style="width: 100%;height: 100%;">
  7. </div>
  8. <div style="padding: 10px 10px;display: inline-block;width: 70%;float:left; ">
  9. <div style="width: 100%;line-height: 25px;text-align: left;;font-weight: 700;" class="cursor" @click="toView('cooperationExchangeListDetails',item)">
  10. {{item.title}}
  11. </div>
  12. <div style="width: 100%;line-height: 35px;font-size: 14px; position: relative;">
  13. <span style="margin-right: 15px;">地点:{{item.place}}</span>
  14. <span>时间: {{item.time1}} - {{item.time2}}</span>
  15. <div style="width: 90%;font-size: 14px;">
  16. {{item.describe}}
  17. </div>
  18. <div style="position: absolute;right: 0;bottom: 0;">
  19. <el-button :type="item.identification==1?'success':
  20. item.identification==2?'primary':'info'" round style="float: right;">
  21. {{item.identification==1?'报名中':
  22. item.identification==2?'活动中':'已结束'}}</el-button>
  23. </div>
  24. </div>
  25. </div>
  26. </li>
  27. </ul>
  28. </div>
  29. </template>
  30. <script>
  31. export default {
  32. name: 'CooperationExchangeList',
  33. data () {
  34. return {
  35. Exhibition:[{
  36. title:'2020国际水资源大会',
  37. img:'20200608.gif',
  38. time1:'2020-10-05',
  39. time2:'2020-10-05',
  40. place:'中国-北京',
  41. describe:'各界专家从人类命运共同体的高度出发,围绕全球治理下的政治、经济、军事、公共卫生、青年等话题进行理论探讨。当前新冠肺炎疫情继续在全球蔓延,形势严峻复杂,新冠疫情再次表明人类休戚与共,唯有守望相助、携手应对、合作抗疫、成果共享,才能共建美好的地球家园。',
  42. identification:'1'
  43. },{
  44. title:'2020国际水资源大会',
  45. time1:'2020-10-05',
  46. img:'20200608.gif',
  47. time2:'2020-10-05',
  48. place:'中国-北京',
  49. describe:'各界专家从人类命运共同体的高度出发,围绕全球治理下的政治、经济、军事、公共卫生、青年等话题进行理论探讨。当前新冠肺炎疫情继续在全球蔓延,形势严峻复杂,新冠疫情再次表明人类休戚与共,唯有守望相助、携手应对、合作抗疫、成果共享,才能共建美好的地球家园。',
  50. identification:'2'
  51. },{
  52. title:'2020国际水资源大会',
  53. img:'20200608.gif',
  54. time1:'2020-10-05',
  55. time2:'2020-10-05',
  56. place:'中国-北京',
  57. describe:'各界专家从人类命运共同体的高度出发,围绕全球治理下的政治、经济、军事、公共卫生、青年等话题进行理论探讨。当前新冠肺炎疫情继续在全球蔓延,形势严峻复杂,新冠疫情再次表明人类休戚与共,唯有守望相助、携手应对、合作抗疫、成果共享,才能共建美好的地球家园。',
  58. identification:'3'
  59. },{
  60. title:'2020国际水资源大会',
  61. time1:'2020-10-05',
  62. img:'20200608.gif',
  63. time2:'2020-10-05',
  64. place:'中国-北京',
  65. describe:'各界专家从人类命运共同体的高度出发,围绕全球治理下的政治、经济、军事、公共卫生、青年等话题进行理论探讨。当前新冠肺炎疫情继续在全球蔓延,形势严峻复杂,新冠疫情再次表明人类休戚与共,唯有守望相助、携手应对、合作抗疫、成果共享,才能共建美好的地球家园。',
  66. identification:'1'
  67. }],
  68. }
  69. },
  70. methods:{
  71. getIconUrl(url){
  72. return require("@/assets/img/cooperationExchange/"+url);
  73. },
  74. toView(router,json){
  75. this.$router.push({name:router,params:{key:json}})
  76. },
  77. }
  78. }
  79. </script>
  80. <style scoped>
  81. .initData2 {
  82. /* height: 1200px; */
  83. }
  84. .initData2 li {
  85. width: 100%;
  86. height: 220px;
  87. border-bottom: 1px solid #b9b9b9;
  88. display: block;
  89. }
  90. .initData2 li:nth-child(2n-1){
  91. margin-right: 15px;
  92. }
  93. </style>