更新弹窗显示

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.jattu9jipc"
+    "revision": "0.8dehmh0kiv8"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

public/version.json

@@ -1 +1 @@
-{"version":1708685225009}
+{"version":1709113599649}

src/components/TheAuth/index.module.less

@@ -36,7 +36,7 @@
 
 .steps {
   margin: 14px 27px 0;
-  padding-top: 34px;
+  padding-top: 12px;
 
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 88%, #CDF0FF 100%);
   border-radius: 23px;
@@ -76,7 +76,7 @@
 
   .stepContent {
     .txt {
-      font-size: max(15px, 12Px);
+      font-size: max(22px, 14Px);
       font-family: PingFangSC, PingFang SC;
       font-weight: 600;
       color: #000000;
@@ -92,6 +92,28 @@
     }
   }
 
+  .downloadCert {
+    margin-top: 14px;
+    width: 244px;
+    height: 58px;
+    background: url('./images/downlowdCert.png') no-repeat center;
+    background-size: contain;
+    border-radius: 50px;
+    cursor: pointer;
+  }
+
+  .imgs2 {
+    display: flex;
+    align-items: flex-start;
+    padding-top: 20px;
+
+    .m2,
+    .w2 {
+      margin-left: 38px;
+    }
+
+  }
+
   img {
     border-radius: 8px;
   }
@@ -99,27 +121,39 @@
   .w1 {
     width: 90px;
     height: 98px;
-    margin: 8px 0 12px;
+  }
+
+  .w2 {
+    width: 400px;
+    height: 412px;
+  }
+
+  .w3,
+  .w4,
+  .w5,
+  .w8 {
+    margin-top: 20px;
+    width: 500px;
+    height: 515px;
   }
 
   .w6 {
-    width: 196px;
-    height: 207px;
+    margin-top: 20px;
+    width: 405px;
+    height: 452px;
   }
 
   .w7 {
     margin-top: 8px;
-    width: 100%;
+    width: 96%;
   }
 
   .m1 {
     width: 113px;
     height: 98px;
-    margin: 8px 0 0;
   }
 
   .m2 {
-    margin-top: 8px;
     width: 333px
   }
 
@@ -156,22 +190,47 @@
   align-items: center;
   justify-content: center;
 
-  :global {
-    .n-button {
-      height: 45px !important;
-      width: 275px !important;
-      --n-border: none !important;
-      --n-border-hover: none !important;
-      --n-border-pressed: none !important;
-      --n-border-focus: none !important;
-      background: linear-gradient(305deg, #15BBFF 0%, #1784FF 100%);
-      border-radius: 22px;
-      font-size: max(18px, 15Px);
-      font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
-      font-weight: bold;
-      color: #FFFFFF;
-      line-height: 22px;
-      letter-spacing: 1px;
+  // :global {
+  //   .n-button {
+  //     height: 45px !important;
+  //     width: 275px !important;
+  //     --n-border: none !important;
+  //     --n-border-hover: none !important;
+  //     --n-border-pressed: none !important;
+  //     --n-border-focus: none !important;
+  //     background: linear-gradient(305deg, #15BBFF 0%, #1784FF 100%);
+  //     border-radius: 22px;
+  //     font-size: max(18px, 15Px);
+  //     font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
+  //     font-weight: bold;
+  //     color: #FFFFFF;
+  //     line-height: 22px;
+  //     letter-spacing: 1px;
+  //   }
+  // }
+
+  .btn {
+    width: 244px;
+    height: 58px;
+    cursor: pointer;
+
+    +.btn {
+      margin-left: 16px;
     }
   }
+
+  .btnUp {
+    background: url('./images/btn-up.png') no-repeat center center;
+    background-size: contain;
+  }
+
+  .btnDown {
+    background: url('./images/btn-down.png') no-repeat center center;
+    background-size: contain;
+  }
+
+  .btnDone {
+    background: url('./images/btn-done.png') no-repeat center center;
+    background-size: contain;
+  }
 }

src/components/TheAuth/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, reactive, ref } from 'vue';
 import styles from './index.module.less';
 import { NButton, NScrollbar } from 'naive-ui';
 import w1 from './images/window/1.png';
@@ -8,6 +8,7 @@ import w4 from './images/window/4.png';
 import w5 from './images/window/5.png';
 import w6 from './images/window/6.png';
 import w7 from './images/window/7.png';
+import w8 from './images/window/8.png';
 
 import m1 from './images/mac/1.png';
 import m2 from './images/mac/2.png';
@@ -20,6 +21,11 @@ export default defineComponent({
   name: 'the-auth',
   emits: ['close'],
   setup(props, { emit }) {
+    const scrollbarRef = ref();
+    const state = reactive({
+      step: 1,
+      maxStep: browser().ios ? 4 : 7
+    });
     // 下载证书
     const onDownload = () => {
       // const agent = navigator.userAgent.toLowerCase();
@@ -27,7 +33,7 @@ export default defineComponent({
         return /macintosh|mac os x/i.test(navigator.userAgent);
       })();
       if (isMac) {
-        window.open('https://oss.dayaedu.com/https-ssl/安全证书.cer');
+        window.open('https://oss.dayaedu.com/https-ssl/安全证书.p12');
       } else {
         window.open('https://oss.dayaedu.com/https-ssl/安全证书.pfx');
       }
@@ -36,136 +42,270 @@ export default defineComponent({
     return () => (
       <div class={styles.theAuth}>
         <div class={styles.theTitle}></div>
-        <i class={styles.iconClose} onClick={() => emit('close')}></i>
+        {/* <i class={styles.iconClose} onClick={() => emit('close')}></i> */}
         <div class={styles.authContent}>
           <div class={styles.steps}>
-            <NScrollbar>
-              <div class={styles.step}>
-                <div class={styles.stepNum}>01</div>
-                <div class={styles.stepContent}>
-                  <p class={styles.txt}>
-                    点击下方下载按钮，下载数据安全证书安装包
-                  </p>
-                </div>
-              </div>
+            <NScrollbar ref={scrollbarRef}>
               {browser().ios ? (
                 <>
-                  <div class={styles.step}>
-                    <div class={styles.stepNum}>02</div>
-                    <div class={styles.stepContent}>
-                      <p class={styles.txt}>
-                        双击<span>《安全证书.cer》</span>
-                      </p>
-                      <div class={styles.imgs}>
-                        <img src={m1} class={styles.m1} />
+                  {state.step === 1 && (
+                    <>
+                      <div class={styles.step}>
+                        <div class={styles.stepNum}>01</div>
+                        <div class={styles.stepContent}>
+                          <p class={styles.txt}>
+                            点击下方下载按钮，下载数据安全证书安装包
+                          </p>
+
+                          <div>
+                            <div
+                              class={styles.downloadCert}
+                              onClick={onDownload}></div>
+                          </div>
+                        </div>
                       </div>
-                      <p class={styles.txt}>
-                        输入钥匙串密码，点击<span>【修改钥匙串】</span>
-                        （若无此步骤则忽略）
-                      </p>
-                      <div class={styles.imgs}>
-                        <img src={m2} class={styles.m2} />
+
+                      <div class={styles.step}>
+                        <div class={styles.stepNum}>02</div>
+                        <div class={styles.stepContent}>
+                          <p class={styles.txt}>
+                            双击<span>《安全证书.cer》</span>
+                            ，输入钥匙串密码，点击
+                            <span>【修改钥匙串】</span>
+                            （若无此步骤则忽略）
+                          </p>
+                          <div class={[styles.imgs, styles.imgs2]}>
+                            <img src={m1} class={styles.m1} />
+                            <img src={m2} class={styles.m2} />
+                          </div>
+                        </div>
+                      </div>
+                    </>
+                  )}
+
+                  {state.step === 2 && (
+                    <div class={styles.step}>
+                      <div class={styles.stepNum}>03</div>
+                      <div class={styles.stepContent}>
+                        <p class={styles.txt}>
+                          <span class={styles.red}>重启浏览器</span>
+                          （在电脑屏幕左上方选择当前浏览器并点击
+                          <span>【退出】</span>），再重新打开音乐数字课堂网址
+                        </p>
+                        <div class={styles.imgs}>
+                          <img src={m3} class={styles.m3} />
+                        </div>
                       </div>
                     </div>
-                  </div>
+                  )}
 
-                  <div class={styles.step}>
-                    <div class={styles.stepNum}>03</div>
-                    <div class={styles.stepContent}>
-                      <p class={styles.txt}>
-                        <span class={styles.red}>重启浏览器</span>
-                        （在电脑屏幕左上方选择当前浏览器并点击
-                        <span>【退出】</span>），再重新打开音乐数字课堂网址
-                      </p>
-                      <div class={styles.imgs}>
-                        <img src={m3} class={styles.m3} />
+                  {state.step === 3 && (
+                    <div class={styles.step}>
+                      <div class={styles.stepNum}>04</div>
+                      <div class={styles.stepContent}>
+                        <p class={styles.txt}>
+                          在【选择证书】弹窗中点击<span>【确定】</span>
+                        </p>
+                        <div class={styles.imgs}>
+                          <img src={m4} class={styles.m4} />
+                        </div>
                       </div>
                     </div>
-                  </div>
+                  )}
 
-                  <div class={styles.step}>
-                    <div class={styles.stepNum}>04</div>
-                    <div class={styles.stepContent}>
-                      <p class={styles.txt}>
-                        在【选择证书】弹窗中点击<span>【确定】</span>
-                        按钮（若浏览器没有弹出该弹窗请
-                        <span class={styles.red}>重启电脑</span>
-                        后重试）
-                      </p>
-                      <div class={styles.imgs}>
-                        <img src={m4} class={styles.m4} />
+                  {state.step === 4 && (
+                    <>
+                      <div class={styles.step}>
+                        <div class={styles.stepNum}>05</div>
+                        <div class={styles.stepContent}>
+                          <p class={styles.txt}>
+                            输入电脑的用户名和密码（若无此步骤则忽略）
+                          </p>
+                          <div class={styles.imgs}>
+                            <img src={m5} class={styles.m5} />
+                          </div>
+                        </div>
                       </div>
-                      <p class={styles.txt}>
-                        输入电脑的用户名和密码（若无此步骤则忽略）
-                      </p>
-                      <div class={styles.imgs}>
-                        <img src={m5} class={styles.m5} />
+                      <div class={styles.step}>
+                        <div class={styles.stepNum}>06</div>
+                        <div class={styles.stepContent}>
+                          <p class={styles.txt}>
+                            证书安装完成，开始使用音乐数字课堂吧。
+                          </p>
+                        </div>
                       </div>
-                    </div>
-                  </div>
+                    </>
+                  )}
                 </>
               ) : (
                 <>
-                  <div class={styles.step}>
-                    <div class={styles.stepNum}>02</div>
-                    <div class={styles.stepContent}>
-                      <p class={styles.txt}>
-                        双击<span>《安全证书.pfx》</span>，一直点击
-                        <span>【下一步】</span>，直至<span>【完成】</span>
-                      </p>
-                      <div class={styles.imgs}>
-                        <img src={w1} class={styles.w1} />
+                  {state.step === 1 && (
+                    <>
+                      <div class={styles.step}>
+                        <div class={styles.stepNum}>01</div>
+                        <div class={styles.stepContent}>
+                          <p class={styles.txt}>
+                            点击下方下载按钮，下载数据安全证书安装包
+                          </p>
+                          <div>
+                            <div
+                              class={styles.downloadCert}
+                              onClick={onDownload}></div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class={styles.step}>
+                        <div class={styles.stepNum}>02</div>
+                        <div class={styles.stepContent}>
+                          <p class={styles.txt}>
+                            双击<span>《安全证书.pfx》</span>，一直点击
+                            <span>【下一步】</span>，直至<span>【完成】</span>
+                          </p>
+                          <div class={[styles.imgs, styles.imgs2]}>
+                            <img src={w1} class={styles.w1} />
+                            <img src={w2} class={styles.w2} />
+                          </div>
+                        </div>
+                      </div>
+                    </>
+                  )}
 
-                        <div class={styles.moreImg}>
-                          <img src={w2} />
-                          <img src={w3} />
-                          <img src={w4} />
-                          <img src={w5} />
+                  {state.step === 2 && (
+                    <div class={styles.step}>
+                      <div class={styles.stepNum}>03</div>
+                      <div class={styles.stepContent}>
+                        <p class={styles.txt}>
+                          点击<span>【下一步】</span>
+                        </p>
+                        <div class={styles.imgs}>
+                          <img src={w3} class={styles.w3} />
                         </div>
-                        <img src={w6} class={styles.w6} />
                       </div>
                     </div>
-                  </div>
+                  )}
 
-                  <div class={styles.step}>
-                    <div class={styles.stepNum}>03</div>
-                    <div class={styles.stepContent}>
-                      <p class={styles.txt}>
-                        <span class={styles.red}>重启浏览器</span>
-                        ，打开音乐数字课堂网址
-                      </p>
+                  {state.step === 3 && (
+                    <div class={styles.step}>
+                      <div class={styles.stepNum}>04</div>
+                      <div class={styles.stepContent}>
+                        <p class={styles.txt}>
+                          点击<span>【下一步】</span>
+                        </p>
+                        <div class={styles.imgs}>
+                          <img src={w4} class={styles.w4} />
+                        </div>
+                      </div>
                     </div>
-                  </div>
+                  )}
+                  {state.step === 4 && (
+                    <div class={styles.step}>
+                      <div class={styles.stepNum}>05</div>
+                      <div class={styles.stepContent}>
+                        <p class={styles.txt}>
+                          点击<span>【完成】</span>
+                        </p>
+                        <div class={styles.imgs}>
+                          <img src={w8} class={styles.w8} />
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                  {state.step === 5 && (
+                    <div class={styles.step}>
+                      <div class={styles.stepNum}>06</div>
+                      <div class={styles.stepContent}>
+                        <p class={styles.txt}>
+                          点击<span>【完成】</span>
+                        </p>
+                        <div class={styles.imgs}>
+                          <img src={w5} class={styles.w5} />
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                  {state.step === 6 && (
+                    <div class={styles.step}>
+                      <div class={styles.stepNum}>07</div>
+                      <div class={styles.stepContent}>
+                        <p class={styles.txt}>
+                          点击<span>【确定】</span>
+                        </p>
+                        <div class={styles.imgs}>
+                          <img src={w6} class={styles.w6} />
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                  {state.step === 7 && (
+                    <>
+                      <div class={styles.step}>
+                        <div class={styles.stepNum}>08</div>
+                        <div class={styles.stepContent}>
+                          <p class={styles.txt}>
+                            <span class={styles.red}>重启浏览器</span>
+                            ，打开音乐数字课堂网址
+                          </p>
+                        </div>
+                      </div>
 
-                  <div class={styles.step}>
-                    <div class={styles.stepNum}>04</div>
+                      <div class={styles.step}>
+                        <div class={styles.stepNum}>09</div>
+                        <div class={styles.stepContent}>
+                          <p class={styles.txt}>
+                            在【选择证书】弹窗中点击<span>【确定】</span>
+                            按钮，证书安装完成，开始使用音乐数字课堂吧!
+                            {/* （若浏览器没有弹出该弹窗请
+                        <span class={styles.red}>重启电脑</span>
+                        后重试） */}
+                          </p>
+                          <img src={w7} class={styles.w7} />
+                        </div>
+                      </div>
+                    </>
+                  )}
+
+                  {/* <div class={styles.step}>
+                    <div class={styles.stepNum}>05</div>
                     <div class={styles.stepContent}>
                       <p class={styles.txt}>
-                        在【选择证书】弹窗中点击<span>【确定】</span>
-                        按钮（若浏览器没有弹出该弹窗请
-                        <span class={styles.red}>重启电脑</span>
-                        后重试）
+                        证书安装完成，开始使用音乐数字课堂吧。
                       </p>
-                      <img src={w7} class={styles.w7} />
                     </div>
-                  </div>
+                  </div> */}
                 </>
               )}
-              <div class={styles.step}>
-                <div class={styles.stepNum}>05</div>
-                <div class={styles.stepContent}>
-                  <p class={styles.txt}>
-                    证书安装完成，开始使用音乐数字课堂吧。
-                  </p>
-                </div>
-              </div>
             </NScrollbar>
           </div>
 
           <div class={styles.btnGroup}>
-            <NButton round type="primary" onClick={onDownload}>
+            {/* <NButton round type="primary" onClick={onDownload}>
               下载证书
-            </NButton>
+            </NButton> */}
+            <div
+              class={[styles.btn, styles.btnUp]}
+              style={{
+                cursor: state.step <= 1 ? 'not-allowed' : 'pointer'
+              }}
+              onClick={() => {
+                if (state.step <= 1) return;
+                state.step -= 1;
+                scrollbarRef.value.scrollTo({ top: 0, left: 0 });
+              }}></div>
+            <div
+              class={[
+                styles.btn,
+                styles.btnDown,
+                state.step === state.maxStep && styles.btnDone
+              ]}
+              onClick={() => {
+                if (state.step >= state.maxStep) {
+                  emit('close');
+                } else {
+                  state.step += 1;
+                }
+
+                scrollbarRef.value.scrollTo({ top: 0, left: 0 });
+              }}></div>
           </div>
         </div>
       </div>

src/components/layout/index.tsx

@@ -824,7 +824,10 @@ export default defineComponent({
           params={previewItem.value}
         />
 
-        <NModal v-model:show={showAuthMask.value}>
+        <NModal
+          v-model:show={showAuthMask.value}
+          closeOnEsc={false}
+          maskClosable={false}>
           <TheAuth onClose={() => (showAuthMask.value = false)} />
         </NModal>
       </div>

src/views/login/index.tsx

@@ -249,7 +249,10 @@ export default defineComponent({
           </div>
         </NModal>
 
-        <NModal v-model:show={showAuthMask.value}>
+        <NModal
+          v-model:show={showAuthMask.value}
+          closeOnEsc={false}
+          maskClosable={false}>
           <TheAuth onClose={() => (showAuthMask.value = false)} />
         </NModal>
       </div>