1290 lines
42 KiB
Vue
1290 lines
42 KiB
Vue
<template>
|
|
<div class="imageDiv_">
|
|
<div class="imageDiv_Comparison" style="overflow: hidden">
|
|
<div class="imageDiv_Comparison_title">前时相</div>
|
|
<div class="imageDiv_Comparison_1">1</div>
|
|
<div
|
|
ref="mouseCanvasRef_1"
|
|
class="dragModal_1"
|
|
@wheel="onWheel"
|
|
@mousedown="onMouseDown($event, 1)"
|
|
:style="{
|
|
position: 'relative',
|
|
transform: `scale(${scale}) rotate(${rotationAngle}deg)`,
|
|
transition: 'transform 0.2s',
|
|
width: `100%`,
|
|
height: `100%`,
|
|
background: `url(${nowImageGroup?.url1}) no-repeat center center`,
|
|
backgroundSize: 'contain',
|
|
backgroundPosition: 'center',
|
|
}"
|
|
>
|
|
<!-- 创建的矩形 -->
|
|
<div
|
|
v-for="(rect, index) in graffitis"
|
|
:key="index"
|
|
:style="{
|
|
position: 'absolute',
|
|
left: rect.x + 'px',
|
|
top: rect.y + 'px',
|
|
width: rect.width + 'px',
|
|
height: rect.height + 'px',
|
|
zIndex: rect.status == 'edit' ? 1000 : 201,
|
|
}"
|
|
>
|
|
<!-- 文字标签 -->
|
|
<div
|
|
v-if="nowGraffiti == index || (rect.text && rect.type == 'hand')"
|
|
:style="{
|
|
position: 'absolute',
|
|
left: '0px',
|
|
top: rect.height + 'px',
|
|
width: '235px',
|
|
height: 30 + 'px',
|
|
background: nowGraffiti == index ? '#ffffff' : '#ffffff00',
|
|
}"
|
|
>
|
|
<div style="display: block" v-if="nowGraffiti == index">
|
|
<a-input
|
|
v-model:value="rect.text"
|
|
style="width: 110px; height: 30px; margin-right: 10px"
|
|
@keypress.enter="
|
|
nowGraffiti = -1;
|
|
rect.status = 'success';
|
|
addGraffiti();
|
|
"
|
|
/>
|
|
<CheckOutlined
|
|
style="margin-right: 10px; padding: 3px; color: green"
|
|
@click="
|
|
nowGraffiti = -1;
|
|
rect.status = 'success';
|
|
addGraffiti();
|
|
"
|
|
/>
|
|
<CloseOutlined
|
|
style="margin-right: 10px; padding: 3px; color: red"
|
|
@click="
|
|
rect.text
|
|
? ((rect.x = graffitisClone[index].x),
|
|
(rect.y = graffitisClone[index].y),
|
|
(rect.width = graffitisClone[index].width),
|
|
(rect.height = graffitisClone[index].height),
|
|
(rect.color = graffitisClone[index].color),
|
|
(rect.text = graffitisClone[index].text),
|
|
(rect.status = 'success'))
|
|
: graffitis.splice(index, 1);
|
|
nowGraffiti = -1;
|
|
"
|
|
/>
|
|
<DeleteOutlined
|
|
style="margin-right: 10px; padding: 3px"
|
|
@click="
|
|
deleteGraffiti(index, rect.text);
|
|
nowGraffiti = -1;
|
|
"
|
|
/>
|
|
<a-popover placement="top">
|
|
<template #content>
|
|
<div style="display: flex; gap: 3px">
|
|
<div
|
|
class="popoverClass"
|
|
v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
|
|
:key="color"
|
|
:style="{ background: color }"
|
|
@click="rect.color = color"
|
|
>
|
|
<CheckOutlined
|
|
v-if="rect.color == color"
|
|
style="color: white; padding: 3px"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<FontColorsOutlined style="" />
|
|
</a-popover>
|
|
</div>
|
|
<div
|
|
v-if="nowGraffiti != index"
|
|
style="
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
-webkit-text-stroke: 0.1px white;
|
|
width: fit-content;
|
|
"
|
|
:style="{
|
|
textDecoration: rect.status == 'mouse' ? 'underline' : '',
|
|
}"
|
|
@mouseenter="graffitiFlag && rect.status != 'edit' ? (rect.status = 'mouse') : ''"
|
|
@mouseleave="graffitiFlag && rect.status == 'mouse' ? (rect.status = 'success') : ''"
|
|
@click="
|
|
graffitiFlag
|
|
? ((rect.status = 'edit'),
|
|
(graffitisClone = cloneDeep(graffitis)),
|
|
(nowGraffiti = index))
|
|
: ''
|
|
"
|
|
>
|
|
{{ rect.text }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="rect.text && rect.type == 'ai'"
|
|
:style="{
|
|
position: 'absolute',
|
|
left: '0px',
|
|
top: '-20px',
|
|
width: '50px',
|
|
height: 30 + 'px',
|
|
background: '#ffffff00',
|
|
color: rect.color,
|
|
}"
|
|
>
|
|
{{ rect.text }}
|
|
</div>
|
|
<!-- 上 -->
|
|
<div
|
|
:style="{
|
|
position: 'absolute',
|
|
left: rect.status == 'edit' ? '6px' : '0px',
|
|
top: '0px',
|
|
width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
|
|
height: '4px',
|
|
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
|
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
|
}"
|
|
@mouseenter="mouseenter(rect, 'top')"
|
|
@mouseleave="mouseleave(rect)"
|
|
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
|
@mousedown="funMouseDownEdit($event, index, 'top', 1)"
|
|
/>
|
|
<!-- 下 -->
|
|
<div
|
|
:style="{
|
|
position: 'absolute',
|
|
left: rect.status == 'edit' ? '6px' : '0px',
|
|
bottom: `0px`,
|
|
width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
|
|
height: '4px',
|
|
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
|
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
|
}"
|
|
@mouseenter="mouseenter(rect, 'bottom')"
|
|
@mouseleave="mouseleave(rect)"
|
|
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
|
@mousedown="funMouseDownEdit($event, index, 'bottom', 1)"
|
|
/>
|
|
<!-- 右 -->
|
|
<div
|
|
:style="{
|
|
position: 'absolute',
|
|
right: '0px',
|
|
top: rect.status == 'edit' ? '6px' : '0px',
|
|
width: '4px',
|
|
height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`,
|
|
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
|
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
|
}"
|
|
@mouseenter="mouseenter(rect, 'right')"
|
|
@mouseleave="mouseleave(rect)"
|
|
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
|
@mousedown="funMouseDownEdit($event, index, 'right', 1)"
|
|
/>
|
|
<!-- 左 -->
|
|
<div
|
|
:style="{
|
|
position: 'absolute',
|
|
left: '0px',
|
|
top: rect.status == 'edit' ? '6px' : '0px',
|
|
width: '4px',
|
|
height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`,
|
|
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
|
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
|
}"
|
|
@mouseenter="mouseenter(rect, 'left')"
|
|
@mouseleave="mouseleave(rect)"
|
|
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
|
@mousedown="funMouseDownEdit($event, index, 'left', 1)"
|
|
/>
|
|
<!-- 左上 -->
|
|
<div
|
|
v-if="rect.status == 'edit'"
|
|
:style="{
|
|
position: 'absolute',
|
|
left: '-4px',
|
|
top: '-4px',
|
|
width: '12px',
|
|
height: '12px',
|
|
background: `#ffffff`,
|
|
}"
|
|
@mouseenter="mouseenter(rect, 'leftTop')"
|
|
@mouseleave="mouseleave(rect)"
|
|
@mousedown="funMouseDownEdit($event, index, 'leftTop', 1)"
|
|
/>
|
|
<!-- 右下 -->
|
|
<div
|
|
v-if="rect.status == 'edit'"
|
|
:style="{
|
|
position: 'absolute',
|
|
right: '-4px',
|
|
bottom: '-4px',
|
|
width: '12px',
|
|
height: '12px',
|
|
background: `#ffffff`,
|
|
}"
|
|
@mouseenter="mouseenter(rect, 'rightBottom')"
|
|
@mouseleave="mouseleave(rect)"
|
|
@mousedown="funMouseDownEdit($event, index, 'rightBottom', 1)"
|
|
/>
|
|
<!-- 右上 -->
|
|
<div
|
|
v-if="rect.status == 'edit'"
|
|
:style="{
|
|
position: 'absolute',
|
|
right: '-4px',
|
|
top: '-4px',
|
|
width: '12px',
|
|
height: '12px',
|
|
background: `#ffffff`,
|
|
}"
|
|
@mouseenter="mouseenter(rect, 'rightTop')"
|
|
@mouseleave="mouseleave(rect)"
|
|
@mousedown="funMouseDownEdit($event, index, 'rightTop', 1)"
|
|
/>
|
|
<!-- 左下 -->
|
|
<div
|
|
v-if="rect.status == 'edit'"
|
|
:style="{
|
|
position: 'absolute',
|
|
left: '-4px',
|
|
bottom: '-4px',
|
|
width: '12px',
|
|
height: '12px',
|
|
background: `#ffffff`,
|
|
}"
|
|
@mouseenter="mouseenter(rect, 'leftBottom')"
|
|
@mouseleave="mouseleave(rect)"
|
|
@mousedown="funMouseDownEdit($event, index, 'leftBottom', 1)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="imageDiv_Comparison" style="overflow: hidden">
|
|
<div class="imageDiv_Comparison_title">后时相</div>
|
|
<div class="imageDiv_Comparison_2">2</div>
|
|
<div
|
|
ref="mouseCanvasRef_2"
|
|
class="dragModal_2"
|
|
@wheel="onWheel"
|
|
@mousedown="onMouseDown($event, 2)"
|
|
:style="{
|
|
position: 'relative',
|
|
transform: `scale(${scale}) rotate(${rotationAngle}deg)`,
|
|
transition: 'transform 0.2s',
|
|
width: `100%`,
|
|
height: `100%`,
|
|
background: `url(${nowImageGroup?.url2}) no-repeat center center`,
|
|
backgroundSize: 'contain',
|
|
backgroundPosition: 'center',
|
|
}"
|
|
>
|
|
<!-- 创建的矩形 -->
|
|
<div
|
|
v-for="(rect, index) in graffitis"
|
|
:key="index"
|
|
:style="{
|
|
position: 'absolute',
|
|
left: rect.x + 'px',
|
|
top: rect.y + 'px',
|
|
width: rect.width + 'px',
|
|
height: rect.height + 'px',
|
|
zIndex: rect.status == 'edit' ? 1000 : 201,
|
|
}"
|
|
>
|
|
<!-- 文字标签 -->
|
|
<div
|
|
v-if="nowGraffiti == index || rect.text"
|
|
:style="{
|
|
position: 'absolute',
|
|
left: '0px',
|
|
top: rect.height + 'px',
|
|
width: '235px',
|
|
height: 30 + 'px',
|
|
background: nowGraffiti == index ? '#ffffff' : '#ffffff00',
|
|
}"
|
|
>
|
|
<div style="display: block" v-if="nowGraffiti == index">
|
|
<a-input
|
|
v-model:value="rect.text"
|
|
style="width: 110px; height: 30px; margin-right: 10px"
|
|
@keypress.enter="
|
|
nowGraffiti = -1;
|
|
rect.status = 'success';
|
|
addGraffiti();
|
|
"
|
|
/>
|
|
<CheckOutlined
|
|
style="margin-right: 10px; padding: 3px; color: green"
|
|
@click="
|
|
nowGraffiti = -1;
|
|
rect.status = 'success';
|
|
addGraffiti();
|
|
"
|
|
/>
|
|
<CloseOutlined
|
|
style="margin-right: 10px; padding: 3px; color: red"
|
|
@click="
|
|
rect.text
|
|
? ((rect.x = graffitisClone[index].x),
|
|
(rect.y = graffitisClone[index].y),
|
|
(rect.width = graffitisClone[index].width),
|
|
(rect.height = graffitisClone[index].height),
|
|
(rect.color = graffitisClone[index].color),
|
|
(rect.text = graffitisClone[index].text),
|
|
(rect.status = 'success'))
|
|
: graffitis.splice(index, 1);
|
|
nowGraffiti = -1;
|
|
"
|
|
/>
|
|
<DeleteOutlined
|
|
style="margin-right: 10px; padding: 3px"
|
|
@click="
|
|
deleteGraffiti(index, rect.text);
|
|
nowGraffiti = -1;
|
|
"
|
|
/>
|
|
<a-popover placement="top">
|
|
<template #content>
|
|
<div style="display: flex; gap: 3px">
|
|
<div
|
|
class="popoverClass"
|
|
v-for="color in ['#2D8CF0', '#19BE6B', '#FFBB00', '#E23C39', '#B620E0']"
|
|
:key="color"
|
|
:style="{ background: color }"
|
|
@click="rect.color = color"
|
|
>
|
|
<CheckOutlined
|
|
v-if="rect.color == color"
|
|
style="color: white; padding: 3px"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<FontColorsOutlined style="" />
|
|
</a-popover>
|
|
</div>
|
|
<div
|
|
v-if="nowGraffiti != index"
|
|
style="
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
-webkit-text-stroke: 0.1px white;
|
|
width: fit-content;
|
|
"
|
|
:style="{
|
|
textDecoration: rect.status == 'mouse' ? 'underline' : '',
|
|
}"
|
|
@mouseenter="graffitiFlag && rect.status != 'edit' ? (rect.status = 'mouse') : ''"
|
|
@mouseleave="graffitiFlag && rect.status == 'mouse' ? (rect.status = 'success') : ''"
|
|
@click="
|
|
graffitiFlag
|
|
? ((rect.status = 'edit'),
|
|
(graffitisClone = cloneDeep(graffitis)),
|
|
(nowGraffiti = index))
|
|
: ''
|
|
"
|
|
>
|
|
{{ rect.text }}
|
|
</div>
|
|
</div>
|
|
<!-- 上 -->
|
|
<div
|
|
:style="{
|
|
position: 'absolute',
|
|
left: rect.status == 'edit' ? '6px' : '0px',
|
|
top: '0px',
|
|
width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
|
|
height: '4px',
|
|
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
|
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
|
}"
|
|
@mouseenter="mouseenter(rect, 'top')"
|
|
@mouseleave="mouseleave(rect)"
|
|
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
|
@mousedown="funMouseDownEdit($event, index, 'top', 2)"
|
|
/>
|
|
<!-- 下 -->
|
|
<div
|
|
:style="{
|
|
position: 'absolute',
|
|
left: rect.status == 'edit' ? '6px' : '0px',
|
|
bottom: `0px`,
|
|
width: rect.status == 'edit' ? `${rect.width - 14}px` : `${rect.width}px`,
|
|
height: '4px',
|
|
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
|
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
|
}"
|
|
@mouseenter="mouseenter(rect, 'bottom')"
|
|
@mouseleave="mouseleave(rect)"
|
|
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
|
@mousedown="funMouseDownEdit($event, index, 'bottom', 2)"
|
|
/>
|
|
<!-- 右 -->
|
|
<div
|
|
:style="{
|
|
position: 'absolute',
|
|
right: '0px',
|
|
top: rect.status == 'edit' ? '6px' : '0px',
|
|
width: '4px',
|
|
height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`,
|
|
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
|
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
|
}"
|
|
@mouseenter="mouseenter(rect, 'right')"
|
|
@mouseleave="mouseleave(rect)"
|
|
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
|
@mousedown="funMouseDownEdit($event, index, 'right', 2)"
|
|
/>
|
|
<!-- 左 -->
|
|
<div
|
|
:style="{
|
|
position: 'absolute',
|
|
left: '0px',
|
|
top: rect.status == 'edit' ? '6px' : '0px',
|
|
width: '4px',
|
|
height: rect.status == 'edit' ? `${rect.height - 14}px` : `${rect.height}px`,
|
|
background: `${props.graffitiColor != '#ffffff' ? props.graffitiColor : rect.color}`,
|
|
outline: rect.status != 'success' ? `2px solid #ffffff` : '',
|
|
}"
|
|
@mouseenter="mouseenter(rect, 'left')"
|
|
@mouseleave="mouseleave(rect)"
|
|
@click="graffitiFlag ? ((rect.status = 'edit'), (nowGraffiti = index)) : ''"
|
|
@mousedown="funMouseDownEdit($event, index, 'left', 2)"
|
|
/>
|
|
<!-- 左上 -->
|
|
<div
|
|
v-if="rect.status == 'edit'"
|
|
:style="{
|
|
position: 'absolute',
|
|
left: '-4px',
|
|
top: '-4px',
|
|
width: '12px',
|
|
height: '12px',
|
|
background: `#ffffff`,
|
|
}"
|
|
@mouseenter="mouseenter(rect, 'leftTop')"
|
|
@mouseleave="mouseleave(rect)"
|
|
@mousedown="funMouseDownEdit($event, index, 'leftTop', 2)"
|
|
/>
|
|
<!-- 右下 -->
|
|
<div
|
|
v-if="rect.status == 'edit'"
|
|
:style="{
|
|
position: 'absolute',
|
|
right: '-4px',
|
|
bottom: '-4px',
|
|
width: '12px',
|
|
height: '12px',
|
|
background: `#ffffff`,
|
|
}"
|
|
@mouseenter="mouseenter(rect, 'rightBottom')"
|
|
@mouseleave="mouseleave(rect)"
|
|
@mousedown="funMouseDownEdit($event, index, 'rightBottom', 2)"
|
|
/>
|
|
<!-- 右上 -->
|
|
<div
|
|
v-if="rect.status == 'edit'"
|
|
:style="{
|
|
position: 'absolute',
|
|
right: '-4px',
|
|
top: '-4px',
|
|
width: '12px',
|
|
height: '12px',
|
|
background: `#ffffff`,
|
|
}"
|
|
@mouseenter="mouseenter(rect, 'rightTop')"
|
|
@mouseleave="mouseleave(rect)"
|
|
@mousedown="funMouseDownEdit($event, index, 'rightTop', 2)"
|
|
/>
|
|
<!-- 左下 -->
|
|
<div
|
|
v-if="rect.status == 'edit'"
|
|
:style="{
|
|
position: 'absolute',
|
|
left: '-4px',
|
|
bottom: '-4px',
|
|
width: '12px',
|
|
height: '12px',
|
|
background: `#ffffff`,
|
|
}"
|
|
@mouseenter="mouseenter(rect, 'leftBottom')"
|
|
@mouseleave="mouseleave(rect)"
|
|
@mousedown="funMouseDownEdit($event, index, 'leftBottom', 2)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="imageDiv_BottomButton">
|
|
<div class="bottomButtonList">
|
|
<!-- 上一个 -->
|
|
<div class="button">
|
|
<a-tooltip placement="top">
|
|
<template #title>
|
|
<span>上一个</span>
|
|
</template>
|
|
<LeftOutlined @click="clickLeftOrRightButton('left')" />
|
|
</a-tooltip>
|
|
</div>
|
|
<div :class="inputFlag ? 'buttonInput' : 'button'">
|
|
<span v-if="!inputFlag" style="width: 100px" @click="focusInput">
|
|
{{ nowImageGroupIndex }}
|
|
</span>
|
|
<a-input
|
|
ref="inputRef"
|
|
v-if="inputFlag"
|
|
v-model:value="nowImageGroupIndex"
|
|
style="width: 46px"
|
|
@blur="blurInput"
|
|
@keypress.enter="blurInput"
|
|
/>
|
|
/
|
|
{{ props.nowRecord.imageGroup.length }}
|
|
</div>
|
|
<!-- 下一个 -->
|
|
<div class="button">
|
|
<a-tooltip placement="top">
|
|
<template #title>
|
|
<span>下一个</span>
|
|
</template>
|
|
<RightOutlined @click="clickLeftOrRightButton('right')" />
|
|
</a-tooltip>
|
|
</div>
|
|
<span style="color: gray; margin-left: 5px; margin-right: 5px">|</span>
|
|
<!-- 放大 -->
|
|
<div class="button">
|
|
<a-tooltip placement="top">
|
|
<template #title>
|
|
<span>放大</span>
|
|
</template>
|
|
<ZoomInOutlined @click="zoomIn" />
|
|
</a-tooltip>
|
|
</div>
|
|
<!-- 缩小 -->
|
|
<div class="button">
|
|
<a-tooltip placement="top">
|
|
<template #title>
|
|
<span>缩小</span>
|
|
</template>
|
|
<ZoomOutOutlined @click="zoomOut" />
|
|
</a-tooltip>
|
|
</div>
|
|
<!-- 顺时针旋转 -->
|
|
<div class="button">
|
|
<a-tooltip placement="top">
|
|
<template #title>
|
|
<span>顺时针旋转</span>
|
|
</template>
|
|
<RotateRightOutlined @click="rotateClockwise" />
|
|
</a-tooltip>
|
|
</div>
|
|
<!-- 逆时针旋转 -->
|
|
<div class="button">
|
|
<a-tooltip placement="top">
|
|
<template #title>
|
|
<span>逆时针旋转</span>
|
|
</template>
|
|
<RotateLeftOutlined @click="rotateCounterClockwise" />
|
|
</a-tooltip>
|
|
</div>
|
|
<!-- 复位刷新 -->
|
|
<div class="button">
|
|
<a-tooltip placement="top">
|
|
<template #title>
|
|
<span>复位刷新</span>
|
|
</template>
|
|
<RedoOutlined @click="refresh" />
|
|
</a-tooltip>
|
|
</div>
|
|
<span style="color: gray; margin-left: 5px; margin-right: 5px" v-if="props.isEdit">|</span>
|
|
<!-- 涂鸦标记 -->
|
|
<div class="button" v-if="props.isEdit">
|
|
<a-tooltip placement="top">
|
|
<template #title>
|
|
<span> {{ graffitiFlag ? '关闭手动涂鸦标记' : '开启手动涂鸦标记' }}</span>
|
|
</template>
|
|
<EditOutlined @click="setGraffiti" />
|
|
</a-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 退出涂鸦 -->
|
|
<div class="escTip" v-if="graffitiFlag">
|
|
<div class="whiteEsc">Esc</div>
|
|
<div class="blackTip">退出涂鸦</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import {
|
|
RightOutlined,
|
|
LeftOutlined,
|
|
ZoomOutOutlined,
|
|
ZoomInOutlined,
|
|
RotateLeftOutlined,
|
|
RotateRightOutlined,
|
|
EditOutlined,
|
|
FontColorsOutlined,
|
|
RedoOutlined,
|
|
CloseOutlined,
|
|
ExportOutlined,
|
|
DownloadOutlined,
|
|
DeleteOutlined,
|
|
CheckOutlined,
|
|
EyeOutlined,
|
|
EyeInvisibleOutlined,
|
|
OneToOneOutlined,
|
|
BorderHorizontalOutlined,
|
|
ExpandOutlined,
|
|
CompressOutlined,
|
|
} from '@ant-design/icons-vue';
|
|
import { ref, watch, onMounted, onBeforeUnmount, computed, nextTick } from 'vue';
|
|
import { cloneDeep } from 'lodash-es';
|
|
import { getAppEnvConfig } from '@/utils/env';
|
|
|
|
const props = defineProps(['recordList', 'nowRecord', 'groupIndex', 'isEdit', 'graffitiColor']);
|
|
const emits = defineEmits(['chooseNowImageGroup']);
|
|
|
|
watch(
|
|
() => props.isEdit,
|
|
() => {
|
|
if (!props.isEdit) {
|
|
refresh();
|
|
graffitiFlag.value = false;
|
|
document.body.style.cursor = 'pointer';
|
|
}
|
|
},
|
|
);
|
|
watch(
|
|
() => props.groupIndex,
|
|
() => {
|
|
refresh();
|
|
nowImageGroupIndex.value = props.groupIndex;
|
|
nowImageGroup.value = props.nowRecord.imageGroup[props.groupIndex - 1];
|
|
},
|
|
);
|
|
watch(
|
|
() => props.graffitiColor,
|
|
() => {},
|
|
);
|
|
|
|
function chooseNowImageGroup(index) {
|
|
emits('chooseNowImageGroup', index);
|
|
}
|
|
|
|
// 当前图片组-----------------------------------
|
|
const nowImageGroup: any = ref();
|
|
const nowImageGroupIndex = ref(1);
|
|
|
|
// 上一个、下一个图片对比组
|
|
function clickLeftOrRightButton(direction) {
|
|
const imageGroupList = props.nowRecord.imageGroup;
|
|
const nowImageListId = cloneDeep(nowImageGroup.value.id);
|
|
for (let index = 0; index < imageGroupList.length; index++) {
|
|
if (imageGroupList[index].id == nowImageListId) {
|
|
if (direction == 'left') {
|
|
if (index == 0) {
|
|
nowImageGroup.value = imageGroupList[imageGroupList.length - 1];
|
|
chooseNowImageGroup(imageGroupList.length);
|
|
} else {
|
|
nowImageGroup.value = imageGroupList[index - 1];
|
|
chooseNowImageGroup(index);
|
|
}
|
|
}
|
|
if (direction == 'right') {
|
|
if (index == imageGroupList.length - 1) {
|
|
nowImageGroup.value = imageGroupList[0];
|
|
chooseNowImageGroup(1);
|
|
} else {
|
|
nowImageGroup.value = imageGroupList[index + 1];
|
|
chooseNowImageGroup(index + 2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
getNowImageGroup();
|
|
refresh();
|
|
}
|
|
// 当前图片组的索引
|
|
function getNowImageGroup() {
|
|
const nowRecordImageGroupList = props.nowRecord.imageGroup.map((item) => item.id);
|
|
nowImageGroupIndex.value = nowRecordImageGroupList.indexOf(nowImageGroup.value.id) + 1;
|
|
}
|
|
|
|
// 初始化、变更后----------------------------------
|
|
onMounted(() => {
|
|
if(props.nowRecord?.imageGroup.length > 0){
|
|
nowImageGroup.value = props.nowRecord.imageGroup[0];
|
|
getNowImageGroup();
|
|
}
|
|
});
|
|
watch(
|
|
() => props.nowRecord,
|
|
() => {
|
|
if(props.nowRecord?.imageGroup.length > 0){
|
|
nowImageGroup.value = props.nowRecord.imageGroup[0];
|
|
}
|
|
},
|
|
{
|
|
deep: true,
|
|
},
|
|
);
|
|
// -----------------------------------------------
|
|
const inputFlag = ref(false);
|
|
const inputRef = ref();
|
|
// input鼠标聚焦
|
|
function focusInput() {
|
|
inputFlag.value = true;
|
|
nextTick(() => {
|
|
if (inputRef.value && inputRef.value.focus) {
|
|
inputRef.value.focus();
|
|
}
|
|
});
|
|
}
|
|
// input鼠标聚焦后离开or点击Enter
|
|
function blurInput() {
|
|
inputFlag.value = false;
|
|
// 检测是否是数字
|
|
if (/^-?\d+(\.\d+)?$/.test(nowImageGroupIndex.value.toString())) {
|
|
if (parseInt(nowImageGroupIndex.value) > props.nowRecord.imageGroup.length) {
|
|
nowImageGroupIndex.value = props.nowRecord.imageGroup.length;
|
|
} else if (parseInt(nowImageGroupIndex.value) < 1) {
|
|
nowImageGroupIndex.value = 1;
|
|
}
|
|
} else {
|
|
nowImageGroupIndex.value = 1;
|
|
}
|
|
nowImageGroup.value = props.nowRecord.imageGroup[nowImageGroupIndex.value - 1];
|
|
chooseNowImageGroup(nowImageGroupIndex.value);
|
|
}
|
|
// 缩放比例、旋转-----------------------------------
|
|
const scale = ref(1);
|
|
const rotationAngle = ref(0);
|
|
// 放大函数
|
|
function zoomIn() {
|
|
if (scale.value < 3) {
|
|
// 设置最大缩放倍数为3倍
|
|
scale.value += 0.1;
|
|
}
|
|
}
|
|
// 缩小函数
|
|
function zoomOut() {
|
|
if (scale.value > 0.5) {
|
|
// 设置最小缩放倍数为0.5倍
|
|
scale.value -= 0.1;
|
|
}
|
|
}
|
|
// 顺时针旋转函数
|
|
function rotateClockwise() {
|
|
rotationAngle.value += 90; // 每次旋转90度
|
|
}
|
|
// 逆时针旋转
|
|
function rotateCounterClockwise() {
|
|
rotationAngle.value -= 90; // 每次旋转-90度
|
|
}
|
|
// 复位+刷新
|
|
function refresh() {
|
|
scale.value = 1;
|
|
rotationAngle.value = 0;
|
|
// 复位
|
|
const dragDocument1: any = document.querySelector('.dragModal_1');
|
|
if (dragDocument1) {
|
|
dragDocument1.style.left = 0 + 'px';
|
|
dragDocument1.style.top = 0 + 'px';
|
|
}
|
|
const dragDocument2: any = document.querySelector('.dragModal_2');
|
|
if (dragDocument2) {
|
|
dragDocument2.style.left = 0 + 'px';
|
|
dragDocument2.style.top = 0 + 'px';
|
|
}
|
|
}
|
|
|
|
// 设置画笔---------------------------------------------------------------
|
|
const graffitiFlag = ref(false);
|
|
const nowGraffiti = ref(-1);
|
|
const nowMouseGraffiti = ref(0);
|
|
// 设置鼠标格式
|
|
function setGraffiti() {
|
|
refresh();
|
|
graffitiFlag.value = !graffitiFlag.value;
|
|
if (graffitiFlag.value) {
|
|
document.body.style.cursor = 'crosshair';
|
|
} else {
|
|
document.body.style.cursor = 'pointer';
|
|
}
|
|
}
|
|
// 临时选框状态
|
|
const isDragging = ref(false);
|
|
let startX = 0;
|
|
let startY = 0;
|
|
let endX = 0;
|
|
let endY = 0;
|
|
// 鼠标拖动-状态管理
|
|
const dragState = {
|
|
isDragging: false,
|
|
initialMouseX: 0,
|
|
initialMouseY: 0,
|
|
initialElementX_1: 0,
|
|
initialElementY_1: 0,
|
|
initialElementX_2: 0,
|
|
initialElementY_2: 0,
|
|
};
|
|
// 所有已创建的矩形
|
|
const graffitis: any = ref([]);
|
|
const graffitisClone: any = ref([]);
|
|
let comparisoNnum = 0;
|
|
const mouseCanvasRef_1 = ref();
|
|
const mouseCanvasRef_2 = ref();
|
|
|
|
// 鼠标按下
|
|
function onMouseDown(event, num) {
|
|
if (
|
|
graffitiFlag.value &&
|
|
(graffitis.value.length == 0 || !graffitis.value?.some((item) => item.status != 'success'))
|
|
) {
|
|
// 涂鸦
|
|
if (nowGraffiti.value != -1) return;
|
|
if (graffitis.value.findIndex((item) => item.status == 'mouse') != -1) return;
|
|
comparisoNnum = num;
|
|
// 获取相对于容器的坐标
|
|
const rect =
|
|
comparisoNnum == 1
|
|
? mouseCanvasRef_1.value.getBoundingClientRect()
|
|
: mouseCanvasRef_2.value.getBoundingClientRect();
|
|
startX = event.x - rect.x;
|
|
startY = event.y - rect.y;
|
|
isDragging.value = true;
|
|
// 添加矩形到数组中
|
|
graffitis.value.push({
|
|
x: startX,
|
|
y: startY,
|
|
width: 0,
|
|
height: 0,
|
|
color: props.graffitiColor != '#ffffff' ? props.graffitiColor : '#E23C39',
|
|
text: '',
|
|
status: 'edit',
|
|
type: 'hand',
|
|
});
|
|
graffitisClone.value = cloneDeep(graffitis.value);
|
|
window.addEventListener('mousemove', onMouseMoveGraffit);
|
|
window.addEventListener('mouseup', onMouseUpGraffit);
|
|
}
|
|
if (!graffitiFlag.value) {
|
|
const dragElement1: any = document.querySelector('.dragModal_1');
|
|
const dragElement2: any = document.querySelector('.dragModal_2');
|
|
if (!dragElement1) return;
|
|
if (!dragElement2) return;
|
|
dragState.isDragging = true;
|
|
dragState.initialMouseX = event.clientX;
|
|
dragState.initialMouseY = event.clientY;
|
|
dragState.initialElementX_1 = dragElement1.offsetLeft;
|
|
dragState.initialElementY_1 = dragElement1.offsetTop;
|
|
dragState.initialElementX_2 = dragElement2.offsetLeft;
|
|
dragState.initialElementY_2 = dragElement2.offsetTop;
|
|
dragElement1.style.cursor = 'grabbing';
|
|
dragElement2.style.cursor = 'grabbing';
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
}
|
|
}
|
|
// 鼠标移动-涂鸦
|
|
function onMouseMoveGraffit(event) {
|
|
// 涂鸦
|
|
const rect =
|
|
comparisoNnum == 1
|
|
? mouseCanvasRef_1.value.getBoundingClientRect()
|
|
: mouseCanvasRef_2.value.getBoundingClientRect();
|
|
if (!isDragging.value) return;
|
|
endX = event.x - rect.x;
|
|
endY = event.y - rect.y;
|
|
if (endX < 0 && endY < 0) {
|
|
endX = startX;
|
|
endY = startY;
|
|
}
|
|
setMouseData();
|
|
}
|
|
// 鼠标松开-涂鸦
|
|
function onMouseUpGraffit(event) {
|
|
// 涂鸦
|
|
if (!isDragging.value) return;
|
|
const rect =
|
|
comparisoNnum == 1
|
|
? mouseCanvasRef_1.value.getBoundingClientRect()
|
|
: mouseCanvasRef_2.value.getBoundingClientRect();
|
|
endX = event.x - rect.x;
|
|
endY = event.y - rect.y;
|
|
if (endX < 0 && endY < 0) {
|
|
endX = startX;
|
|
endY = startY;
|
|
}
|
|
isDragging.value = false;
|
|
if (event.x > rect.right || event.y > rect.bottom) {
|
|
graffitis.value.splice(graffitis.value.length - 1, 1);
|
|
nowGraffiti.value = -1;
|
|
} else {
|
|
setMouseData();
|
|
nowGraffiti.value = graffitis.value.length - 1;
|
|
}
|
|
window.removeEventListener('mousemove', onMouseMoveGraffit);
|
|
window.removeEventListener('mouseup', onMouseUpGraffit);
|
|
}
|
|
// 鼠标移动-拖动
|
|
const handleMouseMove = (event) => {
|
|
const dragElement1: any = document.querySelector('.dragModal_1');
|
|
const dragElement2: any = document.querySelector('.dragModal_2');
|
|
if (!dragElement1) return;
|
|
if (!dragElement2) return;
|
|
if (!dragState.isDragging) return;
|
|
const deltaX = event.clientX - dragState.initialMouseX;
|
|
const deltaY = event.clientY - dragState.initialMouseY;
|
|
dragElement1.style.left = `${dragState.initialElementX_1 + deltaX}px`;
|
|
dragElement1.style.top = `${dragState.initialElementY_1 + deltaY}px`;
|
|
dragElement2.style.left = `${dragState.initialElementX_2 + deltaX}px`;
|
|
dragElement2.style.top = `${dragState.initialElementY_2 + deltaY}px`;
|
|
};
|
|
// 鼠标松开-拖动
|
|
const handleMouseUp = () => {
|
|
const dragElement1: any = document.querySelector('.dragModal_1');
|
|
const dragElement2: any = document.querySelector('.dragModal_2');
|
|
if (!dragElement1) return;
|
|
if (!dragElement2) return;
|
|
dragState.isDragging = false;
|
|
dragElement1.style.cursor = 'default';
|
|
dragElement2.style.cursor = 'default';
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
};
|
|
|
|
// 设置鼠标涂鸦绘画出的数据
|
|
function setMouseData() {
|
|
graffitis.value[graffitis.value.length - 1].x = Math.min(startX, endX);
|
|
graffitis.value[graffitis.value.length - 1].width = Math.abs(endX - startX);
|
|
graffitis.value[graffitis.value.length - 1].y = Math.min(startY, endY);
|
|
graffitis.value[graffitis.value.length - 1].height = Math.abs(endY - startY);
|
|
}
|
|
|
|
// 添加保存涂鸦
|
|
function addGraffiti() {
|
|
// UpdatePicStatus({
|
|
// id: props.nowPreviewRecord.id,
|
|
// fileTags: JSON.stringify(fileTags.value),
|
|
// graffitiJson: JSON.stringify(graffitis.value),
|
|
// display: props.nowPreviewRecord.display0,
|
|
// showOnMap: props.nowPreviewRecord.showOnMap,
|
|
// }).then((res) => {
|
|
// emits('handleSuccessPreview');
|
|
// });
|
|
}
|
|
// 删除鼠标涂鸦
|
|
function deleteGraffiti(index = undefined, value = undefined) {
|
|
graffitis.value.splice(index, 1);
|
|
}
|
|
|
|
// 鼠标滚轮
|
|
function onWheel(event) {
|
|
const delta = event.deltaY || event.detail || event.wheelDelta;
|
|
// 根据滚轮方向调整缩放比例
|
|
if (delta < 0) {
|
|
// 向上滚动，放大
|
|
scale.value += 0.1;
|
|
} else if (scale.value > 0.5) {
|
|
// 向下滚动，缩小
|
|
scale.value -= 0.1;
|
|
}
|
|
}
|
|
|
|
//------------------------------------------------------------------------
|
|
// 鼠标聚焦
|
|
function mouseenter(rect, type) {
|
|
if (graffitiFlag.value) {
|
|
// 鼠标聚焦状态
|
|
if (rect.status != 'edit') {
|
|
rect.status = 'mouse';
|
|
document.body.style.cursor = 'pointer';
|
|
}
|
|
// 编辑状态
|
|
if (rect.status == 'edit') {
|
|
if (type == 'top' || type == 'bottom') {
|
|
document.body.style.cursor = 'ns-resize';
|
|
}
|
|
if (type == 'left' || type == 'right') {
|
|
document.body.style.cursor = 'ew-resize';
|
|
}
|
|
if (type == 'leftTop' || type == 'rightBottom') {
|
|
document.body.style.cursor = 'nwse-resize';
|
|
}
|
|
if (type == 'leftBottom' || type == 'rightTop') {
|
|
document.body.style.cursor = 'nesw-resize';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 鼠标离开
|
|
function mouseleave(rect) {
|
|
if (graffitiFlag.value) {
|
|
if (rect.status == 'mouse' || rect.status == 'edit') {
|
|
if (rect.status == 'mouse') {
|
|
rect.status = 'success';
|
|
}
|
|
if (rect.status == 'edit') {
|
|
document.body.style.cursor = 'crosshair';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 编辑状态下的鼠标按下
|
|
const mouseEditType = ref('');
|
|
function funMouseDownEdit(e, index, type, num) {
|
|
if (graffitiFlag.value) {
|
|
// 获取相对于容器的坐标
|
|
graffitisClone.value = cloneDeep(graffitis.value);
|
|
comparisoNnum = num;
|
|
// 获取相对于容器的坐标
|
|
const rect =
|
|
comparisoNnum == 1
|
|
? mouseCanvasRef_1.value.getBoundingClientRect()
|
|
: mouseCanvasRef_2.value.getBoundingClientRect();
|
|
startX = e.x - rect.x;
|
|
startY = e.y - rect.y;
|
|
isDragging.value = true;
|
|
nowGraffiti.value = index;
|
|
mouseEditType.value = type;
|
|
window.addEventListener('mousemove', funMouseMoveEdit);
|
|
window.addEventListener('mouseup', funMouseUpEdit);
|
|
}
|
|
}
|
|
// 编辑状态下的鼠标移动
|
|
function funMouseMoveEdit(e) {
|
|
if (graffitiFlag.value) {
|
|
const rect =
|
|
comparisoNnum == 1
|
|
? mouseCanvasRef_1.value.getBoundingClientRect()
|
|
: mouseCanvasRef_2.value.getBoundingClientRect();
|
|
if (!isDragging.value) return;
|
|
endX = e.x - rect.x;
|
|
endY = e.y - rect.y;
|
|
if (endX < 0 && endY < 0) {
|
|
endX = startX;
|
|
endY = startY;
|
|
}
|
|
funSetMouseDataEdit();
|
|
}
|
|
}
|
|
// 编辑状态下的鼠标松开
|
|
function funMouseUpEdit(e) {
|
|
if (graffitiFlag.value) {
|
|
if (!isDragging.value) return;
|
|
const rect =
|
|
comparisoNnum == 1
|
|
? mouseCanvasRef_1.value.getBoundingClientRect()
|
|
: mouseCanvasRef_2.value.getBoundingClientRect();
|
|
endX = e.x - rect.x;
|
|
endY = e.y - rect.y;
|
|
if (endX < 0 && endY < 0) {
|
|
endX = startX;
|
|
endY = startY;
|
|
}
|
|
isDragging.value = false;
|
|
if (e.x > rect.right || e.y > rect.bottom) {
|
|
graffitis.value[nowGraffiti.value] = graffitisClone.value[nowGraffiti.value];
|
|
} else {
|
|
funSetMouseDataEdit();
|
|
}
|
|
window.removeEventListener('mousemove', funMouseMoveEdit);
|
|
window.removeEventListener('mouseup', funMouseUpEdit);
|
|
}
|
|
}
|
|
// 编辑状态下的数据
|
|
function funSetMouseDataEdit() {
|
|
if (['top', 'leftTop', 'rightTop'].includes(mouseEditType.value)) {
|
|
graffitis.value[nowGraffiti.value].height =
|
|
graffitis.value[nowGraffiti.value].height + graffitis.value[nowGraffiti.value].y - endY;
|
|
graffitis.value[nowGraffiti.value].y = endY;
|
|
}
|
|
if (['bottom', 'leftBottom', 'rightBottom'].includes(mouseEditType.value)) {
|
|
graffitis.value[nowGraffiti.value].height = endY - graffitis.value[nowGraffiti.value].y;
|
|
}
|
|
if (['left', 'leftTop', 'leftBottom'].includes(mouseEditType.value)) {
|
|
graffitis.value[nowGraffiti.value].width =
|
|
graffitis.value[nowGraffiti.value].width + graffitis.value[nowGraffiti.value].x - endX;
|
|
graffitis.value[nowGraffiti.value].x = endX;
|
|
}
|
|
if (['right', 'rightTop', 'rightBottom'].includes(mouseEditType.value)) {
|
|
graffitis.value[nowGraffiti.value].width = endX - graffitis.value[nowGraffiti.value].x;
|
|
}
|
|
}
|
|
|
|
// 添加键盘事件监听器
|
|
const addEventListener = () => {
|
|
window.addEventListener('keydown', handleKeydown);
|
|
};
|
|
// 移除键盘事件监听器
|
|
const removeEventListener = () => {
|
|
window.removeEventListener('keydown', handleKeydown);
|
|
};
|
|
// 处理按键按下事件
|
|
const handleKeydown = (event: KeyboardEvent) => {
|
|
if (event.code === 'Escape' && graffitiFlag.value) {
|
|
setGraffiti();
|
|
}
|
|
};
|
|
|
|
// 在组件挂载时添加监听器
|
|
onMounted(() => {
|
|
addEventListener();
|
|
});
|
|
// 在组件卸载时移除监听器
|
|
onBeforeUnmount(() => {
|
|
removeEventListener();
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.imageDiv_ {
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
height: 100%;
|
|
// gap: 4px;
|
|
}
|
|
|
|
.imageDiv_Comparison {
|
|
position: relative;
|
|
width: calc(50% - 5px);
|
|
height: 92%;
|
|
outline: 1px solid #ffffff55;
|
|
margin-left: 2px;
|
|
margin-right: 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.imageDiv_Comparison_title {
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 35px;
|
|
color: #ffffff;
|
|
font-size: 20px;
|
|
z-index: 200;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.imageDiv_Comparison_1 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 30px;
|
|
background: #2773c3;
|
|
width: 30px;
|
|
height: 25px;
|
|
border-radius: 10px 0px 0px 10px;
|
|
z-index: 200;
|
|
}
|
|
|
|
.imageDiv_Comparison_2 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 30px;
|
|
background: #cb8824;
|
|
width: 30px;
|
|
height: 25px;
|
|
border-radius: 0px 10px 10px 0px;
|
|
z-index: 200;
|
|
}
|
|
}
|
|
|
|
.imageDiv_BottomButton {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
background: #101010;
|
|
// background: red;
|
|
height: calc(8% - 5px);
|
|
width: 100%;
|
|
|
|
.bottomButtonList {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 40px;
|
|
|
|
.button {
|
|
position: relative;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
margin-left: 6px;
|
|
margin-right: 6px;
|
|
color: #ffffff;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.buttonInput {
|
|
position: relative;
|
|
color: #ffffff;
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.popoverClass {
|
|
width: 18px;
|
|
height: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
// 退出涂鸦
|
|
.escTip {
|
|
position: absolute;
|
|
left: 0%;
|
|
bottom: 120px;
|
|
width: 120px;
|
|
height: 40px;
|
|
background: #9c9c9c77;
|
|
border-radius: 5px;
|
|
z-index: 1001;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
|
|
.whiteEsc {
|
|
height: 30px;
|
|
background: #ffffff;
|
|
font-size: 16px;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
margin-left: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.blackTip {
|
|
display: flex;
|
|
margin-left: 5px;
|
|
align-items: center;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
</style>
|