shop--8.商品类别--批量操作--添加(前端)
productcategorymanegement.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>商店列表</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1"> <link rel="shortcut icon" href="/favicon.ico"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"> <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css"> <link rel="stylesheet" href="../resources/css/shop/productcategorymanegement.css"> </head> <body> <header class="bar bar-nav"> <h1 class="title">商品分类管理</h1> </header> <div class="content"> <div class="content-block"> <div class="row row-product-category"> <div class="col-40">商店名称</div> <div class="col-40">状态</div> <div class="col-20">操作</div> </div> <div class="category-wrap"> </div> </div> <div class="content-block"> <div class="row"> <div class="col-50"> <a href="#" class="button button-big button-fill button-danger" id="new">新增</a> </div> <div class="col-50"> <a href="#" class="button button-big button-fill button-success" id="submit">提交</a> </div> </div> </div> </div> <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script> <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script> <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script> <script type='text/javascript' src='../resources/js/shop/productcategorymanegement.js' charset="utf-8"></script> </body> </html>
productcategorymanegement.js
.row-product-category { border: 1px solid #999; padding: .5rem; border-bottom: none; } .row-product-category:last-child { border-bottom: 1px solid #999; } .category-input { border: none; background-color: #eee; } .product-category-name { white-space: nowrap; overflow-x: scroll; }