.qr-login-user{ position:absolute;top:0px;right:0px; cursor:pointer;border-bottom-left-radius: 4px; overflow: hidden; } .qr-login-user.animate .font-icon{transition: all 0.2s;} .qr-login-user .font-icon{ width:40px;height:40px; text-align: right;display: block; color: #fff;background: rgba(0,0,0,0.15); /* background: #f3f3f3;color:#ccc; */ text-align: center;line-height:40px; border-bottom-left-radius: 4px; clip-path:polygon(5% 0,100% 0,100% 95%); -webkit-clip-path:polygon(5% 0,100% 0,100% 95%); } .qr-login-user .font-icon:before{ font-size:27px; position: relative;top: -3px;left: 3px; } .qr-login-user:hover .font-icon{ clip-path:polygon(-50% 0,100% 0,100% 150%); -webkit-clip-path:polygon(-50% 0,100% 0,100% 150%); } .qr-login-user:hover .font-icon{color:#1890ff;} .menuBar .menu-dropdown-user li .qr-login-user .font-icon{ padding:0;border-top-right-radius: 4px; opacity:1;line-height: 40px;vertical-align: top; clip-path:polygon(100% 0,100% 0,100% 0%); -webkit-clip-path:polygon(100% 0,100% 0,100% 0%); } .menuBar .menu-dropdown-user li .qr-login-user{opacity: 0.001;pointer-events: none;} .menuBar .menu-dropdown-user li.user-info:hover .qr-login-user{opacity:1;pointer-events: all;} .menuBar .menu-dropdown-user li.user-info:hover .qr-login-user .font-icon{ clip-path:polygon(5% 0,100% 0,100% 95%); -webkit-clip-path:polygon(5% 0,100% 0,100% 95%); } .menuBar .menu-dropdown-user li.user-info .qr-login-user:hover .font-icon{ clip-path:polygon(-50% 0,100% 0,100% 150%); -webkit-clip-path:polygon(-50% 0,100% 0,100% 150%); } .menuBar .menu-dropdown-user li.user-info{overflow:visible;} .menuBar .menu-dropdown-user li:hover .qr-login-user .font-icon{color:#fff;} .menuBar .menu-dropdown-user li .qr-login-user:hover .font-icon{color:#1890ff} .login-form .qr-login-user .font-icon{margin-right:-1px;} .dark-mode .qr-login-user .font-icon{background: rgba(150,150,150,0.15);} /* 二维码dialog */ .qr-login-user-dialog .box{position:relative;top:50%;transform:translateY(-50%);} .qr-login-user-dialog .code{ width: 300px;height: 300px;line-height: 300px; border: 1px solid rgba(150,150,150,0.2);text-align: center; cursor:pointer;position: relative;margin: auto;margin-bottom: 10px; } .qr-login-user-dialog .code:after{ font-family:"remixicon";content:"\f064"; position: absolute;z-index: 10; width: 100%;height:100%;font-size: 80px;color: #2196f3; transition: all 0.25s;margin-top:10px;opacity:0.001;border-radius:6px; /* width: 100px;height: 100px;line-height: 100px; top: 100px;left: 100px;font-size:60px; */ width: 280px;height: 100px;height: 20px;line-height: 22px; bottom: 10px;right: 10px;font-size: 14px; color: #fff;background: rgba(0,0,0,0.7); } .qr-login-user-dialog .code:hover:after{opacity:1;margin-top:0;} .qr-login-user-dialog .code img{ opacity:1;transition: all 0.3s;display:inline-block !important; max-width: 300px;max-height: 300px; } .qr-login-user-dialog .desc{text-align:center;opacity:0.5;} .qr-login-user-dialog .code:before{ font-family:"remixicon";content:"\eb80"; position: absolute;top:0;left:0;z-index: 10; width: 100%;height:100%;font-size: 80px;color: #4caf50; transition: all 0.25s;margin-top:30px;opacity:0.001; } .qr-login-user-dialog .code.code-success:before{opacity:1;margin-top:0;} .qr-login-user-dialog .code.code-success:after{display:none !important;} .qr-login-user-dialog .code.code-success img{opacity: 0.1;} /* 扫描确认 */ .qr-login-confirm-dialog .main{ padding:15px;text-align:center; position: absolute; top: 0;left: 0;right: 0;bottom: 0; } .qr-login-confirm-dialog .main .box{position: relative;top: 50%;margin-top: -200px;} .qr-login-confirm-dialog .main .box i{display:block;width: auto;font-style: normal;} .qr-login-confirm-dialog .main .font-icon{ margin-top: 60px;margin-bottom: 20px; font-size:80px;color: #2196f3; } .qr-login-confirm-dialog .main .title{ font-size: 20px;padding-bottom: 5px; border-bottom: 0.5px solid #7a7a7a1a; margin-top: 10px;margin-bottom:10px; } .qr-login-confirm-dialog .main .kui-btn{ display:block;margin-bottom: 10px;line-height: 2em; position: absolute;bottom:20px;left:20px;right:20px; } .qr-login-confirm-dialog .main .kui-btn.btn-confirm{margin-bottom: 60px;} .qr-login-confirm-dialog .main .kui-btn.btn-cancel{border-color: rgba(150,150,150,0.1);} /* wap */ .app-wap-small .qr-login-user .font-icon{ clip-path:polygon(20% 0,100% 0,100% 80%); -webkit-clip-path:polygon(20% 0,100% 0,100% 80%); } .app-wap-small .qr-login-user .font-icon:before{ position: relative;top: -6px;left:6px; font-size: 22px; } /* .app-wap-small .qr-login-user-dialog .code{margin-top:10%;} */