sailun
/
sailun-agent


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
							<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>简约表格插件</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<script src="../../script/jquery.min.js"></script>
		<script src="../../script/tableXR.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/html.css"/>
		<style>
			table.gridtable {
				font-family: verdana, arial, sans-serif;
				font-size: 11px;
				color: #333333;
				border-width: 1px;
				border-color: #666666;
				border-collapse: collapse;
				width: 100%;
				margin-top: 1.5rem;
			}
			table.gridtable th {
				border-width: 1px;
				padding: 8px 2px;
				border-style: solid;
				background-color: #007f86;
				color : #fff;
			}
			table.gridtable td {
				border-width: 1px;
				padding: 8px 2px;
				border-style: solid;
				border-color: #666666;
				text-align: center;
			}
			.aui-flex {
				display: flex;
				display: -webkit-flex;
				margin: 10px;
				float: right;
			}
			.aui-input {
				width: 2rem !important;
				border: 1px solid #999 !important;
				height: 1.3rem !important;
				margin: 0 10px !important;
			}
			.aui-img {
			    width: 4rem;
			    position: absolute;
			    margin-left: -.6rem;
			    margin-top: -.9rem;
			}
			.aui-flex1 {
			    display : flex;
			    display: -webkit-flex;
			    justify-content: space-around;
			}
			.aui-flex1 p {
			    font-weight: bold;
			    color:#007F86;
			    font-size : 1rem;
			}
			.aui-flex1-input {
			    width: 2rem;
			    border: 1px solid#ddd;
			    margin: 0px;
			    text-align: center;
			}
			.brand {
			    width : 2rem;
			    background-color: #007F86;
			    color: #fff;
			    padding: 3px 4px;
			    margin: 0 auto;
			    border-radius: 5px;
			}
			.aui-btn {
			   background-color: #007F86;
			   width: 80%;
			   padding: 8px 0;
			   text-align: center;
			   color: #fff;
			   border-radius: 5px;
			   margin: 10px 10%;
			   box-shadow: 1px 1px 1px #ddd;
			}
			table.gridtable tr:nth-child(odd) {
				background: #d1f8ff !important;
			}
			table tr:nth-child(even) {
				background: #fff !important;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<table class="gridtable">
				<tr>
					<th>规格</th><th>花纹</th><th>数量</th><th>品牌</th><th>操作</th>
				</tr>
				<tr>
					<td>12R22.5-18</td><td>JT538</td><td style="color: #8ec31f">充足</td><td><div class="brand">金宇</div></td><td><div class="aui-flex1"><p>-</p><input class="aui-flex1-input" type="text" value="100"/><p>+</p></div></td>
				</tr>
				<tr>
					<td>12R22.5-18</td><td>JT538</td><td style="color: #8ec31f">充足</td><td><div class="brand" style="background-color: #009944">金路</div></td><td><div class="aui-flex1"><p>-</p><input class="aui-flex1-input" type="text" value="100"/><p>+</p></div></td>
				</tr>
				<tr>
					<td>12R22.5-18</td><td>JT538</td><td style="color: #8ec31f">充足</td><td><div class="brand">金宇</div></td><td><div class="aui-flex1"><p>-</p><input class="aui-flex1-input" type="text" value="100"/><p>+</p></div></td>
				</tr>
				<tr>
					<td>12R22.5-18</td><td>JT538</td><td style="color: #8ec31f">充足</td><td><div class="brand">金宇</div></td><td><div class="aui-flex1"><p>-</p><input class="aui-flex1-input" type="text" value="100"/><p>+</p></div></td>
				</tr>
				<tr>
					<td>12R22.5-18</td><td>JT538</td><td style="color: #8ec31f">充足</td><td><div class="brand" style="background-color: #009944">金路</div></td><td><div class="aui-flex1"><p>-</p><input class="aui-flex1-input" type="text" value="100"/><p>+</p></div></td>
				</tr>
				<tr>
					<td>12R22.5-18</td><td>JT538</td><td style="color: #8ec31f">充足</td><td><div class="brand">金宇</div></td><td><div class="aui-flex1"><p>-</p><input class="aui-flex1-input" type="text" value="100"/><p>+</p></div></td>
				</tr>
				<tr>
					<td>12R22.5-18</td><td>JT538</td><td style="color: #8ec31f">充足</td><td><div class="brand" style="background-color: #009944">金路</div></td><td><div class="aui-flex1"><p>-</p><input class="aui-flex1-input" type="text" value="100"/><p>+</p></div></td>
				</tr>
				<tr>
					<td>12R22.5-18</td><td>JT538</td><td style="color: #8ec31f">充足</td><td><div class="brand">金宇</div></td><td><div class="aui-flex1"><p>-</p><input class="aui-flex1-input" type="text" value="100"/><p>+</p></div></td>
				</tr>
				<tr>
					<td>12R22.5-18</td><td>JT538</td><td style="color: #8ec31f">充足</td><td><div class="brand" style="background-color: #009944">金路</div></td><td><div class="aui-flex1"><p>-</p><input class="aui-flex1-input" type="text" value="100"/><p>+</p></div></td>
				</tr>
			</table>
			<footer class="aui-footer zmq-footer-fixed">
				<div class="zmq-width-90 aui-footer-text-info zmq-textAlign-center zmq-padding-btn zmq-btn-img">
					<a href="javascript:;" class="aui-payment zmq-text-white">提交订货</a>
				</div>
			</footer>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/vue.js"></script>
	<script type="text/javascript" src="../../script/httpRequest.js"></script>
	<script type="text/javascript" src="../../script/vue_plugins.js"></script>
	<script type="text/javascript">
		new Vue({
			el : '#app',
			data : {
				btns : [{
					title : '规格',
					checked : false,
					code : 'gg'
				}, {
					title : '花纹',
					checked : false,
					code : 'hw'
				}, {
					title : '用途',
					checked : false,
					code : 'cc'
				}],
			},
			methods : {
			},
			mounted : function() {
			}
		})
	</script>
</html>