今日完成任务:主页面设计
核心代码:见下列插入的代码
遇到的问题:无
解决的方法:无
所有的业务功能均在主页上嵌套功能模块的子页面
布局:顶部和底部做基本展示,作业为折叠菜单
事件:通过折叠菜单的点击,加载对应的功能子页面,嵌套到主页主体区域内
主页布局设计如下图
主页html代码:
<div class="maxdiv" >
<div class="top" >
<div>
<img src="img/banner.jpg" height="150px" width='1250px' align="left"/>
<p class="banner">HOPU·IT 中国信息化教育领导者</p>
</div>
<div>
<span class="top_div_span1"><b>车辆派遣管理系统</b></span>
<span class="top_div_span2">当前登录用户:</span>
<span class="top_div_span2" id="yhzh"></span>
<span class="top_div_span2">用户角色:</span>
<span class="top_div_span2" id="zw"></span>
<span>当前时间:</span>
<span class="top_div_span2" id="time"></span>
<span class="top_div_tc" onclick="exit()">退出系统</span>
</div>
</div>
<div class="center">
<div class="left">
<ul>
<li id="checked"><span>-</span>业务管理
</li>
<ul style="display:block;">
<li style="color:#0df;">派车单登记</li>
<li>派车单审核</li>
<li>财务收款</li>
<li>单车月结算</li>
</ul>
<li><span>+</span>档案管理
</li>
<ul>
<li>客户信息管理</li>
<li>车辆信息管理</li>
<li>驾驶员信息管理</li>
<li>业务员信息管理</li>
</ul>
<li><span>+</span>查询统计
</li>
<ul>
<li>派车单统计</li>
<li>出车率分析</li>
<li>已收款明细</li>
<li>未收款明细</li>
<li>结算明细</li>
<li>车补贴查询</li>
<li>单车查询</li>
</ul>
</ul>
</div>
<div class="main">
<h3>派车单登记</h3>
<div class="listView">
</div>
</div>
</div>
</div>
<h3 id="message">登记客户信息失败,请重新登记</h3>
<div id="confirmDiv">
<div id="confirm">
<h3>确认?</h3>
<div>
<button class="yes">是</button>
<button class="no">否</button>
</div>
</div>
</div>
<div class="foot">
<div class="footer">
<p>京公网安备 11000002000088号 | 京ICP证070359号 | 互联网信息服务资格证编号(京)-经营性-2014-0008 | 新出发京零 字第大120007号</p>
<p>互联网出版许可证编号新出网证(京)字150号 | 出版物经营许可证 | 网络文化经营许可证京网文[2014]2148-348号 | 违法和不良信息举报电话:4006561155</p>
<p>Copyright © 2020 - 2022 方凯@ 版权所有 | 消费者维权热线:4006067733经营证照 | (京)网械平台备字(2018)第00003号 | 营业执照</p>
</div>
</div>
主页css代码:
*{
padding:0px;
margin:0px;
}
a{
text-decoration:none;
display:block;
}
span{
display:inline-block;
}
ul{
list-style:none;
color:#555;
}
.banner{
position:absolute;
top:10px;
font-size:18px;
color:#069;
padding-left:20px;
letter-spacing: 3px;
transition:1s;
}
.banner:hover{
color:#0de;
}
#message{
display:none;
padding:20px 30px;
background-color:#bef;
color:#09d;
font-size:14px;
margin:auto;
position:absolute;
border-radius:5px;
box-shadow:3px 3px 3px #999;
border:1px solid #9ef;
text-shadow:1px 1px 2px #aaa;
}
#confirmDiv{
display:none;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.1);
}
#confirm{
position:fixed;
padding:30px 60px;
background-color:#def;
color:#09d;
font-size:14px;
margin:auto;
border-radius:5px;
box-shadow:3px 3px 3px #999;
border:1px solid #9ef;
}
#confirm>h3{
text-shadow:1px 1px 2px #aaa;
}
#confirm>div{
width:120px;
margin:auto;
margin-bottom:-10px;
}
#confirm .yes,.no{
padding:5px 20px;
outline:none;
margin-top:20px;
border:none;
cursor:pointer;
color:#fff;
}
#confirm .yes{
background-color:#0c0;
}
#confirm .yes:hover{
box-shadow:2px 2px 2px #999;
}
#confirm .no{
background-color:red;
}
#confirm .no:hover{
box-shadow:2px 2px 2px #999;
}
.maxdiv{
width:1250px;
margin:auto;
background-color:#fff;
}
.maxdiv>.top{
overflow:auto;
min-width:1250px;
background-color:#069;
color:#fff;
margin-bottom:5px;
box-shadow:2px 2px 3px #000;
}
.maxdiv>.top>div{
overflow:auto;
}
.left{
min-height:650px;
width:200px;
float:left;
background-color:#fff;
box-shadow:2px 2px 3px #999;
border-left:1px dotted #ccc;
}
.left>ul>li{
border:1px dotted #ddd;
padding:10px 10px;
cursor:pointer;
letter-spacing:2px;
transition:1s;
}
.left>ul>li:hover{
background-color:#069;
color:#fff;
}
#checked{
background-color:#069;
color:#fff;
}
.left>ul>ul{
color:#aaa;
display:none;
}
.left>ul>ul>li{
letter-spacing:2px;
text-align: left;
font-size:12px;
padding-left:30px;
line-height:30px;
cursor:pointer;
}
.left>ul>ul>li:hover{
color:#0df;
}
.top_div_span1{
margin:10px 20px;
letter-spacing:2px;
cursor:pointer;
transition:1s;
}
.top_div_span1:hover{
color:#0de;
}
.top_div_span2{
font-size:14px;
}
.top_div_tc{
cursor:pointer;
border:1px dotted #999;
font-size:14px;
color:#ccc;
transition:1s;
}
.top_div_tc:hover{
color:#0de;
border:1px dotted #0de;
}
.center{
overflow:auto;
}
.main{
float:left;
width:1038px;
margin-left:10px;
margin-top:1px;
background-color:#def;
box-shadow:2px 2px 3px #999;
min-height:650px;
}
.main>h3{
background-color:#dde;
padding:9px 20px;
color:#0ac;
letter-spacing:5px;
font-weight:bolder;
}
.foot{
background-color:#069;
color:#fff;
padding: 20px 0px;
font-size: 14px;
width:1250px;
margin:auto;
margin-top:3px;
clear:both;
}
.foot .footer{
margin:auto;
text-align: center;
}
主页js代码:
var sx=0;
function customList(){
if($("#zw").html()!='业务员'){
$("#message").html("未授权账号,请登录业务员账号操作!");
var left = $("#message").width()/2;
$("#message").css("left",$(window).width()/2-left);
$("#message").css("top",270);
$("#message").fadeIn(1000);
messageOut();
return;
}
$.ajax({
url:'customListPage',
async:false,
success:function(data){
$(".listView").html(data);
}
});
}
function carList(){
if($("#zw").html()!='管理'){
$("#message").html("未授权账号,请登录管理员账号操作!");
var left = $("#message").width()/2;
$("#message").css("left",$(window).width()/2-left);
$("#message").css("top",270);
$("#message").fadeIn(1000);
messageOut();
return;
}
$.ajax({
url:'carListPage',
async:false,
success:function(data){
$(".listView").html(data);
}
});
}
function driverList(){
if($("#zw").html()!='管理'){
$("#message").html("未授权账号,请登录管理员账号操作!");
var left = $("#message").width()/2;
$("#message").css("left",$(window).width()/2-left);
$("#message").css("top",270);
$("#message").fadeIn(1000);
messageOut();
return;
}
$.ajax({
url:'driverListPage',
async:false,
success:function(data){
$(".listView").html(data);
}
});
}
function salesList(){
if($("#zw").html()!='管理'){
$("#message").html("未授权账号,请登录管理员账号操作!");
var left = $("#message").width()/2;
$("#message").css("left",$(window).width()/2-left);
$("#message").css("top",270);
$("#message").fadeIn(1000);
messageOut();
return;
}
$.ajax({
url:'salesListPage',
async:false,
success:function(data){
$(".listView").html(data);
}
});
}
function pcddj(){
$.ajax({
url:'pcddjPage',
async:false,
success:function(data){
$(".listView").html(data);
function shuaxin(){
sx++;
if(sx<=10){
setTimeout(shuaxin,500);
}else{
sx=0;
}
}
shuaxin();
}
});
}
function pcdsh(){
if($("#zw").html()!='管理'){
$("#message").html("未授权账号,请登录管理员账号审核!");
var left = $("#message").width()/2;
$("#message").css("left",$(window).width()/2-left);
$("#message").css("top",270);
$("#message").fadeIn(1000);
messageOut();
return;
}
$.ajax({
url:'pcdshListPage',
async:false,
success:function(data){
$(".listView").html(data);
}
});
}
function cwsk(){
if($("#zw").html()!='财务'){
$("#message").html("未授权账号,请登录财务账号操作!");
var left = $("#message").width()/2;
$("#message").css("left",$(window).width()/2-left);
$("#message").css("top",270);
$("#message").fadeIn(1000);
messageOut();
return;
}
$.ajax({
url:'cwskListPage',
async:false,
success:function(data){
$(".listView").html(data);
}
});
}
function yjs(){
if($("#zw").html()!='财务'){
$("#message").html("未授权账号,请登录财务账号操作!");
var left = $("#message").width()/2;
$("#message").css("left",$(window).width()/2-left);
$("#message").css("top",270);
$("#message").fadeIn(1000);
messageOut();
return;
}
$.ajax({
url:'yjsListPage',
async:false,
success:function(data){
$(".listView").html(data);
}
});
}
function pcdtj(){
$.ajax({
url:'pcdtjListPage',
async:false,
success:function(data){
$(".listView").html(data);
}
});
}
function cclfx(){
$.ajax({
url:'cclfxListPage',
async:false,
success:function(data){
$(".listView").html(data);
}
});
}
function yskmx(){
$.ajax({
url:'yskmxListPage',
async:false,
success:function(data){
$(".listView").html(data);
}
});
}
function wskmx(){
$.ajax({
url:'wskmxListPage',
async:false,
success:function(data){
$(".listView").html(data);
}
});
}
function jsmx(){
$.ajax({
url:'jsmxListPage',
async:false,
success:function(data){
$(".listView").html(data);
}
});
}
function cbtcx(){
$.ajax({
url:'cbtcxListPage',
async:false,
success:function(data){
$(".listView").html(data);
}
});
}
function dccx(){
$.ajax({
url:'dccxListPage',
async:false,
success:function(data){
$(".listView").html(data);
$("#message").html("请选择车牌号码进行查询!");
var left = $("#message").width()/2;
$("#message").css("left",$(window).width()/2-left);
$("#message").css("top",270);
$("#message").fadeIn(1000);
messageOut();
}
});
}
$(function(){
$.ajax({
url:'homeUser',
async:false,
success:function(data){
var o = eval(data)[0];
if(o.yhzh!=null){
$("#yhzh").html(o.yhzh);
$("#zw").html(o.zw);
}else{
$("#yhzh").html(o.ywyxm);
$("#zw").html("业务员");
}
}
});
$(".top_div_span1").click(function(){
location.reload();
});
function startTime(){
var time = new Date().toLocaleString();
$("#time").html(time);
setTimeout(startTime,1000);
}
startTime();
var h1 = window.innerHeight-parseInt($(".top").css("height"))-115;
$(".left").css("height",h1);
var h2 = window.innerHeight-parseInt($(".top").css("height"))-115;
$(".main").css("height",h2);
$(".left>ul>li").click(function(){
$(".left>ul>li:not(this)").prop("id","");
$(this).prop("id","checked");
var jj=$(this).children("span").html();
if(jj=='+'){
$(this).next().css("display","block");
$(this).children("span").html("-");
}else{
$(this).next().css("display","none");
$(this).children("span").html("+");
}
});
$(".left>ul>ul>li").click(function(){
$(".left>ul>ul>li").css("color","#aaa");
$(this).css("color","#0df");
var title = $(this).html();
$(".main>h3").html(title);
if(title=='客户信息管理'){
customList();
return;
}
if(title=='车辆信息管理'){
carList();
return;
}
if(title=='驾驶员信息管理'){
driverList();
return;
}
if(title=='业务员信息管理'){
salesList();
return;
}
if(title=='派车单登记'){
if(sx!=0){
if($("#message").css("display")!='none'){
return;
}
$("#message").html("请勿频繁快速操作!");
var left = $("#message").width()/2;
$("#message").css("left",$(window).width()/2-left);
$("#message").css("top",270);
$("#message").fadeIn(1000);
messageOut();
return;
}
location.reload();
return;
}
if(title=='派车单审核'){
pcdsh();
return;
}
if(title=='财务收款'){
cwsk();
return;
}
if(title=='单车月结算'){
yjs();
return;
}
if(title=='派车单统计'){
pcdtj();
return;
}
if(title=='出车率分析'){
cclfx();
return;
}
if(title=='已收款明细'){
yskmx();
return;
}
if(title=='未收款明细'){
wskmx();
return;
}
if(title=='结算明细'){
jsmx();
return;
}
if(title=='车补贴查询'){
cbtcx();
return;
}
if(title=='单车查询'){
dccx();
return;
}
});
pcddj();
});
$(window).resize(function(){
var h1 = window.innerHeight-parseInt($(".top").css("height"))-115;
$(".left").css("height",h1);
var h2 = window.innerHeight-parseInt($(".top").css("height"))-115;
$(".main").css("height",h2);
});
function exit(){
$("#confirm h3").html("确定退出车辆派遣管理系统?");
$("#confirmDiv").fadeIn(1000);
var left = window.innerWidth/2-$("#confirm").width()/2;
$("#confirm").css("left",left);
$("#confirm").css("top",200);
$("#confirm .yes").click(function(){
$("#confirmDiv").fadeOut(1000);
$.ajax({
url:'exit',
async:false,
success:function(data){
location.reload();
}
});
});
$("#confirm .no").click(function(){
$("#confirmDiv").fadeOut(1000);
});
}
var mo=0;
function messageOut(){
mo+=1;
if(mo>=20){
$("#message").css("top","-=3");
}
if(mo<=41){
setTimeout(messageOut,50);
}else{
$("#message").fadeOut(1000);
mo=0;
}
}
$(Window).keydown(function(){
if(event.keyCode==13){
var addCustomPage = $(".addCustomPage").css("display");
if(addCustomPage=='block'){
saveAddCustomPage();
return;
}
var updateCustomPage = $(".updateCustomPage").css("display");
if(updateCustomPage=='block'){
saveUpdateCustomPage();
return;
}
var addPageDiv = $(".addPageDiv").css("display");
if(addPageDiv=='block'){
add();
return;
}
var updatePageDiv = $(".updatePageDiv").css("display");
if(updatePageDiv=='block'){
update();
return;
}
}
});