|
|
@@ -41,7 +41,9 @@ |
|
|
|
<div class="aitxt">
|
|
|
|
<a class="title">{{ aitxt.title }}</a>
|
|
|
|
<a class="content">{{ aitxt.content }}</a>
|
|
|
|
<el-button round>制作数字人</el-button>
|
|
|
|
<a :href="aitxt.link" targrt="_blank">
|
|
|
|
<el-button round>制作数字人</el-button>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@@ -56,7 +58,9 @@ |
|
|
|
<a>数字人视频</a>
|
|
|
|
</div>
|
|
|
|
<div id="zb">
|
|
|
|
<template v-for="(item, index) in aigczb" >
|
|
|
|
<img src="@/assets/left.png">
|
|
|
|
<div id="zbitem">
|
|
|
|
<template v-for="(item, index) in aigczb" >
|
|
|
|
<div v-if="item.flag === 'image'" :key="index" class="imagezb">
|
|
|
|
<img :src="item.img">
|
|
|
|
<el-button>进入直播间</el-button>
|
|
|
@@ -73,6 +77,8 @@ |
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</div>
|
|
|
|
<img src="@/assets/right.png">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@@ -109,56 +115,9 @@ export default { |
|
|
|
resource: '',
|
|
|
|
desc: ''
|
|
|
|
},
|
|
|
|
ailist: [
|
|
|
|
{
|
|
|
|
img: '/ai1.png',
|
|
|
|
label: 'XWOM 002'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
img: '/ai2.png',
|
|
|
|
label: '数字人ACER'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
img: '/ai3.png',
|
|
|
|
label: '车助手002'
|
|
|
|
}
|
|
|
|
],
|
|
|
|
aitxt: {
|
|
|
|
title: 'ACER助力车企新势力',
|
|
|
|
content: '作为国产豪华大皮卡山海炮的越野版本,山海炮性能版被称为“国产皮卡扛把子”。新车基于长城坦克平台开发,搭载国内最强的自研3.0T'
|
|
|
|
},
|
|
|
|
aigczb: [
|
|
|
|
{
|
|
|
|
img: '/aigc_img5.png',
|
|
|
|
name: '主播名',
|
|
|
|
content: '新车选购',
|
|
|
|
flag: 'image'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
img: '/aigc_img1.png',
|
|
|
|
name: '主播名',
|
|
|
|
content: '新车选购',
|
|
|
|
flag: 'image'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
img: '/aigc_img2.png',
|
|
|
|
name: '主播名',
|
|
|
|
content: '新车选购',
|
|
|
|
flag: 'image'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
img: '/aigc_img3.png',
|
|
|
|
name: '丰田锋兰达值得买吗?',
|
|
|
|
content: '年底购车多少钱能落地价?',
|
|
|
|
flag: 'video'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
img: '/aigc_img3.png',
|
|
|
|
name: '丰田锋兰达值得买吗?',
|
|
|
|
content: '年底购车多少钱能落地价?',
|
|
|
|
flag: 'video'
|
|
|
|
}
|
|
|
|
],
|
|
|
|
ailist: [],
|
|
|
|
aitxt: {},
|
|
|
|
aigczb: [],
|
|
|
|
gg1: '',
|
|
|
|
gg2: ''
|
|
|
|
}
|
|
|
@@ -175,6 +134,7 @@ export default { |
|
|
|
this.getshuzirenZhiBoList()
|
|
|
|
this.getvideoList()
|
|
|
|
this.getlunboList()
|
|
|
|
this.yidong()
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
async getlunboList () {
|
|
|
@@ -183,8 +143,6 @@ export default { |
|
|
|
for (const iter of data.list) {
|
|
|
|
this.carouselList.push({
|
|
|
|
src: iter.image
|
|
|
|
// title: iter.link,
|
|
|
|
// subtitle: iter.link
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
@@ -203,24 +161,44 @@ export default { |
|
|
|
if (message === 'success') {
|
|
|
|
this.aitxt.title = data.title
|
|
|
|
this.aitxt.content = data.remark
|
|
|
|
this.aitxt.link = data.link
|
|
|
|
}
|
|
|
|
},
|
|
|
|
async getshuzirenList () {
|
|
|
|
const { data: { message, data } } = await shuzirenList()
|
|
|
|
if (message === 'success') {
|
|
|
|
console.log(data)
|
|
|
|
for (const iter of data.list) {
|
|
|
|
this.ailist.push({
|
|
|
|
img: iter.image,
|
|
|
|
label: iter.title
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
async getshuzirenZhiBoList () {
|
|
|
|
const { data: { message, data } } = await shuzirenZhiBoList()
|
|
|
|
if (message === 'success') {
|
|
|
|
console.log(data)
|
|
|
|
for (const iter of data.list) {
|
|
|
|
this.aigczb.push({
|
|
|
|
img: iter.image.split('?')[0],
|
|
|
|
name: iter.title,
|
|
|
|
content: iter.subTitle,
|
|
|
|
flag: 'image'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
async getvideoList () {
|
|
|
|
const { data: { message, data } } = await videoList()
|
|
|
|
if (message === 'success') {
|
|
|
|
console.log(data)
|
|
|
|
for (const iter of data.list) {
|
|
|
|
this.aigczb.push({
|
|
|
|
img: iter.image.split('?')[0],
|
|
|
|
name: iter.subTitle ? iter.subTitle : '主播名',
|
|
|
|
content: iter.title,
|
|
|
|
flag: 'video'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
changenews (item) {
|
|
|
@@ -244,6 +222,22 @@ export default { |
|
|
|
Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0)
|
|
|
|
]
|
|
|
|
}
|
|
|
|
},
|
|
|
|
yidong () {
|
|
|
|
const contentBox = document.getElementById('zbitem')
|
|
|
|
const scrollBox = document.getElementById('zb')
|
|
|
|
const imgWidth = 220
|
|
|
|
this.scroll(contentBox, scrollBox, imgWidth)
|
|
|
|
},
|
|
|
|
scroll (contentBox, scrollBox, imgWidth) {
|
|
|
|
setInterval(() => {
|
|
|
|
scrollBox.scrollLeft++
|
|
|
|
// 当一张图片恰好滚动至可视区域外
|
|
|
|
if (scrollBox.scrollLeft % imgWidth === 0) {
|
|
|
|
var el = contentBox.firstElementChild // 获取处于前面的图片
|
|
|
|
contentBox.appendChild(el) // appendChild()具备剪切功能,无需手动删除旧节点
|
|
|
|
}
|
|
|
|
}, 1000)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
@@ -488,7 +482,22 @@ export default { |
|
|
|
#zb {
|
|
|
|
margin-top: 40px;
|
|
|
|
display: flex;
|
|
|
|
.imagezb {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
align-items: center;
|
|
|
|
img {
|
|
|
|
height: 60px;
|
|
|
|
width: 60px;
|
|
|
|
}
|
|
|
|
#zbitem::-webkit-scrollbar{
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
#zbitem {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
|
|
overflow-x: auto;
|
|
|
|
.imagezb {
|
|
|
|
width: 220px;
|
|
|
|
float: left;
|
|
|
|
margin-right: 20px;
|
|
|
@@ -533,49 +542,50 @@ export default { |
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.videozb {
|
|
|
|
width: 220px;
|
|
|
|
height: 400px;
|
|
|
|
float: left;
|
|
|
|
margin-right: 20px;
|
|
|
|
position: relative;
|
|
|
|
img {
|
|
|
|
width: 220px;
|
|
|
|
height: 370px;
|
|
|
|
}
|
|
|
|
.textzb {
|
|
|
|
margin-top: 10px;
|
|
|
|
line-height: 16px;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
height: 40px;
|
|
|
|
width: 100%;
|
|
|
|
a {
|
|
|
|
width: 100%;
|
|
|
|
display: inline-block;
|
|
|
|
text-align: left;
|
|
|
|
.videozb {
|
|
|
|
width: 220px;
|
|
|
|
height: 400px;
|
|
|
|
float: left;
|
|
|
|
margin-right: 20px;
|
|
|
|
position: relative;
|
|
|
|
img {
|
|
|
|
width: 220px;
|
|
|
|
height: 370px;
|
|
|
|
}
|
|
|
|
.contentzb{
|
|
|
|
margin-top: 10px;
|
|
|
|
.textzb {
|
|
|
|
margin-top: 10px;
|
|
|
|
line-height: 16px;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
height: 40px;
|
|
|
|
width: 100%;
|
|
|
|
a {
|
|
|
|
width: 100%;
|
|
|
|
display: inline-block;
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
.contentzb{
|
|
|
|
margin-top: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.videozb::after {
|
|
|
|
content: '';
|
|
|
|
z-index: 99;
|
|
|
|
width: 55px;
|
|
|
|
height: 55px;
|
|
|
|
position: absolute;
|
|
|
|
background-image: url('../../assets/play.png');
|
|
|
|
background-size: 100%;
|
|
|
|
left: 50%;
|
|
|
|
margin-left: -27.5px;
|
|
|
|
top: 40%;
|
|
|
|
z-index: 99;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
.videozb::after {
|
|
|
|
content: '';
|
|
|
|
z-index: 99;
|
|
|
|
width: 55px;
|
|
|
|
height: 55px;
|
|
|
|
position: absolute;
|
|
|
|
background-image: url('../../assets/play.png');
|
|
|
|
background-size: 100%;
|
|
|
|
left: 50%;
|
|
|
|
margin-left: -27.5px;
|
|
|
|
top: 40%;
|
|
|
|
z-index: 99;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|