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

552 line
14 KiB

  1. <template>
  2. <div class="metadaily">
  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. </div>
  25. </div>
  26. <div class="gg" v-if="gg1.img" >
  27. <a :href="gg1.link" target="_blank">
  28. <img :src="gg1.img" alt="">
  29. </a>
  30. </div>
  31. <div id="daliay">
  32. <div class="content">
  33. <!-- <div class="top">
  34. </div> -->
  35. <div class="htitle">
  36. <a class="tle">资讯</a>
  37. <!-- <div class="item">
  38. <a v-for="item in information" :key="item" @click="changenews(item)" :class="{ clk: informationitem === item }">{{ item }}</a>
  39. </div> -->
  40. <el-button type="text" @click="routerTo">MORE+</el-button>
  41. </div>
  42. <div id="hotList">
  43. <div class="list" v-for="(item, index) in zixun" :key="index" @click="routerToarticleDetails(item.detail)">
  44. <img :src="item.img">
  45. <div class="txt">
  46. <a class="title">{{ item.title }}</a>
  47. <a class="subtitle">{{ item.subtitle }}</a>
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. <div class="gg" v-if="gg2.img">
  54. <a :href="gg2.link" target="_blank">
  55. <img :src="gg2.img" alt="">
  56. </a>
  57. </div>
  58. <div id="wk">
  59. <div class="content">
  60. <div class="htitle">
  61. <a class="tle">深度</a>
  62. <div class="item">
  63. <a v-for="item in depth" :key="item" @click="changedepth(item)" :class="{ clk: depthitem === item }">{{ item }}</a>
  64. </div>
  65. <el-button type="text" @click="routerTo">MORE+</el-button>
  66. </div>
  67. <div id="hotList">
  68. <div class="list" v-for="(item, index) in shendu" :key="index" @click="routerToarticleDetails(item.detail)">
  69. <img :src="item.img">
  70. <div class="txt">
  71. <a class="title">{{ item.title }}</a>
  72. <a class="subtitle">{{ item.subtitle }}</a>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. </template>
  80. <script>
  81. import Swiper from '@/components/swiper'
  82. import { guanggao, lunboList, hotNewsConfig, shendu, zixun, hotnews } from '@/api/metadaily.js'
  83. export default {
  84. name: 'metadaily',
  85. data () {
  86. return {
  87. information: ['XR', 'Web3', 'Ai'],
  88. informationitem: 'XR',
  89. depth: ['XR', 'Web3', 'Ai'],
  90. depthitem: 'XR',
  91. carouselList: [],
  92. hotnews: {},
  93. hotnewsList: [],
  94. shendu: [],
  95. zixun: [],
  96. gg1: {},
  97. gg2: {},
  98. display: 1
  99. }
  100. },
  101. components: {
  102. Swiper
  103. },
  104. mounted () {
  105. this.gethotnewsConfig()
  106. this.getguanggao()
  107. this.getlunboList()
  108. this.gethotnews()
  109. this.getshendu()
  110. this.getzixun()
  111. },
  112. methods: {
  113. routerToarticleDetails (value) {
  114. localStorage.setItem('article', value)
  115. this.$router.push({ path: '/articleDetails' })
  116. },
  117. routerTo () {
  118. this.$router.push({ path: '/articleList' })
  119. },
  120. changenews (item) {
  121. this.informationitem = item
  122. this.getzixun()
  123. },
  124. changedepth (item) {
  125. this.depthitem = item
  126. this.getshendu()
  127. },
  128. async getguanggao () {
  129. const { data: { message: ggm1, data: gg1 } } = await guanggao(1)
  130. const { data: { message: ggm2, data: gg2 } } = await guanggao(2)
  131. if (ggm1 === 'success' && ggm2 === 'success') {
  132. this.gg1 = {
  133. img: gg1.image,
  134. link: gg1.link
  135. }
  136. this.gg2 = {
  137. img: gg2.image,
  138. link: gg2.link
  139. }
  140. }
  141. },
  142. async getlunboList () {
  143. const { data: { message, data } } = await lunboList()
  144. if (message === 'success') {
  145. this.carouselList = data.list
  146. }
  147. },
  148. async gethotnewsConfig () {
  149. const { data: { message, data: { display } } } = await hotNewsConfig()
  150. if (message === 'success') {
  151. this.display = display
  152. }
  153. },
  154. async gethotnews () {
  155. this.hotnewsList = []
  156. const { data: { message, data } } = await hotnews()
  157. if (message === 'success') {
  158. this.hotnews = {
  159. title: data.list[0].title,
  160. img: data.list[0].image,
  161. detail: data.list[0].detail
  162. }
  163. for (let index = 1; index < data.list.length; index++) {
  164. console.log(data.list[index])
  165. this.hotnewsList.push({
  166. title: data.list[index].title,
  167. img: data.list[index].image,
  168. detail: data.list[index].detail
  169. })
  170. }
  171. }
  172. },
  173. async getshendu () {
  174. this.shendu = []
  175. const { data: { message, data } } = await shendu(1, 10, this.depthitem)
  176. if (message === 'success') {
  177. for (const iter of data.list) {
  178. this.shendu.push({
  179. title: iter.title,
  180. img: iter.image,
  181. subtitle: iter.subTitle,
  182. detail: iter.detail
  183. })
  184. }
  185. }
  186. },
  187. async getzixun () {
  188. this.zixun = []
  189. const { data: { message, data } } = await zixun(1, 10, this.informationitem)
  190. if (message === 'success') {
  191. for (const iter of data.list) {
  192. this.zixun.push({
  193. title: iter.title,
  194. img: iter.image,
  195. subtitle: iter.subTitle,
  196. detail: iter.detail
  197. })
  198. }
  199. }
  200. }
  201. }
  202. }
  203. </script>
  204. <style lang="scss" scoped>
  205. .metadaily{
  206. background: #E3E5EA;
  207. }
  208. .el-carousel__item{
  209. background-size: 100%;
  210. background-repeat: no-repeat;
  211. display: flex;
  212. justify-content: center;
  213. align-items: flex-end;
  214. #txt {
  215. display: flex;
  216. flex-direction: column;
  217. margin-bottom: 50px;
  218. color: #FFFFFF;
  219. .title {
  220. font-size: 36px;
  221. font-weight: bold;
  222. text-align: center;
  223. margin-bottom: 15px;
  224. }
  225. .subtitle {
  226. font-size: 16px;
  227. font-weight: 400;
  228. opacity: 0.5;
  229. text-align: center;
  230. }
  231. }
  232. }
  233. .lunbo {
  234. background-size: auto;
  235. background-position: center;
  236. }
  237. #hot, #wk {
  238. width: 100%;
  239. background: #E3E5EA;
  240. display: flex;
  241. align-items: center;
  242. flex-direction: column;
  243. justify-content: center;
  244. //padding-top: 30px;;
  245. padding-bottom: 30px;
  246. .content {
  247. width: 1200px;
  248. height: 90%;
  249. display: flex;
  250. flex-direction: column;
  251. justify-content: space-between;
  252. .top, .bottom {
  253. width: 100%;
  254. }
  255. .top {
  256. min-height: 470px;
  257. //margin-bottom: 30px;
  258. background-color: #FFFFFF;
  259. display: flex;
  260. #imgtxt {
  261. width: 560px;
  262. //width: 55%;
  263. position: relative;
  264. display: flex;
  265. justify-content: center;
  266. align-items: center;
  267. img {
  268. width: 560px;
  269. //height: 90%;
  270. }
  271. .newsTitle{
  272. position: absolute;
  273. bottom: 5%;
  274. left: 0;
  275. display: inline-block;
  276. font-size: 18px;
  277. font-weight: bold;
  278. color: #FFFFFF;
  279. line-height: 48px;
  280. width: 100%;
  281. background-color: #0000007e;
  282. }
  283. }
  284. #hottxt {
  285. display: flex;
  286. justify-content: space-around;
  287. flex-direction: column;
  288. align-items: center;
  289. flex: 1;
  290. margin-left: 35px;
  291. #htitle {
  292. display: flex;
  293. justify-content: space-between;
  294. align-items: center;
  295. width: 95%;
  296. .tle {
  297. z-index: 9;
  298. font-size: 26px;
  299. font-weight: bold;
  300. color: #00161C;
  301. line-height: 48px;
  302. display: inline-block;
  303. position: relative;
  304. text-decoration: none; /* 移除默认的下划线 */
  305. }
  306. .tle::after {
  307. content: '';
  308. position: absolute;
  309. left: -15px;
  310. bottom: 10px;
  311. width: 65%;
  312. height: 6px; /* 横线高度为文字高度的一半 */
  313. background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */
  314. z-index: -1;
  315. }
  316. .el-button {
  317. font-size: 16px;
  318. font-weight: bold;
  319. color: #07CAAF;
  320. line-height: 48px;
  321. z-index: 999;
  322. }
  323. }
  324. }
  325. #hotList {
  326. //height: 90%;
  327. height: 76%;
  328. display: flex;
  329. flex-wrap: wrap;
  330. justify-content: space-between;
  331. align-items: center;
  332. .list {
  333. display: flex;
  334. flex-direction: column;
  335. justify-content: center;
  336. margin-right: 39px;
  337. z-index: 999;
  338. img {
  339. width: 150px;
  340. height: 112px;
  341. border-radius: 10px;
  342. }
  343. a {
  344. font-size: 14px;
  345. font-weight: 400;
  346. color: #010101;
  347. margin-top: 14px;
  348. white-space: nowrap;
  349. overflow: hidden;
  350. text-overflow: ellipsis;
  351. width: 150px;
  352. //line-height: 48px;
  353. }
  354. }
  355. }
  356. }
  357. .bottom {
  358. min-height: 120px;
  359. background-image: url('../../assets/bottom.png');
  360. background-size: 100% 100%;
  361. }
  362. }
  363. }
  364. #hot {
  365. padding: 0;
  366. .content {
  367. margin-top: 30px;
  368. .top {
  369. //min-height: 470px;
  370. //margin-bottom: 40px;
  371. background-color: #FFFFFF;
  372. display: flex;
  373. background-image: url('../../assets/hotTopLeft.png');
  374. background-position: 101% 0; /* 调整这些值来改变显示的部分 */
  375. background-size: 30% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
  376. background-repeat: no-repeat;
  377. #imgtxt {
  378. width: 560px;
  379. position: relative;
  380. display: flex;
  381. justify-content: center;
  382. align-items: center;
  383. margin-left: 20px;
  384. img {
  385. width: 560px;
  386. //height: 90%;
  387. }
  388. .newsTitle{
  389. position: absolute;
  390. bottom: 5%;
  391. left: 0;
  392. display: inline-block;
  393. font-size: 18px;
  394. font-weight: bold;
  395. color: #FFFFFF;
  396. line-height: 48px;
  397. width: 100%;
  398. background-color: #0000007e;
  399. }
  400. }
  401. }
  402. }
  403. }
  404. #wk {
  405. padding-bottom: 200px;
  406. .content {
  407. background-color: #FFFFFF;
  408. }
  409. }
  410. #wk, #daliay {
  411. .content {
  412. width: 1200px;
  413. margin: 0 auto;
  414. background: #fff;
  415. }
  416. .content, .top {
  417. display: flex;
  418. align-items: center;
  419. position: relative;
  420. flex-direction: column;
  421. .htitle {
  422. display: flex;
  423. justify-content: space-between;
  424. align-items: center;
  425. width: 93%;
  426. margin-bottom: 20px;
  427. .item {
  428. width: 15%;
  429. display: flex;
  430. justify-content: space-between;
  431. a {
  432. font-size: 18px;
  433. line-height: 48px;
  434. cursor: pointer;
  435. z-index: 99;
  436. }
  437. .clk {
  438. font-weight: bold;
  439. color: #07CAAF;
  440. }
  441. }
  442. .tle {
  443. z-index: 9;
  444. font-size: 26px;
  445. font-weight: bold;
  446. color: #00161C;
  447. line-height: 48px;
  448. display: inline-block;
  449. position: relative;
  450. text-decoration: none; /* 移除默认的下划线 */
  451. }
  452. .tle::after {
  453. content: '';
  454. position: absolute;
  455. left: -5px;
  456. bottom: 10px;
  457. width: 110%;
  458. height: 6px; /* 横线高度为文字高度的一半 */
  459. background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */
  460. z-index: -1;
  461. }
  462. .el-button {
  463. font-size: 16px;
  464. font-weight: bold;
  465. color: #07CAAF;
  466. line-height: 48px;
  467. z-index: 999;
  468. }
  469. }
  470. #hotList {
  471. //height: 90%;
  472. //width: 95%;
  473. display: flex;
  474. flex-wrap: wrap;
  475. //justify-content: space-between;
  476. align-items: center;
  477. .list {
  478. display: flex;
  479. //width: 50%;
  480. z-index: 999;
  481. flex-direction: row !important;
  482. //align-items: center;
  483. justify-content: center;
  484. //margin-bottom: 30px;
  485. width: 500px !important;
  486. margin: 0 40px 34px 33px;
  487. .txt {
  488. display: flex;
  489. flex-direction: column;
  490. margin-left: 22px;
  491. align-items: center;
  492. //justify-content: space-between;
  493. width: 60%;
  494. .title {
  495. text-align: left;
  496. width: 100%;
  497. font-size: 18px;
  498. font-weight: bold;
  499. color: #010101;
  500. //line-height: 48px;
  501. }
  502. .subtitle{
  503. //height: 90%;
  504. display: inline-block;
  505. text-align: left;
  506. width: 100%;
  507. font-size: 14px;
  508. font-weight: 400;
  509. color: #000000;
  510. line-height: 24px;
  511. margin-top: 10px;
  512. display: -webkit-box; /* Safari */
  513. -webkit-line-clamp: 3; /* Safari and Chrome */
  514. -webkit-box-orient: vertical; /* Safari and Chrome */
  515. overflow: hidden;
  516. }
  517. }
  518. img {
  519. width: 200px ;
  520. height: 150px;
  521. border-radius: 10px;
  522. }
  523. }
  524. }
  525. }
  526. .content::after {
  527. content: '';
  528. width: 100%;
  529. height: 100%;
  530. position: absolute;
  531. background-image: url('../../assets/cartxt.png');
  532. background-position: 100% 0; /* 调整这些值来改变显示的部分 */
  533. background-size: 10% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
  534. background-repeat: no-repeat;
  535. }
  536. }
  537. .gg {
  538. margin: 30px auto;
  539. width: 1200px;
  540. img {
  541. width: 100%;
  542. }
  543. }
  544. </style>