登录页

snowy-admin-web/src/views/auth/login/gsc-login.vue

@@ -1,57 +1,63 @@
 <template>
   <div class="gsc-login">
-    <div class="login-main">
-      <div class="title">{{ sysBaseConfig.SNOWY_SYS_NAME }}</div>
-      <a-form class="login-form" ref="loginForm" :model="ruleForm" :rules="rules">
-        <a-form-item name="account">
-          <a-input
-            v-model:value="ruleForm.account"
-            :placeholder="$t('login.accountPlaceholder')"
-            size="large"
-            @keyup.enter="login"
-          >
-            <template #prefix>
-              <UserOutlined class="login-icon-gray" />
-            </template>
-          </a-input>
-        </a-form-item>
-        <a-form-item name="password">
-          <a-input-password
-            v-model:value="ruleForm.password"
-            :placeholder="$t('login.PWPlaceholder')"
-            size="large"
-            autocomplete="off"
-            @keyup.enter="login"
-          >
-            <template #prefix>
-              <LockOutlined class="login-icon-gray" />
-            </template>
-          </a-input-password>
-        </a-form-item>
-        <a-form-item name="validCode" v-if="captchaOpen === 'true'">
-          <a-row :gutter="8">
-            <a-col :span="17">
-              <a-input
-                v-model:value="ruleForm.validCode"
-                :placeholder="$t('login.validLaceholder')"
-                size="large"
-                @keyup.enter="login"
-              >
-                <template #prefix>
-                  <verified-outlined class="login-icon-gray" />
-                </template>
-              </a-input>
-            </a-col>
-            <a-col :span="7">
-              <img :src="validCodeBase64" class="login-validCode-img" @click="loginCaptcha" />
-            </a-col>
-          </a-row>
-        </a-form-item>
-      </a-form>
-      <a-button type="primary" class="button" :loading="loading" round size="large" @click="login()">
-        {{ $t('login.signIn') }}
-      </a-button>
-    </div>
+  	<div class="left">
+		<img src="./img/login-left.png"/>
+	</div>
+  	<div class="right">
+		<div class="right-block">
+			<div class="tab">{{ $t('login.signIn') }}</div>
+            <a-form class="login-form" ref="loginForm" :model="ruleForm" :rules="rules">
+                <a-form-item name="account">
+                    <a-input
+                            v-model:value="ruleForm.account"
+                            :placeholder="$t('login.accountPlaceholder')"
+                            size="large"
+                            @keyup.enter="login"
+                    >
+                        <template #prefix>
+                            <UserOutlined class="login-icon-gray"/>
+                        </template>
+                    </a-input>
+                </a-form-item>
+                <a-form-item name="password">
+                    <a-input-password
+                            v-model:value="ruleForm.password"
+                            :placeholder="$t('login.PWPlaceholder')"
+                            size="large"
+                            autocomplete="off"
+                            @keyup.enter="login"
+                    >
+                        <template #prefix>
+                            <LockOutlined class="login-icon-gray" />
+                        </template>
+                    </a-input-password>
+                </a-form-item>
+                <a-form-item name="validCode" v-if="captchaOpen === 'true'">
+                    <a-row :gutter="8">
+                        <a-col :span="17">
+                            <a-input
+                                    v-model:value="ruleForm.validCode"
+                                    :placeholder="$t('login.validLaceholder')"
+                                    size="large"
+                                    @keyup.enter="login"
+                            >
+                                <template #prefix>
+                                    <verified-outlined class="login-icon-gray" />
+                                </template>
+                            </a-input>
+                        </a-col>
+                        <a-col :span="7">
+                            <img :src="validCodeBase64" class="login-validCode-img" @click="loginCaptcha" />
+                        </a-col>
+                    </a-row>
+                </a-form-item>
+            </a-form>
+            <a-checkbox v-model:checked="checked" style="margin-top: 10px">记住密码</a-checkbox>
+            <a-button type="primary" class="button" :loading="loading" round size="large" @click="login()">
+                {{ $t('login.signIn') }}
+            </a-button>
+		</div>
+	</div>
   </div>
 </template>
 <script setup>
