pbl_admin_table/src/views/login/loginPage.vue

<template>
	<div class="loginPage">
		<div class="lp_left">
			<img :src="showLoginMessage.banner" />
		</div>
		<div class="lp_right">
			<div class="lp_r_box">
				<div class="lp_r_b_logo">
					<div>
						<el-image
							v-if="showLoginMessage.logo"
							style="width: 35px; height: 35px; border-radius: 50%"
							:src="showLoginMessage.logo"
						></el-image>
					</div>
					<span v-if="showLoginMessage.name">{{ showLoginMessage.name }}</span>
					<span style="margin: 0;" v-else>可可乐博智慧教育平台</span>
				</div>
				<span v-if="['default', 'weChat','orgL'].includes(loginType)">登录</span>
				<span v-if="['bind'].includes(loginType)">绑定账号</span>
				<div class="lp_r_b_formArea">
					<div class="fa_input" v-if="['default', 'bind','orgL'].includes(loginType)">
						<div class="fa_i_item" style="position: relative;" v-if="loginType == 'orgL'">
							<span>组织号</span>
							<div>
								<input
									type="text"
									placeholder="请输入组织号"
									v-model="SuffixData"
									@input="getSuffix"
								/>
							</div>
							<div style="border: none;font-size: 12px;position: absolute;left: 0;bottom: -70%;" v-if="SuffixData.trim()">
								{{ orginfo.length ? orginfo[0].name :'该学校编号不存在' }}
							</div>
						</div>	
						<div class="fa_i_item">
							<span>账号</span>
							<div>
								<!-- @change="getOrgData" -->
								<input
									type="text"
									placeholder="请输入账号"
									v-model="account"
									
									@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
												? item.name + '-' + item.schoolName
												: item.schoolName
										"
										:value="item.Uorg"
									>
									</el-option>
								</el-select>
							</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" class="QRcode" ref="QRcode"></div>
						<!-- @click="loginType = 'bind'" -->
					</div>
				</div>

				<div
					class="lp_r_b_btn"
					v-if="['default','orgL'].includes(loginType)"
					@click="loginFn"
					v-loading="loading"
				>
					登录
				</div>
				<div
					class="lp_r_b_btn"
					v-if="loginType == 'weChat'"
					style="opacity: 0; cursor: default"
				>
					账号密码登录
				</div>
				<div class="btn_box" v-if="loginType == 'bind'">
					<div class="lp_r_b_btn" @click="loginFn" v-loading="loading">
						确认绑定
					</div>
					<div class="lp_r_b_btn" @click="loginType = 'default'">返回登录</div>
				</div>
				<div class="lp_r_b_line">
					<template v-if="['default', 'weChat','orgL'].includes(loginType)">
						<div></div>
						<span>其他登录方式</span>
						<div></div>
					</template>
				</div>
				<div class="lp_r_b_iconBtn">

					<div
						@click="loginType = 'orgL'"
						v-if="['default', 'weChat','orgL'].includes(loginType) && (allowOrgList.findIndex((i) => i.area) == -1)"
					>
						<el-tooltip effect="dark" content="组织号登录" placement="bottom">
							<img :src="loginType == 'orgL' ? require('../../assets/login/zzl.svg') :require('../../assets/login/orgh.svg') "
							:class="[loginType == 'orgL' ? 'backWin' : '']" />
						</el-tooltip>
					</div>

					<div
						@click="wechatLogin"
						v-if="['default', 'weChat','orgL'].includes(loginType)"
					>
						<el-tooltip effect="dark" content="微信登录" placement="bottom">
							<img :src="loginType == 'weChat' ? require('../../assets/login/wxl.svg') :require('../../assets/login/wxh.svg') "
							:class="[loginType == 'weChat' ? 'backWin' : '']" />
						</el-tooltip>
					</div>

					<div
						@click="loginType = 'default',SuffixData = ''"
						v-if="['default', 'weChat','orgL'].includes(loginType)"
					>
						<el-tooltip effect="dark" content="账号密码登录" placement="bottom">
							<img :src="loginType == 'default' ? require('../../assets/login/zhl.svg') :require('../../assets/login/zhh.svg') "
							:class="[loginType == 'default' ? 'backWin' : '']" />
						</el-tooltip>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { mapActions } from "vuex";
