元气智驾官网前端
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 
 

370 行
8.9 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" :type="1"/>
  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(31)">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(32)">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 (type) {
  97. this.$router.push({ path: '/articleList', query: {
  98. type: 3,
  99. subType: type
  100. } })
  101. },
  102. changenews (item) {
  103. this.getzixun()
  104. },
  105. changedepth (item) {
  106. this.depthitem = item
  107. this.getshendu()
  108. },
  109. async getguanggao () {
  110. const { data: { code: ggm1, data: gg1 } } = await guanggao(1)
  111. const { data: { code: ggm2, data: gg2 } } = await guanggao(2)
  112. if (ggm1 === 'success' && ggm2 === 'success') {
  113. this.gg1 = {
  114. img: gg1.image,
  115. link: gg1.link
  116. }
  117. this.gg2 = {
  118. img: gg2.image,
  119. link: gg2.link
  120. }
  121. }
  122. },
  123. async getlunboList () {
  124. const { data: { code, data } } = await lunboList()
  125. if (code === 200) {
  126. this.carouselList = data.list
  127. }
  128. },
  129. async gethotnewsConfig () {
  130. const { data: { code, data: { display } } } = await hotNewsConfig()
  131. if (code === 200) {
  132. this.display = display
  133. }
  134. },
  135. async gethotnews () {
  136. this.hotnewsList = []
  137. const { data: { code, data } } = await hotnews()
  138. if (code === 200) {
  139. this.hotnewsList = data.list
  140. }
  141. },
  142. async getshendu () {
  143. const { data: { code, data } } = await shendu(1, 10, this.depthitem)
  144. if (code === 200) {
  145. this.shendu = data.list
  146. }
  147. },
  148. async getzixun () {
  149. const { data: { code, data } } = await zixun(1, 10)
  150. if (code === 200) {
  151. this.zixun = data.list
  152. }
  153. }
  154. }
  155. }
  156. </script>
  157. <style lang="scss" scoped>
  158. .metadaily{
  159. background: #E3E5EA;
  160. }
  161. .el-carousel__item{
  162. background-size: 100%;
  163. background-repeat: no-repeat;
  164. display: flex;
  165. justify-content: center;
  166. align-items: flex-end;
  167. #txt {
  168. display: flex;
  169. flex-direction: column;
  170. margin-bottom: 50px;
  171. color: #FFFFFF;
  172. .title {
  173. font-size: 36px;
  174. font-weight: bold;
  175. text-align: center;
  176. margin-bottom: 15px;
  177. }
  178. .subtitle {
  179. font-size: 16px;
  180. font-weight: 400;
  181. opacity: 0.5;
  182. text-align: center;
  183. }
  184. }
  185. }
  186. .lunbo {
  187. background-size: auto;
  188. background-position: center;
  189. }
  190. #hot, #wk {
  191. width: 100%;
  192. background: #E3E5EA;
  193. display: flex;
  194. align-items: center;
  195. flex-direction: column;
  196. justify-content: center;
  197. //padding-top: 30px;;
  198. padding-bottom: 30px;
  199. .content {
  200. width: 1200px;
  201. height: 90%;
  202. display: flex;
  203. flex-direction: column;
  204. justify-content: space-between;
  205. .top, .bottom {
  206. width: 100%;
  207. }
  208. .bottom {
  209. min-height: 120px;
  210. background-image: url('../../assets/bottom.png');
  211. background-size: 100% 100%;
  212. }
  213. }
  214. }
  215. #hot {
  216. padding: 0;
  217. .content {
  218. margin-top: 30px;
  219. }
  220. }
  221. #wk {
  222. .content {
  223. background-color: #FFFFFF;
  224. }
  225. }
  226. #wk, #daliay {
  227. .content {
  228. width: 1200px;
  229. margin: 0 auto;
  230. background: #fff;
  231. }
  232. .content, .top {
  233. display: flex;
  234. align-items: center;
  235. position: relative;
  236. flex-direction: column;
  237. .htitle {
  238. display: flex;
  239. justify-content: space-between;
  240. align-items: center;
  241. width: 93%;
  242. margin-bottom: 20px;
  243. .item {
  244. width: 15%;
  245. display: flex;
  246. justify-content: space-between;
  247. a {
  248. font-size: 18px;
  249. line-height: 48px;
  250. cursor: pointer;
  251. z-index: 99;
  252. }
  253. .clk {
  254. font-weight: bold;
  255. color: #07CAAF;
  256. }
  257. }
  258. .tle {
  259. z-index: 9;
  260. font-size: 26px;
  261. font-weight: bold;
  262. color: #00161C;
  263. line-height: 48px;
  264. display: inline-block;
  265. position: relative;
  266. text-decoration: none; /* 移除默认的下划线 */
  267. }
  268. .tle::after {
  269. content: '';
  270. position: absolute;
  271. left: -5px;
  272. bottom: 10px;
  273. width: 110%;
  274. height: 6px; /* 横线高度为文字高度的一半 */
  275. background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */
  276. z-index: -1;
  277. }
  278. .el-button {
  279. font-size: 16px;
  280. font-weight: bold;
  281. color: #07CAAF;
  282. line-height: 48px;
  283. z-index: 999;
  284. }
  285. }
  286. #hotList {
  287. //height: 90%;
  288. //width: 95%;
  289. display: flex;
  290. flex-wrap: wrap;
  291. //justify-content: space-between;
  292. align-items: center;
  293. .list {
  294. display: flex;
  295. //width: 50%;
  296. z-index: 999;
  297. flex-direction: row !important;
  298. //align-items: center;
  299. justify-content: center;
  300. //margin-bottom: 30px;
  301. width: 500px !important;
  302. margin: 0 40px 34px 33px;
  303. .txt {
  304. display: flex;
  305. flex-direction: column;
  306. margin-left: 22px;
  307. align-items: center;
  308. //justify-content: space-between;
  309. width: 60%;
  310. .title {
  311. text-align: left;
  312. width: 100%;
  313. font-size: 18px;
  314. font-weight: bold;
  315. color: #010101;
  316. //line-height: 48px;
  317. }
  318. .subtitle{
  319. //height: 90%;
  320. display: inline-block;
  321. text-align: left;
  322. width: 100%;
  323. font-size: 14px;
  324. font-weight: 400;
  325. color: #000000;
  326. line-height: 24px;
  327. margin-top: 10px;
  328. display: -webkit-box; /* Safari */
  329. -webkit-line-clamp: 3; /* Safari and Chrome */
  330. -webkit-box-orient: vertical; /* Safari and Chrome */
  331. overflow: hidden;
  332. }
  333. }
  334. img {
  335. width: 200px ;
  336. height: 150px;
  337. border-radius: 10px;
  338. }
  339. }
  340. }
  341. }
  342. .content::after {
  343. content: '';
  344. width: 100%;
  345. height: 100%;
  346. position: absolute;
  347. background-image: url('../../assets/cartxt.png');
  348. background-position: 100% 0; /* 调整这些值来改变显示的部分 */
  349. background-size: 10% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
  350. background-repeat: no-repeat;
  351. }
  352. }
  353. #daliay {
  354. margin-bottom: 30px;
  355. }
  356. .gg {
  357. margin: 0 auto;
  358. margin-bottom: 30px;
  359. width: 1200px;
  360. img {
  361. width: 100%;
  362. }
  363. }
  364. </style>