|
@@ -12,45 +12,64 @@ export const Component = createUIComp({
|
|
const { children, value } = useCompData(props.compId);
|
|
const { children, value } = useCompData(props.compId);
|
|
|
|
|
|
return () => (
|
|
return () => (
|
|
- <div
|
|
|
|
- class={cx(rootStyles, " pl-0.28rem")}
|
|
|
|
- style={{
|
|
|
|
- backgroundImage: `linear-gradient(#fff 1.3rem,${value.themeColor} 1.3rem, ${value.themeColor} 87%, #fff 87%)`,
|
|
|
|
- }}
|
|
|
|
- >
|
|
|
|
- <div class="h-1.3rem">
|
|
|
|
- <Text.Component compId={children.title} />
|
|
|
|
|
|
+ <div class={cx(rootStyles, "text-black")}>
|
|
|
|
+ <div class="relative mb-0.4rem flex items-center justify-start">
|
|
|
|
+ <Text.Component
|
|
|
|
+ compId={children.title}
|
|
|
|
+ class="relative -ml-0.1rem z-10 bg-light-50"
|
|
|
|
+ />
|
|
|
|
+ <div class="absolute left-0 top-1/2 w-5.1rem h-3/2 border-solid border-dark-200 border-1 border-b-0 border-l-0"></div>
|
|
</div>
|
|
</div>
|
|
- <Image.Component
|
|
|
|
- compId={children.img1}
|
|
|
|
- class="w-6.22rem h-6.22rem object-cover -ml-0.28rem"
|
|
|
|
- />
|
|
|
|
- <div class="absolute right-1rem top-3rem">
|
|
|
|
- <div
|
|
|
|
- class="p-0.08rem pt-1rem border-light-50 border-0.08rem border-top-0.06rem border-solid"
|
|
|
|
- style={{
|
|
|
|
- backgroundColor: value.themeColor,
|
|
|
|
- }}
|
|
|
|
- >
|
|
|
|
- <div class="min-w-1.25rem px-0.1rem bg-light-50">
|
|
|
|
- <Text.Component compId={children.colorText} />
|
|
|
|
|
|
+ <div
|
|
|
|
+ class="relative pl-0.28rem"
|
|
|
|
+ style={{
|
|
|
|
+ backgroundImage: `linear-gradient(${value.themeColor} 87%, #fff 87%)`,
|
|
|
|
+ }}
|
|
|
|
+ >
|
|
|
|
+ <div class="absolute left-5.1rem top-3rem z-10 card_color">
|
|
|
|
+ <div
|
|
|
|
+ class="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.colorText}
|
|
|
|
+ class="min-w-1.25rem px-0.1rem bg-light-50"
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- </div>
|
|
|
|
- <div class="flex flex-row-reverse mt-0.5rem mb-0.35rem">
|
|
|
|
- <div class="w-4.75rem py-0.55rem bg-light-50 text-center border-dark-200 border-2 border-solid leading-2">
|
|
|
|
- <Text.Component compId={children.text} />
|
|
|
|
|
|
+ <Image.Component
|
|
|
|
+ compId={children.img1}
|
|
|
|
+ class="-ml-0.28rem w-6.22rem h-6.22rem object-cover"
|
|
|
|
+ />
|
|
|
|
+ <div class="relative flex justify-end mt-0.5rem pb-0.35rem -ml-0.28rem">
|
|
|
|
+ <Text.Component
|
|
|
|
+ compId={children.text}
|
|
|
|
+ class="w-4.75rem py-0.55rem bg-light-50 border-dark-200 border-2 border-solid leading-loose"
|
|
|
|
+ />
|
|
|
|
+ <Image.Component
|
|
|
|
+ compId={children.img2}
|
|
|
|
+ class="!absolute bottom-0 left-0 w-4rem h-2.85rem object-cover"
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <Image.Component
|
|
|
|
- compId={children.img2}
|
|
|
|
- class="!absolute bottom-0 left-0 w-4rem h-2.85rem object-cover"
|
|
|
|
- />
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
);
|
|
},
|
|
},
|
|
});
|
|
});
|
|
|
|
|
|
const rootStyles = css`
|
|
const rootStyles = css`
|
|
- background-clip: content-box;
|
|
|
|
|
|
+ .card_color {
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
+ &::before {
|
|
|
|
+ content: "";
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 50%;
|
|
|
|
+ bottom: 100%;
|
|
|
|
+ width: 1px;
|
|
|
|
+ height: 3rem;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
`;
|
|
`;
|