queenshow/src/modules/editor/components/CompUI/customUI/Cards/Card4/index.ts

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/1685592084017_Wu5DW5_thumbnail.png";

export { Component } from "./component";

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

export const { createComp, useCompData } = createCompHooks({
  value: {},
  layout: {
    padding: "10px",
    size: [750, 300],
  },
  children: {
    bgImg: () =>
      createCompId("Image", {
        value: { url: thumbnail, x: 27.5, y: -6.5, s: 3.5 },
      }),
    title: () =>
      createCompId("Title3", {
        layout: {
          margin: "0 0 20px 0",
        },
        children: {
          title: createCompId("Text", {
            value: `<p style="text-align:center;"><span style="color:#333;font-size:20px;font-weight: bold;">产品详情</span></p>`,
          }),
          subtitle: createCompId("Text", {
            value: `<p style="text-align:center;">/ Product Details /</p>`,
          }),
        },
      }),
    text1: () =>
      createCompId("Text", {
        value: `<p><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>名称: &nbsp; P190（注塑）</strong></span></p><p><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>规格: &nbsp; 52英寸</strong></span><br><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>厚度: &nbsp; 1.0mm+0.05mm</strong></span></p><p><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>底材: &nbsp; 鹿皮绒</strong></span></p><p><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>用途: &nbsp; 凉鞋、跟鞋、高更鞋、</strong></span><br><span style="color:hsl(0, 0%, 60%);font-size:14px;"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;时尚休闲鞋等</strong></span></p>`,
      }),
  },
});

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