huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-30 03:01:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
酱包 2022-05-03 14:31:37 +08:00
parent 7753bd4c44
commit 4c4e37fd42
3 changed files with 38 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
yudao-ui-admin/src/assets/logo/login-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

10
yudao-ui-admin/src/assets/styles/login.scss
View File

@ -10,11 +10,11 @@ $buttonH: 50;
// container // container
$containerBgColor: #e6ebf2; $containerBgColor: #e6ebf2;
$containerBgImage: '/assets/images/bg.png'; $containerBgImage: '../assets/images/bg.png';
// container-logo // container-logo
$logoWidth: 417px; $logoWidth: 417px;
$logoHeight: 64px; $logoHeight: 64px;
$logoImage: '/assets/logo/logo.png'; $logoImage: '../assets/logo/login-logo.png';
// container-content // container-content
$contentWidth: round($W / $H * 100) * 1vw; $contentWidth: round($W / $H * 100) * 1vw;
$contentHeight: round($picH / $W * 100) / 100 * $contentWidth; $contentHeight: round($picH / $W * 100) / 100 * $contentWidth;
@ -22,7 +22,7 @@ $contentBgColor: #ffffff;
// container-content-pic // container-content-pic
$picWidth: round($picW / $H * 100) * 1vw; $picWidth: round($picW / $H * 100) * 1vw;
$picHeight: inherit; $picHeight: inherit;
$picImage: '/assets/images/pic.png'; $picImage: '../assets/images/pic.png';
// container-content-field // container-content-field
$fieldWidth: $contentWidth - $picWidth; $fieldWidth: $contentWidth - $picWidth;
$fieldHeight: inherit; $fieldHeight: inherit;
@ -270,7 +270,7 @@ $mobileRowH: 48;
$mobileButtonH: 48; $mobileButtonH: 48;
// container // container
$mobileContainerBgImage: '/assets/images/bg-mobile.png'; $mobileContainerBgImage: '../assets/images/bg-mobile.png';
// container-content // container-content
$mobileContentWidth: round($mobileContentW / $mobileW * 100) * 1vw; $mobileContentWidth: round($mobileContentW / $mobileW * 100) * 1vw;
$mobileContentHeight: round($mobileContentH / $mobileW * 100) / 100 * $mobileContentWidth; $mobileContentHeight: round($mobileContentH / $mobileW * 100) / 100 * $mobileContentWidth;
@ -278,7 +278,7 @@ $mobileContentHeight: round($mobileContentH / $mobileW * 100) / 100 * $mobileCon
$mobileFormWidth: round($mobileFormW / $mobileW *100) * 1vw; $mobileFormWidth: round($mobileFormW / $mobileW *100) * 1vw;
$mobileRowHeight: $mobileRowH * 1px; $mobileRowHeight: $mobileRowH * 1px;
$mobileButtonHeight: $mobileButtonH * 1px; $mobileButtonHeight: $mobileButtonH * 1px;
$iconBgImage: '/assets/images/icon.png'; $iconBgImage: '../assets/images/icon.png';
// - - - - - 移动端设置 // - - - - - 移动端设置
@media screen and (max-width: 599px) { @media screen and (max-width: 599px) {

33
yudao-ui-admin/src/views/login.vue
View File

@ -81,7 +81,20 @@
<span v-else>登 录 中...</span> <span v-else>登 录 中...</span>
</el-button> </el-button>
</el-form-item> </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> </el-form>
</div> </div>
</div> </div>
</div> </div>
@ -283,4 +296,24 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "~@/assets/styles/login.scss"; @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> </style>