feat: base 登录页美化

src/views/login/components/passwordForm.vue

@@ -14,7 +14,7 @@
       <el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password
         :placeholder="$t('login.PWPlaceholder')" @keyup.enter="login"></el-input>
     </el-form-item>
-    <el-form-item style="margin-bottom: 10px">
+    <el-form-item style="margin-bottom: 10px;">
       <el-col :span="12" class="login-reg">
         <!-- <el-link @click="visitors">{{$t('login.fangke')}}</el-link> -->
       </el-col>
@@ -23,7 +23,7 @@
       </el-col>
     </el-form-item>
     <el-form-item>
-      <el-button type="primary" style="width: 100%" :loading="islogin" round @click="login">{{ $t("login.signIn")
+      <el-button type="primary" style="width: 100%" :loading="islogin" @click="login">{{ $t("login.signIn")
         }}</el-button>
     </el-form-item>
 

src/views/login/components/phoneForm.vue

@@ -6,7 +6,7 @@
 				<template #prepend>+86</template>
 			</el-input>
 		</el-form-item>
-		<el-form-item prop="code" style="margin-bottom: 35px;">
+		<el-form-item prop="code" style="margin-bottom: 20px;">
 			<div class="login-msg-yzm">
 				<el-input v-model="form.code" prefix-icon="el-icon-unlock" clearable
 					:placeholder="$t('login.smsPlaceholder')"></el-input>
@@ -15,7 +15,7 @@
 			</div>
 		</el-form-item>
 		<el-form-item>
-			<el-button type="primary" style="width: 100%;" :loading="islogin" round @click="login">{{ $t('login.signIn')
+			<el-button type="primary" style="width: 100%;" :loading="islogin" @click="login">{{ $t('login.signIn')
 				}}</el-button>
 		</el-form-item>
 		<!-- <div class="login-reg">

src/views/login/index.vue

@@ -27,16 +27,25 @@
 						<label>{{ baseConfig.base_name }}</label>
 					</div>
 				</div>
-				<el-tabs>
+				<div>
+					<el-segmented v-model="loginType" :options="loginTypeOptions" size="large">
+						<template #default="{ item }">
+							{{ item.label }}
+						</template>
+					</el-segmented>
+					<div style="height: 20px"></div>
+					<password-form v-if="loginType=='password'"></password-form>
+					<phone-form v-if="loginType=='phone'"></phone-form>
+				</div>
+				<!-- <el-tabs>
 					<el-tab-pane :label="$t('login.accountLogin')" lazy>
 						<password-form></password-form>
 					</el-tab-pane>
-					<!-- 手机号登陆 -->
 					<el-tab-pane :label="$t('login.mobileLogin')" lazy>
 						<phone-form></phone-form>
 					</el-tab-pane>
 
-				</el-tabs>
+				</el-tabs> -->
 				<!-- 微信登陆
 				<el-divider>{{ $t('login.signInOther') }}</el-divider>
 				<div class="login-oauth">
@@ -52,6 +61,7 @@
 				<!-- <div class="login-oauth" v-else>
 					<el-button type="default" @click="faceLogin">刷脸登录</el-button>
 				</div> -->
+				<div class="copyright">Copyright © 2024 {{ baseConfig.base_right }}</div>
 			</div>
 		</div>
 	</div>
@@ -119,7 +129,12 @@ export default {
 			showApp: false,
 			appUrl: 'http://222.222.144.147:6013/media/zc_ehs.apk',
 			showH5: false,
-			h5Url: 'http://222.222.144.147:6013/h5/'
+			h5Url: 'http://222.222.144.147:6013/h5/',
+			loginType:'password',
+			loginTypeOptions: [
+				{label: "账号登录", value: "password"},
+				{label: "手机登录", value: "phone"},
+			]
 		}
 	},
 	watch: {
@@ -170,6 +185,9 @@ export default {
 			}
 			that.$API.system.config.base.req(req).then((res) => {
 				that.baseConfig = res.base;
+				if (that.baseConfig.base_right == undefined || that.baseConfig.base_right == null) {
+					that.baseConfig.base_right = "中存大数据";
+				}
 				that.$store.commit("SET_baseName", res.base.base_name);
 				that.$store.commit("SET_baseLogo", res.base.base_logo);
 				that.$TOOL.data.set("BASE_INFO", res)
@@ -221,7 +239,7 @@ export default {
 }
 
 .login_adv {
-	width: 33.33333%;
+	width: 40%;
 	background-color: #555;
 	background-size: cover;
 	background-position: center center;
@@ -379,6 +397,35 @@ export default {
 	top: 20px;
 	right: 20px;
 }
+.copyright {
+	position: absolute;
+	bottom: 30px;
+	right: 30px;
+	font-size: 16px;
+	color: rgb(36, 93, 116);
+}
+
+.copyright a {
+	color: #fff;
+}
+
+.copyright a:hover {
+	color: #fff;
+}
+
+.login-form:deep(.login-msg) {
+	display: flex;
+	width: 100%;
+}
+
+.login-form:deep(.login-msg) .el-input {
+	flex: 1;
+}
+
+.login-form:deep(.login-msg) .el-button {
+	margin-left: 10px;
+	--el-button-size: 42px;
+}
 
 .login-form:deep(.login-msg-yzm) {
 	display: flex;