fix: 登录 暗黑模式样式问题调整

src/views/login/components/passwordForm.vue

@@ -1,17 +1,17 @@
 <template>
 	<el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="login">
 		<el-form-item prop="username">
-			<el-input v-model="form.username" prefix-icon="el-icon-user" clearable :placeholder="$t('login.userPlaceholder')"></el-input>
+			<el-input v-model="form.username" prefix-icon="user" clearable :placeholder="$t('login.userPlaceholder')"></el-input>
 		</el-form-item>
 		<el-form-item prop="password">
-			<el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password :placeholder="$t('login.PWPlaceholder')"></el-input>
+			<el-input v-model="form.password" prefix-icon="lock" clearable show-password :placeholder="$t('login.PWPlaceholder')"></el-input>
 		</el-form-item>
 		<el-form-item prop="code">
 			<div class="login-msg-yzm">
-				<el-input v-model="form.code" prefix-icon="el-icon-lock" clearable placeholder="请输入验证码，点击右边小图标获取"></el-input>
+				<el-input v-model="form.code" prefix-icon="lock" clearable placeholder="请输入验证码，点击右边小图标获取"></el-input>
 				<el-popover :width="200">
 					<template #reference>
-						<el-avatar src="/tip.png" />
+						<el-icon style="font-size: 32px; margin: 4px; color: var(--el-color-primary); cursor: pointer"><Pointer /></el-icon>
 					</template>
 					<el-image src="/qrcode.png" />
 				</el-popover>
@@ -28,7 +28,7 @@
 		<el-form-item>
 			<el-button type="primary" style="width: 100%" :loading="loading" round @click="login">{{ $t('login.signIn') }}</el-button>
 		</el-form-item>
-		<div class="login-reg" v-if="false">
+		<div v-if="false" class="login-reg">
 			{{ $t('login.noAccount') }} <router-link to="/user_register">{{ $t('login.createAccount') }}</router-link>
 		</div>
 	</el-form>

src/views/login/components/phoneForm.vue

@@ -5,70 +5,68 @@
 				<template #prepend>+86</template>
 			</el-input>
 		</el-form-item>
-		<el-form-item prop="yzm"  style="margin-bottom: 35px;">
+		<el-form-item prop="yzm" style="margin-bottom: 35px">
 			<div class="login-msg-yzm">
-				<el-input v-model="form.yzm" prefix-icon="el-icon-unlock" clearable :placeholder="$t('login.smsPlaceholder')"></el-input>
-				<el-button @click="getYzm" :disabled="disabled">{{this.$t('login.smsGet')}}<span v-if="disabled"> ({{time}})</span></el-button>
+				<el-input v-model="form.yzm" prefix-icon="unlock" clearable :placeholder="$t('login.smsPlaceholder')"></el-input>
+				<el-button :disabled="disabled" @click="getYzm"
+					>{{ $t('login.smsGet') }}<span v-if="disabled"> ({{ time }})</span></el-button
+				>
 			</div>
 		</el-form-item>
 		<el-form-item>
-			<el-button type="primary" style="width: 100%;" :loading="islogin" round @click="login">{{ $t('login.signIn') }}</el-button>
+			<el-button type="primary" style="width: 100%" :loading="islogin" round @click="login">{{ $t('login.signIn') }}</el-button>
 		</el-form-item>
-		<div class="login-reg" v-if="false">
-			{{$t('login.noAccount')}} <router-link to="/user_register">{{$t('login.createAccount')}}</router-link>
+		<div v-if="false" class="login-reg">
+			{{ $t('login.noAccount') }} <router-link to="/user_register">{{ $t('login.createAccount') }}</router-link>
 		</div>
 	</el-form>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				form: {
-					phone: "",
-					yzm: "",
-				},
-				rules: {
-					phone: [
-						{required: true, message: this.$t('login.mobileError')}
-					],
-					yzm: [
-						{required: true, message: this.$t('login.smsError')}
-					]
-				},
-				disabled: false,
-				time: 0,
-				islogin: false,
+export default {
+	data() {
+		return {
+			form: {
+				phone: '',
+				yzm: ''
+			},
+			rules: {
+				phone: [{ required: true, message: this.$t('login.mobileError') }],
+				yzm: [{ required: true, message: this.$t('login.smsError') }]
+			},
+			disabled: false,
+			time: 0,
+			islogin: false
+		}
+	},
+	mounted() {},
+	methods: {
+		async getYzm() {
+			var validate = await this.$refs.loginForm.validateField('phone').catch(() => {})
+			if (!validate) {
+				return false
 			}
-		},
-		mounted() {
 
+			this.$message.success(this.$t('login.smsSent'))
+			this.disabled = true
+			this.time = 60
+			var t = setInterval(() => {
+				this.time -= 1
+				if (this.time < 1) {
+					clearInterval(t)
+					this.disabled = false
+					this.time = 0
+				}
+			}, 1000)
 		},
-		methods: {
-			async getYzm(){
-				var validate = await this.$refs.loginForm.validateField("phone").catch(()=>{})
-				if(!validate){ return false }
-
-				this.$message.success(this.$t('login.smsSent'))
-				this.disabled = true
-				this.time = 60
-				var t = setInterval(() => {
-					this.time -= 1
-					if(this.time < 1){
-						clearInterval(t)
-						this.disabled = false
-						this.time = 0
-					}
-				},1000)
-			},
-			async login(){
-				var validate = await this.$refs.loginForm.validate().catch(()=>{})
-				if(!validate){ return false }
+		async login() {
+			var validate = await this.$refs.loginForm.validate().catch(() => {})
+			if (!validate) {
+				return false
 			}
 		}
 	}
+}
 </script>
 
-<style>
-
-</style>
+<style></style>

src/views/login/index.vue

@@ -137,7 +137,8 @@ export default {
 .login_bg {
 	width: 100%;
 	height: 100%;
-	background: #fff;
+	//background: #fff;
+	background: var(--el-bg-color);
 	display: flex;
 }
 .login_adv {
@@ -150,6 +151,7 @@ export default {
 }
 .login_adv__title {
 	color: #fff;
+	//color: var(--el-bg-color);
 	padding: 40px;
 	position: absolute;
 	top: 0px;
@@ -169,7 +171,8 @@ export default {
 	font-size: 14px;
 	margin-top: 10px;
 	line-height: 1.8;
-	color: rgba(255, 255, 255, 0.6);
+	//color: rgba(255, 255, 255, 0.6);
+	opacity: 0.6;
 }
 .login_adv__title div {
 	margin-top: 10px;
@@ -184,7 +187,8 @@ export default {
 }
 .login_adv__title div i.add {
 	font-size: 20px;
-	color: rgba(255, 255, 255, 0.6);
+	//color: rgba(255, 255, 255, 0.6);
+	opacity: 0.6;
 }
 .login_adv__bottom {
 	position: absolute;