import axios from "axios";
import qs from "qs";
import { API_CONFIG } from "@/common/apiConfig";
import "@/common/wxLogin";
import { getUser } from "@/api/user";
import { loginOut } from "@/api/user";
import { GetSuffix } from "@/api/user";

import { myMixin } from "@/mixins/mixin.js"

export default {
	mixins: [ myMixin ],
	name: "loginPage",
	data() {
		return {
			// 判断显示组织号区域 
			SuffixShow: false,
			// 组织号查询区域结果
			SuffixData:'',
			orginfo:[],
			// 后缀 
			org: "",
			account: "",
			password: "",
			loading: false,
			loginType: "default",
			redirect: this.$route.query["redirect"],
			org2:
				this.$route.query["org"] ||
				(window.location.href.includes("/liyuan")
					? window.sessionStorage.getItem("org2")
					: ""),
			oid: this.$route.query["oid"],
			// 组织列表
			OrgOptions: [],
			form: {},
			showName: "",
			oloading: false,
			openid: "",
			allowOrgList: [
				{
					area:
						parent.location.href.includes("lyxx") ||
						parent.location.href.includes("liyuan"),
					banner:"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/20250421-1139511745206807965.jpg",
					logo:"https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/image%2051744962188550.svg",
					name:"荔园小学教育集团",
					list: [
						"3823a6a5-1b6e-11f0-a66a-005056924926",
						"292e34dc-1b6e-11f0-a66a-005056924926",
						"21d6b367-1b6e-11f0-a66a-005056924926",
						"1a1a172d-1b6e-11f0-a66a-005056924926",
						"1197f86b-1b6e-11f0-a66a-005056924926",
						"f235659b-1b6d-11f0-a66a-005056924926",
						"d87b62d3-1b6d-11f0-a66a-005056924926",
						"c25ea59b-1b6d-11f0-a66a-005056924926",
					],
				},
			],
		};
	},
	watch: {
		loginType(newValue) {
			if (newValue != "weChat") {
				this.$refs.QRcode.innerHTML = "";
			}
		},
	},
	computed:{
		showLoginMessage(){
			let _result = {
				banner:require("@/assets/login2.jpg"),
				logo:"",
				name:"",
			};

			if(this.allowOrgList.findIndex((i) => i.area) != -1){
				let _index = this.allowOrgList.findIndex((i) => i.area);
				let _obj = this.allowOrgList[_index];
				_result.banner = _obj.banner;
				_result.name = _obj.name;
				_result.logo = _obj.logo
			}


			return _result;
		},
	},
	methods: {
		...mapActions({
			login: "user/login",
			logout: "user/logout",
		}),
		// 获取组织后缀
		async getSuffix(){
			let res = await GetSuffix({mode: this.SuffixData})	
			console.log('res.data[0]',res.data[0]);
				
			if (res.data[0].length) {
				this.orginfo = res.data[0]
				this.org = this.orginfo[0].mail
			}else{
				this.orginfo = []
				this.org = ''
			}
		},
		async loginFn() {
			if (this.loading) return;
			if (this.loginType != 'orgL') {
				await this.getOrgData();	
			}

			const regEmail = new RegExp(
				"^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$"
			);
			if (this.account.length <= 0) {
				this.$message.error("请输入账号");
				return;
			}

			if (this.password.length < 6 || /[\u4e00-\u9fa5]/.test(this.password)) {
				this.$message.error("密码长度不少于6位或者密码包含特殊字符、中文");
				return;
			}

			if (this.allowOrgList.findIndex((i) => i.area) != -1) {
				let _index = this.allowOrgList.findIndex((i) => i.area);
				let _list = this.allowOrgList[_index].list;
				if (this.OrgOptions.find((i) => i.Uorg == this.org) && !_list.includes(this.OrgOptions.find((i) => i.Uorg == this.org).id)
				) {
					return this.$message.error("账号不可登录，请使用您的专属网址");
				}
			} else {
				let mergedList = this.allowOrgList.reduce((acc, curr) => {
					return [...acc, ...curr.list];
				}, []);
				if (
					mergedList.includes(
						this.OrgOptions.find((i) => i.Uorg == this.org).id
					)
				) {
					return this.$message.error("账号不可登录，请使用您的专属网址");
				}
			}
			let str = this.account.replace(/(^\s*)|(\s*$)/g, "");
			if (!this.org && !regEmail.test(str)) {
				// this.$message.error(
				// 	"请在账号后添加组织后缀（账号@组织号.com 如：123456@cocorobo.com）"
				// );
				this.$message.error(
					"该账号须使用“组织号登陆”"
				);
				this.loginType = 'orgL'
				return
			}

			let orgValue = this.org ? "@" + this.org : "@cocorobo.cc";
			let email = "";

			// 判断用户输入账户带不带后缀
			if (!regEmail.test(str)) {
				email = str + orgValue;
			} else {
				email = str;
			}
			if (['default','orgL'].includes(this.loginType)) {
				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];
						let userjson = await getUser({ userid: _data.userid });
						console.log("userjson", userjson);
						if (_data.active === 1) {
							window.localStorage["identity"] = JSON.stringify(_data.identity);
							this.$message.success("登录成功");
							window.topU.U.UF.Cookie.set("cocoroboLoginType=2");
							window.topU ? window.topU.US.userInfo = _data : window.top.US.userInfo = _data
							await this.login();
							this.addOp3('1', "", { type:this.prefixL + "login" }, "success",_data.userid)
							if (
								userjson.data[0][0].type == 1 &&
								userjson.data[0][0].role == 1 &&
								userjson.data[0][0].rrole == 1
							) {
								this.$router.push({ path: "/kanban" });
							} else {
								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("绑定账号");
				let data = await this.$ajax.post(API_CONFIG.baseUrl2 + "checkOpenId", [
					{ email: email },
				]);
				if (!data.data[0].length) {
					this.$message.error("未查找到对应账号请重新输入");
					return;
				}
				if (data.data[0][0].thirdpartyid) {
					this.$message.error("该账号已绑定微信登录请重新输入");
					return;
				}

				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];
						let userjson = await getUser({ userid: _data.userid });
						console.log("userjson", userjson);
						if (_data.active === 1) {
							await this.$ajax.post(API_CONFIG.baseUrl2 + "UpdateOpenId", [
								{ userid: _data.userid, openid: this.openid },
							]);
							window.localStorage["identity"] = JSON.stringify(_data.identity);
							this.$message.success("绑定成功");
							await this.login();
							if (
								userjson.data[0][0].type == 1 &&
								userjson.data[0][0].role == 1 &&
								userjson.data[0][0].rrole == 1
							) {
								this.$router.push({ path: "/kanban" });
							} else {
								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() {
			return new Promise((resolve) => {
				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 = [];

						let getList = res.data[0];

						// if (this.allowOrgList.findIndex((i) => i.area) != -1) {
						// 	let _index = this.allowOrgList.findIndex((i) => i.area);
						// 	let _list = this.allowOrgList[_index].list;
						// 	getList = getList.filter((i) => _list.includes(i.id));
						// } else {
						// 	let mergedList = this.allowOrgList.reduce((acc, curr) => {
						// 		return [...acc, ...curr.list];
						// 	}, []);
						// 	getList = getList.filter((i) => !mergedList.includes(i.id));
						// }

						this.OrgOptions = getList;
						if (this.OrgOptions.length == 1) {
							this.org = this.OrgOptions[0].Uorg;
						} else if (this.OrgOptions.length > 0) {
							
							// liyuan走这里
							if(this.allowOrgList.findIndex((i) => i.area) != -1){
								console.log('1111');
								try {
									let _index = this.allowOrgList.findIndex((i) => i.area);
									let _list = this.allowOrgList[_index].list;
									this.org = this.OrgOptions.filter(i=>_list.includes(i.id))[0].Uorg;
								} catch (error) {
									console.log(error);
									return this.$message.error("账号不可登录，请使用您的专属网址");
								}
							}else{
							// 	// admin走这里
								console.log('2222');
								if (this.allowOrgList.findIndex((i) => i.area) != -1) {
									this.$message.error("请输入账号后缀");
								}else{
									this.$message.error("该账号须使用“组织号登陆”");
									this.loginType = 'orgL'
								}

							// 	let mergedList = this.allowOrgList.reduce((acc, curr) => {
							// 	return [...acc, ...curr.list];
							// 	}, []);
							// 	if(this.OrgOptions.filter(i=>!mergedList.includes(i.id)).length==1){
							// 		this.org = this.OrgOptions.filter(i=>!mergedList.includes(i.id))[0].Uorg;
							// 	}

							// }
							// if (this.OrgOptions.map((i) => i.Uorg).includes("@cocorobo.cc")) {
							// 	this.org = "@cocorobo.cc";
							// } else {
							// 	this.org = this.OrgOptions[0].Uorg;
							}
						}
						resolve();
					})
					.catch((err) => {
						console.log(err);
					});
			});
		},
		//获取组织或学校的数据
		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 = this.form.basics.title || data[0].name;
				})
				.catch((err) => {
					console.error("请求失败，错误信息：", err);
				});
		},
		wechatLogin() {
			this.loginType = "weChat";
			setTimeout(() => {
				const randomState = Math.random().toString(36).substring(2); // 生成随机状态
				// eslint-disable-next-line no-undef
				new WxLogin({
					self_redirect: true,
					id: "QRcode",
					appid: "wxe9d7fff3c659445f",
					scope: "snsapi_login",
					redirect_uri: encodeURIComponent("https://cocorobo.cn/weixin.html"), //https://liyuan.cocorobo.cn/#/wxTest
					state: randomState,
					style: "black",
					href: "data:text/css;base64,LmltcG93ZXJCb3gge2Rpc3BsYXk6IGZsZXg7fQouaW1wb3dlckJveCAucXJjb2RlIHt3aWR0aDogMjMycHg7IGhlaWdodDogMjMycHh9Ci5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9Ci5pbXBvd2VyQm94IC5pbmZvIHtkaXNwbGF5OiBub25lO30KLmxvZ2luUGFuZWx7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTtkaXNwbGF5OmZsZXg7ZmxleC1kaXJlY3Rpb246Y29sdW1uO2FsaWduLWl0ZW1zOmNlbnRlcjtqdXN0aWZ5LWNvbnRlbnQ6Y2VudGVyO30KLnN0YXR1c19pY29uIHtkaXNwbGF5OiBub25lfQoud2ViX3FyY29kZV9wYW5lbF9hcmVhe2hlaWdodDoxMDAlO3dpZHRoOjEwMCU7ZGlzcGxheTpmbGV4O2FsaWduLWl0ZW1zOmNlbnRlcjtqdXN0aWZ5LWNvbnRlbnQ6Y2VudGVyO30K",
					onReady: function (isReady) {
						console.log(isReady);
					},
				});
				setTimeout(() => {
					let iframe = this.$refs.QRcode.querySelector("iframe");
					iframe.style.width = "100%";
					iframe.style.height = "100%";
				}, 0);
			}, 0);
		},
		async getOpenId(openid) {
			// oiztX1dwR-W2mBJ5HcvaSEB8yKGY
			axios.defaults.withCredentials = false;
			let params = {
				openid: openid,
			};
			this.openid = openid;
			axios.defaults.withCredentials = true;
			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];
					// let userData = await this.ajax.get("https://pbl.cocorobo.cn/api/pbl/selectUser/selectUser", { userid: _data.userid });
					// let _uorg = userData.data[0][0].org;
					this.account = _data.username;
					await this.getOrgData();

					// if (
					// 	(this.allowOrgList.find((i) => i.id == this.org2) &&
					// 		parent.location.href.includes("lyxx")) ||
					// 	parent.location.href.includes("liyuan")
					// ) {
					// 	let _list = this.allowOrgList.find((i) => i.id == this.org2).list;
					// 	let _nowOrgId = this.OrgOptions.find((i) => i.Uorg == this.org).id;
					// 	if (!_list.includes(_nowOrgId)) {
					// 		this.wechatLogin();
					// 		await loginOut();
					// 		await this.logout();
					// 		return this.$message.error("该组织/学校不允许登录");
					// 	}
					// 	window.sessionStorage.setItem("org2", this.org2);
					// }

					if (this.allowOrgList.findIndex((i) => i.area) != -1) {
						let _index = this.allowOrgList.findIndex((i) => i.area);
						let _list = this.allowOrgList[_index].list;
						if (this.OrgOptions.find((i) => i.Uorg == this.org) && 
							!_list.includes(
								this.OrgOptions.find((i) => i.Uorg == this.org).id
							)
						) {
							this.wechatLogin();
							await loginOut();
							await this.logout();
							return this.$message.error("账号不可登陆，请联系管理员。");
						}
					} else {
						let mergedList = this.allowOrgList.reduce((acc, curr) => {
							return [...acc, ...curr.list];
						}, []);
						if (
							mergedList.includes(
								this.OrgOptions.find((i) => i.Uorg == this.org).id
							)
						) {
							this.wechatLogin();
							await loginOut();
							await this.logout();
							return this.$message.error("账号不可登陆，请联系管理员。");
						}
					}
					let userjson = await getUser({ userid: _data.userid });
					console.log("userjson", userjson);
					if (_data.active === 1) {
						window.localStorage["identity"] = JSON.stringify(_data.identity);
						this.$message.success("登录成功");
						window.topU.U.UF.Cookie.set("cocoroboLoginType=2");
						window.topU ? window.topU.US.userInfo = _data : window.top.US.userInfo = _data
						await this.login();
						this.addOp3('1', "", { type:this.prefixL + "login" }, "success",_data.userid)
						if (
							userjson.data[0][0].type == 1 &&
							userjson.data[0][0].role == 1 &&
							userjson.data[0][0].rrole == 1
						) {
							this.$router.push({ path: "/kanban" });
						} else {
							this.$router.push({ path: this.redirect || "/" });
						}
					} else {
						this.$message.error("登录失败");
					}

					this.loading = false;
				})
				.catch((err) => {
					console.log(err.response);
					if (err && err.response && err.response.status === 401) {
						this.loginType = "bind";
					}
				});

			//
		},
	},
	mounted() {
		let _this = this;
		window.addEventListener("message", function (e) {
			// 监听 message 事件
			console.log(e);
			if (e.data && e.data.method == "getOpenId") {
				console.log(e);
				console.log(e.data.code);
				console.log(_this.loginType);

				if (e.data.code == 200) {
					_this.getOpenId(e.data.data.openid);
				} else {
					_this.$message.error("扫码登录失败请重新扫码");
					_this.wechatLogin();
				}
			}
		});
		this.getLoading();
		this.getOrdOidData();
	},
};
</script>
<style scoped>
.loginPage {
	width: 100vw;
	height: 100vh;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lp_left {
	max-width: 50%;
	width: 50%;
	max-height: 100%;
	height: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

.lp_left > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0 150px 0 0;
}

.lp_right {
	width: 50%;
	min-width: 520px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.lp_r_box {
	width: 500px;
	height: auto;
	box-sizing: border-box;
	padding: 20px;
}

.lp_r_b_logo {
	display: flex;
	align-items: center;
}

.lp_r_b_logo > span {
	margin-left: 15px;
	font-weight: bold;
	font-size: 18px;
}

.lp_r_box > span {
	font-size: 46px;
	font-weight: bold;
	margin: 40px 0;
	display: block;
}

.lp_r_b_formArea {
	width: 100%;
	height: 250px;
	margin-bottom: 40px;
}

.fa_input {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	/* align-items: center; */
	justify-content: center;
}

.fa_i_item {
	width: 100%;
	height: 70px;
	margin-bottom: 30px;
}

.fa_i_item > span {
	font-size: 16px;
	color: rgba(0, 0, 0, 0.9);
	font-weight: 600;
}

.fa_i_item > div {
	width: 100%;
	height: 40px;
	border: solid 1px rgba(213, 213, 213, 1);
	margin-top: 5px;
	border-radius: 8px;
	transition: 0.5s;
}

.fa_i_item > div > input {
	width: 100%;
	height: 100%;
	border: none;
	outline: none;
	text-indent: 1em;

	color: #000;
	font-size: 14px;
	background: none;
}

.fa_i_item > div >>> .el-select {
	width: 100%;
	height: 100%;
}

.fa_i_item > div >>> .el-select input {
	border: none;
	outline: none;
	background: none;
	text-indent: 1em;
	font-size: 14px;
	height: 40px;
	padding-left: 0;
	color: #000;
}

/* .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);
}

.fa_i_item > div:focus-within {
	border-color: #006afe;
}

.fa_weChat {
	width: 300px;
	height: 300px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fa_weChat > .QRcode {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	/* background-color: black; */
}

.lp_r_b_btn {
	width: 100%;
	height: 45px;
	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;
}

.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: #e7e7e7;
}

.lp_r_b_line > span {
	display: flex;
	margin: 0 20px;
}

.lp_r_b_iconBtn {
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: center;
}

.lp_r_b_iconBtn > div {
	width: 32px;
	height: 32px;
	cursor: pointer;
	margin: 0 20px;
}

.lp_r_b_iconBtn > div > img {
	width: 100%;
	height: 100%;
}

.btn_box {
	display: flex;
	gap: 10px;
}
.backWin{
	/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); */
}
</style>