| | |
| | | import { createStyles } from 'antd-style'; |
| | | |
| | | const useStyles = createStyles(({ token }) => { |
| | | return { |
| | | main: { |
| | | display: 'flex', |
| | | width: '100%', |
| | | height: '100%', |
| | | paddingTop: '16px', |
| | | paddingBottom: '16px', |
| | | backgroundColor: token.colorBgContainer, |
| | | '.ant-list-split .ant-list-item:last-child': { |
| | | borderBottom: `1px solid ${token.colorSplit}`, |
| | | }, |
| | | '.ant-list-item': { paddingTop: '14px', paddingBottom: '14px' }, |
| | | [`@media screen and (max-width: ${token.screenMD}px)`]: { |
| | | flexDirection: 'column', |
| | | }, |
| | | }, |
| | | leftMenu: { |
| | | width: '224px', |
| | | borderRight: `${token.lineWidth}px solid ${token.colorSplit}`, |
| | | '.ant-menu-inline': { border: 'none' }, |
| | | '.ant-menu-horizontal': { fontWeight: 'bold' }, |
| | | [`@media screen and (max-width: ${token.screenMD}px)`]: { |
| | | width: '100%', |
| | | border: 'none', |
| | | }, |
| | | }, |
| | | right: { |
| | | flex: '1', |
| | | padding: '8px 40px', |
| | | [`@media screen and (max-width: ${token.screenMD}px)`]: { |
| | | padding: '40px', |
| | | }, |
| | | }, |
| | | title: { |
| | | marginBottom: '12px', |
| | | color: token.colorTextHeading, |
| | | fontWeight: '500', |
| | | fontSize: '20px', |
| | | lineHeight: '28px', |
| | | }, |
| | | taobao: { |
| | | display: 'block', |
| | | color: '#ff4000', |
| | | fontSize: '48px', |
| | | lineHeight: '48px', |
| | | borderRadius: token.borderRadius, |
| | | }, |
| | | dingding: { |
| | | margin: '2px', |
| | | padding: '6px', |
| | | color: '#fff', |
| | | fontSize: '32px', |
| | | lineHeight: '32px', |
| | | backgroundColor: '#2eabff', |
| | | borderRadius: token.borderRadius, |
| | | }, |
| | | alipay: { |
| | | color: '#2eabff', |
| | | fontSize: '48px', |
| | | lineHeight: '48px', |
| | | borderRadius: token.borderRadius, |
| | | }, |
| | | ':global': { |
| | | 'font.strong': { color: token.colorSuccess }, |
| | | 'font.medium': { color: token.colorWarning }, |
| | | 'font.weak': { color: token.colorError }, |
| | | }, |
| | | }; |
| | | }); |
| | | |
| | | export default useStyles; |
| | | import { createStyles } from 'antd-style';
|
| | |
|
| | | const useStyles = createStyles(({ token }) => {
|
| | | return {
|
| | | main: {
|
| | | display: 'flex',
|
| | | width: '100%',
|
| | | height: '100%',
|
| | | paddingTop: '16px',
|
| | | paddingBottom: '16px',
|
| | | backgroundColor: token.colorBgContainer,
|
| | | '.ant-list-split .ant-list-item:last-child': {
|
| | | borderBottom: `1px solid ${token.colorSplit}`,
|
| | | },
|
| | | '.ant-list-item': { paddingTop: '14px', paddingBottom: '14px' },
|
| | | [`@media screen and (max-width: ${token.screenMD}px)`]: {
|
| | | flexDirection: 'column',
|
| | | },
|
| | | },
|
| | | leftMenu: {
|
| | | width: '224px',
|
| | | borderRight: `${token.lineWidth}px solid ${token.colorSplit}`,
|
| | | '.ant-menu-inline': { border: 'none' },
|
| | | '.ant-menu-horizontal': { fontWeight: 'bold' },
|
| | | [`@media screen and (max-width: ${token.screenMD}px)`]: {
|
| | | width: '100%',
|
| | | border: 'none',
|
| | | },
|
| | | },
|
| | | right: {
|
| | | flex: '1',
|
| | | padding: '8px 40px',
|
| | | [`@media screen and (max-width: ${token.screenMD}px)`]: {
|
| | | padding: '40px',
|
| | | },
|
| | | },
|
| | | title: {
|
| | | marginBottom: '12px',
|
| | | color: token.colorTextHeading,
|
| | | fontWeight: '500',
|
| | | fontSize: '20px',
|
| | | lineHeight: '28px',
|
| | | },
|
| | | taobao: {
|
| | | display: 'block',
|
| | | color: '#ff4000',
|
| | | fontSize: '48px',
|
| | | lineHeight: '48px',
|
| | | borderRadius: token.borderRadius,
|
| | | },
|
| | | dingding: {
|
| | | margin: '2px',
|
| | | padding: '6px',
|
| | | color: '#fff',
|
| | | fontSize: '32px',
|
| | | lineHeight: '32px',
|
| | | backgroundColor: '#2eabff',
|
| | | borderRadius: token.borderRadius,
|
| | | },
|
| | | alipay: {
|
| | | color: '#2eabff',
|
| | | fontSize: '48px',
|
| | | lineHeight: '48px',
|
| | | borderRadius: token.borderRadius,
|
| | | },
|
| | | ':global': {
|
| | | 'font.strong': { color: token.colorSuccess },
|
| | | 'font.medium': { color: token.colorWarning },
|
| | | 'font.weak': { color: token.colorError },
|
| | | },
|
| | | };
|
| | | });
|
| | |
|
| | | export default useStyles;
|