Skip to content

B
buildbank-replica
Commit e7d0a00d authored by 饶来安's avatar 饶来安
Browse files
Options

样式微调

parent c1585d8c
Expand all Show whitespace changes
Inline Side-by-side
Showing with 48 additions and 50 deletions
account_detail-long.html
View file @ e7d0a00d
This diff is collapsed.
account_detail.html
View file @ e7d0a00d
This diff is collapsed.
async_detail_list.html
View file @ e7d0a00d
<!DOCTYPE html>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>账户交易明细</title>
<style>
* {
......@@ -74,7 +73,7 @@
}
.account-card .account-number::before {
content: '';
content: "";
height: 2px;
background-color: #1f93d5;
position: absolute;
......@@ -84,13 +83,13 @@
}
.account-card .account-number::after {
content: '';
content: "";
height: 2px;
background-color: #1f93d5;
position: absolute;
bottom: -2px;
left: 158px;
right: 0
right: 0;
}
.account-number div {
......@@ -117,7 +116,7 @@
.info-table td {
padding: 8px 15px;
border: none
border: none;
}
.info-table tr {
......@@ -128,7 +127,7 @@
border-top: 1px solid #1f93d5;
}
.info-table tr td:nth-child(2n+1) {
.info-table tr td:nth-child(2n + 1) {
background-color: #f7fbfe;
text-align: right;
}
......@@ -182,9 +181,7 @@
font-weight: normal;
}
.detail-table tr:nth-child(2n+1) {
.detail-table tr:nth-child(2n + 1) {
background-color: #ebf4fb;
}
......@@ -279,7 +276,6 @@
justify-content: center;
flex-direction: column;
align-items: center;
}
.flex {
......@@ -297,9 +293,6 @@
border-top: none;
}
/* 温馨提示 */
.tips-section {
background-color: #f0f7ff;
......@@ -367,11 +360,13 @@
} */
.form-question {
position: relative;
cursor: pointer;
margin-left: 8px;
display: inline-block;
width: 16px;
height: 16px;
box-sizing: content-box;
line-height: 16px;
text-align: center;
border-radius: 50%;
......@@ -388,12 +383,15 @@
width: 150px;
padding: 10px 5px;
color: #000000;
text-align: left;
border-radius: 4px;
border: 1px solid #62A7E3;
background-color: #EAF5FE;
border: 1px solid #62a7e3;
background-color: #eaf5fe;
visibility: hidden;
opacity: 0;
transition: opacity 0.2s ease, visibility 0.2s ease;
transition:
opacity 0.2s ease,
visibility 0.2s ease;
z-index: 100;
pointer-events: none;
}
......@@ -405,31 +403,31 @@
}
.bubble::before {
content: '';
content: "";
position: absolute;
bottom: -12px;
left: 23px;
border-width: 12px 4px 0 10px;
border-style: solid;
border-color: #62A7E3 transparent transparent transparent;
border-color: #62a7e3 transparent transparent transparent;
z-index: 1;
}
/* 背景三角（内层，盖住部分边框） */
.bubble::after {
content: '';
content: "";
position: absolute;
bottom: -9px;
left: 24px;
border-width: 9px 4px 0 8px;
border-style: solid;
border-color: #EAF5FE transparent transparent transparent;
border-color: #eaf5fe transparent transparent transparent;
z-index: 2;
}
</style>
</head>
</head>
<body>
<body>
<!-- 顶部导航栏 -->
<!-- <div class="top-nav">
<a href="#">账户信息查询 ∨</a>
......@@ -443,15 +441,14 @@
</div> -->
<!-- 面包屑导航 -->
<div class="breadcrumb">
当前位置：账户查询 > 账户信息查询 > 活期账户
</div>
<div class="breadcrumb">当前位置：账户查询 > 账户信息查询 > 活期账户</div>
<div class="filter">
<div class="left">
<input type="checkbox" id="filterCheckbox" onclick="openFilter(this)">
<input type="checkbox" id="filterCheckbox" onclick="openFilter(this)" />
<span>筛选</span>
<span class="form-question">？
<span class="form-question"
>？
<span class="bubble">
支持通过任务设定日期等要素筛选异步查询任务，设定日期仅支持按单日筛选
</span>
......@@ -464,7 +461,7 @@
<table class="detail-table grid" id="resultTable">
<thead>
<tr>
<th style="width: 107px;">
<th style="width: 107px">
<div class="xflex">
<span>任务名称 </span>
<div class="jiantou">
......@@ -474,7 +471,7 @@
</div>
</th>
<th style="width: 110px;">
<th style="width: 110px">
<div class="xflex">
<span>任务设定日期 </span>
<div class="jiantou">
......@@ -483,7 +480,7 @@
</div>
</div>
</th>
<th style="width: 151px;">
<th style="width: 151px">
<div class="xflex">
<span>起止日期 </span>
<div class="jiantou">
......@@ -492,7 +489,7 @@
</div>
</div>
</th>
<th style="width: 150px;">
<th style="width: 150px">
<div class="xflex">
<span>账号 </span>
<div class="jiantou">
......@@ -501,7 +498,7 @@
</div>
</div>
</th>
<th style="width: 101px;">
<th style="width: 101px">
<div class="xflex">
<span>批次号 </span>
<div class="jiantou">
......@@ -510,7 +507,7 @@
</div>
</div>
</th>
<th style="width: 86px;">
<th style="width: 86px">
<div class="xflex">
<span>文件状态 </span>
<div class="jiantou">
......@@ -519,7 +516,7 @@
</div>
</div>
</th>
<th style="width: 76px;">
<th style="width: 76px">
<div class="xflex">
<span>下载 </span>
<div class="jiantou">
......@@ -534,7 +531,6 @@
</table>
</div>
<!-- 底部按钮组 -->
<div class="btn-group">
<button onclick="onBack()">返 回</button>
......@@ -543,18 +539,20 @@
<!-- 温馨提示 -->
<div class="tips-section">
<div class="tips-title">温馨提示</div>
<p>1.异步下载任务设定日期是您预约下载操作的日期，并非明细起止时间，您可以通过任务设定日期筛选已设定的异步下载任务。</p>
<p>2.因文件容量较大，每次查询的明细文件分批返回，下载相邻两批次的时间间隔请勿超过4小时，否则系统缓存失效需重新查询下载。</p>
<p>
1.异步下载任务设定日期是您预约下载操作的日期，并非明细起止时间，您可以通过任务设定日期筛选已设定的异步下载任务。
</p>
<p>
2.因文件容量较大，每次查询的明细文件分批返回，下载相邻两批次的时间间隔请勿超过4小时，否则系统缓存失效需重新查询下载。
</p>
</div>
</body>
</body>
</html>
<script>
let table = document.getElementById("resultTable");
table.style.width = "1145px";
table.style.tableLayout = "fixed"; // 关键！
function openFilter(element) {
var isChecked = element.checked;
var rightType = document.getElementById("rightType");
......@@ -562,13 +560,13 @@
var conditionTB = document.getElementById("conditionTB");
console.log("复选框当前状态:", isChecked);
if (isChecked) {
rightType.style.display = 'none';
rightTypes.style.display = 'inline-block';
conditionTB.style.display = 'inline-block';
rightType.style.display = "none";
rightTypes.style.display = "inline-block";
conditionTB.style.display = "inline-block";
} else {
rightType.style.display = 'inline-block';
rightTypes.style.display = 'none';
conditionTB.style.display = 'none';
rightType.style.display = "inline-block";
rightTypes.style.display = "none";
conditionTB.style.display = "none";
}
}
......
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