<script setup>
const props=defineProps({
    itemData:{
        type:Object,
        default:{}
    }
})
</script>


<template>
    <div 
        class="text-shape-box"
        :style="{
            top: itemData.percentageTop*100 + '%',
            left: itemData.percentageLeft*100 + '%',
            width: itemData.percentageWidth*100 + '%',
            height: itemData.percentageHeight*100 + '%',
        }"
    >
        <div class="text-content">
            <div style="width:100%;height:100%">
                <div class="rich-text-box" v-html="itemData.richContent"></div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.text-shape-box{
    position: absolute;
    pointer-events: none;
    .text-content{
        width: 100%;
        height: 100%;
        padding: 10PX;
        .rich-text-box{
            padding: 10PX;
            font-size: 16PX;
        }
    }
    
}
</style>

