瑜璟缘官网
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

145 line
3.5 KiB

  1. <template>
  2. <div class="Box">
  3. <div class="leftBox">
  4. <textTitle text="行业新闻" />
  5. <!-- <div @click="goparticulars">
  6. <detail v-for="(item, index) in newsList" :key="index" />
  7. </div> -->
  8. <div class="newsList">
  9. <div class="detailBox" v-for="(item, index) in newsList" :key="index" @click="goparticulars(item)">
  10. <div class="imgBox">
  11. <img class="img" :src="item.mainPicRealPath" />
  12. <div class="text">
  13. <h3>{{item.title}}</h3>
  14. <p v-html="item.content"></p>
  15. <!-- <span class="time">{{item.publishDate}} <span class="el-icon-view"> {{item.view}}</span></span> -->
  16. </div>
  17. </div>
  18. </div>
  19. <el-pagination class="pagination" :current-page.sync="paging.pageNum" :page-size="paging.pageSize" @current-change="handleCurrentChange"
  20. background
  21. layout="prev, pager, next"
  22. :total="paging.total">
  23. </el-pagination>
  24. </div>
  25. </div>
  26. <sidebar />
  27. </div>
  28. </template>
  29. <script>
  30. import textTitle from "@/components/headTail/textTitle";
  31. import sidebar from "@/components/sidebar/sidebar";
  32. import { homeService } from "@/api"
  33. import moment from "moment"
  34. export default {
  35. components: {
  36. textTitle,
  37. sidebar,
  38. },
  39. data() {
  40. return {
  41. newsList: [],
  42. paging: {
  43. pageNum: 1,
  44. pageSize: 4,
  45. total: 4
  46. },
  47. tag: this.$route.query.tag
  48. }
  49. },
  50. methods: {
  51. goparticulars(item) {
  52. let detailId= item.id + ".html"
  53. this.$router.push({name: "particulars",params:{ id: detailId, ifjournalism: this.tag}})
  54. },
  55. /* 新闻列表 */
  56. getNewsList() {
  57. let d = {
  58. type: this.tag ? this.tag : 1,
  59. pageNum: this.paging.pageNum,
  60. pageSize: this.paging.pageSize
  61. }
  62. homeService.getNewsList(d).then(res => {
  63. res.list.forEach(ele => {
  64. ele.publishDate = moment(ele.publishDate).format("YYYY-MM-DD")
  65. ele.content = ele.content.replace(/<img\b[^>]*>/, "");
  66. });
  67. this.paging.total = Number(res.total)
  68. this.newsList = res.list
  69. })
  70. },
  71. handleCurrentChange(val) {
  72. this.getNewsList()
  73. },
  74. },
  75. created() {
  76. this.getNewsList()
  77. }
  78. };
  79. </script>
  80. <style lang="scss" scoped>
  81. .newsList{
  82. height: 550px;
  83. overflow: auto;
  84. position: relative;
  85. }
  86. .newsList .el-pagination{
  87. text-align: center;
  88. margin-top: 20px;
  89. position:absolute;
  90. bottom: 0;
  91. left: 40%;
  92. }
  93. .detailBox {
  94. margin-top: 30px;
  95. margin-left: 20px;
  96. cursor: pointer;
  97. h3 {
  98. font-size: 14px;
  99. padding-bottom: 4px;
  100. }
  101. .imgBox {
  102. overflow: hidden;
  103. .img {
  104. float: left;
  105. width: 150px;
  106. height: 100px;
  107. }
  108. .text {
  109. float: left;
  110. width: 630px;
  111. height: 100px;
  112. margin-left: 20px;
  113. position: relative;
  114. p {
  115. display: -webkit-box;
  116. -webkit-line-clamp: 2;
  117. -webkit-box-orient: vertical;
  118. line-height: 20px;
  119. overflow: hidden;
  120. color: #999;
  121. font-size: 14px;
  122. }
  123. .time {
  124. display: block;
  125. margin-top: 20px;
  126. position: absolute;
  127. bottom: 0;
  128. width: 100%;
  129. span{
  130. float: right;
  131. }
  132. }
  133. }
  134. }
  135. }
  136. </style>
  137. <style scoped>
  138. .detailBox .imgBox >>> span{
  139. font-size: 14px !important;
  140. }
  141. </style>