测试

yazhaiTest/css/login.css

@@ -76,6 +76,18 @@
   width: 68px;
   cursor: pointer;
 }
+.more-login-box .more-login-icon1 {
+  position: relative;
+  width: 68px;
+  height: 68px;
+  background: url(https://www.footseen.xyz/yazhaiTest/images/login-icon1.png);
+}
+.more-login-box .more-login-icon1 > div {
+  position: absolute !important;
+  top: 11px;
+  left: 14px;
+  opacity: 0;
+}
 .login-input-area {
   position: relative;
   width: 330px;

yazhaiTest/css/login.less

@@ -76,6 +76,18 @@
             cursor: pointer;
         }
     }
+    .more-login-icon1{
+        position: relative;
+        width: 68px;
+        height: 68px;
+        background:url(https://www.footseen.xyz/yazhaiTest/images/login-icon1.png);
+        >div{
+            position: absolute !important;
+            top: 11px;
+            left: 14px;
+            opacity: 0;
+        }
+    }
 }
 .login-input-area{
     position: relative;

yazhaiTest/lib/login.js

@@ -5,7 +5,7 @@ function loginGo(){
     html+='    <div style="display: none;" class="login-box1">';
     html+='        <div class="login-title">登入</div>';
     html+='        <div class="phone-login-btn"></div>';
-    html+='        <div class="google-login-btn googleLogin" ></div>';
+    html+='        <div class="google-login-btn" id="buttonDiv"></div>';
     html+='        <div class="more-login"><img src="https://www.footseen.xyz/yazhaiTest/images/more-login.png" alt=""></div>';
     html+='        <div class="more-login-box">';
     html+='            <div class="more-login-icon"><img class="twitter_btn" src="https://www.footseen.xyz/yazhaiTest/images/login-icon2.png" alt=""></div>';
@@ -28,7 +28,7 @@ function loginGo(){
     html+='        <div class="login-submit-btn">登入</div>';
     html+='        <div class="more-login"><img src="https://www.footseen.xyz/yazhaiTest/images/more-login.png" alt=""></div>';
     html+='        <div class="more-login-box">';
-    html+='            <div class="more-login-icon"><img src="https://www.footseen.xyz/yazhaiTest/images/login-icon1.png" alt=""></div>';
+    html+='            <div class="more-login-icon more-login-icon1" id="buttonDiv1"></div>';
     html+='            <div class="more-login-icon"><img src="https://www.footseen.xyz/yazhaiTest/images/login-icon2.png" alt=""></div>';
     html+='            <div class="more-login-icon"><img src="https://www.footseen.xyz/yazhaiTest/images/login-icon3.png" alt=""></div>';
     html+='            <div class="more-login-icon"><img src="https://www.footseen.xyz/yazhaiTest/images/login-icon4.png" alt=""></div>';
@@ -54,7 +54,7 @@ function loginGo(){
     html+='        <div class="login-submit-btn">登入</div>';
     html+='        <div style="margin-top: 35px;" class="more-login"><img src="https://www.footseen.xyz/yazhaiTest/images/more-login.png" alt=""></div>';
     html+='        <div class="more-login-box">';
-    html+='            <div class="more-login-icon"><img src="https://www.footseen.xyz/yazhaiTest/images/login-icon1.png" alt=""></div>';
+    html+='            <div class="more-login-icon more-login-icon1"></div>';
     html+='            <div class="more-login-icon"><img src="https://www.footseen.xyz/yazhaiTest/images/login-icon2.png" alt=""></div>';
     html+='            <div class="more-login-icon"><img src="https://www.footseen.xyz/yazhaiTest/images/login-icon3.png" alt=""></div>';
     html+='            <div class="more-login-icon"><img src="https://www.footseen.xyz/yazhaiTest/images/login-icon4.png" alt=""></div>';
@@ -127,7 +127,25 @@ function loginGo(){
     $(".login-content").html(html);
     function handleCredentialResponse(response) {
         console.log("Encoded JWT ID token: " + response.credential);
-        console.log(response)
+        $.ajax({
+            url:$ip+'third/login',
+            data:{
+                openid:res.sub,
+                opentype:4,
+                authToken:response.credential,
+ 
+            },
+            success:function(data){
+                console.log('line',data)
+                if(data.code!=1){
+                    layer.msg(data.msg)
+                    return;
+                }
+                localStorage.token=data.token
+                localStorage.uid=data.uid
+                window.location.reload()
+            }
+        })
 
         setTimeout(function() {
             google.accounts.id.disableAutoSelect();
@@ -189,9 +207,13 @@ function loginGo(){
             callback: handleCredentialResponse
           });
           google.accounts.id.renderButton(
-            document.querySelectorAll(".googleLogin"),
+            document.getElementById("buttonDiv"),
             { theme: "outline", size: "large", }  // customization attributes
           );
+          google.accounts.id.renderButton(
+            document.getElementById("buttonDiv1"),
+            { theme: "outline", size: "large",type:'icon' }  // customization attributes
+          );
         // google.accounts.id.prompt(); // also display the One Tap dialog
     }