登录页面

src/assets/login/wechat.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.1333 10.8533C21.6533 10.8533 22.16 10.8933 22.6533 10.96C21.7467 7 17.5867 4 12.5867 4C6.92001 4 2.32001 7.84 2.32001 12.5733C2.32001 15.3067 3.85334 17.72 6.24001 19.2933L4.89334 22L8.57334 20.4133C9.36001 20.6933 10.1867 20.92 11.0667 21.04C10.9467 20.52 10.88 19.9867 10.88 19.4267C10.8667 14.7067 15.4667 10.8533 21.1333 10.8533ZM16 7.85333C16.1681 7.85333 16.3345 7.88644 16.4898 7.95077C16.6451 8.01509 16.7862 8.10938 16.9051 8.22824C17.024 8.3471 17.1182 8.4882 17.1826 8.6435C17.2469 8.7988 17.28 8.96524 17.28 9.13333C17.28 9.30143 17.2469 9.46787 17.1826 9.62317C17.1182 9.77847 17.024 9.91957 16.9051 10.0384C16.7862 10.1573 16.6451 10.2516 16.4898 10.3159C16.3345 10.3802 16.1681 10.4133 16 10.4133C15.6605 10.4133 15.335 10.2785 15.0949 10.0384C14.8549 9.79838 14.72 9.47281 14.72 9.13333C14.72 8.79386 14.8549 8.46828 15.0949 8.22824C15.335 7.98819 15.6605 7.85333 16 7.85333ZM9.16001 10.4267C8.82053 10.4267 8.49496 10.2918 8.25491 10.0518C8.01486 9.81172 7.88001 9.48614 7.88001 9.14667C7.88001 8.80719 8.01486 8.48162 8.25491 8.24157C8.49496 8.00152 8.82053 7.86667 9.16001 7.86667C9.49949 7.86667 9.82506 8.00152 10.0651 8.24157C10.3052 8.48162 10.44 8.80719 10.44 9.14667C10.44 9.48614 10.3052 9.81172 10.0651 10.0518C9.82506 10.2918 9.49949 10.4267 9.16001 10.4267Z" fill="black"/>
+<path d="M29.68 19.4267C29.68 15.64 25.8533 12.5734 21.1333 12.5734C16.4133 12.5734 12.5867 15.64 12.5867 19.4267C12.5867 23.2134 16.4133 26.28 21.1333 26.28C21.9067 26.28 22.6533 26.1734 23.36 26.0134L27.9733 28L26.3733 24.8C28.3733 23.5467 29.68 21.6267 29.68 19.4267ZM18.56 19C18.3068 19 18.0594 18.925 17.8489 18.7843C17.6384 18.6437 17.4743 18.4438 17.3774 18.2099C17.2806 17.976 17.2552 17.7186 17.3046 17.4703C17.354 17.222 17.4759 16.9939 17.6549 16.8149C17.8339 16.6359 18.062 16.514 18.3103 16.4646C18.5586 16.4152 18.8159 16.4406 19.0498 16.5375C19.2837 16.6343 19.4836 16.7984 19.6243 17.0089C19.7649 17.2194 19.84 17.4669 19.84 17.72C19.8533 18.4267 19.2667 19 18.56 19ZM23.6933 19C23.3539 19 23.0283 18.8652 22.7882 18.6251C22.5482 18.3851 22.4133 18.0595 22.4133 17.72C22.4133 17.3806 22.5482 17.055 22.7882 16.8149C23.0283 16.5749 23.3539 16.44 23.6933 16.44C24.0328 16.44 24.3584 16.5749 24.5984 16.8149C24.8385 17.055 24.9733 17.3806 24.9733 17.72C24.9733 18.0595 24.8385 18.3851 24.5984 18.6251C24.3584 18.8652 24.0328 19 23.6933 19Z" fill="black"/>
+</svg>

src/views/login/loginPage old.vue

