<script setup>
import ContentBlock from "../ContentBlock.vue";
import DivCssScoped from "./DivCssScoped.vue";
import DivCssVar from "./DivCssVar.vue";
import DivRadius from "./DivRadius.vue";
import DivTransform from "./DivTransform.vue";

const props = defineProps({
  contentClass: String,
  itemSides: Object,
});
const contentBlockProps = {
  colIndex: 0,
  itemSides: props.itemSides,
};
</script>

<template>
  <div id="item-root">
    <ContentBlock
      :class="contentClass"
      :style="{ top: itemSides.height * 0 }"
      :="contentBlockProps"
      :index="1"
      title="Radius(实现圆角)"
    >
      <DivRadius />
    </ContentBlock>
    <ContentBlock
      :class="contentClass"
      :style="{ top: itemSides.height * 1 }"
      :="contentBlockProps"
      :index="1"
      title="Transform"
    >
      <DivTransform />
    </ContentBlock>
    <ContentBlock
      :class="contentClass"
      :style="{ top: itemSides.height * 2 }"
      :="contentBlockProps"
      :index="2"
      title="CSS Var"
    >
      <DivCssVar />
    </ContentBlock>
    <ContentBlock
      :class="contentClass"
      :style="{ top: itemSides.height * 3 }"
      :="contentBlockProps"
      :index="3"
      title="CSS Scoped"
    >
      <DivCssScoped jsvclass="block" />
    </ContentBlock>
  </div>
</template>

<style scoped>
.block {
  width: 80;
  height: 65;
  color: #00ff00;
}
</style>