元气智驾官网前端
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 
 

623 行
17 KiB

  1. <template>
  2. <div>
  3. <Swiper :banner-array="carouselList" />
  4. <div id="hot">
  5. <div class="content">
  6. <div class="top">
  7. <el-carousel :interval="5000" arrow="always" height="470px">
  8. <el-carousel-item v-for="(item, index) in hotList" :key="index">
  9. <div class="lr videocar">
  10. <img class="videoImage" :src="item.news.videoImage" />
  11. <img class="play" src="@/assets/play.png" @click="videoPlayer(item)" :id="'play'+index">
  12. </div>
  13. <div id="hottxt" class="lr">
  14. <div class="txtcontent">
  15. <div class="title">
  16. <img src="@/assets/tt.png">
  17. {{ item.news.title }}
  18. </div>
  19. <p class="content">{{ item.news.detailText }}</p>
  20. </div>
  21. <div class="btn">
  22. <el-button plain class="more" size="small" @click="routerToCar">MORE</el-button>
  23. </div>
  24. </div>
  25. </el-carousel-item>
  26. </el-carousel>
  27. </div>
  28. <div class="hotnews" v-if="display">
  29. <div id="imgtxt" @click="routerToarticleDetails(hotnews.detail)">
  30. <img :src="hotnews.img">
  31. <a class="newsTitle">{{ hotnews.title }}</a>
  32. </div>
  33. <div id="hottxt">
  34. <div id="htitle">
  35. <a class="tle">热点新闻</a>
  36. <el-button type="text" @click="routerTo">MORE+</el-button>
  37. </div>
  38. <div id="hotList">
  39. <div class="list" v-for="(item, index) in hotnewsList" :key="index" @click="routerToarticleDetails(item.detail)">
  40. <img :src="item.img">
  41. <a>{{ item.title }}</a>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. <a :href="gg1.link" v-if="gg1.img" target="_blank">
  47. <img class="bottom" :src="gg1.img" alt="">
  48. </a>
  49. </div>
  50. </div>
  51. <div id="daliay">
  52. <div class="content">
  53. <div class="top">
  54. <img src="@/assets/rblogo.png" class="logo">
  55. <el-carousel :interval="5000" arrow="always" height="470px">
  56. <el-carousel-item v-for="(item, index) in daliay" :key="index">
  57. <div class="yyzrbtxt lr">
  58. <div class="txtcontent">
  59. <div class="title">
  60. {{ item.news.title }}
  61. </div>
  62. <p class="content">{{ item.news.detailText }}</p>
  63. </div>
  64. <div class="btn">
  65. <el-button plain class="more" size="small" @click="routerToMate">MORE</el-button>
  66. </div>
  67. </div>
  68. <div class="yyzrbimg lr" >
  69. <img class="videoImage" :src="item.news.videoImage" />
  70. <img class="play" src="@/assets/play.png" @click="videoPlayer(item)" :id="'daplay'+index">
  71. </div>
  72. </el-carousel-item>
  73. </el-carousel>
  74. </div>
  75. <a :href="gg2.link" v-if="gg2.img" target="_blank">
  76. <img class="bottom" :src="gg2.img" alt="">
  77. </a>
  78. </div>
  79. </div>
  80. <div id="wk">
  81. <a :href="alink" target="_blank">
  82. <img src="@/assets/wk.png" alt="">
  83. <el-button type="primary" class="wkbtn" size="medium">点击进入</el-button>
  84. </a>
  85. </div>
  86. <el-dialog title="" v-if="videoDialogVisible" :visible.sync="videoDialogVisible" width="50%">
  87. <VideoDialog :url="videoUrl"></VideoDialog>
  88. </el-dialog>
  89. </div>
  90. </template>
  91. <script>
  92. /* eslint-disable */
  93. import { lunboList, carNewsHotList, guanggao, link, yuanyuzhouHotList, hotnewsConfig, hotnews } from '@/api/home.js'
  94. import Swiper from '@/components/swiper'
  95. import VideoDialog from '@/components/video'
  96. export default {
  97. name: 'home',
  98. data () {
  99. return {
  100. videoDialogVisible: false,
  101. videoUrl: '',
  102. carouselList: [],
  103. hotList: [],
  104. gg1: {},
  105. gg2: {},
  106. alink: '',
  107. daliay: [],
  108. display: 0,
  109. hotnews: {
  110. title: '这两款产品也将采用“CHN”的模式进行研发',
  111. img: '/hotnew.png'
  112. },
  113. hotnewsList: []
  114. }
  115. },
  116. components: { Swiper, VideoDialog },
  117. mounted () {
  118. this.gethotnewsConfig()
  119. this.getlunboList()
  120. this.getcarNewsHotList()
  121. this.getguanggao()
  122. this.getLink()
  123. this.getyuanyuzhouHotList()
  124. this.gethotlist()
  125. },
  126. methods: {
  127. routerToarticleDetails (value) {
  128. localStorage.setItem('article', value)
  129. this.$router.push({ path: '/articleDetails' })
  130. },
  131. routerTo () {
  132. this.$router.push({ path: '/articleList' })
  133. },
  134. routerToCar () {
  135. this.$router.push({ path: '/information' })
  136. },
  137. routerToMate () {
  138. this.$router.push({ path: '/metadaily' })
  139. },
  140. async getlunboList () {
  141. const { data: { message, data } } = await lunboList()
  142. if (message === 'success') {
  143. this.carouselList = data.list
  144. }
  145. },
  146. async getcarNewsHotList () {
  147. const { data: { message, data } } = await carNewsHotList()
  148. if (message === 'success') {
  149. this.hotList = data.list
  150. }
  151. },
  152. async getguanggao () {
  153. const { data: { message: ggm1, data: gg1 } } = await guanggao(1)
  154. const { data: { message: ggm2, data: gg2 } } = await guanggao(2)
  155. if (ggm1 === 'success' && ggm2 === 'success') {
  156. this.gg1 = {
  157. img: gg1.image,
  158. link: gg1.link
  159. }
  160. this.gg2 = {
  161. img: gg2.image,
  162. link: gg2.link
  163. }
  164. }
  165. },
  166. async getLink () {
  167. const { data: { message, data: { link: alink } } } = await link()
  168. if (message === 'success') {
  169. this.alink = alink
  170. }
  171. },
  172. async getyuanyuzhouHotList () {
  173. const { data: { message, data: { list } } } = await yuanyuzhouHotList()
  174. if (message === 'success') {
  175. this.daliay = list
  176. // for (const iter of list) {
  177. // this.daliay.left.push({
  178. // title: iter.news.title,
  179. // content: iter.news.detail
  180. // })
  181. // this.daliay.right.push({
  182. // img: iter.news.image,
  183. // video: iter.news.video
  184. // })
  185. // }
  186. }
  187. },
  188. async gethotnewsConfig () {
  189. const { data: { message, data: { display } } } = await hotnewsConfig()
  190. if (message === 'success') {
  191. this.display = display
  192. }
  193. },
  194. videoPlayer (item) {
  195. this.videoUrl = item.news.video
  196. this.videoDialogVisible = true
  197. // const id = document.getElementById(value)
  198. // const playid = document.getElementById(play)
  199. // if (id.paused) {
  200. // id.play()
  201. // playid.style.display = 'none'
  202. // } else {
  203. // id.pause()
  204. // playid.style.display = 'block'
  205. // }
  206. },
  207. async gethotlist () {
  208. const { data: { message, data } } = await hotnews()
  209. console.log(data)
  210. if (message === 'success') {
  211. this.hotnews.title = data.list[0].title
  212. this.hotnews.img = data.list[0].image
  213. this.hotnews.detail = data.list[0].detail
  214. for (let index = 1; index < data.list.length; index++) {
  215. this.hotnewsList.push({
  216. title: data.list[index].title,
  217. img: data.list[index].image,
  218. subtitle: data.list[index].subTitle,
  219. detail: data.list[index].detail
  220. })
  221. }
  222. }
  223. },
  224. }
  225. }
  226. </script>
  227. <style lang="scss" scoped>
  228. .el-carousel__item{
  229. background-size: 100%;
  230. background-repeat: no-repeat;
  231. display: flex;
  232. justify-content: center;
  233. align-items: flex-end;
  234. #txt {
  235. display: flex;
  236. flex-direction: column;
  237. margin-bottom: 50px;
  238. color: #FFFFFF;
  239. .title {
  240. font-size: 36px;
  241. font-weight: bold;
  242. text-align: center;
  243. margin-bottom: 15px;
  244. }
  245. .subtitle {
  246. font-size: 16px;
  247. font-weight: 400;
  248. opacity: 0.5;
  249. text-align: center;
  250. }
  251. }
  252. }
  253. #hot, #daliay {
  254. width: 100%;
  255. background: #E3E5EA;
  256. // display: flex;
  257. // align-items: center;
  258. // justify-content: center;
  259. padding: 25px 0;
  260. .content {
  261. width: 1200px;
  262. margin: 0 auto;
  263. .top, .bottom {
  264. width: 100%;
  265. }
  266. .hotnews {
  267. min-height: 100px;
  268. margin-top: 20px;
  269. min-height: 470px;
  270. background-color: #FFFFFF;
  271. display: flex;
  272. margin-bottom: 30px;
  273. background-image: url('../../assets/hotTopLeft.png');
  274. background-position: 101% 0; /* 调整这些值来改变显示的部分 */
  275. background-size: 30% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
  276. background-repeat: no-repeat;
  277. #imgtxt {
  278. width: 560px;
  279. position: relative;
  280. display: flex;
  281. justify-content: center;
  282. align-items: center;
  283. margin-left: 20px;
  284. img {
  285. width: 560px;
  286. }
  287. .newsTitle{
  288. position: absolute;
  289. bottom: 5%;
  290. left: 0;
  291. display: inline-block;
  292. font-size: 18px;
  293. font-weight: bold;
  294. color: #FFFFFF;
  295. line-height: 48px;
  296. width: 100%;
  297. background-color: #0000007e;
  298. }
  299. }
  300. #hottxt {
  301. display: flex;
  302. justify-content: space-around;
  303. flex-direction: column;
  304. align-items: center;
  305. flex: 1;
  306. margin-left: 35px;
  307. #htitle {
  308. display: flex;
  309. justify-content: space-between;
  310. align-items: center;
  311. width: 95%;
  312. .tle {
  313. z-index: 9;
  314. font-size: 26px;
  315. font-weight: bold;
  316. color: #00161C;
  317. line-height: 48px;
  318. display: inline-block;
  319. position: relative;
  320. text-decoration: none; /* 移除默认的下划线 */
  321. }
  322. .tle::after {
  323. content: '';
  324. position: absolute;
  325. left: -15px;
  326. bottom: 10px;
  327. width: 65%;
  328. height: 6px; /* 横线高度为文字高度的一半 */
  329. background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */
  330. z-index: -1;
  331. }
  332. .el-button {
  333. font-size: 16px;
  334. font-weight: bold;
  335. color: #07CAAF;
  336. line-height: 48px;
  337. cursor: pointer;
  338. z-index: 9999;
  339. }
  340. }
  341. }
  342. #hotList {
  343. height: 76%;
  344. display: flex;
  345. flex-wrap: wrap;
  346. justify-content: space-between;
  347. align-items: center;
  348. .list {
  349. z-index: 999;
  350. display: flex;
  351. flex-direction: column;
  352. align-items: center;
  353. justify-content: center;
  354. width: 150px;
  355. margin-right: 39px;
  356. img {
  357. width: 150px;
  358. height: 112px;
  359. border-radius: 10px;
  360. }
  361. a {
  362. font-size: 14px;
  363. font-weight: 400;
  364. color: #010101;
  365. margin-top: 14px;
  366. white-space: nowrap;
  367. overflow: hidden;
  368. text-overflow: ellipsis;
  369. width: 150px;
  370. // line-height: 48px;
  371. }
  372. }
  373. }
  374. .top {
  375. margin-bottom: 30px;
  376. background-color: #FFFFFF;
  377. display: flex;
  378. background-image: url('../../assets/hotTopLeft.png');
  379. background-position: 101% 0; /* 调整这些值来改变显示的部分 */
  380. background-size: 30% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
  381. background-repeat: no-repeat;
  382. #imgtxt {
  383. width: 560px;
  384. position: relative;
  385. display: flex;
  386. justify-content: center;
  387. align-items: center;
  388. margin-left: 20px;
  389. img {
  390. width: 560px;
  391. }
  392. .newsTitle{
  393. position: absolute;
  394. bottom: 5%;
  395. left: 0;
  396. display: inline-block;
  397. font-size: 18px;
  398. font-weight: bold;
  399. color: #FFFFFF;
  400. line-height: 48px;
  401. width: 100%;
  402. background-color: #0000007e;
  403. }
  404. }
  405. }
  406. }
  407. .top {
  408. // min-height: 470px;
  409. // background: black;
  410. // display: flex;
  411. // padding-bottom: 30px;
  412. :deep .el-carousel__button {
  413. width: 5px;
  414. border-radius: 50%;
  415. height: 5px;
  416. }
  417. .lr {
  418. // width: 50%;
  419. width: 650px;
  420. height: 100%;
  421. video {
  422. width: 100%;
  423. height: 100%;
  424. }
  425. }
  426. .videocar {
  427. position: relative;
  428. .videoImage{
  429. width: 650px;
  430. }
  431. .play {
  432. position: absolute;
  433. margin: 0 auto;
  434. top: 50%;
  435. margin-left: 45%;
  436. margin-top: -50px;
  437. }
  438. }
  439. .el-carousel {
  440. width: 100% !important;
  441. }
  442. #hottxt {
  443. background: #000000e6;
  444. background-image: url('../../assets/footer_left.png');
  445. background-position: 140% -165px; /* 调整这些值来改变显示的部分 */
  446. background-size: 140% 130%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
  447. background-repeat: no-repeat;
  448. display: flex;
  449. align-items: center;
  450. flex-direction: column;
  451. width: 550px;
  452. padding: 0 40px;
  453. :deep .el-carousel__indicators--horizontal {
  454. left: 90%;
  455. }
  456. .txtcontent {
  457. // height: 50% !important;
  458. width:100%;
  459. padding-top: 20px;
  460. .title {
  461. height: 26px;
  462. font-size: 24px;
  463. font-weight: bold;
  464. color: #FFFFFF;
  465. width: 100%;
  466. display: flex;
  467. text-align: left;
  468. margin-top: 30px;
  469. img {
  470. width: 60px;
  471. height: 28px;
  472. margin-right: 10px;
  473. vertical-align: middle;
  474. float: left;
  475. margin-top: 5px;
  476. }
  477. }
  478. p {
  479. text-align: left;
  480. width: auto;
  481. font-size: 16px;
  482. font-weight: 400;
  483. line-height: 30px;
  484. color: #ffffff83;
  485. margin-top: 25px;
  486. word-wrap: break-word;
  487. }
  488. }
  489. .btn {
  490. // height: 20%;
  491. width:100%;
  492. position: relative;
  493. text-align: left;
  494. .more {
  495. // position: absolute;
  496. // left: 0px;
  497. background: none !important;
  498. border: 1px solid #00F6BD;
  499. opacity: 0.8;
  500. border-radius: 4px;
  501. color: #00F6BD;
  502. margin-top: 30px;
  503. }
  504. }
  505. }
  506. }
  507. .bottom {
  508. margin-top: 30px;
  509. }
  510. }
  511. }
  512. #hot :deep .el-carousel__indicators--horizontal , #daliay :deep .el-carousel__indicators--horizontal {
  513. right: 50px;
  514. left: auto;
  515. bottom: 20px;
  516. }
  517. #daliay {
  518. background: #F2F4F8;
  519. padding-top: 60px;
  520. .logo {
  521. width: 165px;
  522. }
  523. .content {
  524. .top {
  525. flex-direction:column;
  526. }
  527. }
  528. .top {
  529. justify-content: space-between;
  530. position: relative;
  531. .yyzrbtxt, .yyzrbimg{
  532. height: 100%;
  533. width: 47%;
  534. .videoImage{
  535. width: 640px;
  536. }
  537. .txtcontent {
  538. height: 80% !important;
  539. text-align: left;
  540. margin-right: 50px;
  541. width: 90%;
  542. margin-top: 35px;
  543. .title {
  544. border-left: 7px solid #07CAAF;
  545. font-size: 36px;
  546. font-weight: bold;
  547. color: #0D1114;
  548. width: 90%;
  549. text-align: left;
  550. padding-left:15px;
  551. }
  552. .content {
  553. font-size: 16px;
  554. font-weight: 400;
  555. color: #0D1114;
  556. line-height: 30px;
  557. width: 100%;
  558. text-align: left;
  559. margin-top: 30px;
  560. }
  561. }
  562. .btn {
  563. width:100%;
  564. position: absolute;
  565. bottom: 90px;
  566. .more {
  567. position: absolute;
  568. left: 0px;
  569. background: none !important;
  570. border: 1px solid #000000;
  571. color: #0D1114;
  572. opacity: 0.8;
  573. border-radius: 4px;
  574. width: 80px;
  575. }
  576. }
  577. }
  578. .yyzrbimg {
  579. // width: 50% !important;
  580. position: relative;
  581. .play {
  582. position: absolute;
  583. margin: 0 auto;
  584. top: 50%;
  585. margin-left: 45%;
  586. margin-top: -50px;
  587. }
  588. }
  589. }
  590. }
  591. #wk {
  592. width: 100%;
  593. position: relative;
  594. img {
  595. width: 100%;
  596. }
  597. .el-button--primary {
  598. width: 200px;
  599. height: 60px;
  600. background: #07CAAF;
  601. border-radius: 12px;
  602. border: none;
  603. font-size: 18px;
  604. font-weight: 400;
  605. color: #FFFFFF;
  606. position: absolute;
  607. bottom: 10%;
  608. left: 50%;
  609. margin-left: -100px;
  610. }
  611. }
  612. </style>