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

556 lines
16 KiB

  1. <template>
  2. <div>
  3. <el-carousel >
  4. <el-carousel-item class="lunbo" 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="top" v-if="display">
  14. <div id="imgtxt">
  15. <img :src="hotnews.img">
  16. <a class="newsTitle">{{ hotnews.title }}</a>
  17. </div>
  18. <div id="hottxt">
  19. <div id="htitle">
  20. <a class="tle">热点新闻</a>
  21. <el-button type="text">MORE+</el-button>
  22. </div>
  23. <div id="hotList">
  24. <div class="list" v-for="(item, index) in hotnewsList" :key="index">
  25. <img :src="item.img">
  26. <a>{{ item.title }}</a>
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. <div class="bottom" :style="{ backgroundImage: `url(${gg1})` }"/>
  32. </div>
  33. </div>
  34. <div id="daliay">
  35. <div class="content">
  36. <div class="top">
  37. <el-carousel :interval="4000" type="card" height="200px">
  38. <el-carousel-item v-for="(item, index) in carvideoList" :key="index">
  39. <img :src="item.img">
  40. <a>{{ item.title }}</a>
  41. </el-carousel-item>
  42. </el-carousel>
  43. </div>
  44. <div class="bottom" :style="{ backgroundImage: `url(${gg2})` }"/>
  45. </div>
  46. </div>
  47. <div id="wk">
  48. <div class="content">
  49. <div class="htitle">
  50. <a class="tle">热点新闻</a>
  51. <el-button type="text">MORE+</el-button>
  52. </div>
  53. <div id="hotList">
  54. <div class="list" v-for="(item, index) in carList" :key="index">
  55. <img :src="item.img">
  56. <div class="txt">
  57. <a class="title">{{ item.title }}</a>
  58. <a class="subtitle">{{ item.subtitle }}</a>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. </div>
  65. </template>
  66. <script>
  67. import { lunboList, hotNewsConfig, guanggao, hotlist, videoList } from '@/api/car.js'
  68. export default {
  69. name: 'information',
  70. data () {
  71. return {
  72. carouselList: [
  73. // { src: '/car1.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' },
  74. // { src: '/car2.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' }
  75. ],
  76. hotnews: {
  77. title: '这两款产品也将采用“CHN”的模式进行研发',
  78. img: '/hotnew.png'
  79. },
  80. hotnewsList: [
  81. // {
  82. // title: '广汽本田插混旗舰双子',
  83. // img: '/listnews.png'
  84. // },
  85. // {
  86. // title: '强不强?吉利银河E8全景',
  87. // img: '/listnews.png'
  88. // },
  89. // {
  90. // title: '智己汽车正式获准L3级',
  91. // img: '/listnews.png'
  92. // },
  93. // {
  94. // title: '广汽本田插混旗舰双子',
  95. // img: '/listnews.png'
  96. // },
  97. // {
  98. // title: '强不强?吉利银河E8全景',
  99. // img: '/listnews.png'
  100. // },
  101. // {
  102. // title: '智己汽车正式获准L3级',
  103. // img: '/listnews.png'
  104. // }
  105. ],
  106. carvideoList: [
  107. // {
  108. // title: '斯巴鲁全新电动车SOLTERRA定名“岚鲲”',
  109. // img: '/carvideo.png'
  110. // },
  111. // {
  112. // title: '斯巴鲁全新电动车SOLTERRA定名“岚鲲”',
  113. // img: '/carvideo.png'
  114. // },
  115. // {
  116. // title: '斯巴鲁全新电动车SOLTERRA定名“岚鲲”',
  117. // img: '/carvideo.png'
  118. // }
  119. ],
  120. carList: [
  121. // {
  122. // img: '/cattxt.png',
  123. // title: '广汽本田插混旗舰双子',
  124. // subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这'
  125. // }, {
  126. // img: '/cattxt.png',
  127. // title: '首款高端纯电MPV翼真Xspace',
  128. // subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这'
  129. // }, {
  130. // img: '/cattxt.png',
  131. // title: '广汽本田插混旗舰双子',
  132. // subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这'
  133. // }, {
  134. // img: '/cattxt.png',
  135. // title: '首款高端纯电MPV翼真Xspace',
  136. // subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这'
  137. // }, {
  138. // img: '/cattxt.png',
  139. // title: '广汽本田插混旗舰双子',
  140. // subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这'
  141. // }, {
  142. // img: '/cattxt.png',
  143. // title: '首款高端纯电MPV翼真Xspace',
  144. // subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这'
  145. // }
  146. ],
  147. display: 1,
  148. gg1: '',
  149. gg2: ''
  150. }
  151. },
  152. components: {
  153. },
  154. mounted () {
  155. this.gethotnewsConfig()
  156. this.getlunboList()
  157. this.getguanggao()
  158. this.gethotlist()
  159. this.getvideoList()
  160. },
  161. methods: {
  162. async getlunboList () {
  163. const { data: { message, data } } = await lunboList()
  164. if (message === 'success') {
  165. for (const iter of data.list) {
  166. this.carouselList.push({
  167. src: iter.image,
  168. title: iter.title,
  169. subtitle: iter.subtitle,
  170. link: iter.link
  171. })
  172. }
  173. }
  174. },
  175. async gethotnewsConfig () {
  176. const { data: { message, data: { display } } } = await hotNewsConfig()
  177. if (message === 'success') {
  178. this.display = display
  179. }
  180. },
  181. async getguanggao () {
  182. const { data: { message: ggm1, data: gg1 } } = await guanggao(1)
  183. const { data: { message: ggm2, data: gg2 } } = await guanggao(2)
  184. if (ggm1 === 'success' && ggm2 === 'success') {
  185. this.gg1 = gg1.image
  186. this.gg2 = gg2.image
  187. }
  188. },
  189. async gethotlist () {
  190. const { data: { message, data } } = await hotlist()
  191. console.log(message)
  192. if (message === 'success') {
  193. this.hotnews.title = data.list[0].title
  194. this.hotnews.img = data.list[0].image
  195. for (let index = 0; index < 6; index++) {
  196. this.hotnewsList.push({
  197. title: data.list[0].title,
  198. img: data.list[0].image
  199. })
  200. console.log(data.list)
  201. this.carList.push({
  202. title: data.list[0].title,
  203. img: data.list[0].image,
  204. subtitle: data.list[0].subTitle
  205. })
  206. }
  207. }
  208. },
  209. async getvideoList () {
  210. const { data: { message, data } } = await videoList()
  211. if (message === 'success') {
  212. for (const iter of data.list) {
  213. this.carvideoList.push({
  214. title: iter.title,
  215. img: iter.image
  216. })
  217. }
  218. }
  219. }
  220. }
  221. }
  222. </script>
  223. <style lang="scss" scoped>
  224. .el-carousel__item{
  225. background-size: 100%;
  226. background-repeat: no-repeat;
  227. display: flex;
  228. justify-content: center;
  229. align-items: flex-end;
  230. #txt {
  231. display: flex;
  232. flex-direction: column;
  233. margin-bottom: 50px;
  234. color: #FFFFFF;
  235. .title {
  236. font-size: 36px;
  237. font-weight: bold;
  238. text-align: center;
  239. margin-bottom: 15px;
  240. }
  241. .subtitle {
  242. font-size: 16px;
  243. font-weight: 400;
  244. opacity: 0.5;
  245. text-align: center;
  246. }
  247. }
  248. }
  249. .lunbo {
  250. background-size: auto;
  251. background-position: center;
  252. }
  253. #hot, #daliay, #wk {
  254. width: 100%;
  255. background: #E3E5EA;
  256. display: flex;
  257. align-items: center;
  258. flex-direction: column;
  259. justify-content: center;
  260. padding-bottom: 30px;
  261. .content {
  262. width: 1200px;
  263. height: 90%;
  264. display: flex;
  265. flex-direction: column;
  266. justify-content: space-between;
  267. .top, .bottom {
  268. width: 100%;
  269. }
  270. .top {
  271. min-height: 470px;
  272. background-color: #FFFFFF;
  273. display: flex;
  274. #imgtxt {
  275. width: 560px;
  276. position: relative;
  277. display: flex;
  278. justify-content: center;
  279. align-items: center;
  280. img {
  281. width: 90%;
  282. }
  283. .newsTitle{
  284. position: absolute;
  285. bottom: 5%;
  286. left: 5%;
  287. display: inline-block;
  288. font-size: 18px;
  289. font-weight: bold;
  290. color: #FFFFFF;
  291. line-height: 48px;
  292. width: 90%;
  293. background-color: #0000007e;
  294. }
  295. }
  296. #hottxt {
  297. display: flex;
  298. justify-content: space-around;
  299. flex-direction: column;
  300. align-items: center;
  301. flex: 1;
  302. #htitle {
  303. display: flex;
  304. justify-content: space-between;
  305. align-items: center;
  306. width: 95%;
  307. .tle {
  308. z-index: 9;
  309. font-size: 26px;
  310. font-weight: bold;
  311. color: #00161C;
  312. line-height: 48px;
  313. display: inline-block;
  314. position: relative;
  315. text-decoration: none; /* 移除默认的下划线 */
  316. }
  317. .tle::after {
  318. content: '';
  319. position: absolute;
  320. left: -15px;
  321. bottom: 10px;
  322. width: 65%;
  323. height: 6px; /* 横线高度为文字高度的一半 */
  324. background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */
  325. z-index: -1;
  326. }
  327. .el-button {
  328. font-size: 16px;
  329. font-weight: bold;
  330. color: #07CAAF;
  331. line-height: 48px;
  332. }
  333. }
  334. }
  335. #hotList {
  336. height: 76%;
  337. width: 90%;
  338. display: flex;
  339. flex-wrap: wrap;
  340. justify-content: space-between;
  341. align-items: center;
  342. .list {
  343. display: flex;
  344. flex-direction: column;
  345. align-items: center;
  346. justify-content: center;
  347. width: 150px;
  348. margin-right: 39px;
  349. img {
  350. width: 150px;
  351. height: 112px;
  352. border-radius: 10px;
  353. }
  354. a {
  355. font-size: 14px;
  356. font-weight: 400;
  357. color: #010101;
  358. margin-top: 14px;
  359. white-space: nowrap;
  360. overflow: hidden;
  361. text-overflow: ellipsis;
  362. width: 150px;
  363. // line-height: 48px;
  364. }
  365. }
  366. }
  367. }
  368. .bottom {
  369. min-height: 120px;
  370. background-image: url('../../assets/bottom.png');
  371. background-size: 100% 100%;
  372. }
  373. }
  374. }
  375. #hot {
  376. min-height: 100px;
  377. .content {
  378. margin-top: 20px;
  379. .top {
  380. margin-bottom: 30px;
  381. background-color: #FFFFFF;
  382. display: flex;
  383. background-image: url('../../assets/hotTopLeft.png');
  384. background-position: 101% 0; /* 调整这些值来改变显示的部分 */
  385. background-size: 30% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
  386. background-repeat: no-repeat;
  387. #imgtxt {
  388. width: 560px;
  389. position: relative;
  390. display: flex;
  391. justify-content: center;
  392. align-items: center;
  393. img {
  394. width: 90%;
  395. }
  396. .newsTitle{
  397. position: absolute;
  398. bottom: 5%;
  399. left: 5%;
  400. display: inline-block;
  401. font-size: 18px;
  402. font-weight: bold;
  403. color: #FFFFFF;
  404. line-height: 48px;
  405. width: 90%;
  406. background-color: #0000007e;
  407. }
  408. }
  409. }
  410. }
  411. }
  412. #daliay {
  413. height: 625px;
  414. .top {
  415. // justify-content: space-between;
  416. background-color: #00000000 !important;
  417. .el-carousel {
  418. width: 100%;
  419. height: 100% !important;
  420. background-color: #00000000 !important;
  421. :deep .el-carousel__container {
  422. background-color: #00000000 !important;
  423. height: 100% !important;
  424. }
  425. }
  426. :deep.el-carousel__mask {
  427. background-color: #00000000 !important;
  428. }
  429. :deep .el-carousel__indicators--outside, .el-carousel__indicators--horizontal {
  430. display: none;
  431. }
  432. .el-carousel__item {
  433. display: flex;
  434. flex-direction: column;
  435. // justify-content: center;
  436. align-items: center;
  437. img {
  438. width: 800px;
  439. height: 80%;
  440. }
  441. a {
  442. font-size: 24px;
  443. font-weight: bold;
  444. color: #00161C;
  445. line-height: 48px;
  446. }
  447. }
  448. }
  449. }
  450. #wk {
  451. .content {
  452. background-color: #FFFFFF;
  453. display: flex;
  454. align-items: center;
  455. position: relative;
  456. .htitle {
  457. display: flex;
  458. justify-content: space-between;
  459. align-items: center;
  460. width: 93%;
  461. margin-bottom: 20px;
  462. .tle {
  463. z-index: 9;
  464. font-size: 26px;
  465. font-weight: bold;
  466. color: #00161C;
  467. line-height: 48px;
  468. display: inline-block;
  469. position: relative;
  470. text-decoration: none; /* 移除默认的下划线 */
  471. }
  472. .tle::after {
  473. content: '';
  474. position: absolute;
  475. left: -15px;
  476. bottom: 10px;
  477. width: 65%;
  478. height: 6px; /* 横线高度为文字高度的一半 */
  479. background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */
  480. z-index: -1;
  481. }
  482. .el-button {
  483. font-size: 16px;
  484. font-weight: bold;
  485. color: #07CAAF;
  486. line-height: 48px;
  487. }
  488. }
  489. #hotList {
  490. display: flex;
  491. flex-wrap: wrap;
  492. align-items: center;
  493. .list {
  494. display: flex;
  495. justify-content: center;
  496. width: 500px;
  497. margin: 0 40px 34px 33px;
  498. .txt {
  499. display: flex;
  500. flex-direction: column;
  501. margin-left: 22px;
  502. align-items: center;
  503. width: 60%;
  504. .title {
  505. text-align: left;
  506. width: 100%;
  507. font-size: 18px;
  508. font-weight: bold;
  509. color: #010101;
  510. }
  511. .subtitle{
  512. display: inline-block;
  513. text-align: left;
  514. width: 100%;
  515. font-size: 14px;
  516. font-weight: 400;
  517. color: #000000;
  518. line-height: 24px;
  519. margin-top: 10px;
  520. display: -webkit-box; /* Safari */
  521. -webkit-line-clamp: 3; /* Safari and Chrome */
  522. -webkit-box-orient: vertical; /* Safari and Chrome */
  523. overflow: hidden;
  524. }
  525. }
  526. img {
  527. width: 200px;
  528. height: 150px;
  529. border-radius: 10px;
  530. }
  531. }
  532. }
  533. }
  534. .content::after {
  535. content: '';
  536. width: 100%;
  537. height: 100%;
  538. position: absolute;
  539. background-image: url('../../assets/cartxt.png');
  540. background-position: 101% 0; /* 调整这些值来改变显示的部分 */
  541. background-size: 12% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
  542. background-repeat: no-repeat;
  543. }
  544. }
  545. </style>