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

485 lines
12 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" :type="1"/>
  7. <a :href="gg1.link" v-if="gg1.image" @click="bannerCk(gg1)">
  8. <img class="bottom" :src="gg1.image" 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="490px" arrow="always" v-model="currentIndex" @change="handleChange" ref="carousel">
  16. <el-carousel-item v-for="(item, index) in carvideoList" :key="index">
  17. <div class="carvideo" :class="currentIndex === index ? 'carvideoShadow' : ''">
  18. <img class="videoImage" :src="item.image" />
  19. <img class="play" src="@/assets/play.png" @click="videoPlayer(item)">
  20. </div>
  21. <a v-if="currentIndex === index">{{ item.title }}</a>
  22. </el-carousel-item>
  23. </el-carousel>
  24. </div>
  25. </div>
  26. </div>
  27. <a :href="gg2.link" v-if="gg2.image" @click="bannerCk(gg2)">class="banner">
  28. <img :src="gg2.image" alt="">
  29. </a>
  30. <div id="wk">
  31. <div class="content">
  32. <div class="htitle">
  33. <a class="tle">汽车文章</a>
  34. <el-button type="text" class="more" @click="routerTo">MORE+</el-button>
  35. </div>
  36. <div id="hotList">
  37. <div class="list" v-for="(item, index) in carList" :key="index" @click="detail(item)">
  38. <img :src="item.image">
  39. <div class="txt">
  40. <a class="title">{{ item.title }}</a>
  41. <a class="subtitle">{{ item.detailText }}</a>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. </div>
  47. <el-dialog title="" v-if="videoDialogVisible" :visible.sync="videoDialogVisible" :lock-scroll="false" :append-to-body="true" width="50%">
  48. <VideoDialog :url="videoUrl" :lock-scroll="false" :append-to-body="true"></VideoDialog>
  49. </el-dialog>
  50. </div>
  51. </template>
  52. <script>
  53. /* eslint-disable */
  54. import Swiper from '@/components/swiper'
  55. import { lunboList, hotNewsConfig, guanggao, hotlist, videoList, carArticle } from '@/api/car.js'
  56. import VideoDialog from '@/components/video'
  57. import HotNews from '@/components/hotNews'
  58. export default {
  59. name: 'information',
  60. data () {
  61. return {
  62. carouselList: [],
  63. hotnews: {},
  64. hotnewsList: [],
  65. carvideoList: [],
  66. carList: [],
  67. display: 1,
  68. gg1: {},
  69. gg2: {},
  70. videoDialogVisible: '',
  71. videoUrl: '',
  72. currentIndex: 0
  73. }
  74. },
  75. components: {
  76. Swiper,
  77. VideoDialog,
  78. HotNews
  79. },
  80. mounted () {
  81. this.gethotnewsConfig()
  82. this.getlunboList()
  83. this.getguanggao()
  84. this.gethotlist()
  85. this.getvideoList()
  86. this.getCarArticle()
  87. },
  88. methods: {
  89. handleChange(newIndex) {
  90. this.currentIndex = newIndex;
  91. },
  92. detail (item) {
  93. this.$router.push({ path: '/articleDetails', query: {id : item.id } })
  94. },
  95. routerTo () {
  96. this.$router.push({ path: '/articleList', query: {type : 2 } })
  97. },
  98. async getlunboList () {
  99. const { data: { code, data } } = await lunboList()
  100. if (code === 200) {
  101. this.carouselList = data.list
  102. }
  103. },
  104. async gethotnewsConfig () {
  105. const { data: { code, data: { display } } } = await hotNewsConfig()
  106. if (code === 200) {
  107. this.display = display
  108. }
  109. },
  110. async getguanggao () {
  111. const { data: { code: ggm1, data: gg1 } } = await guanggao(1)
  112. const { data: { code: ggm2, data: gg2 } } = await guanggao(2)
  113. if (ggm1 === 200 && ggm2 === 200) {
  114. this.gg1 = gg1
  115. this.gg2 = gg2
  116. }
  117. },
  118. bannerCk(item) {
  119. item.newOpen === 1 ? window.open(item.link) : window.location.href = item.link
  120. },
  121. async gethotlist () {
  122. const { data: { code, data } } = await hotlist()
  123. if (code === 200) {
  124. this.hotnewsList = data.list
  125. }
  126. },
  127. async getvideoList () {
  128. const { data: { code, data } } = await videoList()
  129. if (code === 200) {
  130. this.carvideoList = data.list
  131. }
  132. },
  133. videoPlayer (item) {
  134. this.videoUrl = item.link
  135. this.videoDialogVisible = true
  136. },
  137. async getCarArticle() {
  138. const { data: { code, data } } = await carArticle()
  139. if (code === 200) {
  140. this.carList = data.list
  141. }
  142. }
  143. }
  144. }
  145. </script>
  146. <style lang="scss" scoped>
  147. .el-carousel__item{
  148. background-size: 100%;
  149. background-repeat: no-repeat;
  150. display: flex;
  151. justify-content: center;
  152. align-items: flex-end;
  153. #txt {
  154. display: flex;
  155. flex-direction: column;
  156. margin-bottom: 50px;
  157. color: #FFFFFF;
  158. .title {
  159. font-size: 36px;
  160. font-weight: bold;
  161. text-align: center;
  162. margin-bottom: 15px;
  163. }
  164. .subtitle {
  165. font-size: 16px;
  166. font-weight: 400;
  167. opacity: 0.5;
  168. text-align: center;
  169. }
  170. }
  171. }
  172. #hot, #daliay, #wk {
  173. width: 100%;
  174. background: #E3E5EA;
  175. display: flex;
  176. align-items: center;
  177. flex-direction: column;
  178. justify-content: center;
  179. padding-bottom: 30px;
  180. .content {
  181. width: 1200px;
  182. height: 90%;
  183. display: flex;
  184. flex-direction: column;
  185. justify-content: space-between;
  186. .top, .bottom {
  187. width: 100%;
  188. }
  189. .top {
  190. min-height: 410px;
  191. background-color: #FFFFFF;
  192. display: flex;
  193. #imgtxt {
  194. width: 560px;
  195. position: relative;
  196. display: flex;
  197. justify-content: center;
  198. align-items: center;
  199. img {
  200. width: 560px;
  201. }
  202. .newsTitle{
  203. position: absolute;
  204. bottom: 5%;
  205. left: 5%;
  206. display: inline-block;
  207. font-size: 18px;
  208. font-weight: bold;
  209. color: #FFFFFF;
  210. line-height: 80px;
  211. width: 90%;
  212. background-color: #0000007e;
  213. }
  214. }
  215. #hottxt {
  216. display: flex;
  217. justify-content: space-around;
  218. flex-direction: column;
  219. align-items: center;
  220. flex: 1;
  221. margin-left: 35px;
  222. #htitle {
  223. display: flex;
  224. justify-content: space-between;
  225. align-items: center;
  226. width: 95%;
  227. .tle {
  228. z-index: 9;
  229. font-size: 26px;
  230. font-weight: bold;
  231. color: #00161C;
  232. line-height: 48px;
  233. display: inline-block;
  234. position: relative;
  235. text-decoration: none; /* 移除默认的下划线 */
  236. }
  237. .tle::after {
  238. content: '';
  239. position: absolute;
  240. left: -15px;
  241. bottom: 10px;
  242. width: 65%;
  243. height: 6px; /* 横线高度为文字高度的一半 */
  244. background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */
  245. z-index: -1;
  246. }
  247. .el-button {
  248. font-size: 16px;
  249. font-weight: bold;
  250. color: #07CAAF;
  251. line-height: 48px;
  252. cursor: pointer;
  253. z-index: 9999;
  254. }
  255. .more:hover {
  256. border: 1px solid #088669;
  257. color: #088669;
  258. }
  259. }
  260. }
  261. #hotList {
  262. height: 76%;
  263. display: flex;
  264. flex-wrap: wrap;
  265. justify-content: space-between;
  266. align-items: center;
  267. .list {
  268. z-index: 999;
  269. display: flex;
  270. flex-direction: column;
  271. align-items: center;
  272. justify-content: center;
  273. width: 150px;
  274. margin-right: 39px;
  275. img {
  276. width: 150px;
  277. height: 112px;
  278. border-radius: 10px;
  279. }
  280. a {
  281. font-size: 14px;
  282. font-weight: 400;
  283. color: #010101;
  284. margin-top: 14px;
  285. white-space: nowrap;
  286. overflow: hidden;
  287. text-overflow: ellipsis;
  288. width: 150px;
  289. // line-height: 48px;
  290. }
  291. }
  292. }
  293. }
  294. }
  295. }
  296. #hot {
  297. min-height: 100px;
  298. .content {
  299. margin-top: 20px;
  300. }
  301. }
  302. #daliay {
  303. .content {
  304. height: 410px;
  305. }
  306. .top {
  307. // justify-content: space-between;
  308. background-color: #00000000 !important;
  309. .el-carousel {
  310. width: 100%;
  311. height: 100% !important;
  312. background-color: #00000000 !important;
  313. :deep .el-carousel__container {
  314. background-color: #00000000 !important;
  315. height: 100% !important;
  316. }
  317. }
  318. :deep .el-carousel__indicators--outside, .el-carousel__indicators--horizontal {
  319. display: none;
  320. }
  321. :deep .el-carousel__mask {
  322. background-color: #00000000 !important;
  323. }
  324. :deep .el-carousel__arrow--left {
  325. left: 280px;
  326. }
  327. :deep .el-carousel__arrow--right {
  328. right: 280px;
  329. }
  330. :deep .el-carousel__arrow {
  331. width: 40px;
  332. height: 40px;
  333. border-radius: 0%;
  334. background-color: #ffffffcc;
  335. color:#07CAAF;
  336. font-size: 20px;
  337. font-weight: bold;
  338. border-radius: 3px;
  339. top: 43%;
  340. }
  341. .el-carousel__item {
  342. display: flex;
  343. flex-direction: column;
  344. align-items: center;
  345. .carvideoShadow{
  346. box-shadow: 0 2px 12px 0 #666;
  347. margin: 12px;
  348. }
  349. .carvideo {
  350. position: relative;
  351. position: relative;
  352. border-radius: 15px;
  353. .play {
  354. position: absolute;
  355. margin: 0 auto;
  356. top: 50%;
  357. margin-left: 45%;
  358. margin-top: -50px;
  359. }
  360. .videoImage {
  361. width: 100%;
  362. border-radius: 10px;
  363. }
  364. }
  365. a {
  366. font-size: 24px;
  367. font-weight: bold;
  368. color: #00161C;
  369. line-height: 48px;
  370. }
  371. }
  372. }
  373. }
  374. #wk {
  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. .banner{
  472. margin: 0 auto;
  473. margin-bottom: 30px;
  474. display: block;
  475. width: 1200px;
  476. }
  477. </style>