userCenterFavoriteItems.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <template>
  2. <div style="width: 100%;background: #fff;min-height: 700px;color: #666;" class="userCenterMyActivity">
  3. <div style="margin-left: 30px;margin-right: 30px;margin-top: 10px; " class="myActivity">
  4. <div>
  5. <ul>
  6. <li class="myActivityLi" v-for="(item,index) in tableData ">
  7. <div style="display: inline-block;height: 100%;"><img src="@/assets/img/userCenter/messageImg.gif" alt="" style="width:150px;height: 100%;"></div>
  8. <div style="display: inline-block;vertical-align:top">
  9. <div class="title">
  10. <span>{{item.date}}</span>
  11. <span style="color: #ff0000;float: right;font-size: 12px;font-weight: 400;">取消收藏</span>
  12. </div>
  13. <div class="myActivityLi_data">{{item.address}}</div>
  14. <div class="myActivityLi_data ">
  15. {{item.address5}}
  16. </div>
  17. <div class="myActivityLi_data">
  18. <span class="">322人关注/一年前发布</span>
  19. <span style="margin-left: 50px;">截至日期{{item.endTime}}</span>
  20. </div>
  21. <div class="myActivityLi_data">
  22. 项目阶段:招标阶段
  23. </div>
  24. <div class="myActivityLi_data" style="margin-top: 11px;">
  25. <el-tag type="success">国内</el-tag>
  26. <el-tag type="info">电力能源</el-tag>
  27. </div>
  28. </div>
  29. </li>
  30. </ul>
  31. </div>
  32. </div>
  33. <div style="margin-left: 250px;">
  34. <el-pagination
  35. style="margin-top: 40px;height: 80px;"
  36. background
  37. layout="prev, pager, next"
  38. :total="1000" @size-change="handleSizeChange"
  39. @current-change="handleCurrentChange">
  40. </el-pagination>
  41. </div>
  42. </div>
  43. </template>
  44. <script>
  45. export default {
  46. name: 'userCenterMyFollow',
  47. data () {
  48. return {
  49. formInline: {
  50. user: '',
  51. region: ''
  52. },
  53. tableData: [{
  54. date: '日本大型海上风电项目',
  55. address: '中国 北京市',
  56. startTime: '2020-05-25',
  57. endTime: '2020-05-31',
  58. address5: '海上风电|跨国|咨询',
  59. },{
  60. date: '2020全球能源互联网大会',
  61. address: '中国 北京市',
  62. startTime: '2020-05-25',
  63. endTime: '2020-05-31',
  64. address5: '海上风电|跨国|咨询',
  65. },{
  66. date: '2020全球能源互联网大会',
  67. address: '中国 北京市',
  68. startTime: '2020-05-25',
  69. endTime: '2020-05-31',
  70. address5: '海上风电|跨国|咨询',
  71. },{
  72. date: '2020全球能源互联网大会',
  73. address: '中国 北京市',
  74. startTime: '2020-05-25',
  75. endTime: '2020-05-31',
  76. address5: '海上风电|跨国|咨询',
  77. },{
  78. date: '2020全球能源互联网大会',
  79. address: '中国 北京市',
  80. startTime: '2020-05-25',
  81. endTime: '2020-05-31',
  82. address5: '海上风电|跨国|咨询',
  83. },{
  84. date: '2020全球能源互联网大会',
  85. address: '中国 北京市',
  86. startTime: '2020-05-25',
  87. endTime: '2020-05-31',
  88. address5: '海上风电|跨国|咨询',
  89. }]
  90. }
  91. },
  92. methods:{
  93. // 发布
  94. release(index, rows) {
  95. console.log(index, rows)
  96. },
  97. // 编辑
  98. change(index, rows) {
  99. console.log(index, rows)
  100. },
  101. // 删除
  102. deleteRow(index, rows) {
  103. console.log(index, rows)
  104. },
  105. // 撤回
  106. withdraw(index,rows) {
  107. console.log(index, rows)
  108. },
  109. handleSizeChange(val) {
  110. console.log(`每页 ${val} 条`);
  111. },
  112. handleCurrentChange(val) {
  113. console.log(`当前页: ${val}`);
  114. }
  115. }
  116. }
  117. </script>
  118. <style scoped>
  119. .el-input {
  120. width: 200px ;
  121. }
  122. .el-form-item__content,.el-select {
  123. width: 200px !important;
  124. }
  125. .el-table thead {
  126. background: #eee;
  127. }
  128. .userCenterMyActivity >>> .el-pagination .el-pager li,
  129. .userCenterMyActivity >>> .el-pagination .btn-next,
  130. .userCenterMyActivity >>> .el-pagination .btn-prev{
  131. width: 35px;
  132. height: 35px;
  133. line-height: 35px;
  134. }
  135. .userCenterMyActivity >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
  136. background: #0050d8;
  137. }
  138. .margin_left {
  139. margin-left: 5px;
  140. }
  141. .myActivityLi {
  142. width: 456px;
  143. float: left;
  144. height: 153px;
  145. margin-bottom: 20px;
  146. border: 1px solid rgba(228, 228, 228, 1);
  147. box-shadow: rgba(228, 228, 228, 1);
  148. }
  149. .myActivityLi .title {
  150. color: #666;
  151. font-weight: 700;
  152. margin-left: 10px;
  153. margin-top: 8px;
  154. }
  155. .myActivityLi_data {
  156. color: #666;
  157. font-size: 12px;
  158. margin-top: 5px;
  159. margin-left: 10px;
  160. }
  161. .myActivity ul {
  162. text-align: top;
  163. height: 100%;
  164. display: flex;
  165. display: -webkit-flex; /* Safari */
  166. justify-content:space-between;
  167. flex-wrap:wrap;
  168. }
  169. .el-tag {
  170. height: 22px;
  171. line-height: 22px;
  172. margin-right: 5px;
  173. }
  174. </style>