Browse Source

feat: 优化 侧边栏 节点样式

master
qilei0529 4 years ago
parent
commit
237a07c0ed
  1. 6
      packages/core/src/common/previewCell/behavior.tsx
  2. 15
      packages/core/src/common/previewCell/branch.tsx
  3. 57
      packages/core/src/common/previewCell/index.module.less
  4. 6
      packages/core/src/common/previewCell/start.tsx

6
packages/core/src/common/previewCell/behavior.tsx

@ -9,8 +9,10 @@ interface IProps {
const Cell: React.FC<IProps> = (props) => { const Cell: React.FC<IProps> = (props) => {
const { title = '处理', ...rest } = props; const { title = '处理', ...rest } = props;
return ( return (
<div className={styles.rect} {...rest}> <div className={styles.box} {...rest}>
{title} <div className={styles.rect}>
<span className={styles.text}>{title}</span>
</div>
</div> </div>
); );
}; };

15
packages/core/src/common/previewCell/branch.tsx

@ -8,18 +8,15 @@ interface IProps {
const Cell: React.FC<IProps> = (props) => { const Cell: React.FC<IProps> = (props) => {
const { title = '判断', ...rest } = props; const { title = '判断', ...rest } = props;
const z = (n: any) => n * 1.2;
return ( return (
<div className={styles.diamond} {...rest}> <div className={styles.box} {...rest}>
<svg <svg width={z(40)} height={z(30)} xmlns={'http://www.w3.org/1999/xlink'}>
width={'100%'}
height={'100%'}
xmlns={'http://www.w3.org/1999/xlink'}
>
<polygon <polygon
points={'2,15 28,2 58,15 30,28'} points={`0,${z(15)} ${z(20)},0 ${z(40)},${z(15)} ${z(20)},${z(30)}`}
style={{ style={{
fill: '#FFFC7C', fill: '#FFF6D1',
stroke: '#333', stroke: '#FFB96B',
strokeWidth: 2, strokeWidth: 2,
}} }}
/> />

57
packages/core/src/common/previewCell/index.module.less

@ -1,41 +1,48 @@
.circle { .box {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 30px; background-color: #f2f2f2;
font-size: 11px;
color: #FFF;
background-color: #333;
}
.rect {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 30px;
font-size: 11px;
color: #333;
background-color: #AACCF7;
border: 2px solid #5E9CEE;
}
.diamond {
position: relative; position: relative;
width: 60px; cursor: pointer;
height: 30px;
font-size: 11px;
.text { .text {
z-index: 1; z-index: 1;
position: absolute; position: absolute;
top: 0; top: 15px;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 11px;
height: 30px;
line-height: 30px; line-height: 30px;
text-align: center; text-align: center;
font-weight: 500;
} }
} }
.circle {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 30px;
color: #FFF;
background-color: #6B8CD7;
border: 2px solid #4E68A3;
}
.rect {
display: flex;
justify-content: center;
align-items: center;
width: 52px;
height: 30px;
font-size: 12px;
color: #333;
border-radius: 4px;
background-color: #BCD0FF;
border: 2px solid #6B8CD7;
}

6
packages/core/src/common/previewCell/start.tsx

@ -9,8 +9,10 @@ interface IProps extends React.HTMLProps<HTMLDivElement> {
const Cell: React.FC<IProps> = (props) => { const Cell: React.FC<IProps> = (props) => {
const { title = '开始', ...rest } = props; const { title = '开始', ...rest } = props;
return ( return (
<div className={styles.circle} {...rest}> <div className={styles.box} {...rest}>
{title} <div className={styles.circle}>
<span className={styles.text}>{title}</span>
</div>
</div> </div>
); );
}; };

Loading…
Cancel
Save