Merge branch 'startLogin'

src/components/timerMeter/components/positive.tsx

@@ -184,12 +184,12 @@ export default defineComponent({
             重置
           </NButton>
           {isPlaying.value ? <NButton round type="primary" icon-placement="right" onClick={() => suspendNum()} v-slots={{
-            default: () => <>暂停</>,
+            default: () => <p class={styles.playText}>暂停</p>,
             icon: () => <NImage previewDisabled class={styles.palyIcon} src={suspend}></NImage>
           }}>
 
           </NButton> : <NButton round type="primary" icon-placement="right" onClick={() => startTimer()} v-slots={{
-            default: () => <>开始</>,
+            default: () => <p class={styles.playText}>开始</p>,
             icon: () => <NImage previewDisabled class={styles.palyIcon} src={playIcon}></NImage>
           }}>
           </NButton>}

src/components/timerMeter/index.module.less

@@ -69,7 +69,7 @@
     .dotTop {
 
       width: 10px;
-      height: 64px;
+      height: 74px;
     }
 
     .timerItemTopCore {
@@ -91,7 +91,7 @@
 }
 
 .nowTimerWrap {
-  margin: 14px 0 26px;
+  margin: 35px 0 26px;
   width: 174px;
   line-height: 45px;
   height: 45px;
@@ -121,6 +121,10 @@
   height: 14px;
 }
 
+.playText {
+  margin-left: 10px;
+}
+
 .countInput {
   // width: 66px;
   // height: 33px;
@@ -155,12 +159,12 @@
 .dotBtm {
   width: 100%;
 
-  height: 20px;
+  height: 33px;
 }
 
 .chioseWrap {
-  margin: 14px 0 26px;
-  width: 174px;
+  margin: 35px 0 26px;
+  // width: 174px;
   line-height: 45px;
   height: 45px;
   background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
@@ -206,8 +210,11 @@
 }
 
 .numberWrap {
-  border-radius: 10px;
+  border-radius: 16px;
   overflow: hidden;
   background-color: #fff;
   box-shadow: 4px 4px 0px 0px #A2CAEE;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
 }

src/components/timerMeter/modals/flipper.vue

@@ -86,19 +86,25 @@ export default {
 .M-Flipper {
   display: inline-block;
   position: relative;
-  width: 90px;
-  height: 178px;
-  line-height: 178px;
+  width: 75px;
+  height: 150px;
+  line-height: 150px;
   /* border: solid 1px #000; */
-
   background: #fff;
   font-size: 128px;
   color: #131415;
-
   text-align: center;
   font-family: 'DINA';
-}
 
+}
+.M-Flipper:nth-of-type(2n){
+  text-align: left;
+  margin-left: 5px;
+}
+.M-Flipper:nth-of-type(odd){
+  text-align: right;
+  margin-right: 5px;
+}
 /* @media screen and (min-width: 375px) and (max-width: 768px){
    .M-Flipper {
        width: 35px;
@@ -153,7 +159,7 @@ export default {
 .M-Flipper.down .back:after {
   z-index: 2;
   transform-origin: 50% 0%;
-  transform: perspective(160px) rotateX(180deg);
+  transform: perspective(300px) rotateX(180deg);
 }
 
 .M-Flipper.down .front:after,
@@ -180,7 +186,7 @@ export default {
 .M-Flipper.up .back:before {
   z-index: 2;
   transform-origin: 50% 100%;
-  transform: perspective(160px) rotateX(-180deg);
+  transform: perspective(300px) rotateX(-180deg);
 }
 
 .M-Flipper.up .front:before,
@@ -201,41 +207,41 @@ export default {
 
 @keyframes frontFlipDown {
   0% {
-    transform: perspective(160px) rotateX(0deg);
+    transform: perspective(300px) rotateX(0deg);
   }
 
   100% {
-    transform: perspective(160px) rotateX(-180deg);
+    transform: perspective(300px) rotateX(-180deg);
   }
 }
 
 @keyframes backFlipDown {
   0% {
-    transform: perspective(160px) rotateX(180deg);
+    transform: perspective(300px) rotateX(180deg);
   }
 
   100% {
-    transform: perspective(160px) rotateX(0deg);
+    transform: perspective(300px) rotateX(0deg);
   }
 }
 
 @keyframes frontFlipUp {
   0% {
-    transform: perspective(160px) rotateX(0deg);
+    transform: perspective(300px) rotateX(0deg);
   }
 
   100% {
-    transform: perspective(160px) rotateX(180deg);
+    transform: perspective(300px) rotateX(180deg);
   }
 }
 
 @keyframes backFlipUp {
   0% {
-    transform: perspective(160px) rotateX(-180deg);
+    transform: perspective(300px) rotateX(-180deg);
   }
 
   100% {
-    transform: perspective(160px) rotateX(0deg);
+    transform: perspective(300px) rotateX(0deg);
   }
 }
 

src/views/login/index.module.less

@@ -243,4 +243,80 @@
   .submitAppBtn {
     width: 140px;
   }
+}
+
+.downMove {
+  width: 413px;
+  // height: 309px;
+  background: #FFFFFF;
+  border-radius: 16px;
+  position: relative;
+  padding: 0 30px 35px;
+
+  .downMoveBg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 413px;
+    height: 101px;
+  }
+
+  .dingPng {
+    width: 162px;
+    height: 98px;
+    position: absolute;
+    left: 50%;
+    margin-left: -81px;
+    top: -49px;
+    z-index: 100;
+  }
+
+  .closeAble {
+    cursor: pointer;
+    width: 25px;
+    height: 25px;
+    position: absolute;
+    top: 18px;
+    right: 20px;
+  }
+
+  h2 {
+    margin-top: 64px;
+    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: 257px;
+    height: 45px;
+    line-height: 45px;
+    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/views/login/index.tsx

@@ -8,6 +8,9 @@ import PwdLogin from './components/pwdLogin';
 import { NTabs, NTabPane, useDialog, NModal, NButton, NSpace } from 'naive-ui';
 import styles from './index.module.less';
 import ForgotPassword from './components/forgotPassword';
+import moveTop from './images/moveTopBg.png'
+import dingPng from './images/ding.png'
+import closeAble from './images/closeAble.png'
 export default defineComponent({
   name: 'login-page',
   setup() {
@@ -15,9 +18,9 @@ export default defineComponent({
     const NavsValue = ref('pwdLogin');
     const pwdLoginRef = ref();
     const forgotPasswordRef = ref();
-    const popEvent = ref();
+    const popEvent = ref()
     const dialog = useDialog();
-    const showModalMask = ref()
+    const showModalMask = ref(false)
     const checkInstall = async (event: any) => {
       event.preventDefault();
       console.log('checkInstall', event)
@@ -47,23 +50,21 @@ export default defineComponent({
           console.log(btn)
           if(btn){
             btn.addEventListener('click', () => {
-
               console.log(popEvent.value )
               if( !popEvent.value ) {
                 return;
               }
 
               popEvent.value.prompt();
-
               popEvent.value.userChoice.then( (choiceResult:any) => {
                 if (choiceResult.outcome === 'accepted') {
                   console.log('用户已同意添加到桌面')
+                  showModalMask.value = false;
                 } else {
                   console.log('用户已取消添加到桌面')
-                  // showModalMask.value = false;
+                  showModalMask.value = false;
                 }
               })
-              showModalMask.value = false;
             })
           }
         },500)
@@ -138,9 +139,7 @@ export default defineComponent({
         </div>
         <NModal
           v-model:show={showModalMask.value}
-          class={['modalTitle background', styles.showModalTone]}
-          preset="card"
-          title={'提示'}>
+          >
           {/* <div
             onClick={() => {
               showModalTone.value = false;
@@ -150,10 +149,16 @@ export default defineComponent({
               previewDisabled
               class={styles.beatImage}></NImage>
           </div> */}
-          <div class={styles.studentRemove}>
-            <p>检测到您尚未从音乐数字课堂应用程序打开</p>
+          <div class={styles.downMove}>
+            <img src={dingPng} class={styles.dingPng} alt="" />
+            <img src={moveTop} class={styles.downMoveBg} alt="" />
+            <img src={closeAble} class={styles.closeAble} onClick={()=>{
+              showModalMask.value = false
+            }} alt="" />
+            <h2>温馨提示</h2>
+            <p>检测到您尚未安装“音乐数字课堂”应用程序，为了更好的使用体验，是否立即下载？</p>
             {/* <NButton>确定</NButton> */}
-            <NSpace style={{ padding: '20px 0 0 0' }} justify="center">
+            <NSpace style={{ padding: '25px 0 0 0' }} justify="center">
           <NButton
           {...{id
           :'submitBtn'}}
@@ -162,7 +167,7 @@ export default defineComponent({
             type="primary"
 
             >
-            确定
+            立即下载
           </NButton>
         </NSpace>
           </div>