UI

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

@@ -1,5 +1,6 @@
+import { watch } from "vue";
 import { string } from "vue-types";
-import { useCompData } from ".";
+import { useCompData, useCreateChild } from ".";
 import { Image, Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
 
@@ -8,26 +9,51 @@ export const Component = createUIComp({
     compId: string().isRequired,
   },
   setup(props) {
-    const { children } = useCompData(props.compId);
+    const { children, value } = useCompData(props.compId);
+    const createList = useCreateChild("list");
 
-    return () => (
-      <div class="flex">
-        <div class="flex-1">
-          <Text.Component compId={children.text} />
-        </div>
-        <div class="w-2.5rem relative">
-          <Image.Component
-            compId={children.img1}
-            class="w-1.67rem h-3.06rem object-cover"
-          />
-          <div class="absolute bottom-0 right-1rem">
+    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">
+          <div class="flex-1 mx-0.3rem leading-2 relative z-10 w-0">
+            <Text.Component compId={children.text} class="mt-0.2rem" />
+            <div class="flex mt-0.2rem flex-wrap mr-0.8rem ml-0.2rem">
+              {children.list.map((d: any, i: number) => (
+                <Image.Component
+                  key={i}
+                  compId={d}
+                  class="-ml-0.2rem mb-0.2rem w-0.72rem h-0.72rem object-cover rounded-1/2 overflow-hidden"
+                />
+              ))}
+            </div>
+          </div>
+          <div class="w-2.5rem relative pb-0.58rem mr-0.03rem">
             <Image.Component
-              compId={children.img2}
-              class="w-3.17rem h-2.4rem object-cover"
+              compId={children.img1}
+              class="w-2.5rem h-4.17rem object-cover"
             />
+            <div class="absolute bottom-0 right-1rem">
+              <Image.Component
+                compId={children.img2}
+                class="w-3.17rem h-2.4rem object-cover"
+              />
+            </div>
           </div>
         </div>
-      </div>
-    );
+      );
+    };
   },
 });

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

@@ -1,3 +1,4 @@
+import { InputNumber } from "ant-design-vue";
 import { createAttrsForm } from "../../../defines/createAttrsForm";
 import { createCompHooks } from "../../../defines/createCompHooks";
 import { createCompId } from "../../../defines/createCompId";
@@ -9,15 +10,18 @@ export const options = {
   thumbnail: require("@/assets/comps/Card11/thumbnail.jpg"),
 };
 
