2023-10-27
上传模特截取模特图片大小功能
This commit is contained in:
@@ -91,12 +91,42 @@
|
||||
<div class="perview_mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<div class="img_content_block" ref="imgbox" @mousemove="startMove($event)">
|
||||
<img class="placement_img" :src="perviewUrl || printObject?.url">
|
||||
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)" @mousemove="startMove($event)">
|
||||
<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
|
||||
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
|
||||
</div>
|
||||
<div class="img_content_block" ref="imgbox">
|
||||
|
||||
<div :style="{width: imgBox.width+'px', height:imgBox.height +'px',top:imgBox.y+'px',left:imgBox.x+'px',position:'absolute'}">
|
||||
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)" @mousemove="startMove($event)">
|
||||
<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
|
||||
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
|
||||
</div>
|
||||
</div>
|
||||
<vue-cropper
|
||||
ref="cropper"
|
||||
:img="option.img"
|
||||
:outputSize="option.outputSize"
|
||||
:outputType="option.outputType"
|
||||
:info="option.info"
|
||||
:canScale="option.canScale"
|
||||
:autoCrop="option.autoCrop"
|
||||
:fixed="option.fixed"
|
||||
:fixedNumber="option.fixedNumber"
|
||||
:full="option.full"
|
||||
:fixedBox="option.fixedBox"
|
||||
:canMove="option.canMove"
|
||||
:canMoveBox="option.canMoveBox"
|
||||
:original="option.original"
|
||||
:centerBox="option.centerBox"
|
||||
:height="option.height"
|
||||
:infoTrue="option.infoTrue"
|
||||
:limitMinSize="option.limitMinSize"
|
||||
:enlarge="option.enlarge"
|
||||
@real-time="realTime"
|
||||
:autoCropArea="1"
|
||||
:autoCropHeight="option.autoCropHeight"
|
||||
:autoCropWidth="option.autoCropWidth"
|
||||
:mode="option.mode">
|
||||
</vue-cropper>
|
||||
<!-- <img class="placement_img" :src="perviewUrl || printObject?.url"> -->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -109,12 +139,17 @@
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref,createVNode} from 'vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import {dataURLtoFile} from "@/tool/util"
|
||||
import {dataURLtoFile,base64toFile} from "@/tool/util"
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import 'vue-cropper/dist/index.css'
|
||||
import { VueCropper } from "vue-cropper";
|
||||
import { useStore } from "vuex";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
export default defineComponent({
|
||||
components:{
|
||||
VueCropper,
|
||||
},
|
||||
setup() {
|
||||
const store = useStore()
|
||||
let oldLocationList:any = ref([])
|
||||
@@ -129,6 +164,7 @@ export default defineComponent({
|
||||
let manager:any = ref(false)
|
||||
let userInfo:any = ref()
|
||||
|
||||
let cropperTime:any = ref()
|
||||
return {
|
||||
store,
|
||||
oldLocationList,
|
||||
@@ -141,7 +177,9 @@ export default defineComponent({
|
||||
pointList,
|
||||
isSubmit,
|
||||
manager,
|
||||
userInfo
|
||||
userInfo,
|
||||
|
||||
cropperTime
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@@ -158,7 +196,31 @@ export default defineComponent({
|
||||
sex:'Male',
|
||||
sexList: [
|
||||
|
||||
]
|
||||
],
|
||||
option:{
|
||||
img: '', //裁剪图片的地址
|
||||
outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)
|
||||
outputType: 'png', //裁剪生成图片的格式（jpeg || png || webp）
|
||||
info: false, //图片大小信息
|
||||
canScale: true, //图片是否允许滚轮缩放
|
||||
autoCrop: true, //是否默认生成截图框
|
||||
autoCropWidth: '0', //默认生成截图框宽度
|
||||
autoCropHeight: '0', //默认生成截图框高度
|
||||
fixed: true, //是否开启截图框宽高固定比例
|
||||
fixedBox: false, //固定截图框大小，不允许改变
|
||||
fixedNumber: [1, 2.125], //截图框的宽高比例
|
||||
full: false, //false按原比例裁切图片，不失真
|
||||
canMove: true, //上传图片是否可以移动
|
||||
canMoveBox: true, //截图框能否拖动
|
||||
original: false, //上传图片按照原始比例渲染
|
||||
centerBox: false, //截图框是否被限制在图片里面
|
||||
height: true, //是否按照设备的dpr 输出等比例图片
|
||||
infoTrue: true, //true为展示真实输出图片宽高，false展示看到的截图框宽高
|
||||
maxImgSize:'2000', //限制图片最大宽度和高度
|
||||
enlarge: 7, //图片根据截图框输出比例倍数
|
||||
mode: 'auto 90%', //图片默认渲染方式
|
||||
limitMinSize:'100%'
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
@@ -166,29 +228,87 @@ export default defineComponent({
|
||||
this.userInfo = JSON.parse(userInfo);
|
||||
this.getSex()
|
||||
},
|
||||
watch: {
|
||||
sex:{
|
||||
handler(newVal:any,oldVal:any){
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let imgBoxSizeBG = imgbox?.getElementsByClassName('cropper-view-box-BG')?.[0]
|
||||
if(imgBoxSizeBG){
|
||||
if(newVal == 'Male'){
|
||||
imgBoxSizeBG.style.background = `url(./image/maleBG.png) no-repeat 0 0 / 100% 100%`
|
||||
}else{
|
||||
imgBoxSizeBG.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
formatter(value:number){
|
||||
return `${value}%`;
|
||||
},
|
||||
|
||||
showPlacementModal(data:any){
|
||||
|
||||
this.placementShow = true
|
||||
this.printObject = {
|
||||
...data
|
||||
}
|
||||
this.option.img = this.printObject.url
|
||||
|
||||
setTimeout(()=>{
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let position = imgbox.getBoundingClientRect()
|
||||
this.imgBox = {
|
||||
width:imgbox.clientWidth,
|
||||
height:imgbox.scrollHeight,
|
||||
left : position.left,
|
||||
top:position.top,
|
||||
scrollTop:imgbox.scrollTop || 0,
|
||||
}
|
||||
this.getDefaultPointList(this.imgBox)
|
||||
},500)
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
|
||||
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
|
||||
let imgBoxSizeBG = imgbox.getElementsByClassName('cropper-view-box')[0]
|
||||
let div:any = document.createElement('div');
|
||||
if(imgbox.getElementsByClassName('cropper-view-box-BG').length >= 1){
|
||||
}else{
|
||||
div.classList.add('cropper-view-box-BG')
|
||||
div.style.background = `url(./image/femaleBG.png) no-repeat 0 0 / 100% 100%`
|
||||
div.style.width = '100%'
|
||||
div.style.height = '100%'
|
||||
div.style.position = `absolute`
|
||||
div.style.top = `0`
|
||||
imgBoxSizeBG.appendChild(div)
|
||||
}
|
||||
// imgBoxSize.style.backgroundImage = 'url('+require('@assets/images/library/lemaleBG.png')')'
|
||||
|
||||
let cropper:any = this.$refs.cropper
|
||||
cropper.cropH = cropper.scale*cropper.trueHeight
|
||||
cropper.cropW = cropper.cropH/2.125
|
||||
cropper.cropOffsertX = cropper.getImgAxis().x1
|
||||
cropper.cropOffsertY = cropper.getImgAxis().y1
|
||||
imgBoxSize.addEventListener('mousemove',this.startMove)
|
||||
this.setImageSize()
|
||||
this.getDefaultPointList(this.imgBox)
|
||||
},300)
|
||||
},
|
||||
realTime(data:any) {
|
||||
clearTimeout(this.cropperTime)
|
||||
this.cropperTime = setTimeout(()=>{
|
||||
|
||||
this.setImageSize()
|
||||
},1000)
|
||||
|
||||
},
|
||||
setImageSize(){
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
|
||||
let position = imgBoxSize.getBoundingClientRect()
|
||||
let position1 = imgbox.getBoundingClientRect()
|
||||
let cropper:any = this.$refs.cropper
|
||||
console.log(position1,position);
|
||||
this.imgBox = {
|
||||
width:cropper.cropW,
|
||||
height:cropper.cropH,
|
||||
left : position1.left,
|
||||
top:position1.top,
|
||||
scrollTop:imgBoxSize.scrollTop || 0,
|
||||
x:cropper.getCropAxis().x1,
|
||||
y:cropper.getCropAxis().y1,
|
||||
}
|
||||
},
|
||||
getSex(){
|
||||
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
|
||||
if (rv) {
|
||||
@@ -205,10 +325,14 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//截屏框移动
|
||||
setMove(){
|
||||
|
||||
},
|
||||
//初始化可以使用的点位
|
||||
getDefaultPointList(imgBox:any){
|
||||
this.isSubmit = false
|
||||
this.locationList=[]
|
||||
this.pointList = [
|
||||
{
|
||||
title:'SHOULDER',
|
||||
@@ -225,6 +349,10 @@ export default defineComponent({
|
||||
]
|
||||
if(this.printObject.templateId){//编辑
|
||||
this.isSubmit = true
|
||||
this.option.canScale = false
|
||||
this.option.fixedBox = true
|
||||
this.option.canMove = false
|
||||
this.option.canMoveBox = false
|
||||
for(let ponit of this.pointList){
|
||||
for(let pointItem of ponit.pointList){
|
||||
if(this.printObject[pointItem.type]?.length){
|
||||
@@ -241,8 +369,12 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
|
||||
|
||||
}
|
||||
}else{
|
||||
this.option.canScale = true
|
||||
this.option.fixedBox = false
|
||||
this.option.canMove = true
|
||||
this.option.canMoveBox = true
|
||||
}
|
||||
|
||||
this.oldPointList = JSON.parse(JSON.stringify(this.pointList))
|
||||
},
|
||||
@@ -266,7 +398,8 @@ export default defineComponent({
|
||||
return
|
||||
}
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let scrollTop = imgbox.scrollTop;
|
||||
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
|
||||
let scrollTop = imgBoxSize.scrollTop;
|
||||
if(this.intObj){
|
||||
this.currentSign.left = event.clientX - this.imgBox.left
|
||||
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top
|
||||
@@ -277,12 +410,14 @@ export default defineComponent({
|
||||
this.intObj.show = false
|
||||
this.intObj = null
|
||||
}else{
|
||||
//鼠标移动
|
||||
if(this.startDian){
|
||||
this.currentSign.left = event.clientX - this.imgBox.left - this.moveOriginal.posX
|
||||
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top -this.moveOriginal.posY
|
||||
this.currentSign.left = event.clientX - this.imgBox.left - this.imgBox.x - this.moveOriginal.posX -12
|
||||
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top - this.imgBox.y -this.moveOriginal.posY -12
|
||||
document.addEventListener('mouseup', this.getMouseOver);
|
||||
this.$forceUpdate()
|
||||
this.setBoundarySign()
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -292,24 +427,29 @@ export default defineComponent({
|
||||
// 在边界上的签名域处理
|
||||
setBoundarySign() {
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let height = imgbox.offsetHeight + imgbox.scrollTop;
|
||||
let imgBoxSize = imgbox.getElementsByClassName('cropper-crop-box')[0]
|
||||
let top = (this.$refs.cropper as any).getCropAxis().y1
|
||||
let left = (this.$refs.cropper as any).getCropAxis().x1
|
||||
let height = imgBoxSize.offsetHeight;
|
||||
// let height = imgBoxSize.offsetHeight + imgBoxSize.scrollTop;
|
||||
// 2 为签名域的边框
|
||||
let maxPosHeight = height - 24
|
||||
let maxPosWidth = imgbox.clientWidth - 24 //+ this.signBox.paddLeft;
|
||||
if (this.currentSign.top <= 0) {
|
||||
let maxPosWidth = imgBoxSize.clientWidth - 24 //+ this.signBox.paddLeft;
|
||||
if (this.currentSign.top+top <= 0) {
|
||||
this.currentSign.top = 0
|
||||
} else if (this.currentSign.top >= maxPosHeight ) {
|
||||
this.currentSign.top = maxPosHeight;
|
||||
} else if (this.currentSign.top >= maxPosHeight+top ) {
|
||||
this.currentSign.top = maxPosHeight+top;
|
||||
}
|
||||
if (this.currentSign.left <= 0) {
|
||||
if (this.currentSign.left+left <= 0) {
|
||||
this.currentSign.left = 0
|
||||
} else if (this.currentSign.left >= maxPosWidth) {
|
||||
this.currentSign.left = maxPosWidth;
|
||||
} else if (this.currentSign.left >= maxPosWidth+left) {
|
||||
this.currentSign.left = maxPosWidth+left;
|
||||
}
|
||||
},
|
||||
|
||||
getMouseDown(event:any,item:any,index:number){
|
||||
if(this.isRemoveStatus){
|
||||
//删除
|
||||
for(let itemPoint of this.pointList){
|
||||
for(let point of itemPoint.pointList){
|
||||
if(item.type == point.type){
|
||||
@@ -322,14 +462,19 @@ export default defineComponent({
|
||||
}else{
|
||||
this.currentSign = item
|
||||
// 计算出鼠标在签名域上的偏移
|
||||
this.moveOriginal.posX = event.offsetX
|
||||
this.moveOriginal.posY = event.offsetY // 1为边框
|
||||
// this.moveOriginal.posX = event.offsetX
|
||||
// this.moveOriginal.posY = event.offsetY // 1为边框
|
||||
this.moveOriginal.posX = 0
|
||||
this.moveOriginal.posY = 0 // 1为边框
|
||||
|
||||
console.log(this.moveOriginal);
|
||||
|
||||
this.startDian = true
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
getMouseOver(){
|
||||
getMouseOver(){//鼠标抬起
|
||||
this.startDian = false
|
||||
this.currentSign = {}
|
||||
document.removeEventListener('mouseup', this.getMouseOver);
|
||||
@@ -374,19 +519,37 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
submitPlacement(){
|
||||
if(this.printObject.templateId){
|
||||
this.printObject.id = this.printObject.libraryId
|
||||
this.confrimSubmit()
|
||||
}else{
|
||||
this.customRequest().then((rv:any)=>{
|
||||
this.isShowMark = false
|
||||
this.printObject.id = rv.id
|
||||
this.confrimSubmit()
|
||||
}).catch((res:any)=>{
|
||||
this.isShowMark = false
|
||||
})
|
||||
}
|
||||
|
||||
// let cropper:any = this.$refs.cropper,
|
||||
// that = this
|
||||
|
||||
// cropper.getCropData((data:any) => {
|
||||
// // 转换为File对象
|
||||
// let file = base64toFile(data,this.cropperFileData.name);
|
||||
// this.$emit('handleCropperSuccess',{file:file, fileData:this.cropperFileData})
|
||||
// })
|
||||
let cropper:any = this.$refs.cropper,
|
||||
that = this
|
||||
|
||||
cropper.getCropData(async (value:any) => {
|
||||
// 转换为File对象
|
||||
|
||||
if(this.printObject.templateId){
|
||||
this.printObject.id = this.printObject.libraryId
|
||||
this.confrimSubmit()
|
||||
}else{
|
||||
let file:any = base64toFile(value,this.printObject.file.name);
|
||||
// console.log(file,this.printObject,'-=-=--==-');
|
||||
file.uid = this.printObject.file.uid
|
||||
this.printObject.file = file
|
||||
this.customRequest().then((rv:any)=>{
|
||||
this.isShowMark = false
|
||||
this.printObject.id = rv.id
|
||||
this.confrimSubmit()
|
||||
}).catch((res:any)=>{
|
||||
this.isShowMark = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
confrimSubmit(){
|
||||
@@ -401,6 +564,7 @@ export default defineComponent({
|
||||
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
|
||||
param.modelType = this.modelType
|
||||
}
|
||||
|
||||
this.isShowMark = true
|
||||
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
|
||||
(rv: any) => {
|
||||
@@ -469,7 +633,6 @@ export default defineComponent({
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
},
|
||||
getPrintLocation(){
|
||||
let {width , height} = this.imgBox
|
||||
@@ -773,7 +936,7 @@ export default defineComponent({
|
||||
user-select:none;
|
||||
-moz-user-select:none;
|
||||
position: relative;
|
||||
|
||||
height: 57.6rem;
|
||||
.img_content_block{
|
||||
width: 40.8rem;
|
||||
height: 100%;
|
||||
@@ -819,7 +982,7 @@ export default defineComponent({
|
||||
-o-user-select:none; /* Opera私有属性 */
|
||||
user-select:none; /* CSS3属性 */
|
||||
cursor: pointer;
|
||||
|
||||
z-index: 22;
|
||||
&.remove_point_click{
|
||||
border-color: transparent;
|
||||
background: #EF3C3C;
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="models_placement_content" @touchmove="startMove($event)">
|
||||
<div class="plcaement_point_content">
|
||||
<div class="plcaement_point_content" v-if="userInfo.userId == 88 || userInfo.userId == 83">
|
||||
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" >
|
||||
<div class="ponit_title">{{point.title}}</div>
|
||||
<div class="point_list">
|
||||
@@ -74,6 +74,7 @@
|
||||
import { defineComponent,ref,createVNode} from 'vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
export default defineComponent({
|
||||
@@ -88,6 +89,8 @@ export default defineComponent({
|
||||
let oldPointList:any = ref([]) //备份点
|
||||
let pointList:any = ref([])
|
||||
let isSubmit:any = ref(false) //判断历史是否有提交过
|
||||
let manager:any = ref(false)
|
||||
let userInfo:any = ref()
|
||||
return {
|
||||
store,
|
||||
oldLocationList,
|
||||
@@ -98,7 +101,9 @@ export default defineComponent({
|
||||
currentSign,
|
||||
oldPointList,
|
||||
pointList,
|
||||
isSubmit
|
||||
isSubmit,
|
||||
manager,
|
||||
userInfo
|
||||
}
|
||||
},
|
||||
data(){
|
||||
@@ -111,8 +116,18 @@ export default defineComponent({
|
||||
placement_sacle:30,
|
||||
perviewUrl:'',//预览的图片地址
|
||||
isShowMark:false,
|
||||
modelType:'Library',
|
||||
sex:'Male',
|
||||
sexList: [
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
let userInfo:any = getCookie("userInfo")
|
||||
this.userInfo = JSON.parse(userInfo);
|
||||
this.getSex()
|
||||
},
|
||||
methods:{
|
||||
formatter(value:number){
|
||||
return `${value}%`;
|
||||
@@ -136,7 +151,22 @@ export default defineComponent({
|
||||
this.getDefaultPointList(this.imgBox)
|
||||
},400)
|
||||
},
|
||||
|
||||
getSex(){
|
||||
Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'Sex'}}).then((rv: any) => {
|
||||
if (rv) {
|
||||
let arr:any = []
|
||||
rv.forEach((item:any) => {
|
||||
let obj = {
|
||||
value:item.name,
|
||||
label:item.name,
|
||||
}
|
||||
arr.push(obj)
|
||||
});
|
||||
this.sex = arr[0].value
|
||||
this.sexList = arr
|
||||
}
|
||||
})
|
||||
},
|
||||
//初始化可以使用的点位
|
||||
getDefaultPointList(imgBox:any){
|
||||
this.isSubmit = false
|
||||
@@ -324,9 +354,14 @@ export default defineComponent({
|
||||
let param = {
|
||||
libraryId:this.printObject.id,
|
||||
templateId:this.printObject.templateId || null,
|
||||
modelType:'Library',
|
||||
checkMd5:1,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
...this.getPrintLocation()
|
||||
}
|
||||
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
|
||||
param.modelType = this.modelType
|
||||
}
|
||||
this.isShowMark = true
|
||||
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
|
||||
(rv: any) => {
|
||||
@@ -343,25 +378,59 @@ export default defineComponent({
|
||||
customRequest(){
|
||||
let new_data = {
|
||||
file:this.printObject.file,
|
||||
checkMd5:1,
|
||||
level1Type:'Models',
|
||||
sex:'',
|
||||
sex:this.sex,
|
||||
modelType:'',
|
||||
level2Type:'',
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
}
|
||||
this.isShowMark = true
|
||||
if(this.userInfo.userId == 88 || this.userInfo.userId == 83){
|
||||
new_data.modelType = this.modelType
|
||||
new_data.sex = this.sex
|
||||
}
|
||||
return new Promise((resolve,reject)=>{
|
||||
Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
||||
(rv: any) => {
|
||||
resolve(rv)
|
||||
// resolve(rv)
|
||||
if(!rv.checkMd5){
|
||||
resolve(this.affirmCstomRequest(new_data))
|
||||
}else{
|
||||
resolve(rv)
|
||||
}
|
||||
}
|
||||
).catch((res)=>{
|
||||
reject(res)
|
||||
});
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
affirmCstomRequest(data:any){
|
||||
let _this = this
|
||||
return new Promise((resolve,reject)=>{
|
||||
Modal.confirm({
|
||||
title: 'This picture has been uploaded whether to continue uploading？ ',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
onOk() {
|
||||
data.checkMd5 = 0
|
||||
Https.axiosPost(Https.httpUrls.libraryUpload, data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
||||
(rv: any) => {
|
||||
_this.isShowMark = false
|
||||
resolve(rv)
|
||||
}
|
||||
).catch((res)=>{
|
||||
reject(res)
|
||||
});
|
||||
},
|
||||
onCancel(){
|
||||
_this.isShowMark = false
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
getPrintLocation(){
|
||||
let {width , height} = this.imgBox
|
||||
|
||||
@@ -1,699 +0,0 @@
|
||||
<template>
|
||||
<div v-show="placementShow">
|
||||
<a-modal class="models_placement_component"
|
||||
v-model:visible="placementShow"
|
||||
:footer="null"
|
||||
width="80%"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
|
||||
>
|
||||
<div class="design_closeIcon" @click.stop="closeModal()">
|
||||
<i class="fi fi-rr-cross-small"></i>
|
||||
</div>
|
||||
<div class="design_title_text">
|
||||
<div>Registration</div>
|
||||
<div class="design_title_text_intro">Please change the pure white inside the mannequin for another color to enhance your experience</div>
|
||||
</div>
|
||||
<div class="models_placement_body" >
|
||||
<div class="models_placement_content">
|
||||
<div class="plcaement_point_content">
|
||||
<div class="palcement_modal_header">
|
||||
<div class="placement_operate_list">
|
||||
<div class="operate_item" v-show="locationList.length == 6" @click="submitPlacement">
|
||||
<div class="icon iconfont icon-baocun1 operate_icon"></div>
|
||||
<div class="operate_item_des">Submit</div>
|
||||
</div>
|
||||
<div class="operate_item" v-show="locationList.length == 6" @click="printPreview">
|
||||
<div class="icon iconfont icon-shengchengyulan operate_icon"></div>
|
||||
<div class="operate_item_des">Preview</div>
|
||||
</div>
|
||||
<div class="operate_item" v-show="perviewUrl" @click="backPreview">
|
||||
<div class="icon iconfont icon-fanhui1 operate_icon"></div>
|
||||
<div class="operate_item_des">Back</div>
|
||||
</div>
|
||||
<div class="operate_item" @click="restoreLocationList">
|
||||
<div class="icon iconfont icon-huifu operate_icon"></div>
|
||||
<div class="operate_item_des">Restore</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="placement_point_item" v-for="(point,index) in pointList" :key="index" >
|
||||
<div class="ponit_title">{{point.title}}</div>
|
||||
<div class="point_list">
|
||||
<div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @mousedown="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="placement_content_operate_list">
|
||||
<div class="placement_content_operate_item" @click="changeRemoveStatus">
|
||||
<div class="placement_remove_point_block"></div>
|
||||
<div class="placement_content_operate_des">Remove Point</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="img_preview_block" >
|
||||
<div class="perview_mark_loading" v-show="isShowMark">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<div class="img_content_block" ref="imgbox" @mousemove="startMove($event)">
|
||||
<img class="placement_img" :src="perviewUrl || printObject?.url">
|
||||
<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)" @mousemove="startMove($event)">
|
||||
<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
|
||||
<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref,createVNode} from 'vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import {dataURLtoFile} from "@/tool/util"
|
||||
import { useStore } from "vuex";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const store = useStore()
|
||||
let oldLocationList:any = ref([])
|
||||
let locationList:any = ref([])
|
||||
let printObject:any = ref({})
|
||||
let imgBox:any = ref({})
|
||||
let intObj:any = ref(null)
|
||||
let currentSign:any = ref({})
|
||||
let oldPointList:any = ref([]) //备份点
|
||||
let pointList:any = ref([])
|
||||
let isSubmit:any = ref(false) //判断历史是否有提交过
|
||||
return {
|
||||
store,
|
||||
oldLocationList,
|
||||
locationList,
|
||||
printObject,
|
||||
imgBox,
|
||||
intObj,
|
||||
currentSign,
|
||||
oldPointList,
|
||||
pointList,
|
||||
isSubmit
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
placementShow:false,
|
||||
collectionIndex:0,
|
||||
startDian:false,
|
||||
moveOriginal:{posX: 0, posY: 0},
|
||||
isRemoveStatus:false,
|
||||
placement_sacle:30,
|
||||
perviewUrl:'',//预览的图片地址
|
||||
isShowMark:false,
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
formatter(value:number){
|
||||
return `${value}%`;
|
||||
},
|
||||
|
||||
showPlacementModal(data:any){
|
||||
this.placementShow = true
|
||||
this.printObject = {
|
||||
...data
|
||||
}
|
||||
setTimeout(()=>{
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let position = imgbox.getBoundingClientRect()
|
||||
this.imgBox = {
|
||||
width:imgbox.clientWidth,
|
||||
height:imgbox.scrollHeight,
|
||||
left : position.left,
|
||||
top:position.top,
|
||||
scrollTop:imgbox.scrollTop || 0,
|
||||
}
|
||||
this.getDefaultPointList(this.imgBox)
|
||||
},500)
|
||||
},
|
||||
|
||||
//初始化可以使用的点位
|
||||
getDefaultPointList(imgBox:any){
|
||||
this.isSubmit = false
|
||||
this.pointList = [
|
||||
{
|
||||
title:'SHOULDER',
|
||||
pointList:[{type:'shoulderLeft',color:'#6E70FF',show:true,field:'shoulder'},{type:'shoulderRight',color:'#6E70FF',show:true,field:'shoulder'}]
|
||||
},
|
||||
{
|
||||
title:'WAISTBAND',
|
||||
pointList:[{type:'waistbandLeft',color:'#6FCEFF',show:true,field:'waistband'},{type:'waistbandRight',color:'#6FCEFF',show:true,field:'waistband'}]
|
||||
},
|
||||
{
|
||||
title:'HAND',
|
||||
pointList:[{type:'handLeft',color:'#CCFF7B',show:true,field:'hand'},{type:'handRight',color:'#CCFF7B',show:true,field:'hand'}]
|
||||
},
|
||||
]
|
||||
if(this.printObject.templateId){//编辑
|
||||
this.isSubmit = true
|
||||
for(let ponit of this.pointList){
|
||||
for(let pointItem of ponit.pointList){
|
||||
if(this.printObject[pointItem.type]?.length){
|
||||
pointItem.show = false
|
||||
let data = {
|
||||
left:this.printObject[pointItem.type][0] * imgBox.width - 12,
|
||||
top:this.printObject[pointItem.type][1] * imgBox.height - 12,
|
||||
color:pointItem.color,
|
||||
type:pointItem.type,
|
||||
field:pointItem.field,
|
||||
}
|
||||
this.locationList.push(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
this.oldLocationList = JSON.parse(JSON.stringify(this.locationList))
|
||||
|
||||
}
|
||||
|
||||
this.oldPointList = JSON.parse(JSON.stringify(this.pointList))
|
||||
},
|
||||
|
||||
|
||||
AddDian(point:any){
|
||||
if(!point.show){
|
||||
return
|
||||
}
|
||||
this.startDian = true
|
||||
this.isRemoveStatus = false
|
||||
this.intObj = point
|
||||
},
|
||||
|
||||
changeRemoveStatus(){
|
||||
this.isRemoveStatus = true
|
||||
},
|
||||
|
||||
startMove(event:any){
|
||||
if(this.isRemoveStatus){
|
||||
return
|
||||
}
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let scrollTop = imgbox.scrollTop;
|
||||
if(this.intObj){
|
||||
this.currentSign.left = event.clientX - this.imgBox.left
|
||||
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top
|
||||
this.currentSign.color = this.intObj.color
|
||||
this.currentSign.type= this.intObj.type
|
||||
this.currentSign.field = this.intObj.field
|
||||
this.locationList.push(this.currentSign)
|
||||
this.intObj.show = false
|
||||
this.intObj = null
|
||||
}else{
|
||||
if(this.startDian){
|
||||
this.currentSign.left = event.clientX - this.imgBox.left - this.moveOriginal.posX
|
||||
this.currentSign.top = event.clientY + scrollTop - this.imgBox.top -this.moveOriginal.posY
|
||||
document.addEventListener('mouseup', this.getMouseOver);
|
||||
this.$forceUpdate()
|
||||
this.setBoundarySign()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 在边界上的签名域处理
|
||||
setBoundarySign() {
|
||||
let imgbox:any = this.$refs.imgbox
|
||||
let height = imgbox.offsetHeight + imgbox.scrollTop;
|
||||
// 2 为签名域的边框
|
||||
let maxPosHeight = height - 24
|
||||
let maxPosWidth = imgbox.clientWidth - 24 //+ this.signBox.paddLeft;
|
||||
if (this.currentSign.top <= 0) {
|
||||
this.currentSign.top = 0
|
||||
} else if (this.currentSign.top >= maxPosHeight ) {
|
||||
this.currentSign.top = maxPosHeight;
|
||||
}
|
||||
if (this.currentSign.left <= 0) {
|
||||
this.currentSign.left = 0
|
||||
} else if (this.currentSign.left >= maxPosWidth) {
|
||||
this.currentSign.left = maxPosWidth;
|
||||
}
|
||||
},
|
||||
|
||||
getMouseDown(event:any,item:any,index:number){
|
||||
if(this.isRemoveStatus){
|
||||
for(let itemPoint of this.pointList){
|
||||
for(let point of itemPoint.pointList){
|
||||
if(item.type == point.type){
|
||||
point.show = true
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
this.locationList.splice(index,1)
|
||||
}else{
|
||||
this.currentSign = item
|
||||
// 计算出鼠标在签名域上的偏移
|
||||
this.moveOriginal.posX = event.offsetX
|
||||
this.moveOriginal.posY = event.offsetY // 1为边框
|
||||
this.startDian = true
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
getMouseOver(){
|
||||
this.startDian = false
|
||||
this.currentSign = {}
|
||||
document.removeEventListener('mouseup', this.getMouseOver);
|
||||
},
|
||||
|
||||
closeModal(){
|
||||
let _this = this
|
||||
if(!this.isSubmit){
|
||||
Modal.confirm({
|
||||
title: "You haven't marked the image yet, and the model will not be uploaded. Are you sure you want to close it?",
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Ok',
|
||||
mask:false,
|
||||
cancelText: 'Cancel',
|
||||
// centered:true,
|
||||
onOk() {
|
||||
// _this.getDefaultPointList(_this.imgBox)
|
||||
_this.oldLocationList = []
|
||||
_this.locationList = []
|
||||
_this.intObj = null
|
||||
_this.currentSign = {}
|
||||
_this.isRemoveStatus = false
|
||||
_this.placementShow = false
|
||||
_this.perviewUrl = ''
|
||||
}
|
||||
});
|
||||
}else{
|
||||
// _this.getDefaultPointList(_this.imgBox)
|
||||
_this.oldLocationList = []
|
||||
_this.locationList = []
|
||||
_this.intObj = null
|
||||
_this.currentSign = {}
|
||||
_this.isRemoveStatus = false
|
||||
_this.placementShow = false
|
||||
_this.perviewUrl = ''
|
||||
}
|
||||
},
|
||||
|
||||
restoreLocationList(){
|
||||
this.pointList = JSON.parse(JSON.stringify(this.oldPointList))
|
||||
this.locationList = JSON.parse(JSON.stringify(this.oldLocationList))
|
||||
},
|
||||
|
||||
submitPlacement(){
|
||||
if(this.printObject.templateId){
|
||||
this.printObject.id = this.printObject.libraryId
|
||||
this.confrimSubmit()
|
||||
}else{
|
||||
this.customRequest().then((rv:any)=>{
|
||||
this.isShowMark = false
|
||||
this.printObject.id = rv.id
|
||||
this.confrimSubmit()
|
||||
}).catch((res:any)=>{
|
||||
this.isShowMark = false
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
confrimSubmit(){
|
||||
let param = {
|
||||
libraryId:this.printObject.id,
|
||||
templateId:this.printObject.templateId || null,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
...this.getPrintLocation()
|
||||
}
|
||||
this.isShowMark = true
|
||||
Https.axiosPost(Https.httpUrls.saveOrEditTemplatePoint, param).then(
|
||||
(rv: any) => {
|
||||
this.isShowMark = false
|
||||
this.isSubmit = true
|
||||
this.$emit('submitModelPlacement')
|
||||
this.closeModal()
|
||||
}
|
||||
).catch(res=>{
|
||||
this.isShowMark = false
|
||||
});
|
||||
},
|
||||
|
||||
customRequest(){
|
||||
let new_data = {
|
||||
file:this.printObject.file,
|
||||
level1Type:'Models',
|
||||
level2Type:'',
|
||||
sex:'',
|
||||
modelType:'',
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
}
|
||||
this.isShowMark = true
|
||||
return new Promise((resolve,reject)=>{
|
||||
Https.axiosPost(Https.httpUrls.libraryUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
||||
(rv: any) => {
|
||||
resolve(rv)
|
||||
}
|
||||
).catch((res)=>{
|
||||
reject(res)
|
||||
});
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
getPrintLocation(){
|
||||
let {width , height} = this.imgBox
|
||||
let locationData:any = {}
|
||||
let returnData:any = {}
|
||||
let newLocationList = JSON.parse(JSON.stringify(this.locationList))
|
||||
//进行字段归类
|
||||
for(let item of newLocationList){
|
||||
locationData[item.field] = locationData[item.field] || []
|
||||
locationData[item.field].push(item)
|
||||
}
|
||||
for(let key in locationData){
|
||||
locationData[key].sort(this.sortBy("left")) //通过left字段进行排序
|
||||
locationData[key].forEach((v:any,index:any) => {
|
||||
v.type = !index ?v.field + 'Left' :v.field +'Right' //第一个是left，第二个是right
|
||||
v.left = ((v.left + 12) / width).toFixed(4)
|
||||
v.top = ((v.top + 12) / height).toFixed(4)
|
||||
returnData[v.type] = [v.left, v.top]
|
||||
});
|
||||
}
|
||||
return returnData
|
||||
},
|
||||
|
||||
sortBy(field:any) {
|
||||
return function(a:any,b:any) {
|
||||
return a[field] - b[field];
|
||||
}
|
||||
},
|
||||
|
||||
printPreview(){
|
||||
let file = this.printObject.templateId ? null :this.printObject.file,
|
||||
models = {
|
||||
libraryId:this.printObject.libraryId || null,
|
||||
templateId:this.printObject.templateId || null,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
...this.getPrintLocation()
|
||||
}
|
||||
let formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append("models", new Blob([JSON.stringify(models)], {type: "application/json"}));
|
||||
if(this.isShowMark){
|
||||
return
|
||||
}
|
||||
this.isShowMark = true
|
||||
Https.axiosPost(Https.httpUrls.libraryModelsDot, formData,{headers:{'Content-Type': 'multipart/form-data'}}).then(
|
||||
(rv: any) => {
|
||||
this.perviewUrl = rv
|
||||
this.isShowMark = false
|
||||
}
|
||||
).catch(res=>{
|
||||
this.isShowMark = false
|
||||
});
|
||||
},
|
||||
|
||||
backPreview(){
|
||||
this.perviewUrl = ''
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less">
|
||||
.models_placement_component{
|
||||
.ant-modal-close{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
position: absolute;
|
||||
top: -1.8rem;
|
||||
right: -1.8rem;
|
||||
}
|
||||
|
||||
.ant-modal-header{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ant-modal-body{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.close_icon{
|
||||
width: 3.6rem;
|
||||
height: 3.6rem;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
line-height: 3.6rem;
|
||||
text-align: center;
|
||||
|
||||
.icon-guanbi{
|
||||
font-size: 2rem;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.models_placement_body{
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
.palcement_modal_header{
|
||||
position: relative;
|
||||
height: 6.6rem;
|
||||
width: 100%;
|
||||
margin-bottom: 3rem;
|
||||
.placement_operate_list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin:0 auto;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
height: 100%;
|
||||
|
||||
.operate_item{
|
||||
margin-right: 4rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
.operate_icon{
|
||||
font-size: 2.1rem;
|
||||
color: #64686D;
|
||||
}
|
||||
|
||||
.operate_item_des{
|
||||
height: 1.2rem;
|
||||
font-size: 1.3rem;
|
||||
color: #64686D;
|
||||
}
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.models_placement_content{
|
||||
position: relative;
|
||||
// height: calc(100% - 6.6rem);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.plcaement_point_content{
|
||||
border: 2px solid #000;
|
||||
border-radius: 1rem;
|
||||
width: 22rem;
|
||||
background: #EBECF4;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
padding: 0 1.4rem;
|
||||
.placement_point_item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 3rem;
|
||||
|
||||
.ponit_title{
|
||||
font-size: 1.3rem;
|
||||
color: #64686D;
|
||||
user-select:none; /* CSS3属性 */
|
||||
}
|
||||
|
||||
.point_list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 6.2rem;
|
||||
justify-content: space-between;
|
||||
|
||||
.point_item{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
border-radius: 50%;
|
||||
border:solid 0.2rem transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
-moz-user-select:none; /* Firefox私有属性 */
|
||||
-webkit-user-select:none; /* WebKit内核私有属性 */
|
||||
-ms-user-select:none; /* IE私有属性(IE10及以后) */
|
||||
-khtml-user-select:none; /* KHTML内核私有属性 */
|
||||
-o-user-select:none; /* Opera私有属性 */
|
||||
user-select:none; /* CSS3属性 */
|
||||
|
||||
|
||||
.point_block{
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.placement_content_operate_list{
|
||||
width: 10.6rem;
|
||||
background: #EBECF4;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top:18.4rem;
|
||||
|
||||
.placement_content_operate_item{
|
||||
padding: 1.5rem 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
.placement_content_operate_des{
|
||||
width: 100%;
|
||||
font-size: 1.3rem;
|
||||
color: #64686D;
|
||||
-moz-user-select:none;
|
||||
user-select:none
|
||||
}
|
||||
|
||||
.print_scale_value{
|
||||
height: 1.1rem;
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
margin-bottom: 0.3rem;
|
||||
color: #64686D;
|
||||
}
|
||||
|
||||
.ant-tooltip-placement-top{
|
||||
top: -37px !important;
|
||||
}
|
||||
|
||||
.ant-slider-track{
|
||||
background: #343579;
|
||||
}
|
||||
.ant-slider-handle{
|
||||
border-color: #343579;
|
||||
}
|
||||
|
||||
.placement_remove_point_block{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
border: 2px solid #000000;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto 0.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.placement_tip_content{
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
bottom: 2rem;
|
||||
width: 30rem;
|
||||
font-size: 1.3rem;
|
||||
color: #64686D;
|
||||
}
|
||||
|
||||
.img_preview_block{
|
||||
width: 40.8rem;
|
||||
background: #ffffff;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
user-select:none;
|
||||
-moz-user-select:none;
|
||||
position: relative;
|
||||
|
||||
.img_content_block{
|
||||
width: 40.8rem;
|
||||
height: 100%;
|
||||
max-height: 63.2rem;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: none;
|
||||
overflow: -moz-scrollbars-none;
|
||||
position: relative;
|
||||
|
||||
&::-webkit-scrollbar { width: 0 !important }
|
||||
}
|
||||
|
||||
.perview_mark_loading{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
z-index: 9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.placement_img{
|
||||
width: 100%;
|
||||
user-select:none;
|
||||
-moz-user-select:none;
|
||||
}
|
||||
|
||||
.ponit_click{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 50%;
|
||||
-moz-user-select:none; /* Firefox私有属性 */
|
||||
-webkit-user-select:none; /* WebKit内核私有属性 */
|
||||
-ms-user-select:none; /* IE私有属性(IE10及以后) */
|
||||
-khtml-user-select:none; /* KHTML内核私有属性 */
|
||||
-o-user-select:none; /* Opera私有属性 */
|
||||
user-select:none; /* CSS3属性 */
|
||||
cursor: pointer;
|
||||
|
||||
&.remove_point_click{
|
||||
border-color: transparent;
|
||||
background: #EF3C3C;
|
||||
}
|
||||
|
||||
.placement_add_point_content{
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: #6E70FF;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.icon-guanbi{
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
color:#ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user