update

src/modules/editor/components/CompUI/customUI/Cover2/component.tsx

@@ -0,0 +1,64 @@
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { css, cx } from "@linaria/core";
+import { createUIComp } from "../../defines/createUIComp";
+import { Text, Image } from "../..";
+
+export const Component = createUIComp({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { children } = useCompData(props.compId);
+
+    return () => (
+      <div class={cx(rootStyles, "overflow-hidden")}>
+        <div class="bg flex flex-col"></div>
+        <div class="relative z-1 overflow-hidden ">
+          <div class="mt-0.4rem h-1.2rem text-30px text-center text_main">
+            <Text.Component compId={children.title.id} />
+          </div>
+          <div class="h-10.22rem mt-10px flex flex-1">
+            <div class="ml-0.64rem">
+              <Image.Component
+                compId={children.img1.id}
+                class="w-4.5rem h-10.22rem bg-gray-500 object-cover"
+              />
+            </div>
+            <div class="ml-0.3rem flex flex-col justify-between">
+              <Image.Component
+                compId={children.img2.id}
+                class="w-1.67rem h-3.06rem bg-gray-500 object-cover"
+              />
+              <Image.Component
+                compId={children.img3.id}
+                class="w-1.67rem h-2.08rem bg-gray-500 object-cover"
+              />
+            </div>
+          </div>
+          <div class="absolute"></div>
+        </div>
+      </div>
+    );
+  },
+});
+
+const rootStyles = css`
+  .bg {
+    position: absolute;
+    width: 100%;
+    z-index: 0;
+    height: 9.28rem;
+    background-image: linear-gradient(to right, #000 59%, #fff 59%);
+  }
+  .text_main {
+    color: #fff;
+    background-image: linear-gradient(to right, #000 59%, #fff 59%);
+    font-size: 0.8rem;
+    span {
+      color: #fff;
+      mix-blend-mode: difference;
+      text-transform: uppercase;
+    }
+  }
+`;

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

@@ -0,0 +1,32 @@
+import { createAttrsForm } from "../../defines/createAttrsForm";
+import { createOptions } from "../../defines/createOptions";
+
+export { Component } from "./component";
+
+export const { options, useCompData } = createOptions({
+  name: "标题",
+  thumbnail: require("./thumbnail.jpg"),
+  value: {},
+  children: {
+    img1: {
+      value: {
+        url: require("./img_1.png"),
+      },
+    },
+    img2: {
+      value: {
+        url: require("./img_2.jpg"),
+      },
+    },
+    img3: {
+      value: {
+        url: require("./img_3.jpg"),
+      },
+    },
+    title: {
+      value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 60%);font-size:28px;">NEW</span><span style="font-size:28px;"> &nbsp; &nbsp;FasHION</span></p><p>&nbsp;</p>`,
+    },
+  },
+});
+
+export const Form = createAttrsForm([]);

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

@@ -1,3 +1,4 @@
+export * as Cover2 from "./customUI/Cover2";
 export * as Image from "./basicUI/Image";
 export * as Text from "./basicUI/Text";
 export * as Card from "./customUI/Cards/Card";
@@ -6,4 +7,3 @@ export * as Cover from "./customUI/Cover";
 export * as Title1 from "./customUI/Titles/Title1";
 export * as Title2 from "./customUI/Titles/Title2";
 export * as Card2 from "./customUI/Cards/Card2";
-