元气智驾官网前端
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
 
 
 
 

489 líneas
14 KiB

  1. <template>
  2. <div>
  3. <el-carousel >
  4. <el-carousel-item class="lunbo" v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }">
  5. <div id="txt">
  6. <a class="title">{{ item.title }}</a>
  7. <a class="subtitle">{{ item.subtitle }}</a>
  8. </div>
  9. </el-carousel-item>
  10. </el-carousel>
  11. <div id="hot">
  12. <div class="content">
  13. <div class="top">
  14. <div id="imgtxt">
  15. <img :src="hotnews.img">
  16. <a class="newsTitle">{{ hotnews.title }}</a>
  17. </div>
  18. <div id="hottxt">
  19. <div id="htitle">
  20. <a class="tle">热点新闻</a>
  21. <el-button type="text">MORE+</el-button>
  22. </div>
  23. <div id="hotList">
  24. <div class="list" v-for="(item, index) in hotnewsList" :key="index">
  25. <img :src="item.img">
  26. <a>{{ item.title }}</a>
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. <div class="bottom" :style="{ backgroundImage: `url(${gg1})` }"/>
  32. </div>
  33. </div>
  34. <div id="daliay">
  35. <div class="content">
  36. <div class="top">
  37. <div class="htitle">
  38. <a class="tle">资讯</a>
  39. <div class="item">
  40. <a v-for="item in information" :key="item" @click="changenews(item)" :class="{ clk: informationitem === item }">{{ item }}</a>
  41. </div>
  42. <el-button type="text">MORE+</el-button>
  43. </div>
  44. <div id="hotList">
  45. <div class="list" v-for="(item, index) in carList" :key="index">
  46. <img :src="item.img">
  47. <div class="txt">
  48. <a class="title">{{ item.title }}</a>
  49. <a class="subtitle">{{ item.subtitle }}</a>
  50. </div>
  51. <!-- <a>{{ item.title }}</a> -->
  52. </div>
  53. </div>
  54. </div>
  55. <div class="bottom" :style="{ backgroundImage: `url(${gg2})` }"/>
  56. </div>
  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">MORE+</el-button>
  66. </div>
  67. <div id="hotList">
  68. <div class="list" v-for="(item, index) in carList" :key="index">
  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. <!-- <a>{{ item.title }}</a> -->
  75. </div>
  76. </div>
  77. </div>
  78. <!-- <el-button type="primary" class="wkbtn" size="medium">点击进入</el-button> -->
  79. </div>
  80. </div>
  81. </template>
  82. <script>
  83. import { guanggao, lunboList } from '@/api/metadaily.js'
  84. export default {
  85. name: 'metadaily',
  86. data () {
  87. return {
  88. information: ['XR', 'Web3', 'Ai'],
  89. informationitem: 'XR',
  90. depth: ['XR', 'Web3', 'Ai'],
  91. depthitem: 'XR',
  92. carouselList: [
  93. // { src: '/car1.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' },
  94. // { src: '/car2.png', title: '吉利11月销量再刷新纪录,新能源转型成效凸显', subtitle: '国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。' }
  95. ],
  96. hotnews: {
  97. title: '这两款产品也将采用“CHN”的模式进行研发',
  98. img: '/aigc.png'
  99. },
  100. hotnewsList: [
  101. {
  102. title: '广汽本田插混旗舰双子',
  103. img: '/aigclist.png'
  104. },
  105. {
  106. title: '强不强?吉利银河E8全景',
  107. img: '/aigclist.png'
  108. },
  109. {
  110. title: '智己汽车正式获准L3级',
  111. img: '/aigclist.png'
  112. },
  113. {
  114. title: '广汽本田插混旗舰双子',
  115. img: '/aigclist.png'
  116. },
  117. {
  118. title: '强不强?吉利银河E8全景',
  119. img: '/aigclist.png'
  120. },
  121. {
  122. title: '智己汽车正式获准L3级',
  123. img: '/aigclist.png'
  124. }
  125. ],
  126. carList: [
  127. {
  128. img: '/cattxt.png',
  129. title: '广汽本田插混旗舰双子',
  130. subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这'
  131. }, {
  132. img: '/cattxt.png',
  133. title: '首款高端纯电MPV翼真Xspace',
  134. subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这'
  135. }, {
  136. img: '/cattxt.png',
  137. title: '广汽本田插混旗舰双子',
  138. subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这'
  139. }, {
  140. img: '/cattxt.png',
  141. title: '首款高端纯电MPV翼真Xspace',
  142. subtitle: '阿维塔科技计划三年推出四款新车,明年则将陆续推出第三款和第四款车型。目前,有2款新车在研发中,代号分别是“15”、“16”,这'
  143. }
  144. ],
  145. gg1: '',
  146. gg2: ''
  147. }
  148. },
  149. components: {
  150. },
  151. mounted () {
  152. this.getguanggao()
  153. this.getlunboList()
  154. },
  155. methods: {
  156. changenews (item) {
  157. this.informationitem = item
  158. },
  159. changedepth (item) {
  160. this.depthitem = item
  161. },
  162. async getguanggao () {
  163. const { data: { message: ggm1, data: gg1 } } = await guanggao(1)
  164. const { data: { message: ggm2, data: gg2 } } = await guanggao(2)
  165. if (ggm1 === 'success' && ggm2 === 'success') {
  166. this.gg1 = gg1.image
  167. this.gg2 = gg2.image
  168. }
  169. },
  170. async getlunboList () {
  171. const { data: { message, data } } = await lunboList()
  172. if (message === 'success') {
  173. for (const iter of data.list) {
  174. this.carouselList.push({
  175. src: iter.image,
  176. title: iter.link,
  177. subtitle: iter.link
  178. })
  179. }
  180. }
  181. }
  182. }
  183. }
  184. </script>
  185. <style lang="scss" scoped>
  186. .el-carousel__item{
  187. background-size: 100%;
  188. background-repeat: no-repeat;
  189. display: flex;
  190. justify-content: center;
  191. align-items: flex-end;
  192. #txt {
  193. display: flex;
  194. flex-direction: column;
  195. margin-bottom: 50px;
  196. color: #FFFFFF;
  197. .title {
  198. font-size: 36px;
  199. font-weight: bold;
  200. text-align: center;
  201. margin-bottom: 15px;
  202. }
  203. .subtitle {
  204. font-size: 16px;
  205. font-weight: 400;
  206. opacity: 0.5;
  207. text-align: center;
  208. }
  209. }
  210. }
  211. .lunbo {
  212. background-size: auto;
  213. background-position: center;
  214. }
  215. #hot, #daliay, #wk {
  216. width: 100%;
  217. background: #E3E5EA;
  218. display: flex;
  219. align-items: center;
  220. flex-direction: column;
  221. justify-content: center;
  222. padding-top: 30px;;
  223. .content {
  224. width: 1200px;
  225. height: 90%;
  226. display: flex;
  227. flex-direction: column;
  228. justify-content: space-between;
  229. .top, .bottom {
  230. width: 100%;
  231. }
  232. .top {
  233. margin-bottom: 30px;
  234. background-color: #FFFFFF;
  235. display: flex;
  236. #imgtxt {
  237. width: 55%;
  238. position: relative;
  239. display: flex;
  240. justify-content: center;
  241. align-items: center;
  242. img {
  243. width: 90%;
  244. height: 90%;
  245. }
  246. .newsTitle{
  247. position: absolute;
  248. bottom: 5%;
  249. left: 5%;
  250. display: inline-block;
  251. font-size: 18px;
  252. font-weight: bold;
  253. color: #FFFFFF;
  254. line-height: 48px;
  255. width: 90%;
  256. background-color: #0000007e;
  257. }
  258. }
  259. #hottxt {
  260. display: flex;
  261. justify-content: space-around;
  262. flex-direction: column;
  263. align-items: center;
  264. flex: 1;
  265. #htitle {
  266. display: flex;
  267. justify-content: space-between;
  268. align-items: center;
  269. width: 95%;
  270. .tle {
  271. z-index: 9;
  272. font-size: 26px;
  273. font-weight: bold;
  274. color: #00161C;
  275. line-height: 48px;
  276. display: inline-block;
  277. position: relative;
  278. text-decoration: none; /* 移除默认的下划线 */
  279. }
  280. .tle::after {
  281. content: '';
  282. position: absolute;
  283. left: -15px;
  284. bottom: 10px;
  285. width: 65%;
  286. height: 6px; /* 横线高度为文字高度的一半 */
  287. background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */
  288. z-index: -1;
  289. }
  290. .el-button {
  291. font-size: 16px;
  292. font-weight: bold;
  293. color: #07CAAF;
  294. line-height: 48px;
  295. }
  296. }
  297. }
  298. #hotList {
  299. height: 90%;
  300. width: 90%;
  301. display: flex;
  302. flex-wrap: wrap;
  303. justify-content: space-between;
  304. align-items: center;
  305. .list {
  306. display: flex;
  307. flex-direction: column;
  308. align-items: center;
  309. justify-content: center;
  310. img {
  311. width: 140px;
  312. height: 110px;
  313. }
  314. a {
  315. font-size: 14px;
  316. font-weight: 400;
  317. color: #010101;
  318. line-height: 48px;
  319. }
  320. }
  321. }
  322. }
  323. .bottom {
  324. min-height: 120px;
  325. background-image: url('../../assets/bottom.png');
  326. background-size: 100% 100%;
  327. }
  328. }
  329. }
  330. #hot {
  331. .content {
  332. .top {
  333. margin-bottom: 30px;
  334. background-color: #FFFFFF;
  335. display: flex;
  336. background-image: url('../../assets/hotTopLeft.png');
  337. background-position: 101% 0; /* 调整这些值来改变显示的部分 */
  338. background-size: 30% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
  339. background-repeat: no-repeat;
  340. #imgtxt {
  341. width: 55%;
  342. position: relative;
  343. display: flex;
  344. justify-content: center;
  345. align-items: center;
  346. img {
  347. width: 90%;
  348. height: 90%;
  349. }
  350. .newsTitle{
  351. position: absolute;
  352. bottom: 5%;
  353. left: 5%;
  354. display: inline-block;
  355. font-size: 18px;
  356. font-weight: bold;
  357. color: #FFFFFF;
  358. line-height: 48px;
  359. width: 90%;
  360. background-color: #0000007e;
  361. }
  362. }
  363. }
  364. }
  365. }
  366. #wk {
  367. .content {
  368. background-color: #FFFFFF;
  369. }
  370. }
  371. #wk, #daliay {
  372. .content, .top {
  373. display: flex;
  374. align-items: center;
  375. position: relative;
  376. flex-direction: column;
  377. .htitle {
  378. display: flex;
  379. justify-content: space-between;
  380. align-items: center;
  381. width: 93%;
  382. .item {
  383. width: 15%;
  384. display: flex;
  385. justify-content: space-between;
  386. a {
  387. font-size: 18px;
  388. line-height: 48px;
  389. cursor: pointer;
  390. z-index: 99;
  391. }
  392. .clk {
  393. font-weight: bold;
  394. color: #07CAAF;
  395. }
  396. }
  397. .tle {
  398. z-index: 9;
  399. font-size: 26px;
  400. font-weight: bold;
  401. color: #00161C;
  402. line-height: 48px;
  403. display: inline-block;
  404. position: relative;
  405. text-decoration: none; /* 移除默认的下划线 */
  406. }
  407. .tle::after {
  408. content: '';
  409. position: absolute;
  410. left: -5px;
  411. bottom: 10px;
  412. width: 110%;
  413. height: 6px; /* 横线高度为文字高度的一半 */
  414. background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */
  415. z-index: -1;
  416. }
  417. .el-button {
  418. font-size: 16px;
  419. font-weight: bold;
  420. color: #07CAAF;
  421. line-height: 48px;
  422. }
  423. }
  424. #hotList {
  425. height: 90%;
  426. width: 95%;
  427. display: flex;
  428. flex-wrap: wrap;
  429. justify-content: space-between;
  430. align-items: center;
  431. .list {
  432. display: flex;
  433. width: 50%;
  434. height: 50%;
  435. flex-direction: row !important;
  436. align-items: center;
  437. justify-content: center;
  438. margin-bottom: 30px;
  439. .txt {
  440. display: flex;
  441. flex-direction: column;
  442. margin-left: 10px;
  443. align-items: center;
  444. justify-content: space-between;
  445. width: 60%;
  446. .title {
  447. text-align: left;
  448. width: 100%;
  449. font-size: 18px;
  450. font-weight: bold;
  451. color: #010101;
  452. line-height: 48px;
  453. }
  454. .subtitle{
  455. height: 90%;
  456. display: inline-block;
  457. text-align: left;
  458. width: 100%;
  459. font-size: 14px;
  460. font-weight: 400;
  461. color: #000000;
  462. line-height: 24px;
  463. }
  464. }
  465. img {
  466. width: 200px !important;
  467. height: 150px !important;
  468. }
  469. }
  470. }
  471. }
  472. .content::after {
  473. content: '';
  474. width: 100%;
  475. height: 100%;
  476. position: absolute;
  477. background-image: url('../../assets/cartxt.png');
  478. background-position: 100% 0; /* 调整这些值来改变显示的部分 */
  479. background-size: 10% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */
  480. background-repeat: no-repeat;
  481. }
  482. }
  483. </style>