nieyuge 2 년 전
부모
커밋
bd47cf16e1
2개의 변경된 파일35개의 추가작업 그리고 12개의 파일을 삭제
  1. 17 6
      src/view/iframe/tool-box/card.vue
  2. 18 6
      src/view/iframe/tool-box/full.vue

+ 17 - 6
src/view/iframe/tool-box/card.vue

@@ -11,13 +11,16 @@
             <iframe :src="iframe_url" frameborder="0" sandbox></iframe>
         </div>
         <div class="content" v-else>
-            <div class="mask" @click="confirmStatus" v-if="state.showMask && state.status != '固定右上角'">
-                <img class="luck" :src=" require('@/assets/svg/icon-post-lock.svg') " />
-                <div class="btn">
-                    <img class="img" v-if="state.detail && state.detail.nftProjectIcon" :src=" state.detail.nftProjectIcon " />
-                    <div class="font">Available for holders of {{state.detail.nftProjectName}} NFT</div>
+            <template v-if="state.showMask && state.status != '固定右上角'">
+                <div class="mask" @click="confirmStatus">
+                    <img class="luck" :src=" require('@/assets/svg/icon-post-lock.svg') " />
+                    <div class="btn">
+                        <img class="img" v-if="state.detail && state.detail.nftProjectIcon" :src=" state.detail.nftProjectIcon " />
+                        <div class="font">Available for holders of {{state.detail.nftProjectName}} NFT</div>
+                    </div>
                 </div>
-            </div>
+                <img class="mask_bg" v-if="state.detail.linkImagePath" :src=" state.detail.linkImagePath " />
+            </template>
             <iframe :src="state.iframe_url" v-show="state.status == 'iframe'" ref="dom_iframe" frameborder="0"
                 scrolling="yes" allow="camera *;microphone *"></iframe>
             <!-- sandbox="allow-same-origin allow-scripts allow-popups allow-top-navigation allow-forms allow-modals allow-popups-to-escape-sandbox" -->
@@ -690,6 +693,14 @@ const msgListener = (req, sender, sendResponse) => {
                 }
             }
         }
+        .mask_bg {
+            position: absolute;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            background-color: #000000;
+        }
 
         iframe {
             background: #fff;

+ 18 - 6
src/view/iframe/tool-box/full.vue

@@ -12,13 +12,16 @@
             </div>
         </div>
         <div class="content">
-            <div class="mask" @click="confirmStatus" v-if="showMask">
-                <img class="luck" :src=" require('@/assets/svg/icon-post-lock.svg') " />
-                <div class="btn">
-                    <img class="img" v-if="detail.nftProjectIcon" :src=" detail.nftProjectIcon " />
-                    <div class="font">Available for holders of {{detail.nftProjectName}} NFT</div>
+            <template v-if="showMask">
+                <div class="mask" @click="confirmStatus">
+                    <img class="luck" :src=" require('@/assets/svg/icon-post-lock.svg') " />
+                    <div class="btn">
+                        <img class="img" v-if="detail.nftProjectIcon" :src=" detail.nftProjectIcon " />
+                        <div class="font">Available for holders of {{detail.nftProjectName}} NFT</div>
+                    </div>
                 </div>
-            </div>
+                <img class="mask_bg" v-if="detail.linkImagePath" :src=" detail.linkImagePath " />
+            </template>
             <iframe :src="state.iframe_url" frameborder="0" allow="camera *;microphone *"></iframe>
         </div>
     </div>
@@ -267,6 +270,15 @@ const hideMask = (data) => {
             }
         }
 
+        .mask_bg {
+            position: absolute;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            background-color: #000000;
+        }
+
         iframe {
             width: 100%;
             height: 100%;