feat: 微博环境指引

src/App.vue

@@ -3,6 +3,16 @@
     <router-view />
     <Teleport to="body">
       <div class="screen-rotate-tip">
+        <div
+          v-if="isWeibo"
+          class="screen-rotate-tip-browser"
+        >
+          <p>链接打不开？</p>
+          <p class="screen-rotate-tip-browser__icon">
+            请点击右上角
+          </p>
+          <p>选择在<span>“浏览器”</span>中打开</p>
+        </div>
         <div class="inner-wrapper">
           <img
             class=""
@@ -62,6 +72,7 @@ const {
   windowSizeWhenDesignForRef,
 } = useSizeAdapt(1920, 970)
 const isPortrait = ref(false)
+const isWeibo = ref(navigator.userAgent.toLowerCase().indexOf('weibo') > -1)
 
 window.addEventListener("resize", () => {
   console.log(window.innerWidth)
@@ -374,6 +385,50 @@ button.logo{
   @media (max-aspect-ratio: 1/1) {
     display: initial;
   }
+  &-browser {
+    position: absolute;
+    top: 260px;
+    right: 300px;
+    color: white;
+    z-index: 1;
+
+    p {
+      font-size: 80px;
+      line-height: 120px;
+
+      span {
+        color: #FFE88B;
+      }
+      &:first-child {
+        font-size: 100px;
+        line-height: 140px;
+      }
+    }
+    &__icon {
+      position: relative;
+      display: inline-block;
+
+      &::after {
+        position: absolute;
+        content: '';
+        top: 50%;
+        right: -140px;
+        width: 120px;
+        height: 120px;
+        background: url('@/assets/images/icon_more@2x.png') no-repeat center / contain;
+        transform: translateY(-50%);
+      }
+      &::before {
+        position: absolute;
+        content: '';
+        top: -340px;
+        right: -540px;
+        width: 375px;
+        height: 400px;
+        background: url('@/assets/images/line@2x.png') no-repeat center / contain;
+      }
+    }
+  }
   > .inner-wrapper {
     display: flex;
     flex-direction: column;