意见反馈改变

1

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

@@ -1,6 +1,7 @@
 .updateBtnGroup {
   padding: 0;
   justify-content: center !important;
+  position: relative;
 
   :global {
     .n-button {
@@ -57,22 +58,55 @@
   }
 }
 
+@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;
-    z-index: 100;
+
   }
 
   50% {
     background: url(../images/inBack3.png) no-repeat;
     background-size: 754px 672px;
-    z-index: 100;
+    z-index: 0;
   }
 
   75% {
     background: url(../images/inBack4.png) no-repeat;
     background-size: 754px 672px;
+    // background-color: #005FA0;
     z-index: 300;
   }
 
@@ -84,17 +118,43 @@
 
 }
 
+@keyframes stamp {
+  0% {
+    opacity: 1;
+    transform: scale(1.5);
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
 
 .inBack {
   width: 754px;
   height: 672px;
   position: absolute;
   bottom: 0;
-  left: 12px;
-  background: url(../images/inBack1.png) no-repeat;
+  background: url(../images/inBack.png) no-repeat;
   background-size: 754px 672px;
-  z-index: 100;
-  animation: reversal 2s 1s forwards;
+  z-index: 1;
+
+}
+
+.inBack.isAni {
+  animation: reversal .3s 1s forwards;
+}
+
+.inBackBottom {
+
+  width: 754px;
+  left: 12px;
+  width: 730px;
+  height: 393px;
+  // background: url(../images/boxBg.png) 754px 380px;
+  position: absolute;
+  bottom: 0;
+  border-radius: 35px 25px;
 }
 
 .inFront {
@@ -102,8 +162,9 @@
   height: 262px;
   position: absolute;
   bottom: -1px;
-  left: 12px;
+  // left: 12px;
   z-index: 200;
+
 }
 
 .submitBtn {
@@ -114,6 +175,13 @@
   bottom: 111px;
   left: 50%;
   margin-left: -136px;
+  cursor: pointer;
+  z-index: 400;
+}
+
+
+.updatePassword.isAni {
+  animation: forUp linear .3s forwards, endRoute linear .3s 2.3s forwards;
 }
 
 .updatePassword {
@@ -124,20 +192,39 @@
   position: relative;
   overflow: hidden;
   top: 0;
-  animation: forUp linear .3s forwards;
+
+
+  .formWrap.isAni {
+    animation: forDown linear 1s forwards;
+  }
+
+  .sealing {
+    position: absolute;
+    bottom: 58px;
+    z-index: 300;
+    width: 173px;
+    height: 175px;
+    left: 50%;
+    margin-left: -87px;
+    opacity: 0;
+  }
+
+  .sealing.isAni {
+    animation: stamp linear .3s 1.5s forwards;
+  }
 
   // padding: 40px;
   .formWrap {
     top: 0;
     background-color: #fff;
-    margin: 0 39px 0;
+    margin: 0 27px 0;
     width: 700px;
     height: 836px;
     border-radius: 20px;
     padding: 15px 15px 5px;
     position: relative;
     z-index: 100;
-    animation: forDown linear 1s forwards;
+
 
     .formTitle {
       text-align: center;

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

@@ -22,6 +22,8 @@ import suggestClose from '../images/suggestClose.png';
 import inFront from '../images/inFront.png';
 import inBack from '../images/inBack.png';
 import submitBtn from '../images/submitBtn.png';
+import sealing from '../images/sealing.png'
+import boxBg from '../images/boxBg.png'
 import {
   addSuggestion,
   getSuggestionList,
@@ -42,7 +44,7 @@ export default defineComponent({
       mobileNo: userStore.getUserInfo.phone
     });
     const state = reactive([]) as any;
-
+    const isubmit = ref(false)
     const suggestionTypeList = ref([] as any);
     const ossUploadUrl = `https://gyt.ks3-cn-beijing.ksyuncs.com/`;
     const uploadRef = ref();
@@ -72,8 +74,12 @@ export default defineComponent({
       const attachmentUrls = attachmentUrlsList.join(',');
       try {
         const res = await addSuggestion({ ...forms, attachmentUrls });
-        message.success('提交成功');
-        emit('close');
+        isubmit.value = true;
+        // message.success('提交成功');
+        setTimeout(()=>{
+          emit('close');
+        },3000)
+
       } catch (e) {
         console.log(e);
       }
@@ -182,12 +188,12 @@ export default defineComponent({
       getPhoneInfo();
     });
     return () => (
-      <div class={styles.updatePassword}>
-        <div class={styles.formWrap}>
+      <div class={[styles.updatePassword,isubmit.value?styles.isAni:'']}>
+        <div class={[styles.formWrap,isubmit.value?styles.isAni:'']}>
           <NImage
             class={styles.closeBtn}
             src={suggestClose}
-            previewDisabled></NImage>
+            previewDisabled   onClick={() => emit('close')}></NImage>
           <NImage class={styles.bgLine} src={bgLine} previewDisabled></NImage>
           <h2 class={styles.formTitle}>意见反馈</h2>
           <div class={styles.formWrapInfo}>
@@ -295,16 +301,21 @@ export default defineComponent({
             </NForm>
           </div>
         </div>
-        <div class={styles.inBack}>
+        <div class={[styles.inBack,isubmit.value?styles.isAni:'']}>
 
         </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}>
+        {/* <div class={styles.inBackBottom}></div>  boxBg */}
+        <NImage src={boxBg} class={styles.inBackBottom} previewDisabled></NImage>
+        <NImage src={inFront} class={styles.inFront} previewDisabled></NImage>
+        <NImage src={sealing} class={[styles.sealing,isubmit.value?styles.isAni:'']} previewDisabled></NImage>
+        {!isubmit.value?<>
+          <NImage src={submitBtn}  onClick={()=>{onSubmit()}} class={styles.submitBtn} previewDisabled></NImage>
+          <div class={styles.messageWrap}>
           {phone.value ? <p>客服电话：{phone.value}</p> : null}
           {email.value ? <p>邮箱：{email.value}</p> : null}
         </div>
+        </>:null}
+
       </div>
     );
   }

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: [