File size: 840 Bytes
89ce340 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<template>
<div :class="`mouse-selection quadrant-${quadrant}`"
:style="{
top: top + 'px',
left: left + 'px',
width: width + 'px',
height: height + 'px',
}"
></div>
</template>
<script lang="ts" setup>
defineProps<{
top: number
left: number
width: number
height: number
quadrant: number
}>()
</script>
<style lang="scss" scoped>
.mouse-selection {
position: absolute;
background-color: rgba($themeColor, 0.1);
border: 1px solid $themeColor;
z-index: 200;
&.quadrant-1 {
transform-origin: 50% 0;
transform: rotate(180deg);
}
&.quadrant-2 {
transform-origin: 0 0;
transform: rotate(180deg);
}
&.quadrant-3 {
transform-origin: 0 50%;
transform: rotate(180deg);
}
&.quadrant-4 {
transform-origin: 0 0;
transform: rotate(0deg);
}
}
</style> |