整体布局优化调整，做事商列表优化
This commit is contained in:
parent
6a714a77a9
commit
aadff7e389
|
|
@ -1,85 +1,93 @@
|
||||||
@use './user.scss';
|
@use './user.scss';
|
||||||
@use './system.scss';
|
@use './system.scss';
|
||||||
|
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body,
|
body,
|
||||||
#app {
|
#app {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
/* 隐藏全局滚动条 */
|
/* 隐藏全局滚动条 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-container {
|
.app-container {
|
||||||
width: inherit;
|
width: 100vw;
|
||||||
height: inherit;
|
height: 100vh;
|
||||||
display: flex;
|
|
||||||
.layout {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
aside {
|
.layout {
|
||||||
width: 200px;
|
width: 100%;
|
||||||
height: 100%;
|
display: flex;
|
||||||
border-right: solid 1px var(--el-menu-border-color);
|
flex: 1;
|
||||||
}
|
|
||||||
|
|
||||||
.main-container {
|
aside {
|
||||||
flex: 1;
|
width: 200px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
main {
|
border-right: solid 1px var(--el-menu-border-color);
|
||||||
padding: 20px;
|
flex: 0 0 auto;
|
||||||
overflow: auto;
|
}
|
||||||
max-height: calc(1080px - 200px);
|
|
||||||
height: 100%;
|
.main-container {
|
||||||
}
|
width: calc(100% - 200px);
|
||||||
|
flex: 1 1 auto;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
main {
|
||||||
|
padding: 20px;
|
||||||
|
overflow: auto;
|
||||||
|
max-height: calc(1080px - 200px);
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// 全局通知样式
|
// 全局通知样式
|
||||||
.global-notification {
|
.global-notification {
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
|
|
||||||
// 2. 重写动画：从顶部淡入（取消右侧滑入）
|
// 2. 重写动画：从顶部淡入（取消右侧滑入）
|
||||||
&.el-notification-fade-enter-active,
|
&.el-notification-fade-enter-active,
|
||||||
&.el-notification-fade-leave-active {
|
&.el-notification-fade-leave-active {
|
||||||
transition: all 0.3s ease-out !important;
|
transition: all 0.3s ease-out !important;
|
||||||
transform: translate(-50%, -150%) !important;
|
transform: translate(-50%, -150%) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 页面级过渡动画样式（name="fade" 对应前缀 fade-） */
|
/* 页面级过渡动画样式（name="fade" 对应前缀 fade-） */
|
||||||
/* 1. 进入/离开的初始状态 */
|
/* 1. 进入/离开的初始状态 */
|
||||||
.global-enter-from,
|
.global-enter-from,
|
||||||
.global-leave-to {
|
.global-leave-to {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
/* 初始透明 */
|
/* 初始透明 */
|
||||||
transform: translateX(20px);
|
transform: translateX(20px);
|
||||||
/* 初始右移20px */
|
/* 初始右移20px */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 2. 进入/离开的过渡过程 */
|
/* 2. 进入/离开的过渡过程 */
|
||||||
.global-enter-active,
|
.global-enter-active,
|
||||||
.global-leave-active {
|
.global-leave-active {
|
||||||
transition: all 0.5s ease;
|
transition: all 0.5s ease;
|
||||||
/* 过渡时长、缓动效果 */
|
/* 过渡时长、缓动效果 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 3. 进入完成/离开开始的状态 */
|
/* 3. 进入完成/离开开始的状态 */
|
||||||
.global-enter-to,
|
.global-enter-to,
|
||||||
.global-leave-from {
|
.global-leave-from {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
/* 最终不透明 */
|
/* 最终不透明 */
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
/* 最终回到原位 */
|
/* 最终回到原位 */
|
||||||
}
|
}
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
<el-table
|
<el-table
|
||||||
ref="tableRef"
|
ref="tableRef"
|
||||||
height="100%"
|
height="100%"
|
||||||
|
style="width: 100%"
|
||||||
:data="tableData"
|
:data="tableData"
|
||||||
:row-key="rowKey"
|
:row-key="rowKey"
|
||||||
:tree-props="treeProps"
|
:tree-props="treeProps"
|
||||||
|
|
|
||||||
|
|
@ -5,40 +5,45 @@ export const marketSearch = [
|
||||||
]
|
]
|
||||||
|
|
||||||
export const marketTableColumns = [
|
export const marketTableColumns = [
|
||||||
// id
|
// id
|
||||||
{ label: 'ID', prop: 'id', align: 'center' as const },
|
{ label: 'ID', prop: 'id', align: 'center' as const, width: '100px' },
|
||||||
//代理关系
|
//代理关系
|
||||||
{ label: '代理关系', prop: 'agentRelation', align: 'center' as const, width: '200px' },
|
{ label: '代理关系', prop: 'agentRelation', align: 'center' as const, width: '200px' },
|
||||||
//账户名
|
//账户名
|
||||||
{ label: '账户名', prop: 'accountName', align: 'center' as const },
|
{ label: '账户名', prop: 'accountName', align: 'center' as const, width: '120px' },
|
||||||
//级别
|
//级别
|
||||||
{ label: '级别', prop: 'level', align: 'center' as const },
|
{ label: '级别', prop: 'level', align: 'center' as const, width: '120px' },
|
||||||
//基本账户
|
//基本账户
|
||||||
{ label: '基本账户', prop: 'basicAccount', align: 'center' as const },
|
{ label: '基本账户', prop: 'basicAccount', align: 'center' as const, width: '200px' },
|
||||||
//保证金
|
//保证金
|
||||||
{ label: '保证金', prop: 'margin', align: 'center' as const },
|
{ label: '保证金', prop: 'margin', align: 'center' as const, width: '200px' },
|
||||||
//停止接单保证金
|
//停止接单保证金
|
||||||
{ label: '停止接单保证金', prop: 'stopOrderMargin', align: 'center' as const, width: '160px' },
|
{ label: '停止接单保证金', prop: 'stopOrderMargin', align: 'center' as const, width: '200px' },
|
||||||
//持仓转移保证金
|
//持仓转移保证金
|
||||||
{ label: '持仓转移保证金', prop: 'positionTransferMargin', align: 'center' as const, width: '160px' },
|
{
|
||||||
//头寸比率
|
label: '持仓转移保证金',
|
||||||
{ label: '头寸比率', prop: 'positionRatio', align: 'center' as const },
|
prop: 'positionTransferMargin',
|
||||||
//点差返佣
|
align: 'center' as const,
|
||||||
{ label: '点差返佣', prop: 'pointSpreadCommission', align: 'center' as const },
|
width: '200px',
|
||||||
//点差
|
},
|
||||||
{ label: '点差', slotName: 'pointSpread', align: 'center' as const },
|
//头寸比率
|
||||||
//手续费比例
|
{ label: '头寸比率', prop: 'positionRatio', align: 'center' as const, width: '150px' },
|
||||||
{ label: '手续费比例', prop: 'commissionRatio', align: 'center' as const },
|
//点差返佣
|
||||||
//手续费返佣
|
{ label: '点差返佣', prop: 'pointSpreadCommission', align: 'center' as const, width: '200px' },
|
||||||
{ label: '手续费返佣', prop: 'commissionReturn', align: 'center' as const },
|
//点差
|
||||||
//浮动盈亏
|
{ label: '点差', slotName: 'pointSpread', align: 'center' as const, width: '150px' },
|
||||||
{ label: '浮动盈亏', prop: 'floatProfitLoss', align: 'center' as const },
|
//手续费比例
|
||||||
//平仓盈亏
|
{ label: '手续费比例', prop: 'commissionRatio', align: 'center' as const, width: '150px' },
|
||||||
{ label: '平仓盈亏', prop: 'closeProfitLoss', align: 'center' as const },
|
//手续费返佣
|
||||||
//风险金
|
{ label: '手续费返佣', prop: 'commissionReturn', align: 'center' as const, width: '150px' },
|
||||||
{ label: '风险金', prop: 'riskMargin', align: 'center' as const },
|
//浮动盈亏
|
||||||
//服务费
|
{ label: '浮动盈亏', prop: 'floatProfitLoss', align: 'center' as const, width: '100px' },
|
||||||
{ label: '服务费', prop: 'serviceFee', align: 'center' as const },
|
//平仓盈亏
|
||||||
|
{ label: '平仓盈亏', prop: 'closeProfitLoss', align: 'center' as const, width: '150px' },
|
||||||
|
//风险金
|
||||||
|
{ label: '风险金', prop: 'riskMargin', align: 'center' as const, width: '150px' },
|
||||||
|
//服务费
|
||||||
|
{ label: '服务费', prop: 'serviceFee', align: 'center' as const, width: '150px' },
|
||||||
]
|
]
|
||||||
|
|
||||||
//做市商添加配置
|
//做市商添加配置
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue