<template>
    <view>
        <swiper :vertical="true" class="box" :style="`height: ${hw.height}px;;`">
            <swiper-item v-for="it in swiperList" :key="it.id" class="spitem">
                <view class="bg-video" :style="`width:${hw.width}px;height:${hw.height}px`">
                    <video class="vdplayer" :id="'vdplayer' + it.id" :ref="'vdplayer' + it.id" :src="it.mp4"
                        :controls="false" :duration="1000" :loop="true" :show-center-play-btn="true"
                        object-fit="contain" autoplay :style="`width:${hw.width}px;height:${hw.height}px;`" />
                    <view class="right_menu" :style="`top:${hw.height/2}px`">
                        <image :src="it.imgSrc" class="user_hp" />
                        <view @click="beFondOfClick(it)" class="imgBox">
                            <image class="spitemImage" src="@/static/image/d1.png" v-if="!it.beFondOf" />
                            <image class="spitemImage" src="@/static/image/d2.png" v-if="it.beFondOf" />
                            <view><text class="rtext">点赞</text></view>
                        </view>
                        <view class="imgBox">
                            <image class="spitemImage" src="@/static/image/pl.png" />
                            <view><text class="rtext">评论</text></view>
                        </view>
                        <view class="imgBox">
                            <image class="spitemImage" src="@/static/image/zf.png" />
                            <view><text class="rtext">转发</text></view>
                        </view>
                    </view>
                    <view class="bottom_info" :style="`bottom:${hw.height/6};width:${hw.width/2}`">
                        <view><text class="user_name">{{it.user_name}}</text></view>
                        <view><text class="video_introduce">{{it.video_introduce}}</text></view>
                    </view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

js

<script>
export default {
        data() {
            return {
                hw: {
                    width: 0,
                    height: 0
                },
                swiperList: [{
                    id: 1,
                    mp4: 'https://cdn.uviewui.com/uview/resources/video.mp4',
                    imgSrc:'../../static/image/logo.png',
                    user_name:'uni-app',
                    video_introduce:'一段视频简介，一段视频简介，一段视频简介，一段视频简介，一段视频简介',
                    beFondOf: false
                }, {
                    id: 2,
                    mp4: 'http://vcdnb.huoying666.com/new_video/2022/0725/b94a235358c31668dc99e7cff9fe5e9c/v1080/b94a235351_6921661_fhd.mp4',
                    imgSrc:'../../static/image/qsLoc.png',
                    user_name:'骑手小杨',
                    video_introduce:'一段视频简介，一段视频简介',
                    beFondOf: false
                }, {
                    id: 3,
                    mp4: 'http://vcdnb.huoying666.com/new_video/2020/1211/9d0b01c88bd05721f9de88122de72db1/v1080/9d0b01c881_5872976_fhd.mp4',
                    imgSrc:'../../static/image/wdLoc.png',
                    user_name:'无敌风火轮',
                    video_introduce:'一段视频简介，一段视频简介，一段视频简介，一段视频简介',
                    beFondOf: false
                }, {
                    id: 4,
                    mp4: 'http://vcdnb.huoying666.com/new_video/2021/1109/6f5610c304083ca59141c8f70aca6396/v720/6f5610c301_6578243_hd.mp4',
                    imgSrc:'../../static/tabbar/shopping_trolley2.png',
                    user_name:'购物狂魔',
                    video_introduce:'一段视频简介，一段视频简介，一段视频简介',
                    beFondOf: false
                }]
            }
        },
        onLoad() {
            let screenWidth = uni.getSystemInfoSync().screenWidth
            let screenHeight = uni.getSystemInfoSync().screenHeight
            this.hw = {
                width: screenWidth,
                height: screenHeight
            }
        },
        onShow() {
 
        },
        methods: {
            beFondOfClick(it) {
                it.beFondOf = !it.beFondOf
            }
        }
    }
</script>

css

<style lang="scss" scoped>
    .box {
        background-color: #333;
        text-align: center;
    }
 
    .bg-video {
        background-color: #333;
    }
 
    .right_menu {
        position: absolute;
        right: 30rpx;
        z-index: 990;
 
        .user_hp {
            margin-bottom: 30rpx;
            width: 50px;
            height: 50px;
            border: 2px solid #ffffff;
            background-color: #fff;
            border-radius: 50%;
        }
 
        .imgBox {
            display: flex;
            align-items: center;
 
            .spitemImage {
                width: 60rpx;
                height: 60rpx;
            }
 
            .rtext {
                text-align: center;
                color: #ffffff;
                font-size: 24rpx;
                margin-top: 10rpx;
                margin-bottom: 30rpx;
            }
        }
 
    }
    .bottom_info{
        position: absolute;
        left: 30rpx;
        z-index: 990;
        .user_name{
            font-size: 40rpx;
            font-weight: bold;
            color:#ffffff;
            margin-bottom: 20rpx;
        }
        .video_introduce{
            font-size: 28rpx;
            color:#ffffff;
        }
    }
</style>