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

512 lines
14 KiB

  1. <template>
  2. <div>
  3. <Swiper :banner-array="carouselList" />
  4. <div id="hot">
  5. <div class="content">
  6. <div class="top" v-if="display">
  7. <div id="imgtxt" @click="routerToarticleDetails(hotnews.detail)">
  8. <img :src="hotnews.img">
  9. <a class="newsTitle">{{ hotnews.title }}</a>
  10. </div>
  11. <div id="hottxt">
  12. <div id="htitle">
  13. <a class="tle">热点新闻</a>
  14. <el-button type="text" @click="routerTo">MORE+</el-button>
  15. </div>
  16. <div id="hotList">
  17. <div class="list" v-for="(item, index) in hotnewsList" :key="index" @click="routerToarticleDetails(item.detail)">
  18. <img :src="item.img">
  19. <a>{{ item.title }}</a>
  20. </div>
  21. </div>
  22. </div>
  23. </div>
  24. <a :href="gg1.link" target="_blank">
  25. <div class="bottom" :style="{ backgroundImage: `url(${gg1.img})` }"/>
  26. </a>
  27. </div>
  28. </div>
  29. <div id="daliay">
  30. <div class="content">
  31. <div class="top">
  32. <el-carousel :interval="4000" type="card" height="200px">
  33. <el-carousel-item v-for="(item, index) in carvideoList" :key="index">
  34. <div class="carvideo">
  35. <video :src="item.video" />
  36. </div>
  37. <a>{{ item.title }}</a>
  38. </el-carousel-item>
  39. </el-carousel>
  40. </div>
  41. <a :href="gg2.link" target="_blank">
  42. <div class="bottom" :style="{ backgroundImage: `url(${gg2.img})` }"/>
  43. </a>
  44. </div>
  45. </div>
  46. <div id="wk">
  47. <div class="content">
  48. <div class="htitle">
  49. <a class="tle">汽车文章</a>
  50. <el-button type="text" @click="routerTo">MORE+</el-button>
  51. </div>
  52. <div id="hotList">
  53. <div class="list" v-for="(item, index) in carList" :key="index" @click="routerToarticleDetails(item.detail)">
  54. <img :src="item.img">
  55. <div class="txt">
  56. <a class="title">{{ item.title }}</a>
  57. <a class="subtitle">{{ item.subtitle }}</a>
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. </template>
  65. <script>
  66. import Swiper from '@/components/swiper'
  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. carvideoList: [],
  82. carList: [],
  83. display: 1,
  84. gg1: {},
  85. gg2: {}
  86. }
  87. },
  88. components: {
  89. Swiper
  90. },
  91. mounted () {
  92. this.gethotnewsConfig()
  93. this.getlunboList()
  94. this.getguanggao()
  95. this.gethotlist()
  96. this.getvideoList()
  97. },
  98. methods: {
  99. routerToarticleDetails (value) {
  100. localStorage.setItem('article', value)
  101. this.$router.push({ path: '/articleDetails' })
  102. },
  103. routerTo () {
  104. this.$router.push({ path: '/articleList' })
  105. },
  106. async getlunboList () {
  107. const { data: { message, data } } = await lunboList()
  108. if (message === 'success') {
  109. this.carouselList = data.list
  110. }
  111. },
  112. async gethotnewsConfig () {
  113. const { data: { message, data: { display } } } = await hotNewsConfig()
  114. if (message === 'success') {
  115. this.display = display
  116. }
  117. },
  118. async getguanggao () {
  119. const { data: { message: ggm1, data: gg1 } } = await guanggao(1)
  120. const { data: { message: ggm2, data: gg2 } } = await guanggao(2)
  121. if (ggm1 === 'success' && ggm2 === 'success') {
  122. this.gg1 = {
  123. img: gg1.image,
  124. link: gg1.link
  125. }
  126. this.gg2 = {
  127. img: gg2.image,
  128. link: gg2.link
  129. }
  130. }
  131. },
  132. async gethotlist () {
  133. const { data: { message, data } } = await hotlist()
  134. if (message === 'success') {
  135. this.hotnews.title = data.list[0].title
  136. this.hotnews.img = data.list[0].image
  137. this.hotnews.detail = data.list[0].detail
  138. for (let index = 1; index < data.list.length; index++) {
  139. this.hotnewsList.push({
  140. title: data.list[index].title,
  141. img: data.list[index].image,
  142. subtitle: data.list[index].subTitle,
  143. detail: data.list[index].detail
  144. })
  145. this.carList.push({
  146. title: data.list[index].title,
  147. img: data.list[index].image,
  148. subtitle: data.list[index].subTitle,
  149. detail: data.list[index].detail
  150. })
  151. }
  152. }
  153. },
  154. async getvideoList () {
  155. const { data: { message, data } } = await videoList()
  156. if (message === 'success') {
  157. for (const iter of data.list) {
  158. console.log(iter)
  159. this.carvideoList.push({
  160. title: iter.title,
  161. img: iter.image,
  162. video: iter.link
  163. })
  164. }
  165. }
  166. }
  167. }
  168. }
  169. </script>
  170. <style lang="scss" scoped>
  171. .el-carousel__item{
  172. background-size: 100%;
  173. background-repeat: no-repeat;
  174. display: flex;
  175. justify-content: center;
  176. align-items: flex-end;
  177. #txt {
  178. display: flex;
  179. flex-direction: column;
  180. margin-bottom: 50px;
  181. color: #FFFFFF;
  182. .title {
  183. font-size: 36px;
  184. font-weight: bold;
  185. text-align: center;
  186. margin-bottom: 15px;
  187. }
  188. .subtitle {
  189. font-size: 16px;
  190. font-weight: 400;
  191. opacity: 0.5;
  192. text-align: center;
  193. }
  194. }
  195. }
  196. #hot, #daliay, #wk {
  197. width: 100%;
  198. background: #E3E5EA;
  199. display: flex;
  200. align-items: center;
  201. flex-direction: column;
  202. justify-content: center;
  203. padding-bottom: 30px;
  204. .content {
  205. width: 1200px;
  206. height: 90%;
  207. display: flex;
  208. flex-direction: column;
  209. justify-content: space-between;
  210. .top, .bottom {
  211. width: 100%;
  212. }
  213. .top {
  214. min-height: 470px;
  215. background-color: #FFFFFF;
  216. display: flex;
  217. #imgtxt {
  218. width: 560px;
  219. position: relative;
  220. display: flex;
  221. justify-content: center;
  222. align-items: center;
  223. img {
  224. width: 560px;
  225. }
  226. .newsTitle{
  227. position: absolute;
  228. bottom: 5%;
  229. left: 5%;
  230. display: inline-block;
  231. font-size: 18px;
  232. font-weight: bold;
  233. color: #FFFFFF;
  234. line-height: 48px;
  235. width: 90%;
  236. background-color: #0000007e;
  237. }
  238. }
  239. #hottxt {
  240. display: flex;
  241. justify-content: space-around;
  242. flex-direction: column;
  243. align-items: center;
  244. flex: 1;
  245. margin-left: 35px;
  246. #htitle {
  247. display: flex;
  248. justify-content: space-between;
  249. align-items: center;
  250. width: 95%;
  251. .tle {
  252. z-index: 9;
  253. font-size: 26px;
  254. font-weight: bold;
  255. color: #00161C;
  256. line-height: 48px;
  257. display: inline-block;
  258. position: relative;
  259. text-decoration: none; /* 移除默认的下划线 */
  260. }
  261. .tle::after {
  262. content: '';
  263. position: absolute;
  264. left: -15px;
  265. bottom: 10px;
  266. width: 65%;
  267. height: 6px; /* 横线高度为文字高度的一半 */
  268. background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */
  269. z-index: -1;
  270. }
  271. .el-button {
  272. font-size: 16px;
  273. font-weight: bold;
  274. color: #07CAAF;
  275. line-height: 48px;
  276. cursor: pointer;
  277. z-index: 9999;
  278. }
  279. }
  280. }
  281. #hotList {
  282. height: 76%;
  283. display: flex;
  284. flex-wrap: wrap;
  285. justify-content: space-between;
  286. align-items: center;
  287. .list {
  288. z-index: 999;
  289. display: flex;
  290. flex-direction: column;
  291. align-items: center;
  292. justify-content: center;
  293. width: 150px;
  294. margin-right: 39px;
  295. img {
  296. width: 150px;
  297. height: 112px;
  298. border-radius: 10px;
  299. }
  300. a {
  301. font-size: 14px;
  302. font-weight: 400;
  303. color: #010101;
  304. margin-top: 14px;
  305. white-space: nowrap;
  306. overflow: hidden;
  307. text-overflow: ellipsis;
  308. width: 150px;
  309. // line-height: 48px;
  310. }
  311. }
  312. }
  313. }
  314. .bottom {
  315. min-height: 120px;
  316. background-image: url('../../assets/bottom.png');
  317. background-size: 100% 100%;
  318. }
  319. }
  320. }
  321. #hot {
  322. min-height: 100px;
  323. .content {
  324. margin-top: 20px;
  325. .top {
  326. margin-bottom: 30px;
  327. background-color: #FFFFFF;
  328. display: flex;
  329. background-image: url('../../assets/hotTopLeft.png');
  330. background-position: 101% 0; /* 调整这些值来改变显示的部分 */
  331. background-size: 30% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
  332. background-repeat: no-repeat;
  333. #imgtxt {
  334. width: 560px;
  335. position: relative;
  336. display: flex;
  337. justify-content: center;
  338. align-items: center;
  339. margin-left: 20px;
  340. img {
  341. width: 560px;
  342. }
  343. .newsTitle{
  344. position: absolute;
  345. bottom: 5%;
  346. left: 0;
  347. display: inline-block;
  348. font-size: 18px;
  349. font-weight: bold;
  350. color: #FFFFFF;
  351. line-height: 48px;
  352. width: 100%;
  353. background-color: #0000007e;
  354. }
  355. }
  356. }
  357. }
  358. }
  359. #daliay {
  360. height: 625px;
  361. .top {
  362. // justify-content: space-between;
  363. background-color: #00000000 !important;
  364. .el-carousel {
  365. width: 100%;
  366. height: 100% !important;
  367. background-color: #00000000 !important;
  368. :deep .el-carousel__container {
  369. background-color: #00000000 !important;
  370. height: 100% !important;
  371. }
  372. }
  373. :deep.el-carousel__mask {
  374. background-color: #00000000 !important;
  375. }
  376. :deep .el-carousel__indicators--outside, .el-carousel__indicators--horizontal {
  377. display: none;
  378. }
  379. .el-carousel__mask {
  380. background-color: #00000000 !important;
  381. }
  382. .el-carousel__item {
  383. display: flex;
  384. flex-direction: column;
  385. // justify-content: center;
  386. align-items: center;
  387. .carvideo {
  388. width: 700px;
  389. height: 70%;
  390. border-radius: 20px;
  391. video {
  392. width: 100%;
  393. height: 100%;
  394. }
  395. }
  396. a {
  397. font-size: 24px;
  398. font-weight: bold;
  399. color: #00161C;
  400. line-height: 48px;
  401. }
  402. }
  403. }
  404. }
  405. #wk {
  406. padding-bottom: 200px;
  407. .content {
  408. background-color: #FFFFFF;
  409. display: flex;
  410. align-items: center;
  411. position: relative;
  412. .htitle {
  413. display: flex;
  414. justify-content: space-between;
  415. align-items: center;
  416. width: 93%;
  417. margin-bottom: 20px;
  418. .tle {
  419. z-index: 9;
  420. font-size: 26px;
  421. font-weight: bold;
  422. color: #00161C;
  423. line-height: 48px;
  424. display: inline-block;
  425. position: relative;
  426. text-decoration: none; /* 移除默认的下划线 */
  427. }
  428. .tle::after {
  429. content: '';
  430. position: absolute;
  431. left: -15px;
  432. bottom: 10px;
  433. width: 65%;
  434. height: 6px; /* 横线高度为文字高度的一半 */
  435. background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */
  436. z-index: -1;
  437. }
  438. .el-button {
  439. font-size: 16px;
  440. font-weight: bold;
  441. color: #07CAAF;
  442. line-height: 48px;
  443. z-index: 999;
  444. }
  445. }
  446. #hotList {
  447. display: flex;
  448. flex-wrap: wrap;
  449. align-items: center;
  450. .list {
  451. z-index: 999;
  452. display: flex;
  453. justify-content: center;
  454. width: 500px;
  455. margin: 0 40px 34px 33px;
  456. .txt {
  457. display: flex;
  458. flex-direction: column;
  459. margin-left: 22px;
  460. align-items: center;
  461. width: 60%;
  462. .title {
  463. text-align: left;
  464. width: 100%;
  465. font-size: 18px;
  466. font-weight: bold;
  467. color: #010101;
  468. }
  469. .subtitle{
  470. display: inline-block;
  471. text-align: left;
  472. width: 100%;
  473. font-size: 14px;
  474. font-weight: 400;
  475. color: #000000;
  476. line-height: 24px;
  477. margin-top: 10px;
  478. display: -webkit-box; /* Safari */
  479. -webkit-line-clamp: 3; /* Safari and Chrome */
  480. -webkit-box-orient: vertical; /* Safari and Chrome */
  481. overflow: hidden;
  482. }
  483. }
  484. img {
  485. width: 200px;
  486. height: 150px;
  487. border-radius: 10px;
  488. }
  489. }
  490. }
  491. }
  492. .content::after {
  493. content: '';
  494. width: 100%;
  495. height: 100%;
  496. position: absolute;
  497. background-image: url('../../assets/cartxt.png');
  498. background-position: 101% 0; /* 调整这些值来改变显示的部分 */
  499. background-size: 12% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
  500. background-repeat: no-repeat;
  501. }
  502. }
  503. </style>