<!--一键登录-->
<div class="tab-pane" id="direct">
<div class="tab-content">
<a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wwd9d5b7cf59f1e871&redirect_uri=http://oa.jewsoft.com/OALogin.ashx&response_type=code&scope=snsapi_privateinfo&agentid=1000010&state=3828293919281#wechat_redirect/">
<button class="direct">授权登录</button>
</a>
</div>
</div>
//css
body{
background-image:url("img/QYWX.png");
background-size: cover;
background-repeat: no-repeat;
margin: 0 auto;
position: relative;
100%;
height: 100%
}
/*二维码居中*/
.code{
position: absolute;
margin:auto; top: 0;left: 0;right: 0;bottom: 0;
300px; /* 宽度 */
height:300px; /* 高度 */
}
/*直接登录*/
.direct{
270px; /* 宽度 */
height: 40px; /* 高度 */
border- 0px; /* 边框宽度 */
border-radius: 3px; /* 边框半径 */
background: #1E90FF; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
font-size: 17px; /* 字体大小 */
position: absolute;
margin:auto; top: 0;left: 0;right: 0;bottom: 0;
}
.direct:hover { /* 鼠标移入按钮范围时改变颜色 */
background: #66CDAA;
}
/*.ul_col li a {
}*/
.ul_col li{
background:#607B8B;
cursor:pointer;
color:#66CDAA;
}
.ul_col li .bar:hover{
background: #1E90FF;
cursor:pointer;
color:#fff;
}
.bar{
font-size:15px;
cursor:pointer;
color:#fff;
}
.go_button{
background: #1E90FF;
color:#fff;
font-size:15px;
text-align :center;
padding-right:20px;
}
.log_tit{
400px;
height: 260px;
padding: 13px;
position: absolute;
margin:auto; top: 0;left: 0;right: 0;bottom: 0;
color:#fff;
}
.log_con{
/*background: #1E90FF;
color:#fff;*/
350px;
height: 260px;
padding: 13px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
background-color: rgba(240, 255, 255, 0.5);
text-align: center;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
margin:auto; top: 0;left: 0;right: 0;bottom: 0;
}
//html
<div style="background-color:#607B8B">
<ul class="nav nav-tabs ul_col" id="myTab">
<li class="active" ><a href="#home" class="bar">企业微信登录</a></li>
<li><a href="#profile" class="bar">帐号登录</a></li>
<li><a href="#direct" class="bar">一键登录</a></li>
<!--直接授权登入-->
</ul>
</div>
<div id="code" class="code"></div>
<button class="direct">授权登录</button>
<div class="login-content log_con">
<input id="btnLogin" type="button" value=" 登 录 " name="btnLogin" onclick="Post()" style="vertical-align: middle; 20%; height: 40px;" class="btn btn-inverse go_button" /></span>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="custServiceMange._Default" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0" />
<title>登录</title>
<%--建议使用百度或一些网上的静态库的JS或样式，在本地上调用可能会出现在手机上错位现象，现PC端的效果不一样。--%>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="css/fullcalendar.css" />
<link rel="stylesheet" href="css/matrix-style.css" />
<link rel="stylesheet" href="css/matrix-media.css" />
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
<link rel="stylesheet" href="css/jquery.gritter.css" />
<%--<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>--%>
<%--<link rel="stylesheet" href="css/ladda.min.css">--%>
<link rel="stylesheet" href="css/ladda.css">
<%-- <link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
--%>
<style type="text/css">
html, body {
height: 100%;
}
.box {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6699FF', endColorstr='#6699FF'); /* IE */
background-image: linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
background-image: -o-linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
background-image: -moz-linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
background-image: -webkit-linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
background-image: -ms-linear-gradient(bottom, #6699FF 0%, #6699FF 100%);
margin: 0 auto;
position: relative;
100%;
height: 100%;
}
.login-box {
100%;
max- 500px;
height: 400px;
position: absolute;
top: 50%;
margin-top: -200px;
/*设置负值，为要定位子盒子的一半高度*/
}
@media screen and (min-500px) {
.login-box {
left: 50%;
/*设置负值，为要定位子盒子的一半宽度*/
margin-left: -250px;
}
}
.form {
100%;
max- 500px;
height: 275px;
margin: 25px auto 0px auto;
padding-top: 25px;
}
.login-content {
height: 300px;
100%;
max- 500px;
background-color: rgba(255, 250, 2550, .6);
float: left;
}
.input-group {
margin: 0px 0px 30px 0px !important;
}
.form-control,
.input-group {
height: 40px;
}
.form-group {
margin-bottom: 0px !important;
}
/*.login-title {
padding: 20px 10px;
background-color: rgba(240, 255, 255, 0.5);
}*/
.login-title h1 {
margin-top: 10px !important;
}
.login-title small {
color: #66CDAA;
}
.link p {
line-height: 20px;
margin-top: 30px;
}
.btn-sm {
padding: 8px 24px !important;
font-size: 16px !important;
}
/******************************************/
body{
background-image:url("img/backgound_logjin.png");
background-size: cover;
background-repeat: no-repeat;
margin: 0 auto;
position: relative;
100%;
height: 100%
}
/*二维码居中*/
.code{
position: absolute;
margin:auto; top: 0;left: 0;right: 0;bottom: 0;
300px; /* 宽度 */
height:300px; /* 高度 */
}
/*直接登录*/
.direct{
270px; /* 宽度 */
height: 40px; /* 高度 */
border- 0px; /* 边框宽度 */
border-radius: 3px; /* 边框半径 */
background: #1E90FF; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
font-size: 17px; /* 字体大小 */
position: absolute;
margin:auto; top: 0;left: 0;right: 0;bottom: 0;
}
.direct:hover { /* 鼠标移入按钮范围时改变颜色 */
background: #66CDAA;
}
/*.ul_col li a {
}*/
.ul_col li{
background:#607B8B;
cursor:pointer;
color:#66CDAA;
}
.ul_col li .bar:hover{
background: #1E90FF;
cursor:pointer;
color:#fff;
}
.bar{
font-size:15px;
cursor:pointer;
color:#fff;
}
.go_button{
background: #1E90FF;
color:#fff;
font-size:15px;
margin:-100px;
}
.log_tit{
400px;
height: 260px;
padding: 13px;
position: absolute;
margin:auto; top: 0;left: 0;right: 0;bottom: 0;
color:#fff;
}
.log_con{
350px;
height: 260px;
padding: 13px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
background-color: rgba(240, 255, 255, 0.5);
text-align: center;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
margin:auto; top: 0;left: 0;right: 0;bottom: 0;
}
</style>
<script type="text/javascript">
var inputTimes = 0;
function Post() {
var username = $("#txtUserName").val();
if (username == "" || username == undefined)
{ alert("请输入用户名"); return; }
var pwd = $("#txtUserPassword").val();
//取得提交次数
if (inputTimes > 3) {
$("#yzmIcon").attr("style", "visibility: visible;");
$("#code").attr("style", "vertical-align:middle; 60%; height: 40px;visibility: visible;");
$("#img1").attr("style", "vertical-align:middle; 20%; height: 40px;cursor: hand;visibility: visible;");
var code = $("#code").val();
if (code == "" || code == undefined) {
alert("请输入验证码"); return;
}
}
else
code = "";
PageMethods.IsUser(code, username, pwd, comp_user, err);
}
function comp_user(msg) {
if (msg == 1) {
alert("验证码输入错误"); return;
}
else if (msg == 2) {
alert("不存在该员工"); return;
}
else if (msg == 3) {
alert("密码错误");
inputTimes = inputTimes + 1;
return;
}
else if (msg == 4) {
window.location.href = "index.aspx";
}
else if (msg == 5) {
alert("验证码获取失败"); return;
}
else if (msg == 6) {
alert("密码不能为空！");
return;
}
}
function err(result) {
alert(result.get_message());
}
function Postkey(e) {
var keynum;
if (window.event) // IE
{
keynum = e.keyCode
}
else if (e.which) // Netscape/Firefox/Opera
{
keynum = e.which
}
if (keynum == "13")
{ Post(); }
}
function imgpass() {
var time = new Date();
var rnd = time.getSeconds;
rnd += time.getMinutes;
rnd += Math.random() * 1000;
$("#img1").attr("src", "readImage.aspx?type=yzm&rnd=" + rnd + "");
}
</script>
</head>
<body onload="javascript:imgpass();">
<div style="background-color:#607B8B">
<ul class="nav nav-tabs ul_col" id="myTab">
<li class="active" ><a href="#home" class="bar">企业微信登录</a></li>
<li><a href="#profile" class="bar">帐号登录</a></li>
<li><a href="#direct" class="bar">一键登录</a></li>
<!--直接授权登入-->
</ul>
</div>
<div class="tab-content">
<!--企业微信登录-->
<div class="tab-pane active" id="home">
<div id="code" class="code"></div>
<script src="http://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script>
window.WwLogin({
"id": "code", //显示二维码的容器id
"appid": "wwd9d5b7cf59f1e871",
"agentid": "1000010", //企业微信的cropID，在 企业微信管理端->我的企业 中查看
"redirect_uri": "http://oa.jewsoft.com/OALogin.ashx", //重定向地址，需要进行UrlEncode
"state": "3828293919281", //用于保持请求和回调的状态，授权请求后原样带回给企业。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议企业带上该参数
"href": "", //自定义样式链接，企业可根据实际需求覆盖默认样式。详见文档底部FAQ
});
</script>
</div>
<!--一键登录-->
<div class="tab-pane" id="direct">
<div class="tab-content">
<!--获取code参数
appid:企业codeID
redirect_uri:返回路径
response_type：返回类型
scope：应用授权作用域。
agentid：企业应用的id。
state：
#wechat_redirect：终端使用此参数判断是否需要带上身份信息
-->
<a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wwd9d5b7cf59f1e871&redirect_uri=http://oa.jewsoft.com/OALogin.ashx&response_type=code&scope=snsapi_privateinfo&agentid=1000010&state=3828293919281#wechat_redirect/">
<button class="direct">授权登录</button>
</a>
</div>
</div>
<%-- oalogin.ashx 返回值
{
"codeid": 0,
"codemessage": "未将对象引用设置到对象的实例。",
"returnid": 0,
"returnmessage": "未将对象引用设置到对象的实例。"
}--%>
<!--账号登录-->
<div class="tab-pane" id="profile">
<div class="tab-content">
<div class="tab-pane active" id="panel-317865">
<p>
<div class="login-box">
<%--<div class="login-title text-center log_tit">
<h1><small>客户服务管理系统</small></h1>
</div>--%>
<div class="login-content log_con">
<div class="form">
<form action="#" method="post" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True"></asp:ScriptManager>
<div class="form-group">
<div class="col-xs-12">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" id="txtUserName" name="username" class="form-control" placeholder="用户名" runat="server">
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" id="txtUserPassword" name="password" class="form-control" placeholder="密码" runat="server">
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="input-group">
<span class="input-group-addon" id="yzmIcon" style="visibility: hidden;"><span class="glyphicon glyphicon-saved"></span></span>
<input id="code" size="4" name="txtSN" placeholder="验证码" onkeypress="Postkey(event)" style="vertical-align: middle; 60%; height: 40px; visibility: hidden;" />
<img alt="" title="点击换一张" id="img1" src="images/yzm.bmp" width="100px" style="vertical-align: middle; 20%; height: 40px; cursor: hand; visibility: hidden;" onclick="imgpass()" />
<input id="btnLogin" type="button" value=" 登 录 " name="btnLogin" onclick="Post()" style="vertical-align: middle; 40%; height: 40px;" class="btn btn-inverse go_button" /></span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="js/easyui-lang-zh_CN.js"></script>
</p>
</div>
</div>
</div>
<script>
var oLis = document.getElementsByTagName("li");
var i, j;
var length = oLis.length;
for (i = 0; i < length; i++) {
oLis[i].onclick = function () {
for (j = 0; j < length; j++) {
oLis[j].className = "";
}
}
}
</script>
<script> $(function () { $('#myTab a:last').tab('show'); })
$('#myTab a').click(function (e) { e.preventDefault(); $(this).tab('show'); })</script>
<script src="js/spin.js"></script>
<script src="js/ladda.js"></script>
<script>
// Bind normal buttons
Ladda.bind('.button-demo button', { timeout: 200 });
// Bind progress buttons and simulate loading progress
Ladda.bind('.progress-demo button', {
callback: function (instance) {
var progress = 0;
var interval = setInterval(function () {
progress = Math.min(progress + Math.random() * 0.1, 1);
instance.setProgress(progress);
if (progress === 1) {
instance.stop();
clearInterval(interval);
}
}, 200);
}
});
</script>
</body>
</html>