元气智驾官网前端
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.
 
 
 
 

253 lines
7.3 KiB

  1. <template>
  2. <div>
  3. <el-carousel >
  4. <el-carousel-item v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }">
  5. <div id="txt">
  6. <a class="title">{{ item.title }}</a>
  7. <a class="subtitle">{{ item.subtitle }}</a>
  8. </div>
  9. </el-carousel-item>
  10. </el-carousel>
  11. <div id="hot">
  12. <div class="content">
  13. <div class="list">
  14. <div class="article" v-for="(item, index) in articleList" :key="index">
  15. <img :src="item.img">
  16. <div class="acontent">
  17. <div class="txt">
  18. <a class="title">{{ item.title }}</a>
  19. <a class="tcontent">{{ item.content }}</a>
  20. </div>
  21. <a class="date">发布日期: {{ item.date }}</a>
  22. </div>
  23. </div>
  24. <el-pagination
  25. background
  26. layout="prev, pager, next"
  27. :total="1000">
  28. </el-pagination>
  29. </div>
  30. <div class="right">
  31. <div class="rtop">
  32. <div class="title">
  33. <a>热点新闻</a>
  34. </div>
  35. <div class="nav" v-for="(item,index) in news" :key="index">
  36. <img :src="item.img">
  37. <a>{{ item.txt }}</a>
  38. </div>
  39. </div>
  40. <div class="rbottom">
  41. <div class="title">
  42. <a>相关视频</a>
  43. </div>
  44. <div class="nav" v-for="(item,index) in videos" :key="index">
  45. <img :src="item.img">
  46. <a>{{ item.txt }}</a>
  47. </div>
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </template>
  54. <script>
  55. export default {
  56. name: 'home',
  57. data () {
  58. return {
  59. carouselList: [
  60. { src: '/car1.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' },
  61. { src: '/car2.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' }
  62. ],
  63. articleList: [
  64. {
  65. img: '/airtlc.png',
  66. title: '强不强?吉利银河E8全景智慧座舱揭秘',
  67. content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长',
  68. date: '2023/01/02'
  69. },
  70. {
  71. img: '/airtlc.png',
  72. title: '强不强?吉利银河E8全景智慧座舱揭秘',
  73. content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长',
  74. date: '2023/01/02'
  75. },
  76. {
  77. img: '/airtlc.png',
  78. title: '强不强?吉利银河E8全景智慧座舱揭秘',
  79. content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长',
  80. date: '2023/01/02'
  81. }
  82. ],
  83. news: [
  84. {
  85. img: '/car.png',
  86. txt: '银河E8全景智慧座舱揭秘银河E8'
  87. },
  88. {
  89. img: '/car.png',
  90. txt: '银河E8全景智慧座舱揭秘银河E8'
  91. },
  92. {
  93. img: '/car.png',
  94. txt: '银河E8全景智慧座舱揭秘银河E8'
  95. }
  96. ],
  97. videos: [
  98. {
  99. img: '/car.png',
  100. txt: '银河E8全景智慧座舱揭秘银河E8'
  101. },
  102. {
  103. img: '/car.png',
  104. txt: '银河E8全景智慧座舱揭秘银河E8'
  105. },
  106. {
  107. img: '/car.png',
  108. txt: '银河E8全景智慧座舱揭秘银河E8'
  109. }
  110. ]
  111. }
  112. },
  113. components: {
  114. }
  115. }
  116. </script>
  117. <style lang="scss" scoped>
  118. .el-carousel__item{
  119. background-size: 100%;
  120. background-repeat: no-repeat;
  121. display: flex;
  122. justify-content: center;
  123. align-items: flex-end;
  124. #txt {
  125. display: flex;
  126. flex-direction: column;
  127. margin-bottom: 50px;
  128. color: #FFFFFF;
  129. .title {
  130. font-size: 36px;
  131. font-weight: bold;
  132. text-align: center;
  133. margin-bottom: 15px;
  134. }
  135. .subtitle {
  136. font-size: 16px;
  137. font-weight: 400;
  138. opacity: 0.5;
  139. text-align: center;
  140. }
  141. }
  142. }
  143. #hot {
  144. width: 100%;
  145. // height: 1200px;
  146. background: #F2F4F8;
  147. display: flex;
  148. justify-content: center;
  149. .content {
  150. width: 70%;
  151. margin: 50px 0 50px 0;
  152. display: flex;
  153. justify-content: space-between;
  154. .list {
  155. padding: 10px;
  156. width: 76%;
  157. background-color: #FFFFFF;
  158. .article {
  159. display: flex;
  160. img {
  161. width: 200px;
  162. height: 150px;
  163. }
  164. .acontent {
  165. height: 150px;
  166. display: flex;
  167. flex-direction: column;
  168. justify-content: space-between;
  169. padding: 0 10px;
  170. margin-bottom: 20px;
  171. .txt {
  172. a {
  173. display: block;
  174. text-align: left;
  175. }
  176. }
  177. .title {
  178. font-size: 18px;
  179. font-weight: bold;
  180. color: #000000;
  181. line-height: 48px;
  182. }
  183. .content {
  184. font-size: 14px;
  185. font-weight: 400;
  186. color: #000000;
  187. line-height: 24px;
  188. }
  189. .date {
  190. font-size: 14px;
  191. font-weight: 400;
  192. color: #7D8392;
  193. line-height: 30px;
  194. text-align: left;
  195. }
  196. }
  197. .acontent:not(:last-child) {
  198. margin-bottom: 0px;
  199. }
  200. }
  201. }
  202. .right {
  203. width: 21%;
  204. display: flex;
  205. justify-content: space-between;
  206. flex-direction: column;
  207. .rtop, .rbottom {
  208. background-color: #FFFFFF;
  209. height: 49%;
  210. width: 100%;
  211. .title {
  212. background-image: url('../../assets/airtlctl.png');
  213. background-position: 0 0; /* 调整这些值来改变显示的部分 */
  214. background-size: 30% 100%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
  215. background-repeat: no-repeat;
  216. a {
  217. font-size: 20px;
  218. font-weight: bold;
  219. color: #000000;
  220. line-height: 48px;
  221. width: 100%;
  222. text-align: left;
  223. display: inline-block;
  224. margin-left: 40px;
  225. }
  226. }
  227. .nav {
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. margin: 10px 0 10px 0;
  232. img {
  233. width: 240px;
  234. height: 180px;
  235. }
  236. a {
  237. font-size: 16px;
  238. font-weight: 400;
  239. color: #000000;
  240. line-height: 48px;
  241. }
  242. }
  243. }
  244. }
  245. }
  246. }
  247. .el-pagination.is-background .el-pager li:not(.disabled).active {
  248. background-color: #07CAAF;
  249. }
  250. </style>