活期账户页面样式修改

account.html

@@ -9,7 +9,7 @@
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-            font-family: "Microsoft Yahei", sans-serif;
+            font-family: \5b8b\4f53, arial, georgia, verdana, helvetica, sans-serif;
             font-size: 14px;
         }
         body {
@@ -32,22 +32,34 @@
         }
         /* 面包屑 */
         .breadcrumb {
-            background-color: #f5f7fa;
-            padding: 15px 20px;
-            color: #666;
-            margin: 10px 20px;
+            height: 42px;
+            background-color: #f4f5fb;
+            border: 1px solid #dfe1f2;
+            line-height: 40px;
+            padding-left: 10px;
+            margin-top: 15px;
+            font-size: 14px;
+            color: #2C2C2C;
+        }
+        .breadcrumb_item{
+            font-weight: bold;
         }
         /* 筛选与工具栏 */
         .toolbar {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            padding: 10px 20px;
+            height: 42px;
+            margin-top: 15px;
+            line-height: 42px;
+            padding-left: 10px;
+            padding-right: 11px;
         }
         .toolbar .left {
             display: flex;
             align-items: center;
             gap: 5px;
+            margin-left: 15px;
         }
         .toolbar .right {
             display: flex;
@@ -61,12 +73,23 @@
             align-items: center;
             gap: 4px;
         }
+        .tableRBtn {
+            padding-left: 16px;
+            color: #1f93d5;
+            cursor: pointer;
+        }
+        .download{
+            background: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/tableDownload.png) no-repeat left center;
+        }
+        .print{
+            background: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/tablePrint.png) no-repeat left center;
+        }
         /* 表格样式 */
         table {
-            width: calc(100% - 40px);
-            margin: 0 20px;
-            border-collapse: collapse;
-            border: 1px solid #e8e8e8;
+            background: #FFF;
+            text-align: center;
+            border: 1px solid #62a7e3;
+            width: 100%;
         }
         th {
             background-color: #e6f4ff;
@@ -173,7 +196,7 @@
 
     <!-- 面包屑导航 -->
     <div class="breadcrumb">
-        当前位置：账户查询 > 账户信息查询 > 活期账户
+        当前位置：账户查询 > 账户信息查询 > <span class="breadcrumb_item">活期账户</span>
     </div>
 
     <!-- 工具栏 -->
@@ -183,9 +206,9 @@
             <span>筛选</span>
         </div>
         <div class="right">
-            <a href="#"><span>↓</span> 下载当前页</a>
-            <a href="#"><span>↓</span> 下载全部</a>
-            <a href="#"><span>🖨️</span> 打印</a>
+            <a href="#" class="tableRBtn download">下载当前页</a>
+            <a href="#" class="tableRBtn download">下载全部</a>
+            <a href="#" class="tableRBtn print">打印</a>
         </div>
     </div>