UI

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

@@ -1,3 +1,4 @@
+import { css, cx } from "@linaria/core";
 import { string } from "vue-types";
 import { useCompData } from ".";
 import { Image, Text } from "../../../basicUI";
@@ -11,23 +12,56 @@ export const Component = createUIComp({
     const { children, value } = useCompData(props.compId);
 
     return () => (
-      <div class="relative">
-        <Text.Component compId={children.text} />
-        <div class="w-6.22rem mx-auto mt-0.4rem">
+      <div class={cx("relative text-black", rootStyles)}>
+        <div class="flex justify-end items-center relative mb-0.4rem">
+          <div class="text_top absolute right-0 top-0 h-1/1 w-0"></div>
+          <div class="relative z-10 bg-light-50 pr-0.2rem">
+            <Text.Component compId={children.text} />
+          </div>
+        </div>
+        <div class="relative">
           <Image.Component
             compId={children.img1}
-            class="w-6.22rem h-6.22rem object-cover"
+            class="w-6.22rem h-6.22rem object-cover mx-auto"
           />
-        </div>
-        <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
+            class="absolute right-5rem top-3rem min-w-1.5rem p-0.08rem pt-1rem border-light-50 border-0.08rem border-top-0.06rem border-solid card_color"
+            style={{
+              backgroundColor: value.themeColor,
+            }}
+          >
+            <Text.Component compId={children.text2} class="bg-light-50" />
+          </div>
         </div>
       </div>
     );
   },
 });
+
+const rootStyles = css`
+  .text_top {
+    &::before {
+      content: "";
+      position: absolute;
+      right: 0;
+      top: 50%;
+      width: 5rem;
+      height: 200%;
+      border-width: 1px 0 0 1px;
+      border-color: #000;
+      border-style: solid;
+    }
+  }
+  .card_color {
+    transform: translateX(50%);
+    &::before {
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: -3.06rem;
+      width: 1px;
+      height: 3rem;
+      background-color: #fff;
+    }
+  }
+`;

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

@@ -15,12 +15,13 @@ export const { createComp, useCompData } = createCompHooks({
     themeColor: "#5BA9CB",
   },
   layout: {
-    margin: "0.2rem 0.35rem",
+    padding: "0.5rem 0",
+    margin: "0.5rem 0.35rem",
   },
   children: {
     text: () =>
       createCompId("Text", {
-        value: `<p style="text-align:right;"><span style="color:hsl(0, 0%, 0%);font-size:20px;"><strong>P190-2#</strong></span></p>`,
+        value: `<p><span style="font-size:20px;"><strong>P190-2#</strong></span></p>`,
         layout: {
           textAlign: "center",
         },