元气智驾官网前端
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
 
 
 
 

479 righe
13 KiB

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