只可以在宽屏下浏览

src/App.vue

@@ -102,6 +102,20 @@
       }"
       @click="isShowNavBar = !isShowNavBar"
     />
+
+    <Teleport to="body">
+      <div class="screen-rotate-tip">
+        <div class="inner-wrapper">
+          <img
+            class=""
+            src="@/assets/images/tip-screen-rotate.png"
+            alt=""
+            draggable="false"
+          >
+          <span>请横屏浏览</span>
+        </div>
+      </div>
+    </Teleport>
   </div>
 </template>
 
@@ -292,6 +306,42 @@ html, body {
 // .viewer-backdrop {
 //   background-color: rgba(0, 0, 0, 90%) !important;
 // }
+
+.screen-rotate-tip {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  display: none;
+  @media (max-aspect-ratio: 1/1) {
+    display: initial;
+  }
+  >.inner-wrapper {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 126px;
+    height: 126px;
+    >img {
+      width: 100%;
+      height: 100%;
+    }
+    >span {
+      position: absolute;
+      left: 50%;
+      bottom: -8px;
+      transform: translate(-50%, 100%);
+      font-size: 16px;
+      font-family: Source Han Sans-Regular, Source Han Sans;
+      font-weight: 400;
+      color: #FFFFFF;
+      white-space: pre;
+    }
+  }
+}
 </style>
 <style scoped lang="less">
 .app-view {
@@ -327,7 +377,7 @@ html, body {
     justify-content: center;
     align-items: center;
     transition: all 0.5s;
-    backdrop-filter: blur(5px);
+    // backdrop-filter: blur(10px);
     background-image: url(@/assets/images/bg-bottom-bar.png);
     background-size: cover;
     background-repeat: no-repeat;

src/components/TreasureShare.vue

@@ -123,7 +123,7 @@ export default {
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.5);
-  backdrop-filter: blur(5px);
+  backdrop-filter: blur(10px);
   >article {
     position: absolute;
     left: 50%;

src/views/General.vue

@@ -474,7 +474,7 @@ export default {
     width: 653px;
     height: calc(100% - 74px - 50px);
     max-height: 740px;
-    backdrop-filter: blur(5px);
+    backdrop-filter: blur(10px);
     background-image: url(@/assets/images/general-article-bg.png);
     background-size: 100% auto;
     background-repeat: no-repeat;

src/views/History.vue

@@ -259,7 +259,7 @@ export default {
         font-family: Source Han Sans CN-Regular, Source Han Sans CN;
         font-weight: 400;
         color: rgba(255, 255, 255, 0.5);
-        // backdrop-filter: blur(5px); // 会导致产生层叠上下文！！！使得圆点无法在弧线上层！！！
+        // backdrop-filter: blur(10px); // 会导致产生层叠上下文！！！使得圆点无法在弧线上层！！！
         padding-right: 14px;
         cursor: pointer;
         position: relative;