视频巡逻使用调色盘修改颜色

guanqb

2023-03-01 f6bc78b3dc9f492e9795b77aa5184b0acc4666e6

视频巡逻使用调色盘修改颜色

 src/styles/base/index.scss

@@ -988,17 +988,22 @@
        display: flex;
        flex-direction: column;
        width: 240px;
        height: 176px;
        height: 170px;

        .el-dialog__body {
            .el-button {
                padding: 0;
                background-color: #409eff;
                background-color: rgba(8, 56, 185, 0.9);
                border: 1px solid rgba(8, 56, 185, 0.9);
                color: #fff;
                width: 60px;
                height: 30px;
                text-align: center;
                margin-top: 10px;
            }

            .el-button:hover {
                background-color: #409EFF;
            }

            &>div {
@@ -1011,41 +1016,12 @@
                height: 32px;
                line-height: 32px;
                width: 120px;
                text-align: left;
            }

            .color-box {
            .line {
                display: flex;
                width: 140px;
                height: 32px;
                background-color: rgba(8, 56, 185, 0.5);
                padding: 6px;


                &>div {
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    border: 1px solid #409EFF;
                    margin-right: 10px;
                    cursor: pointer;
                    user-select: none;
                }

                &>div:hover {
                    border: 1px solid #eee;
                }

                .red-color {
                    background-color: red;
                }

                .green-color {
                    background-color: green;
                }

                .blue-color {
                    background-color: blue;
                }
                justify-content: left;
            }

            .input-width-box {

 src/styles/media/index.scss

@@ -2296,38 +2296,22 @@
                    .edit-range-box {
                        .el-dialog {
                            width: countSizeVw(240, 1920);
                            height: countSizeVh(176);
                            height: countSizeVh(170);

                            .el-dialog__body {
                                .el-button {
                                    width: countSizeVw(60, 1920);
                                    height: countSizeVh(30);
                                    margin-top: countSizeVh(10);
                                }

                                &>div {
                                    margin-bottom: countSizeVh(10);
                                    margin-bottom: countSizeVh(2);
                                }

                                .value-name-box {
                                    height: countSizeVh(32);
                                    line-height: countSizeVh(32);
                                    width: countSizeVw(120, 1920);
                                }

                                .color-box {
                                    width: countSizeVw(140, 1920);
                                    height: countSizeVh(32);
                                    padding: countSizeVh(6);


                                    &>div {
                                        width: countSizeVw(20, 1920);
                                        height: countSizeVh(20);
                                        line-height: countSizeVh(20);
                                        border: countSizeVh(1) solid #409EFF;
                                        margin-right: countSizeVw(10, 1920);
                                    }
                                }

                                .input-width-box {
@@ -2337,7 +2321,6 @@
                                        border-radius: countSizeVh(4);
                                        padding-left: countSizeVw(15, 1920);
                                    }

                                }

                                .units {

 src/views/video/region.vue

@@ -228,20 +228,8 @@

        <el-dialog title="修改范围" :modal="false" :visible.sync="editRangeVisible" :close-on-click-modal="true"
            class="edit-range-box">
            <div>
                <!-- <div class="value-name-box">选择范围颜色：</div> -->
                <!-- <div class="color-box">
                    <div class="red-color" @click="changeRangeColor('#FF0000')">{{ chooseRangeColor == '#FF0000' ? '√' : '' }}
                    </div>
                    <div class="green-color" @click="changeRangeColor('#00FF00')">{{ chooseRangeColor == '#00FF00' ? '√' : ''
                    }}
                    </div>
                    <div class="blue-color" @click="changeRangeColor('#0000FF')">{{ chooseRangeColor == '#0000FF' ? '√' : ''
                    }}
                    </div>
                </div> -->
                <div class="line">
                <div class="value-name-box">选择颜色：</div>
                <div class="value-name-box">选择范围颜色：</div>
                <div class="pick-color-box">
                    <el-color-picker
                     v-model="chooseRangeColor"
@@ -249,7 +237,6 @@
                   </el-color-picker>
                </div>
                </div>
            </div>
            <div v-show="isLineRange">
                <div class="value-name-box">设置范围宽度：</div>
                <div class="input-width-box">
@@ -587,11 +574,6 @@
                 }
                 this.editRangeVisible =true
            }
        },

         // 改变范围颜色
         changeRangeColor (color) {
            this.chooseRangeColor = color
        },

        // 保存范围修改