-export const { createComp, useCompData } = createCompHooks({
-  value: {},
+export const { createComp, useCompData, useCreateChild } = createCompHooks({
   layout: {
-    padding: "0.5rem 0",
+    padding: "0.2rem 0",
+    margin: "0.3rem 0.35rem",
+  },
+  value: {
+    columns: 3,
   },
   children: {
     text: () =>
       createCompId("Text", {
-        value: `<p><span style="color:#666;font-size:12px;"><strong>皮中贵族，触及之处皆舒适，柔韧度高的细腻肌理皮革，触感柔润亲肤，透气</strong></span></p><p><span style="color:#666;font-size:12px;"><strong>质量经久耐磨，性价比高， 经典之作用不过时。 潮流耐磨的2023年最新款皮革材料</strong></span></p>`,
+        value: `<p><span style="color:hsl(0, 0%, 30%);font-size:12px;">皮中贵族，触及之处皆舒适，柔韧度高的细腻肌理皮革，触感柔润亲肤，透气</span></p><p><span style="color:hsl(0, 0%, 30%);font-size:12px;">质量经久耐磨，性价比高， 经典之作用不过时。 </span></p>`,
         layout: {
           textAlign: "center",
         },
@@ -34,7 +38,24 @@ export const { createComp, useCompData } = createCompHooks({
           url: require("@/assets/comps/Card11/img_shoe.png"),
         },
       }),
+    list: (defaultOpts: any, length = 3) => {
+      let i = 0;
+      return Array.from({ length }, () => {
+        i = i + 1;
+        return createCompId("Image", {
+          value: {
+            url: require(`@/assets/comps/Card11/cover_${i}.png`),
+          },
+        });
+      });
+    },
   },
 });
 
-export const Form = createAttrsForm([]);
+export const Form = createAttrsForm([
+  {
+    label: "列表行数",
+    dataIndex: "value.columns",
+    component: InputNumber,
+  },
+]);

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

@@ -8,10 +8,10 @@ export const Component = createUIComp({
     compId: string().isRequired,
   },
   setup(props) {
-    const { children } = useCompData(props.compId);
+    const { children, value } = useCompData(props.compId);
 
     return () => (
-      <div>
+      <div class="relative">
         <Text.Component compId={children.text} />
         <div class="w-6.22rem mx-auto mt-0.4rem">
           <Image.Component
@@ -19,8 +19,13 @@ export const Component = createUIComp({
             class="w-6.22rem h-6.22rem object-cover"
           />
         </div>
-        <div>
-          <Text.Component compId={children.text2} />
+        <div
+          class="absolute left-0.9rem bottom-1.35rem min-w-1.5rem p-0.08rem pt-1rem border-light-50 border-0.08rem border-top-0.06rem border-solid"
+          style={{
+            backgroundColor: value.themeColor,
+          }}
+        >
+          <Text.Component compId={children.text2} class="bg-light-50" />
         </div>
       </div>
     );

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

@@ -1,6 +1,7 @@
 import { createAttrsForm } from "../../../defines/createAttrsForm";
 import { createCompHooks } from "../../../defines/createCompHooks";
 import { createCompId } from "../../../defines/createCompId";
+import { createColorOpts } from "../../../defines/formOpts/createColorOpts";
 
 export { Component } from "./component";
 
@@ -10,9 +11,11 @@ export const options = {
 };
 
 export const { createComp, useCompData } = createCompHooks({
-  value: {},
+  value: {
+    themeColor: "#5BA9CB",
+  },
   layout: {
-    padding: "0.5rem 0",
+    margin: "0.2rem 0.35rem",
   },
   children: {
     text: () =>
@@ -24,7 +27,7 @@ export const { createComp, useCompData } = createCompHooks({
       }),
     text2: () =>
       createCompId("Text", {
-        value: `<p style="text-align:center;">P190-2#</p>`,
+        value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);">2#</span><br><span style="color:hsl(0, 0%, 0%);">克莱因蓝</span></p>`,
         layout: {
           textAlign: "center",
         },
@@ -38,4 +41,10 @@ export const { createComp, useCompData } = createCompHooks({
   },
 });
 
-export const Form = createAttrsForm([]);
+export const Form = createAttrsForm([
+  {
+    label: "主题色",
+    dataIndex: "value.themeColor",
+    ...createColorOpts(),
+  },
+]);

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

@@ -11,16 +11,22 @@ export const Component = createUIComp({
     const { children } = useCompData(props.compId);
 
     return () => (
-      <div>
-        <Text.Component compId={children.text} />
-        <Image.Component
-          compId={children.img1}
-          class="w-1.67rem h-3.06rem object-cover"
-        />
-        <Image.Component
-          compId={children.imgShoe}
-          class="w-1.67rem h-3.06rem object-cover"
-        />
+      <div class="flex text-black">
+        <div class="ml-0.15rem mr-0.2rem">
+          <Image.Component
+            compId={children.img1}
+            class="w-2.74rem h-2.56rem object-cover"
+          />
+        </div>
+        <div class="flex-1 mt-1rem py-0.58rem px-0.2rem mb-1.3rem border-2px border-black border-solid leading-loose">
+          <Text.Component compId={children.text} />
+        </div>
+        <div class="absolute bottom-0 left-0">
+          <Image.Component
+            compId={children.imgShoe}
+            class="w-3.5rem h-2.8rem object-cover"
+          />
+        </div>
       </div>
     );
   },

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

@@ -12,12 +12,13 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
-    padding: "0.5rem 0",
+    padding: "0.3rem 0",
+    margin: "0 0.35rem",
   },
   children: {
     text: () =>
       createCompId("Text", {
-        value: `<p ><span >两面开边珠，无漆皮光亮&nbsp;</span></p><p ><span >却比漆皮更耐用，不容易爆皮&nbsp;</span></p><p ><span >逛着干看起来更加高档&nbsp;</span></p><p ><span >丰富多彩的流行色水，增加无限魅力</span></p><p ><span >既有复古的韵味更有时下的潮流元素</span></p>`,
+        value: `<p style="text-align:center;">两面开边珠，无漆皮光亮&nbsp;</p><p style="text-align:center;">却比漆皮更耐用，不容易爆皮&nbsp;</p><p style="text-align:center;">逛着干看起来更加高档&nbsp;</p><p style="text-align:center;">丰富多彩的流行色水，增加无限魅力</p><p style="text-align:center;">既有复古的韵味更有时下的潮流元素</p>`,
         layout: {
           textAlign: "center",
         },
@@ -31,7 +32,7 @@ export const { createComp, useCompData } = createCompHooks({
     imgShoe: () =>
       createCompId("Text", {
         value: {
-          url: require("@/assets/comps/Card13/img_shoe.jpg"),
+          url: require("@/assets/comps/Card13/img_shoe.png"),
         },
       }),
   },

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

@@ -1,4 +1,3 @@
-import { css } from "@linaria/core";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { Image, Text } from "../../../basicUI";
@@ -12,19 +11,24 @@ export const Component = createUIComp({
     const { children } = useCompData(props.compId);
 
     return () => (
-      <div class={rootStyles}>
-        <Text.Component compId={children.text} />
-        <Image.Component
-          compId={children.img1}
-          class="w-1.67rem h-3.06rem object-cover"
-        />
-        <Image.Component
-          compId={children.imgShoe}
-          class="w-1.67rem h-3.06rem object-cover"
-        />
+      <div class="">
+        <div class="flex justify-end relative pb-0.22rem z-10">
+          <div class="absolute left-0 bottom-0 z-10">
+            <Image.Component
+              compId={children.imgShoe}
+              class="w-3.5rem h-2.6rem object-cover"
+            />
+          </div>
+          <Image.Component
+            compId={children.img1}
+            class="w-4rem h-3.3rem object-cover"
+          />
+        </div>
+        <div class="relative mr-0.24rem -mt-0.6rem border-2px border-solid border-dark-400 pt-1rem pb-0.5rem leading-loose">
+          <div class="absolute -right-5px top-0 w-10px h-1rem bg-white"></div>
+          <Text.Component compId={children.text} />
+        </div>
       </div>
     );
   },
 });
-
-const rootStyles = css``;

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

@@ -12,12 +12,13 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
-    padding: "0.5rem 0",
+    padding: "0.3rem 0",
+    margin: "0 0.35rem",
   },
   children: {
     text: () =>
       createCompId("Text", {
-        value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">蓝色是个舒服的颜色，</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">&nbsp;处处充满着生机和希望，</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">&nbsp;其明净空旷往往让人迷失其中，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">给人无限的对未来的憧憬，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">不需要过多的言语，</span></p><p style="text-align:center;"><span style="color:hsl(0, 0%, 0%);font-size:12px;">让心灵感到平和</span></p>`,
+        value: `<p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );font-size:12px;">蓝色是个舒服的颜色，</span></p><p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );font-size:12px;">&nbsp;处处充满着生机和希望，</span></p><p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );font-size:12px;">&nbsp;其明净空旷往往让人迷失其中，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );font-size:12px;">给人无限的对未来的憧憬，&nbsp;</span></p><p style="text-align:center;"><span style="color:hsl( 0, 0%, 40% );font-size:12px;">不需要过多的言语，让心灵感到平和</span></p>`,
         layout: {
           textAlign: "center",
         },
@@ -31,7 +32,7 @@ export const { createComp, useCompData } = createCompHooks({
     imgShoe: () =>
       createCompId("Image", {
         value: {
-          url: require("@/assets/comps/Card14/img_shoe.jpg"),
+          url: require("@/assets/comps/Card14/img_shoe.png"),
         },
       }),
   },

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

@@ -15,7 +15,7 @@ export const Component = createUIComp({
       <div
         class={cx(rootStyles, " pl-0.28rem")}
         style={{
-          backgroundImage: `linear-gradient(#fff 1.3rem,${value.themeColor} 1.3rem, ${value.themeColor} 85%, #fff 85%)`,
+          backgroundImage: `linear-gradient(#fff 1.3rem,${value.themeColor} 1.3rem, ${value.themeColor} 87%, #fff 87%)`,
         }}
       >
         <div class="h-1.3rem">
@@ -27,12 +27,12 @@ export const Component = createUIComp({
         />
         <div class="absolute right-1rem top-3rem">
           <div
-            class="p-0.08rem pt-1rem border-light-50 border-6px border-solid"
+            class="p-0.08rem pt-1rem border-light-50 border-0.08rem border-top-0.06rem border-solid"
             style={{
               backgroundColor: value.themeColor,
             }}
           >
-            <div class="px-0.33rem py-0.06rem bg-light-50">
+            <div class="min-w-1.25rem px-0.1rem bg-light-50">
               <Text.Component compId={children.colorText} />
             </div>
           </div>
@@ -44,7 +44,7 @@ export const Component = createUIComp({
         </div>
         <Image.Component
           compId={children.img2}
-          class="!absolute bottom-0 left-0 w-4rem h-2.85rem object-cover  -ml-0.28rem"
+          class="!absolute bottom-0 left-0 w-4rem h-2.85rem object-cover"
         />
       </div>
     );

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

@@ -16,7 +16,7 @@ export const { createComp, useCompData } = createCompHooks({
   },
   layout: {
     // padding: "0.5rem 0",
-    margin: "0.2rem 0.35rem",
+    margin: "0.5rem 0.35rem",
   },
   children: {
     title: () =>