<template>
	<div class="basic-info">
		<div>
			<span class="label">X:</span>
			<span class="value">{{ object.left }}</span>
		</div>
		<div>
			<span class="label">Y:</span>
			<span class="value">{{ object.top }}</span>
		</div>
		<div>
			<span class="label">Width:</span>
			<span class="value">{{ object.width }}</span>
		</div>
		<div>
			<span class="label">Height:</span>
			<span class="value">{{ object.height }}</span>
		</div>
		<div>
			<span class="label">缩放X:</span>
			<span class="value">{{ object.scaleX }}</span>
		</div>
		<div>
			<span class="label">缩放Y:</span>
			<span class="value">{{ object.scaleY }}</span>
		</div>
		<div>
			<span class="label">Angle:</span>
			<span class="value">{{ object.angle }}</span>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, inject, computed, watch, onMounted } from 'vue'
	const props = defineProps({
		object: {
			type: Object,
			default: () => ({})
		}
	})
	onMounted(() => {})
</script>

<style lang="less" scoped>
	.basic-info {
		> div {
			padding: 0.8rem 0;
			display: flex;
			align-items: center;
			> .label {
				font-size: 1.6rem;
				color: #000;
				font-weight: bold;
				min-width: 7rem;
				text-align: right;
				margin-right: 0.8rem;
			}
			> .value {
				font-size: 1.6rem;
				color: #333;
			}
		}
	}
</style>
