提交

1

postcss.config.js

@@ -10,7 +10,7 @@ module.exports = {
       fontViewportUnit: 'rem', // 字体使用的视口单位
       selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
       minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
-      mediaQuery: false, // 媒体查询里的单位是否需要转换单位
+      mediaQuery: true, // 媒体查询里的单位是否需要转换单位
       replace: true, //  是否直接更换属性值，而不添加备用属性
       exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
       include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换

src/components/layout/modals/suggestion-option.module.less

@@ -1,343 +1,352 @@
-.updateBtnGroup {
-  padding: 0;
-  justify-content: center !important;
-  position: relative;
-
-  :global {
-    .n-button {
-      height: 48px !important;
-      min-width: 156px;
-    }
-  }
+.pxToVW (@px, @attr: width) {
+  @vw: (@px / 1920) * 100;
+  @{attr}:~"@{vw}vw";
 }
 
-.suggestSelect {
-  :global {
-    .n-base-selection__border {
-      border: 1px solid #AADCFF;
-    }
-
-
-  }
-}
 
 
-@keyframes forDown {
-  0% {
-    top: 0
-  }
+.suggestOption {
+  .updateBtnGroup {
+    padding: 0;
+    justify-content: center !important;
+    position: relative;
 
-  100% {
-    top: 450px;
+    :global {
+      .n-button {
+        height: 48px !important;
+        min-width: 156px;
+      }
+    }
   }
-}
-
 
-@keyframes forUp {
-  0% {
-    top: 0
-  }
+  .suggestSelect {
+    :global {
+      .n-base-selection__border {
+        border: 1px solid #AADCFF;
+      }
 
-  100% {
-    top: -120px;
-  }
-}
 
-@keyframes endRoute {
-  0% {
-    // top: -150px;
-    // left: 200px;
-    // transform-origin: 291px 438px; rotate(180deg)
-    // transform: scale(1);
-    opacity: 1;
+    }
   }
 
-  // 25% {
-  //   top: -180px;
-  //   left: 300px;
-  //   transform-origin: 291px 438px;
-  //   transform: rotate(-360deg) scale(.8);
-  // }
-
-  // 50% {
-  //   top: -210px;
-  //   left: 400px;
-  //   transform-origin: 291px 438px;
-  //   transform: rotate(-450deg) scale(.6);
-  // }
-
-  100% {
-    // top: -240px;
-    // left: 500px;
-    // transform-origin: 291px 438px;  rotate(360deg)
-    opacity: 0;
-    transform: scale(.4);
-  }
-}
 
-@keyframes reversal {
-  25% {
-    background: url(../images/inBack2.png) no-repeat;
-    background-size: 754px 672px;
+  @keyframes forDown {
+    0% {
+      top: 0
+    }
 
+    100% {
+      top: 450px
+    }
   }
 
-  50% {
-    background: url(../images/inBack3.png) no-repeat;
-    background-size: 754px 672px;
-    z-index: 0;
-  }
 
-  75% {
-    background: url(../images/inBack4.png) no-repeat;
-    background-size: 754px 672px;
-    // background-color: #005FA0;
-    z-index: 300;
-  }
+  @keyframes forUp {
+    0% {
+      top: 0
+    }
 
-  100% {
-    background: url(../images/inBack5.png) no-repeat;
-    background-size: 754px 672px;
-    z-index: 300;
+    100% {
+      top: -120px
+    }
   }
 
-}
+  @keyframes endRoute {
+    0% {
+      // top: -150px;
+      // left: 200px;
+      // transform-origin: 291px 438px; rotate(180deg)
+      // transform: scale(1);
+      opacity: 1;
+    }
 
-@keyframes stamp {
-  0% {
-    opacity: 1;
-    transform: scale(1.5);
+    // 25% {
+    //   top: -180px;
+    //   left: 300px;
+    //   transform-origin: 291px 438px;
+    //   transform: rotate(-360deg) scale(.8);
+    // }
+
+    // 50% {
+    //   top: -210px;
+    //   left: 400px;
+    //   transform-origin: 291px 438px;
+    //   transform: rotate(-450deg) scale(.6);
+    // }
+
+    100% {
+      // top: -240px;
+      // left: 500px;
+      // transform-origin: 291px 438px;  rotate(360deg)
+      opacity: 0;
+      transform: scale(.4);
+    }
   }
 
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
+  @keyframes reversal {
+    25% {
+      background: url(../images/inBack2.png) no-repeat;
+      background-size: 754px 672px;
 
-.inBack {
-  width: 754px;
-  height: 672px;
-  position: absolute;
-  bottom: 0;
-  background: url(../images/inBack.png) no-repeat;
-  background-size: 754px 672px;
-  z-index: 1;
+    }
 
-}
+    50% {
+      background: url(../images/inBack3.png) no-repeat;
+      background-size: 754px 672px;
+      z-index: 0;
+    }
 
-.inBack.isAni {
-  animation: reversal .3s 1s forwards;
-}
+    75% {
+      background: url(../images/inBack4.png) no-repeat;
+      background-size: 754px 672px;
+      // background-color: #005FA0;
+      z-index: 300;
+    }
 
-.inBackBottom {
+    100% {
+      background: url(../images/inBack5.png) no-repeat;
+      background-size: 754px 672px;
+      z-index: 300;
+    }
 
-  width: 754px;
-  left: 12px;
-  width: 730px;
-  height: 393px;
-  // background: url(../images/boxBg.png) 754px 380px;
-  position: absolute;
-  bottom: 0;
-  border-radius: 35px 25px;
-}
+  }
 
-.inFront {
-  width: 754px;
-  height: 262px;
-  position: absolute;
-  bottom: -1px;
-  // left: 12px;
-  z-index: 200;
+  @keyframes stamp {
+    0% {
+      opacity: 1;
+      transform: scale(1.5);
+    }
 
-}
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
 
-.submitBtn {
-  width: 272px;
-  height: 54px;
-  position: absolute;
-  z-index: 201;
-  bottom: 111px;
-  left: 50%;
-  margin-left: -136px;
-  cursor: pointer;
-  z-index: 400;
-}
+  .inBack {
+    width: 754px;
+    height: 672px;
+    position: absolute;
+    bottom: 0;
+    background: url(../images/inBack.png) no-repeat;
+    background-size: 754px 672px;
+    z-index: 1;
 
+  }
 
-.updatePassword.isAni {
-  animation: forUp linear .3s forwards, endRoute linear .3s 2.3s forwards;
-}
+  .inBack.isAni {
+    animation: reversal .3s 1s forwards;
+  }
 
-.updatePassword {
-  // padding: 0 12px;
+  .inBackBottom {
 
-  background-color: transparent;
-  margin: 0 auto 0;
-  position: relative;
-  overflow: hidden;
-  top: 0;
+    width: 754px;
+    left: 12px;
+    width: 730px;
+    height: 393px;
+    // background: url(../images/boxBg.png) 754px 380px;
+    position: absolute;
+    bottom: 0;
+    border-radius: 35px 25px;
+  }
 
+  .inFront {
+    width: 754px;
+    height: 262px;
+    position: absolute;
+    bottom: -1px;
+    // left: 12px;
+    z-index: 200;
 
-  .formWrap.isAni {
-    animation: forDown linear 1s forwards;
   }
 
-  .sealing {
+  .submitBtn {
+    width: 272px;
+    height: 54px;
     position: absolute;
-    bottom: 58px;
-    z-index: 300;
-    width: 173px;
-    height: 175px;
+    z-index: 201;
+    bottom: 111px;
     left: 50%;
-    margin-left: -87px;
-    opacity: 0;
+    margin-left: -136px;
+    cursor: pointer;
+    z-index: 400;
   }
 
-  .sealing.isAni {
-    animation: stamp linear .3s 1.5s forwards;
+
+  .updatePassword.isAni {
+    animation: forUp linear .3s forwards, endRoute linear .3s 2.3s forwards;
   }
 
-  // padding: 40px;
-  .formWrap {
-    top: 0;
-    background-color: #fff;
-    margin: 0 27px 0;
-    width: 700px;
-    height: 836px;
-    border-radius: 20px;
-    padding: 15px 15px 5px;
+  .updatePassword {
+    // padding: 0 12px;
+
+    background-color: transparent;
+    margin: 0 auto 0;
     position: relative;
-    z-index: 100;
+    overflow: hidden;
+    top: 0;
 
 
-    .formTitle {
-      text-align: center;
-      margin-top: 31px;
+    .formWrap.isAni {
+      animation: forDown linear 1s forwards;
     }
 
-    .bgLine {
+    .sealing {
       position: absolute;
-      width: 670px;
-      height: 779px;
-      left: 15px;
-      top: 15px;
-    }
-
-    h2 {
-      font-size: 28px;
+      bottom: 58px;
+      z-index: 300;
+      width: 173px;
+      height: 175px;
+      left: 50%;
+      margin-left: -87px;
+      opacity: 0;
     }
 
-    .formWrapInfo {
-      padding: 24px 19px 0;
+    .sealing.isAni {
+      animation: stamp linear .3s 1.5s forwards;
     }
 
-    .closeBtn {
-      width: 60px;
-      height: 60px;
-      position: absolute;
-      right: -1px;
+    // padding: 40px;
+    .formWrap {
       top: 0;
+      background-color: #fff;
+      margin: 0 27px 0;
+      width: 700px;
+      height: 836px;
+      border-radius: 20px;
+      padding: 15px 15px 5px;
+      position: relative;
       z-index: 100;
-      cursor: pointer;
-    }
-  }
-}
-
-
 
-.countInput {
-  border-radius: 8px;
-  min-height: 265px;
 
-  :global {
-    .n-input__textarea-el {
-      line-height: 51px !important;
-      font-size: 16px;
-      font-weight: 400;
-      color: #131415;
-      background: url('../images/textLIne.png') repeat;
-      background-size: 632px 51px;
+      .formTitle {
+        text-align: center;
+        margin-top: 31px;
+      }
+
+      .bgLine {
+        position: absolute;
+        width: 670px;
+        height: 779px;
+        left: 15px;
+        top: 15px;
+      }
+
+      h2 {
+        font-size: 28px;
+      }
+
+      .formWrapInfo {
+        padding: 24px 19px 0;
+      }
+
+      .closeBtn {
+        width: 60px;
+        height: 60px;
+        position: absolute;
+        right: -1px;
+        top: 0;
+        z-index: 100;
+        cursor: pointer;
+      }
     }
+  }
 
-    .n-input__placeholder {
-      margin-top: 13px !important;
-    }
 
-    .n-input-wrapper {
-      padding: 0 !important;
-    }
 
-    .n-input-word-count {
-      bottom: -12px !important;
-      font-size: 14px;
-      font-weight: 400;
-      color: #AAAAAA;
-      line-height: 20px;
+  .countInput {
+    border-radius: 8px;
+    min-height: 265px;
+
+    :global {
+      .n-input__textarea-el {
+        line-height: 51px !important;
+        font-size: 16px;
+        font-weight: 400;
+        color: #131415;
+        background: url('../images/textLIne.png') repeat;
+        background-size: 632px 51px;
+      }
+
+      .n-input__placeholder {
+        margin-top: 13px !important;
+      }
+
+      .n-input-wrapper {
+        padding: 0 !important;
+      }
+
+      .n-input-word-count {
+        bottom: -12px !important;
+        font-size: 14px;
+        font-weight: 400;
+        color: #AAAAAA;
+        line-height: 20px;
+      }
     }
-  }
-
 
 
-}
 
-.addInput {
-  font-size: 16px;
-  font-weight: 400;
-  color: #777777;
-  line-height: 22px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  img {
-    width: 35px;
-    height: 35px;
-    margin-bottom: 5px;
   }
-}
 
-:global {
-  .n-upload-trigger.n-upload-trigger--image-card {
-    width: 110px;
-    height: 110px;
-    background: #FDFDFD;
-    border-radius: 8px;
+  .addInput {
+    font-size: 16px;
+    font-weight: 400;
+    color: #777777;
+    line-height: 22px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    img {
+      width: 35px;
+      height: 35px;
+      margin-bottom: 5px;
+    }
   }
 
-  .n-upload-file-list .n-upload-file.n-upload-file--image-card-type {
-    width: 110px;
-    height: 110px;
-    background: #FDFDFD;
-    border-radius: 8px;
+  :global {
+    .n-upload-trigger.n-upload-trigger--image-card {
+      width: 110px;
+      height: 110px;
+      background: #FDFDFD;
+      border-radius: 8px;
+    }
 
-  }
+    .n-upload-file-list .n-upload-file.n-upload-file--image-card-type {
+      width: 110px;
+      height: 110px;
+      background: #FDFDFD;
+      border-radius: 8px;
+
+    }
 
 
-  .n-upload-file-list.n-upload-file-list--grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, 110px);
-    grid-gap: 20px;
-    margin-top: 0;
+    .n-upload-file-list.n-upload-file-list--grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, 110px);
+      grid-gap: 20px;
+      margin-top: 0;
+    }
   }
-}
 
-.messageWrap {
-  // display: flex;
-  // flex-direction: row;
-  align-items: center;
-  position: absolute;
-  bottom: 35px;
-  z-index: 202;
-  width: 100%;
-  text-align: center;
-
-  p {
-    height: 25px;
-    font-size: 18px;
-    font-weight: 400;
-    color: #005FA0;
-    line-height: 25px;
-    // margin-right: 40px;
+  .messageWrap {
+    // display: flex;
+    // flex-direction: row;
+    align-items: center;
+    position: absolute;
+    bottom: 35px;
+    z-index: 202;
+    width: 100%;
+    text-align: center;
+
+    p {
+      height: 25px;
+      font-size: 18px;
+      font-weight: 400;
+      color: #005FA0;
+      line-height: 25px;
+      // margin-right: 40px;
+    }
   }
 }

src/components/layout/modals/suggestion-option.tsx

@@ -188,6 +188,7 @@ export default defineComponent({
       getPhoneInfo();
     });
     return () => (
+      <div class={styles.suggestOption}>
       <div class={[styles.updatePassword,isubmit.value?styles.isAni:'']}>
         <div class={[styles.formWrap,isubmit.value?styles.isAni:'']}>
           <NImage
@@ -317,6 +318,7 @@ export default defineComponent({
         </>:null}
 
       </div>
+      </div>
     );
   }
 });