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

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