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

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