Merge branch 'startLogin'

src/components/RouterError/index.module.less

@@ -0,0 +1,74 @@
+.downMove {
+  width: 400px;
+  // height: 309px;
+  background: #FFFFFF;
+  border-radius: 16px;
+  position: relative;
+  padding: 0 30px 35px;
+
+  .downMoveBg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 400px;
+    height: 104px;
+  }
+
+  .dingPng {
+    width: 160px;
+    height: 160px;
+    position: absolute;
+    left: 50%;
+    margin-left: -80px;
+    top: -80px;
+    z-index: 100;
+  }
+
+  .closeAble {
+    cursor: pointer;
+    width: 25px;
+    height: 25px;
+    position: absolute;
+    top: 18px;
+    right: 20px;
+  }
+
+  h2 {
+    margin-top: 96px;
+    height: 33px;
+    font-size: 24px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #131415;
+    line-height: 33px;
+    text-align: center;
+    margin-bottom: 15px;
+  }
+
+  p {
+    font-size: 18px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #777777;
+    line-height: 30px;
+  }
+
+  .submitAppBtn {
+    width: 256px;
+    height: 47px;
+    background: linear-gradient(305deg, #40C8FF 0%, #3192FF 100%);
+    border-radius: 24px;
+    border: none;
+
+    :global {
+      .n-button__border {
+        display: none;
+      }
+
+      .n-button__state-border {
+        display: none;
+      }
+    }
+
+  }
+}

src/components/RouterError/index.tsx

@@ -1,7 +1,9 @@
-import { useDialog } from 'naive-ui';
-import { defineComponent } from 'vue';
+import { NButton, NModal, NSpace, useDialog } from 'naive-ui';
+import { defineComponent, ref } from 'vue';
 import { useRouter } from 'vue-router';
-
+import downBg from './images/downBg.png'
+import rocketIcon from './images/rocketIcon.png'
+import styles from './index.module.less'
 export default defineComponent({
   name: 'router-error',
   setup() {
@@ -9,7 +11,7 @@ export default defineComponent({
     const dialog = useDialog();
     let isOpen = false;
 
-
+    const showModalMask = ref(false)
 
 
     router.onError((error, to, form) => {
@@ -27,7 +29,7 @@ export default defineComponent({
           negativeText: '取消',
           onPositiveClick: () => {
             router.push(to)
-            window.location.reload();
+            showModalMask.value = true
           }
         });
       }
@@ -50,7 +52,7 @@ export default defineComponent({
               positiveText: '确定',
               negativeText: '取消',
               onPositiveClick: () => {
-                window.location.reload();
+                showModalMask.value = true
               }
             });
           }
@@ -64,12 +66,38 @@ export default defineComponent({
             return;
           }
           refreshing = true;
-          window.location.reload();
+
         });
       }
     }
 
     checkNewVersion()
-    return () => <div></div>;
+
+    const reloadPage = ()=>{
+      window.location.reload();
+    }
+    return () => <div>
+              <NModal v-model:show={showModalMask.value} mask-closable={false}>
+          <div class={styles.downMove}>
+            <img src={rocketIcon} class={styles.dingPng} alt="" />
+            <img src={downBg} class={styles.downMoveBg} alt="" />
+            <h2>发现新版本</h2>
+            <p>
+            为提升您的用户体验，请刷新页面后使用
+            </p>
+            {/* <NButton>确定</NButton> */}
+            <NSpace style={{ padding: '25px 0 0 0' }} justify="center">
+              <NButton
+
+                class={styles.submitAppBtn}
+                round
+                type="primary" onClick={reloadPage}>
+                立即刷新
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
+
+    </div>;
   }
 });

src/views/login/index.tsx

@@ -189,15 +189,6 @@ export default defineComponent({
           </div>
         </div>
         <NModal v-model:show={showModalMask.value}>
-          {/* <div
-            onClick={() => {
-              showModalTone.value = false;
-            }}>
-            <NImage
-              src={toneImage}
-              previewDisabled
-              class={styles.beatImage}></NImage>
-          </div> */}
           <div class={styles.downMove}>
             <img src={dingPng} class={styles.dingPng} alt="" />
             <img src={moveTop} class={styles.downMoveBg} alt="" />