1

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，那将只有匹配到的文件才会被转换

public/version.json

@@ -1 +1 @@
-{"version":1694009848505}
+{"version":1694059640587}

src/components/layout/index.module.less

@@ -503,4 +503,54 @@
     }
   }
 
+}
+
+.suggestWrap {
+  // :global {
+  //   .n-card-header {
+  //     display: none;
+  //   }
+
+  //   .n-card__content {
+  //     background-color: transparent;
+  //   }
+  // }
+
+  width: 754px;
+  background-color: transparent !important;
+  box-shadow: none !important;
+
+
+
+  :global {
+    .n-card-header {
+      display: none;
+    }
+
+    .n-card__content {
+      background-color: transparent;
+    }
+
+    .n-input__border {
+      display: none;
+    }
+
+    .n-input__state-border {
+      display: none;
+    }
+
+    // .n-card.n-modal {
+    //   background-color: transparent !important;
+    //   box-shadow: none !important;
+
+    //   .n-input__border {
+    //     display: none;
+    //   }
+
+    //   .n-input__state-border {
+    //     display: none;
+    //   }
+    // }
+  }
+
 }

src/components/layout/layoutTop.tsx

@@ -86,19 +86,11 @@ export default defineComponent({
             </p>
           </div>
           <div class={styles.layoutRight}>
-            <NTooltip>
-              {{
-                trigger: () => (
-                  <div
-                    class={styles.optons}
-                    onClick={() => (showSuggestionViseble.value = true)}>
-                    <img src={opinionIcon}></img>
-                  </div>
-                ),
-                default: '意见反馈'
-              }}
-            </NTooltip>
-
+            <div
+              class={styles.optons}
+              onClick={() => (showSuggestionViseble.value = true)}>
+              <NImage src={opinionIcon} previewDisabled></NImage>
+            </div>
             <div onClick={() => (showImGroup.value = true)}>
               <NBadge
                 value={noReadCount.value}
@@ -245,12 +237,10 @@ export default defineComponent({
           </NModal>
 
           <NModal
-            class={['modalTitle', 'background']}
-            style={{ width: '910px' }}
+            class={['modalTitle', 'background', styles.suggestWrap]}
             v-model:show={showSuggestionViseble.value}
             preset="card"
-            showIcon={false}
-            title="意见反馈">
+            showIcon={false}>
             <SuggestionOption
               onClose={() =>
                 (showSuggestionViseble.value = false)

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

@@ -1,76 +1,352 @@
-.updateBtnGroup {
-  padding: 0;
-  justify-content: center !important;
+.pxToVW (@px, @attr: width) {
+  @vw: (@px / 1920) * 100;
+  @{attr}:~"@{vw}vw";
+}
 
-  :global {
-    .n-button {
-      height: 48px !important;
-      min-width: 156px;
+
+
+.suggestOption {
+  .updateBtnGroup {
+    padding: 0;
+    justify-content: center !important;
+    position: relative;
+
+    :global {
+      .n-button {
+        height: 48px !important;
+        min-width: 156px;
+      }
     }
   }
-}
 
-.updatePassword {
-  padding: 40px;
-}
+  .suggestSelect {
+    :global {
+      .n-base-selection__border {
+        border: 1px solid #AADCFF;
+      }
+
+
+    }
+  }
 
-.countInput {
-  border-radius: 8px;
-  min-height: 265px;
-}
 
-.addInput {
-  font-size: 16px;
-  font-weight: 400;
-  color: #777777;
-  line-height: 22px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  @keyframes forDown {
+    0% {
+      top: 0
+    }
 
-  img {
-    width: 36px;
-    height: 36px;
-    margin-bottom: 20px;
+    100% {
+      top: 450px
+    }
   }
-}
 
-:global {
-  .n-upload-trigger.n-upload-trigger--image-card {
-    width: 150px;
-    height: 150px;
-    background: #FDFDFD;
-    border-radius: 8px;
+
+  @keyframes forUp {
+    0% {
+      top: 0
+    }
+
+    100% {
+      top: -120px
+    }
   }
 
-  .n-upload-file-list .n-upload-file.n-upload-file--image-card-type {
-    width: 150px;
-    height: 150px;
-    background: #FDFDFD;
-    border-radius: 8px;
+  @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;
+
+    }
+
+    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;
+    }
+
+    100% {
+      background: url(../images/inBack5.png) no-repeat;
+      background-size: 754px 672px;
+      z-index: 300;
+    }
 
-  .n-upload-file-list.n-upload-file-list--grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, 150px);
-    grid-gap: 20px;
-    margin-top: 0;
   }
-}
 
-.messageWrap {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+  @keyframes stamp {
+    0% {
+      opacity: 1;
+      transform: scale(1.5);
+    }
+
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  .inBack {
+    width: 754px;
+    height: 672px;
+    position: absolute;
+    bottom: 0;
+    background: url(../images/inBack.png) no-repeat;
+    background-size: 754px 672px;
+    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 {
+    width: 754px;
+    height: 262px;
+    position: absolute;
+    bottom: -1px;
+    // left: 12px;
+    z-index: 200;
+
+  }
+
+  .submitBtn {
+    width: 272px;
+    height: 54px;
+    position: absolute;
+    z-index: 201;
+    bottom: 111px;
+    left: 50%;
+    margin-left: -136px;
+    cursor: pointer;
+    z-index: 400;
+  }
 
-  p {
-    height: 25px;
-    font-size: 18px;
+
+  .updatePassword.isAni {
+    animation: forUp linear .3s forwards, endRoute linear .3s 2.3s forwards;
+  }
+
+  .updatePassword {
+    // padding: 0 12px;
+
+    background-color: transparent;
+    margin: 0 auto 0;
+    position: relative;
+    overflow: hidden;
+    top: 0;
+
+
+    .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 27px 0;
+      width: 700px;
+      height: 836px;
+      border-radius: 20px;
+      padding: 15px 15px 5px;
+      position: relative;
+      z-index: 100;
+
+
+      .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;
+      }
+    }
+  }
+
+
+
+  .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: 25px;
-    margin-right: 40px;
+    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;
+    }
+
+    .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;
+    }
+  }
+
+  .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

@@ -173,15 +173,24 @@ export default defineComponent({
       getPhoneInfo()
     })
     return () => (
-      <div class={styles.updatePassword}>
-        <NForm
-          labelAlign="right"
-          labelPlacement="left"
-          labelWidth={'auto'}
-          ref={formsRef}
-          model={forms}
-          requireMarkPlacement="left">
-          {/* <NFormItem
+      <div class={styles.suggestOption}>
+      <div class={[styles.updatePassword,isubmit.value?styles.isAni:'']}>
+        <div class={[styles.formWrap,isubmit.value?styles.isAni:'']}>
+          <NImage
+            class={styles.closeBtn}
+            src={suggestClose}
+            previewDisabled   onClick={() => emit('close')}></NImage>
+          <NImage class={styles.bgLine} src={bgLine} previewDisabled></NImage>
+          <h2 class={styles.formTitle}>意见反馈</h2>
+          <div class={styles.formWrapInfo}>
+            <NForm
+              labelAlign="right"
+              labelPlacement="left"
+              labelWidth={'auto'}
+              ref={formsRef}
+              model={forms}
+              requireMarkPlacement="left">
+              {/* <NFormItem
             path="currentClass"
             label=""
             class={styles.phoneContainer}>
@@ -269,6 +278,7 @@ export default defineComponent({
           </NSpace>
         </NForm>
       </div>
+      </div>
     );
   }
 });