元气智驾官网前端
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 
 

162 rader
3.5 KiB

  1. <template>
  2. <div>
  3. <Swiper :banner-array="carouselList" />
  4. <div id="hot">
  5. <div class="content">
  6. <div class="left">
  7. <h1>{{ data.title }}</h1>
  8. <div class="date">发布日期: {{ $moment(data.sendDate).format('YYYY-MM-DD HH:mm:ss') }}</div>
  9. <div class="list" v-html="data.detail"></div>
  10. </div>
  11. <RightList />
  12. </div>
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. import Swiper from '@/components/swiper'
  18. import RightList from './right.vue'
  19. import { lunboList } from '@/api/home.js'
  20. import { detailApi } from '@/api/article.js'
  21. export default {
  22. name: 'home',
  23. data () {
  24. return {
  25. carouselList: [],
  26. news: [],
  27. videos: [],
  28. data: {}
  29. }
  30. },
  31. components: {
  32. Swiper,
  33. RightList
  34. },
  35. mounted () {},
  36. created () {
  37. this.getlunboList()
  38. this.getDetail()
  39. },
  40. methods: {
  41. async getlunboList () {
  42. const { data: { code, data } } = await lunboList()
  43. if (code === 200) {
  44. this.carouselList = data.list
  45. }
  46. },
  47. async getDetail () {
  48. const { data: { code, data } } = await detailApi(this.$route.query.id)
  49. if (code === 200) {
  50. this.data = data
  51. }
  52. }
  53. }
  54. }
  55. </script>
  56. <style lang="scss" scoped>
  57. .el-carousel__item{
  58. background-size: 100%;
  59. background-repeat: no-repeat;
  60. display: flex;
  61. justify-content: center;
  62. align-items: flex-end;
  63. #txt {
  64. display: flex;
  65. flex-direction: column;
  66. margin-bottom: 50px;
  67. color: #FFFFFF;
  68. .title {
  69. font-size: 36px;
  70. font-weight: bold;
  71. text-align: center;
  72. margin-bottom: 15px;
  73. }
  74. .subtitle {
  75. font-size: 16px;
  76. font-weight: 400;
  77. opacity: 0.5;
  78. text-align: center;
  79. }
  80. }
  81. }
  82. #hot {
  83. width: 100%;
  84. background: #F2F4F8;
  85. display: flex;
  86. justify-content: center;
  87. .content {
  88. width: 1200px;
  89. margin: 50px 0 50px 0;
  90. display: flex;
  91. justify-content: space-between;
  92. .left{
  93. width: 820px;
  94. padding: 30px;
  95. width: 820px;
  96. background-color: #FFFFFF;
  97. h1 {
  98. margin: 0;
  99. }
  100. .date {
  101. font-size: 14px;
  102. color: #7D8392;
  103. line-height: 30px;
  104. margin: 30px 0;
  105. }
  106. }
  107. .list {
  108. overflow: hidden;
  109. .article {
  110. display: flex;
  111. img {
  112. width: 200px;
  113. height: 150px;
  114. }
  115. .acontent {
  116. height: 150px;
  117. display: flex;
  118. flex-direction: column;
  119. justify-content: space-between;
  120. padding: 0 10px;
  121. margin-bottom: 20px;
  122. .txt {
  123. a {
  124. display: block;
  125. text-align: left;
  126. }
  127. }
  128. .title {
  129. font-size: 18px;
  130. font-weight: bold;
  131. color: #000000;
  132. line-height: 48px;
  133. }
  134. .content {
  135. font-size: 14px;
  136. font-weight: 400;
  137. color: #000000;
  138. line-height: 24px;
  139. }
  140. .date {
  141. font-size: 14px;
  142. font-weight: 400;
  143. color: #7D8392;
  144. line-height: 30px;
  145. text-align: left;
  146. }
  147. }
  148. .acontent:not(:last-child) {
  149. margin-bottom: 0px;
  150. }
  151. }
  152. }
  153. }
  154. }
  155. .el-pagination.is-background .el-pager li:not(.disabled).active {
  156. background-color: #07CAAF;
  157. }
  158. </style>