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