|
@@ -2,6 +2,7 @@ import { CompToolbars } from "@/modules/editor/objects/Toolbars";
|
|
import { css } from "@linaria/core";
|
|
import { css } from "@linaria/core";
|
|
import { defineComponent, onMounted, onUnmounted } from "vue";
|
|
import { defineComponent, onMounted, onUnmounted } from "vue";
|
|
import { useEditor } from "../../../..";
|
|
import { useEditor } from "../../../..";
|
|
|
|
+import { IconMove, IconRotate } from "@/assets/icons";
|
|
|
|
|
|
export const Transfer = defineComponent({
|
|
export const Transfer = defineComponent({
|
|
setup() {
|
|
setup() {
|
|
@@ -78,13 +79,13 @@ export const Transfer = defineComponent({
|
|
class={transBtnStyle}
|
|
class={transBtnStyle}
|
|
onMousedown={(e) => transferCtrl.mousedown(e, "move")}
|
|
onMousedown={(e) => transferCtrl.mousedown(e, "move")}
|
|
>
|
|
>
|
|
- 偏移
|
|
|
|
|
|
+ <IconMove />
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
class={transBtnStyle}
|
|
class={transBtnStyle}
|
|
onMousedown={(e) => transferCtrl.mousedown(e, "rotate")}
|
|
onMousedown={(e) => transferCtrl.mousedown(e, "rotate")}
|
|
>
|
|
>
|
|
- 旋转
|
|
|
|
|
|
+ <IconRotate />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
<div
|
|
@@ -139,27 +140,29 @@ const resizeStyle = css`
|
|
`;
|
|
`;
|
|
|
|
|
|
const transformBtnsStyle = css`
|
|
const transformBtnsStyle = css`
|
|
- @apply space-x-5px whitespace-nowrap;
|
|
|
|
|
|
+ @apply space-x-10px whitespace-nowrap;
|
|
position: absolute;
|
|
position: absolute;
|
|
bottom: 0;
|
|
bottom: 0;
|
|
left: 50%;
|
|
left: 50%;
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
z-index: 999;
|
|
z-index: 999;
|
|
- transform: translate(-50%, 40px);
|
|
|
|
|
|
+ transform: translate(-50%, 50px);
|
|
`;
|
|
`;
|
|
|
|
|
|
const transBtnStyle = css`
|
|
const transBtnStyle = css`
|
|
display: inline-block;
|
|
display: inline-block;
|
|
- width: 30px;
|
|
|
|
- height: 30px;
|
|
|
|
|
|
+ width: 36px;
|
|
|
|
+ height: 36px;
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
text-align: center;
|
|
text-align: center;
|
|
- line-height: 30px;
|
|
|
|
- font-size: 16px;
|
|
|
|
|
|
+ line-height: 36px;
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ color: #333;
|
|
@apply shadow cursor-move;
|
|
@apply shadow cursor-move;
|
|
|
|
|
|
&:hover {
|
|
&:hover {
|
|
|
|
+ color: #fff;
|
|
background-color: @inf-primary-color;
|
|
background-color: @inf-primary-color;
|
|
}
|
|
}
|
|
`;
|
|
`;
|