Browse Source

[edit][iframe滚动条]

zhangwei 2 years ago
parent
commit
34714dfe1c

+ 40 - 31
src/view/iframe/publish/tool-box/child/preview.vue

@@ -35,19 +35,20 @@
                         </div>
                     </div>
                     <div class="card-wrapper" :style="{ 'zoom': reviewCanvasParams.zoom }">
-                        <img class="cover" v-if="previewData.linkImagePath && previewData.appId" :src="previewData.linkImagePath" />
-                        <iframe class="iframe" 
-                            :src="previewData.convertUrl"
-                            v-else></iframe> 
+                        <img class="cover" v-if="previewData.linkImagePath && previewData.appId"
+                            :src="previewData.linkImagePath" />
+                        <iframe class="iframe" :src="previewData.convertUrl" scrolling="no" v-else></iframe>
 
                         <div class="bottom-bar">
                             <div class="site-url">DeNet.me</div>
                             <div class="desc">
                                 <template v-if="previewData.appId">
-                                    {{previewData.currentApp.linkTitle}}
+                                    {{ previewData.currentApp.linkTitle }}
                                 </template>
                                 <template v-else>
-                                    {{previewData.currentApp.defaultTit ? defaultLinkTitle : previewData.currentApp.name}}
+                                    {{ previewData.currentApp.defaultTit ? defaultLinkTitle :
+                                            previewData.currentApp.name
+                                    }}
                                 </template>
                             </div>
                         </div>
@@ -116,10 +117,10 @@ const props = defineProps({
     }
 })
 
-watch(() => props.screenshotWebsiteData, 
+watch(() => props.screenshotWebsiteData,
     (newVal) => {
         let { appId } = props.previewData;
-        if(loadingHide && !appId && (newVal.url || newVal.status)) {
+        if (loadingHide && !appId && (newVal.url || newVal.status)) {
             loadingHide();
             loadingHide = null;
             submitPublish();
@@ -127,18 +128,18 @@ watch(() => props.screenshotWebsiteData,
     },
     {
         deep: true
-})
+    })
 
-watch(() => props.showCom, 
+watch(() => props.showCom,
     (newVal) => {
-        if(newVal == 'EDITOR' && loadingHide) {
+        if (newVal == 'EDITOR' && loadingHide) {
             loadingHide();
             loadingHide = null;
         }
     },
     {
         deep: true
-})
+    })
 
 const emits = defineEmits(["publishFinish"]);
 
@@ -193,11 +194,11 @@ const calcPreviewCanvasParams = () => {
 
 const publishHandler = () => {
     let { appId } = props.previewData;
-    if(loadingHide) {
+    if (loadingHide) {
         return;
     }
 
-    if(!appId && !props.screenshotWebsiteData.url) {
+    if (!appId && !props.screenshotWebsiteData.url) {
         loadingHide = message.loading('loading...', 0);
         return;
     }
@@ -206,9 +207,9 @@ const publishHandler = () => {
 }
 
 const submitPublish = () => {
-    let {convertUrl, originUrl, appId, currentApp} = props.previewData;
+    let { convertUrl, originUrl, appId, currentApp } = props.previewData;
 
-    if(submitIng.value) {
+    if (submitIng.value) {
         return;
     }
 
@@ -232,7 +233,7 @@ const submitPublish = () => {
     };
 
     submitIng.value = true;
-    
+
     postPublish(data).then((res) => {
         submitIng.value = false;
         if (res.code == 0) {
@@ -247,23 +248,27 @@ const submitPublish = () => {
 
 const setHistoryData = async (params) => {
     const maxLength = 9;
-    let {list = []} = await getChromeStorage('toolBoxAppHistoryData') || {};
-    if(list.length) {
+    let { list = [] } = await getChromeStorage('toolBoxAppHistoryData') || {};
+    if (list.length) {
         let hasSite = list.find(item => item.defaultUrl == params.defaultUrl);
-        if(hasSite) {
+        if (hasSite) {
             return;
         }
         list.unshift(params);
-        if(list.length > maxLength) {
+        if (list.length > maxLength) {
             list.length = maxLength;
         }
-        setChromeStorage({ toolBoxAppHistoryData : JSON.stringify({
-            list: list
-        })}) 
+        setChromeStorage({
+            toolBoxAppHistoryData: JSON.stringify({
+                list: list
+            })
+        })
     } else {
-        setChromeStorage({ toolBoxAppHistoryData : JSON.stringify({
-            list: [params]
-        })})    
+        setChromeStorage({
+            toolBoxAppHistoryData: JSON.stringify({
+                list: [params]
+            })
+        })
     }
 };
 
@@ -274,9 +279,9 @@ onMounted(() => {
             getUserName(res.nickName);
         }
         clearInterval(timer.value);
-        timer.value = setInterval(() => {
-            installStatus.value = !installStatus.value;
-        }, 3000)
+        // timer.value = setInterval(() => {
+        // installStatus.value = !installStatus.value;
+        // }, 3000)
     });
     window.addEventListener('resize', function () {
         calcPreviewCanvasParams();
@@ -339,6 +344,7 @@ onUnmounted(() => {
                     .name {
                         font-size: 15px;
                     }
+
                     .name {
                         color: #566370;
                         margin-left: 7px;
@@ -394,7 +400,7 @@ onUnmounted(() => {
                     .iframe {
                         height: calc(100% - 73px);
                         width: 100%;
-                        border: none;    
+                        border: none;
                         pointer-events: none;
                         cursor: default;
                     }
@@ -410,11 +416,13 @@ onUnmounted(() => {
                         height: 73px;
                         padding: 10px 10px 0 13px;
                         border-top: 1px solid rgba(0, 0, 0, 0.3);
+
                         .site-url {
                             color: #566370;
                             font-size: 14px;
                             line-height: 20px;
                         }
+
                         .desc {
                             font-weight: 500;
                             font-size: 15px;
@@ -446,6 +454,7 @@ onUnmounted(() => {
         display: flex;
         align-items: center;
         justify-content: flex-end;
+
         .btn {
             width: 200px;
             height: 50px;

+ 2 - 8
src/view/iframe/tool-box/card.vue

@@ -237,15 +237,9 @@ const clickFull = () => {
     cursor: default;
 }
 
-html,
-body,
-#app {
-    margin: 0;
-    padding: 0;
-}
-
 .denet-toolbox {
     width: 100%;
+    height: 100%;
     min-height: 100%;
     filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.2));
     border-radius: 12px;
@@ -380,7 +374,7 @@ body,
 
     .content {
         width: 100%;
-        height: 100%;
+        height: calc(100% - 40px);
         background: #686868;
         display: flex;
         align-items: center;

+ 1 - 10
src/view/iframe/tool-box/full.vue

@@ -99,16 +99,7 @@ const sendClose = () => {
 
 </script>
 
-<style lang="scss">
-html,
-body,
-#app {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-}
-
+<style lang="scss" scoped>
 .denet-toolbox {
     width: 100%;
     height: 100%;

+ 10 - 0
src/view/iframe/tool-box/index.vue

@@ -12,3 +12,13 @@ onMounted(() => {
     page_type.value = getQueryString('page_type') || ''
 })
 </script>
+<style lang="scss">
+html,
+body,
+#app {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+}
+</style>