元气智驾官网前端
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 
 

500 linhas
14 KiB

  1. <template>
  2. <div>
  3. <Swiper :banner-array="carouselList" />
  4. <div id="hot">
  5. <div class="content">
  6. <div class="top" v-if="display">
  7. <div id="imgtxt" @click="routerToarticleDetails(hotnews.detail)">
  8. <img :src="hotnews.img">
  9. <a class="newsTitle">{{ hotnews.title }}</a>
  10. </div>
  11. <div id="hottxt">
  12. <div id="htitle">
  13. <a class="tle">汽车文章</a>
  14. <el-button type="text" @click="routerTo">MORE+</el-button>
  15. </div>
  16. <div id="hotList">
  17. <div class="list" v-for="(item, index) in hotnewsList" :key="index" @click="routerToarticleDetails(item.detail)">
  18. <img :src="item.img">
  19. <a>{{ item.title }}</a>
  20. </div>
  21. </div>
  22. </div>
  23. </div>
  24. <a :href="gg1.link" target="_blank">
  25. <div class="bottom" :style="{ backgroundImage: `url(${gg1.img})` }"/>
  26. </a>
  27. </div>
  28. </div>
  29. <div id="daliay">
  30. <div class="content">
  31. <div class="top">
  32. <el-carousel :interval="4000" type="card" height="200px">
  33. <el-carousel-item v-for="(item, index) in carvideoList" :key="index">
  34. <img :src="item.img">
  35. <a>{{ item.title }}</a>
  36. </el-carousel-item>
  37. </el-carousel>
  38. </div>
  39. <a :href="gg2.link" target="_blank">
  40. <div class="bottom" :style="{ backgroundImage: `url(${gg2.img})` }"/>
  41. </a>
  42. </div>
  43. </div>
  44. <div id="wk">
  45. <div class="content">
  46. <div class="htitle">
  47. <a class="tle">热点新闻</a>
  48. <el-button type="text" @click="routerTo">MORE+</el-button>
  49. </div>
  50. <div id="hotList">
  51. <div class="list" v-for="(item, index) in carList" :key="index" @click="routerToarticleDetails(item.detail)">
  52. <img :src="item.img">
  53. <div class="txt">
  54. <a class="title">{{ item.title }}</a>
  55. <a class="subtitle">{{ item.subtitle }}</a>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. </template>
  63. <script>
  64. import Swiper from '@/components/swiper'
  65. import { lunboList, hotNewsConfig, guanggao, hotlist, videoList } from '@/api/car.js'
  66. export default {
  67. name: 'information',
  68. data () {
  69. return {
  70. carouselList: [
  71. // { src: '/car1.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' },
  72. // { src: '/car2.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' }
  73. ],
  74. hotnews: {
  75. title: '这两款产品也将采用“CHN”的模式进行研发',
  76. img: '/hotnew.png'
  77. },
  78. hotnewsList: [],
  79. carvideoList: [],
  80. carList: [],
  81. display: 1,
  82. gg1: {},
  83. gg2: {}
  84. }
  85. },
  86. components: {
  87. Swiper
  88. },
  89. mounted () {
  90. this.gethotnewsConfig()
  91. this.getlunboList()
  92. this.getguanggao()
  93. this.gethotlist()
  94. this.getvideoList()
  95. },
  96. methods: {
  97. routerToarticleDetails (value) {
  98. localStorage.setItem('article', value)
  99. this.$router.push({ path: '/articleDetails' })
  100. },
  101. routerTo () {
  102. this.$router.push({ path: '/articleList' })
  103. },
  104. async getlunboList () {
  105. const { data: { message, data } } = await lunboList()
  106. if (message === 'success') {
  107. this.carouselList = data.list
  108. }
  109. },
  110. async gethotnewsConfig () {
  111. const { data: { message, data: { display } } } = await hotNewsConfig()
  112. if (message === 'success') {
  113. this.display = display
  114. }
  115. },
  116. async getguanggao () {
  117. const { data: { message: ggm1, data: gg1 } } = await guanggao(1)
  118. const { data: { message: ggm2, data: gg2 } } = await guanggao(2)
  119. if (ggm1 === 'success' && ggm2 === 'success') {
  120. this.gg1 = {
  121. img: gg1.image,
  122. link: gg1.link
  123. }
  124. this.gg2 = {
  125. img: gg2.image,
  126. link: gg2.link
  127. }
  128. }
  129. },
  130. async gethotlist () {
  131. const { data: { message, data } } = await hotlist()
  132. if (message === 'success') {
  133. this.hotnews.title = data.list[0].title
  134. this.hotnews.img = data.list[0].image
  135. this.hotnews.detail = data.list[0].detail
  136. for (let index = 1; index < data.list.length; index++) {
  137. this.hotnewsList.push({
  138. title: data.list[index].title,
  139. img: data.list[index].image,
  140. subtitle: data.list[index].subTitle,
  141. detail: data.list[index].detail
  142. })
  143. this.carList.push({
  144. title: data.list[index].title,
  145. img: data.list[index].image,
  146. subtitle: data.list[index].subTitle,
  147. detail: data.list[index].detail
  148. })
  149. }
  150. }
  151. },
  152. async getvideoList () {
  153. const { data: { message, data } } = await videoList()
  154. if (message === 'success') {
  155. for (const iter of data.list) {
  156. this.carvideoList.push({
  157. title: iter.title,
  158. img: iter.image
  159. })
  160. }
  161. }
  162. }
  163. }
  164. }
  165. </script>
  166. <style lang="scss" scoped>
  167. .el-carousel__item{
  168. background-size: 100%;
  169. background-repeat: no-repeat;
  170. display: flex;
  171. justify-content: center;
  172. align-items: flex-end;
  173. #txt {
  174. display: flex;
  175. flex-direction: column;
  176. margin-bottom: 50px;
  177. color: #FFFFFF;
  178. .title {
  179. font-size: 36px;
  180. font-weight: bold;
  181. text-align: center;
  182. margin-bottom: 15px;
  183. }
  184. .subtitle {
  185. font-size: 16px;
  186. font-weight: 400;
  187. opacity: 0.5;
  188. text-align: center;
  189. }
  190. }
  191. }
  192. #hot, #daliay, #wk {
  193. width: 100%;
  194. background: #E3E5EA;
  195. display: flex;
  196. align-items: center;
  197. flex-direction: column;
  198. justify-content: center;
  199. padding-bottom: 30px;
  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-color: #FFFFFF;
  212. display: flex;
  213. #imgtxt {
  214. width: 560px;
  215. position: relative;
  216. display: flex;
  217. justify-content: center;
  218. align-items: center;
  219. img {
  220. width: 560px;
  221. }
  222. .newsTitle{
  223. position: absolute;
  224. bottom: 5%;
  225. left: 5%;
  226. display: inline-block;
  227. font-size: 18px;
  228. font-weight: bold;
  229. color: #FFFFFF;
  230. line-height: 48px;
  231. width: 90%;
  232. background-color: #0000007e;
  233. }
  234. }
  235. #hottxt {
  236. display: flex;
  237. justify-content: space-around;
  238. flex-direction: column;
  239. align-items: center;
  240. flex: 1;
  241. margin-left: 35px;
  242. #htitle {
  243. display: flex;
  244. justify-content: space-between;
  245. align-items: center;
  246. width: 95%;
  247. .tle {
  248. z-index: 9;
  249. font-size: 26px;
  250. font-weight: bold;
  251. color: #00161C;
  252. line-height: 48px;
  253. display: inline-block;
  254. position: relative;
  255. text-decoration: none; /* 移除默认的下划线 */
  256. }
  257. .tle::after {
  258. content: '';
  259. position: absolute;
  260. left: -15px;
  261. bottom: 10px;
  262. width: 65%;
  263. height: 6px; /* 横线高度为文字高度的一半 */
  264. background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */
  265. z-index: -1;
  266. }
  267. .el-button {
  268. font-size: 16px;
  269. font-weight: bold;
  270. color: #07CAAF;
  271. line-height: 48px;
  272. cursor: pointer;
  273. z-index: 9999;
  274. }
  275. }
  276. }
  277. #hotList {
  278. height: 76%;
  279. display: flex;
  280. flex-wrap: wrap;
  281. justify-content: space-between;
  282. align-items: center;
  283. .list {
  284. z-index: 999;
  285. display: flex;
  286. flex-direction: column;
  287. align-items: center;
  288. justify-content: center;
  289. width: 150px;
  290. margin-right: 39px;
  291. img {
  292. width: 150px;
  293. height: 112px;
  294. border-radius: 10px;
  295. }
  296. a {
  297. font-size: 14px;
  298. font-weight: 400;
  299. color: #010101;
  300. margin-top: 14px;
  301. white-space: nowrap;
  302. overflow: hidden;
  303. text-overflow: ellipsis;
  304. width: 150px;
  305. // line-height: 48px;
  306. }
  307. }
  308. }
  309. }
  310. .bottom {
  311. min-height: 120px;
  312. background-image: url('../../assets/bottom.png');
  313. background-size: 100% 100%;
  314. }
  315. }
  316. }
  317. #hot {
  318. min-height: 100px;
  319. .content {
  320. margin-top: 20px;
  321. .top {
  322. margin-bottom: 30px;
  323. background-color: #FFFFFF;
  324. display: flex;
  325. background-image: url('../../assets/hotTopLeft.png');
  326. background-position: 101% 0; /* 调整这些值来改变显示的部分 */
  327. background-size: 30% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
  328. background-repeat: no-repeat;
  329. #imgtxt {
  330. width: 560px;
  331. position: relative;
  332. display: flex;
  333. justify-content: center;
  334. align-items: center;
  335. margin-left: 20px;
  336. img {
  337. width: 560px;
  338. }
  339. .newsTitle{
  340. position: absolute;
  341. bottom: 5%;
  342. left: 0;
  343. display: inline-block;
  344. font-size: 18px;
  345. font-weight: bold;
  346. color: #FFFFFF;
  347. line-height: 48px;
  348. width: 100%;
  349. background-color: #0000007e;
  350. }
  351. }
  352. }
  353. }
  354. }
  355. #daliay {
  356. height: 625px;
  357. .top {
  358. // justify-content: space-between;
  359. background-color: #00000000 !important;
  360. .el-carousel {
  361. width: 100%;
  362. height: 100% !important;
  363. background-color: #00000000 !important;
  364. :deep .el-carousel__container {
  365. background-color: #00000000 !important;
  366. height: 100% !important;
  367. }
  368. }
  369. :deep.el-carousel__mask {
  370. background-color: #00000000 !important;
  371. }
  372. :deep .el-carousel__indicators--outside, .el-carousel__indicators--horizontal {
  373. display: none;
  374. }
  375. .el-carousel__item {
  376. display: flex;
  377. flex-direction: column;
  378. // justify-content: center;
  379. align-items: center;
  380. img {
  381. width: 800px;
  382. height: 80%;
  383. }
  384. a {
  385. font-size: 24px;
  386. font-weight: bold;
  387. color: #00161C;
  388. line-height: 48px;
  389. }
  390. }
  391. }
  392. }
  393. #wk {
  394. padding-bottom: 200px;
  395. .content {
  396. background-color: #FFFFFF;
  397. display: flex;
  398. align-items: center;
  399. position: relative;
  400. .htitle {
  401. display: flex;
  402. justify-content: space-between;
  403. align-items: center;
  404. width: 93%;
  405. margin-bottom: 20px;
  406. .tle {
  407. z-index: 9;
  408. font-size: 26px;
  409. font-weight: bold;
  410. color: #00161C;
  411. line-height: 48px;
  412. display: inline-block;
  413. position: relative;
  414. text-decoration: none; /* 移除默认的下划线 */
  415. }
  416. .tle::after {
  417. content: '';
  418. position: absolute;
  419. left: -15px;
  420. bottom: 10px;
  421. width: 65%;
  422. height: 6px; /* 横线高度为文字高度的一半 */
  423. background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */
  424. z-index: -1;
  425. }
  426. .el-button {
  427. font-size: 16px;
  428. font-weight: bold;
  429. color: #07CAAF;
  430. line-height: 48px;
  431. z-index: 999;
  432. }
  433. }
  434. #hotList {
  435. display: flex;
  436. flex-wrap: wrap;
  437. align-items: center;
  438. .list {
  439. z-index: 999;
  440. display: flex;
  441. justify-content: center;
  442. width: 500px;
  443. margin: 0 40px 34px 33px;
  444. .txt {
  445. display: flex;
  446. flex-direction: column;
  447. margin-left: 22px;
  448. align-items: center;
  449. width: 60%;
  450. .title {
  451. text-align: left;
  452. width: 100%;
  453. font-size: 18px;
  454. font-weight: bold;
  455. color: #010101;
  456. }
  457. .subtitle{
  458. display: inline-block;
  459. text-align: left;
  460. width: 100%;
  461. font-size: 14px;
  462. font-weight: 400;
  463. color: #000000;
  464. line-height: 24px;
  465. margin-top: 10px;
  466. display: -webkit-box; /* Safari */
  467. -webkit-line-clamp: 3; /* Safari and Chrome */
  468. -webkit-box-orient: vertical; /* Safari and Chrome */
  469. overflow: hidden;
  470. }
  471. }
  472. img {
  473. width: 200px;
  474. height: 150px;
  475. border-radius: 10px;
  476. }
  477. }
  478. }
  479. }
  480. .content::after {
  481. content: '';
  482. width: 100%;
  483. height: 100%;
  484. position: absolute;
  485. background-image: url('../../assets/cartxt.png');
  486. background-position: 101% 0; /* 调整这些值来改变显示的部分 */
  487. background-size: 12% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
  488. background-repeat: no-repeat;
  489. }
  490. }
  491. </style>