易购商城后台管理系统前端界面

	
		
		
		
		
		
		
		
		
	
	
		

			

				
			
			

				
易购商城后台管理系统
			
			

				

					管理员:softeem
					
						注销
					
				
			
		
		

			

				

					

						商品管理
						

							
商品信息
							
商品分类
							
品牌管理
						
					
					

						订单管理
						

							
订单列表
							
退货处理
							
销售统计
						
					
					

						系统设置
						

							
管理员列表
							
修改密码
							
安全退出
						
					
				
			
			

				

					

						
商品管理
						
商品信息
					
				
				

					

						
						商品搜索
					
					
					

						

							
							
						
						

							
							
						
						

							
							
								手机
								电脑
								家用电器
							
						
						

							
							
								上架
								下架
							
						
						搜索
						重置
					
				
				
			    

					添加商品					
				
				
				
				

					

						

							
序号
							
图片
							
商品名
							
单价
							
库存
							
分类
							
状态
							
操作
						
						

							
001
							

							
米兔故事机
							
¥199
							
无限
							
家用电器
							
上架中
							

								编辑
								下架
							
						
					    

					    	
002
					    	

					    	
米兔故事机
					    	
¥199
					    	
无限
					    	
家用电器
					    	
上架中
					    	

					    		编辑
					    		下架
					    	
					    
						

							
003
							

							
米兔故事机
							
¥199
							
无限
							
家用电器
							
上架中
							

								编辑
								下架
							
						
						

							
004
							

							
米兔故事机
							
¥199
							
无限
							
家用电器
							
上架中
							

								编辑
								下架
							
						
					
					
					

						
<<
						
1
						
2
						
3
						
4
						
>>
					
					
				
				
			
	

body{
	background: #2c3e50;
}
div{
	box-sizing: border-box;
}

.header{
	position: relative;
	width: 100%;
	height: 80px;
	background: #2c3e50;
}
.main{
	position: relative;
	width: 100%;
	min-width: 1000px;
	min-height: 600px;
}
.header,
.main {
	min-width: 1000px;
}
.left,
.right{
	position: absolute;	
	top: 0px;	
	min-height: 600px;
}
.left{
	left:0px;
	width: 20%;		
}
.right{
	padding: 5px;	
	left: 20%;
	right: 0px;
	width: 80%;	
	background:whitesmoke;	
}
/* 头部样式 */
.header>div {
	float: left;
	min-height: 100%;
}
.logo{
	width: 20%;	
}
.title {
	width: 60%;
	text-align: center;
	line-height: 80px;
	color: white;
}
.user-info {
	width: 20%;	
}
.logo img{
	margin: 9px auto;
	height: 62px;
	width: 172px;
}
.user-wrap{
	position: absolute;
	right: 20px;
	bottom: 20px;
}
#account,
.exit{
	font-size: 12pt;
	color: #ddd;
}
.exit{
	text-decoration: none;
	color: #bbb;	
}
.exit:hover{
	color: #f00;
}

/* 左侧菜单 */
.left li a{
	display: block;
	height: 40px;
	line-height: 40px;
	text-align: center;	
}

/* 设置一级菜单样式 */
.menu>li>a {
	height: 50px;
	line-height: 50px;
	font-size: 18px;
	background: #2c3e50;
	color: #eee;
	
}
.submenu>li>a{
	font-size: 16px;
	color: #eee;
	background: #34495e;	
}
/* 设置二级菜单项的底部边框 (除最后一个元素外) */
.submenu>li:not(:last-child){
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.submenu>li>a:hover{
	color: #222;
	background: #ddd;
}

/* 右侧内容 */
.link-nav>ul>li{
	display: inline-block;
	margin-left: 5px;
	font-size: 16px;
}
.link-nav a{
	display: inline-block;
	font-size: 16px;
}
.link-nav>ul>li:not(:last-child)::after{
	content: " >";
}
.form-wrap,
.data-wrap{
	margin: 10px;
    padding: 10px;
	border: 1px solid rgba(0,0,0,0.2);
	overflow: hidden;
}
.input-group{	
	width: 200px;
	height: 30px;
	border: 1px solid rgba(0,0,0,.5);
	background: white;
}
.input-group>i{
	float: left;
	width: 28px;
	height: 30px;
	text-align: center;
	line-height: 30px;
}
.form-control{
	float: left;
	padding: 0 5px;
	height: 28px;
	width: 170px;
	border: 0;
	box-sizing: border-box;
}
.form-wrap>form{
	margin-top: 10px;
}
.btn,
.form-inline>div{
	float: left;
	margin: 10px;
}
.btn{	
	padding: 0 20px;
	height: 30px;
	background: #ddd;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 5px;
}
.btn-primary{
	color: #eee;
	background: #3498db;
	border:1px solid #3498db;	
}
.btn-danger{
	color: #eee;
	background: #e74c3c;
	border: 1px solid #e74c3c;	
}
.btn-primary:hover{
	background: #2980b9;
	border-color: #2980b9;
}
.btn-danger:hover{
	background: #c0392b;
	border-color: #c0392b;
}
/* 数据列表样式 */
.data-wrap{
	clear: both;	
}
.tab{
	width: 100%;
	border-collapse: collapse;
}
th{
	color: #eee;
	background: #34495E;
}
th,
td{
	padding: 5px;
	text-align: center;
	/* border-bottom: 1px solid rgba(0,0,0,.5); */
}
.tab tr:not(:first-child):nth-child(2n){
	background: #ddd;
}
.tab tr:not(:first-child):hover{
	background: rgba(0,0,0,0.3);
}
.goods-icon{
	margin: 0 auto;
	width: 60px;
	height: 60px;
	border: 1px solid rgba(0,0,0,0.1);
}
.btn-sm{
	font-size: 12px;
	padding: 0 10px;
}
.tab td:nth-child(8){
	display: flex;
	align-content: center;
	justify-content: center;
	border: 0;
}
/* 分页组件样式 */
.page{
	margin-top: 20px;
}
.page>li{
	display: inline-block;
	width: 30px;
	height: 30px;		
	border-radius: 5px;
}
.page>li>a{
	display: block;
	text-align: center;
	line-height: 30px;
	color: #3498DB;
	text-decoration: none;
	border: 1px solid #3498DB;
}
.text-right{
	text-align: right;
}
.text-left{
	text-align: left;
}
.text-center{
	text-align: center;
}
.active,
.page>li>a:hover{
	color: #eee !important;
	background: #3498db;
	border-color: #3498db;
}