新增资金账号页面

src/assets/styles/index.css

@@ -34,18 +34,23 @@
   overflow: hidden;
 }
 /*滚动条样式*/
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
 ::-webkit-scrollbar-thumb {
   border-radius: 10px;
+  background-color: #272E32;
 }
 ::-webkit-scrollbar-button {
-  background-color: transparent;
+  background-color: #171A1B;
 }
 ::-webkit-scrollbar-track-piece {
-  background-color: transparent;
+  background-color: #171A1B;
 }
 ::-webkit-scrollbar-corner,
 .el-input::-webkit-scrollbar-corner {
-  background-color: transparent;
+  background-color: #171A1B;
 }
 html {
   font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
@@ -247,3 +252,37 @@ body {
 .pointer {
   cursor: pointer;
 }
+.ant-table-wrapper .ant-table-thead tr th {
+  background: #212629;
+  color: #556772;
+  font-size: 14px;
+  font-family: Adobe Heiti Std;
+}
+.ant-table-wrapper .ant-table-thead > tr:first-child > th:last-child,
+.ant-table-wrapper .ant-table-thead > tr:first-child > th:first-child {
+  border-radius: 0px;
+}
+.ant-table-wrapper .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
+  background: #172b56;
+}
+.ant-table-wrapper .ant-table-body tr td {
+  background-color: #0E0E0F;
+  color: white;
+  cursor: pointer;
+}
+.ant-table-wrapper .ant-table-bordered .ant-table-thead > tr > th,
+.ant-table-wrapper .ant-table-bordered .ant-table-tbody > tr > td {
+  padding: 0;
+  height: 34px;
+  line-height: 34px;
+  border-color: #161a1c;
+  font-family: Adobe Heiti Std;
+  font-size: 16px;
+}
+.ant-table-wrapper .ant-table-fixed {
+  width: max-content !important;
+  color: #e5e5e5;
+  background: #0e0e0f;
+  border-top-color: #0e0e0f !important;
+  border-left-color: #161a1c !important;
+}

src/assets/styles/index.less

@@ -245,3 +245,46 @@ body {
 .pointer {
     cursor: pointer;
 }
+
+.ant-table-wrapper {
+    .ant-table-thead {
+        tr th {
+            background: #212629;
+            color: #556772;
+            font-size: 14px;
+            font-family: Adobe Heiti Std;
+        }
+
+       
+        > tr:first-child {
+            > th:last-child, > th:first-child {
+                border-radius: 0px;
+                
+            }
+        }
+    }
+    
+    .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
+        background: #172b56;
+    }
+    .ant-table-body tr td {
+        background-color: #0E0E0F;
+        color: white;
+        cursor: pointer;
+    }
+    .ant-table-bordered .ant-table-thead > tr > th, .ant-table-bordered .ant-table-tbody > tr > td {
+        padding: 0;
+        height: 34px;
+        line-height: 34px;
+        border-color: #161a1c;
+        font-family: Adobe Heiti Std;
+        font-size: 16px;
+    }
+    .ant-table-fixed {
+        width: max-content !important;
+        color: #e5e5e5;
+        background: #0e0e0f;
+        border-top-color: #0e0e0f !important;
+        border-left-color: #161a1c !important;
+    }
+}

src/components/quoteTable/index.vue

@@ -1,18 +1,18 @@
 <template>
-    <div @contextmenu.prevent="onContextMenu">
-        <a-table
-            class="quote-table"
-            :columns="columns"
-            :data-source="dataSource"
-            bordered
-            :pagination="false"
-            :scroll="{ x: true, y: 600 }">
-            <template #action>
-                <a>action</a>
-            </template>
-        </a-table>
-        <contextMenu :contextMenu="context" @update="updateContextMenu"/>
-    </div>
+  <div @contextmenu.prevent="onContextMenu">
+    <a-table class="quote-table"
+             :columns="columns"
+             :data-source="dataSource"
+             bordered
+             :pagination="false"
+             :scroll="{ x: true, y: 600 }">
+      <template #action>
+        <a>action</a>
+      </template>
+    </a-table>
+    <contextMenu :contextMenu="context"
+                 @update="updateContextMenu" />
+  </div>
 </template>
 <script lang="ts">
 import { defineComponent, reactive, PropType } from 'vue';
@@ -26,7 +26,7 @@ function handleContextMenu(props: any) {
         show: false,
         menuList: [],
         selectedData: null,
-    })
+    });
     function onContextMenu(value: MouseEvent) {
         const target = value.target as any;
         // 获取点击表格的 tr  所在的 索引位置
@@ -34,18 +34,18 @@ function handleContextMenu(props: any) {
         const { clientX, clientY } = value;
         Object.assign(context.position, { clientX, clientY });
         context.show = true;
-        context.selectedData = props.dataSource[index]
+        context.selectedData = props.dataSource[index];
     }
     // 关闭右键弹窗
     function updateContextMenu(value: boolean) {
-        context.show = value
+        context.show = value;
     }
-    return { context, onContextMenu, updateContextMenu }
+    return { context, onContextMenu, updateContextMenu };
 }
 
 export default defineComponent({
     components: {
-        contextMenu
+        contextMenu,
     },
     props: {
         columns: {
@@ -59,7 +59,7 @@ export default defineComponent({
         contextMenuList: {
             default: [],
             type: Object as PropType<MenuItem[]>,
-        }
+        },
     },
     setup(props) {
         const { context, onContextMenu, updateContextMenu } = handleContextMenu(props);
@@ -75,40 +75,13 @@ export default defineComponent({
 <style lang="less">
 .quote-table {
     height: calc(100% - 440px);
-    .ant-table td { white-space: nowrap; }
+    .ant-table td {
+        white-space: nowrap;
+    }
     .ant-table-thead {
-        tr th {
-            background: #212629;
-            color: #556772;
-            font-size: 14px;
-            font-family: Adobe Heiti Std;
-        }
         .ant-table-fixed-columns-in-body {
             width: 100px;
         }
     }
-    .ant-table-tbody .ant-table-row-hover td {
-        background: #172B56!important;
-    }
-    .ant-table-fixed {
-        width: max-content !important;
-        color: #E5E5E5;
-        background: #0E0E0F;
-        border-top-color: #0E0E0F !important;
-        border-left-color: #161a1c !important;
-
-    }
-    .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
-        background: #172B56;
-    }
-    .ant-table-bordered .ant-table-thead > tr > th, .ant-table-bordered .ant-table-tbody > tr > td {
-        padding: 0;
-        height: 34px;
-        line-height: 34px;
-        border-color: #161a1c;
-        font-family: Adobe Heiti Std;
-        font-size: 16px;
-    }
-
 }
 </style>;

src/router/index.ts

@@ -39,6 +39,11 @@ const routes: Array<RouteRecordRaw> = [
                 name: 'warehouseTrade',
                 component: () => import('@/views/market/warehouseTrade/index.vue'),
             },
+            {
+                path: '/account-status',
+                name: 'accountStatus',
+                component: () => import('@/views/account/accountStatus.vue'),
+            },
 
         ],
     },

src/views/account/accountStatus.vue

@@ -1,22 +1,96 @@
 <template>
-  <div>sss</div>
+  <div class="account-status">
+    <firstMenu :list="menulist"
+               :value="'value'"
+               @selectMenu="selectMenu" />
+    <a-table :columns="columns"
+             :data-source="list"
+             :pagination="false"
+             bordered>
+    </a-table>
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { initData } from '@/setup/methods/index';
+import firstMenu from '@/components/firstMenu/index.vue';
+
+function getAccountList() {
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            slots: { customRender: 'name' },
+        },
+        {
+            title: 'Cash Assets',
+            className: 'column-money',
+            dataIndex: 'money',
+        },
+        {
+            title: 'Address',
+            dataIndex: 'address',
+        },
+    ];
+    const list = [
+        {
+            key: '1',
+            name: 'John Brown',
+            money: '￥300,000.00',
+            address: 'New York No. 1 Lake Park',
+        },
+        {
+            key: '2',
+            name: 'Jim Green',
+            money: '￥1,256,000.00',
+            address: 'London No. 1 Lake Park',
+        },
+        {
+            key: '3',
+            name: 'Joe Black',
+            money: '￥120,000.00',
+            address: 'Sidney No. 1 Lake Park',
+        },
+    ];
+    return { columns, list };
+}
+
+function handleMenu() {
+    const menulist = [
+        { key: '1', value: '仓单贸易' },
+        { key: '2', value: '拍卖' },
+    ];
+    function selectMenu(item: any) {
+        console.log(item);
+    }
+    return { menulist, selectMenu };
+}
 
 export default defineComponent({
     name: 'account-status',
-
+    components: {
+        firstMenu,
+    },
     setup() {
+        const { columns, list } = getAccountList();
+        const { menulist, selectMenu } = handleMenu();
         initData(() => {
             // 加载数据在这里
         });
 
-        return {};
+        return { columns, list, menulist, selectMenu };
     },
 });
 </script>
 
-<style lang="less"></style>;
+<style lang="less">
+.account-status {
+    .ant-table-wrapper {
+        margin-left: 1px;
+        .ant-table-body > table {
+            border: none;
+        }
+    }
+}
+</style>;