caimei-applets-caimei/pages/login/components/caimei-video.vue

<template>
    <view class="video" :class="show ? 'video-show' : ''">
        <video :src="videoSrc" class="videoRef"></video>
        <view style="display: flex;width: 100%;flex-direction: row-reverse;" @click="cancel">
            <image
                src="@/static/supplier-login/close.png"
                mode=""
                class="iconfont icon-guanbi close"
                :class="show ? 'video-show' : ''"
            ></image>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: () => false
        },
        videoObj: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {}
    },
    methods: {
        cancel() {
            this.$emit('closeClick')
        }
    }
}
</script>

<style lang="scss" scoped>
.video {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
    z-index: 999;
    position: fixed;
    opacity: 0;
    display: none;
    left: 0;
    top: 0;
    .videoRef {
        width: 80%;
        height: 400rpx;
    }
}
.video-show {
    opacity: 1;
    display: flex !important;
}
.close {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 30rpx;
    margin-right: 8%;
}
</style>