cards

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

@@ -1,7 +1,7 @@
 import { css } from "@linaria/core";
 import { string } from "vue-types";
 import { useCompData } from ".";
-import { Text } from "../../../basicUI";
+import { Image, Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
 
 export const Component = createUIComp({
@@ -14,6 +14,14 @@ export const Component = createUIComp({
     return () => (
       <div class={rootStyles}>
         <Text.Component compId={children.text?.id} />
+        <Image.Component
+          compId={children.img1.id}
+          class="w-1.67rem h-3.06rem object-cover"
+        />
+        <Image.Component
+          compId={children.img2.id}
+          class="w-1.67rem h-3.06rem object-cover"
+        />
       </div>
     );
   },

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

@@ -5,7 +5,7 @@ export { Component } from "./component";
 
 export const { options, useCompData } = createOptions({
   name: "卡片",
-  thumbnail: require("./thumbnail.jpg"),
+  thumbnail: require("@/assets/comps/Card11/thumbnail.jpg"),
   value: {},
   layout: {
     padding: "0.5rem 0",
@@ -21,6 +21,18 @@ export const { options, useCompData } = createOptions({
         textAlign: "center",
       },
     },
+    img1: {
+      compKey: "Image",
+      value: {
+        url: require("@/assets/comps/Card11/img_1.jpg"),
+      },
+    },
+    img2: {
+      compKey: "Image",
+      value: {
+        url: require("@/assets/comps/Card11/img_shoe.jpg"),
+      },
+    },
   },
 });
 

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

@@ -1,7 +1,7 @@
 import { css } from "@linaria/core";
 import { string } from "vue-types";
 import { useCompData } from ".";
-import { Text } from "../../../basicUI";
+import { Image, Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
 
 export const Component = createUIComp({
@@ -14,6 +14,10 @@ export const Component = createUIComp({
     return () => (
       <div class={rootStyles}>
         <Text.Component compId={children.text?.id} />
+        <Image.Component
+          compId={children.img1.id}
+          class="w-1.67rem h-3.06rem object-cover"
+        />
       </div>
     );
   },

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

@@ -5,22 +5,24 @@ export { Component } from "./component";
 
 export const { options, useCompData } = createOptions({
   name: "卡片",
-  thumbnail: require("./thumbnail.jpg"),
+  thumbnail: require("@/assets/comps/Card12/thumbnail.jpg"),
   value: {},
   layout: {
     padding: "0.5rem 0",
   },
   children: {
     text: {
-      value: `<p style="text-align:center;"><span style="color:#666;font-size:12px;font-weight: bold;">皮中贵族，触及之处皆舒适，
-      柔韧度高的细腻肌理皮革，触感柔润亲肤，透气
-      质量经久耐磨，性价比高，
-      经典之作用不过时。
-      潮流耐磨的2023年最新款皮革材料</span></p>`,
+      value: `<p style="text-align:center;">P190-2#</p>`,
       layout: {
         textAlign: "center",
       },
     },
+    img1: {
+      compKey: "Image",
+      value: {
+        url: require("@/assets/comps/Card12/img_1.jpg"),
+      },
+    },
   },
 });
 

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

@@ -1,7 +1,7 @@
 import { css } from "@linaria/core";
 import { string } from "vue-types";
 import { useCompData } from ".";
-import { Text } from "../../../basicUI";
+import { Image, Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
 
 export const Component = createUIComp({
@@ -14,6 +14,14 @@ export const Component = createUIComp({
     return () => (
       <div class={rootStyles}>
         <Text.Component compId={children.text?.id} />
+        <Image.Component
+          compId={children.img1.id}
+          class="w-1.67rem h-3.06rem object-cover"
+        />
+        <Image.Component
+          compId={children.imgShoe.id}
+          class="w-1.67rem h-3.06rem object-cover"
+        />
       </div>
     );
   },

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

@@ -5,22 +5,34 @@ export { Component } from "./component";
 
 export const { options, useCompData } = createOptions({
   name: "卡片",
-  thumbnail: require("./thumbnail.jpg"),
+  thumbnail: require("@/assets/comps/Card13/thumbnail.jpg"),
   value: {},
   layout: {
     padding: "0.5rem 0",
   },
   children: {
     text: {
-      value: `<p style="text-align:center;"><span style="color:#666;font-size:12px;font-weight: bold;">皮中贵族，触及之处皆舒适，
-      柔韧度高的细腻肌理皮革，触感柔润亲肤，透气
-      质量经久耐磨，性价比高，
-      经典之作用不过时。
-      潮流耐磨的2023年最新款皮革材料</span></p>`,
+      value: `<p style="text-align:center;"><span style="color:#666;font-size:12px;font-weight: bold;">两面开边珠，无漆皮光亮
+      却比漆皮更耐用，不容易爆皮
+      逛着干看起来更加高档
+      丰富多彩的流行色水，增加无限魅力
+      既有复古的韵味更有时下的潮流元素</span></p>`,
       layout: {
         textAlign: "center",
       },
     },
+    img1: {
+      compKey: "Image",
+      value: {
+        url: require("@/assets/comps/Card13/img_1.jpg"),
+      },
+    },
+    imgShoe: {
+      compKey: "Image",
+      value: {
+        url: require("@/assets/comps/Card13/img_shoe.jpg"),
+      },
+    },
   },
 });
 

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

@@ -1,7 +1,7 @@
 import { css } from "@linaria/core";
 import { string } from "vue-types";
 import { useCompData } from ".";
-import { Text } from "../../../basicUI";
+import { Image, Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
 
 export const Component = createUIComp({
@@ -14,6 +14,14 @@ export const Component = createUIComp({
     return () => (
       <div class={rootStyles}>
         <Text.Component compId={children.text?.id} />
+        <Image.Component
+          compId={children.img1.id}
+          class="w-1.67rem h-3.06rem object-cover"
+        />
+        <Image.Component
+          compId={children.imgShoe.id}
+          class="w-1.67rem h-3.06rem object-cover"
+        />
       </div>
     );
   },

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

@@ -5,22 +5,34 @@ export { Component } from "./component";
 
 export const { options, useCompData } = createOptions({
   name: "卡片",
-  thumbnail: require("./thumbnail.jpg"),
+  thumbnail: require("@/assets/comps/Card14/thumbnail.jpg"),
   value: {},
   layout: {
     padding: "0.5rem 0",
   },
   children: {
     text: {
-      value: `<p style="text-align:center;"><span style="color:#666;font-size:12px;font-weight: bold;">皮中贵族，触及之处皆舒适，
-      柔韧度高的细腻肌理皮革，触感柔润亲肤，透气
-      质量经久耐磨，性价比高，
-      经典之作用不过时。
-      潮流耐磨的2023年最新款皮革材料</span></p>`,
+      value: `<p style="text-align:center;"><span style="color:#666;font-size:12px;font-weight: bold;">蓝色是个舒服的颜色，
+      处处充满着生机和希望，
+      其明净空旷往往让人迷失其中，
+      给人无限的对未来的憧憬，
+      不需要过多的言语，让心灵感到平和</span></p>`,
       layout: {
         textAlign: "center",
       },
     },
+    img1: {
+      compKey: "Image",
+      value: {
+        url: require("@/assets/comps/Card14/img_1.jpg"),
+      },
+    },
+    imgShoe: {
+      compKey: "Image",
+      value: {
+        url: require("@/assets/comps/Card14/img_shoe.jpg"),
+      },
+    },
   },
 });
 

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

@@ -1,7 +1,7 @@
-import { css } from "@linaria/core";
+import { css, cx } from "@linaria/core";
 import { string } from "vue-types";
 import { useCompData } from ".";
-import { Text } from "../../../basicUI";
+import { Image, Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
 
 export const Component = createUIComp({
@@ -9,14 +9,42 @@ export const Component = createUIComp({
     compId: string().isRequired,
   },
   setup(props) {
-    const { children } = useCompData(props.compId);
+    const { children, value } = useCompData(props.compId);
 
     return () => (
-      <div class={rootStyles}>
-        <Text.Component compId={children.text?.id} />
+      <div
+        class={cx(rootStyles, " pl-0.28rem")}
+        style={{
+          backgroundImage: `linear-gradient(#fff 1.3rem,${value.themeColor} 1.3rem, ${value.themeColor} 80%, #fff 80%)`,
+        }}
+      >
+        <div class="h-1.3rem">
+          <Text.Component compId={children.title?.id} />
+        </div>
+        <Image.Component
+          compId={children.img1.id}
+          class="w-6.22rem h-6.22rem object-cover -ml-0.28rem"
+        />
+        <div class="absolute right-1rem top-3rem">
+          <Text.Component compId={children.colorText?.id} />
+        </div>
+        <div class="flex flex-row-reverse">
+          <div class="w-4.75rem px-0.35rem py-0.55rem bg-light-50 border-r-cool-gray-900">
+            <Text.Component
+              compId={children.text?.id}
+              // class=""
+            />
+          </div>
+        </div>
+        <Image.Component
+          compId={children.img2.id}
+          class="!absolute bottom-0 left-0 w-4rem h-2.85rem object-cover  -ml-0.28rem"
+        />
       </div>
     );
   },
 });
 
-const rootStyles = css``;
+const rootStyles = css`
+  background-clip: content-box;
+`;

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

@@ -1,27 +1,52 @@
 import { createAttrsForm } from "../../../defines/createAttrsForm";
 import { createOptions } from "../../../defines/createOptions";
+import { createColorOpts } from "../../../defines/formOpts/createColorOpts";
 
 export { Component } from "./component";
 
 export const { options, useCompData } = createOptions({
   name: "卡片",
-  thumbnail: require("./thumbnail.jpg"),
-  value: {},
+  thumbnail: require("@/assets/comps/Card15/thumbnail.jpg"),
+  value: {
+    themeColor: "#6D8D70",
+  },
   layout: {
-    padding: "0.5rem 0",
+    // padding: "0.5rem 0",
+    margin: "0.2rem 0.35rem",
   },
   children: {
+    title: {
+      value:
+        '<p><span style="color:hsl(0, 0%, 0%);font-size:24px;"><strong>P190-3#</strong></span></p>',
+    },
+    colorText: {
+      value: "3#      铜绿色",
+    },
     text: {
-      value: `<p style="text-align:center;"><span style="color:#666;font-size:12px;font-weight: bold;">皮中贵族，触及之处皆舒适，
-      柔韧度高的细腻肌理皮革，触感柔润亲肤，透气
-      质量经久耐磨，性价比高，
-      经典之作用不过时。
-      潮流耐磨的2023年最新款皮革材料</span></p>`,
+      value: `<p><span style="color:hsl(0, 0%, 0%);font-size:12px;">绿色是个舒服的颜色， 处处充满着生机和希望， 其明净空旷往往让人迷失其中， 给人无限的对未来的憧憬， 不需要过多的言语，让心灵感到平和</span></p>`,
       layout: {
         textAlign: "center",
       },
     },
+    img2: {
+      compKey: "Image",
+      value: {
+        url: "https://sku3d-test.obs.cn-east-3.myhuaweicloud.com/queenshow/1685609522134_nGPo9k_2.png",
+      },
+    },
+    img1: {
+      compKey: "Image",
+      value: {
+        url: require("@/assets/comps/Card15/img_1.jpg"),
+      },
+    },
   },
 });
 
-export const Form = createAttrsForm([]);
+export const Form = createAttrsForm([
+  {
+    label: "主题色",
+    dataIndex: "value.themeColor",
+    ...createColorOpts(),
+  },
+]);