54 lines
1.4 KiB
Vue
54 lines
1.4 KiB
Vue
<template>
|
|
<div :class="['face-identity-rect', getRootClassName(), identity].join(' ')"
|
|
:style="{ width: width + 'px', height: height + 'px' }">
|
|
<angle :identity="identity" :direction="EDirection.LeftTop"></angle>
|
|
<angle :identity="identity" :direction="EDirection.LeftBottom"></angle>
|
|
<angle :identity="identity" :direction="EDirection.RightTop"></angle>
|
|
<angle :identity="identity" :direction="EDirection.RightBottom"></angle>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { EDirection, EIdentity } from "./Angle.vue";
|
|
import { computed } from "vue";
|
|
|
|
const props: any = withDefaults(defineProps<{
|
|
identity: EIdentity, type: number,
|
|
width: number, height: number,
|
|
top: number,
|
|
left: number
|
|
}>(), {
|
|
identity: EIdentity.Resident,
|
|
type: 1
|
|
})
|
|
|
|
const topVar = computed(() => props.top + 'px')
|
|
const leftVar = computed(() => props.left + 'px')
|
|
|
|
|
|
const getRootClassName = () => {
|
|
// if (props.type == 1)
|
|
// return "face-rect";
|
|
// else
|
|
return "body-rect";
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.face-identity-rect {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
top: v-bind(topVar);
|
|
left: v-bind(leftVar);
|
|
|
|
&.body-rect {
|
|
//.face-rect {
|
|
// background-color: rgba(255, 140, 0, .19);
|
|
border: solid 2px #ff8c00;
|
|
// }
|
|
|
|
.angle {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
</style> |