我的钱包页面

src/main/webapp/resources/view/usercenter/forstore/pay_center.html

@@ -385,6 +385,7 @@
 		display: inline;
 		float: left;
 	}
+	/*我的钱包 start*/
 	#pay_center .pay-wallet .pay-wallet-title {
 		padding: 0 22px 0 13px;
 		height: 40px;
@@ -393,6 +394,319 @@
 		background: url('static/img/pingan/purse-title-bg.png') no-repeat;
 		color: #fff;
 	}
+	#pay_center .pay-wallet .pay-wallet-title >i{
+		width: 1px;
+		height: 20px;
+		display: inline-block;
+		background: #046ac7;
+		vertical-align: middle;
+		margin: 0 13px 0 16px;
+	}
+	#pay_center .pay-wallet .pay-wallet-title >div {
+		float: right;
+	}
+	#pay_center .pay-wallet .pay-wallet-content {
+		display: flex;
+		justify-content: space-between;
+		padding: 17px 0 13px 0;
+	}
+	#pay_center .pay-wallet .pay-wallet-content >div {
+		width: 342px;
+		height: 173px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content >div:nth-child(2) {
+		border-left: 1px solid #f5f5f5;
+		border-right: 1px solid #f5f5f5;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info {
+		padding: 33px 0 0 15px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >img {
+		width: 96px;
+		height: 96px;
+		border-radius: 100%;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div {
+		float: right;
+		width: 230px;
+		height: 100%;
+		padding-left: 10px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div >p {
+		font-size: 16px;
+		font-weight: bold;
+		margin-bottom: 19px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div >h4 {
+		font-size: 14px;
+		margin-bottom: 11px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div .wallet-safe-level span {
+		display: inline-block;
+		width: 46px;
+		height: 8px;
+		background: #b7b6b6;
+		margin-right: 2px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div .wallet-safe-level span.active {
+		background: #17b601;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div .wallet-safe-level a {
+		color: #4290f7;
+		margin-left: 10px;
+		font-size: 14px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div .icon-area {
+		margin-top: 19px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div .icon-area >div {
+		position: relative;
+		width: 24px;
+		height: 24px;
+		border-radius: 100%;
+		display: inline-block;
+		background: #c6c8ca;
+		text-align: center;
+		line-height: 21px;
+		margin-right: 9px;
+		cursor: pointer;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div .icon-area >div.active {
+		background: #4290f7;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div .icon-area .expand-box {
+		position: absolute;
+		top: 24px;
+		left: -35px;
+		display: none;
+		padding: 6px 10px;
+		font-size: 14px;
+		border-radius: 3px;
+		border: 1px solid #81b7f1;
+		background: #fff;
+		text-align: left;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div .icon-area >div .expand-box p{
+		white-space: nowrap;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div .icon-area >div .expand-box a {
+		color: #4290f7;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-user-info >div .icon-area >div:hover .expand-box {
+		display: block;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money,
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card {
+		padding: 14px 0 0 16px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money >p,
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card >p {
+		font-size: 16px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money >p img,
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card >p img {
+		margin-right: 5px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .money-balance {
+		color: #fc626f;
+		margin: 22px 0 15px 0;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .money-balance span:nth-child(1) {
+		font-size: 16px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .money-balance span:nth-child(2) {
+		font-size: 24px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .money-balance span:nth-child(3) {
+		font-size: 18px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .money-income-pay {
+		padding: 0 6px;
+		background: #fcf5f0;
+		border-radius: 3px;
+		height: 28px;
+		line-height: 28px;
+		margin-bottom: 16px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .money-income-pay >div {
+		display: inline-block;
+		font-size: 14px;
+		color: #666;
+		margin-right: 26px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .money-income-pay >div div {
+		display: inline-block;
+		width: 35px;
+		height: 17px;
+		line-height: 17px;
+		text-align: center;
+		background: #fff;
+		color: #ff8522;
+		font-size: 12px;
+		margin-right: 10px;
+		border: 1px solid #ff8522;
+		border-radius:3px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .wallet-options span {
+		display: inline-block;
+		width: 70px;
+		height: 30px;
+		text-align: center;
+		border-radius: 3px;
+		line-height: 30px;
+		margin-right: 20px;
+		font-size: 14px;
+		cursor: pointer;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .wallet-options span:nth-child(1) {
+		background: #fc626f;
+		color: #fff;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .wallet-options span:nth-child(2) {
+		background: #fff;
+		color: #fc626f;
+		border: 1px solid #fc626f;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-money .wallet-options a{
+		font-size: 14px;
+		color: #4290f7;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card >div {
+		margin-top: 30px;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card >div >div {
+		width: 95px;
+		height: 56px;
+		line-height: 20px;
+		padding: 10px 11px;
+		color: #fff;
+		font-size: 12px;
+		border-radius: 10px;
+		display: inline-block;
+		margin-left: -29px;
+		vertical-align: middle;
+		cursor: pointer;
+		background: url("static/img/pingan/card-bg.png")no-repeat left;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card >div >div a {
+		line-height: 28px;
+		color: #3e84f5;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card >div >div:nth-child(1) {
+		background-color: #fa5d6a;
+		margin-left: 0;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card >div >div:nth-child(2) {
+		background-color: #02dabc;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card >div >div:nth-child(3) {
+		background-color: #8893f0;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card >div >div:last-child {
+		border: 1px dashed #3e84f5;
+		background: #fff;
+	}
+	#pay_center .pay-wallet .pay-wallet-content .wallet-card >a {
+		margin-top: 15px;
+		font-size: 14px;
+		display: block;
+		width: 70px;
+		height: 30px;
+		line-height: 30px;
+		text-align: center;
+		color: #fff;
+		background: #3e84f5;
+		border-radius: 3px;
+	}
+	#pay_center .pay-wallet .wallet-empty-line {
+		height: 25px;
+		background: #f5f5f5;
+	}
+	#pay_center .pay-wallet .wallet-record {
+		border-top: 1px solid #89aefa;
+	}
+	#pay_center .pay-wallet .wallet-record >p{
+		width: 117px;
+		height: 36px;
+		line-height: 36px;
+		text-align: center;
+		color: #fff;
+		font-size: 16px;
+		font-weight: bold;
+		background: #3c7cf5;
+		margin: -6px auto 29px;
+		position: relative;
+	}
+	#pay_center .pay-wallet .wallet-record >p::before {
+		content: '';
+		width: 0;
+		height: 0;
+		border-bottom: 6px solid #3c7cf5;
+		border-left: 6px solid transparent;
+		position: absolute;
+		left: -6px;
+	}
+	#pay_center .pay-wallet .wallet-record >p::after {
+		content: '';
+		width: 0;
+		height: 0;
+		border-bottom: 6px solid #3c7cf5;
+		border-right: 6px solid transparent;
+		position: absolute;
+		right: -6px;
+	}
+	#pay_center .pay-wallet .wallet-record .wallet-record-title span {
+		font-size: 16px;
+		margin: 0 14px 10px 21px;
+	}
+	#pay_center .pay-wallet .wallet-record .wallet-record-title a {
+		font-size: 14px;
+	}
+	#pay_center .pay-wallet .wallet-record .wallet-record-title a.active {
+		color: #4290f7;
+	}
+	#pay_center .pay-wallet .wallet-record .wallet-record-title a.fr{
+		font-size: 12px;
+		color: #ff8522;
+		margin-right: 40px;
+	}
+	#pay_center .pay-wallet .wallet-record >ul {
+		margin: 10px 6px 0;
+		border-top: 1px solid #89aefa;
+		border-bottom: 1px solid #89aefa;
+	}
+	#pay_center .pay-wallet .wallet-record >ul li {
+		display: flex;
+		justify-content: space-between;
+		padding: 0 54px 0 20px;
+		height: 52px;
+		line-height: 52px;
+		font-size: 14px;
+		color: #666;
+		border-bottom: 1px solid rgba(25, 81, 222, 0.18);
+	}
+	#pay_center .pay-wallet .wallet-record >ul li:last-child {
+		border-bottom: none;
+	}
+	#pay_center .pay-wallet .wallet-record >ul li span.pay-statuc {
+		color: #333;
+	}
+	#pay_center .pay-wallet .wallet-record >ul li span.record-company{
+		width: 185px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	#pay_center .pay-wallet .wallet-record >ul li span i.fa-minus {
+		color: #1da902;
+	}
+	#pay_center .pay-wallet .wallet-record >ul li span i.fa-plus {
+		color: #f51c24;
+	}
+	/*我的钱包 end*/
 </style>
 <!--右侧主体部分-->
 <div class="user_right fr" id="pay_center">
@@ -410,8 +724,118 @@
 			<!--我的钱包-->
 			<div class="tab pay-wallet" ng-show="status == 'pay-wallet'" style="display: inline-block;">
 				<div class="pay-wallet-title">
-					欢迎您！<em>|</em>
+					欢迎您！<i></i>
 					商城公告：<span>全面升级，给你不一样的精彩！</span>
+					<div>上次登录时间：2017-12-12 33:33:33</div>
+				</div>
+				<div class="pay-wallet-content">
+					<div class="wallet-user-info">
+						<img src="static/img/pingan/purse-img.png" alt="">
+						<div>
+							<p>深圳市优软科技有限公司</p>
+							<h4>账户安全：<span>中</span></h4>
+							<div class="wallet-safe-level">
+								<span class="active"></span><span class="active"></span><span></span>
+								<a href="javascript:void(0)">提升</a>
+							</div>
+							<div class="icon-area">
+								<div class="active">
+									<img src="static/img/pingan/phone.png" alt="" />
+									<div class="expand-box">
+										<p>您已绑定手机<span>136****3333</span></p>
+										<a href="javascript:void(0)">管理</a>
+									</div>
+								</div>
+								<div>
+									<img src="static/img/pingan/man.png" alt="" />
+									<div class="expand-box">
+										<p>您还未进行实名认证</p>
+										<a href="javascript:void(0)">马上去认证</a>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="wallet-money">
+						<p><img src="static/img/pingan/money.png" alt="">账户余额</p>
+						<div class="money-balance"><span>￥</span><span>8509.</span><span>50</span></div>
+						<div class="money-income-pay">
+							<div><div>支出</div><span>￥</span>56636.00</div>
+							<div><div>收入</div><span>￥</span>56636.00</div>
+						</div>
+						<div class="wallet-options">
+							<span>充值</span>
+							<span>提现</span>
+							<a>查看</a>
+						</div>
+					</div>
+					<div class="wallet-card">
+						<p><img src="static/img/pingan/card.png" alt="">银行卡(<span>6</span>)</p>
+						<div>
+							<div>
+								<p>工商银行</p>
+								**&nbsp;&nbsp;<span>5623</span>
+							</div>
+							<div>
+								<p>工商银行</p>
+								**&nbsp;&nbsp;<span>5623</span>
+							</div>
+							<div>
+								<p>工商银行</p>
+								**&nbsp;&nbsp;<span>5623</span>
+							</div>
+							<div>
+								<a>+&nbsp;新增</a>
+							</div>
+						</div>
+						<a>管理</a>
+					</div>
+				</div>
+				<div class="wallet-empty-line"></div>
+				<div class="wallet-record">
+					<p>余额记录</p>
+					<div class="wallet-record-title">
+						<span>近期余额记录</span>
+						<a class="active">充值记录</a>&nbsp;|&nbsp;<a>提现记录</a>&nbsp;|&nbsp;<a>余额记录</a>
+						<a class="fr">查看余额明细</a>
+					</div>
+					<ul>
+						<li>
+							<span>2017-08-03 23:12:11</span>
+							<span class="record-company">深圳市优软科技有限公司</span>
+							<span>订单号：SS2017121500000071</span>
+							<span><i class="fa fa-minus"></i>￥1234.00</span>
+							<span class="pay-status">支付成功</span>
+						</li>
+						<li>
+							<span>2017-08-03 23:12:11</span>
+							<span class="record-company">深圳市优软科技有限公司</span>
+							<span>订单号：SS2017121500000071</span>
+							<span><i class="fa fa-plus"></i>￥1234.00</span>
+							<span class="pay-status">支付成功</span>
+						</li>
+						<li>
+							<span>2017-08-03 23:12:11</span>
+							<span class="record-company">深圳市优软科技有限公司</span>
+							<span>订单号：SS2017121500000071</span>
+							<span><i class="fa fa-minus"></i>￥1234.00</span>
+							<span class="pay-status">支付成功</span>
+						</li>
+						<li>
+							<span>2017-08-03 23:12:11</span>
+							<span class="record-company">深圳市优软科技有限公司</span>
+							<span>订单号：SS2017121500000071</span>
+							<span><i class="fa fa-plus"></i>￥1234.00</span>
+							<span class="pay-status">支付成功</span>
+						</li>
+						<li>
+							<span>2017-08-03 23:12:11</span>
+							<span class="record-company">深圳市优软科技有限公司</span>
+							<span>订单号：SS2017121500000071</span>
+							<span><i class="fa fa-minus"></i>￥1234.00</span>
+							<span class="pay-status">支付成功</span>
+						</li>
+					</ul>
 				</div>
 			</div>
 			<!-- 支付信息-->