vue+elementui实现一个点餐收银系统页面代码
代码语言:html
所属分类:布局界面
代码描述:vue+elementui实现一个点餐收银系统页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/element-ui.2.15.1.css">
<style>
body { font-family:"微软雅黑", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0; }
li{list-style-type:none;}
img{vertical-align:top;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;font-size:12px; font-weight:normal;}
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}
body,html,#app{
width: 100%;
height: 100%;
}
.left-nav{
color: #FFF;
font-size: 12px;
height: 100%;
background: #1d8ce0;
float: left;
width: 60px;
}
.left-nav li {
padding: 10px 0;
text-align: center;
border-bottom: 1px solid #e7e7e7;
transition: all .5s;
}
.left-nav li:hover{
background: #F90
}
.left-nav li.active{
background: #F90
}
.icon {
font-size: 36px;
display: block
}
.pos{
position: absolute;
top: 0;
right: 0;
left: 60px;
bottom: 0;
}
.pos .el-row,
.pos .el-col{
height: 100%;
}
.pos-order{
padding: 10px;
background: #fbfcff;
border-right: 1px solid #e7e7e7
}
.goods-type{
padding: 10px
}
.foot-statistical{
padding: 10px;
text-align: center;
background: #fff;
border: 1px solid #e7e7e7;
border-top: none;
}
.foot-statistical span{
margin: 0 10px;
font-size: 16px
}
.foot-statistical span small{
font-size: 12px
}
.foot-btn{
padding: 10px;
text-align: center
}
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0