@@ -4,7 +4,7 @@ import request from './request' | |||
* 数字人视频 | |||
* @returns request | |||
*/ | |||
export const videoList = (num = 1, size = 10) => { | |||
export const videoList = (num = 1, size = 100) => { | |||
return request({ | |||
method: 'GET', | |||
url: `/aigc/videoList?pageNum=${num}&pageSize=${size}` | |||
@@ -15,7 +15,7 @@ export const videoList = (num = 1, size = 10) => { | |||
* 数字人直播(共用轮播) | |||
* @returns request | |||
*/ | |||
export const shuzirenZhiBoList = (num = 1, size = 10) => { | |||
export const shuzirenZhiBoList = (num = 1, size = 100) => { | |||
return request({ | |||
method: 'GET', | |||
url: `/aigc/shuzirenZhiBoList?pageNum=${num}&pageSize=${size}` | |||
@@ -32,6 +32,17 @@ export const hotlist = (num = 1, size = 10) => { | |||
}) | |||
} | |||
/** | |||
* 热点文章 | |||
* @returns request | |||
*/ | |||
export const carArticle = () => { | |||
return request({ | |||
method: 'GET', | |||
url: '/news/list?pageNum=1&pageSize=6&type=2' | |||
}) | |||
} | |||
/** | |||
* 广告 | |||
* @returns request | |||
@@ -48,10 +48,10 @@ export const hotnews = (num = 1, size = 10) => { | |||
* 资讯 | |||
* @returns request | |||
*/ | |||
export const zixun = (num = 1, size = 10, flag = 'XR') => { | |||
export const zixun = (num = 1, size = 10) => { | |||
return request({ | |||
method: 'GET', | |||
url: `/news/list?pageNum=${num}&pageSize=4&type=3&subType=31&tag=${flag}` | |||
url: `/news/list?pageNum=${num}&pageSize=4&type=3&subType=31` | |||
}) | |||
} | |||
@@ -0,0 +1,174 @@ | |||
<template> | |||
<div class="hotnews" > | |||
<div class="imgtxt" @click="routerToarticleDetails(hotnews.detail)"> | |||
<img :src="hotnews.img"> | |||
<a class="newsTitle">{{ hotnews.title }}</a> | |||
</div> | |||
<div class="hottxt"> | |||
<div id="htitle"> | |||
<a class="tle">热点新闻</a> | |||
<el-button type="text" @click="routerTo">MORE+</el-button> | |||
</div> | |||
<div class="hotList"> | |||
<div class="list" v-for="(item, index) in hotnewsList" :key="index" @click="routerToarticleDetails(item.detail)"> | |||
<img :src="item.img"> | |||
<a>{{ item.title }}</a> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
export default { | |||
props: { | |||
}, | |||
data() { | |||
return {} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.hotnews { | |||
min-height: 100px; | |||
margin-top: 20px; | |||
min-height: 470px; | |||
background-color: #FFFFFF; | |||
display: flex; | |||
margin-bottom: 30px; | |||
background-image: url('../../assets/hotTopLeft.png'); | |||
background-position: 101% 0; /* 调整这些值来改变显示的部分 */ | |||
background-size: 30% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ | |||
background-repeat: no-repeat; | |||
.imgtxt { | |||
width: 560px; | |||
position: relative; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
margin-left: 20px; | |||
img { | |||
width: 560px; | |||
} | |||
.newsTitle{ | |||
position: absolute; | |||
bottom: 5%; | |||
left: 0; | |||
display: inline-block; | |||
font-size: 18px; | |||
font-weight: bold; | |||
color: #FFFFFF; | |||
line-height: 48px; | |||
width: 100%; | |||
background-color: #0000007e; | |||
} | |||
} | |||
.hottxt { | |||
display: flex; | |||
justify-content: space-around; | |||
flex-direction: column; | |||
align-items: center; | |||
flex: 1; | |||
margin-left: 35px; | |||
.htitle { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
width: 95%; | |||
.tle { | |||
z-index: 9; | |||
font-size: 26px; | |||
font-weight: bold; | |||
color: #00161C; | |||
line-height: 48px; | |||
display: inline-block; | |||
position: relative; | |||
text-decoration: none; /* 移除默认的下划线 */ | |||
} | |||
.tle::after { | |||
content: ''; | |||
position: absolute; | |||
left: -15px; | |||
bottom: 10px; | |||
width: 65%; | |||
height: 6px; /* 横线高度为文字高度的一半 */ | |||
background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */ | |||
z-index: -1; | |||
} | |||
.el-button { | |||
font-size: 16px; | |||
font-weight: bold; | |||
color: #07CAAF; | |||
line-height: 48px; | |||
cursor: pointer; | |||
z-index: 9999; | |||
} | |||
} | |||
} | |||
.hotList { | |||
height: 76%; | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: space-between; | |||
align-items: center; | |||
.list { | |||
z-index: 999; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
width: 150px; | |||
margin-right: 39px; | |||
img { | |||
width: 150px; | |||
height: 112px; | |||
border-radius: 10px; | |||
} | |||
a { | |||
font-size: 14px; | |||
font-weight: 400; | |||
color: #010101; | |||
margin-top: 14px; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
width: 150px; | |||
// line-height: 48px; | |||
} | |||
} | |||
} | |||
.top { | |||
margin-bottom: 30px; | |||
background-color: #FFFFFF; | |||
display: flex; | |||
background-image: url('../../assets/hotTopLeft.png'); | |||
background-position: 101% 0; /* 调整这些值来改变显示的部分 */ | |||
background-size: 30% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ | |||
background-repeat: no-repeat; | |||
.imgtxt { | |||
width: 560px; | |||
position: relative; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
margin-left: 20px; | |||
img { | |||
width: 560px; | |||
} | |||
.newsTitle{ | |||
position: absolute; | |||
bottom: 5%; | |||
left: 0; | |||
display: inline-block; | |||
font-size: 18px; | |||
font-weight: bold; | |||
color: #FFFFFF; | |||
line-height: 48px; | |||
width: 100%; | |||
background-color: #0000007e; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -4,21 +4,19 @@ | |||
<div class="swiper-containerhor"> | |||
<div class="swiper-wrapper"> | |||
<div class="swiper-slide" v-for="(item, index) in bannerArray" :key="index"> | |||
<div v-if="item.flag === 'image'" class="imagezb"> | |||
<img class="swiperimg" :src="item.img"> | |||
<div v-if="type === 'image'" class="imagezb"> | |||
<img class="swiperimg" :src="item.image"> | |||
<el-button>进入直播间</el-button> | |||
<div class="textzb"> | |||
<a class="titlezb">主播: {{ item.name }}</a> | |||
<a class="contentzb">内容: {{ item.content }}</a> | |||
<a class="titlezb">主播: {{ item.title }}</a> | |||
<a class="contentzb">内容: {{ item.subTitle }}</a> | |||
</div> | |||
</div> | |||
<div v-else class="videozb"> | |||
<video :id="'davideo'+index" :poster="item.img" @click="videoPlayer(`davideo${index}`, `daplay${index}`)"> | |||
<source :src="item.video"> | |||
</video> | |||
<img class="play" src="@/assets/play.png" @click="videoPlayer(`davideo${index}`, `daplay${index}`)" :id="'daplay'+index"> | |||
<img class="swiperimg" :src="item.image"> | |||
<img class="play" src="@/assets/play.png" @click.prevent="videoFn(item)"> | |||
<div class="textzb"> | |||
<a class="contentzb">{{ item.content }}</a> | |||
<a>{{ item.title }}</a> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -30,6 +28,9 @@ | |||
<!-- Add Pagination --> | |||
<!-- <div class="swiper-paginationhor"></div> --> | |||
</div> | |||
<el-dialog :visible.sync="videoDialogVisible" width="400px" > | |||
<VideoDialog :url="videoUrl"></VideoDialog> | |||
</el-dialog> | |||
</div> | |||
</template> | |||
@@ -38,13 +39,22 @@ | |||
import Swiper from 'swiper' | |||
import 'swiper/dist/js/swiper' | |||
import 'swiper/dist/css/swiper.css' | |||
import VideoDialog from '@/components/video' | |||
export default { | |||
name: 'bannerSwiper', | |||
props: { | |||
bannerArray: Array | |||
bannerArray: Array, | |||
type: { | |||
type: String, | |||
default: '' | |||
} | |||
}, | |||
components: { VideoDialog }, | |||
data() { | |||
return { } | |||
return { | |||
videoDialogVisible: false, | |||
videoUrl: '', | |||
} | |||
}, | |||
mounted() { | |||
setTimeout(() => { | |||
@@ -67,16 +77,9 @@ export default { | |||
loop: true | |||
}) | |||
}, | |||
videoPlayer (value, play) { | |||
const id = document.getElementById(value) | |||
const playid = document.getElementById(play) | |||
if (id.paused) { | |||
id.play() | |||
playid.style.display = 'none' | |||
} else { | |||
id.pause() | |||
playid.style.display = 'block' | |||
} | |||
videoFn (item) { | |||
this.videoUrl = item.link | |||
this.videoDialogVisible = true | |||
} | |||
} | |||
} | |||
@@ -113,6 +116,10 @@ export default { | |||
width: 230px; | |||
display: block; | |||
} | |||
.imagezb{ | |||
position: relative; | |||
width: 230px; | |||
} | |||
.el-button { | |||
margin-left: -73px; | |||
border: none; | |||
@@ -152,9 +159,10 @@ export default { | |||
.play { | |||
position: absolute; | |||
margin: 0 auto; | |||
top: 50%; | |||
margin-left: 40%; | |||
margin-top: -60px; | |||
top: 165px; | |||
left: 50%; | |||
margin-left: -27.5px; | |||
width: 55px; | |||
} | |||
video { | |||
width: 230px; | |||
@@ -170,8 +178,11 @@ export default { | |||
a { | |||
width: 100%; | |||
display: inline-block; | |||
text-align: left; | |||
line-height: 30px; | |||
text-align: center; | |||
font-size: 18px; | |||
font-weight: 400; | |||
color: #030303; | |||
line-height: 24px; | |||
} | |||
.contentzb{ | |||
margin-top: 10px; | |||
@@ -50,9 +50,9 @@ | |||
<div class="content"> | |||
<div class="top"> | |||
<div id="szr"> | |||
<a>数字人直播</a> | |||
<a>正在直播</a> | |||
</div> | |||
<SwiperHor :banner-array="aigczb" /> | |||
<SwiperHor :banner-array="aigczb" type="image"/> | |||
</div> | |||
</div> | |||
<div class="gg gg2" v-if="gg2.img"> | |||
@@ -67,7 +67,7 @@ | |||
<div id="szr"> | |||
<a>数字人短视频</a> | |||
</div> | |||
<SwiperHor :banner-array="aigcsp" /> | |||
<SwiperHor :banner-array="aigcsp" type="video" /> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -169,29 +169,13 @@ export default { | |||
async getshuzirenZhiBoList () { | |||
const { data: { message, data } } = await shuzirenZhiBoList() | |||
if (message === 'success') { | |||
for (const iter of data.list) { | |||
this.aigczb.push({ | |||
img: iter.image.split('?')[0], | |||
name: iter.title, | |||
content: iter.subTitle, | |||
flag: 'image' | |||
}) | |||
} | |||
this.aigczb = data.list | |||
} | |||
}, | |||
async getvideoList () { | |||
const { data: { message, data } } = await videoList() | |||
if (message === 'success') { | |||
for (const iter of data.list) { | |||
console.log(iter, '111111') | |||
this.aigcsp.push({ | |||
video: iter.link ? iter.link : '', | |||
img: iter.image.split('?')[0], | |||
name: iter.subTitle ? iter.subTitle : '主播名', | |||
content: iter.title, | |||
flag: 'video' | |||
}) | |||
} | |||
this.aigcsp = data.list | |||
} | |||
}, | |||
changenews (item) { | |||
@@ -174,16 +174,6 @@ export default { | |||
const { data: { message, data: { list } } } = await yuanyuzhouHotList() | |||
if (message === 'success') { | |||
this.daliay = list | |||
// for (const iter of list) { | |||
// this.daliay.left.push({ | |||
// title: iter.news.title, | |||
// content: iter.news.detail | |||
// }) | |||
// this.daliay.right.push({ | |||
// img: iter.news.image, | |||
// video: iter.news.video | |||
// }) | |||
// } | |||
} | |||
}, | |||
async gethotnewsConfig () { | |||
@@ -195,15 +185,6 @@ export default { | |||
videoPlayer (item) { | |||
this.videoUrl = item.news.video | |||
this.videoDialogVisible = true | |||
// const id = document.getElementById(value) | |||
// const playid = document.getElementById(play) | |||
// if (id.paused) { | |||
// id.play() | |||
// playid.style.display = 'none' | |||
// } else { | |||
// id.pause() | |||
// playid.style.display = 'block' | |||
// } | |||
}, | |||
async gethotlist () { | |||
const { data: { message, data } } = await hotnews() | |||
@@ -53,10 +53,10 @@ | |||
</div> | |||
<div id="hotList"> | |||
<div class="list" v-for="(item, index) in carList" :key="index" @click="routerToarticleDetails(item.detail)"> | |||
<img :src="item.img"> | |||
<img :src="item.image"> | |||
<div class="txt"> | |||
<a class="title">{{ item.title }}</a> | |||
<a class="subtitle">{{ item.subtitle }}</a> | |||
<a class="subtitle">{{ item.detailText }}</a> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -70,7 +70,7 @@ | |||
<script> | |||
/* eslint-disable */ | |||
import Swiper from '@/components/swiper' | |||
import { lunboList, hotNewsConfig, guanggao, hotlist, videoList } from '@/api/car.js' | |||
import { lunboList, hotNewsConfig, guanggao, hotlist, videoList, carArticle } from '@/api/car.js' | |||
import VideoDialog from '@/components/video' | |||
export default { | |||
name: 'information', | |||
@@ -105,7 +105,7 @@ export default { | |||
this.getguanggao() | |||
this.gethotlist() | |||
this.getvideoList() | |||
this.getCarArticle() | |||
}, | |||
methods: { | |||
routerToarticleDetails (value) { | |||
@@ -154,12 +154,6 @@ export default { | |||
subtitle: data.list[index].subTitle, | |||
detail: data.list[index].detail | |||
}) | |||
this.carList.push({ | |||
title: data.list[index].title, | |||
img: data.list[index].image, | |||
subtitle: data.list[index].subTitle, | |||
detail: data.list[index].detail | |||
}) | |||
} | |||
} | |||
}, | |||
@@ -172,6 +166,12 @@ export default { | |||
videoPlayer (item) { | |||
this.videoUrl = item.link | |||
this.videoDialogVisible = true | |||
}, | |||
async getCarArticle() { | |||
const { data: { message, data } } = await carArticle() | |||
if (message === 'success') { | |||
this.carList = data.list | |||
} | |||
} | |||
} | |||
} | |||
@@ -30,21 +30,16 @@ | |||
</div> | |||
<div id="daliay"> | |||
<div class="content"> | |||
<!-- <div class="top"> | |||
</div> --> | |||
<div class="htitle"> | |||
<a class="tle">资讯</a> | |||
<!-- <div class="item"> | |||
<a v-for="item in information" :key="item" @click="changenews(item)" :class="{ clk: informationitem === item }">{{ item }}</a> | |||
</div> --> | |||
<el-button type="text" @click="routerTo">MORE+</el-button> | |||
</div> | |||
<div id="hotList"> | |||
<div class="list" v-for="(item, index) in zixun" :key="index" @click="routerToarticleDetails(item.detail)"> | |||
<img :src="item.img"> | |||
<img :src="item.image"> | |||
<div class="txt"> | |||
<a class="title">{{ item.title }}</a> | |||
<a class="subtitle">{{ item.subtitle }}</a> | |||
<a class="subtitle">{{ item.detailText }}</a> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -66,10 +61,10 @@ | |||
</div> | |||
<div id="hotList"> | |||
<div class="list" v-for="(item, index) in shendu" :key="index" @click="routerToarticleDetails(item.detail)"> | |||
<img :src="item.img"> | |||
<img :src="item.image"> | |||
<div class="txt"> | |||
<a class="title">{{ item.title }}</a> | |||
<a class="subtitle">{{ item.subtitle }}</a> | |||
<a class="subtitle">{{ item.detailText }}</a> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -84,9 +79,8 @@ export default { | |||
name: 'metadaily', | |||
data () { | |||
return { | |||
information: ['XR', 'Web3', 'Ai'], | |||
informationitem: 'XR', | |||
depth: ['XR', 'Web3', 'Ai'], | |||
information: ['XR', 'Web3', 'AI'], | |||
depth: ['XR', 'Web3', 'AI'], | |||
depthitem: 'XR', | |||
carouselList: [], | |||
hotnews: {}, | |||
@@ -118,7 +112,6 @@ export default { | |||
this.$router.push({ path: '/articleList' }) | |||
}, | |||
changenews (item) { | |||
this.informationitem = item | |||
this.getzixun() | |||
}, | |||
changedepth (item) { | |||
@@ -172,31 +165,15 @@ export default { | |||
} | |||
}, | |||
async getshendu () { | |||
this.shendu = [] | |||
const { data: { message, data } } = await shendu(1, 10, this.depthitem) | |||
if (message === 'success') { | |||
for (const iter of data.list) { | |||
this.shendu.push({ | |||
title: iter.title, | |||
img: iter.image, | |||
subtitle: iter.subTitle, | |||
detail: iter.detail | |||
}) | |||
} | |||
this.shendu = data.list | |||
} | |||
}, | |||
async getzixun () { | |||
this.zixun = [] | |||
const { data: { message, data } } = await zixun(1, 10, this.informationitem) | |||
const { data: { message, data } } = await zixun(1, 10) | |||
if (message === 'success') { | |||
for (const iter of data.list) { | |||
this.zixun.push({ | |||
title: iter.title, | |||
img: iter.image, | |||
subtitle: iter.subTitle, | |||
detail: iter.detail | |||
}) | |||
} | |||
this.zixun = data.list | |||
} | |||
} | |||
} | |||