fix: update rem to px

src/hooks/initRemSize.ts

@@ -6,15 +6,6 @@ export function initRemSize() {
     const width = clientWidth > 750 ? 750 : clientWidth;
     const fontSize = (width / 750) * (isPc() ? 50 : 100);
     document.documentElement.style.fontSize = fontSize + "px";
-
-    // if (!isPc()) {
-    //   const meta = document.querySelector(
-    //     "meta[name=viewport]"
-    //   ) as HTMLMetaElement;
-    //   if (meta) {
-    //     meta.content = `width=375,initial-scale=${window.outerWidth / 375}`;
-    //   }
-    // }
   }
 
   window.addEventListener("resize", setRem);

src/hooks/initViewportSize.ts

@@ -0,0 +1,17 @@
+import { isPc } from "@queenjs/utils";
+
+export function initViewportSize() {
+  function setScale() {
+    let meta = document.querySelector("meta[name=viewport]") as HTMLMetaElement;
+    if (!meta) {
+      meta = document.createElement("meta");
+      meta.name = "viewport";
+      document.head.appendChild(meta);
+    }
+    meta.content = `width=375,initial-scale=${window.outerWidth / 375}`;
+  }
+  if (!isPc()) {
+    window.addEventListener("resize", setScale);
+    setScale();
+  }
+}

src/modules/editor/components/CompUI/basicUI/Text/component.tsx

