title

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

@@ -0,0 +1,52 @@
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { Text } from "../../..";
+import { createUIComp } from "../../../defines/createUIComp";
+import { css, cx } from "@linaria/core";
+
+export const Component = createUIComp({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { children } = useCompData(props.compId);
+
+    return () => (
+      <div class="flex items-center justify-center px-0.1rem">
+        <div class={cx(border, "left w-1rem text-0.34rem text-right")}>
+          &frasl; &frasl;
+        </div>
+        <Text.Component
+          class="px-0.5rem max-w-4.8rem"
+          compId={children.title?.id}
+        />
+        <div class={cx(border, "right w-1rem text-0.34rem")}>
+          &frasl; &frasl;
+        </div>
+      </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/customUI/Titles/Title2/index.tsx

@@ -0,0 +1,20 @@
+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: {
+    title: {
+      value: `<p style="text-align:center;"><span style="color:#333;font-size:20px;font-weight: bold;">产品信息</span></p>`,
+      layout: {
+        textAlign: "center",
+      },
+    },
+  },
+});
+
+export const Form = createAttrsForm([]);

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

@@ -4,5 +4,6 @@ export * as Card from "./customUI/Cards/Card";
 export * as CardList from "./customUI/Cards/CardList";
 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";