准备翻页

1

src/components/layout/layoutTop.tsx

@@ -237,7 +237,7 @@ export default defineComponent({
 
           <NModal
             class={['modalTitle', 'background',styles.suggestWrap]}
-            style={{ width: '730px' }}
+            style={{ width: '754px' }}
             v-model:show={showSuggestionViseble.value}
             preset="card"
             showIcon={false}

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

@@ -35,20 +35,74 @@
   }
 }
 
+
+@keyframes forDown {
+  0% {
+    top: 0
+  }
+
+  100% {
+    top: 450px;
+  }
+}
+
+
+@keyframes forUp {
+  0% {
+    top: 0
+  }
+
+  100% {
+    top: -120px;
+  }
+}
+
+@keyframes reversal {
+  25% {
+    background: url(../images/inBack2.png) no-repeat;
+    background-size: 754px 672px;
+    z-index: 100;
+  }
+
+  50% {
+    background: url(../images/inBack3.png) no-repeat;
+    background-size: 754px 672px;
+    z-index: 100;
+  }
+
+  75% {
+    background: url(../images/inBack4.png) no-repeat;
+    background-size: 754px 672px;
+    z-index: 300;
+  }
+
+  100% {
+    background: url(../images/inBack5.png) no-repeat;
+    background-size: 754px 672px;
+    z-index: 300;
+  }
+
+}
+
+
 .inBack {
-  width: 730px;
-  height: 668px;
+  width: 754px;
+  height: 672px;
   position: absolute;
   bottom: 0;
-  left: 0;
+  left: 12px;
+  background: url(../images/inBack1.png) no-repeat;
+  background-size: 754px 672px;
+  z-index: 100;
+  animation: reversal 2s 1s forwards;
 }
 
 .inFront {
-  width: 730px;
-  height: 277px;
+  width: 754px;
+  height: 262px;
   position: absolute;
-  bottom: 0;
-  left: 0;
+  bottom: -1px;
+  left: 12px;
   z-index: 200;
 }
 
@@ -63,23 +117,27 @@
 }
 
 .updatePassword {
+  // padding: 0 12px;
+
   background-color: transparent;
-  margin: 0 auto;
+  margin: 0 auto 0;
   position: relative;
   overflow: hidden;
+  top: 0;
+  animation: forUp linear .3s forwards;
 
   // padding: 40px;
   .formWrap {
-    // top: 450px;
+    top: 0;
     background-color: #fff;
-    margin: 0 15px 0;
+    margin: 0 39px 0;
     width: 700px;
     height: 836px;
     border-radius: 20px;
-    padding: 15px 15px 0;
+    padding: 15px 15px 5px;
     position: relative;
     z-index: 100;
-    animation: forDown .3;
+    animation: forDown linear 1s forwards;
 
     .formTitle {
       text-align: center;
@@ -114,27 +172,7 @@
   }
 }
 
-@keyframes forDown {
-  0% {
-    top: 0
-  }
-
-  25% {
-    top: 100px
-  }
-
-  50% {
-    top: 200px
-  }
-
-  75% {
-    top: 350px
-  }
 
-  100% {
-    top: 450px;
-  }
-}
 
 .countInput {
   border-radius: 8px;

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

@@ -154,6 +154,8 @@ export default defineComponent({
       }
     };
 
+
+
     const getPhoneInfo = async () => {
       try {
         const { data } = await sysParamConfigPage({
@@ -293,7 +295,10 @@ export default defineComponent({
             </NForm>
           </div>
         </div>
-        <NImage src={inBack} class={styles.inBack}></NImage>
+        <div class={styles.inBack}>
+
+        </div>
+        {/* <NImage src={inBack} class={styles.inBack}></NImage> */}
         <NImage src={inFront} class={styles.inFront}></NImage>
         <NImage src={submitBtn} class={styles.submitBtn}></NImage>
         <div class={styles.messageWrap}>

vite.config.ts

@@ -23,8 +23,8 @@ function resolve(dir: string) {
 }
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
-const proxyUrl = 'https://dev.kt.colexiu.com/';
-// const proxyUrl = 'https://test.lexiaoya.cn';
+// const proxyUrl = 'https://dev.kt.colexiu.com/';
+const proxyUrl = 'https://test.lexiaoya.cn';
 export default defineConfig({
   base: './',
   plugins: [