@@ -176,7 +176,7 @@ const EditorComp = defineComponent({
 
 
 const textStyle = css`
-  font-size: 0.24rem;
+  font-size: 12px;
   width: 100%;
   color: #666;
   p {

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

@@ -10,7 +10,7 @@ export const options = {
 };
 
 export const { createComp, useCompData } = createCompHooks({
-  value: `<p><span style="font-size:0.36rem;">请输入内容</span></p>`,
+  value: `<p><span style="font-size:18px;">请输入内容</span></p>`,
   layout: {
     size: [750, 60],
   },

src/modules/editor/components/CompUI/basicUI/Video/component.tsx

@@ -67,8 +67,8 @@ const btnCls = css`
   position: absolute;
   top: 50%;
   left: 50%;
-  padding: 0.4rem;
-  font-size: 0.75rem;
+  padding: 20px;
+  font-size: 37.5px;
   color: #666;
   border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.7);

src/modules/editor/components/CompUI/basicUI/Web3D/component.tsx

@@ -93,7 +93,7 @@ const iconCls = css`
   position: absolute;
   top: 50%;
   left: 50%;
-  font-size: 1.5rem;
+  font-size: 75px;
   color: #666;
   transform: translate(-50%, -50%);
   border-radius: 50%;
@@ -102,11 +102,11 @@ const iconCls = css`
 
 const closeCls = css`
   position: absolute;
-  top: 0.3rem;
-  left: 0.3rem;
-  font-size: 0.3rem;
+  top: 15px;
+  left: 15px;
+  font-size: 15px;
   color: #666;
-  padding: 0.2rem;
+  padding: 10px;
   border-radius: 50%;
   background-color: #fff;
   @apply shadow;

src/modules/editor/components/CompUI/basicUI/hooks.ts

@@ -1,10 +1,9 @@
 import { useEditor } from "@/modules/editor";
-import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
-import { onMounted, ref, inject, provide, compile } from "vue";
+import { inject, onMounted, provide, ref } from "vue";
 
 export function useCompRef(compId: string) {
   const compRef = ref();
-  const { store, helper, compObjsMap } = useEditor();
+  const { store, helper } = useEditor();
 
   const parentId = compId !== "root" ? (inject("compParentId") as string) : "";
   provide("compParentId", compId);

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

@@ -22,7 +22,7 @@ export const Component = createUIComp({
           }}
           compId={children.img}
         />
-        <Text.Component class="flex-1 ml-0.1rem" compId={children.desc} />
+        <Text.Component class="flex-1 ml-5px" compId={children.desc} />
       </div>
     );
   },

src/modules/editor/components/CompUI/customUI/Cards/Card/index.tsx

@@ -17,7 +17,7 @@ export const { createComp, useCompData } = createCompHooks({
     imgSize: [240, 240],
   },
   layout: {
-    padding: "0.2rem 0.35rem",
+    padding: "10px 17.5px",
     size: [750, 500],
   },
   children: {

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

@@ -27,28 +27,28 @@ export const Component = createUIComp({
 
     return () => {
       return (
-        <div class="flex px-0.35rem pt-0.3rem">
-          <div class="flex-1 mx-0.3rem leading-loose relative z-10 w-0">
-            <Text.Component compId={children.text} class="mt-0.2rem" />
-            <div class="flex mt-0.2rem flex-wrap mr-0.8rem ml-0.2rem">
+        <div class="flex px-17.5px pt-15px">
+          <div class="flex-1 mx-15px leading-loose relative z-10 w-0">
+            <Text.Component compId={children.text} class="mt-10px" />
+            <div class="flex flex-wrap mt-10px mr-40px ml-10px">
               {children.list.map((d: any, i: number) => (
                 <Image.Component
                   key={i}
                   compId={d}
-                  class="-ml-0.2rem mb-0.2rem w-0.72rem h-0.72rem object-cover rounded-1/2 overflow-hidden"
+                  class="-ml-10px mb-10px w-36px h-36px object-cover rounded-1/2 overflow-hidden"
                 />
               ))}
             </div>
           </div>
-          <div class="w-2.5rem relative pb-0.58rem mr-0.03rem">
+          <div class="w-125px relative pb-29px mr-1.5px">
             <Image.Component
               compId={children.img1}
-              class="w-2.5rem h-4.17rem object-cover"
+              class="w-125px h-208.5px object-cover"
             />
-            <div class="absolute bottom-0 right-1rem">
+            <div class="absolute bottom-0 right-50px">
               <Image.Component
                 compId={children.img2}
-                class="w-3.17rem h-2.4rem object-cover"
+                class="w-158.5px h-120px object-cover"
               />
             </div>
           </div>

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

@@ -12,29 +12,29 @@ export const Component = createUIComp({
     const { children, value } = useCompData(props.compId);
 
     return () => (
-      <div class={cx("relative pt-0.3rem text-black overflow-hidden", rootStyles)}>
-        <div class="flex justify-end items-center relative mb-0.4rem">
-          <div class="absolute right-0 top-1/2 h-3/2 w-5rem border-dark-300 border-1 border-solid border-r-0 border-b-0"></div>
+      <div class={cx("relative pt-15px text-black overflow-hidden", rootStyles)}>
+        <div class="flex justify-end items-center relative mb-20px">
+          <div class="absolute right-0 top-1/2 h-3/2 w-250px border-dark-300 border-1 border-solid border-r-0 border-b-0"></div>
           <Text.Component
             compId={children.text}
-            class="relative z-10 bg-light-50 pr-0.2rem"
+            class="relative z-10 bg-light-50 pr-10px"
           />
         </div>
         <div class="relative">
           <Image.Component
             compId={children.img1}
-            class="w-6.22rem h-6.22rem object-cover mx-auto"
+            class="w-311px h-311px object-cover mx-auto"
           />
-          <div class="absolute right-5rem top-3rem card_color z-2">
+          <div class="absolute right-250px top-150px card_color z-2">
             <div
-              class="border-light-50 border-0.08rem border-top-0.06rem border-solid p-0.08rem pt-1rem"
+              class="border-light-50 border-4px border-top-3px border-solid p-4px pt-50px"
               style={{
                 backgroundColor: value.themeColor,
               }}
             >
               <Text.Component
                 compId={children.text2}
-                class="min-w-1.5rem bg-light-50"
+                class="min-w-75px bg-light-50"
               />
             </div>
           </div>
@@ -53,7 +53,7 @@ const rootStyles = css`
       left: 50%;
       bottom: 100%;
       width: 1px;
-      height: 3rem;
+      height: 150px;
       background-color: #fff;
     }
   }

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

