根据数据长度进行分屏操作

最新推荐文章于 2024-11-11 00:01:33 发布

今天吃了嘛o

最新推荐文章于 2024-11-11 00:01:33 发布

阅读量69

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_45535843/article/details/116155999

版权

页面：

<div
    v-bind:class="[
        playerOptions.length == 1 ? 'quarter-div' : '',
        playerOptions.length < 4 && playerOptions.length > 1 ? 'quarter-div4' : '',
        playerOptions.length < 9 && playerOptions.length > 4 ? 'quarter-div9' : '',
        playerOptions.length < 16 && playerOptions.length > 9 ? 'quarter-div16' : ''
    ]"
    v-for="(item, index) of playerOptions"
    :key="index"
    :id="'div' + index"
>
    <!-- <a @click="divClick(index)"></a> -->
    <!-- <h3>{{ item.cameraCode }}</h3> -->
    <h5>设备编码：{{ item.cameraCode }}</h5>
    <video
        ref="videoElement"
        :id="'id' + index"
        controls
        autoplay
        muted
        width="100%"
        height="100%"
        :url="item.url"
        @click="divClick(index)"
    ></video>
</div>
data(){
    return{
         //video视频
        playerOptions: [],
    }
}
样式：
.quarter-div16 {
    width: 23%;
    height: 150px;
    float: left;
    box-sizing: border-box;
    // border: 2px solid #00d1b2;
    margin: 1%;
     .video-js {
        width: 100% !important;
        height: 100% !important;
    }
    .video-player {
        width: 100% !important;
        height: 100% !important;
    }
}
.quarter-div9 {
    width: 31.33%;
    height: 200px;
    float: left;
    box-sizing: border-box;
    // border: 2px solid #00d1b2;
    margin: 1%;
     .video-js {
        width: 100% !important;
        height: 100% !important;
    }
    .video-player {
        width: 100% !important;
        height: 100% !important;
    }
}

.quarter-div4 {
    position: relative;
    width: 48%;
    height: 300px;
    float: left;
    box-sizing: border-box;
    // border: 2px solid #00d1b2;
    margin: 1%;
     .video-js {
        width: 100% !important;
        height: 100% !important;
    }
    .video-player {
        width: 100% !important;
        height: 100% !important;
    }
}

.quarter-div {
    width: 100%;
    height: 600px;
    box-sizing: border-box;
    // border: 2px solid #00d1b2;
    position: relative;
    .video-js {
        width: 100% !important;
        height: 100% !important;
    }
    .video-player {
        width: 100% !important;
        height: 100% !important;
    }
}