瑜璟缘官网
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 

187 Zeilen
4.6 KiB

  1. <template>
  2. <div class="Box journalism">
  3. <!-- <div class="leftBox"> -->
  4. <textTitle :text="textTop" />
  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. textTop: ''
  49. }
  50. },
  51. watch: {
  52. $route() {
  53. this.tag = this.$route.query.tag
  54. this.getTitle()
  55. this.getNewsList()
  56. }
  57. },
  58. methods: {
  59. goparticulars(item) {
  60. let detailId= item.id + ".html"
  61. this.$router.push({name: "particulars",params:{ id: detailId, ifjournalism: this.tag}})
  62. },
  63. /* 新闻列表 */
  64. getNewsList() {
  65. let d = {
  66. type: this.tag ? this.tag : 1,
  67. pageNum: this.paging.pageNum,
  68. pageSize: this.paging.pageSize
  69. }
  70. homeService.getNewsList(d).then(res => {
  71. res.list.forEach(ele => {
  72. ele.publishDate = moment(ele.publishDate).format("YYYY-MM-DD")
  73. ele.content = ele.content.replace(/<img\b[^>]*>/, "");
  74. });
  75. this.paging.total = Number(res.total)
  76. this.newsList = res.list
  77. })
  78. },
  79. handleCurrentChange(val) {
  80. this.getNewsList()
  81. },
  82. getTitle() {
  83. switch(Number(this.tag)) {
  84. case 1: this.textTop = '行业新闻'
  85. break;
  86. case 2: this.textTop = '企业培训优秀案例'
  87. break;
  88. case 3: this.textTop = '学员风采'
  89. break;
  90. case 4: this.textTop = '生活服务'
  91. break;
  92. case 5: this.textTop = '房屋租赁'
  93. break;
  94. case 6: this.textTop = '宠物市场'
  95. break;
  96. case 7: this.textTop = '餐饮美食'
  97. break;
  98. case 8: this.textTop = '票务卡券'
  99. break;
  100. case 9: this.textTop = '教育培训'
  101. break;
  102. case 10: this.textTop = '企业招聘'
  103. break;
  104. case 11: this.textTop = '商务服务'
  105. break;
  106. }
  107. }
  108. },
  109. created() {
  110. this.getTitle()
  111. this.getNewsList()
  112. }
  113. };
  114. </script>
  115. <style lang="scss" scoped>
  116. .newsList{
  117. height: 550px;
  118. overflow: auto;
  119. position: relative;
  120. }
  121. .newsList .el-pagination{
  122. text-align: center;
  123. margin-top: 20px;
  124. position:absolute;
  125. bottom: 0;
  126. left: 40%;
  127. }
  128. .journalism{
  129. width: 1100px;
  130. padding: 50px 40px;
  131. margin: 0 auto;
  132. box-shadow: 0 0 10px #f3f3f3;
  133. background: #fff;
  134. }
  135. .detailBox {
  136. margin-top: 30px;
  137. margin-left: 20px;
  138. cursor: pointer;
  139. h3 {
  140. font-size: 14px;
  141. padding-bottom: 4px;
  142. }
  143. .imgBox {
  144. overflow: hidden;
  145. .img {
  146. float: left;
  147. width: 150px;
  148. height: 100px;
  149. }
  150. .text {
  151. float: left;
  152. width: 630px;
  153. height: 100px;
  154. margin-left: 20px;
  155. position: relative;
  156. p {
  157. display: -webkit-box;
  158. -webkit-line-clamp: 2;
  159. -webkit-box-orient: vertical;
  160. line-height: 20px;
  161. overflow: hidden;
  162. color: #999;
  163. font-size: 14px;
  164. }
  165. .time {
  166. display: block;
  167. margin-top: 20px;
  168. position: absolute;
  169. bottom: 0;
  170. width: 100%;
  171. span{
  172. float: right;
  173. }
  174. }
  175. }
  176. }
  177. }
  178. </style>
  179. <style scoped>
  180. .detailBox .imgBox >>> span{
  181. font-size: 14px !important;
  182. }
  183. </style>