样式修改

shuishen

2021-04-08 a4e06ccd3cd976fbe4eef99e188d42ec9f3ad054

 src/views/realTimePolice/realHistory.vue

@@ -13,6 +13,7 @@
      @row-save="rowSave"
      :before-open="beforeOpen"
      :row-style="rowStyle"
      row-class-name="tabFontSize"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
@@ -41,7 +42,14 @@
          :size="size"
          :type="type"
          @click.stop="handleStart(row)"
          >视频回放
          >实时视频
        </el-button>
        <el-button
          icon="el-icon-video-camera-solid"
          :size="size"
          :type="type"
          @click.stop="oldStartVideo(row)"
          >查看历史
        </el-button>
      </template>
    </avue-crud>
@@ -58,6 +66,27 @@
        height="600px"
      ></iframe>
    </el-drawer>

    <el-dialog
      class="old-video-dialog-box"
      width="100%"
      title="历史回放"
      :visible.sync="oldVideoSatart"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="vaddress = ''"
      append-to-body
    >
      <video
        :src="vaddress"
        muted="muted"
        autoplay="autoplay"
        loop
        id="old_video"
        style="width: 100%; height: 100%; object-fit: fill"
        controls
      ></video>
    </el-dialog>
  </basic-container>
</template>

@@ -85,14 +114,15 @@
        height: "auto",
        indexLabel: "序号",
        calcHeight: 30,
        menuWidth: 160,
        menuWidth: 240,
        size: "mini",
        border: false,
        stripe:true,
        labelWidth: "100",
        dialogWidth: 950,
        tip: false,
        searchShow: true,
        searchMenuSpan: 3,
        border: true,
        index: true,
        viewBtn: true,
        selection: true,
@@ -118,7 +148,7 @@
          {
            label: "报警时间",
            type: "datetime",
            width: 130,
            width: 160,
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            prop: "alarmTime",
@@ -205,6 +235,10 @@
            dicUrl: "/api/blade-system/region/select",
            span: 6,
            className: "cityClass1",
            hide: true,
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
          },
          {
            label: "地市",
@@ -220,6 +254,10 @@
            span: 3,
            labelWidth: "0",
            className: "cityClass2",
            hide: true,
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
          },
          {
            label: "区县",
@@ -237,6 +275,10 @@
            span: 3,
            labelWidth: "0",
            className: "cityClass3",
            hide: true,
            addDisplay: true,
            editDisplay: true,
            viewDisplay: true,
          },
          {
            label: "警情状态",
@@ -266,12 +308,14 @@
            type: "datetime",
            format: "yyyy-MM-dd HH:mm:ss",
            valueFormat: "yyyy-MM-dd HH:mm:ss",
            width: 130,
            width: 160,
            prop: "jjTime",
          },
        ],
      },
      data: [],
      oldVideoSatart: false,
      vaddress: null,
    };
  },
  computed: {
@@ -561,9 +605,49 @@
    handleAdd11() {
      this.qwe = true;
    },
    oldStartVideo(row) {
      this.vaddress = row.vaddress;
      this.oldVideoSatart = true;
    },
  },
};
</script>

<style>

.old-video-dialog-box {
  position: absolute !important;
  top: 0px !important;
  left: 0px !important;
  right: 0px !important;
  bottom: 0px !important;
  margin: auto !important;
  width: 720px !important;
  z-index: 2200 !important;
}

.old-video-dialog-box .el-dialog {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: auto !important;
  height: 558px;
  border-radius: 10px 10px 10px 10px;
}

.old-video-dialog-box .el-dialog .el-dialog__header {
  padding-top: 10px;
}

.old-video-dialog-box .el-dialog .el-dialog__body {
  padding: 10px !important;
  height: calc(100% - 44px);
  box-sizing: border-box;
}

.tabFontSize{
  font-size: 15px;
}
</style>