Browse Source

style: 修改公共组件样式

pull/43/head
cp3hnu 1 year ago
parent
commit
136879463b
10 changed files with 53 additions and 69 deletions
  1. +3
    -2
      react-ui/src/components/KFIcon/index.tsx
  2. +3
    -4
      react-ui/src/components/KFModal/index.less
  3. +8
    -17
      react-ui/src/components/KFModal/index.tsx
  4. +4
    -2
      react-ui/src/components/KFRadio/index.tsx
  5. +0
    -2
      react-ui/src/components/KFTabs/index.less
  6. +0
    -16
      react-ui/src/components/KFTabs/index.tsx
  7. +2
    -2
      react-ui/src/components/ModalTitle/index.less
  8. +6
    -3
      react-ui/src/components/ModalTitle/index.tsx
  9. +4
    -2
      react-ui/src/components/SubAreaTitle/index.tsx
  10. +23
    -19
      react-ui/src/global.less

+ 3
- 2
react-ui/src/components/KFIcon/index.tsx View File

@@ -17,15 +17,16 @@ interface KFIconProps extends IconFontProps {
font?: number;
color?: string;
style?: React.CSSProperties;
className?: string;
}

function KFIcon({ type, font = 15, color = '', style = {} }: KFIconProps) {
function KFIcon({ type, font = 15, color = '', style = {}, className }: KFIconProps) {
const iconStyle = {
...style,
fontSize: font,
color,
};
return <Icon type={type} style={iconStyle} />;
return <Icon type={type} className={className} style={iconStyle} />;
}

export default KFIcon;

+ 3
- 4
react-ui/src/components/KFModal/index.less View File

@@ -2,10 +2,9 @@
.ant-modal-content {
padding: 20px 67px;
background-image: url(/assets/images/modal-back.png);
background-repeat:no-repeat;
background-size:100%;
background-position: top center;
// background: linear-gradient(180deg, #cfdfff 0%, #d4e2ff 9.77%, #ffffff 40%, #ffffff 100%);
background-repeat: no-repeat;
background-position: top center;
background-size: 100%;
border-radius: 21px;
}
.ant-modal-header {


+ 8
- 17
react-ui/src/components/KFModal/index.tsx View File

@@ -5,31 +5,22 @@
*/

import ModalTitle from '@/components/ModalTitle';
import { ConfigProvider, Modal, theme, type ModalProps } from 'antd';
import { Modal, type ModalProps } from 'antd';
import classNames from 'classnames';
import { useAntdConfig } from 'umi';
import './index.less';

const { useToken } = theme;

export interface KFModalProps extends ModalProps {
image: string;
}
function KFModal({ title, image, children, className = '', ...rest }: KFModalProps) {
const { token } = useToken();
console.log('token', token);
const antdConfig = useAntdConfig();
console.log('antdConfig', antdConfig);
return (
<ConfigProvider {...antdConfig}>
<Modal
className={classNames(['kf-modal', className])}
{...rest}
title={<ModalTitle title={title} image={image}></ModalTitle>}
>
{children}
</Modal>
</ConfigProvider>
<Modal
className={classNames(['kf-modal', className])}
{...rest}
title={<ModalTitle title={title} image={image}></ModalTitle>}
>
{children}
</Modal>
);
}



+ 4
- 2
react-ui/src/components/KFRadio/index.tsx View File

@@ -16,12 +16,14 @@ export type KFRadioItem = {
type KFRadioProps = {
items: KFRadioItem[];
value?: string;
style?: React.CSSProperties;
className?: string;
onChange?: (value: string) => void;
};

function KFRadio({ items, value, onChange }: KFRadioProps) {
function KFRadio({ items, value, style, className, onChange }: KFRadioProps) {
return (
<span className={'kf-radio'}>
<span className={classNames('kf-radio', className)} style={style}>
{items.map((item) => {
return (
<span


+ 0
- 2
react-ui/src/components/KFTabs/index.less View File

@@ -1,2 +0,0 @@
.tabs-container {
}

+ 0
- 16
react-ui/src/components/KFTabs/index.tsx View File

@@ -1,16 +0,0 @@
// import { Tabs } from 'antd';
// import { useEffect, useState } from 'react';
// import styles from './index.less';

// function KFTabs() {
// const [iframeUrl, setIframeUrl] = useState('');
// useEffect(() => {}, []);

// return (
// <div className={styles}>
// <Tabs></Tabs>
// </div>
// );
// }

// export default KFTabs;

+ 2
- 2
react-ui/src/components/ModalTitle/index.less View File

@@ -1,11 +1,11 @@
.modal_title {
.modal-title {
display: flex;
align-items: center;
color: @primary-color;
font-weight: 400;
font-size: 20px;

&_image {
&__image {
width: 22px;
margin-right: 10px;
}


+ 6
- 3
react-ui/src/components/ModalTitle/index.tsx View File

@@ -1,15 +1,18 @@
import classNames from 'classnames';
import React from 'react';
import styles from './index.less';

type ModalTitleProps = {
title: React.ReactNode;
image?: string;
style?: React.CSSProperties;
className?: string;
};

function ModalTitle({ title, image }: ModalTitleProps) {
function ModalTitle({ title, image, style, className }: ModalTitleProps) {
return (
<div className={styles.modal_title}>
<img className={styles.modal_title_image} src={image} alt="" />
<div className={classNames(styles['modal-title'], className)} style={style}>
<img className={styles['modal-title__image']} src={image} alt="" />
{title}
</div>
);


+ 4
- 2
react-ui/src/components/SubAreaTitle/index.tsx View File

@@ -4,17 +4,19 @@
* @Description: 分区标题
*/

import classNames from 'classnames';
import './index.less';

type SubAreaTitleProps = {
title: string;
image: string;
style?: React.CSSProperties;
className?: string;
};

function SubAreaTitle({ title, image, style }: SubAreaTitleProps) {
function SubAreaTitle({ title, image, style, className }: SubAreaTitleProps) {
return (
<div className={'kf-subarea-title'} style={style}>
<div className={classNames('kf-subarea-title', className)} style={style}>
<img src={image} width={14} />
<span style={{ marginLeft: '8px' }}>{title}</span>
</div>


+ 23
- 19
react-ui/src/global.less View File

@@ -151,7 +151,7 @@ body {
height: 46px;
padding: 1px 11px;
}
.ant-input-textarea-affix-wrapper.ant-input-affix-wrapper{
.ant-input-textarea-affix-wrapper.ant-input-affix-wrapper {
padding: 0;
}
.ant-modal .ant-select-single {
@@ -160,15 +160,26 @@ body {
.ant-modal .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
line-height: 46px;
}
.ant-menu-light.ant-menu-inline .ant-menu-item{
color:#575757;
.ant-menu-light.ant-menu-inline .ant-menu-item {
color: #575757;
}
.ant-modal .ant-modal-close-x {
width: 26px;
height: 26px;
color: #272536;
border: 2px solid #272536;
color: @text-color-secondary;
border: 2px solid @text-color-secondary;
border-radius: 50%;

&:hover {
color: #272536;
border: 2px solid #272536;
}
}
.ant-modal .ant-modal-close:hover {
background-color: transparent;
}
.ant-modal .ant-modal-close:active {
background-color: transparent;
}
.ant-modal-content {
margin-top: 50px;
@@ -188,9 +199,6 @@ body {
.ant-modal .ant-modal-content {
border-radius: 20px;
}
.ant-modal .ant-modal-close:hover {
background-color: transparent;
}
.ant-modal .ant-modal-footer > .ant-btn + .ant-btn {
margin-left: 20px;
}
@@ -211,22 +219,18 @@ body {
border: 1px solid #e6e6e6;
}

// ::-webkit-scrollbar-button {
// background: #97a1bd;
// }
::-webkit-scrollbar {
width: 9px;
border-radius: 2px;
width: 8px;
background: transparent;
}
::-webkit-scrollbar-thumb {
// background-color: #9aa3bc!important;
width: 7px;
background: rgba(77, 87, 123, 0.5) !important;
width: 8px;
background: rgba(0, 0, 0, 0.5);
border-radius: 99px;
}
::-webkit-scrollbar-track {
// background-color: #eaf1ff!important;
width: 9px;
background: rgba(22, 100, 255, 0.06) !important;
width: 8px;
background: transparent;
}
ul,
ol {


Loading…
Cancel
Save