You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
2.0 KiB
Vue
69 lines
2.0 KiB
Vue
<template>
|
|
<div class="window-areas-layer">
|
|
<section
|
|
v-for="slice in slices"
|
|
:key="`${slice.area.id}-${slice.segmentIndex}-${slice.renderLeft}`"
|
|
class="window-area"
|
|
:style="{
|
|
left: `${slice.renderLeft}px`,
|
|
top: `${slice.renderTop}px`,
|
|
width: `${slice.renderWidth}px`,
|
|
height: `${slice.renderHeight}px`,
|
|
}"
|
|
>
|
|
<div
|
|
class="window-area-inner"
|
|
:style="{
|
|
width: `${slice.area.width}px`,
|
|
height: `${slice.area.height}px`,
|
|
transform: `translateX(${-slice.clipOffset}px)`,
|
|
}"
|
|
>
|
|
<div class="window-no-region">
|
|
<span
|
|
class="window-no-text"
|
|
:class="{ circle: slice.area.windowNumberCircle }"
|
|
:style="{
|
|
fontSize: `${slice.area.windowNumberStyle.fontSize}px`,
|
|
color: slice.area.windowNumberStyle.color,
|
|
fontWeight: slice.area.windowNumberStyle.fontWeight,
|
|
}"
|
|
>
|
|
{{ slice.area.windowNumber }}
|
|
</span>
|
|
</div>
|
|
<div class="window-text-region">
|
|
<div
|
|
class="window-text-line"
|
|
:style="{
|
|
fontSize: `${slice.area.staticTextStyle.fontSize}px`,
|
|
color: slice.area.staticTextStyle.color,
|
|
fontWeight: slice.area.staticTextStyle.fontWeight,
|
|
}"
|
|
>
|
|
{{ slice.area.staticText }}
|
|
</div>
|
|
<div
|
|
class="window-text-line"
|
|
:style="{
|
|
fontSize: `${slice.area.dynamicTextStyle.fontSize}px`,
|
|
color: slice.area.dynamicTextStyle.color,
|
|
fontWeight: slice.area.dynamicTextStyle.fontWeight,
|
|
}"
|
|
>
|
|
{{ slice.area.dynamicText }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { WindowAreaSlice } from "../services/windowAreaSliceService";
|
|
|
|
defineProps<{
|
|
slices: WindowAreaSlice[];
|
|
}>();
|
|
</script>
|