首页和library布局调整

src/component/LoginPage/googleLogin.vue

@@ -1,6 +1,10 @@
 <template>
     <div class="Container">
         <!-- 谷歌登录 -->
+		 <div class="icon">
+			<img src="@/assets/images/loginPage/gmailIcon.svg" alt="">
+			<span>{{ $props.text }}</span>
+		 </div>
         <div class="g_id_signin" id="g_id_signin">
 			<img src="@/assets/images/loginPage/gmailIcon.svg" alt="">
 		</div>
@@ -12,6 +16,12 @@
     export default defineComponent({
         name: "login",
 		emits: ['googelLogin'],
+		props: {
+			text: {
+				type: String,
+				default: 'Sign in with Google'
+			}
+		},
 		setup(props, { emit }) {
 			const  handleCredentialResponse = async (response) => {
                 // 获取回调响应的凭证数据 然后拿这个凭证给后台，后台jwt进行解析获取登录信息
@@ -69,27 +79,50 @@
 </script>
 <style scoped lang="less">
 .Container{
+	position: relative;
 	:deep(.nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb ){
 		justify-content: center;
 		.nsm7Bb-HzV7m-LgbsSe-Bz112c{
 			padding: 0;
 		}
 	}
-	.g_id_signin{
-		width: 40px;
-		height: 40px;
+	:deep(.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK){
+		width: 100%;
+	}
+	.icon{
+		// width: 40px;
+		width: auto;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		border: 1px solid #dadce0;
-		border-radius: 50%;
+		border-radius: 4rem;
+		padding: .5rem 3rem;
 		cursor: pointer;
+		box-sizing: border-box;
 		&:hover{
 			background: #f8faff;
 		}
 		img{
-			width: 18px;
-			height: 18px;
+			width: 3.8rem;
+			height: 3.8rem;
+		}
+		span{
+			font-size: 1.4rem;
+			margin-left: 1.4rem;
+		}
+	}
+	.g_id_signin{
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		opacity: 0;
+	}
+	&:hover{
+		.icon{
+			background: #f8faff;
 		}
 	}
 }