Browse Source

布局调整

main
dark 5 months ago
parent
commit
3a8c193249
  1. 2
      src/components/table/style.ts
  2. 2
      src/layout/RootLayout.tsx
  3. 57
      src/layout/style.ts
  4. 4
      src/pages/cms/category/style.ts
  5. 1
      src/pages/websites/ssl/dns/DNSList.tsx

2
src/components/table/style.ts

@ -9,7 +9,7 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any)
--toolbar-height: 65px;
--alter-height: 0px;
--padding: 23px;
--padding: 33px;
--table-body-height: calc(var(--toolbar-height, 65px) + var(--alter-height, 0px) + var(--header-height, 56px) + var(--padding, 20px) * 4);
.ant-table-body {

2
src/layout/RootLayout.tsx

@ -123,7 +123,7 @@ export default () => {
title="Crazy Pro"
// layout={'mix'}
fixSiderbar={true}
siderWidth={65}
siderWidth={80}
collapsedButtonRender={false}
// collapsed={false}
postMenuData={() => {

57
src/layout/style.ts

@ -10,6 +10,10 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any)
const container = {
[prefix]: css`
.ant-pro-layout .ant-pro-layout-bg-list{
background:#f2f2f2;
}
height: 100%;
.ant-pro-global-header-logo,
@ -32,8 +36,8 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any)
}
.ant-pro-page-container-children-container{
padding-inline: 0px;
padding-block: 0px;
padding-inline: 20px;
padding-block: 20px;
}
.ant-page-header-no-children {
@ -48,12 +52,18 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any)
.ant-pro-card-body{
padding-block-start: 0;
overflow: auto;
height: calc(100vh - 110px);
min-height: calc(100vh - 110px);
height: calc(100vh - 160px);
min-height: calc(100vh - 160px);
${scrollbarBackground}
}
.ant-tree .ant-tree-checkbox{
margin-top: 12px;
}
.ant-tree .ant-tree-switcher,
.ant-tree .ant-tree-node-content-wrapper{
line-height: 40px;
}
`,
}
@ -107,7 +117,7 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any)
}
.ant-pro-layout-content,
.ant-pro-layout-container{
width: calc(100vw - 65px);
width: calc(100vw - 80px);
overflow: hidden;
height: 100vh;
}
@ -146,14 +156,33 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any)
}
.ant-menu-inline-collapsed >.ant-menu-item{
padding-inline: calc(50% - 8px);
padding-inline: calc(50% - 8px);
}
.ant-menu-inline >.ant-menu-submenu>.ant-menu-submenu-title,
.ant-menu-inline .ant-menu-item{
height: 52px;
line-height: 52px;
}
.ant-menu .ant-menu-item .ant-menu-item-icon,
.ant-menu .ant-menu-submenu-title .ant-menu-item-icon,
.ant-menu .ant-menu-item .anticon, .ant-menu
.ant-menu-submenu-title .anticon{
font-size: 16px;
}
.ant-menu-inline .ant-menu-submenu-title{
margin-inline: 0;
margin-block: 0;
width: 100%;
border-radius: 0;
}
.ant-menu-light .ant-menu-item-selected,
.ant-menu-light>.ant-menu .ant-menu-item-selected{
background-color: #3f9eff;
color: white;
}
`
@ -227,10 +256,16 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any)
&.ant-menu-inline .ant-menu-item{
margin-inline: 0;
margin-block: 0;
width: 65px;
width: 80px;
border-radius: 0;
color: white!important;
}
.ant-menu-title-content{
.anticon{
font-size: 18px;
}
}
.ant-menu-item:not(.ant-menu-item-selected):hover{
background-color: hsla(0,0%,100%,.1) !important;
@ -238,7 +273,7 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any)
}
.ant-menu-item-selected{
background-color: #409eff;
background-color: #334068;
color: white;
}
@ -299,8 +334,8 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any)
const layoutTable = css`
.ant-pro-table{
.ant-pro-card-body{
height: calc(100vh - 50px);
min-height: calc(100vh - 50px);
height: 100%;
min-height: 100%;
}
}
`

4
src/pages/cms/category/style.ts

@ -71,8 +71,8 @@ export const useStyle = createStyles(({ token, css, cx, prefixCls }) => {
const card = css`
.ant-pro-card-body{
height: calc(100% - 100px)!important;
min-height: calc(100% - 100px)!important;
height: calc(100% - 115px)!important;
min-height: calc(100% - 115px)!important;
}
`

1
src/pages/websites/ssl/dns/DNSList.tsx

@ -193,6 +193,7 @@ const DNSList = () => {
name: [ 'type' ],
valueType: 'dependency',
hideInSetting: true,
hideInTable: true,
columns: ({ type }) => {
return getKeyColumn(type, t)
}

Loading…
Cancel
Save