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

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