vue+elementui实现一个点餐收银系统页面代码-html代码-BFW代码库

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
    }
    .title{
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        border-bottom:1px solid #D3DCE6;
        background-color: #F9FAFC;
        padding:10px;
    }
    .often-goods-list{ 
        padding: 10px;
        overflow: hidden
    }
    .often-goods-list ul li{
       list-style: none;
       float:left;
       border:1px solid #E5E9F2;
       padding:10px;
       margin:5px;
       background-color:#fff;
       cursor: pointer
    }
    .o-price{
       color:#58B7FF; 
    }
    .cookList li{
        list-style: none;
        width:23%;
        border:1px solid #E5E9F2;
        height: auot;
        overflow: hidden;
        background-color:#fff;
        padding: 2px;
        float:left;
        margin: 2px;
        cursor: pointer
    }
    .cookList li span{ 
         display: block;
         float:left;
    }
    .foodImg{
        width: 40%;
    }
    .food-content{
        float: left
    }
    .food-content span{
        display: block;
        width:100%
    }
    .foodName{
        font-size: 16px;
        padding-left: 10px;
        color:brown;
    }
    .foodPrice{
        font-size: 16px;
        padding-left: 10px;
        padding-top:10px;
    }
    .qr-code{
        text-align: center
    }
    </style>

</head>

<body>

    <div id="app">
        <!-- 左侧菜单 -->
        <ul class="left-nav">
            <li class="active">
                <i class="icon fa fa-cny"></i>
                <span>收银</span>
            </li>
    .........完整代码请登录后点击上方下载按钮下载查看