@@ -11,22 +11,22 @@ export const Component = createUIComp({
     const { children } = useCompData(props.compId);
 
     return () => (
-      <div class="relative flex px-0.35rem pt-0.4rem text-black overflow-hidden">
-        <div class="ml-0.15rem mr-0.2rem">
+      <div class="relative flex px-17.5px pt-20px text-black overflow-hidden">
+        <div class="ml-7.5px mr-10px">
           <Image.Component
             compId={children.img1}
-            class="w-2.74rem h-2.56rem object-cover"
+            class="w-137px h-148px object-cover"
           />
         </div>
 
         <Text.Component
-          class="flex-1 mt-1rem py-0.58rem mb-1.3rem border-2px border-black border-solid leading-loose"
+          class="flex-1 mt-50px py-29px mb-65px border-2px border-black border-solid leading-loose"
           compId={children.text}
         />
-        <div class="absolute bottom-0.1rem left-0.35rem">
+        <div class="absolute bottom-5px left-17.5px">
           <Image.Component
             compId={children.imgShoe}
-            class="w-3.5rem h-2.8rem object-cover"
+            class="w-175px h-140px object-cover"
           />
         </div>
       </div>

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

@@ -11,24 +11,24 @@ export const Component = createUIComp({
     const { children } = useCompData(props.compId);
 
     return () => (
-      <div class="pt-0.2rem px-0.68rem pr-0.35rem">
-        <div class="flex justify-end relative pb-0.22rem  z-10">
+      <div class="pt-10px px-34px pr-17.5px">
+        <div class="flex justify-end relative pb-11px  z-10">
           <div class="absolute left-0 bottom-0 z-10">
             <Image.Component
               compId={children.imgShoe}
-              class="w-3.5rem h-2.6rem object-cover"
+              class="w-175px h-130px object-cover"
             />
           </div>
           <Image.Component
             compId={children.img1}
-            class="w-4rem h-3.3rem object-cover"
+            class="w-200px h-165px object-cover"
           />
         </div>
         <div class="relative">
-          <div class="absolute right-7px top-0 w-10px h-1rem bg-white z-1"></div>
+          <div class="absolute right-7px top-0 w-10px h-50px bg-white z-1"></div>
           <Text.Component
             compId={children.text}
-            class="-mt-0.6rem border-2px border-solid border-dark-400 pt-1rem pb-0.5rem leading-loose"
+            class="-mt-30px border-2px border-solid border-dark-400 pt-50px pb-25px leading-loose"
           />
         </div>
       </div>

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

@@ -12,13 +12,13 @@ export const Component = createUIComp({
     const { children, value } = useCompData(props.compId);
 
     return () => (
-      <div class={cx(rootStyles, "pl-0.65rem pr-0.35rem pt-0.3rem text-black")}>
-        <div class="relative mb-0.4rem flex items-center justify-start">
+      <div class={cx(rootStyles, "pl-32.5px pr-17.5px pt-15px text-black")}>
+        <div class="relative mb-20px flex items-center justify-start">
           <Text.Component
             compId={children.title}
-            class="relative -ml-0.1rem z-10 bg-light-50"
+            class="relative -ml-5px 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 class="absolute left-0 top-1/2 w-255px h-3/2 border-solid border-dark-200 border-1 border-b-0 border-l-0"></div>
         </div>
         <div
           class="relative"
@@ -26,31 +26,31 @@ export const Component = createUIComp({
             backgroundImage: `linear-gradient(${value.themeColor} 87%, #fff 87%)`,
           }}
         >
-          <div class="absolute left-5.1rem top-3rem z-10 card_color">
+          <div class="absolute left-255px top-150px z-10 card_color">
             <div
-              class="p-0.08rem pt-1rem border-light-50 border-0.08rem border-top-0.06rem border-solid"
+              class="p-4px pt-50px border-light-50 border-4px border-top-3px border-solid"
               style={{
                 backgroundColor: value.themeColor,
               }}
             >
               <Text.Component
                 compId={children.colorText}
-                class="min-w-1.25rem bg-light-50"
+                class="min-w-62.5px bg-light-50"
               />
             </div>
           </div>
           <Image.Component
             compId={children.img1}
-            class="-ml-0.28rem w-6.22rem h-6.22rem object-cover"
+            class="-ml-14px w-311px h-311px object-cover"
           />
-          <div class="relative flex justify-end mt-0.5rem pb-0.35rem">
+          <div class="relative flex justify-end mt-25px pb-17.5px">
             <Text.Component
               compId={children.text}
-              class="w-4.75rem py-0.3rem bg-light-50 border-dark-200 border-2 border-solid leading-loose"
+              class="w-237.5px py-15px bg-light-50 border-dark-200 border-2 border-solid leading-loose"
             />
             <Image.Component
               compId={children.img2}
-              class="!absolute bottom-0 left-0 -ml-0.28rem w-4rem h-2.85rem object-cover"
+              class="!absolute bottom-0 left-0 -ml-14px w-200px h-142.5px object-cover"
             />
           </div>
         </div>
@@ -68,7 +68,7 @@ const rootStyles = css`
       right: 50%;
       bottom: 100%;
       width: 1px;
-      height: 3rem;
+      height: 150px;
       background-color: #fff;
     }
   }

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

@@ -22,12 +22,11 @@ export const Component = createUIComp({
                 width: designToNaturalSize(750),
                 height: designToNaturalSize(464),
               }}
-              // class="h-5.3rem w-1/1"
               compId={children.bgImg}
             />
           </div>
           <div
-            class="absolute bottom-0 w-1/1 pl-0.8rem pr-0.2rem flex items-end justify-between transform translate-y-1/3"
+            class="absolute bottom-0 w-1/1 pl-40px pr-10px flex items-end justify-between transform translate-y-1/3"
             style={{
               height: designToNaturalSize(191),
               // marginBottom: designToNaturalSize(191 / 2),
@@ -64,10 +63,10 @@ export const Component = createUIComp({
             />
           </div>
         </div>
-        <div class="absolute top-1rem left-0 z-1">
+        <div class="absolute top-50px left-0 z-1">
           <Text.Component compId={children.text1} />
         </div>
-        <Text.Component compId={children.text2} class="mt-0.3rem" />
+        <Text.Component compId={children.text2} class="mt-15px" />
       </div>
     );
   },

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

@@ -13,12 +13,12 @@ export const Component = createUIComp({
     const { children } = useCompData(props.compId);
 
     return () => (
-      <div class="relative flex justify-between px-0.35rem overflow-hidden">
+      <div class="relative flex justify-between px-17.5px overflow-hidden">
         <div class="flex flex-col justify-center">
           <Text.Component compId={children.text1} />
-          <Text.Component class="mt-0.07rem" compId={children.text2} />
+          <Text.Component class="mt-3.5px" compId={children.text2} />
 
-          <div class="flex justify-between mt-0.07rem">
+          <div class="flex justify-between mt-3.5px">
             <Image.Component
               class="rounded-1/2 overflow-hidden"
               style={{

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

@@ -16,7 +16,7 @@ export const options = {
 export const { createComp, useCompData } = createCompHooks({
   value: {},
   layout: {
-    padding: "0.2rem",
+    padding: "10px",
     size: [750, 300],
   },
   children: {
@@ -27,7 +27,7 @@ export const { createComp, useCompData } = createCompHooks({
     title: () =>
       createCompId("Title3", {
         layout: {
-          margin: "0 0 0.4rem 0",
+          margin: "0 0 20px 0",
         },
         children: {
           title: createCompId("Text", {

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

@@ -29,7 +29,7 @@ export const Component = createUIComp({
 
     return () => (
       <div
-        class="grid px-0.2rem pt-0.3rem"
+        class="grid px-10px pt-15px"
         style={{
           gridTemplateColumns: `repeat(${value.columns}, 1fr)`,
           gridGap: helper.designToNaturalSize(value.gap),

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

@@ -54,18 +54,17 @@ const titleCls = css`
   position: absolute;
   left: 50%;
   top: 20%;
-  /* width: 7rem; */
   transform: translateX(-50%) !important;
 `;
 
 const arrowCls = css`
   position: absolute;
   left: 50%;
-  bottom: 0.42rem;
-  width: 0.7rem;
-  height: 0.7rem;
-  line-height: 0.7rem;
-  font-size: 0.36rem;
+  bottom: 21px;
+  width: 35px;
+  height: 35px;
+  line-height: 35px;
+  font-size: 18px;
   text-align: center;
   color: #fff;
   border: 2px solid #fff;

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

@@ -15,31 +15,31 @@ export const Component = createUIComp({
       <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">
+          <div class="mt-20px h-60px text-30px text-center text_main">
             <Text.Component compId={children.title} />
           </div>
-          <div class="h-10.22rem mt-10px flex flex-1">
-            <div class="ml-0.64rem">
+          <div class="h-511px mt-10px flex flex-1">
+            <div class="ml-32px">
               <Image.Component
                 compId={children.img1}
-                class="w-4.5rem h-10.22rem object-cover"
+                class="w-22.5px h-511px object-cover"
               />
             </div>
-            <div class="ml-0.3rem flex flex-col justify-between">
+            <div class="ml-15px flex flex-col justify-between">
               <Image.Component
                 compId={children.img2}
-                class="w-1.67rem h-3.06rem object-cover"
+                class="w-83.5px h-153px object-cover"
               />
               <Image.Component
                 compId={children.img3}
-                class="w-1.67rem h-2.08rem object-cover"
+                class="w-83.5px h-104px object-cover"
               />
             </div>
           </div>
         </div>
-        <div class="absolute top-5rem right-1.1rem text-stroke-dark-900 z-2">
+        <div class="absolute top-250px right-55px text-stroke-dark-900 z-2">
           <Text.Component compId={children.text1} />
-          <Text.Component class="mt-1rem text-right" compId={children.text2} />
+          <Text.Component class="mt-50px text-right" compId={children.text2} />
           <div class="line"></div>
         </div>
       </div>
@@ -52,13 +52,13 @@ const rootStyles = css`
     position: absolute;
     width: 100%;
     z-index: 0;
-    height: 9.28rem;
+    height: 464px;
     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;
+    font-size: 40px;
     span {
       color: #fff;
       mix-blend-mode: difference;
@@ -67,6 +67,6 @@ const rootStyles = css`
   }
   .line {
     height: 1px;
-    background: linear-gradient(to left, #000 1.2rem, #fff 1.2rem);
+    background: linear-gradient(to left, #000 60px, #fff 60px);
   }
 `;

src/modules/editor/components/CompUI/customUI/Texts/Text1/component.tsx

@@ -33,7 +33,7 @@ export const Component = createUIComp({
       <div class={rootStyles}>
         {children.list.map((d) => (
           <div
-            class="flex items-center text-primary px-0.1rem"
+            class="flex items-center text-primary px-5px"
             style={{
               margin: helper.designToNaturalSize(value.gap),
             }}
@@ -42,14 +42,14 @@ export const Component = createUIComp({
               compId={d.label}
               class={
                 value.showBackground
-                  ? "text relative z-0 py-0.08rem px-0.1rem text-white"
+                  ? "text relative z-0 py-4px px-5px text-white"
                   : "text-secondary"
               }
               style={{
                 width: helper.designToNaturalSize(value.width),
               }}
             />
-            <Text.Component compId={d.content} class="flex-1 ml-0.3rem" />
+            <Text.Component compId={d.content} class="flex-1 ml-15px" />
           </div>
         ))}
       </div>
@@ -58,7 +58,7 @@ export const Component = createUIComp({
 });
 
 const rootStyles = css`
-  padding: 0 0.2rem;
+  padding: 0 10px;
   .text {
     &::before {
       content: "";

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

@@ -26,7 +26,7 @@ export const Component = createUIComp({
 });
 
 const compStyle = css`
-  width: 3rem;
+  width: 150px;
   margin: 0 auto;
   border-top: 1px solid;
   border-bottom: 1px solid;

src/modules/editor/components/CompUI/customUI/Titles/Title1/index.ts

@@ -32,7 +32,7 @@ export const { createComp, useCompData } = createCompHooks({
         value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 30%);font-size:16px;">2023主推新品</span></p>`,
         layout: {
           textAlign: "center",
-          margin: "0.1rem auto 0",
+          margin: "5px auto 0",
           size: [260, 60],
         },
       }),

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

@@ -12,15 +12,15 @@ export const Component = createUIComp({
     const { children } = useCompData(props.compId);
 
     return () => (
-      <div class="flex items-center justify-center px-0.1rem">
-        <div class={cx(border, "left w-0.5rem text-0.24rem text-right")}>
+      <div class="flex items-center justify-center px-5px">
+        <div class={cx(border, "left w-25px text-12px text-right")}>
           &frasl; &frasl;
         </div>
         <Text.Component
-          class="px-0.5rem max-w-4.8rem"
+          class="px-25px max-w-240px"
           compId={children.title}
         />
-        <div class={cx(border, "right w-0.5rem text-0.24rem")}>
+        <div class={cx(border, "right w-25px text-12px")}>
           &frasl; &frasl;
         </div>
       </div>
@@ -41,12 +41,12 @@ const border = css`
   }
   &.left {
     &::after {
-      left: 0.06rem;
+      left: 3px;
     }
   }
   &.right {
     &::after {
-      left: -0.06rem;
+      left: -3px;
     }
   }
 `;

src/modules/editor/components/CompUI/formItems/ImagePicker.tsx

@@ -33,11 +33,11 @@ export const ImagePicker = defineComponent({
 });
 
 const imageStyle = css`
-  width: 1.2rem;
-  height: 1.2rem;
-  padding: 0.12rem;
+  width: 60px;
+  height: 60px;
+  padding: 6px;
   text-align: center;
-  line-height: 1.2rem;
+  line-height: 60px;
   border: 1px dashed @inf-text-less-color;
   border-radius: 4px;
   box-sizing: content-box;
@@ -50,6 +50,6 @@ const imageStyle = css`
   }
   i {
     font-style: unset;
-    font-size: 0.72rem;
+    font-size: 36px;
   }
 `;

src/modules/editor/components/Preview/index.tsx

@@ -1,18 +1,18 @@
-import { defineUI } from "queenjs";
+import { defineComponent } from "vue";
 import { useEditor } from "../..";
 import { CompUI } from "../CompUI";
 import { useCompRef } from "../CompUI/basicUI/hooks";
 
-export default defineUI({
+export default defineComponent({
   setup() {
     const { store, helper } = useEditor();
     const rootRef = useCompRef("root");
     return () => (
       <div
         ref={rootRef}
-        class="overflow-hidden min-h-100vh !h-auto"
+        class="overflow-hidden !h-auto"
         style={helper.createStyle(
-          helper.findRootComp()?.layout || { size: [750, 800] }
+          helper.findRootComp()?.layout || { size: [750] }
         )}
       >
         {store.pageCompIds.map((id) => {

src/modules/editor/module/helpers/index.ts

@@ -6,8 +6,8 @@ import { Layout } from "../../typings";
 
 export const helpers = EditorModule.helper({
   designToNaturalSize(value: number) {
-    return parseFloat((value / 100).toFixed(2)) + "rem";
-    // return value / 2 + "px";
+    // return parseFloat((value / 100).toFixed(2)) + "rem";
+    return value / 2 + "px";
   },
   pxToDesignSize(value: number) {
     return value * 2;

src/pages/editor/index.ts

@@ -1,12 +1,11 @@
 import { startApp } from "@/App";
 import { initAuthDef } from "@/hooks/initAuthDef";
-import { initRemSize } from "@/hooks/initRemSize";
 import CKEditor from "@ckeditor/ckeditor5-vue";
 import router from "./router";
 import { initResource } from "@/modules/resource";
 
 document.title = "推广编辑器";
 
-startApp(router, [initAuthDef, initRemSize, initResource], (app) => {
+startApp(router, [initAuthDef, initResource], (app) => {
   app.use(CKEditor);
 });

src/pages/share/Promotion/index.tsx

@@ -1,6 +1,7 @@
 import { wxController } from "@/controllers/wxController";
 import { Dict_Apis } from "@/dict";
 import { initEditor } from "@/modules/editor";
+import { isPc } from "@queenjs/utils";
 import { defineComponent } from "vue";
 
 export default defineComponent(() => {
@@ -31,5 +32,11 @@ export default defineComponent(() => {
     });
   }
 
-  return () => <editor.components.Preview />;
+  return () => (
+    <div class="flex items-center justify-center h-100vh bg-gray-100">
+      <div class={isPc() ? `h-668px scrollbar` : `h-full`}>
+        <editor.components.Preview />
+      </div>
+    </div>
+  );
 });

src/pages/share/index.ts

@@ -1,10 +1,10 @@
 import { startApp } from "@/App";
-import { initRemSize } from "@/hooks/initRemSize";
+import { initViewportSize } from "@/hooks/initViewportSize";
 import CKEditor from "@ckeditor/ckeditor5-vue";
 import router from "./router";
 import "./style.less";
 
 document.title = "分享";
-startApp(router, [initRemSize], (app) => {
+startApp(router, [initViewportSize], (app) => {
   app.use(CKEditor);
 });

src/pages/website/index.ts

@@ -1,6 +1,6 @@
 import { startApp } from "@/App";
 import { initAuthDef } from "@/hooks/initAuthDef";
-import { initRemSize } from "@/hooks/initRemSize";
+import { initViewportSize } from "@/hooks/initViewportSize";
 import { initEditor } from "@/modules/editor";
 import { initResource } from "@/modules/resource";
 import CKEditor from "@ckeditor/ckeditor5-vue";
@@ -9,7 +9,7 @@ import router from "./router";
 document.title = "推广编辑器";
 startApp(
   router,
-  [initAuthDef, initRemSize, initResource, initEditor],
+  [initAuthDef, initViewportSize, initResource, initEditor],
   (app) => {
     app.use(CKEditor);
   }