添加card5

src/modules/editor/components/CompUI/customUI/Cards/Card4/component.tsx

@@ -0,0 +1,44 @@
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { Image, Text } from "../../..";
+import { useEditor } from "../../../../..";
+import { createUIComp } from "../../../defines/createUIComp";
+import { css } from "@linaria/core";
+import * as Title3 from "../../Titles/Title3";
+
+export const Component = createUIComp({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { designToNaturalSize } = useEditor().helper;
+    const { value, children } = useCompData(props.compId);
+
+    return () => (
+    <div>
+      <Title3.Component   compId={children.title.id} />
+      <div class="flex justify-between">
+        <div class="">
+            <Image.Component class="overflow-hidden"
+                        style={{
+                            width: designToNaturalSize(250),
+                            height: designToNaturalSize(278),
+                        }}
+                        compId={children.bgImg.id}
+                    />
+        </div>
+        <div class="flex flex-col items-center justify-start">
+           <Text.Component compId={children.text1.id} />
+           <Text.Component class="mt-0.07rem" compId={children.text2.id} />
+           <Text.Component compId={children.text1.id} />
+           <Text.Component class="mt-0.07rem" compId={children.text2.id} />
+        </div>
+        </div>
+        </div>
+    );
+  },
+});
+const upStyle = css`
+  position:relative;
+  
+`

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

@@ -0,0 +1,55 @@
+import { createAttrsForm } from "../../../defines/createAttrsForm";
+import { createOptions } from "../../../defines/createOptions";
+import { GroupNumber } from "../../../formItems/GroupNumber";
+
+export { Component } from "./component";
+
+const thumbnail = "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685592084017_Wu5DW5_thumbnail.png"
+export const { options, useCompData } = createOptions({
+  name: "卡片4",
+  thumbnail:thumbnail,
+  value: {
+  },
+  layout: {
+    padding: "0.2rem",
+  },
+  children: {
+    bgImg: {
+      compKey: "Image",
+      value: { url: thumbnail, x: 27.50, y:-6.50, s: 3.50 },
+    },
+    title: {
+        compKey: "Title3",
+        layout: {
+            margin: "0 0 0.4rem 0"
+        },
+        children: {
+            title: {
+              value: `<p style="text-align:center;"><span style="color:#333;font-size:20px;font-weight: bold;">产品详情</span></p>`,
+            },
+            subtitle: {
+                value: `<p style="text-align:center;">/ Product Details /</p>`,
+            },
+        },
+    },
+    text1: {
+        compKey: "Text",
+        value:  `<p><span style="color:hsl(0, 0%, 0%);font-size:14px;"><strong>P190注塑</strong></span></p>`,
+    },
+    text2: {
+        compKey: "Text",
+        value: `复古羊巴 / 2023年新品`,
+    },
+  },
+});
+
+export const Form = createAttrsForm([
+  {
+    label: "图片尺寸",
+    dataIndex: "value.imgSize",
+    component: GroupNumber,
+    props: {
+      labels: ["宽", "高"],
+    },
+  },
+]);

src/modules/editor/components/CompUI/customUI/Titles/Title3/component.tsx

@@ -24,27 +24,4 @@ export const Component = createUIComp({
       </div>
     );
   },
-});
-
-const border = css`
-  position: relative;
-  color: #999;
-  &::after {
-    content: "";
-    position: absolute;
-    bottom: 50%;
-    width: 100%;
-    height: 1px;
-    background-color: currentColor;
-  }
-  &.left {
-    &::after {
-      left: 0.06rem;
-    }
-  }
-  &.right {
-    &::after {
-      left: -0.06rem;
-    }
-  }
-`;
+});

src/modules/editor/components/CompUI/index.ts

@@ -11,3 +11,4 @@ export * as Title3 from "./customUI/Titles/Title3";
 
 export * as Card2 from "./customUI/Cards/Card2";
 export * as Card3 from "./customUI/Cards/Card3";
+export * as Card4 from "./customUI/Cards/Card4";