@@ -79,6 +85,7 @@ const loginAgree = ref(false)
 const agreeTipsYhfwxy = ref(false)
 const agreeTipsYhyszc = ref(false)
 const loginMode = ref('account')
+const checked = ref(false)
 
 const ruleForm = reactive({
   account: '', // superAdmin
@@ -202,69 +209,83 @@ const login = async () => {
   align-items: center;
   width: 100%;
   height: 100%;
-  background-image: url("./img/login-bg.png");
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-
-  .login-main {
-    padding: 22px 20px;
-    width: 308px;
-    background-color: rgba(134, 197, 255, 0.3);
-    border-radius: 4px;
-    border: 2px solid #8BBCFF;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .title {
-      font-family: PingFang SC;
-      font-weight: bold;
-      font-size: 16px;
-      color: #FFFFFF;
+  .left {
+	flex: 1;
+	height: 100%;
+	>img {
+	  width: 100%;
+	  height: 100%;
     }
-    :deep(.login-form) {
-      margin-top: 20px;
-      .ant-form-item {
-        margin-bottom: 20px;
-        .ant-input-affix-wrapper {
-          background-color: rgba(9, 28, 63, 0.5);
-          border-color: transparent;
-          padding-top: 4px;
-          padding-bottom: 4px;
-          .ant-input-prefix, .ant-input-suffix > .ant-input-password-icon {
-            color: #ffffff;
-            margin-right: 10px;
-          }
-          .ant-input {
-            background-color: transparent !important;
-            color: #ffffff;
-            &:-webkit-autofill {
-              -webkit-text-fill-color: #ededed !important;
-              -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
-              background-color:transparent;
-              background-image: none;
-              transition: background-color 50000s ease-in-out 0s;
-			  caret-color: #ffffff;
-            }
-            &::placeholder {
-              color: rgba(255, 255, 255, 0.3);
+  }
+  .right {
+	flex: 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	.right-block {
+	  width: 596px;
+	  .tab {
+		width: fit-content;
+        font-weight: 600;
+        font-size: 32px;
+        color: #266EFF;
+        line-height: 50px;
+		border-bottom: 2px solid #266EFF;
+		margin-bottom: 40px;
+	  }
+      :deep(.login-form) {
+        .ant-form-item {
+		  .ant-input-affix-wrapper {
+			height: 80px;
+			border-radius: 40px;
+			background-color: #ffffff;
+			.ant-input {
+			  color: rgba(46, 50, 56, 1) !important;
+			  font-size: 18px;
+			  &:-webkit-autofill {
+				-webkit-text-fill-color: rgba(46, 50, 56, 1) !important;
+			  }
+			  &::placeholder {
+                color: rgba(167, 173, 185, 1) !important;
+			  }
+			}
+			.ant-input-prefix, .ant-input-suffix {
+			  width: 40px;
+			  display: flex;
+			  align-items: center;
+			  justify-content: center;
             }
+			&.ant-input-affix-wrapper-focused {
+			  box-shadow: 0 0 0 1px #266EFF;
+			  .login-icon-gray {
+                color: #266EFF;
+              }
+			}
           }
         }
+		.login-icon-gray {
+		  color: rgba(167, 173, 185, 1);
+		  font-size: 18px;
+        }
+        .login-validCode-img {
+          width: 100%;
+          height: 100%;
+        }
       }
-      .login-validCode-img {
+      .button {
+        margin-top: 30px;
         width: 100%;
-        height: 100%;
+        height: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+		background-color: #266EFF;
+		border-radius: 4px;
+        font-weight: 500;
+        font-size: 20px;
+        color: #FFFFFF;
       }
-    }
-    .button {
-      width: 100%;
-      height: 30px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-top: 16px;
-      font-size: 12px;
-    }
+	}
   }
 }
 </style>