<template>
|
<div class="right-side">
|
<div class="figure s-system-manage">
|
<el-tabs
|
id="e-basic-setting"
|
v-model="actPage"
|
v-loading="loading"
|
element-loading-text="加载中"
|
type="border-card"
|
>
|
<el-tab-pane label="摄像机标注" name="1">
|
<div class v-for="camera in relativeCameras" :key="camera.id">
|
<div class="action-bar">
|
<div class="tool-bar">
|
<div>
|
<!-- <input type="color" ref="colorPicker" v-model="color"> -->
|
<label for>拾色器:</label>
|
<el-color-picker v-model="camera.colorPick" show-alpha size="mini"></el-color-picker>
|
</div>
|
<div style="width:250px;">
|
<label for>笔触:</label>
|
<el-slider v-model="camera.dotSize" :min="1" :max="20"></el-slider>
|
</div>
|
<div>
|
<el-button type="text" @click="editPolygon(camera.id)">编辑区域</el-button>
|
<el-button @click="editCoor(camera.id)">编辑标注信息</el-button>
|
</div>
|
<div>
|
<el-button
|
v-if="!camera.isEdit"
|
class="drawboard-trigger"
|
size="small"
|
@click="editCameraData(camera)"
|
icon="el-icon-edit"
|
>编辑</el-button>
|
|
<el-button
|
v-if="camera.isEdit"
|
class="drawboard-trigger save"
|
size="small"
|
@click="submitInfo"
|
icon="el-icon-lock"
|
>保存</el-button>
|
</div>
|
</div>
|
</div>
|
<el-dialog :visible.sync="coordsDialogVisible" width="1150px">
|
<div class="drawboard shadow-box">
|
<div
|
class="mask"
|
:class="{'edit-status-mask':camera.isEdit}"
|
:ref="`editBoard_${camera.id}`"
|
>
|
<polygon-canvas
|
class="polygon-canvas"
|
:ref="`polygonCanvas_${camera.id}`"
|
:snapshot_url="camera.snapshot_url"
|
:canvasWidth="960"
|
:canvasHeight="540"
|
></polygon-canvas>
|
<!-- <div
|
class="label"
|
@click="editLabel(item)"
|
v-for="(item,index) in curCameraData.coords"
|
:key="index"
|
:style="{left:`${item.x0}px`, top:`${item.y0}px`, backgroundColor: colorPick, width: `${dotSize}px`, height: `${dotSize}px` }"
|
></div>-->
|
<div
|
class="label"
|
@click="editLabel(item)"
|
v-for="(item,index) in camera.coords"
|
:key="index"
|
:style="{left:`${item.x0}px`, top:`${item.y0}px`, backgroundColor: camera.colorPick, width: `${camera.dotSize}px`, height: `${camera.dotSize}px` }"
|
></div>
|
</div>
|
<img v-show="camera.snapshot_url" :src="`/httpImage/${camera.snapshot_url}`" alt />
|
<div
|
class="popBox"
|
v-show="camera.isShowPop"
|
:style="`top:${curLabel.y0 + 22}px;left:${curLabel.x0}px`"
|
>
|
<div class="title">标注信息</div>
|
<div class="details">
|
<el-form :model="curLabel" :rules="rules" :ref="`labelForm_${camera.id}`">
|
<div class="detail-item">
|
<div class="left">
|
<el-form-item prop="x0">
|
<label for>平面坐标X:</label>
|
<span class="fix-width">{{curLabel.x0}}</span>
|
<i>px</i>
|
</el-form-item>
|
</div>
|
<span class="devide"></span>
|
<div class="right">
|
<el-form-item prop="x1">
|
<label for>实际坐标X:</label>
|
<el-input
|
type="text"
|
size="mini"
|
style="width:90px"
|
v-model.number="curLabel.x1"
|
></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
<div class="detail-item">
|
<div class="left">
|
<el-form-item prop="y0">
|
<label for>平面坐标Y:</label>
|
<span class="fix-width">{{curLabel.y0}}</span>
|
<i>px</i>
|
</el-form-item>
|
</div>
|
<span class="devide"></span>
|
<div class="right">
|
<el-form-item prop="y1">
|
<label for>实际坐标Y:</label>
|
<el-input
|
type="text"
|
size="mini"
|
style="width:90px"
|
v-model.number="curLabel.y1"
|
></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
<div class="btns">
|
<el-button size="mini" type="danger" @click="deleteLabel">删除</el-button>
|
<el-button size="mini" type="primary" @click="cancle">取消</el-button>
|
<el-button size="mini" type="success" @click="sure">确定</el-button>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
<!-- <div class="drawboard shadow-box">
|
<div class="mask" :class="{'edit-status-mask':camera.isEdit}" :ref="`editBoard_${camera.id}`">
|
<polygon-canvas
|
class="polygon-canvas"
|
:ref="`polygonCanvas_${camera.id}`"
|
:snapshot_url="camera.snapshot_url"
|
:canvasWidth="960"
|
:canvasHeight="540"
|
></polygon-canvas>
|
<div
|
class="label"
|
@click="editLabel(item)"
|
v-for="(item,index) in camera.coords"
|
:key="index"
|
:style="{left:`${item.x0}px`, top:`${item.y0}px`, backgroundColor: camera.colorPick, width: `${camera.dotSize}px`, height: `${camera.dotSize}px` }"
|
></div>
|
</div>
|
<img v-show="camera.snapshot_url" :src="`/httpImage/${camera.snapshot_url}`" alt />
|
<div
|
class="popBox"
|
v-show="camera.isShowPop"
|
:style="`top:${curLabel.y0 + 22}px;left:${curLabel.x0}px`"
|
>
|
<div class="title">标注信息</div>
|
<div class="details">
|
<el-form :model="curLabel" :rules="rules" :ref="`labelForm_${camera.id}`">
|
<div class="detail-item">
|
<div class="left">
|
<el-form-item prop="x0">
|
<label for>平面坐标X:</label>
|
<span class="fix-width">{{curLabel.x0}}</span>
|
<i>px</i>
|
</el-form-item>
|
</div>
|
<span class="devide"></span>
|
<div class="right">
|
<el-form-item prop="x1">
|
<label for>实际坐标X:</label>
|
<el-input
|
type="text"
|
size="mini"
|
style="width:90px"
|
v-model.number="curLabel.x1"
|
></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
<div class="detail-item">
|
<div class="left">
|
<el-form-item prop="y0">
|
<label for>平面坐标Y:</label>
|
<span class="fix-width">{{curLabel.y0}}</span>
|
<i>px</i>
|
</el-form-item>
|
</div>
|
<span class="devide"></span>
|
<div class="right">
|
<el-form-item prop="y1">
|
<label for>实际坐标Y:</label>
|
<el-input
|
type="text"
|
size="mini"
|
style="width:90px"
|
v-model.number="curLabel.y1"
|
></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
<div class="btns">
|
<el-button size="mini" type="danger" @click="deleteLabel">删除</el-button>
|
<el-button size="mini" type="primary" @click="cancle">取消</el-button>
|
<el-button size="mini" type="success" @click="sure">确定</el-button>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
</div>-->
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="追踪实景坐标" name="2">
|
<div class="user-upload">
|
<canvas id="trackArea" width="960" height="540"></canvas>
|
<div class="img-card">
|
<el-upload
|
class="upload-demo"
|
drag
|
action="https://jsonplaceholder.typicode.com/posts/"
|
:http-request="definedUpload"
|
:on-change="onChange"
|
:show-file-list="false"
|
>
|
<el-image
|
class="preview"
|
v-if="userImg"
|
:src="userImg"
|
fit="contain"
|
@mousemove="showCurPos"
|
@mouseout="isShowCurPos=false"
|
></el-image>
|
<div class="el-upload__text">
|
将文件拖到此处,或
|
<em>点击上传</em>
|
</div>
|
</el-upload>
|
</div>
|
<div class="info">
|
<div class="input-area">
|
<div>
|
<label for>空间宽:</label>
|
<el-input v-model="spaceWidth" placeholder="请输入实际空间宽" size="small"></el-input>
|
</div>
|
<div>
|
<label for>空间高:</label>
|
<el-input v-model="spaceHeight" placeholder="请输入实际空间高" size="small"></el-input>
|
</div>
|
</div>
|
<div class="pos" v-show="isShowCurPos">
|
当前位置:
|
<b>{{traceX}}</b>,
|
<b>{{traceY}}</b>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
<!-- <el-collapse v-model="actPage">
|
<el-collapse-item title="摄像机标注" name="1">
|
|
</el-collapse-item>
|
<el-collapse-item title="追踪实景坐标" name="2">
|
<div class="user-upload">
|
<div class="img-card">
|
<el-upload
|
class="upload-demo"
|
drag
|
action="https://jsonplaceholder.typicode.com/posts/"
|
:http-request="definedUpload"
|
:on-change="onChange"
|
:show-file-list="false"
|
>
|
<el-image
|
class="preview"
|
v-if="userImg"
|
:src="userImg"
|
fit="contain"
|
@mousemove="showCurPos"
|
@mouseout="isShowCurPos=false"
|
></el-image>
|
<div class="el-upload__text">
|
将文件拖到此处,或
|
<em>点击上传</em>
|
</div>
|
</el-upload>
|
</div>
|
<div class="info" v-show="isShowCurPos">当前位置:{{traceX}},{{traceY}}</div>
|
</div>
|
</el-collapse-item>
|
</el-collapse>-->
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getCamerasByServer } from '@/api/pollConfig';
|
import { getCameraMarks, updateCameraMarks } from '@/api/camera';
|
import TreeDataPool from "@/Pool/TreeData";
|
import { isNonnegativeInteger } from '@/scripts/validate';
|
import polygonCanvas from "@/components/canvas";
|
export default {
|
components: { polygonCanvas },
|
data () {
|
return {
|
labels: [],
|
// colorPick: '#79f2fb',
|
// dotSize: 3,
|
// isEdit: false,
|
// isShowPop: false,
|
// isNewLabel: false,
|
curLabel: {
|
id: '',
|
x1: '',
|
y1: '',
|
x0: '',
|
y0: ''
|
},
|
rules: {
|
x1: [
|
{ validator: isNonnegativeInteger, trigger: 'change' }
|
],
|
y1: [
|
{ validator: isNonnegativeInteger, trigger: 'change' }
|
]
|
},
|
baseUrl: '',
|
//snapshot_url: '',
|
userImg: '',
|
cameraData: [],
|
traceX: 0,
|
traceY: 0,
|
isShowCurPos: false,
|
actPage: '1',
|
loading: false,
|
spaceWidth: '',
|
spaceHeight: '',
|
curCameraData: {
|
cameraId: '',
|
coords: []
|
},
|
relativeCameras: [],
|
relativeCamera: {
|
colorPick: '#79f2fb',
|
cameraId: '',
|
snapshot_url: '',
|
dotSize: 3,
|
isEdit: false,
|
isShowPop: false,
|
isNewLabel: false,
|
coords: [],
|
polygons: {}
|
},
|
trackData: []
|
}
|
},
|
computed: {
|
|
},
|
mounted () {
|
this.getAllCameraData();
|
//mock回显标注
|
setTimeout(() => {
|
let mockData = [{ id: 'a1', x0: 15, y0: 33, x1: 150, y1: 330 }, { id: 'b2', x0: 56, y0: 87, x1: 560, y1: 870 }];
|
//this.curCameraData.coords = mockData;
|
//this.trackData = [[950,370],[945,368],[940,360],[936,350],[930,340],[930,340]];
|
let tempArr = [];
|
for (var i = 0; i < 1000; i++) {
|
//let x = 960-i*9, y = 370 - i*3;
|
let x = Math.floor(Math.random() * 960);
|
let y = Math.floor(Math.random() * 540)
|
tempArr.push([x, y])
|
}
|
this.trackData = tempArr;
|
let canvas = document.querySelector('#trackArea');
|
let ctx = canvas.getContext('2d');
|
ctx.strokeStyle = 'yellow';
|
ctx.fillStyle = 'aqua';
|
// ctx.globalAlpha=0.5;
|
ctx.lineWidth = 1;
|
//ctx.lineJoin='round';
|
ctx.lineCap = 'round';
|
for (var i = 0; i < this.trackData.length; i++) {
|
ctx.fillRect(this.trackData[i][0], this.trackData[i][1], 5, 5);
|
ctx.lineTo(this.trackData[i][0], this.trackData[i][1]);
|
}
|
ctx.stroke();
|
}, 1000);
|
debugger
|
},
|
watch: {
|
// 'TreeDataPool.selectedNode': {
|
// handler (n, o) {
|
// let curCamera = this.cameraData.find(item => item.id == n.id);
|
// //设置摄像机底图
|
// this.snapshot_url = curCamera.snapshot_url;
|
// this.findCameraMarks(n.id);
|
// },
|
// deep: true
|
// },
|
'TreeDataPool.selectedNodes': {
|
handler (n, o) {
|
debugger
|
// if (n.length > 2) {
|
// this.$notify({
|
// type: 'warning',
|
// message: '最多仅能关联两个摄像机'
|
// });
|
// this.TreeDataPool.selectedNodes.length = 2;
|
// //目录树视图未更新
|
// }
|
var tempArr = [];
|
//根据id取摄像机标注信息及区域
|
let _this = this;
|
n.forEach(cameraId => {
|
//this.findCameraMarks(cameraId);
|
getCameraMarks({ cameraId }).then(res => {
|
let obj = _this.newCameraData();
|
//Object.assign(obj,)
|
//待联调
|
tempArr.push(res.data)
|
})
|
})
|
//mock
|
tempArr = [
|
{ id: '81b4c468-9828-41ad-a681-e90feb59490e', isEdit: false, isShowPop: false, colorPick: '#79f2fb', isNewLabel: false, dotSize: 3 },
|
{ id: '28477df1-78ec-49bc-8734-e977992667cc', isEdit: false, isShowPop: false, colorPick: '#79f2fb', isNewLabel: false, dotSize: 3 }
|
];
|
tempArr.forEach(item => {
|
this.cameraData.find(camera => {
|
if (camera.id == item.id) {
|
item.snapshot_url = camera.snapshot_url;
|
}
|
})
|
})
|
|
this.relativeCameras = tempArr
|
},
|
deep: true
|
},
|
relativeCameras: {
|
handler (n, o) {
|
var _this = this;
|
n.forEach(camera => {
|
debugger
|
// if(camera.isEdit){
|
// _this.$refs[`editBoard_${camera.id}`][0].addEventListener('click', this.bindListen);
|
// }else{
|
// _this.$refs[`editBoard_${camera.id}`][0].removeEventListener('click', this.bindListen);
|
// }
|
})
|
},
|
deep: true
|
},
|
// isEdit (n, o) {
|
// if (n) {
|
// this.$refs['editBoard'].addEventListener('click', this.bindListen);
|
// } else {
|
// this.$refs['editBoard'].removeEventListener('click', this.bindListen);
|
// }
|
// }
|
},
|
methods: {
|
newCameraData () {
|
return {
|
colorPick: '#79f2fb',
|
id: '',
|
snapshot_url: '',
|
dotSize: 3,
|
isEdit: false,
|
isShowPop: false,
|
isNewLabel: false,
|
coords: [],
|
polygons: {}
|
}
|
},
|
editPolygon (cameraId) {
|
debugger
|
this.$refs[`polygonCanvas_${cameraId}`][0].showModal();
|
},
|
sure () {
|
let _this = this;
|
// this.$refs[`labelForm_${}`].validate(valid => {
|
// console.log(valid)
|
// if (valid) {
|
// _this.isShowPop = false;
|
// debugger
|
// //编辑确定
|
// if (_this.curLabel.id) {
|
// // let editedIndex = _this.curCameraData.coords.findIndex(one => one.id == _this.curLabel.id);
|
// // _this.curCameraData.coords[editedIndex] = JSON.parse(JSON.stringify(_this.curLabel));
|
// let editedIndex = _this.relativeCamera.coords.findIndex(one => one.id == _this.curLabel.id);
|
// _this.relativeCamera.coords[editedIndex] = JSON.parse(JSON.stringify(_this.curLabel));
|
// }
|
// console.log(_this.curCameraData.coords)
|
// this.$refs['labelForm'].clearValidate();
|
// }
|
// });
|
},
|
//获取摄像机标注
|
findCameraMarks (id) {
|
getCameraMarks({ cameraId: id }).then(res => {
|
if (res.success) {
|
this.curCameraData.cameraId = id;
|
this.curCameraData.coords = res.data.map((item, index) => ({ id: 'm' + index, x0: item.x0, y0: item.y0, x1: item.x1, y1: item.y1 }));
|
|
}
|
}).catch(e => {
|
console.log(e)
|
});
|
},
|
editCameraData (camera) {
|
if (!this.TreeDataPool.selectedNode.id) {
|
this.$notify({
|
message: '请先选择摄像机',
|
type: 'warning'
|
});
|
return;
|
}
|
camera.isEdit = !camera.isEdit;
|
this.$refs[`editBoard_${camera.id}`][0].addEventListener('click', this.bindListen);
|
},
|
async submitInfo () {
|
this.isEdit = false;
|
let res = await updateCameraMarks(this.curCameraData);
|
if (res.success) {
|
this.findCameraMarks(this.curCameraData.cameraId);
|
}
|
},
|
showCurPos (e) {
|
console.log(e);
|
this.isShowCurPos = true;
|
this.traceX = e.offsetX;
|
this.traceY = e.offsetY;
|
},
|
onChange (file, fileList) {
|
fileList = [file]
|
this.isShowCurPos = false;
|
// this.traceX = e.offsetX;
|
// this.traceY = e.offsetY;
|
//fileList.push(file)
|
},
|
definedUpload (params) {
|
let _file = params.file
|
let fileReader = new FileReader()
|
fileReader.onload = () => {
|
this.userImg = fileReader.result
|
}
|
if (_file) {
|
fileReader.readAsDataURL(_file)
|
}
|
},
|
getAllCameraData () {
|
getCamerasByServer().then(res => {
|
if (res.success) {
|
this.cameraData = res.data;
|
}
|
}).catch(e => {
|
console.log(e)
|
})
|
},
|
bindListen (e) {
|
this.newLabel(e);
|
},
|
newLabel (e) {
|
debugger
|
console.log('点击了画板')
|
if (this.isShowPop) return;
|
//获取鼠标相对于画板的定位
|
console.log('获取当前定位信息');
|
this.$refs['labelForm'].resetFields();
|
let target = {
|
id: '',
|
x0: e.offsetX,
|
y0: e.offsetY,
|
x1: '',
|
y1: ''
|
};
|
target.id = 'n' + (this.curCameraData.coords.length - 1);
|
//this.labels.push(target);
|
this.curCameraData.coords.push(target);
|
this.curLabel = target;
|
this.isShowPop = true;
|
this.isNewLabel = true;
|
},
|
editLabel (label) {
|
debugger
|
if (!this.isEdit) return;
|
this.isShowPop = true;
|
this.$refs['labelForm'].clearValidate();
|
this.curLabel = JSON.parse(JSON.stringify(label));
|
console.log(this.curLabel)
|
//this.curLabel = label;
|
},
|
cancle () {
|
this.isShowPop = false;
|
//如果是未保存过的label直接删除(未保存的就是labels数组中最后一个)
|
if (!this.curLabel.id) {
|
//this.labels.pop();
|
this.curCameraData.coords.pop();
|
}
|
},
|
deleteLabel () {
|
if (this.curLabel.id) {
|
let index = this.curCameraData.coords.findIndex(item => item.id == this.curLabel.id);
|
this.curCameraData.coords.splice(index, 1);
|
|
} else {
|
//this.labels.pop();
|
this.curCameraData.coords.pop();
|
}
|
this.isShowPop = false;
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.right-side {
|
background: #d2dcea;
|
.figure {
|
.el-tabs__content {
|
background: #d2dcea;
|
height: calc(100vh - 85px);
|
}
|
}
|
.tool-bar {
|
//width: 40px;
|
height: 100%;
|
padding: 10px 0 10px 20px;
|
box-sizing: border-box;
|
//background: rgb(250, 250, 250);
|
background: rgba(26, 45, 74, 0.6);
|
//margin-bottom: 40px;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
> div {
|
cursor: pointer;
|
//background: rgba(245, 245, 245, 0.3);
|
padding: 0 5px;
|
height: 40px;
|
margin: 7px;
|
display: flex;
|
align-items: center;
|
label {
|
margin-right: 10px;
|
color: rgb(161, 161, 161);
|
color: #fff;
|
}
|
.el-slider {
|
width: 110px;
|
}
|
}
|
}
|
.shadow-box {
|
box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
|
}
|
.action-bar {
|
width: 960px;
|
margin: auto;
|
margin-top: 30px;
|
//margin-bottom: 20px;
|
text-align: right;
|
.drawboard-trigger {
|
background: transparent;
|
color: #fff;
|
border-color: rgba(255, 255, 255, 0.3);
|
}
|
}
|
.drawboard {
|
margin: auto;
|
width: 960px;
|
height: 540px;
|
margin-bottom: 130px;
|
position: relative;
|
//background: #fff;
|
background: #f0ffca;
|
//box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.1);
|
.mask {
|
position: absolute;
|
background: transparent;
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
&.edit-status-mask {
|
background: rgba(20, 181, 255, 0.1);
|
}
|
.label {
|
position: absolute;
|
z-index: 2;
|
border-radius: 50%;
|
}
|
}
|
.polygon-canvas {
|
position: absolute;
|
top: 0;
|
left: 0;
|
}
|
img {
|
width: 960px;
|
height: 540px;
|
background: #f0ffca;
|
}
|
.polygon-canvas {
|
position: absolute;
|
}
|
.right-panel {
|
width: 150px;
|
height: 100%;
|
background: rgba(26, 45, 74, 0.7);
|
}
|
.popBox {
|
position: absolute;
|
z-index: 99;
|
padding: 14px;
|
border-radius: 3px;
|
color: #fff;
|
background: rgba(26, 45, 74, 0.7);
|
.title {
|
font-weight: bold;
|
text-align: left;
|
font-size: 15px;
|
margin-bottom: 14px;
|
letter-spacing: 2px;
|
}
|
.details {
|
.detail-item {
|
display: flex;
|
margin: 5px 0;
|
label {
|
color: #a9a9a9;
|
width: 65px;
|
display: inline-block;
|
}
|
.left {
|
width: 110px;
|
text-align: left;
|
line-height: 28px;
|
.fix-width {
|
display: inline-block;
|
width: 23px;
|
}
|
}
|
.right {
|
width: 160px;
|
}
|
.devide {
|
width: 10px;
|
height: 1px;
|
background: #a9a9a9;
|
margin: 14px 3px;
|
}
|
}
|
.btns {
|
margin-top: 10px;
|
}
|
.el-form-item {
|
margin-bottom: 12px;
|
}
|
.el-form-item__content {
|
font-size: 12px;
|
line-height: 30px;
|
}
|
.el-form-item__error {
|
left: 70px;
|
top: 94%;
|
}
|
}
|
}
|
}
|
.user-upload {
|
margin: auto;
|
padding: 50px;
|
display: flex;
|
position: relative;
|
#trackArea {
|
position: absolute;
|
background: rgba(136, 214, 228, 0.1);
|
}
|
.info {
|
margin-left: 20px;
|
margin-top: 20px;
|
text-align: left;
|
font-size: 15px;
|
.input-area {
|
width: 300px;
|
label {
|
width: 80px;
|
color: rgba(39, 68, 111, 0.67);
|
}
|
> div {
|
display: flex;
|
align-items: center;
|
height: 40px;
|
}
|
}
|
.pos {
|
margin-top: 10px;
|
text-align: left;
|
color: rgba(39, 68, 111, 0.67);
|
b {
|
font-style: italic;
|
}
|
//color: #4966b7
|
}
|
}
|
.img-card {
|
}
|
.upload-demo,
|
.el-upload {
|
height: 100%;
|
width: 100%;
|
margin: 0 auto;
|
}
|
.upload-demo .el-upload__input {
|
visibility: hidden;
|
}
|
.upload-demo .el-upload-dragger {
|
width: 100%;
|
height: 90%;
|
width: 962px;
|
height: 542px;
|
margin: 20px 0 0;
|
background: transparent;
|
/* border: none; */
|
//position: relative;
|
overflow: visible;
|
}
|
.upload-demo .el-upload__text {
|
position: absolute;
|
top: -24px;
|
left: 50%;
|
margin-left: -91px;
|
}
|
.upload-demo .preview {
|
object-fit: contain;
|
//position: relative;
|
// width: 100%;
|
// height: 100%;
|
}
|
.upload-demo .preview img {
|
// position: absolute;
|
// top: 50%;
|
// left: 50%;
|
// transform: translate(-50%, -50%);
|
// width: 100%;
|
// height: 100%;
|
}
|
}
|
}
|
.el-input__inner:focus {
|
outline: none;
|
border-color: rgba(42, 56, 93, 71%) !important;
|
}
|
.el-upload-dragger:hover {
|
border-color: rgba(42, 56, 93, 71%) !important;
|
}
|
</style>
|