fix：登录模块ui优化

Author: lichunn

packages/design-core/src/login/ForgotPassword.vue

@@ -55,6 +55,9 @@
         <tiny-button type="primary" @click="handleForgot"> 提交</tiny-button>
       </tiny-form-item>
     </tiny-form>
+    <div class="forgot-bottom">
+      <div class="to-login" @click="toLogin">去登录</div>
+    </div>
   </div>
 </template>
 
@@ -131,6 +134,10 @@ export default {
       }
     }
 
+    const toLogin = () => {
+      emit('changeStatus', useLogin().LOGIN)
+    }
+
     watch(
       () => state.forgotData.password,
       () => {
@@ -139,7 +146,8 @@ export default {
     )
     return {
       state,
-      handleForgot
+      handleForgot,
+      toLogin
     }
   }
 }
@@ -150,7 +158,7 @@ export default {
   color: #191919;
   font-size: 24px;
   font-weight: 600;
-  margin-bottom: 28px;
+  margin-bottom: 36px;
 }
 
 .pw-tips {
@@ -170,6 +178,16 @@ export default {
   }
 }
 
+.forgot-bottom {
+  display: flex;
+  justify-content: center;
+  font-size: 14px;
+  .to-login {
+    cursor: pointer;
+    color: #1476ff;
+  }
+}
+
 :deep(.tiny-form-item__content) {
   margin-left: 0 !important;
 }

packages/design-core/src/login/Index.vue

@@ -61,12 +61,11 @@ export default {
   height: 100vh;
   background: linear-gradient(to top left, #e7f0ff, #fff);
   display: flex;
-  padding: 10%;
+  padding: 10% 10% 0 10%;
   .login-left {
     flex: 2;
     .login-img {
       max-height: 500px;
-      min-height: 298px;
       width: 100%;
       height: 100%;
       background-image: url(../../assets/login-bg.svg);
@@ -83,15 +82,30 @@ export default {
       box-sizing: border-box;
       max-width: 440px;
       min-width: 340px;
-      max-height: 500px;
-      min-height: 298px;
       width: 100%;
-      height: 100%;
       background: #fff;
       border-radius: 12px;
       box-shadow: 0 8px 40px 0 #dce6f6;
-      padding: 48px 60px;
+      padding: 52px 60px 80px 60px;
+      max-height: 100%;
+      overflow-y: auto;
     }
   }
+
+  :deep(.tiny-form-item__content) {
+    margin-left: 0 !important;
+  }
+  :deep(.tiny-button.tiny-button.tiny-button.tiny-button) {
+    width: 100%;
+    background: #595959;
+    height: 32px;
+    margin-top: 20px;
+  }
+  :deep(.tiny-input.tiny-input .tiny-input__inner.tiny-input__inner) {
+    height: 32px;
+  }
+  :deep(.tiny-form.tiny-form.tiny-form .tiny-form-item) {
+    margin-bottom: 20px;
+  }
 }
 </style>

packages/design-core/src/login/Login.vue

@@ -93,15 +93,14 @@ export default {
   color: #191919;
   font-size: 24px;
   font-weight: 600;
-  margin-bottom: 28px;
+  margin-bottom: 36px;
 }
 
 .login-bottom {
-  margin-top: 16px;
   display: flex;
   justify-content: space-between;
   color: #1476ff;
-  margin-bottom: 32px;
+  font-size: 14px;
   div {
     cursor: pointer;
   }
@@ -140,11 +139,4 @@ export default {
     cursor: pointer;
   }
 }
-:deep(.tiny-form-item__content) {
-  margin-left: 0 !important;
-}
-:deep(.tiny-button.tiny-button.tiny-button.tiny-button) {
-  width: 100%;
-  background: #595959;
-}
 </style>

packages/design-core/src/login/Register.vue

@@ -157,7 +157,7 @@ export default {
   color: #191919;
   font-size: 24px;
   font-weight: 600;
-  margin-bottom: 28px;
+  margin-bottom: 36px;
 }
 
 .pw-tips {
@@ -178,11 +178,10 @@ export default {
 }
 
 .register-bottom {
-  margin-top: 16px;
   display: flex;
   justify-content: center;
   color: #808080;
-  margin-bottom: 32px;
+  font-size: 14px;
   .to-login {
     cursor: pointer;
     color: #1476ff;

packages/design-core/src/login/RegisterSuccess.vue

@@ -19,6 +19,7 @@
 import { reactive, computed } from 'vue'
 import { TinyCheckbox, TinyButton } from '@opentiny/vue'
 import useLogin from './js/useLogin'
+import { useModal } from '@opentiny/tiny-engine-meta-register'
 
 export default {
   components: {
@@ -37,14 +38,13 @@ export default {
       emit('changeStatus', useLogin().LOGIN)
     }
 
-    const copy = () => {
-      const textarea = document.createElement('textarea')
-
-      textarea.value = `${publicKey.value}`
-      document.body.appendChild(textarea)
-      textarea.select()
-      document.execCommand('copy')
-      document.body.removeChild(textarea)
+    const copy = async () => {
+      try {
+        await navigator.clipboard.writeText(publicKey.value)
+        useModal().message({ message: '复制成功', status: 'success' })
+      } catch (err) {
+        useModal().message({ message: '复制失败', status: 'error' })
+      }
     }
 
     return {
@@ -94,14 +94,4 @@ export default {
     margin-bottom: 20px;
   }
 }
-
-:deep(.tiny-button.tiny-button.tiny-button.tiny-button) {
-  margin-top: 20px;
-  background: #fff;
-  color: #191919;
-  border: 1px solid #c9c9c9;
-}
-:deep(.tiny-button.tiny-button.tiny-button.tiny-button.tiny-button--primary:not(.is-disabled)):hover {
-  background: #fff;
-}
 </style>