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

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

export const Component = createUIComp({
  props: {
    compId: string().isRequired,
  },
  setup(props) {
    const { children, value } = useCompData(props.compId);
    const createList = useCreateChild("list");

    watch(
      () => [value.columns],
      () => {
        const { columns } = value;
        const offset = columns - children.list.length;
        if (offset > 0) {
          children.list.push(...createList(offset));
        } else {
          children.list.splice(columns, offset * -1);
        }
      }
    );

    return () => {
      return (
        <div class="flex px-17.5px pt-15px">
          <div class="flex-1 mx-15px leading-loose relative z-10 w-0">
            <Text.Component compId={children.text} class="mt-10px" />
            <div class="flex flex-wrap mt-10px mr-40px ml-10px">
              {children.list.map((d: any, i: number) => (
                <Image.Component
                  key={i}
                  compId={d}
                  class="-ml-10px mb-10px w-36px h-36px object-cover rounded-1/2 overflow-hidden"
                />
              ))}
            </div>
          </div>
          <div class="w-125px relative pb-29px mr-1.5px">
            <Image.Component
              compId={children.img1}
              class="w-125px h-208.5px object-cover"
            />
            <div class="absolute bottom-0 right-50px">
              <Image.Component
                compId={children.img2}
                class="w-158.5px h-120px object-cover"
              />
            </div>
          </div>
        </div>
      );
    };
  },
});