queenshow/src/modules/editor/components/CompUI/customUI/Cards/Card3/component.tsx

import { string } from "vue-types";
import { useCompData } from ".";
import { useEditor } from "../../../../..";
import { Image, Text } from "../../../basicUI";
import { createUIComp } from "../../../defines/createUIComp";

export const Component = createUIComp({
  props: {
    compId: string().isRequired,
  },
  setup(props) {
    const { designToNaturalSize } = useEditor().helper;
    const { children } = useCompData(props.compId);

    return () => (
      <div class="relative flex justify-between">
        <div class="flex flex-col justify-center">
          <Text.Component compId={children.text1} />
          <Text.Component class="mt-0.07rem" compId={children.text2} />

          <div class="flex justify-between mt-0.07rem">
            <Image.Component
              class="rounded-1/2 overflow-hidden"
              style={{
                width: designToNaturalSize(51),
                height: designToNaturalSize(51),
              }}
              compId={children.item1}
            />

            <Image.Component
              class="rounded-1/2 overflow-hidden"
              style={{
                width: designToNaturalSize(51),
                height: designToNaturalSize(51),
              }}
              compId={children.item2}
            />

            <Image.Component
              class="rounded-1/2 overflow-hidden"
              style={{
                width: designToNaturalSize(51),
                height: designToNaturalSize(51),
              }}
              compId={children.item3}
            />
          </div>
        </div>
        <Image.Component
          class="overflow-hidden"
          style={{
            width: designToNaturalSize(317),
            height: designToNaturalSize(240),
          }}
          compId={children.bgImg}
        />
      </div>
    );
  },
});