| | |
|---|
| | | <html lang="en"> |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | <meta name="viewport" content="width=device-width, target-densitydpi=high-dpi, initial-scale=1.0, user-scalable=no"/> |
|---|
| | | <title>PDA首页</title> |
|---|
| | | <script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script> |
|---|
| | | <style> |
|---|
| | | * { |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | box-sizing: border-box; |
|---|
| | | -webkit-box-sizing: border-box; |
|---|
| | | -moz-box-sizing: border-box; |
|---|
| | | } |
|---|
| | | html { |
|---|
| | | height: 100%; |
|---|
| | | /*line-height: 1.5;*/ |
|---|
| | | } |
|---|
| | | body { |
|---|
| | | height: 100%; |
|---|
| | | /*overflow: hidden;*/ |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* 导航 */ |
|---|
| | | .nav { |
|---|
| | | background-color: #fff; /*todo*/ |
|---|
| | | color: #000; |
|---|
| | | list-style-type: none; |
|---|
| | | position: fixed; |
|---|
| | | width: 100%; |
|---|
| | | overflow: hidden; |
|---|
| | | box-shadow: 0 1px 2px 0 rgba(0,0,0,.1) |
|---|
| | | } |
|---|
| | | .nav li { |
|---|
| | | float: left; |
|---|
| | | border-right: 1px solid #f1f1f1; /*todo*/ |
|---|
| | | } |
|---|
| | | .nav li a { |
|---|
| | | font-size: 20px; |
|---|
| | | letter-spacing: 1px; |
|---|
| | | display: block; |
|---|
| | | text-decoration: none; |
|---|
| | | padding: 3px 10px; |
|---|
| | | text-align: center; |
|---|
| | | /*transform:scale(1.5);*/ |
|---|
| | | /*-webkit-transform:scale(1.5);*/ |
|---|
| | | /*-moz-transform:scale(1.5);*/ |
|---|
| | | } |
|---|
| | | .nav li a:hover { |
|---|
| | | color: #000; |
|---|
| | | } |
|---|
| | | .nav-unselect { |
|---|
| | | color: #666; |
|---|
| | | } |
|---|
| | | .nav-select { |
|---|
| | | background-color: #f1f1f1; /*todo*/ |
|---|
| | | color: #000; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* 主体 */ |
|---|
| | | #content { |
|---|
| | | padding-top: 32px; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | } |
|---|
| | | iframe { |
|---|
| | | border-width: 0; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | |
|---|
| | | <!-- 导航栏 --> |
|---|
| | | <ul class="nav"> |
|---|
| | | <li><a id="comb" onclick="nav(this.id)" class="nav-select" href="#">组托</a></li> |
|---|
| | | <li><a id="stockIn" onclick="nav(this.id)" class="nav-unselect" href="#">入库</a></li> |
|---|
| | | <li><a id="stockOut" onclick="nav(this.id)" class="nav-unselect" href="#">出库</a></li> |
|---|
| | | </ul> |
|---|
| | | |
|---|
| | | <!-- 主体内容 --> |
|---|
| | | <iframe id="content" src="comb.html"></iframe> |
|---|
| | | |
|---|
| | | </body> |
|---|
| | | <script> |
|---|
| | | // 导航栏 |
|---|
| | | function nav(id) { |
|---|
| | | $('.nav-select').attr("class", "nav-unselect"); |
|---|
| | | $('#'+id).attr("class", "nav-select"); |
|---|
| | | $('#content').attr("src", id+".html"); |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | </html> |
|---|
