|
|
|
@@ -1,322 +1,343 @@ |
|
|
|
<template> |
|
|
|
<div class="ui container"> |
|
|
|
<div class="tuomin-title"> |
|
|
|
<h2>{{$t('dataDesensitizationModelExperience')}}</h2> |
|
|
|
<p>{{$t('dataDesensitizationModelDesc')}} <a href="https://git.openi.org.cn/tengxiao/tuomin" target="_blank">tengxiao / tuomin</a></p> |
|
|
|
</div> |
|
|
|
<el-row :gutter="12" style="margin-top: 33px;"> |
|
|
|
<el-col :xs="24" :span="12"> |
|
|
|
<div class="tuomin-content-image"> |
|
|
|
<div class="tuomin-icon"> |
|
|
|
<i class="ri-image-line" style="font-size: 16px;margin-right:2px;"></i> |
|
|
|
<span style="font-size: 12px;">img</span> |
|
|
|
<div class="ui container"> |
|
|
|
<div class="tuomin-title"> |
|
|
|
<h2>{{ $t("dataDesensitizationModelExperience") }}</h2> |
|
|
|
<p> |
|
|
|
{{ $t("dataDesensitizationModelDesc") }} <a |
|
|
|
href="https://git.openi.org.cn/tengxiao/tuomin" |
|
|
|
target="_blank" |
|
|
|
>tengxiao / tuomin</a |
|
|
|
> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<el-row :gutter="12" style="margin-top: 33px"> |
|
|
|
<el-col :xs="24" :span="12"> |
|
|
|
<div class="tuomin-content-image"> |
|
|
|
<div class="tuomin-icon"> |
|
|
|
<i |
|
|
|
class="ri-image-line" |
|
|
|
style="font-size: 16px; margin-right: 2px" |
|
|
|
></i> |
|
|
|
<span style="font-size: 12px">img</span> |
|
|
|
</div> |
|
|
|
<div style="height: 230px; width: 96%; margin: 0 auto"> |
|
|
|
<el-upload |
|
|
|
action="#" |
|
|
|
accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG" |
|
|
|
:show-file-list="false" |
|
|
|
:on-change="handleChangePicture" |
|
|
|
list-type="picture-card" |
|
|
|
:file-list="fileList" |
|
|
|
:style="{ display: ImageUrl ? 'none' : 'block' }" |
|
|
|
:auto-upload="false" |
|
|
|
drag |
|
|
|
> |
|
|
|
<div class="el-upload__text"> |
|
|
|
{{ $t("dragThePictureHere") |
|
|
|
}}<span style="color: rgba(136, 136, 136, 0.87)">{{ |
|
|
|
$t("or") |
|
|
|
}}</span |
|
|
|
>{{ $t("clickUpload") }} |
|
|
|
</div> |
|
|
|
<div style="height:230px;width: 96%;margin: 0 auto;"> |
|
|
|
<el-upload |
|
|
|
action="#" |
|
|
|
accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG" |
|
|
|
:show-file-list="false" |
|
|
|
:on-change="handleChangePicture" |
|
|
|
list-type="picture-card" |
|
|
|
:file-list="fileList" |
|
|
|
:style="{display:(ImageUrl ? 'none':'block')}" |
|
|
|
:auto-upload="false" |
|
|
|
> |
|
|
|
<div class="el-upload__text">{{$t('dragThePictureHere')}}<span style="color: rgba(136, 136, 136, 0.87);">{{$t('or')}}</span>{{$t('clickUpload')}}</div> |
|
|
|
</el-upload> |
|
|
|
</el-upload> |
|
|
|
|
|
|
|
<img class="preview-image" v-if="ImageUrl" :src="ImageUrl" alt=""> |
|
|
|
</div> |
|
|
|
<img class="preview-image" v-if="ImageUrl" :src="ImageUrl" alt="" /> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div class="tuomin-radio-model"> |
|
|
|
<label class="radio-label" |
|
|
|
>{{ $t("desensitizationObject") }}：</label |
|
|
|
> |
|
|
|
<div> |
|
|
|
<div class="tuomin-radio-model"> |
|
|
|
<label class="radio-label">{{$t('desensitizationObject')}}：</label> |
|
|
|
<div> |
|
|
|
<el-radio-group v-model="radio"> |
|
|
|
<el-radio :label="2">{{$t('all')}}</el-radio> |
|
|
|
<el-radio :label="1">{{$t('onlyFace')}}</el-radio> |
|
|
|
<el-radio :label="0">{{$t('onlyLicensePlate')}}</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="tuomin-button-model"> |
|
|
|
<el-button @click="cancelUpload">{{$t('cancel')}}</el-button> |
|
|
|
<el-button :disabled="fileList.length<1" @click="startTranform" type="primary">{{$t('startDesensitization')}}</el-button> |
|
|
|
</div> |
|
|
|
<el-radio-group v-model="radio"> |
|
|
|
<el-radio :label="2">{{ $t("all") }}</el-radio> |
|
|
|
<el-radio :label="1">{{ $t("onlyFace") }}</el-radio> |
|
|
|
<el-radio :label="0">{{ $t("onlyLicensePlate") }}</el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
<el-col :xs="24" :span="12"> |
|
|
|
<div class="tuomin-content-image" v-loading="tranformImageLoading"> |
|
|
|
<div class="tuomin-icon"> |
|
|
|
<i class="ri-image-line" style="font-size: 16px;margin-right:2px;"></i> |
|
|
|
<span style="font-size: 12px;">output</span> |
|
|
|
</div> |
|
|
|
<div style="height: 358px;"> |
|
|
|
<el-image |
|
|
|
style="height: 100%;width: 100%;" |
|
|
|
:src="resultImgSrc" |
|
|
|
:preview-src-list="[resultImgSrc]"> |
|
|
|
<div slot="error" class="image-slot"> |
|
|
|
<i style="font-size: 0;" class="el-icon-picture-outline"></i> |
|
|
|
</div> |
|
|
|
</el-image> |
|
|
|
|
|
|
|
<div class="tuomin-button-model"> |
|
|
|
<el-button @click="cancelUpload">{{ $t("cancel") }}</el-button> |
|
|
|
<el-button |
|
|
|
:disabled="fileList.length < 1" |
|
|
|
@click="startTranform" |
|
|
|
type="primary" |
|
|
|
>{{ $t("startDesensitization") }}</el-button |
|
|
|
> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<div style="margin: 39px 0 21px 0;"> |
|
|
|
<span>{{$t('example')}}：</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="table-container"> |
|
|
|
<div> |
|
|
|
<el-table border :data="tableData1" style="width:100%"> |
|
|
|
<el-table-column :label="$t('originPicture')" align="center"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div style="width: 100%;height:200px;"> |
|
|
|
<el-image |
|
|
|
style="height: 100%;width: 100%;" |
|
|
|
:src="scope.row.imgSrc1" |
|
|
|
:preview-src-list="[scope.row.imgSrc1]"> |
|
|
|
<div slot="error" class="image-slot"> |
|
|
|
<i style="font-size: 0;" class="el-icon-picture-outline"></i> |
|
|
|
</div> |
|
|
|
</el-image> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column :label="$t('desensitizationPicture')" align="center"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div style="width: 100%;height:200px;"> |
|
|
|
<el-image |
|
|
|
style="height: 100%;width: 100%;" |
|
|
|
:src="scope.row.imgSrc2" |
|
|
|
:preview-src-list="[scope.row.imgSrc2]"> |
|
|
|
<div slot="error" class="image-slot"> |
|
|
|
<i style="font-size: 0;" class="el-icon-picture-outline"></i> |
|
|
|
</div> |
|
|
|
</el-image> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="mode" :label="$t('desensitizationObject')" align="center" header-align="center"> |
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
|
|
|
|
</el-col> |
|
|
|
<el-col :xs="24" :span="12"> |
|
|
|
<div class="tuomin-content-image" v-loading="tranformImageLoading"> |
|
|
|
<div class="tuomin-icon"> |
|
|
|
<i |
|
|
|
class="ri-image-line" |
|
|
|
style="font-size: 16px; margin-right: 2px" |
|
|
|
></i> |
|
|
|
<span style="font-size: 12px">output</span> |
|
|
|
</div> |
|
|
|
<div style="height: 358px"> |
|
|
|
<el-image |
|
|
|
style="height: 100%; width: 100%" |
|
|
|
:src="resultImgSrc" |
|
|
|
:preview-src-list="[resultImgSrc]" |
|
|
|
> |
|
|
|
<div slot="error" class="image-slot"> |
|
|
|
<i style="font-size: 0" class="el-icon-picture-outline"></i> |
|
|
|
</div> |
|
|
|
</el-image> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<div style="margin: 39px 0 21px 0"> |
|
|
|
<span>{{ $t("example") }}：</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="table-container"> |
|
|
|
<div> |
|
|
|
<el-table border :data="tableData1" style="width: 100%"> |
|
|
|
<el-table-column :label="$t('originPicture')" align="center"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div style="width: 100%; height: 200px"> |
|
|
|
<el-image |
|
|
|
style="height: 100%; width: 100%" |
|
|
|
:src="scope.row.imgSrc1" |
|
|
|
:preview-src-list="[scope.row.imgSrc1]" |
|
|
|
> |
|
|
|
<div slot="error" class="image-slot"> |
|
|
|
<i style="font-size: 0" class="el-icon-picture-outline"></i> |
|
|
|
</div> |
|
|
|
</el-image> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column :label="$t('desensitizationPicture')" align="center"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div style="width: 100%; height: 200px"> |
|
|
|
<el-image |
|
|
|
style="height: 100%; width: 100%" |
|
|
|
:src="scope.row.imgSrc2" |
|
|
|
:preview-src-list="[scope.row.imgSrc2]" |
|
|
|
> |
|
|
|
<div slot="error" class="image-slot"> |
|
|
|
<i style="font-size: 0" class="el-icon-picture-outline"></i> |
|
|
|
</div> |
|
|
|
</el-image> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="mode" |
|
|
|
:label="$t('desensitizationObject')" |
|
|
|
align="center" |
|
|
|
header-align="center" |
|
|
|
> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import axios from 'axios'; |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
ImageUrl:'', |
|
|
|
radio:2, |
|
|
|
file:'', |
|
|
|
fileList:[], |
|
|
|
resultImgSrc:'', |
|
|
|
tranformImageLoading:false, |
|
|
|
tableData1:[{ |
|
|
|
imgSrc1:'/img/origin.png', |
|
|
|
imgSrc2:'/img/tuomin.png', |
|
|
|
mode:this.$t('all') |
|
|
|
}] |
|
|
|
}; |
|
|
|
}, |
|
|
|
components: {}, |
|
|
|
methods: { |
|
|
|
// 选择文件、移除文件、上传文件成功/失败后，都会触发 |
|
|
|
handleChangePicture(file,fileList) { |
|
|
|
console.log("----change:",file,fileList) |
|
|
|
let acceptList = ["jpg", "jpeg",'png'] |
|
|
|
// 根据文件名获取文件的后缀名 |
|
|
|
let fileType = file.name.split('.').pop().toLowerCase() |
|
|
|
// 判断文件格式是否符合要求 |
|
|
|
if (acceptList.indexOf(fileType) === -1) { |
|
|
|
this.$message.error(this.$t('limitFilesUpload')); |
|
|
|
return false |
|
|
|
} |
|
|
|
// 判断文件大小是否符合要求 |
|
|
|
if (file.size / 1024 / 1024 > 20) { |
|
|
|
this.$message.error(this.$t('limitSizeUpload')); |
|
|
|
return false |
|
|
|
} |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import axios from "axios"; |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
ImageUrl: "", |
|
|
|
radio: 2, |
|
|
|
file: "", |
|
|
|
fileList: [], |
|
|
|
resultImgSrc: "", |
|
|
|
tranformImageLoading: false, |
|
|
|
tableData1: [ |
|
|
|
{ |
|
|
|
imgSrc1: "/img/origin.png", |
|
|
|
imgSrc2: "/img/tuomin.png", |
|
|
|
mode: this.$t("all"), |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
components: {}, |
|
|
|
methods: { |
|
|
|
// 选择文件、移除文件、上传文件成功/失败后，都会触发 |
|
|
|
handleChangePicture(file, fileList) { |
|
|
|
let acceptList = ["jpg", "jpeg", "png"]; |
|
|
|
// 根据文件名获取文件的后缀名 |
|
|
|
let fileType = file.name.split(".").pop().toLowerCase(); |
|
|
|
// 判断文件格式是否符合要求 |
|
|
|
if (acceptList.indexOf(fileType) === -1) { |
|
|
|
this.$message.error(this.$t("limitFilesUpload")); |
|
|
|
return false; |
|
|
|
} |
|
|
|
// 判断文件大小是否符合要求 |
|
|
|
if (file.size / 1024 / 1024 > 20) { |
|
|
|
this.$message.error(this.$t("limitSizeUpload")); |
|
|
|
return false; |
|
|
|
} |
|
|
|
|
|
|
|
this.ImageUrl = URL.createObjectURL(file.raw); |
|
|
|
this.file = file |
|
|
|
this.fileList = fileList |
|
|
|
}, |
|
|
|
cancelUpload(){ |
|
|
|
this.ImageUrl = '' |
|
|
|
this.file='' |
|
|
|
this.fileList = [] |
|
|
|
}, |
|
|
|
startTranform(){ |
|
|
|
if(!this.file)return |
|
|
|
let fd = new FormData(); |
|
|
|
fd.append('file', this.file.raw); |
|
|
|
console.log(fd.get("file")) |
|
|
|
this.tranformImageLoading = true |
|
|
|
axios({ |
|
|
|
method:'POST', |
|
|
|
url: '/extension/tuomin/upload', |
|
|
|
headers: {'Accept': 'image/png'}, |
|
|
|
responseType: 'blob', |
|
|
|
params: { mode: this.radio }, |
|
|
|
data:fd |
|
|
|
}).then(res => { |
|
|
|
console.log(res) |
|
|
|
this.ImageUrl = URL.createObjectURL(file.raw); |
|
|
|
this.file = file; |
|
|
|
this.fileList = fileList; |
|
|
|
}, |
|
|
|
cancelUpload() { |
|
|
|
this.ImageUrl = ""; |
|
|
|
this.file = ""; |
|
|
|
this.fileList = []; |
|
|
|
}, |
|
|
|
startTranform() { |
|
|
|
if (!this.file) return; |
|
|
|
let fd = new FormData(); |
|
|
|
fd.append("file", this.file.raw); |
|
|
|
this.tranformImageLoading = true; |
|
|
|
axios({ |
|
|
|
method: "POST", |
|
|
|
url: "/extension/tuomin/upload", |
|
|
|
headers: { Accept: "image/png" }, |
|
|
|
responseType: "blob", |
|
|
|
params: { mode: this.radio }, |
|
|
|
data: fd, |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
const objectURL = URL.createObjectURL(res.data); |
|
|
|
this.resultImgSrc = objectURL; |
|
|
|
this.tranformImageLoading = false |
|
|
|
}).catch(err => { |
|
|
|
console.log(err); |
|
|
|
|
|
|
|
this.tranformImageLoading = false; |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
this.tranformImageLoading = false; |
|
|
|
if (err.response.status === 400) { |
|
|
|
const fr = new FileReader(); |
|
|
|
fr.onload = (e) => { |
|
|
|
try { |
|
|
|
const jsonResult = JSON.parse(e.target.result); |
|
|
|
this.$message({ |
|
|
|
type: 'error', |
|
|
|
message: jsonResult.Message |
|
|
|
}); |
|
|
|
} catch (e) { |
|
|
|
this.$message({ |
|
|
|
type: 'error', |
|
|
|
message: this.$t('tranformImageFailed') |
|
|
|
}); |
|
|
|
} |
|
|
|
}; |
|
|
|
fr.readAsText(err.response.data); |
|
|
|
}else{ |
|
|
|
|
|
|
|
this.$message({ |
|
|
|
type: 'error', |
|
|
|
message: this.$t('tranformImageFailed') |
|
|
|
}); |
|
|
|
const fr = new FileReader(); |
|
|
|
fr.onload = (e) => { |
|
|
|
try { |
|
|
|
const jsonResult = JSON.parse(e.target.result); |
|
|
|
this.$message({ |
|
|
|
type: "error", |
|
|
|
message: jsonResult.Message, |
|
|
|
}); |
|
|
|
} catch (e) { |
|
|
|
this.$message({ |
|
|
|
type: "error", |
|
|
|
message: this.$t("tranformImageFailed"), |
|
|
|
}); |
|
|
|
} |
|
|
|
}; |
|
|
|
fr.readAsText(err.response.data); |
|
|
|
} else { |
|
|
|
this.$message({ |
|
|
|
type: "error", |
|
|
|
message: this.$t("tranformImageFailed"), |
|
|
|
}); |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
}, |
|
|
|
mounted() {}, |
|
|
|
beforeDestroy() {}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="less"> |
|
|
|
.tuomin-title{ |
|
|
|
margin-top: 34px; |
|
|
|
h2 { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
p{ |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
color: rgba(136, 136, 136, 0.87); |
|
|
|
} |
|
|
|
<style scoped lang="less"> |
|
|
|
.tuomin-title { |
|
|
|
margin-top: 34px; |
|
|
|
h2 { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
.tuomin-content-image{ |
|
|
|
p { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
color: rgba(136, 136, 136, 0.87); |
|
|
|
} |
|
|
|
} |
|
|
|
.tuomin-content-image { |
|
|
|
border: 1px solid rgba(0, 0, 0, 0.1); |
|
|
|
border-radius: 5px; |
|
|
|
min-height: 358px; |
|
|
|
position: relative; |
|
|
|
.tuomin-icon { |
|
|
|
z-index: 99; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
width: 66px; |
|
|
|
height: 22px; |
|
|
|
justify-content: center; |
|
|
|
color: rgba(136, 136, 136, 0.87); |
|
|
|
border-radius: 5px 0px 10px 0px; |
|
|
|
border: 1px solid rgba(0, 0, 0, 0.1); |
|
|
|
border-radius: 5px; |
|
|
|
min-height: 358px; |
|
|
|
position: relative; |
|
|
|
.tuomin-icon { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: 0; |
|
|
|
width: 66px; |
|
|
|
height: 22px; |
|
|
|
justify-content: center; |
|
|
|
color: rgba(136, 136, 136, 0.87); |
|
|
|
border-radius: 5px 0px 10px 0px; |
|
|
|
border: 1px solid rgba(0, 0, 0, 0.1); |
|
|
|
} |
|
|
|
.el-upload__text{ |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
.preview-image{ |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.tuomin-radio-model{ |
|
|
|
display: flex; |
|
|
|
margin: 25px 12px 0 12px; |
|
|
|
.radio-label{ |
|
|
|
font-weight: 600; |
|
|
|
margin-right: 4px; |
|
|
|
color: rgba(16, 16, 16, 1); |
|
|
|
} |
|
|
|
} |
|
|
|
.tuomin-button-model{ |
|
|
|
text-align: right; |
|
|
|
margin: 22px 12px 0 12px; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
/deep/ .el-upload--picture-card{ |
|
|
|
.el-upload__text { |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
.preview-image { |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
background: #ffff; |
|
|
|
border: none; |
|
|
|
border-bottom: 1px dashed #888; |
|
|
|
border-radius: 0; |
|
|
|
min-height: 230px; |
|
|
|
} |
|
|
|
|
|
|
|
.table-container { |
|
|
|
margin-bottom: 16px; |
|
|
|
|
|
|
|
/deep/ .el-table__header { |
|
|
|
th { |
|
|
|
background: rgb(245, 245, 246); |
|
|
|
font-size: 14px; |
|
|
|
color: rgb(36, 36, 36); |
|
|
|
font-weight: 400; |
|
|
|
} |
|
|
|
.tuomin-radio-model { |
|
|
|
display: flex; |
|
|
|
margin: 25px 12px 0 12px; |
|
|
|
.radio-label { |
|
|
|
font-weight: 600; |
|
|
|
margin-right: 4px; |
|
|
|
color: rgba(16, 16, 16, 1); |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .el-table__body { |
|
|
|
td { |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
} |
|
|
|
.tuomin-button-model { |
|
|
|
text-align: right; |
|
|
|
margin: 22px 12px 0 12px; |
|
|
|
} |
|
|
|
} |
|
|
|
/deep/ .el-upload--picture-card { |
|
|
|
width: 100%; |
|
|
|
background: #ffff; |
|
|
|
border: none; |
|
|
|
border-bottom: 1px dashed #888; |
|
|
|
border-radius: 0; |
|
|
|
min-height: 230px; |
|
|
|
} |
|
|
|
/deep/ .el-upload-dragger { |
|
|
|
width: 100%; |
|
|
|
background: #ffff; |
|
|
|
border: none; |
|
|
|
border-radius: 0; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
.table-container { |
|
|
|
margin-bottom: 16px; |
|
|
|
|
|
|
|
/deep/ .el-table__header { |
|
|
|
th { |
|
|
|
background: rgb(245, 245, 246); |
|
|
|
font-size: 14px; |
|
|
|
color: rgb(36, 36, 36); |
|
|
|
font-weight: 400; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
.center { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
/deep/ .el-table__body { |
|
|
|
td { |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.center { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
@media screen and (max-width:768px){ |
|
|
|
body{ |
|
|
|
background-color: black |
|
|
|
} |
|
|
|
@media screen and (max-width: 768px) { |
|
|
|
body { |
|
|
|
background-color: black; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
zhoupzh
3 years ago