|
@@ -9,7 +9,10 @@
|
|
|
<!-- 登录输入框 -->
|
|
<!-- 登录输入框 -->
|
|
|
<div class="login-wrapper">
|
|
<div class="login-wrapper">
|
|
|
<div class="login-input">
|
|
<div class="login-input">
|
|
|
- <span>{{ appTitle }}</span>
|
|
|
|
|
|
|
+ <div class="app-header">
|
|
|
|
|
+ <img :src="LogoImage" alt="Logo" class="app-logo" />
|
|
|
|
|
+ <span>{{ appTitle }}</span>
|
|
|
|
|
+ </div>
|
|
|
<el-form
|
|
<el-form
|
|
|
ref="loginFormRef"
|
|
ref="loginFormRef"
|
|
|
:model="loginData.loginForm"
|
|
:model="loginData.loginForm"
|
|
@@ -101,6 +104,7 @@ import { HomeFilled, Avatar, Lock, Iphone } from '@element-plus/icons-vue'
|
|
|
import { ElMessage } from 'element-plus'
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
|
|
|
|
import BGImages from '@/assets/images/homeBG.png'
|
|
import BGImages from '@/assets/images/homeBG.png'
|
|
|
|
|
+import LogoImage from '@/assets/images/logo.png'
|
|
|
import {
|
|
import {
|
|
|
createLoginData,
|
|
createLoginData,
|
|
|
createVerificationCodeLogic,
|
|
createVerificationCodeLogic,
|
|
@@ -248,11 +252,28 @@ onMounted(() => {
|
|
|
flex-direction: column; // 子元素垂直排列
|
|
flex-direction: column; // 子元素垂直排列
|
|
|
text-align: center; // 文本居中
|
|
text-align: center; // 文本居中
|
|
|
}
|
|
}
|
|
|
-.login-input span{
|
|
|
|
|
|
|
+.app-header {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: rpx(30);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ gap: rpx(5);
|
|
|
|
|
+ margin-bottom: rpx(10);
|
|
|
|
|
+}
|
|
|
|
|
+.app-logo {
|
|
|
|
|
+ width: rpx(20);
|
|
|
|
|
+ height: rpx(20);
|
|
|
|
|
+ object-fit: contain;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.app-header span{
|
|
|
color: white;
|
|
color: white;
|
|
|
font-size: rpx(11);
|
|
font-size: rpx(11);
|
|
|
- padding-bottom: rpx(5);
|
|
|
|
|
letter-spacing: rpx(1);
|
|
letter-spacing: rpx(1);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 100%;
|
|
|
}
|
|
}
|
|
|
.input-item {
|
|
.input-item {
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -399,11 +420,25 @@ onMounted(() => {
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .login-input span {
|
|
|
|
|
- font-size: rpx(18);
|
|
|
|
|
- padding-bottom: rpx(20);
|
|
|
|
|
|
|
+ .app-header {
|
|
|
|
|
+ height: rpx(50);
|
|
|
|
|
+ gap: rpx(10);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .app-logo {
|
|
|
|
|
+ width: rpx(40);
|
|
|
|
|
+ height: rpx(40);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .app-header span {
|
|
|
|
|
+ font-size: rpx(25);
|
|
|
|
|
+ letter-spacing: rpx(2);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ height: 100%;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+
|
|
|
.input-item {
|
|
.input-item {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
align-items: stretch;
|
|
align-items: stretch;
|
|
@@ -447,12 +482,12 @@ onMounted(() => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.check-box .register-link {
|
|
.check-box .register-link {
|
|
|
- font-size: rpx(12) !important;
|
|
|
|
|
|
|
+ font-size: rpx(16) !important;
|
|
|
margin-right: rpx(15) !important;
|
|
margin-right: rpx(15) !important;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.el-checkbox ::v-deep(.el-checkbox__label) {
|
|
.el-checkbox ::v-deep(.el-checkbox__label) {
|
|
|
- font-size: rpx(12) !important;
|
|
|
|
|
|
|
+ font-size: rpx(16) !important;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.sms-code-container {
|
|
.sms-code-container {
|