<script setup>
import TitleBar from "./TitleBar.vue";
import DivGroup1 from "../div/DivGroup1.vue";
import DivGroup2 from "../div/DivGroup2.vue";
import TextGroup1 from "../text/TextGroup1.vue";
import TextGroup2 from "../text/TextGroup2.vue";
import AnimGroup from "../anim/AnimGroup.vue";

const props = defineProps({
  panelClass: String,
  itemSides: Object,
});

const titleData = ["div标签1", "div标签2", "div文本1", "div文本2", "div动画"];
</script>

<template>
  <div :class="panelClass">
    <TitleBar
      :class="panelClass"
      :itemSides="itemSides"
      :titleData="titleData"
    />
    <div :class="panelClass" :style="{ top: 20 }">
      <DivGroup1
        :style="{ left: itemSides.width * 0 }"
        :contentClass="panelClass"
        :itemSides="itemSides"
      />
      <DivGroup2
        :style="{ left: itemSides.width * 1 }"
        :contentClass="panelClass"
        :itemSides="itemSides"
      />
      <TextGroup1
        :style="{ left: itemSides.width * 2 }"
        :contentClass="panelClass"
        :itemSides="itemSides"
      />
      <TextGroup2
        :style="{ left: itemSides.width * 3 }"
        :contentClass="panelClass"
        :itemSides="itemSides"
      />
      <AnimGroup
        :style="{ left: itemSides.width * 4 }"
        :contentClass="panelClass"
        :itemSides="itemSides"
      />
    </div>
  </div>
</template>

<style>
</style>