瀏覽代碼

增加代金卷以及账单页面

Chente 8 年之前
父節點
當前提交
e095ce500d
共有 3 個文件被更改,包括 394 次插入3 次删除
  1. 246 3
      css/global.css
  2. 73 0
      order.html
  3. 75 0
      voucher.html

+ 246 - 3
css/global.css

@@ -158,6 +158,234 @@ input.button{
   color:#0196ff;
   background:#fff;
 }
+.table {
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 20px;
+}
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+  padding: 8px;
+  line-height: 1.42857143;
+  vertical-align: top;
+  border-top: 1px solid #dddddd;
+}
+.table > thead > tr > th {
+  vertical-align: bottom;
+  border-bottom: 2px solid #dddddd;
+}
+.table > caption + thead > tr:first-child > th,
+.table > colgroup + thead > tr:first-child > th,
+.table > thead:first-child > tr:first-child > th,
+.table > caption + thead > tr:first-child > td,
+.table > colgroup + thead > tr:first-child > td,
+.table > thead:first-child > tr:first-child > td {
+  border-top: 0;
+}
+.table > tbody + tbody {
+  border-top: 2px solid #dddddd;
+}
+.table .table {
+  background-color: #ffffff;
+}
+.table-condensed > thead > tr > th,
+.table-condensed > tbody > tr > th,
+.table-condensed > tfoot > tr > th,
+.table-condensed > thead > tr > td,
+.table-condensed > tbody > tr > td,
+.table-condensed > tfoot > tr > td {
+  padding: 5px;
+}
+.table-bordered {
+  border: 1px solid #dddddd;
+}
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+  border: 1px solid #dddddd;
+}
+.table-bordered > thead > tr > th,
+.table-bordered > thead > tr > td {
+  border-bottom-width: 2px;
+}
+.table-striped > tbody > tr:nth-child(odd) {
+  background-color: #f9f9f9;
+}
+.table-hover > tbody > tr:hover {
+  background-color: #f5f5f5;
+}
+table col[class*="col-"] {
+  position: static;
+  float: none;
+  display: table-column;
+}
+table td[class*="col-"],
+table th[class*="col-"] {
+  position: static;
+  float: none;
+  display: table-cell;
+}
+.table > thead > tr > td.active,
+.table > tbody > tr > td.active,
+.table > tfoot > tr > td.active,
+.table > thead > tr > th.active,
+.table > tbody > tr > th.active,
+.table > tfoot > tr > th.active,
+.table > thead > tr.active > td,
+.table > tbody > tr.active > td,
+.table > tfoot > tr.active > td,
+.table > thead > tr.active > th,
+.table > tbody > tr.active > th,
+.table > tfoot > tr.active > th {
+  background-color: #f5f5f5;
+}
+.table-hover > tbody > tr > td.active:hover,
+.table-hover > tbody > tr > th.active:hover,
+.table-hover > tbody > tr.active:hover > td,
+.table-hover > tbody > tr:hover > .active,
+.table-hover > tbody > tr.active:hover > th {
+  background-color: #e8e8e8;
+}
+.table > thead > tr > td.success,
+.table > tbody > tr > td.success,
+.table > tfoot > tr > td.success,
+.table > thead > tr > th.success,
+.table > tbody > tr > th.success,
+.table > tfoot > tr > th.success,
+.table > thead > tr.success > td,
+.table > tbody > tr.success > td,
+.table > tfoot > tr.success > td,
+.table > thead > tr.success > th,
+.table > tbody > tr.success > th,
+.table > tfoot > tr.success > th {
+  background-color: #dff0d8;
+}
+.table-hover > tbody > tr > td.success:hover,
+.table-hover > tbody > tr > th.success:hover,
+.table-hover > tbody > tr.success:hover > td,
+.table-hover > tbody > tr:hover > .success,
+.table-hover > tbody > tr.success:hover > th {
+  background-color: #d0e9c6;
+}
+.table > thead > tr > td.info,
+.table > tbody > tr > td.info,
+.table > tfoot > tr > td.info,
+.table > thead > tr > th.info,
+.table > tbody > tr > th.info,
+.table > tfoot > tr > th.info,
+.table > thead > tr.info > td,
+.table > tbody > tr.info > td,
+.table > tfoot > tr.info > td,
+.table > thead > tr.info > th,
+.table > tbody > tr.info > th,
+.table > tfoot > tr.info > th {
+  background-color: #d9edf7;
+}
+.table-hover > tbody > tr > td.info:hover,
+.table-hover > tbody > tr > th.info:hover,
+.table-hover > tbody > tr.info:hover > td,
+.table-hover > tbody > tr:hover > .info,
+.table-hover > tbody > tr.info:hover > th {
+  background-color: #c4e3f3;
+}
+.table > thead > tr > td.warning,
+.table > tbody > tr > td.warning,
+.table > tfoot > tr > td.warning,
+.table > thead > tr > th.warning,
+.table > tbody > tr > th.warning,
+.table > tfoot > tr > th.warning,
+.table > thead > tr.warning > td,
+.table > tbody > tr.warning > td,
+.table > tfoot > tr.warning > td,
+.table > thead > tr.warning > th,
+.table > tbody > tr.warning > th,
+.table > tfoot > tr.warning > th {
+  background-color: #fcf8e3;
+}
+.table-hover > tbody > tr > td.warning:hover,
+.table-hover > tbody > tr > th.warning:hover,
+.table-hover > tbody > tr.warning:hover > td,
+.table-hover > tbody > tr:hover > .warning,
+.table-hover > tbody > tr.warning:hover > th {
+  background-color: #faf2cc;
+}
+.table > thead > tr > td.danger,
+.table > tbody > tr > td.danger,
+.table > tfoot > tr > td.danger,
+.table > thead > tr > th.danger,
+.table > tbody > tr > th.danger,
+.table > tfoot > tr > th.danger,
+.table > thead > tr.danger > td,
+.table > tbody > tr.danger > td,
+.table > tfoot > tr.danger > td,
+.table > thead > tr.danger > th,
+.table > tbody > tr.danger > th,
+.table > tfoot > tr.danger > th {
+  background-color: #f2dede;
+}
+.table-hover > tbody > tr > td.danger:hover,
+.table-hover > tbody > tr > th.danger:hover,
+.table-hover > tbody > tr.danger:hover > td,
+.table-hover > tbody > tr:hover > .danger,
+.table-hover > tbody > tr.danger:hover > th {
+  background-color: #ebcccc;
+}
+.table-responsive {
+  overflow-x: auto;
+  min-height: 0.01%;
+}
+@media screen and (max-width: 767px) {
+  .table-responsive {
+    width: 100%;
+    margin-bottom: 15px;
+    overflow-y: hidden;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    border: 1px solid #dddddd;
+  }
+  .table-responsive > .table {
+    margin-bottom: 0;
+  }
+  .table-responsive > .table > thead > tr > th,
+  .table-responsive > .table > tbody > tr > th,
+  .table-responsive > .table > tfoot > tr > th,
+  .table-responsive > .table > thead > tr > td,
+  .table-responsive > .table > tbody > tr > td,
+  .table-responsive > .table > tfoot > tr > td {
+    white-space: nowrap;
+  }
+  .table-responsive > .table-bordered {
+    border: 0;
+  }
+  .table-responsive > .table-bordered > thead > tr > th:first-child,
+  .table-responsive > .table-bordered > tbody > tr > th:first-child,
+  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
+  .table-responsive > .table-bordered > thead > tr > td:first-child,
+  .table-responsive > .table-bordered > tbody > tr > td:first-child,
+  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
+    border-left: 0;
+  }
+  .table-responsive > .table-bordered > thead > tr > th:last-child,
+  .table-responsive > .table-bordered > tbody > tr > th:last-child,
+  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
+  .table-responsive > .table-bordered > thead > tr > td:last-child,
+  .table-responsive > .table-bordered > tbody > tr > td:last-child,
+  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
+    border-right: 0;
+  }
+  .table-responsive > .table-bordered > tbody > tr:last-child > th,
+  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
+  .table-responsive > .table-bordered > tbody > tr:last-child > td,
+  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
+    border-bottom: 0;
+  }
+}
 /*global header*/
 .globalHeader {
   background:#515b61;
@@ -415,7 +643,7 @@ input.button{
   border:1px solid #dcdcdc;
   border-top-color:#abadb3;
   border-left-color:#abadb3;
-  padding:7px; 
+  padding:7px;
   vertical-align: bottom;
   color:#999;
   outline: medium none;
@@ -741,7 +969,7 @@ input.button{
   color:#fff;
   font-size: 18px;
   padding:15px 0;
-  text-align: center;  
+  text-align: center;
 }
 .mobileRe{
   padding:20px 30px;
@@ -798,4 +1026,19 @@ input.button{
   font-size: 12px;
   padding:5px 0;
   color:#E9322E;
-}
+}
+.voucher-input {
+  padding: 15px 0
+}
+.voucher-input input{
+  font-size:18px;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 5px;
+  width: 200px;
+  float:left
+}
+.voucher-list legend{
+  font-size: :14px;
+  margin:10px 0
+}

+ 73 - 0
order.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+	<meta charset=utf-8>
+	<title>个人信息纵横通行帐号</title>
+	<meta name=description content=一个帐号通用纵横旗下所有网络产品。>
+	<meta name=copyright content=smartcost.com.cn>
+	<link rel=stylesheet href=css/global.css>
+	<script src=js/jquery-1.7.1.min.js></script>
+	<script src=js/global.js></script>
+</head>
+<body>
+<div class="globalHeader">
+	<div class="width950">
+		<div class="globalNav">
+			<a href="http://smartcost.com.cn" target="_blank">纵横官网</a>
+			<a href="http://sso.smartcost.com.cn" target="_blank" class="now">通行帐号</a>
+			<a href="#">网络版</a>
+			<div class="zhzd">
+				<a class="zhzdFir">纵横知道<b></b></a>
+				<div class="zhzdMenu">
+					<a href="http://zhzdwd.com" target="_blank">问答</a>
+					<a href="http://zhzdwk.com" target="_blank">文库</a>
+					<a href="http://zhzdjg.com" target="_blank">价格信息</a>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+<div class="width950 userInfoPanel clearfix">
+		<img src="images/mainlogo.png" class="fL"><p><b>techen</b>,<a href="#">管理</a>&nbsp;<a href="#">退出</a></p>
+</div>
+<div class="globalContent width950">
+	<div class="formContent clearfix">
+		<div class="slidebar">
+			<div class="userAvr clearfix">
+			<img src="img/avatra48.png">
+			<p>账户余额:</p>
+			<p>¥&nbsp;<b style="font-size:16px" class="colOrange">0.00</b>&nbsp;元</p>
+			<p><a href="order.html">账单</a></p>
+			</div>
+			<ul>
+				<li><a href="#" title="个人信息"><b>个人信息</b></a></li>
+				<li><a href="#" title="我的纵横"><b>帐号充值</b></a></li>
+				<li><a href="voucher.html" title="代金卷"><b>代金卷</b></a></li>
+			</ul>
+		</div>
+		<div class="mainContent formItem userProfile">
+			<div class="voucher">
+				<div class="voucher-list">
+					<legend>历史账单</legend>
+					<table class="table table-hover table-bordered">
+						<thead><th>类型</th><th>来源</th><th>金额</th><th>日期</th></thead>
+						<tbody>
+							<tr><td>收入</td><td>支付宝</td><td>¥5.00</td><td>2017-01-01 20:20</td></tr>
+							<tr><td>收入</td><td>银行转账</td><td>¥5.00</td><td>2017-01-01 20:20</td></tr>
+							<tr><td>支出</td><td>文库(zhzdwk.com)消费</td><td>¥5.00</td><td>2017-01-01 20:20</td></tr>
+							<tr><td>支出</td><td>问答(zhzdwd.com)消费</td><td>¥5.00</td><td>2017-01-01 20:20</td></tr>
+						</tbody>
+					</table>
+					<!--数据超过20条显示 查看更多,继续加载20条记录-->
+					<a>查看更多</a>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+<div class="footer">
+	<div class="width950">
+		<p>Copyright &copy; 2012 <a target="_blank" href="http://smartcost.com.cn">纵横创新软件有限公司</a>. All Rights Reserved </p>
+	</div>
+</div>
+</body>

+ 75 - 0
voucher.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+	<meta charset=utf-8>
+	<title>个人信息纵横通行帐号</title>
+	<meta name=description content=一个帐号通用纵横旗下所有网络产品。>
+	<meta name=copyright content=smartcost.com.cn>
+	<link rel=stylesheet href=css/global.css>
+	<script src=js/jquery-1.7.1.min.js></script>
+	<script src=js/global.js></script>
+</head>
+<body>
+<div class="globalHeader">
+	<div class="width950">
+		<div class="globalNav">
+			<a href="http://smartcost.com.cn" target="_blank">纵横官网</a>
+			<a href="http://sso.smartcost.com.cn" target="_blank" class="now">通行帐号</a>
+			<a href="#">网络版</a>
+			<div class="zhzd">
+				<a class="zhzdFir">纵横知道<b></b></a>
+				<div class="zhzdMenu">
+					<a href="http://zhzdwd.com" target="_blank">问答</a>
+					<a href="http://zhzdwk.com" target="_blank">文库</a>
+					<a href="http://zhzdjg.com" target="_blank">价格信息</a>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+<div class="width950 userInfoPanel clearfix">
+		<img src="images/mainlogo.png" class="fL"><p><b>techen</b>,<a href="#">管理</a>&nbsp;<a href="#">退出</a></p>
+</div>
+<div class="globalContent width950">
+	<div class="formContent clearfix">
+		<div class="slidebar">
+			<div class="userAvr clearfix">
+			<img src="img/avatra48.png">
+			<p>账户余额:</p>
+			<p>¥&nbsp;<b style="font-size:18px" class="colOrange">0.00</b>&nbsp;元</p>
+			</div>
+			<ul>
+				<li><a href="#" title="个人信息"><b>个人信息</b></a></li>
+				<li><a href="#" title="我的纵横"><b>帐号充值</b></a></li>
+				<li class="now"><a href="voucher.html" title="代金卷"><b>代金卷</b></a></li>
+			</ul>
+		</div>
+		<div class="mainContent formItem userProfile">
+			<div class="voucher">
+				<div class="voucher-input">
+					<div class=" clearfix"><input type="text" placeholder="输入领取码"><button class="button btn-red">领取代金卷</button>
+					</div>
+					<br>
+					<p class="colRed">领取码"SH376AH3"的活动已结束</p>
+				</div>
+				<div class="voucher-list">
+					<legend>领取历史</legend>
+					<table class="table table-hover table-bordered">
+						<thead><th>活动名称</th><th>代金卷金额</th><th>领取日期</th></thead>
+						<tbody>
+							<tr><td>XX活动</td><td>¥5.00</td><td>2017-01-01 20:20</td></tr>
+						</tbody>
+					</table>
+					<!--数据超过20条显示 查看更多,继续加载20条记录-->
+					<a>查看更多</a>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+<div class="footer">
+	<div class="width950">
+		<p>Copyright &copy; 2012 <a target="_blank" href="http://smartcost.com.cn">纵横创新软件有限公司</a>. All Rights Reserved </p>
+	</div>
+</div>
+</body>