@@ -0,0 +1,322 @@
+<template>
+	<!-- 全屏包裹容器 -->
+	<div class="loginBg">
+		<div class="loginBox" v-loading="loading">
+			<div class="login_top">
+				<img src="../../assets/school.png" alt="" />
+				<div class="top_title">深圳市荔园教育集团</div>
+				<div>AI智慧校园平台</div>
+			</div>
+			<div class="login_content">
+				账户
+				<div class="input-container">
+					<input
+						type="text"
+						placeholder="请输入账户"
+						class="input"
+						@change="getOrgData"
+						@keyup.enter="loginFn"
+						v-model="account"
+					/>
+				</div>
+				组织
+				<div class="input-container">
+					<!-- <input
+						type="text"
+						placeholder="请输入组织"
+						class="input"
+						@keyup.enter="loginFn"
+						v-model="org"
+					/> -->
+					<el-select class="input" :popper-append-to-body="false"  v-model="org" placeholder="请选择">
+						<el-option
+							v-for="item in OrgOptions"
+							:key="item.Uorg"
+							:label="item.name"
+							:value="item.Uorg">
+						</el-option>	
+					</el-select>
+				</div>
+				密码
+				<div class="input-container">
+					<input
+						type="password"
+						placeholder="请输入密码"
+						class="input"
+						@keyup.enter="loginFn"
+						v-model="password"
+					/>
+				</div>
+				<button class="confirm" @click="loginFn()">登录</button>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+import { mapActions } from "vuex";
+import axios from "axios";
+import qs from 'qs'
+import { API_CONFIG } from "@/common/apiConfig";
+
+export default {
+	name: "loginPage",
+	data() {
+		return {
+			org: "",
+			account: "",
+			password: "",
+			loading: false,
+			redirect: this.$route.query["redirect"],
+			// 组织列表
+			OrgOptions:[]
+		};
+	},
+	methods: {
+		...mapActions({
+			login: "user/login",
+		}),
+		loginFn() {
+			if (this.loading) return;
+
+			if (this.account.length <= 0) {
+				this.$message.error("请输入账号");
+				return;
+			}
+
+			if (this.password.length < 6 || /[\u4e00-\u9fa5]/.test(this.password)) {
+				this.$message.error("密码长度不少于6位或者密码包含特殊字符、中文");
+				return;
+			}
+
+			let orgValue = this.org ? "@" + this.org : "@cocorobo.cc";
+			let email = "";
+			const regEmail = new RegExp("^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$");
+			let str = this.account.replace(/(^\s*)|(\s*$)/g, "");
+
+			// 判断用户输入账户带不带后缀
+			if (!regEmail.test(str)) {
+				email = str + orgValue;
+			} else {
+				email = str;
+			}
+			let params = {
+				geetest_challenge: "",
+				geetest_validate: "",
+				geetest_seccode: "",
+				loginUsername: email.trim(),
+				loginPassword: window.btoa(this.password.trim()),
+			};
+			this.loading = true;
+			axios.defaults.withCredentials = true;
+			console.log("👇")
+			axios
+				.post("https://beta.api.cocorobo.cn/api/user", qs.stringify(params))
+				.then(async (res) => {
+					console.log("res", res);
+					let _data = res.data[0][0];
+					if (_data.active === 1) {
+						window.localStorage["identity"] = JSON.stringify(_data.identity);
+						this.$message.success("登录成功");
+						await this.login();
+						this.$router.push({ path: this.redirect || "/" });
+					} else {
+						this.$message.error("登录失败");
+					}
+					this.loading = false;
+				})
+				.catch((e) => {
+					if (e.response && e.response.data == "Wrong email or password") {
+						this.$message.error("账号或密码错误");
+					} else {
+						this.$message.error("登录失败");
+					}
+					this.loading = false;
+				});
+		},
+		async getLoading() {
+			// 检查用户是否已登录
+			const hasToken = this.$store.getters.token;
+			if (hasToken) {
+				// 如果已登录，直接重定向
+				this.$router.push({ path: this.redirect || "/" });
+				return;
+			}
+			const userid = await this.login();
+			if (userid) {
+				this.$router.push({ path: this.redirect || "/" });
+			}
+		},
+		// 输入账号获取组织
+		getOrgData(){
+			// console.log('111');
+			
+			let params = [
+                    {
+                        functionName: API_CONFIG.ajax_liYuanOrg.functionName,
+                        uname: this.account, 
+                    },
+                ];
+                
+                this.$ajax
+                    .post(API_CONFIG.baseUrl, params)
+                    .then((res) => {
+						console.log('res',res);
+						this.org = ''
+						this.OrgOptions = ''
+
+						this.OrgOptions = res.data[0]
+						if (this.OrgOptions.length == 1) {
+							this.org = this.OrgOptions[0].Uorg
+						}
+
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                        this.$message.error("获取组织失败");
+                    });
+		}
+	},
+	mounted() {
+		this.getLoading();
+	},
+};
+</script>
+<style scoped>
+ .el-select-dropdown.customDropdown {
+	width: 200px;
+	position: relative;
+	margin-left: -65px;
+	margin-top: -55px;
+	background-color: #fff;
+}
+.el-select-dropdown.customDropdown .el-select-dropdown__item {
+	display: inline-block;
+	width: 100%;
+	padding: 0;
+	overflow: initial;/* 允许内容溢出 */
+}
+.input >>> .el-select-dropdown{
+	min-width: 330px !important;
+}
+.loginBg {
+	width: 100vw;
+	height: 100vh;
+	background-image: url("../../assets/login.png");
+	background-size: cover;
+	background-position: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+.loginBox {
+	height: 533px;
+	background-color: #fff;
+	border-radius: 10px;
+	/* 添加投影提升层次感 */
+	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.loginBox img {
+	width: 45px;
+	height: 37px;
+}
+
+.login_top {
+	margin-top: 36px;
+	text-align: center;
+}
+
+.top_title {
+	font-size: 25px;
+	font-weight: 700;
+}
+
+.login_top div {
+	margin-top: 12px;
+	color: #69727d;
+}
+.login_content {
+	margin: 33px;
+	font-size: 14px;
+	color: #59616f;
+}
+.input {
+	outline: none;
+	width: 344px;
+	height: 42px;
+	border-radius: 10px;
+	border: 1px solid #d1d5db;
+	padding-left: 40px;
+	font-size: 16px;
+	margin-top: 5px;
+	margin-bottom: 14px;
+	color: #a3a9b4;
+	line-height: 42px;
+}
+
+.input >>> .el-input__inner{
+	border: none;
+	padding: 0;
+	border-radius: 15px;
+}
+/* 设置占位符文字颜色 */
+.input::placeholder {
+	color: #a3a9b4; /* 替换为您想要的占位符颜色 */
+	opacity: 1; /* 确保占位符不透明 */
+}
+
+.input-container {
+	position: relative;
+}
+.input-container:nth-child(2)::before {
+	content: "";
+	background-image: url("../../assets/organzation.png"); /* 组织号图片 */
+	background-size: 20px 20px; /* 设置图片大小 */
+	background-repeat: no-repeat;
+	position: absolute;
+	left: 10px; /* 图片距离输入框左边的距离 */
+	top: 39%; /* 垂直居中 */
+	transform: translateY(-50%); /* 垂直居中 */
+	width: 20px; /* 图片宽度 */
+	height: 20px; /* 图片高度 */
+}
+
+.input-container:nth-child(1)::before {
+	content: "";
+	background-image: url("../../assets/personal.png"); /* 账户图片 */
+	background-size: 20px 20px; /* 设置图片大小 */
+	background-repeat: no-repeat;
+	position: absolute;
+	left: 10px; /* 图片距离输入框左边的距离 */
+	top: 41%; /* 垂直居中 */
+	transform: translateY(-50%); /* 垂直居中 */
+	width: 20px; /* 图片宽度 */
+	height: 20px; /* 图片高度 */
+}
+
+.input-container:nth-child(3)::before {
+	content: "";
+	background-image: url("../../assets/password.png"); /* 密码图片 */
+	background-size: 20px 20px; /* 设置图片大小 */
+	background-repeat: no-repeat;
+	position: absolute;
+	left: 10px; /* 图片距离输入框左边的距离 */
+	top: 41%; /* 垂直居中 */
+	transform: translateY(-50%); /* 垂直居中 */
+	width: 20px; /* 图片宽度 */
+	height: 20px; /* 图片高度 */
+}
+.confirm {
+	width: 384px;
+	height: 40px;
+	background: #0354d7;
+	border: none;
+	border-radius: 9px;
+	color: #fff;
+	font-size: 16px;
+	cursor: pointer;
+}
+</style>

src/views/login/loginPage.vue

@@ -1,53 +1,128 @@
 <template>
-	<!-- 全屏包裹容器 -->
-	<div class="loginBg">
-		<div class="loginBox" v-loading="loading">
-			<div class="login_top">
-				<img src="../../assets/school.png" alt="" />
-				<div class="top_title">深圳市荔园教育集团</div>
-				<div>AI智慧校园平台</div>
-			</div>
-			<div class="login_content">
-				账户
-				<div class="input-container">
-					<input
-						type="text"
-						placeholder="请输入账户"
-						class="input"
-						@change="getOrgData"
-						@keyup.enter="loginFn"
-						v-model="account"
-					/>
+	<div class="loginPage">
+		<div class="lp_left">
+			<img
+				v-if="form.basics && form.basics.loginBanner"
+				:src="form.basics.loginBanner"
+			/>
+			<img
+				v-else
+				src="@/assets/login.png"
+			/>
+		</div>
+		<div class="lp_right">
+			<div class="lp_r_box">
+				<div class="lp_r_b_logo" v-if="form.basics">
+					<div>
+						<el-image
+							v-if="form.basics.loginLogo"
+							style="width: 35px; height: 35px; border-radius: 50%"
+							:src="form.basics.loginLogo"
+						></el-image>
+					</div>
+					<span>{{ showName }}</span>
+				</div>
+				<span v-if="['default', 'weChat'].includes(loginType)">登录</span>
+				<span v-if="['bind'].includes(loginType)">绑定账号</span>
+				<div class="lp_r_b_formArea" v-loading="loading">
+					<div class="fa_input" v-if="['default', 'bind'].includes(loginType)">
+						<div class="fa_i_item">
+							<span>账号</span>
+							<div>
+								<input
+									type="text"
+									placeholder="请输入账号"
+									v-model="account"
+									@change="getOrgData"
+									@keyup.enter="loginFn"
+								/>
+							</div>
+						</div>
+
+						<div class="fa_i_item">
+							<span>组织</span>
+							<div>
+								<el-select
+									v-model="org"
+									:popper-append-to-body="false"
+									placeholder="请选择"
+									:disabled="
+										(OrgOptions.length == 1 && org) || OrgOptions.length == 0
+									"
+								>
+									<el-option
+										v-for="item in OrgOptions"
+										:key="item.Uorg"
+										:label="item.name"
+										:value="item.Uorg"
+									>
+									</el-option>
+								</el-select>
+								<!-- <input
+									type="text"
+									placeholder="请输入组织号"
+									v-model="org"
+									@keyup.enter="loginFn"
+								/> -->
+							</div>
+						</div>
+
+						<div class="fa_i_item">
+							<span>密码</span>
+							<div>
+								<input
+									type="password"
+									placeholder="请输入密码"
+									v-model="password"
+									@keyup.enter="loginFn"
+								/>
+							</div>
+						</div>
+					</div>
+					<div class="fa_weChat" v-if="['weChat'].includes(loginType)">
+						<div id="QRcode" @click="loginType = 'bind'" class="QRcode"></div>
+					</div>
+				</div>
+
+				<div
+					class="lp_r_b_btn"
+					v-if="loginType == 'default'"
+					@click="loginFn"
+					v-loading="loading"
+				>
+					登录
 				</div>
-				组织
-				<div class="input-container">
-					<!-- <input
-						type="text"
-						placeholder="请输入组织"
-						class="input"
-						@keyup.enter="loginFn"
-						v-model="org"
-					/> -->
-					<el-select class="input" :popper-append-to-body="false"  v-model="org" placeholder="请选择">
-						<el-option
-							v-for="item in OrgOptions"
-							:key="item.Uorg"
-							:label="item.name"
-							:value="item.Uorg">
-						</el-option>	
-					</el-select>
+				<div
+					class="lp_r_b_btn"
+					v-if="loginType == 'weChat'"
+					@click="loginType = 'default'"
+				>
+					账号密码登录
 				</div>
-				密码
-				<div class="input-container">
-					<input
-						type="password"
-						placeholder="请输入密码"
-						class="input"
-						@keyup.enter="loginFn"
-						v-model="password"
-					/>
+				<div
+					class="lp_r_b_btn"
+					v-if="loginType == 'bind'"
+					@click="loginFn"
+					v-loading="loading"
+				>
+					确认绑定
+				</div>
+				<div class="lp_r_b_line">
+					<template v-if="['default', 'weChat'].includes(loginType) && false">
+						<div></div>
+						<span>其他登录方式</span>
+						<div></div>
+					</template>
+				</div>
+				<div class="lp_r_b_iconBtn">
+					<div
+						@click="loginType = 'weChat'"
+						v-show="false"
+						v-if="['default', 'weChat'].includes(loginType)"
+					>
+						<img src="@/assets/login/wechat.svg" />
+					</div>
 				</div>
-				<button class="confirm" @click="loginFn()">登录</button>
 			</div>
 		</div>
 	</div>
@@ -55,7 +130,7 @@
 <script>
 import { mapActions } from "vuex";
 import axios from "axios";
-import qs from 'qs'
+import qs from "qs";
 import { API_CONFIG } from "@/common/apiConfig";
 
 export default {
@@ -66,9 +141,14 @@ export default {
 			account: "",
 			password: "",
 			loading: false,
+			loginType: "default",
 			redirect: this.$route.query["redirect"],
+			org2: this.$route.query["org"],
+			oid: this.$route.query["oid"],
 			// 组织列表
-			OrgOptions:[]
+			OrgOptions: [],
+			form: {},
+			showName:"",
 		};
 	},
 	methods: {
@@ -90,7 +170,9 @@ export default {
 
 			let orgValue = this.org ? "@" + this.org : "@cocorobo.cc";
 			let email = "";
-			const regEmail = new RegExp("^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$");
+			const regEmail = new RegExp(
+				"^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$"
+			);
 			let str = this.account.replace(/(^\s*)|(\s*$)/g, "");
 
 			// 判断用户输入账户带不带后缀
@@ -99,39 +181,43 @@ export default {
 			} else {
 				email = str;
 			}
-			let params = {
-				geetest_challenge: "",
-				geetest_validate: "",
-				geetest_seccode: "",
-				loginUsername: email.trim(),
-				loginPassword: window.btoa(this.password.trim()),
-			};
-			this.loading = true;
-			axios.defaults.withCredentials = true;
-			console.log("👇")
-			axios
-				.post("https://beta.api.cocorobo.cn/api/user", qs.stringify(params))
-				.then(async (res) => {
-					console.log("res", res);
-					let _data = res.data[0][0];
-					if (_data.active === 1) {
-						window.localStorage["identity"] = JSON.stringify(_data.identity);
-						this.$message.success("登录成功");
-						await this.login();
-						this.$router.push({ path: this.redirect || "/" });
-					} else {
-						this.$message.error("登录失败");
-					}
-					this.loading = false;
-				})
-				.catch((e) => {
-					if (e.response && e.response.data == "Wrong email or password") {
-						this.$message.error("账号或密码错误");
-					} else {
-						this.$message.error("登录失败");
-					}
-					this.loading = false;
-				});
+			if (this.loginType == "default") {
+				let params = {
+					geetest_challenge: "",
+					geetest_validate: "",
+					geetest_seccode: "",
+					loginUsername: email.trim(),
+					loginPassword: window.btoa(this.password.trim()),
+				};
+				this.loading = true;
+				axios.defaults.withCredentials = true;
+				console.log("👇");
+				axios
+					.post("https://beta.api.cocorobo.cn/api/user", qs.stringify(params))
+					.then(async (res) => {
+						console.log("res", res);
+						let _data = res.data[0][0];
+						if (_data.active === 1) {
+							window.localStorage["identity"] = JSON.stringify(_data.identity);
+							this.$message.success("登录成功");
+							await this.login();
+							this.$router.push({ path: this.redirect || "/" });
+						} else {
+							this.$message.error("登录失败");
+						}
+						this.loading = false;
+					})
+					.catch((e) => {
+						if (e.response && e.response.data == "Wrong email or password") {
+							this.$message.error("账号或密码错误");
+						} else {
+							this.$message.error("登录失败");
+						}
+						this.loading = false;
+					});
+			} else if (this.loginType == "bind") {
+				this.$message.info("绑定账号");
+			}
 		},
 		async getLoading() {
 			// 检查用户是否已登录
@@ -147,176 +233,274 @@ export default {
 			}
 		},
 		// 输入账号获取组织
-		getOrgData(){
-			// console.log('111');
-			
+		getOrgData() {
 			let params = [
-                    {
-                        functionName: API_CONFIG.ajax_liYuanOrg.functionName,
-                        uname: this.account, 
-                    },
-                ];
-                
-                this.$ajax
-                    .post(API_CONFIG.baseUrl, params)
-                    .then((res) => {
-						console.log('res',res);
-						this.org = ''
-						this.OrgOptions = ''
-
-						this.OrgOptions = res.data[0]
-						if (this.OrgOptions.length == 1) {
-							this.org = this.OrgOptions[0].Uorg
-						}
+				{
+					functionName: API_CONFIG.ajax_liYuanOrg.functionName,
+					uname: this.account,
+				},
+			];
+			this.$ajax
+				.post(API_CONFIG.baseUrl, params)
+				.then((res) => {
+					console.log("res", res);
+					this.org = "";
+					this.OrgOptions = "";
 
-                    })
-                    .catch((err) => {
-                        console.log(err);
-                        this.$message.error("获取组织失败");
-                    });
-		}
+					this.OrgOptions = res.data[0];
+					if (this.OrgOptions.length == 1) {
+						this.org = this.OrgOptions[0].Uorg;
+						this.$forceUpdate();
+					}
+				})
+				.catch((err) => {
+					console.log(err);
+					this.$message.error("获取组织失败");
+				});
+		},
+		//获取组织或学校的数据
+		getOrdOidData() {
+			let params = [
+				{
+					functionName: API_CONFIG.ajax_schoolPermission.functionName, // 调用存储过程的名称
+					org: this.org2, //组织id
+					oid: this.oid, //学校id
+				},
+			];
+			// 发起请求
+			this.$ajax
+				.post(API_CONFIG.baseUrl, params)
+				.then((res) => {
+					let data = res.data[0];
+					console.log('data', data)
+					this.form = JSON.parse(data[0].json);
+					this.showName = data[0].name
+				})
+				.catch((err) => {
+					console.error("请求失败，错误信息：", err);
+				});
+		},
 	},
 	mounted() {
-		this.getLoading();
+		// this.getLoading();
+		this.getOrdOidData();
 	},
 };
 </script>
 <style scoped>
