h5-css-js-exercise
/
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link href="css/index.css" type="text/css" rel="stylesheet" />
		<title></title>
	</head>
	<body>
		<div class="demo">
			<div class="header">
			    <div class="headerLeft">
			        <img src="./img/Artboard%20Copy%2019@1x.png">
			        <p>腾讯数字商品管理</p>
			    </div>
			    <div class="headerRight">
			        <ul>
			            <li>首页</li>
			            <li>文档中心</li>
			            <li>
			                <span>gavenwu</span>
			                <img src="./img/icon_more.png" alt="">
			            </li>
			        </ul>
			    </div>
			</div>
			<div class="body">
				<div class="nav">
					<ul>
						<div class="nav-tit">
							<img src="./img/Artboard%20Copy%2019@1x.png">
							<p>个人账户</p>
						</div>
						<li><a href="">账户资产</a></li>
						<li><a href="#">基本信息</a></li>
						<li><a href="#">我的合同</a></li>
						<div class="nav-tit">
							<img src="./img/Artboard%20Copy%2019@1x.png">
							<p>订单管理</p>
						</div>
						<li><a href="">账户资产</a></li>
						<li><a href="#">基本信息</a></li>
						<li><a href="#">我的合同</a></li>
					</ul>
				</div>
				<div class="text">
					<div class="order">
						<div><img src="./img/icon_more.png" /></div>
						<div class="admin-order">
							<div>订单管理</div>
							<div>>创建订单</div>
						</div>
					</div>
					<div class="edorder">
						<div class="ab-order">
							<img src="./img/Artboard%20Copy%2019@1x.png" />
							<p>编辑订单</p>
						</div>
						<div class="line"></div>
						<div class="ab-order">
							<img src="./img/Shape@1x.png" />
							<p>支付订单</p>
						</div>
						<div class="line"></div>
						<div class="ab-order">
							<img src="./img/Shape@1x.png" />
							<p>使用商品</p>
						</div>
					</div>
					<div class="vip">
						<img src="./img/Shape@1x.png" />
						<p>腾讯视频VIP</p>
					</div>
					<div class="card-button">
						<div>商品:</div>
						<button>月卡</button>
						<button>季卡</button>
						<button>年卡</button>
					</div>
					<div class="price">价格表:</div>
					 <table id="dataTable">
					 	<thead>
					 		<th>采购数量</th>
					 		<th>单价</th>
					 	</thead>
					 	<tbody>
					 		<tr>
					 			<td>0 < 采购数量 < 1000</td>
					 			<td>17元 </td>
					 		</tr>
					 		<tr>
					 			<td>1000 < 采购数量</td>
					 			<td>17元 </td>
					 		</tr>
					</table>
					<div class="unit-price">
						<div>商品单价：</div>
						<div>20元</div>
					</div>
					<div class="activity">
						<div>活动名称：</div>
						<div class="yunsuan">
							<div id="btn" onclick="sub()">-</div>
							<div id="number">999</div>
							<div id="btn" onclick="add()">+</div>
						</div>
						<div>温馨提示：距离下一个梯度单价19元还差1000个月卡</div>
					</div>

					<div class="unit-price">
						<div>商品总价：</div>
						<div>200,000元</div>
					</div>
					<div class="line1"></div>
					<div class="select">
						<input type="checkbox" name="select"/>
						<div class="deal">
							<div>同意</div>
							<div>购买协议</div>
						</div>
					</div>
					<div class="footer-button">
						<button>支付</button>
						<button>返回</button>
					</div>
				</div>
			</div>
			<div class="footer">底部</div>
		</div>
	</body>

<script>
	var num = document.getElementById("number").innerHTML
	function sub(){
		num--;
		document.getElementById("number").innerHTML = num;
	}
	function add(){
		num++;
		document.getElementById("number").innerHTML = num;
	}

</script>

</html>