提交

1

src/components/layout/layoutTop.tsx

@@ -10,6 +10,11 @@ import clockIcon from './images/clockIcon.png';
 import schoolDot from './images/schoolDot.png';
 import personIcon from './images/personIcon.png';
 import { useUserStore } from '@/store/modules/users';
+import inBack from './images/inBack.png'
+import inBack2 from './images/inBack2.png'
+import inBack3 from './images/inBack3.png'
+import inBack4 from './images/inBack4.png'
+import inBack5 from './images/inBack5.png'
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import opinionIcon from './images/opinionIcon.png';
@@ -44,6 +49,9 @@ export default defineComponent({
       body.className = 'myBody body';
     }
 
+
+
+
     onMounted(() => {
       window.addEventListener('message', onImMessage);
       showImGroup.value = true;
@@ -249,7 +257,7 @@ export default defineComponent({
             class={['modalTitle', 'background', styles.suggestWrap]}
             v-model:show={showSuggestionViseble.value}
             preset="card"
-            display-directive='show'
+            display-directive='if'
             showIcon={false}>
             <SuggestionOption
               onClose={() =>

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

@@ -4,6 +4,15 @@
 }
 
 
+.isHidden {
+  background: url(../images/inBack.png) no-repeat,
+    url(../images/inBack2.png) no-repeat,
+    url(../images/inBack3.png) no-repeat,
+    url(../images/inBack4.png) no-repeat,
+    url(../images/inBack5.png) no-repeat;
+  opacity: 0;
+  background-size: 754px 672px;
+}
 
 .suggestOption {
   .updateBtnGroup {
@@ -84,15 +93,28 @@
   }
 
   @keyframes reversal {
+    0% {
+      background: url(../images/inBack.png) no-repeat;
+      background-size: 754px 672px;
+
+    }
+
     25% {
       background: url(../images/inBack2.png) no-repeat;
       background-size: 754px 672px;
 
     }
 
+    // 50% {
+    //   background: url(../images/inBack3.png) no-repeat;
+    //   background-size: 754px 672px;
+    //   z-index: .1;
+    // }
+
     50% {
       background: url(../images/inBack3.png) no-repeat;
       background-size: 754px 672px;
+      opacity: .1;
       z-index: 0;
     }
 
@@ -129,6 +151,10 @@
     position: absolute;
     bottom: 0;
     background: url(../images/inBack.png) no-repeat;
+    // url(../images/inBack2.png) no-repeat,
+    // url(../images/inBack3.png) no-repeat,
+    // url(../images/inBack4.png) no-repeat,
+    // url(../images/inBack5.png) no-repeat;
     background-size: 754px 672px;
     z-index: 1;
 
@@ -174,7 +200,8 @@
 
 
   .updatePassword.isAni {
-    animation: forUp linear .3s forwards, endRoute linear .3s 2.3s forwards;
+    // endRoute linear .3s 2.3s forwards;
+    animation: forUp linear .3s forwards,
   }
 
   .updatePassword {
@@ -208,7 +235,6 @@
 
     // padding: 40px;
     .formWrap {
-      top: 0;
       background-color: #fff;
       margin: 0 27px 0;
       width: 700px;

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

@@ -334,6 +334,7 @@ export default defineComponent({
         </>:null}
 
       </div>
+      <div class={styles.isHidden}></div>
       </div>
     );
   }