- .el-select-dropdown.customDropdown {
-	width: 200px;
-	position: relative;
-	margin-left: -65px;
-	margin-top: -55px;
-	background-color: #fff;
+.loginPage {
+	width: 100vw;
+	height: 100vh;
+	background-color: white;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
-.el-select-dropdown.customDropdown .el-select-dropdown__item {
-	display: inline-block;
-	width: 100%;
-	padding: 0;
-	overflow: initial;/* 允许内容溢出 */
+
+.lp_left {
+	max-width: 50%;
+	width: 50%;
+	max-height: 100%;
+	height: 100%;
+	overflow: hidden;
+	box-sizing: border-box;
 }
-.input >>> .el-select-dropdown{
-	min-width: 330px !important;
+
+.lp_left > img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	border-radius: 0 150px 0 0;
 }
-.loginBg {
-	width: 100vw;
-	height: 100vh;
-	background-image: url("../../assets/login.png");
-	background-size: cover;
-	background-position: center;
+
+.lp_right {
+	width: 50%;
+	min-width: 520px;
+	height: 100%;
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-		"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
-.loginBox {
-	height: 533px;
-	background-color: #fff;
-	border-radius: 10px;
-	/* 添加投影提升层次感 */
-	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+.lp_r_box {
+	width: 500px;
+	height: auto;
+	box-sizing: border-box;
+	padding: 20px;
 }
 
-.loginBox img {
-	width: 45px;
-	height: 37px;
+.lp_r_b_logo {
+	display: flex;
+	align-items: center;
 }
 
-.login_top {
-	margin-top: 36px;
-	text-align: center;
+.lp_r_b_logo > span {
+	margin-left: 15px;
+	font-weight: bold;
+	font-size: 18px;
 }
 
-.top_title {
-	font-size: 25px;
-	font-weight: 700;
+.lp_r_box > span {
+	font-size: 48px;
+	font-weight: bold;
+	margin: 40px 0;
+	display: block;
 }
 
-.login_top div {
-	margin-top: 12px;
-	color: #69727d;
+.lp_r_b_formArea {
+	width: 100%;
+	height: 300px;
+	margin-bottom: 40px;
 }
-.login_content {
-	margin: 33px;
-	font-size: 14px;
-	color: #59616f;
+
+.fa_input {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-around;
 }
-.input {
+
+.fa_i_item {
+	width: 100%;
+	height: 70px;
+}
+
+.fa_i_item > span {
+	font-size: 16px;
+	color: rgba(0, 0, 0, 0.9);
+	font-weight: 600;
+}
+
+.fa_i_item > div {
+	width: 100%;
+	height: 45px;
+	border: solid 1px rgba(213, 213, 213, 1);
+	margin-top: 15px;
+	border-radius: 8px;
+	transition: 0.5s;
+}
+
+.fa_i_item > div > input {
+	width: 100%;
+	height: 100%;
+	border: none;
 	outline: none;
-	width: 344px;
-	height: 42px;
-	border-radius: 10px;
-	border: 1px solid #d1d5db;
-	padding-left: 40px;
+	text-indent: 1em;
+
+	color: #000;
 	font-size: 16px;
-	margin-top: 5px;
-	margin-bottom: 14px;
-	color: #a3a9b4;
-	line-height: 42px;
+	background: none;
+}
+
+.fa_i_item > div >>> .el-select {
+	width: 100%;
+	height: 100%;
 }
 
-.input >>> .el-input__inner{
+.fa_i_item > div >>> .el-select input {
 	border: none;
-	padding: 0;
-	border-radius: 15px;
+	outline: none;
+	background: none;
+	text-indent: 1em;
+	font-size: 16px;
+	height: 45px;
+	padding-left: 0;
+	color: #000;
 }
-/* 设置占位符文字颜色 */
-.input::placeholder {
-	color: #a3a9b4; /* 替换为您想要的占位符颜色 */
-	opacity: 1; /* 确保占位符不透明 */
+
+/* .fa_i_item > input {
+	width: 100%;
+	height: 45px;
+	border: solid 1px rgba(213, 213, 213, 1);
+	outline: none;
+	border-radius: 8px;
+	margin-top: 15px;
+	text-indent: 1em;
+	transition: 0.5s;
+	color: #000;
+	font-size: 16px;
+} */
+
+.fa_i_item > div >>> input::placeholder {
+	color: rgba(142, 142, 147, 1);
 }
 
-.input-container {
-	position: relative;
+.fa_i_item > div:focus-within {
+	border-color: #006afe;
 }
-.input-container:nth-child(2)::before {
-	content: "";
-	background-image: url("../../assets/organzation.png"); /* 组织号图片 */
-	background-size: 20px 20px; /* 设置图片大小 */
-	background-repeat: no-repeat;
-	position: absolute;
-	left: 10px; /* 图片距离输入框左边的距离 */
-	top: 39%; /* 垂直居中 */
-	transform: translateY(-50%); /* 垂直居中 */
-	width: 20px; /* 图片宽度 */
-	height: 20px; /* 图片高度 */
+
+.fa_weChat {
+	width: 300px;
+	height: 300px;
+	margin: 0 auto;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
-.input-container:nth-child(1)::before {
-	content: "";
-	background-image: url("../../assets/personal.png"); /* 账户图片 */
-	background-size: 20px 20px; /* 设置图片大小 */
-	background-repeat: no-repeat;
-	position: absolute;
-	left: 10px; /* 图片距离输入框左边的距离 */
-	top: 41%; /* 垂直居中 */
-	transform: translateY(-50%); /* 垂直居中 */
-	width: 20px; /* 图片宽度 */
-	height: 20px; /* 图片高度 */
+.fa_weChat > .QRcode {
+	width: 80%;
+	height: 80%;
+	background-color: black;
 }
 
-.input-container:nth-child(3)::before {
-	content: "";
-	background-image: url("../../assets/password.png"); /* 密码图片 */
-	background-size: 20px 20px; /* 设置图片大小 */
-	background-repeat: no-repeat;
-	position: absolute;
-	left: 10px; /* 图片距离输入框左边的距离 */
-	top: 41%; /* 垂直居中 */
-	transform: translateY(-50%); /* 垂直居中 */
-	width: 20px; /* 图片宽度 */
-	height: 20px; /* 图片高度 */
+.lp_r_b_btn {
+	width: 100%;
+	height: 50px;
+	background-color: rgba(0, 106, 254, 1);
+	border-radius: 10px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: #fff;
+	cursor: pointer;
+	transition: 0.3s;
 }
-.confirm {
-	width: 384px;
+
+.lp_r_b_btn:hover {
+	background-color: rgb(3, 87, 206);
+}
+
+.backBtn {
+	background-color: #d9d9d9;
+	color: #000;
+}
+
+.backBtn:hover {
+	background-color: #adadad;
+}
+
+.lp_r_b_line {
+	width: 100%;
+	height: 20px;
+	margin: 40px 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.lp_r_b_line > div {
+	width: calc(100% / 2 - 70px);
+	height: 1px;
+	background-color: rgba(0, 0, 0, 0.3);
+}
+
+.lp_r_b_line > span {
+	display: flex;
+	margin: 0 20px;
+}
+
+.lp_r_b_iconBtn {
+	width: 100%;
 	height: 40px;
-	background: #0354d7;
-	border: none;
-	border-radius: 9px;
-	color: #fff;
-	font-size: 16px;
+	display: flex;
+	justify-content: center;
+}
+
+.lp_r_b_iconBtn > div {
+	width: 32px;
+	height: 32px;
 	cursor: pointer;
 }
 </style>