Skip to content

B
buildbank-replica
Commit c62e7314 authored by 付琳's avatar 付琳
Browse files
Options

账户信息及实时余额页面功能样式全部完成,缺两个存款的文字版pdf打印

parent 00b2260a
Show whitespace changes
Inline Side-by-side
Showing with 164 additions and 16 deletions
account_info.html
View file @ c62e7314
......@@ -14,7 +14,7 @@
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: '\5b8b\4f53, arial, georgia, verdana, helvetica, sans-serif';
font-family: \5b8b\4f53, arial, georgia, verdana, helvetica, sans-serif !important;
font-size: 14px;
color: #2C2C2C;
}
......@@ -291,17 +291,135 @@
background-color: #fff;
font-weight: normal;
}
/* 遮罩 */
.modal-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.3);
display: none;
align-items: center;
justify-content: center;
z-index: 999;
}
/* 弹窗 */
.modal {
width: 480px;
background: #fff;
overflow: hidden;
font-size: 1em !important;
}
/* 头部 */
.modal-header {
background: transparent;
background: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/TG/panel_title_bj.png) repeat-x;
height: 36px;
line-height: 36px;
border-bottom: 1px solid #ffffff !important;
border-color: #95B8E7;
width: 100%;
border-style: solid;
border-width: 0 0 1px 0;
text-align: left;
font-size: 1em;
position: relative;
}
.panel-title {
font-weight: bold;
color: #0e2d5f;
height: 36px;
text-indent: 10px;
line-height: 36px;
}
.panel-tool {
position: absolute;
top: 50%;
right: 10px;
margin-top: -8px;
height: 18px;
overflow: hidden;
}
.panel-tool a {
display: inline-block;
width: 18px;
height: 18px;
margin: 0 0 0 2px;
vertical-align: top;
text-decoration: none;
outline: none;
}
.panel-tool-close {
background: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/TG/panel_close_icon.png) no-repeat;
}
/* 内容 */
.alter_logo3 {
background-image: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/TG/CCB_logo3.png);
background-repeat: no-repeat;
background-position: 10px 10px;
height: 50px;
}
.alert-feedback {
background: #F7FAFD;
overflow: hidden;
vertical-align: middle !important;
text-align: center;
margin-top: 15px;
margin-bottom: 25px;
padding: 0 30px;
}
.fail-icon {
width: 48px;
height: 48px;
display: inline-block;
margin-right: 12px;
background: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/TG/feedback_icon.png) no-repeat;
background-position: 0 0;
vertical-align: middle;
background-position: -9px -88px;
}
.pad{
color: #000000;
}
/* 按钮 */
.modal-footer {
text-align: center;
padding-bottom: 24px;
}
.btn {
width: 100px;
height: 35px;
line-height: 35px;
background: #1889d0;
background: #1889d0 url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/TG/btn_standard.png) no-repeat;
text-align: center;
color: #fff;
border: 0;
font-size: 1em;
font-weight: bold;
cursor: pointer;
display: inline-block;
border-radius: 5px;
}
.btn:hover {
background: #1a73e8;
}
</style>
<script src="./js/pako.min.js"></script>
</head>
<body>
<!-- 面包屑导航 -->
<div class="breadcrumb">
<!-- 面包屑导航 -->
<div class="breadcrumb">
当前位置：账户查询 > 账户信息查询 > <span class="breadcrumb_item">活期账户</span>
</div>
<!-- 账户信息卡片 -->
<div class="account-card">
</div>
<!-- 账户信息卡片 -->
<div class="account-card">
<div class="account-number">
<div>4205***1941</div>
</div>
......@@ -349,8 +467,8 @@
<td>105521000764 </td>
</tr>
</table>
</div>
<div class="toolbar">
</div>
<div class="toolbar">
<div class="tableLBtn_box">
<div class="tableLBtn_active">
<a href="#" class="tableRBtn download">下载全部</a>
......@@ -375,18 +493,16 @@
</ul>
</div>
</div>
</div>
<div class="bottom-btn-group">
<button>基本存款信息打印</button>
<button>存款人查询密码打印</button>
</div>
<div class="bottom-btn-group">
<button onclick="handlePrint('1')">基本存款信息打印</button>
<button onclick="handlePrint('2')">存款人查询密码打印</button>
<button onclick="onBack()">返回</button>
</div>
<div id="pdfArea">
</div>
<div id="pdfArea">
<div class="title"></div>
<div class="table-header">
<div class="print-date" id="printDate"></div>
<table class="table_none">
<tr>
<td class="tds">账户名称</td>
......@@ -447,6 +563,28 @@
</table>
</div>
</div>
<div class="modal-mask" id="modal">
<div class="modal">
<div class="modal-header">
<div class="panel-title">系统提示</div>
<div class="panel-tool">
<a class="panel-tool-close" href="javascript:void(0)" onclick="hideModal()"></a>
</div>
</div>
<div class="modal-body">
<div class="alter_logo3"></div>
<div class="alert-feedback">
<span class="fail-icon"></span>
<span class="pad">基本存款账户信息仅支持打印当日补打，请妥善保管纸质文件。打印次日及之后如需补打请联系开户行客户经理。</span>
</div>
</div>
<div class="modal-footer">
<button class="btn" onclick="hideModal()">确定</button>
</div>
</div>
</div>
</body>
<script>
document.querySelectorAll('.downloadBox li').forEach((el, index) => {
......@@ -722,6 +860,15 @@ function printPage(type) {
win.close();
};
}
function onBack() {
window.history.back();
}
function handlePrint() {
document.getElementById('modal').style.display = 'flex';
}
function hideModal() {
document.getElementById('modal').style.display = 'none';
}
</script>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment