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

445 lines
12 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. <template v-for="(item, index) in hotList.left" >
  9. <el-carousel-item :key="item" v-if="item.split('.')[item.split('.').length - 1] === 'mp4'">
  10. <div class="lr videocar">
  11. <video :id="'video'+index" :src="item" @click="videoPlayer(`video${index}`, `play${index}`)"/>
  12. <img class="play" src="@/assets/play.png" @click="videoPlayer(`video${index}`, `play${index}`)" :id="'play'+index">
  13. </div>
  14. <div id="hottxt" class="lr">
  15. <div class="txtcontent">
  16. <div class="title">
  17. <img src="@/assets/tt.png">
  18. {{ hotList.right[index].title }}
  19. </div>
  20. <p class="content" v-html="hotList.right[index].content"></p>
  21. </div>
  22. <div class="btn">
  23. <el-button plain class="more" size="small" @click="routerToCar">MORE</el-button>
  24. </div>
  25. </div>
  26. </el-carousel-item>
  27. </template>
  28. </el-carousel>
  29. </div>
  30. <a :href="gg1.link" target="_blank">
  31. <div class="bottom" :style="{ backgroundImage: `url(${gg1.img})` }"/>
  32. </a>
  33. </div>
  34. </div>
  35. <div id="daliay">
  36. <div class="content">
  37. <div class="top">
  38. <img src="@/assets/rblogo.png" class="logo">
  39. <el-carousel :interval="5000" arrow="always" height="470px">
  40. <template v-for="(item, index) in daliay.left" >
  41. <el-carousel-item :key="index">
  42. <div class="yyzrbtxt lr">
  43. <div class="txtcontent">
  44. <div class="title">
  45. {{ item.title }}
  46. </div>
  47. <p class="content" v-html="item.content" />
  48. </div>
  49. <div class="btn">
  50. <el-button plain class="more" size="small" @click="routerToMate">MORE</el-button>
  51. </div>
  52. </div>
  53. <div class="yyzrbimg lr" >
  54. <video :id="'davideo'+index" :src="daliay.right[index].video" @click="videoPlayer(`davideo${index}`, `daplay${index}`)"/>
  55. <img class="play" src="@/assets/play.png" @click="videoPlayer(`davideo${index}`, `daplay${index}`)" :id="'daplay'+index">
  56. </div>
  57. </el-carousel-item>
  58. </template>
  59. </el-carousel>
  60. </div>
  61. <a :href="gg2.link" target="_blank">
  62. <div class="bottom" :style="{ backgroundImage: `url(${gg2.img})` }"/>
  63. </a>
  64. </div>
  65. </div>
  66. <div id="wk">
  67. <a :href="alink" target="_blank">
  68. <img src="@/assets/wk.png" alt="">
  69. <el-button type="primary" class="wkbtn" size="medium">点击进入</el-button>
  70. </a>
  71. </div>
  72. </div>
  73. </template>
  74. <script>
  75. /* eslint-disable */
  76. import { lunboList, carNewsHotList, guanggao, link, yuanyuzhouHotList, hotnewsConfig } from '@/api/home.js'
  77. import Swiper from '@/components/swiper'
  78. export default {
  79. name: 'home',
  80. data () {
  81. return {
  82. carouselList: [],
  83. hotList: {
  84. left: [],
  85. right: []
  86. },
  87. gg1: {},
  88. gg2: {},
  89. alink: '',
  90. daliay: {
  91. left: [],
  92. right: [],
  93. title: '',
  94. content: '',
  95. img: ''
  96. },
  97. display: 0
  98. }
  99. },
  100. components: { Swiper },
  101. mounted () {
  102. this.gethotnewsConfig()
  103. this.getlunboList()
  104. this.getcarNewsHotList()
  105. this.getguanggao()
  106. this.getLink()
  107. this.getyuanyuzhouHotList()
  108. },
  109. methods: {
  110. routerToCar () {
  111. this.$router.push({ path: '/information' })
  112. },
  113. routerToMate () {
  114. this.$router.push({ path: '/metadaily' })
  115. },
  116. async getlunboList () {
  117. const { data: { message, data } } = await lunboList()
  118. if (message === 'success') {
  119. this.carouselList = data.list
  120. }
  121. },
  122. async getcarNewsHotList () {
  123. const { data: { message, data } } = await carNewsHotList()
  124. if (message === 'success') {
  125. for (const iter of data.list) {
  126. const { image, video, title, detail } = iter.news
  127. this.hotList.left.push(video)
  128. this.hotList.right.push({
  129. title: title,
  130. content: detail,
  131. png: image
  132. })
  133. }
  134. }
  135. },
  136. async getguanggao () {
  137. const { data: { message: ggm1, data: gg1 } } = await guanggao(1)
  138. const { data: { message: ggm2, data: gg2 } } = await guanggao(2)
  139. if (ggm1 === 'success' && ggm2 === 'success') {
  140. this.gg1 = {
  141. img: gg1.image,
  142. link: gg1.link
  143. }
  144. this.gg2 = {
  145. img: gg2.image,
  146. link: gg2.link
  147. }
  148. }
  149. },
  150. async getLink () {
  151. const { data: { message, data: { link: alink } } } = await link()
  152. if (message === 'success') {
  153. this.alink = alink
  154. }
  155. },
  156. async getyuanyuzhouHotList () {
  157. const { data: { message, data: { list } } } = await yuanyuzhouHotList()
  158. if (message === 'success') {
  159. for (const iter of list) {
  160. this.daliay.left.push({
  161. title: iter.news.title,
  162. content: iter.news.detail
  163. })
  164. this.daliay.right.push({
  165. img: iter.news.image,
  166. video: iter.news.video
  167. })
  168. }
  169. }
  170. },
  171. async gethotnewsConfig () {
  172. const { data: { message, data: { display } } } = await hotnewsConfig()
  173. if (message === 'success') {
  174. this.display = display
  175. }
  176. },
  177. videoPlayer (value, play) {
  178. const id = document.getElementById(value)
  179. const playid = document.getElementById(play)
  180. if (id.paused) {
  181. id.play()
  182. playid.style.display = 'none'
  183. } else {
  184. id.pause()
  185. playid.style.display = 'block'
  186. }
  187. }
  188. }
  189. }
  190. </script>
  191. <style lang="scss" scoped>
  192. .el-carousel__item{
  193. background-size: 100%;
  194. background-repeat: no-repeat;
  195. display: flex;
  196. justify-content: center;
  197. align-items: flex-end;
  198. #txt {
  199. display: flex;
  200. flex-direction: column;
  201. margin-bottom: 50px;
  202. color: #FFFFFF;
  203. .title {
  204. font-size: 36px;
  205. font-weight: bold;
  206. text-align: center;
  207. margin-bottom: 15px;
  208. }
  209. .subtitle {
  210. font-size: 16px;
  211. font-weight: 400;
  212. opacity: 0.5;
  213. text-align: center;
  214. }
  215. }
  216. }
  217. #hot, #daliay {
  218. width: 100%;
  219. background: #E3E5EA;
  220. // display: flex;
  221. // align-items: center;
  222. // justify-content: center;
  223. padding: 25px 0;
  224. .content {
  225. width: 1200px;
  226. margin: 0 auto;
  227. // height: 90%;
  228. // display: flex;
  229. // flex-direction: column;
  230. // justify-content: space-between;
  231. .top, .bottom {
  232. width: 100%;
  233. }
  234. .top {
  235. // min-height: 470px;
  236. // background: black;
  237. // display: flex;
  238. // padding-bottom: 30px;
  239. :deep .el-carousel__button {
  240. width: 5px;
  241. border-radius: 50%;
  242. height: 5px;
  243. }
  244. .lr {
  245. // width: 50%;
  246. width: 650px;
  247. height: 100%;
  248. video {
  249. width: 100%;
  250. height: 100%;
  251. }
  252. }
  253. .videocar {
  254. position: relative;
  255. .play {
  256. position: absolute;
  257. margin: 0 auto;
  258. top: 50%;
  259. margin-left: 45%;
  260. margin-top: -50px;
  261. }
  262. }
  263. .el-carousel {
  264. width: 100% !important;
  265. }
  266. #hottxt {
  267. background: #000000e6;
  268. background-image: url('../../assets/footer_left.png');
  269. background-position: 140% -165px; /* 调整这些值来改变显示的部分 */
  270. background-size: 140% 130%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
  271. background-repeat: no-repeat;
  272. display: flex;
  273. align-items: center;
  274. flex-direction: column;
  275. width: 550px;
  276. padding: 0 40px;
  277. :deep .el-carousel__indicators--horizontal {
  278. left: 90%;
  279. }
  280. .txtcontent {
  281. // height: 50% !important;
  282. width:100%;
  283. padding-top: 20px;
  284. .title {
  285. height: 26px;
  286. font-size: 24px;
  287. font-weight: bold;
  288. color: #FFFFFF;
  289. width: 100%;
  290. display: flex;
  291. text-align: left;
  292. margin-top: 30px;
  293. img {
  294. width: 60px;
  295. height: 28px;
  296. margin-right: 10px;
  297. vertical-align: middle;
  298. float: left;
  299. margin-top: 5px;
  300. }
  301. }
  302. p {
  303. text-align: left;
  304. width: auto;
  305. font-size: 16px;
  306. font-weight: 400;
  307. line-height: 30px;
  308. color: #ffffff83;
  309. margin-top: 25px;
  310. word-wrap: break-word;
  311. }
  312. }
  313. .btn {
  314. // height: 20%;
  315. width:100%;
  316. position: relative;
  317. text-align: left;
  318. .more {
  319. // position: absolute;
  320. // left: 0px;
  321. background: none !important;
  322. border: 1px solid #00F6BD;
  323. opacity: 0.8;
  324. border-radius: 4px;
  325. color: #00F6BD;
  326. margin-top: 30px;
  327. }
  328. }
  329. }
  330. }
  331. .bottom {
  332. min-height: 120px;
  333. background-image: url('../../assets/bottom.png');
  334. background-size: 100% 100%;
  335. margin-top: 30px;
  336. }
  337. }
  338. }
  339. #hot :deep .el-carousel__indicators--horizontal {
  340. right: 50px;
  341. left: auto;
  342. bottom: 20px;
  343. }
  344. #daliay {
  345. background: #F2F4F8;
  346. padding-top: 60px;
  347. .logo {
  348. width: 165px;
  349. }
  350. .content {
  351. .top {
  352. flex-direction:column;
  353. }
  354. }
  355. .top {
  356. justify-content: space-between;
  357. position: relative;
  358. .yyzrbtxt, .yyzrbimg{
  359. height: 100%;
  360. width: 47%;
  361. .txtcontent {
  362. height: 80% !important;
  363. text-align: left;
  364. margin-right: 50px;
  365. width: 90%;
  366. margin-top: 35px;
  367. .title {
  368. border-left: 7px solid #07CAAF;
  369. font-size: 36px;
  370. font-weight: bold;
  371. color: #0D1114;
  372. width: 90%;
  373. text-align: left;
  374. padding-left:15px;
  375. }
  376. .content {
  377. font-size: 16px;
  378. font-weight: 400;
  379. color: #0D1114;
  380. line-height: 30px;
  381. width: 100%;
  382. text-align: left;
  383. margin-top: 30px;
  384. }
  385. }
  386. .btn {
  387. width:100%;
  388. position: absolute;
  389. bottom: 90px;
  390. .more {
  391. position: absolute;
  392. left: 0px;
  393. background: none !important;
  394. border: 1px solid #000000;
  395. color: #0D1114;
  396. opacity: 0.8;
  397. border-radius: 4px;
  398. width: 80px;
  399. }
  400. }
  401. }
  402. .yyzrbimg {
  403. // width: 50% !important;
  404. position: relative;
  405. .play {
  406. position: absolute;
  407. margin: 0 auto;
  408. top: 50%;
  409. margin-left: 45%;
  410. margin-top: -50px;
  411. }
  412. }
  413. }
  414. }
  415. #wk {
  416. width: 100%;
  417. position: relative;
  418. img {
  419. width: 100%;
  420. }
  421. .el-button--primary {
  422. width: 200px;
  423. height: 60px;
  424. background: #07CAAF;
  425. border-radius: 12px;
  426. border: none;
  427. font-size: 18px;
  428. font-weight: 400;
  429. color: #FFFFFF;
  430. position: absolute;
  431. bottom: 10%;
  432. left: 50%;
  433. margin-left: -100px;
  434. }
  435. }
  436. </style>