登录面板增加钉钉、企业微信支付按钮

酱包
1 parent 7753bd4c
Showing 3 changed files with 38 additions and 5 deletions
yudao-ui-admin/src/assets/logo/login-logo.png
yudao-ui-admin/src/assets/styles/login.scss
yudao-ui-admin/src/views/login.vue
@@ -10,11 +10,11 @@ $buttonH: 50;
  
 // container
 $containerBgColor: #e6ebf2;
-$containerBgImage: '/assets/images/bg.png';
+$containerBgImage: '../assets/images/bg.png';
 // container-logo
 $logoWidth: 417px;
 $logoHeight: 64px;
-$logoImage: '/assets/logo/logo.png';
+$logoImage: '../assets/logo/login-logo.png';
 // container-content
 $contentWidth: round($W / $H * 100) * 1vw;
 $contentHeight: round($picH / $W * 100) / 100 * $contentWidth;
@@ -22,7 +22,7 @@ $contentBgColor: #ffffff;
 // container-content-pic
 $picWidth: round($picW / $H * 100) * 1vw;
 $picHeight: inherit;
-$picImage: '/assets/images/pic.png';
+$picImage: '../assets/images/pic.png';
 // container-content-field
 $fieldWidth: $contentWidth - $picWidth;
 $fieldHeight: inherit;
@@ -270,7 +270,7 @@ $mobileRowH: 48;
 $mobileButtonH: 48;
  
 // container
-$mobileContainerBgImage: '/assets/images/bg-mobile.png';
+$mobileContainerBgImage: '../assets/images/bg-mobile.png';
 // container-content
 $mobileContentWidth: round($mobileContentW / $mobileW * 100) * 1vw;
 $mobileContentHeight: round($mobileContentH / $mobileW * 100) / 100 * $mobileContentWidth;
@@ -278,7 +278,7 @@ $mobileContentHeight: round($mobileContentH / $mobileW * 100) / 100 * $mobileCon
 $mobileFormWidth: round($mobileFormW / $mobileW *100) * 1vw;
 $mobileRowHeight: $mobileRowH * 1px;
 $mobileButtonHeight: $mobileButtonH * 1px;
-$iconBgImage: '/assets/images/icon.png';
+$iconBgImage: '../assets/images/icon.png';
  
 // - - - - - 移动端设置
 @media screen and (max-width: 599px) {
@@ -81,7 +81,20 @@
                   <span v-else>登 录 中...</span>
                 </el-button>
               </el-form-item>
+
+             <el-form-item style="width:100%;">
+                  <div class="oauth-login" style="display:flex">
+                    <div class="oauth-login-item" v-for="item in SysUserSocialTypeEnum" :key="item.type" @click="doSocialLogin(item)">
+                      <img :src="item.img" height="25px" width="25px" alt="登录" >
+                      <span>{{item.title}}</span>
+                    </div>
+                </div>
+              </el-form-item>
+
+
             </el-form>
+            
+              
           </div>
         </div>
       </div>
@@ -283,4 +296,24 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import "~@/assets/styles/login.scss";
+
+
+.oauth-login {
+  display: flex;
+  align-items: cen;
+  cursor:pointer;
+}
+.oauth-login-item {
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+}
+.oauth-login-item img {
+  height: 25px;
+  width: 25px;
+}
+.oauth-login-item span:hover {
+  text-decoration: underline red;
+  color: red;
+}
 </style>