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

378 lines
9.3 KiB

  1. <template>
  2. <div class="metadaily">
  3. <Swiper :banner-array="carouselList" />
  4. <div id="hot">
  5. <div class="content">
  6. <HotNews v-if="display" :list="hotnewsList"/>
  7. </div>
  8. </div>
  9. <div class="gg" v-if="gg1.img" >
  10. <a :href="gg1.link" target="_blank">
  11. <img :src="gg1.img" alt="">
  12. </a>
  13. </div>
  14. <div id="daliay">
  15. <div class="content">
  16. <div class="htitle">
  17. <a class="tle">资讯</a>
  18. <el-button type="text" @click="routerTo">MORE+</el-button>
  19. </div>
  20. <div id="hotList">
  21. <div class="list" v-for="(item, index) in zixun" :key="index" @click="routerToarticleDetails(item.detail)">
  22. <img :src="item.image">
  23. <div class="txt">
  24. <a class="title">{{ item.title }}</a>
  25. <a class="subtitle">{{ item.detailText }}</a>
  26. </div>
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. <div class="gg" v-if="gg2.img">
  32. <a :href="gg2.link" target="_blank">
  33. <img :src="gg2.img" alt="">
  34. </a>
  35. </div>
  36. <div id="wk">
  37. <div class="content">
  38. <div class="htitle">
  39. <a class="tle">深度</a>
  40. <div class="item">
  41. <a v-for="item in depth" :key="item" @click="changedepth(item)" :class="{ clk: depthitem === item }">{{ item }}</a>
  42. </div>
  43. <el-button type="text" @click="routerTo">MORE+</el-button>
  44. </div>
  45. <div id="hotList">
  46. <div class="list" v-for="(item, index) in shendu" :key="index" @click="routerToarticleDetails(item.detail)">
  47. <img :src="item.image">
  48. <div class="txt">
  49. <a class="title">{{ item.title }}</a>
  50. <a class="subtitle">{{ item.detailText }}</a>
  51. </div>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. </div>
  57. </template>
  58. <script>
  59. import Swiper from '@/components/swiper'
  60. import HotNews from '@/components/hotNews'
  61. import { guanggao, lunboList, hotNewsConfig, shendu, zixun, hotnews } from '@/api/metadaily.js'
  62. export default {
  63. name: 'metadaily',
  64. data () {
  65. return {
  66. information: ['XR', 'Web3', 'AI'],
  67. depth: ['XR', 'Web3', 'AI'],
  68. depthitem: 'XR',
  69. carouselList: [],
  70. hotnews: {},
  71. hotnewsList: [],
  72. shendu: [],
  73. zixun: [],
  74. gg1: {},
  75. gg2: {},
  76. display: 1
  77. }
  78. },
  79. components: {
  80. Swiper,
  81. HotNews
  82. },
  83. mounted () {
  84. this.gethotnewsConfig()
  85. this.getguanggao()
  86. this.getlunboList()
  87. this.gethotnews()
  88. this.getshendu()
  89. this.getzixun()
  90. },
  91. methods: {
  92. routerToarticleDetails (value) {
  93. localStorage.setItem('article', value)
  94. this.$router.push({ path: '/articleDetails' })
  95. },
  96. routerTo () {
  97. this.$router.push({ path: '/articleList' })
  98. },
  99. changenews (item) {
  100. this.getzixun()
  101. },
  102. changedepth (item) {
  103. this.depthitem = item
  104. this.getshendu()
  105. },
  106. async getguanggao () {
  107. const { data: { message: ggm1, data: gg1 } } = await guanggao(1)
  108. const { data: { message: ggm2, data: gg2 } } = await guanggao(2)
  109. if (ggm1 === 'success' && ggm2 === 'success') {
  110. this.gg1 = {
  111. img: gg1.image,
  112. link: gg1.link
  113. }
  114. this.gg2 = {
  115. img: gg2.image,
  116. link: gg2.link
  117. }
  118. }
  119. },
  120. async getlunboList () {
  121. const { data: { message, data } } = await lunboList()
  122. if (message === 'success') {
  123. this.carouselList = data.list
  124. }
  125. },
  126. async gethotnewsConfig () {
  127. const { data: { message, data: { display } } } = await hotNewsConfig()
  128. if (message === 'success') {
  129. this.display = display
  130. }
  131. },
  132. async gethotnews () {
  133. this.hotnewsList = []
  134. const { data: { message, data } } = await hotnews()
  135. if (message === 'success') {
  136. this.hotnewsList = data.list
  137. // this.hotnews = {
  138. // title: data.list[0].title,
  139. // img: data.list[0].image,
  140. // detail: data.list[0].detail
  141. // }
  142. // for (let index = 1; index < data.list.length; index++) {
  143. // console.log(data.list[index])
  144. // this.hotnewsList.push({
  145. // title: data.list[index].title,
  146. // img: data.list[index].image,
  147. // detail: data.list[index].detail
  148. // })
  149. // }
  150. }
  151. },
  152. async getshendu () {
  153. const { data: { message, data } } = await shendu(1, 10, this.depthitem)
  154. if (message === 'success') {
  155. this.shendu = data.list
  156. }
  157. },
  158. async getzixun () {
  159. const { data: { message, data } } = await zixun(1, 10)
  160. if (message === 'success') {
  161. this.zixun = data.list
  162. }
  163. }
  164. }
  165. }
  166. </script>
  167. <style lang="scss" scoped>
  168. .metadaily{
  169. background: #E3E5EA;
  170. }
  171. .el-carousel__item{
  172. background-size: 100%;
  173. background-repeat: no-repeat;
  174. display: flex;
  175. justify-content: center;
  176. align-items: flex-end;
  177. #txt {
  178. display: flex;
  179. flex-direction: column;
  180. margin-bottom: 50px;
  181. color: #FFFFFF;
  182. .title {
  183. font-size: 36px;
  184. font-weight: bold;
  185. text-align: center;
  186. margin-bottom: 15px;
  187. }
  188. .subtitle {
  189. font-size: 16px;
  190. font-weight: 400;
  191. opacity: 0.5;
  192. text-align: center;
  193. }
  194. }
  195. }
  196. .lunbo {
  197. background-size: auto;
  198. background-position: center;
  199. }
  200. #hot, #wk {
  201. width: 100%;
  202. background: #E3E5EA;
  203. display: flex;
  204. align-items: center;
  205. flex-direction: column;
  206. justify-content: center;
  207. //padding-top: 30px;;
  208. padding-bottom: 30px;
  209. .content {
  210. width: 1200px;
  211. height: 90%;
  212. display: flex;
  213. flex-direction: column;
  214. justify-content: space-between;
  215. .top, .bottom {
  216. width: 100%;
  217. }
  218. .bottom {
  219. min-height: 120px;
  220. background-image: url('../../assets/bottom.png');
  221. background-size: 100% 100%;
  222. }
  223. }
  224. }
  225. #hot {
  226. padding: 0;
  227. .content {
  228. margin-top: 30px;
  229. }
  230. }
  231. #wk {
  232. padding-bottom: 200px;
  233. .content {
  234. background-color: #FFFFFF;
  235. }
  236. }
  237. #wk, #daliay {
  238. .content {
  239. width: 1200px;
  240. margin: 0 auto;
  241. background: #fff;
  242. }
  243. .content, .top {
  244. display: flex;
  245. align-items: center;
  246. position: relative;
  247. flex-direction: column;
  248. .htitle {
  249. display: flex;
  250. justify-content: space-between;
  251. align-items: center;
  252. width: 93%;
  253. margin-bottom: 20px;
  254. .item {
  255. width: 15%;
  256. display: flex;
  257. justify-content: space-between;
  258. a {
  259. font-size: 18px;
  260. line-height: 48px;
  261. cursor: pointer;
  262. z-index: 99;
  263. }
  264. .clk {
  265. font-weight: bold;
  266. color: #07CAAF;
  267. }
  268. }
  269. .tle {
  270. z-index: 9;
  271. font-size: 26px;
  272. font-weight: bold;
  273. color: #00161C;
  274. line-height: 48px;
  275. display: inline-block;
  276. position: relative;
  277. text-decoration: none; /* 移除默认的下划线 */
  278. }
  279. .tle::after {
  280. content: '';
  281. position: absolute;
  282. left: -5px;
  283. bottom: 10px;
  284. width: 110%;
  285. height: 6px; /* 横线高度为文字高度的一半 */
  286. background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */
  287. z-index: -1;
  288. }
  289. .el-button {
  290. font-size: 16px;
  291. font-weight: bold;
  292. color: #07CAAF;
  293. line-height: 48px;
  294. z-index: 999;
  295. }
  296. }
  297. #hotList {
  298. //height: 90%;
  299. //width: 95%;
  300. display: flex;
  301. flex-wrap: wrap;
  302. //justify-content: space-between;
  303. align-items: center;
  304. .list {
  305. display: flex;
  306. //width: 50%;
  307. z-index: 999;
  308. flex-direction: row !important;
  309. //align-items: center;
  310. justify-content: center;
  311. //margin-bottom: 30px;
  312. width: 500px !important;
  313. margin: 0 40px 34px 33px;
  314. .txt {
  315. display: flex;
  316. flex-direction: column;
  317. margin-left: 22px;
  318. align-items: center;
  319. //justify-content: space-between;
  320. width: 60%;
  321. .title {
  322. text-align: left;
  323. width: 100%;
  324. font-size: 18px;
  325. font-weight: bold;
  326. color: #010101;
  327. //line-height: 48px;
  328. }
  329. .subtitle{
  330. //height: 90%;
  331. display: inline-block;
  332. text-align: left;
  333. width: 100%;
  334. font-size: 14px;
  335. font-weight: 400;
  336. color: #000000;
  337. line-height: 24px;
  338. margin-top: 10px;
  339. display: -webkit-box; /* Safari */
  340. -webkit-line-clamp: 3; /* Safari and Chrome */
  341. -webkit-box-orient: vertical; /* Safari and Chrome */
  342. overflow: hidden;
  343. }
  344. }
  345. img {
  346. width: 200px ;
  347. height: 150px;
  348. border-radius: 10px;
  349. }
  350. }
  351. }
  352. }
  353. .content::after {
  354. content: '';
  355. width: 100%;
  356. height: 100%;
  357. position: absolute;
  358. background-image: url('../../assets/cartxt.png');
  359. background-position: 100% 0; /* 调整这些值来改变显示的部分 */
  360. background-size: 10% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
  361. background-repeat: no-repeat;
  362. }
  363. }
  364. .gg {
  365. margin: 30px auto;
  366. width: 1200px;
  367. img {
  368. width: 100%;
  369. }
  370. }
  371. </style>