Browse Source

轮播

master
我叫MT 1 year ago
parent
commit
8c4cc064e9
5 changed files with 142 additions and 159 deletions
  1. BIN
      src/assets/left.png
  2. BIN
      src/assets/right.png
  3. +107
    -97
      src/views/aigc/index.vue
  4. +35
    -60
      src/views/home/index.vue
  5. +0
    -2
      src/views/information/index.vue

BIN
src/assets/left.png View File

Before After
Width: 60  |  Height: 60  |  Size: 735 B

BIN
src/assets/right.png View File

Before After
Width: 60  |  Height: 60  |  Size: 712 B

+ 107
- 97
src/views/aigc/index.vue View File

@@ -41,7 +41,9 @@
<div class="aitxt"> <div class="aitxt">
<a class="title">{{ aitxt.title }}</a> <a class="title">{{ aitxt.title }}</a>
<a class="content">{{ aitxt.content }}</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> </div>
</div> </div>
@@ -56,7 +58,9 @@
<a>数字人视频</a> <a>数字人视频</a>
</div> </div>
<div id="zb"> <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"> <div v-if="item.flag === 'image'" :key="index" class="imagezb">
<img :src="item.img"> <img :src="item.img">
<el-button>进入直播间</el-button> <el-button>进入直播间</el-button>
@@ -73,6 +77,8 @@
</div> </div>
</div> </div>
</template> </template>
</div>
<img src="@/assets/right.png">
</div> </div>
</div> </div>
</div> </div>
@@ -109,56 +115,9 @@ export default {
resource: '', resource: '',
desc: '' 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: '', gg1: '',
gg2: '' gg2: ''
} }
@@ -175,6 +134,7 @@ export default {
this.getshuzirenZhiBoList() this.getshuzirenZhiBoList()
this.getvideoList() this.getvideoList()
this.getlunboList() this.getlunboList()
this.yidong()
}, },
methods: { methods: {
async getlunboList () { async getlunboList () {
@@ -183,8 +143,6 @@ export default {
for (const iter of data.list) { for (const iter of data.list) {
this.carouselList.push({ this.carouselList.push({
src: iter.image src: iter.image
// title: iter.link,
// subtitle: iter.link
}) })
} }
} }
@@ -203,24 +161,44 @@ export default {
if (message === 'success') { if (message === 'success') {
this.aitxt.title = data.title this.aitxt.title = data.title
this.aitxt.content = data.remark this.aitxt.content = data.remark
this.aitxt.link = data.link
} }
}, },
async getshuzirenList () { async getshuzirenList () {
const { data: { message, data } } = await shuzirenList() const { data: { message, data } } = await shuzirenList()
if (message === 'success') { if (message === 'success') {
console.log(data)
for (const iter of data.list) {
this.ailist.push({
img: iter.image,
label: iter.title
})
}
} }
}, },
async getshuzirenZhiBoList () { async getshuzirenZhiBoList () {
const { data: { message, data } } = await shuzirenZhiBoList() const { data: { message, data } } = await shuzirenZhiBoList()
if (message === 'success') { 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 () { async getvideoList () {
const { data: { message, data } } = await videoList() const { data: { message, data } } = await videoList()
if (message === 'success') { 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) { changenews (item) {
@@ -244,6 +222,22 @@ export default {
Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0) 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 { #zb {
margin-top: 40px; margin-top: 40px;
display: flex; 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; width: 220px;
float: left; float: left;
margin-right: 20px; 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;
}
} }
} }
} }


+ 35
- 60
src/views/home/index.vue View File

@@ -35,32 +35,6 @@
</el-carousel-item> </el-carousel-item>
</template> </template>
</el-carousel> </el-carousel>
<!-- <div id="videocar" class="lr">
<el-carousel :interval="5000" arrow="always" height="470px">
<template v-for="(item, index) in hotList.left" >
<el-carousel-item :key="item" v-if="item.split('.')[item.split('.').length - 1] === 'mp4'">
<video :id="'video'+index" :src="item" @click="videoPlayer(`video${index}`, `play${index}`)"/>
<img class="play" src="@/assets/play.png" @click="videoPlayer(`video${index}`, `play${index}`)" :id="'play'+index">
</el-carousel-item>
</template>
</el-carousel>
</div> -->
<!-- <div id="hottxt" class="lr">
<el-carousel :interval="5000" height="470px">
<el-carousel-item v-for="item in hotList.right" :key="item.title">
<div class="txtcontent">
<div class="title">
<img src="@/assets/tt.png">
{{ item.title }}
</div>
<p class="content">{{ item.content }}</p>
</div>
<div class="btn">
<el-button plain class="more" size="small">MORE</el-button>
</div>
</el-carousel-item>
</el-carousel>
</div> -->
</div> </div>
<div class="bottom" :style="{ backgroundImage: `url(${gg1})` }"/> <div class="bottom" :style="{ backgroundImage: `url(${gg1})` }"/>
</div> </div>
@@ -68,33 +42,27 @@
<div id="daliay"> <div id="daliay">
<div class="content"> <div class="content">
<div class="top"> <div class="top">
<div class="yyzrbtxt lr">
<img src="@/assets/rblogo.png" class="logo">
<el-carousel :interval="5000" arrow="always" height="470px">
<template v-for="(item, index) in daliay.left" >
<el-carousel-item :key="index">
<div class="txtcontent">
<div class="title">
{{ item.title }}
</div>
<p class="content" v-html="item.content" />
</div>
<div class="btn">
<el-button plain class="more" size="small">MORE</el-button>
<img src="@/assets/rblogo.png" class="logo">
<el-carousel :interval="5000" arrow="always" height="470px">
<template v-for="(item, index) in daliay.left" >
<el-carousel-item :key="index">
<div class="yyzrbtxt lr">
<div class="txtcontent">
<div class="title">
{{ item.title }}
</div> </div>
</el-carousel-item>
</template>
</el-carousel>
</div>
<div class="yyzrbimg lr" >
<el-carousel :interval="5000" arrow="always" height="470px">
<template v-for="(item, index) in daliay.right" >
<el-carousel-item :key="index">
<img :src="item.img" alt="">
</el-carousel-item>
</template>
</el-carousel>
</div>
<p class="content" v-html="item.content" />
</div>
<div class="btn">
<el-button plain class="more" size="small">MORE</el-button>
</div>
</div>
<div class="yyzrbimg lr" >
<img :src="daliay.right[index].img" alt="">
</div>
</el-carousel-item>
</template>
</el-carousel>
</div> </div>
<div class="bottom" :style="{ backgroundImage: `url(${gg2})` }"/> <div class="bottom" :style="{ backgroundImage: `url(${gg2})` }"/>
</div> </div>
@@ -188,7 +156,6 @@ export default {
const { data: { message, data: { list } } } = await yuanyuzhouHotList() const { data: { message, data: { list } } } = await yuanyuzhouHotList()
if (message === 'success') { if (message === 'success') {
for (const iter of list) { for (const iter of list) {
console.log(iter)
this.daliay.left.push({ this.daliay.left.push({
title: iter.news.title, title: iter.news.title,
content: iter.news.detail content: iter.news.detail
@@ -275,7 +242,12 @@ export default {
// background: black; // background: black;
display: flex; display: flex;
// padding-bottom: 30px; // padding-bottom: 30px;
.lr {
:deep .el-carousel__button {
width: 5px;
border-radius: 50%;
height: 5px;
}
.lr {
width: 50%; width: 50%;
height: 100%; height: 100%;
video { video {
@@ -298,6 +270,7 @@ export default {
.el-carousel { .el-carousel {
width: 100% !important; width: 100% !important;
} }
#hottxt { #hottxt {
background: #000000e6; background: #000000e6;
background-image: url('../../assets/footer_left.png'); background-image: url('../../assets/footer_left.png');
@@ -311,11 +284,6 @@ export default {
padding: 0 40px; padding: 0 40px;
:deep .el-carousel__indicators--horizontal { :deep .el-carousel__indicators--horizontal {
left: 90%; left: 90%;
}
:deep .el-carousel__button {
width: 5px;
border-radius: 50%;
height: 5px;
} }
.txtcontent { .txtcontent {
height: 50% !important; height: 50% !important;
@@ -376,12 +344,19 @@ export default {
background: #F2F4F8; background: #F2F4F8;
padding-top: 60px; padding-top: 60px;
.logo { .logo {
position: absolute;
left: 0; left: 0;
width: 165px;
height: 45px;
}
.content {
.top {
flex-direction:column;
}
} }
.top { .top {
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
.yyzrbtxt, .yyzrbimg{ .yyzrbtxt, .yyzrbimg{
height: 100%; height: 100%;
width: 47%; width: 47%;


+ 0
- 2
src/views/information/index.vue View File

@@ -190,7 +190,6 @@ export default {
}, },
async gethotlist () { async gethotlist () {
const { data: { message, data } } = await hotlist() const { data: { message, data } } = await hotlist()
console.log(message)
if (message === 'success') { if (message === 'success') {
this.hotnews.title = data.list[0].title this.hotnews.title = data.list[0].title
this.hotnews.img = data.list[0].image this.hotnews.img = data.list[0].image
@@ -199,7 +198,6 @@ export default {
title: data.list[0].title, title: data.list[0].title,
img: data.list[0].image img: data.list[0].image
}) })
console.log(data.list)
this.carList.push({ this.carList.push({
title: data.list[0].title, title: data.list[0].title,
img: data.list[0].image, img: data.list[0].image,


Loading…
Cancel
Save