瑜璟缘官网
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.
 
 
 

188 line
4.7 KiB

  1. <template>
  2. <div class="sidebarBox">
  3. <div class="listBox">
  4. <div class="course">课程中心</div>
  5. <ul class="column">
  6. <li
  7. :class="activity==index?'activity':'default'"
  8. @click="go(`${item.path}`,index)"
  9. v-for="(item, index) in listSide"
  10. :key="index"
  11. >{{item.text}}</li>
  12. </ul>
  13. <div class="makeBtn" @click="go('companySynopsis')">预约服务</div>
  14. <div class="journalismTitle">
  15. <div>新闻中心</div>
  16. <p @click="moreNews">MORE</p>
  17. </div>
  18. <div class="journalismBox" v-for="(item, index) in newsList" :key="index" @click="goparticulars(item)">
  19. <img class="logo" :src="item.mainPicRealPath" alt />
  20. <div class="journalismText">
  21. <h3>{{item.title}}</h3>
  22. <span>{{item.assistantTitle}}</span>
  23. <div class="time">{{item.publishDate}} <span class="el-icon-view"> {{item.view}}</span></div>
  24. </div>
  25. </div>
  26. </div>
  27. </div>
  28. </template>
  29. <script>
  30. import { homeService } from "@/api"
  31. import moment from "moment"
  32. export default {
  33. data() {
  34. return {
  35. listSide: [
  36. {
  37. path: "/attestation",
  38. text: "认证课程",
  39. },
  40. {
  41. path: "/attestationFingerpost?index=1",
  42. text: "认证指南",
  43. },
  44. {
  45. path: "/certificate?bear=1",
  46. text: "证书介绍",
  47. },
  48. {
  49. path: "/companySynopsis",
  50. text: "了解更多",
  51. },
  52. ],
  53. activity:sessionStorage.getItem("sidebarIndex"),
  54. newsList: []
  55. };
  56. },
  57. methods: {
  58. goparticulars(item) {
  59. let detailId= item.id + ".html"
  60. this.$router.push({name: "particulars",params:{ id: detailId, ifjournalism: 2}})
  61. },
  62. go(path,index) {
  63. this.$router.push(path);
  64. sessionStorage.setItem('sidebarIndex',index)
  65. },
  66. getNewsList() {
  67. let data = {
  68. type: 1,
  69. pageNum: 1,
  70. pageSize: 3
  71. }
  72. homeService.getNewsList(data).then(res => {
  73. res.list.forEach(ele => {
  74. ele.publishDate = moment(ele.publishDate).format("YYYY-MM-DD")
  75. });
  76. this.newsList = res.list
  77. })
  78. },
  79. moreNews() {
  80. this.$router.push('/journalism');
  81. }
  82. },
  83. created() {
  84. this.getNewsList()
  85. }
  86. };
  87. </script>
  88. <style lang="scss" scoped>
  89. .sidebarBox {
  90. float: right;
  91. width: 20%;
  92. .listBox {
  93. margin-top: 30px;
  94. .course {
  95. font-size: 16px;
  96. color: #ffffff;
  97. text-indent: 20px;
  98. background-color: rgb(153, 153, 153);
  99. padding: 15px 0;
  100. }
  101. .column {
  102. overflow: hidden;
  103. .default {
  104. background: linear-gradient(#ffffff, #cccccc);
  105. height: 40px;
  106. line-height: 40px;
  107. text-align: center;
  108. }
  109. .activity{
  110. background: linear-gradient(#ffffff, #999);
  111. height: 40px;
  112. line-height: 40px;
  113. text-align: center;
  114. color: #ffffff;
  115. }
  116. }
  117. .makeBtn {
  118. height: 40px;
  119. line-height: 40px;
  120. text-align: center;
  121. background: linear-gradient(rgb(79, 167, 218), rgb(7, 56, 79));
  122. border-radius: 10px;
  123. margin: 20px 0;
  124. color: #ffffff;
  125. }
  126. .journalismTitle {
  127. overflow: hidden;
  128. height: 45px;
  129. line-height: 45px;
  130. background-color: rgb(153, 153, 153);
  131. color: #fff;
  132. div {
  133. float: left;
  134. height: 45px;
  135. text-indent: 10px;
  136. }
  137. p {
  138. height: 45px;
  139. float: right;
  140. margin-right: 10px;
  141. cursor: pointer;
  142. }
  143. }
  144. .journalismBox {
  145. overflow: hidden;
  146. border-bottom: rgb(232, 232, 232) 1px solid;
  147. margin: 5px 0;
  148. .logo {
  149. background-color: rosybrown;
  150. height: 40px;
  151. width: 50px;
  152. float: left;
  153. margin-bottom: 10px;
  154. margin-right: 10px;
  155. margin-top: 10px;
  156. }
  157. .journalismText {
  158. float: left;
  159. width: 160px;
  160. margin-left: 10px;
  161. h3 {
  162. width: 90%;
  163. margin: 5px 0;
  164. font-size: 14px;
  165. overflow: hidden;
  166. text-overflow: ellipsis;
  167. white-space: nowrap;
  168. }
  169. span {
  170. overflow: hidden;
  171. color: #999;
  172. text-overflow: ellipsis;
  173. display: -webkit-box;
  174. -webkit-line-clamp: 3;
  175. -webkit-box-orient: vertical;
  176. }
  177. .time {
  178. color: rgb(214, 214, 206);
  179. padding: 2px 0;
  180. span{
  181. float: right;
  182. }
  183. }
  184. }
  185. }
  186. }
  187. }
  188. </style>