fix

src/component/LoginPage/googleLogin.vue

@@ -9,53 +9,58 @@
 
     export default defineComponent({
         name: "login",
-		setup() {
+		emits: ['googelLogin'],
+		setup(props, { emit }) {
 			const  handleCredentialResponse = async (response) => {
                 // 获取回调响应的凭证数据 然后拿这个凭证给后台，后台jwt进行解析获取登录信息
-				console.log(response);
                 let code = response.credential
-				console.log(code);
-                // await api.googleLogin(code);
+				emit('googelLogin',code)
             }
-			onMounted(()=>{
-				let  GOOGLE_CLIENT_ID = '194770296147-njd68pm7tnapgonkj2h48mhf63n15n3f.apps.googleusercontent.com'
-				// let  GOOGLE_CLIENT_ID = '399537927614-3sd3rs9p79doocsrff7gm5m1f3chvmn2.apps.googleusercontent.com'
-				
-				// 使用谷歌登录的api
+			let data = reactive({
+				scriptSrc:'https://accounts.google.com/gsi/client',
+			})
+			let  GOOGLE_CLIENT_ID = '194770296147-njd68pm7tnapgonkj2h48mhf63n15n3f.apps.googleusercontent.com'
+			// let  GOOGLE_CLIENT_ID = '399537927614-3sd3rs9p79doocsrff7gm5m1f3chvmn2.apps.googleusercontent.com'
+			// 使用谷歌登录的api
+			var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`);
+			if(!existingScript){
 				const script = document.createElement("script");
-				script.src = "https://accounts.google.com/gsi/client"
-				document.body.appendChild(script);
-
-				window.addEventListener('load', () => {
+				script.src = data.scriptSrc
+				script.onload=()=>{
+					document.body.appendChild(script);
 					window.google.accounts.id.initialize({
 					// 主要就是填写client_id
 						client_id: GOOGLE_CLIENT_ID,
 						auto_select: false,
 						callback: handleCredentialResponse,
-						context:"signin",
+						// context:"signin",
 						ux_mode:"popup",
 						itp_support:true,
 					});
 					window.google.accounts.id.renderButton(
 						document.getElementById("g_id_signin"),
 						{
-							type:"standard",
-							shape:"pill",
+							type:"icon",//icon为只有一个icon
+							shape:"circle",
 							theme:"outline",
-							text:"signin_with",
-							size:"medium",
-							logo_alignment:"left",
+							size:"large",
+							logo_alignment:"center",
 						}
 					);
-				})
-			})
+				}
+			}
 			return {
             }
 		},
     })
 </script>
-<style scoped>
+<style scoped lang="less">
 .Container{
-	width: 45%;
+	:deep(.nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb ){
+		justify-content: center;
+		.nsm7Bb-HzV7m-LgbsSe-Bz112c{
+			padding: 0;
+		}
+	}
 }
 </style>