车辆派遣管理系统-00-主页设计

今日完成任务:主页面设计

核心代码:见下列插入的代码

遇到的问题:无

解决的方法:无

 

所有的业务功能均在主页上嵌套功能模块的子页面

布局:顶部和底部做基本展示,作业为折叠菜单

事件:通过折叠菜单的点击,加载对应的功能子页面,嵌套到主页主体区域内

主页布局设计如下图

主页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>
		&nbsp;&nbsp;&nbsp;
		<span class="top_div_span2">当前登录用户:</span>
		<span class="top_div_span2" id="yhzh"></span>
		&nbsp;&nbsp;&nbsp;
		<span class="top_div_span2">用户角色:</span>
		<span class="top_div_span2" id="zw"></span>
		&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;
		<span>当前时间:</span>
		<span class="top_div_span2" id="time"></span>
		&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;
		<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>
 		&nbsp;
 		<button class="no">否</button>
 		</div>
 	</div>
 	</div>
 	<div class="foot">
	<div class="footer">
		<p>京公网安备 11000002000088号&nbsp;&nbsp;|&nbsp;&nbsp;京ICP证070359号&nbsp;&nbsp;|&nbsp;&nbsp;互联网信息服务资格证编号(京)-经营性-2014-0008&nbsp;&nbsp;|&nbsp;&nbsp;新出发京零 字第大120007号</p>
		<p>互联网出版许可证编号新出网证(京)字150号&nbsp;&nbsp;|&nbsp;&nbsp;出版物经营许可证&nbsp;&nbsp;|&nbsp;&nbsp;网络文化经营许可证京网文[2014]2148-348号&nbsp;&nbsp;|&nbsp;&nbsp;违法和不良信息举报电话:4006561155</p>
		<p>Copyright © 2020 - 2022  方凯@ 版权所有&nbsp;&nbsp;|&nbsp;&nbsp;消费者维权热线:4006067733经营证照&nbsp;&nbsp;|&nbsp;&nbsp;(京)网械平台备字(2018)第00003号&nbsp;&nbsp;|&nbsp;&nbsp;营业执照</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;
		}
	}
});

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值