复刻项目

account_detail.html

@@ -142,6 +142,7 @@
         }
 
         .form-question {
+            position: relative;
             cursor: pointer;
             margin-left: 8px;
             display: inline-block;
@@ -153,6 +154,41 @@
             background-color: #1890ff;
             color: #fff;
             padding-left: 4px;
+            transition: all 0.2s;
+        }
+
+        /* 气泡框 - 完全参照截图风格：白底、圆角、箭头、阴影，左侧竖条装饰+列表排版 */
+        .bubble {
+            position: absolute;
+            bottom: calc(100% + 14px);
+            left: 0;
+            width: 320px;
+            background: #ffffff;
+            border-radius: 16px;
+            box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.05);
+            visibility: hidden;
+            opacity: 0;
+            transition: opacity 0.2s ease, visibility 0.2s ease;
+            z-index: 100;
+            pointer-events: none;
+        }
+
+        /* 显示气泡 */
+        .question:hover .bubble {
+            visibility: visible;
+            opacity: 1;
+        }
+
+        /* 箭头：朝下（因为气泡在上方，箭头指向触发元素） */
+        .bubble::after {
+            content: '';
+            position: absolute;
+            bottom: -8px;
+            left: 24px;
+            border-width: 8px 8px 0 8px;
+            border-style: solid;
+            border-color: #ffffff transparent transparent transparent;
+            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
         }
 
         .question1 {
@@ -195,10 +231,12 @@
             bottom: 34px;
 
         }
+
         .yy {
             left: 264px;
             bottom: -57px;
         }
+
         .zz {
             left: 390px;
             bottom: -57px;
@@ -305,7 +343,11 @@
                     <label><input type="radio" name="quickDate" value="14" /> 最近14天</label>
                     <label><input type="radio" name="quickDate" value="30" /> 最近30天</label>
                 </div>
-                <span class="form-question question1">？</span>
+                <span class="form-question question1">？
+                    <span class="bubble">
+                        好景不长v计划表v看见啊办法深V合计阿萨办法v啊好几把送达方v科技啊表达法v
+                    </span>
+                </span>
             </div>
 
 

async_detail_list.html

@@ -43,6 +43,24 @@
             margin: 10px 0;
         }
 
+         /* 筛选与工具栏 */
+        .filter {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            height: 42px;
+            margin-top: 15px;
+            line-height: 42px;
+            padding-left: 10px;
+            padding-right: 11px;
+        }
+        .filter .left {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+            margin-left: 15px;
+        }
+
         /* 账户信息卡片 */
         .account-card {
             margin: 10px 0;
@@ -346,6 +364,19 @@
         table.grid th.col-select {
             display: none;
         } */
+         .form-question {
+            cursor: pointer;
+            margin-left: 8px;
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            line-height: 16px;
+            text-align: center;
+            border-radius: 50%;
+            background-color: #1890ff;
+            color: #fff;
+            padding-left: 4px;
+        }
     </style>
 </head>
 
@@ -367,6 +398,14 @@
         当前位置：账户查询 > 账户信息查询 > 活期账户
     </div>
 
+    <div class="filter">
+        <div class="left">
+            <input type="checkbox" id="filterCheckbox" onclick="openFilter(this)">
+            <span>筛选</span>
+            <span class="form-question">？</span>
+        </div>
+    </div>
+
     <!-- 交易明细表格 -->
     <div class="tablebox">
         <table class="detail-table grid" id="resultTable">
@@ -463,6 +502,23 @@
     table.style.tableLayout = "fixed"; // 关键！
 
 
+    function openFilter(element) {
+        var isChecked = element.checked;
+        var rightType = document.getElementById("rightType");
+        var rightTypes = document.getElementById("rightTypes");
+        var conditionTB = document.getElementById("conditionTB");
+        console.log("复选框当前状态:", isChecked);
+        if (isChecked) {
+            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';
+        }
+    }
+
     function onBack() {
         window.history.back();
     }

data/copy.json → data/transactionDetailData.js

-[
+var DATA = [
   {
     "account": "42050110239900001031",
     "tradeTime": "2025-01-06 11:27:10",