queenshow/src/modules/editor/components/CompUI/customUI/Cards/Card2/index.tsx

import { createAttrsForm } from "../../../defines/createAttrsForm";
import { createCompHooks } from "../../../defines/createCompHooks";
import { createCompId } from "../../../defines/createCompId";
import { GroupNumber } from "../../../formItems/GroupNumber";

const thumbnail =
  "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685507733441_uVjZuw_thumbnail.png";

export { Component } from "./component";

export const options = {
  name: "卡片2",
  thumbnail,
};

export const { createComp, useCompData } = createCompHooks({
  value: {},
  layout: {
    size: [750, 550],
  },
  children: {
    bgImg: () =>
      createCompId("Image", {
        value: {
          url: "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685527709350_MHQZdg_bg.png",
          x: 0,
          y: 0,
          s: 1,
        },
        layout: {
          size: [750, 464],
          transformMatrix:"matrix(1,0,0,1,0,0)"
        },
      }),

    item1: () =>
      createCompId("Image", {
        value: { 
          url: thumbnail, 
          matrix: "matrix(4.05, 0, 0, 4.05, -44.1375, -205.257)",
          w: 95.5,
          h: 80.0033
         },
        layout: {
          size: [191, 191],
          transformMatrix:"matrix(1,0,0,1, 40, 170)",
          position:"absolute",
        }
      }),
    item2: () =>
      createCompId("Image", {
        value: { url: thumbnail, 
          matrix: "matrix(3.9, 0, 0, 3.9, -153.475, -159.756)",
          w: 95.5,
          h: 80.0033
        },
        layout: {
          size: [191, 191],
          transformMatrix:"matrix(1, 0, 0, 1, 153, 136)",
          position:"absolute",
        }
      }),
    item3: () =>
      createCompId("Image", {
        value: { url: thumbnail,
          matrix: " matrix(4, 0, 0, 4, -273.25, -123.757)",
          w: 95.5,
          h: 80.0033
        },
        layout: {
          size: [191, 191],
          transformMatrix: "matrix(1, 0, 0, 1, 269, 100)",
          position:"absolute",
        }
      }),
    text1: () =>
      createCompId("Text", {
        value: `<p style="line-height:1.5;"><span style="font-size:42px;"><strong>&nbsp; </strong></span><span style="color:hsl(0, 0%, 100%);font-size:42px;"><strong>P190</strong></span></p><p style="line-height:1.5;"><span style="color:hsl(0, 0%, 100%);font-size:20px;">&nbsp; &nbsp; &nbsp;可注塑</span></p>`,
        layout: {
          size: [750, 200],
          transformMatrix:"matrix(1,0,0,1,0, 50)",
          position:"absolute",
        },
      }),
    text2: () =>
      createCompId("Text", {
        value: `<p style="text-align:right;line-height:1.5;"><span style="color:hsl(0, 0%, 0%);font-size:14px;">全新 &nbsp;| &nbsp;时尚 &nbsp;| &nbsp;简约 &nbsp;</span></p>`,
        layout: {
          size: [750, 40],
          transformMatrix:"matrix(1,0,0,1, 0, 248)",
          position:"absolute",
        },
      }),
  },
});

export const Form = createAttrsForm([
  {
    label: "图片尺寸",
    dataIndex: "value.imgSize",
    component: GroupNumber,
    props: {
      labels: ["宽", "高"],
    },
  },
]);