元气智驾官网前端
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 
 

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