Flask接口签名sign原理与实例代码浅析
194
2023-07-19
通过Tabs方法基于easyUI+bootstrap制作工作站
登陆页如下所示:
下面给大家展示下具体实现代码:
* {
margin: 0px;
padding: 0px;
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
font-family: "微软雅黑";
font-size: 16px;
}
.main-box {
width: 100%;
height: 100%;
min-width: 960px;
overflow: hidden;
background: url(imges/bg.jpg) no-repeat center center;
}
.left-box,
.right-box {
width: 50%;
height: 100%;
float: left;
}
.left-box {
width: 50%;
height: 100%;
background: url(imges/leftboxbg.jpg) no-repeat center center;
z-index: 10;
position: relative;
}
.right-box {
width: 50%;
height: 100%;
position: relative;
}
.left-title {
width: 300px;
height: 2http://36px;
margin: 150px auto;
}
.left-title img {
display: blocklJnKlIiNoS;
width: 300px;
height: 186px;
}
.left-title p {
width: 300px;
height: 50px;
line-height: 50px;
color: white;
font-size: 18px;
text-align: center;
}
.loginavatar {
width: 160px;
height: 160px;
background: url(imges/loginavatar.png) no-repeat;
margin: 50px auto 50px;
}
ul li {
list-style: none;
display: block;
}
.right-title,
.right-title-zhuce {
width: 400px;
height: 255px;
/* border: 1px solid red; */
margin: 0px auto;
}
.login input {
display: block;
width: 350px;
color: black;
height: 40px;
border: 1px solid #42BD56;
margin: 10px auto 10px;
}
input::-webkit-input-placeholder {
color: black;
}
input:-moz-placeholder {
color: black;
}
input:-ms-input-placeholder {
color: black;
}
input.username {
text-indent: 50px;
background: url(imges/bg-loginid.png) no-repeat 0 -7px;
margin-tophttp://: 30px;
}
input.pwd {
text-indent: 50px;
background: url(imges/bg-loginpass.png) no-repeat 0 -7px;
}
input.sub {
background: #2A8C70;
border: none;
color: white;
border-radius: 5px;
}
.sub-ljzc,
.sub-fsdx {
width: 350px;
height: 42px;
margin: 10px auto 10px;
/* border: 1px solid red;*/
}
input.sub,
input.msg {
width: 160px;
height: 40px;
margin: 0px;
float: left;
}
input.msg {
background: none;
text-align: center;
}
.sub-ljzc .ljzc,
.sub-ljzc .ljdl,
.sub-fsdx .hqyzm {
float: right;
display: block;
width: 160px;
height: 40px;
background: white;
line-height: 40px;
text-align: center;
color: #30A080;
margin-right: 0px;
border: 1px solid #30A080;
border-radius: 5px;
margin: 0;
}
$(function() {
var pwd = /^[a-zA-z]\w{3,15}$/;
var phone_num = /^1\d{10}$/;
$("#ljzc").click(function() {
$("#right-title").hide();
$("#right-title-zhuce").show();
});
$("#ljdl").click(function() {
$("#right-title").show();
$("#right-title-zhuce").hide();
});
$("#sub").click(function() {
if ($(".username").val() == "") {
alert("请输入电话号码!");
return false;
};
if (!phone_num.test($(".username").val().trim())) {
alert("电话号码有误,请检查");
return false;
};
if ($(".pwd").val() == "") {
alert("请输入密码!");
return false;
};
});
$(".hqyzm").click(function() {
if ($("#username").val() == "") {
alert("请输入注册电话号码!");
return false;
} else if (!phone_num.test($("#username").val().trim())) {
alert("注册电话号码有误,请重新填写!");
return false;
} else {
$('.hqyzm').css('color', 'red').prop("disabled", true); //发短消息不可再点击
var i = 10;
var n = setInterval(function() {
var j = i + 's';
$('.hqyzm').val(j);
i--;
if (i < -1) {
clearInterval(n);
$('.hqyzm').val('重新获取验证码!').prop("disabled", false);
}
}, 1000);
}
})
$("#ljzc-tj").click(function() {
if ($("#username").val() == "") {
alert("请输入注册电话号码!");
return false;
};
if (!phone_num.test($("#username").val().trim())) {
alert("注册电话号码有误,请重新填写!");
return false;
};
if ($(".msg").val() == "") {
alert("短息为空!");
return false;
};
if ($("#pwd").val() == "") {
alert("密码为空!");
return false;
};
if (!pwd.test($("#pwd").val().trim())) {
alert("密码有误,请重新填写,包含字母数字下划线,4-16位");
return false;
};
})
})
医生工作站
* {
padding: 0px;
margin: 0px;
}
html,
body {
width: 100%;
height: 100%;
font-size: 16px;
overflow: hidden;
}
a:link {
text-decoration: none;
/* 指正常的未被访问过的链接*/
}
a {
text-decoration: none;
}
a:visited {
text-decoration: none;
/*指已经访问过的链接*/
}
a:hover {
text-decoration: none;
/*指鼠标在链接*/
}
a:active {
text-decoration: none;
/* 指正在点的链接*/
}
/**************main*********************/
.main {
width: 100%;
height: 100%;
background: pink;
overflow: hidden;
min-width:1200px;
}
.left-box {
height: 100%;
float: left;
width: 15%;
background: #30323e;
/*overflow-y: scroll;*/
}
.left-box-logo {
width: 160px;
height: 150px;
margin: 30px auto 0px;
}
.left-box-logo img {
width: 160px;
height: 100px;
}
.left-box-logo h3 {
color: white;
margin: 0;
line-height: 50px;
height: 50px;
text-align: center;
}
/*************tree li******************/
.tree {
/*border: 1px solid red;*/
height: auto;
}
.tree-box {
list-style: none;
line-height: 48px;
padding: 0;
margin: 0;
}
.tree-box li {
border-bottom: 1px solid #232243;
display: block;
}
.tree-box li:hover,
.tree-box li:focus,
.tree-box li:active {
background: #005eac;
}
.tree-box>li>a {
color: #A6A6A6;
margin-left: 20px;
}
.tree-box a {
display: block;
height: 48px;
width: 100%;
}
.tree-box-two a {
text-align: center;
color: white;
}
.hzgl a:before {
content: url(imges/icon-patient.png);
height: 100%;
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.pzgl a:before {
content: url(imges/icon-lineup.png);
height: 100%;
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.xgmm a:before {
content: url(imges/icon-lock.png);
height: 100%;
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
a.bg:before {
content: url(imges/bg-verticalsubmenu.png);
height: 100%;
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
/**************right-box**************/
.right-box {
height: 100%;
float: left;
width: 85%;
background: white;
font-size: 18px;
position: relative;
}
.time-now {
margin-left: 20px;
font-family: "微软雅黑";
line-height: 50px;
}
.right-title {
width: 98%;
margin: 10px auto 0px;
height: 50px;
background: #FF855E;
}
.right-title span {
margin-top: 8px;
}
.right-title .user-info {
float: right;
}
.right-title .user-info button {
margin-right:lJnKlIiNoS 20px;
}
#tab-page div {
background: #D2D2D9;
}
h1.welcome {
font-size: 80px;
font-family: "微软雅黑";
color: green;
margin: 15% auto;
text-align: center;
}
/*****************************************/
/* easy UI */
.tabs-header,
.tabs-tool {
background: green;
}
div.tabs-header {
border: 1px solid #cacacd;
border-bottom: 1px solid #e6e6e6;
}
ul.tabs {
border-bottom: 1px solid #cacacd;
height: 30px;
}
.tabs li.tabs-selected a.tabs-inner {
background: #E6E6E6;
color: #5a5a5a;
}
.tabs li a.tabs-inner {
background: #f2f2f2;
color: #5a5a5a;
border: 1px solid #cacacd;
padding: 0 15px;
border-radius: 0;
}
.tabs li a.tabs-inner:hover {
background: #E6E6E6;
}
.tabs li.tabs-selected a.tabs-inner {
border: 1px solid #cacacd;
border-bottom: 1px solid #E6E6E6;}
$(function() {
//初始化tab
$("#tab-page").tabs({
tabWidth: 100, //tab头的宽度
tabHeight: 30, //tab头的高度
closable: true,
fit: true //tab铺满全屏
});
});
//打开新tab函数
function addTabs(title, url) {
if ($('#tab-page').tabs('exists', title)) {
$('#tab-page').tabs('select', title);
$('#tab-page').tabs('update', {
tab: select
});
var content = '';
$('#tab-page').tabs('add', {
title: title,
fit: true, //tab铺满全屏
content: content,
closable: true
});
var rH = $(".right-box").height();
var rhH = $(".right-head").height();
var hC = rH - 50;
$(".panel-body .tabIframe").height(hC);
} else {
var content = '';
$('#tab-page').tabs('add', {
title: title,
content: content,
fit: true, //tab铺满全屏
closable: true
});
var rH = $(".right-box").height();
var rhH = $(".right-head").height();
var hC = rH - 50;
$(".panel-body .tabIframe").height(hC);
}
}
当前时间:2015年6月1日
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~