元气智驾官网前端
25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.
 
 
 
 

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