视频样式

guanqb

2023-02-17 47c98f24d8b7b16cfc0e95f510d91b6ca4cd334d

视频样式

 src/styles/base/index.scss

@@ -160,9 +160,9 @@
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        width: 320px;
        top: 50%;
        left: 50% !important;
        width: 240px;
        top: 30%;
        left: 80% !important;
        transform: translate(-50%, -50%);

        .el-dialog__body {

 src/views/activity/index.vue

@@ -339,7 +339,7 @@
        </div>

        <div class="item video5" v-show="videoShow">
            <div class="select" v-show="isShowSelect.video5&&isHaveMonitor.video5">
            <div class="select" v-show="isShowSelect.video5">
                <el-select
                    size="small"
                    v-model="monitor.type5"
@@ -355,7 +355,7 @@
                    ></el-option>
                </el-select>
            </div>
            <div class="video" v-show="isHaveMonitor.video5">
            <div class="video">
                <video
                    id="videoElement5"
                    autoplay
@@ -368,7 +368,7 @@
            <div class="no-video" v-show="!isHaveMonitor.video5">暂无数据</div>
        </div>
        <div class="item video6" v-show="videoShow">
            <div class="select" v-show="isShowSelect.video6&&isHaveMonitor.video6">
            <div class="select" v-show="isShowSelect.video6">
                <el-select
                    size="small"
                    v-model="monitor.type6"
@@ -384,7 +384,7 @@
                    ></el-option>
                </el-select>
            </div>
            <div class="video" v-show="isHaveMonitor.video6">
            <div class="video">
                <video
                    id="videoElement6"
                    autoplay
@@ -397,7 +397,7 @@
            <div class="no-video" v-show="!isHaveMonitor.video6">暂无数据</div>
        </div>
        <div class="item video7" v-show="videoShow">
            <div class="select" v-show="isShowSelect.video7&&isHaveMonitor.video7">
            <div class="select" v-show="isShowSelect.video7">
                <el-select
                    size="small"
                    v-model="monitor.type7"
@@ -415,7 +415,7 @@
                    ></el-option>
                </el-select>
            </div>
            <div class="video" v-show="isHaveMonitor.video7">
            <div class="video">
                <video
                    id="videoElement7"
                    autoplay
@@ -428,7 +428,7 @@
            <div class="no-video" v-show="!isHaveMonitor.video7">暂无数据</div>
        </div>
        <div class="item video8" v-show="videoShow">
            <div class="select" v-show="isShowSelect.video8&&isHaveMonitor.video8">
            <div class="select" v-show="isShowSelect.video8">
                <el-select
                    size="small"
                    v-model="monitor.type8"
@@ -444,7 +444,7 @@
                    ></el-option>
                </el-select>
            </div>
            <div class="video" v-show="isHaveMonitor.video8">
            <div class="video">
                <video
                    id="videoElement8"
                    autoplay
@@ -1817,7 +1817,7 @@
        },

        getRegionList (positionNewStr) {
            getRegionList(1, 15, positionNewStr).then(res => {
            getRegionList({ page: 1, count: 15, range: positionNewStr }).then(res => {
                let monitorData = res.data.data.list
                this.monitorOption = []
                monitorData.forEach((item, index) => {
@@ -2558,16 +2558,23 @@
            padding: 1%;
        }
        .no-video {
            color: #fff;
            font-size: 32px;
            letter-spacing: 4px;
            width: 98%;
            height: 98%;
            background-color: rgba(0, 0, 0, 0.7);
            margin: 1%;
            display: flex;
            align-items: center;
            justify-content: center;
            // color: #fff;
            // font-size: 32px;
            // letter-spacing: 4px;
            // width: 98%;
            // height: 98%;
            // background-color: rgba(0, 0, 0, 0.7);
            // margin: 1%;
            // display: flex;
            // align-items: center;
            // justify-content: center;
            position: absolute;
            color: #eee;
            letter-spacing: 2px;
            font-size: 24px;
            width: 100%;
            text-align: center;
            top: 40%;
        }
    }


 src/views/video/region.vue

@@ -659,41 +659,12 @@

        rowClick (row) {
            if (this.saveRangeID == row.id) {
                let videoClose = {
                    video1: false,
                    video2: false,
                    video3: false,
                    video4: false,
                    video5: false,
                    video6: false,
                    video7: false,
                    video8: false
                }
                if (this.isShowVideo == videoClose) {
                    this.isShowVideo = {
                        video1: true,
                        video2: true,
                        video3: true,
                        video4: true,
                        video5: true,
                        video6: true,
                        video7: true,
                        video8: true
                this.monitorOption.forEach((item, index) => {
                    if (index < 8) {
                        this.isShowVideo[`video${index + 1}`] = !this.isShowVideo[`video${index + 1}`]
                    }
                } else {
                    this.isShowVideo = {
                        video1: false,
                        video2: false,
                        video3: false,
                        video4: false,
                        video5: false,
                        video6: false,
                        video7: false,
                        video8: false
                    }
                }
                })
            } else {
                console.log(123)
                this.isShowVideo = {
                    video1: false,
                    video2: false,
@@ -1142,23 +1113,35 @@
    .video1 {
        top: calc(60 / 1080 * 100vh);
        left: calc(1540 / 1920 * 100vw);
        .video {
            padding: 1% 1% 0 1%;
        }
    }

    .video2 {
        top: calc(60 / 1080 * 100vh);
        left: calc(400 / 1920 * 100vw);
        .video {
            padding: 1% 1% 0 1%;
        }
    }

    .video3 {
        left: calc(400 / 1920 * 100vw);
        // top: calc(340 / 1080 * 100vh);
        top: calc(400 / 1080 * 100vh);
        .video {
            padding: 1% 1% 0 1%;
        }
    }

    .video4 {
        left: calc(1540 / 1920 * 100vw);
        // top: calc(340 / 1080 * 100vh);
        top: calc(400 / 1080 * 100vh);
        .video {
            padding: 1% 1% 0 1%;
        }
    }

    .video5 {
@@ -1177,12 +1160,18 @@
        left: calc(780 / 1920 * 100vw);
        // top: calc(680 / 1080 * 100vh);
        top: calc(740 / 1080 * 100vh);
        .video {
            padding: 1% 0 1% 0;
        }
    }

    .video8 {
        left: calc(1160 / 1920 * 100vw);
        // top: calc(680 / 1080 * 100vh);
        top: calc(740 / 1080 * 100vh);
        .video {
            padding: 1% 0 1% 1%;
        }
    }
    .deleteVideo {
        // position: absolute;