fix: 分享ui制作

src/components/Information/View.Mobile.vue

@@ -26,19 +26,22 @@
                 </div>
             </div>
         </transition>
-        <div class="url-share" v-show="showCopy">
-            <div>
-                <div class="tips">
-                    <h4>分享链接给好友</h4>
-                    <i class="iconfont iconshow_cancel" @click="showCopy = false"></i>
-                </div>
-                <div class="url">{{ copyLink }}</div>
-                <div class="btns">
-                    <ui-button class="cancel" @click="showCopy = false">取消</ui-button>
-                    <ui-button class="primary" :data-clipboard-text="copyLink" ref="copy$">一键复制</ui-button>
-                </div>
+        <teleport to="body">
+            <div class="url-share" v-show="showCopy" @click="showCopy = false">
+                <img src="@/assets/share.png" alt="">
+                <!-- <div>
+                    <div class="tips">
+                        <h4>分享链接给好友</h4>
+                        <i class="iconfont iconshow_cancel" @click="showCopy = false"></i>
+                    </div>
+                    <div class="url">{{ copyLink }}</div>
+                    <div class="btns">
+                        <ui-button class="cancel" @click="showCopy = false">取消</ui-button>
+                        <ui-button class="primary" :data-clipboard-text="copyLink" ref="copy$">一键复制</ui-button>
+                    </div>
+                </div> -->
             </div>
-        </div>
+        </teleport>
     </div>
 </template>
 <script setup>
@@ -100,11 +103,11 @@ watch(
 )
 
 onMounted(() => {
-    new ClipboardJS(copy$.value.$el).on('success', function (e) {
-        e.clearSelection()
-        showCopy.value = false
-        Dialog.toast({ content: '场景链接复制成功', type: 'success' })
-    })
+    // new ClipboardJS(copy$.value.$el).on('success', function (e) {
+    //     e.clearSelection()
+    //     showCopy.value = false
+    //     Dialog.toast({ content: '场景链接复制成功', type: 'success' })
+    // })
 
     nextTick(() => {
         document.querySelector('.player').addEventListener('touchstart', () => {
@@ -491,13 +494,75 @@ const onChangeMode = () => {
         // }
     }
 
-    .url-share {
+    
+
+    .app-share {
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        background-color: #fff;
+        color: var(--editor-main-color);
+        text-shadow: none;
+        border-radius: 0.146667rem 0.146667rem 0px 0px;
+        i {
+            // font-size: 2rem;
+            font-size: 1rem;
+            margin: 0.666667rem 0 0.106667rem;
+            display: inline-block;
+        }
+        ul {
+            // display: flex;
+            // justify-content: space-around;
+            overflow: hidden;
+            div {
+                text-align: center;
+                // margin-top: -0.3rem;
+                font-size: 0.34rem;
+            }
+            li {
+                width: 33.3%;
+                float: left;
+                // padding-bottom: 0.5rem;
+                overflow: hidden;
+                text-align: center;
+                // i{
+                //   font-size: 2rem;
+                // }
+            }
+            &.flex {
+                display: flex;
+                li {
+                    float: none;
+                }
+            }
+        }
+        > div {
+            height: 1.293333rem;
+            font-size: 16px;
+            text-align: center;
+            // padding: 0.5rem;
+            border-top: solid 1px #eeeeee;
+            margin-top: 0.466667rem;
+            line-height: 1.293333rem;
+        }
+    }
+}
+.url-share {
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
-        background-color: rgba(0, 0, 0, 0.1);
+        z-index: 99999;
+        background-color: rgba(0, 0, 0, 0.8);
+        >img {
+            position: absolute;
+            width: 61.6%;
+            top: 12px;
+            right: 6.4%;
+        }
+
         > div {
             position: absolute;
             left: 0.6rem;
@@ -554,60 +619,6 @@ const onChangeMode = () => {
             }
         }
     }
-
-    .app-share {
-        position: fixed;
-        left: 0;
-        bottom: 0;
-        width: 100%;
-        background-color: #fff;
-        color: var(--editor-main-color);
-        text-shadow: none;
-        border-radius: 0.146667rem 0.146667rem 0px 0px;
-        i {
-            // font-size: 2rem;
-            font-size: 1rem;
-            margin: 0.666667rem 0 0.106667rem;
-            display: inline-block;
-        }
-        ul {
-            // display: flex;
-            // justify-content: space-around;
-            overflow: hidden;
-            div {
-                text-align: center;
-                // margin-top: -0.3rem;
-                font-size: 0.34rem;
-            }
-            li {
-                width: 33.3%;
-                float: left;
-                // padding-bottom: 0.5rem;
-                overflow: hidden;
-                text-align: center;
-                // i{
-                //   font-size: 2rem;
-                // }
-            }
-            &.flex {
-                display: flex;
-                li {
-                    float: none;
-                }
-            }
-        }
-        > div {
-            height: 1.293333rem;
-            font-size: 16px;
-            text-align: center;
-            // padding: 0.5rem;
-            border-top: solid 1px #eeeeee;
-            margin-top: 0.466667rem;
-            line-height: 1.293333rem;
-        }
-    }
-}
-
 @media (orientation: landscape) {
     .header {
         top: 0.2rem;