Browse Source

视频

master
我叫MT 1 year ago
parent
commit
c93364cc72
2 changed files with 47 additions and 25 deletions
  1. +45
    -25
      src/components/swiperHor/index.vue
  2. +2
    -0
      src/views/aigc/index.vue

+ 45
- 25
src/components/swiperHor/index.vue View File

@@ -5,7 +5,7 @@
<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 :src="item.img">
<img class="swiperimg" :src="item.img">
<el-button>进入直播间</el-button>
<div class="textzb">
<a class="titlezb">主播: {{ item.name }}</a>
@@ -13,9 +13,11 @@
</div>
</div>
<div v-else class="videozb">
<img :src="item.img">
<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">
<div class="textzb">
<!-- <a class="titlezb">主播: {{ item.name }}</a> -->
<a class="contentzb">{{ item.content }}</a>
</div>
</div>
@@ -64,6 +66,17 @@ export default {
// autoplay: 3000,
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'
}
}
}
}
@@ -96,7 +109,7 @@ export default {
.swiper-slide {
width: 230px;
margin-right: 20px;
img {
.swiperimg {
width: 230px;
display: block;
}
@@ -136,7 +149,14 @@ export default {
float: left;
margin-right: 20px;
position: relative;
img {
.play {
position: absolute;
margin: 0 auto;
top: 50%;
margin-left: 40%;
margin-top: -60px;
}
video {
width: 230px;
}
.textzb {
@@ -154,29 +174,29 @@ export default {
line-height: 30px;
}
.contentzb{
margin-top: 10px;
width: 207px;
font-size: 18px;
font-weight: 400;
color: #030303;
line-height: 24px;
margin-top: 10px;
width: 207px;
font-size: 18px;
font-weight: 400;
color: #030303;
line-height: 24px;
}
}
}
.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: 200px;
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: 200px;
// z-index: 99;
// background-repeat: no-repeat;
// }
}
</style>

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

@@ -183,7 +183,9 @@ export default {
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,


Loading…
Cancel
Save