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

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