fix: Optimize tiny-engine official website UI (#79)

Author: xuanlid

packages/home/src/views/tiny-robot-home/FirstScreen.vue

@@ -131,6 +131,8 @@ onUnmounted(() => {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding-top: 120px;
+    padding-bottom: 130px;
     .first-screen-content {
       max-width: 682px;
       .first-screen-content-title {
@@ -212,8 +214,6 @@ onUnmounted(() => {
       }
     }
     .first-screen-image {
-      margin-top: 120px;
-      margin-bottom: 130px;
       animation: slideUpFadeIn 0.8s ease forwards;
       img {
         width: 100%;
@@ -228,6 +228,7 @@ onUnmounted(() => {
     background-image: url(@/assets/images/home/tinyrobot_top_mobile_banner.svg);
     .first-screen-wrap {
       flex-direction: column;
+      padding: 0;
       .first-screen-content {
         margin-top: 50px;
         .first-screen-content-title {

packages/tiny-engine-portal/public/img/home/hx_arrow.svg

@@ -1,24 +1,30 @@
 <template>
-  <iframe class="tiny-engine-iframe" :src="tinyEngineUrl"></iframe>
+  <div class="tiny-engine-app-visit">
+    <div id="loading" class="tiny-engine-loading"></div>
+    <iframe class="tiny-engine-iframe" :src="tinyEngineUrl"></iframe>
+  </div>
 </template>
 <script>
 import { TINY_ENGINE_DEFAULT_URL, TINY_ENGINE_DESIGNER_URL } from '../controller/utils'
 import { useRoute } from 'vue-router'
-import { onMounted, onUnmounted } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { Loading } from '@opentiny/vue'
 
 export default {
   setup() {
     const route = useRoute()
     const tinyEngineUrl = route.name === 'applicationVisit' ? TINY_ENGINE_DEFAULT_URL : TINY_ENGINE_DESIGNER_URL
+
+    const loadingInstance = ref(null)
     //回调函数
-    const openAppNewTab = ( event ) => {
-      if(event.data.type === 'openNewTab') {
+    const openAppNewTab = (event) => {
+      if (event.data.type === 'openNewTab') {
         const href = window.location.href.split('?')[0]
         const searchParams = event.data.url.split('?')[1]
         window.open(`${href}?${searchParams}`)
       }
     }
-    window.addEventListener("message", openAppNewTab, false)
+    window.addEventListener('message', openAppNewTab, false)
 
     onMounted(() => {
       const url = new URL(window.location.href)
@@ -27,6 +33,15 @@ export default {
           const iframe = document.querySelector('iframe')
           iframe.src = `${TINY_ENGINE_DESIGNER_URL}?${type}`
         }
+      loadingInstance.value = Loading.service({
+        text: '加载中...',
+        target: document.getElementById('loading'),
+        size: 'large'
+      })
+      document.querySelector('iframe').onload = function () {
+        document.querySelector('iframe').style.display = 'block'
+        document.getElementById('loading').style.display = 'none'
+      }
     })
 
     onUnmounted(() => {
@@ -39,9 +54,16 @@ export default {
 }
 </script>
 <style lang="less">
+.tiny-engine-app-visit{
+  height: 100vh;
+}
 .tiny-engine-iframe {
   width: 100%;
   height: 99%;
   border: none;
 }
+.tiny-engine-loading {
+  display: block;
+  height: 100vh;
+}
 </style>

packages/tiny-engine-portal/public/img/home/top-banner.svg

@@ -57,7 +57,7 @@
               <div class="video-overlay-play">
                 <div class="video-overlay-title">{{ i.videoTitle }}</div>
                 <div class="video-overlay-bottom-start">
-                  <img :src="`/img/help/playing${(index % 3) + 1}.svg`" alt="" />
+                  <img :src="`${state.imgPre}img/help/playing${(index % 3) + 1}.svg`" alt="" />
                 </div>
               </div>
             </div>
@@ -312,6 +312,7 @@ export default {
         width: 450px;
         height: 280px;
         cursor: pointer;
+        position: relative;
         background-repeat: no-repeat;
         background-size: cover;
         background-position: center center;
@@ -326,7 +327,6 @@ export default {
         }
       }
       .video-overlay {
-        position: relative;
         border-radius: 16px;
         padding: 24px 32px;
         .video-overlay-type {
@@ -348,6 +348,10 @@ export default {
           }
           .video-overlay-bottom-start {
             display: none;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
             width: 60px;
             height: 60px;
             backdrop-filter: blur(20px);
@@ -521,7 +525,6 @@ export default {
           border-radius: 12px;
         }
         .video-overlay {
-          position: relative;
           border-radius: 16px;
           padding: 17px 22px;
           .video-overlay-play {
@@ -538,6 +541,9 @@ export default {
               width: 42px;
               height: 42px;
               display: block;
+              img {
+                animation: none;
+              }
             }
           }
         }

packages/tiny-engine-portal/src/application/ApplicationVisit.vue

@@ -175,7 +175,7 @@ export default {
         right: -50%;
         top: 40%;
         width: 120px;
-        height: 66px;
+        height: 85px;
       }
     }
   }

packages/tiny-engine-portal/src/help/home/Main.vue

@@ -104,8 +104,8 @@ export default {
   }
   .home-top-banner {
     width: 100%;
-    padding-top: 80px;
-    padding-bottom: 80px;
+    padding-top: 100px;
+    padding-bottom: 100px;
     box-sizing: border-box;
     margin: 0 auto;
     position: relative;
@@ -133,7 +133,7 @@ export default {
       }
       .description {
         margin-top: 28px;
-        font-size: 20px;
+        font-size: 18px;
         color: #808080;
         line-height: 32px;
       }