update

src/modules/editor/components/CompUI/customUI/Covers/Cover/component.tsx

@@ -4,6 +4,7 @@ import { string } from "vue-types";
 import { useCompData } from ".";
 import { Image, Text } from "../../../basicUI";
 import { createUIComp } from "../../../defines/createUIComp";
+import { watch } from "vue";
 
 export const Component = createUIComp({
   props: {
@@ -11,7 +12,7 @@ export const Component = createUIComp({
   },
   setup(props) {
     const editor = useEditor();
-    const { children } = useCompData(props.compId);
+    const { children, layout } = useCompData(props.compId);
 
     function clickArrow() {
       if (editor.store.isEditMode) return;
@@ -20,10 +21,25 @@ export const Component = createUIComp({
       });
     }
 
+    if (editor.store.isPreview) {
+      watch(
+        () => editor.store.compPids[props.compId],
+        () => {
+          const height =
+            document.body.clientHeight * (750 / document.body.clientWidth);
+          layout.size[1] = height;
+          const compTrees = editor.helper.getCompTrees(props.compId);
+          editor.helper.extendStreamCard(compTrees[1].id);
+          const image = editor.helper.findComp(children.bg);
+          image?.setH(height);
+        }
+      );
+    }
+
     return () => {
       return (
-        <div class="!<md:h-100vh !md:h-10.8rem">
-          <Image.Component class="w-full h-full" compId={children.bg} />
+        <div class="h-full">
+          <Image.Component compId={children.bg} />
           <Text.Component class={titleCls} compId={children.title} />
           <div class={arrowCls} onClick={clickArrow}>
             ↓