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

250 lines
7.1 KiB

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