146 lines
6.5 KiB
TypeScript
146 lines
6.5 KiB
TypeScript
|
import { useState } from 'react'
|
||
|
import './trademark-edit.css'
|
||
|
import {
|
||
|
RightOutlined
|
||
|
} from '@ant-design/icons';
|
||
|
import EditOne from './components/EditOne/EditOne';
|
||
|
import EditTwo from './components/EditTwo/EditTwo';
|
||
|
import EditThree from './components/EditThree/EditThree';
|
||
|
import EditFour from './components/EditFour/EditFour';
|
||
|
import EditFive from './components/EditFive/EditFive';
|
||
|
import EditSix from './components/EditSix/EditSix';
|
||
|
export default function TrademarkAiEdit() {
|
||
|
const height = window.innerHeight - 180;
|
||
|
const [editProcess, setEditProcess] = useState(1);
|
||
|
return (
|
||
|
<div className='trademarkAiBox' style={{ height: `${height}px`, overflow: 'auto' }}>
|
||
|
<div className='editProcessBox'>
|
||
|
<div className='editProcess' >
|
||
|
<div className='editProcessNum'
|
||
|
style={{
|
||
|
background: editProcess >= 1 ? '#3B60E8' : '',
|
||
|
color: editProcess >= 1 ? '#fff' : '#B1B1B1',
|
||
|
borderColor: editProcess >= 1 ? '' : '#B1B1B1'
|
||
|
}}
|
||
|
>1</div>
|
||
|
<div className='editProcessTitle'
|
||
|
style={{
|
||
|
color: editProcess >= 1 ? '#353535' : '#878787',
|
||
|
fontWeight: editProcess >= 1 ? 'bold' : 'normal'
|
||
|
}}
|
||
|
>填写基础信息</div>
|
||
|
</div>
|
||
|
<div className='editright'><RightOutlined /></div>
|
||
|
<div className='editProcess'>
|
||
|
<div className='editProcessNum' style={{
|
||
|
background: editProcess >= 2 ? '#3B60E8' : '',
|
||
|
color: editProcess >= 2 ? '#fff' : '#B1B1B1',
|
||
|
borderColor: editProcess >= 2 ? '' : '#B1B1B1'
|
||
|
}}>2</div>
|
||
|
<div className='editProcessTitle'
|
||
|
style={{
|
||
|
color: editProcess >= 2 ? '#353535' : '#878787',
|
||
|
fontWeight: editProcess >= 2 ? 'bold' : 'normal'
|
||
|
}}
|
||
|
>选择商标类别</div>
|
||
|
</div>
|
||
|
<div className='editright'><RightOutlined /></div>
|
||
|
<div className='editProcess'>
|
||
|
<div className='editProcessNum' style={{
|
||
|
background: editProcess >= 3 ? '#3B60E8' : '',
|
||
|
color: editProcess >= 3 ? '#fff' : '#B1B1B1',
|
||
|
borderColor: editProcess >= 3 ? '' : '#B1B1B1'
|
||
|
}}>3</div>
|
||
|
<div className='editProcessTitle'
|
||
|
style={{
|
||
|
color: editProcess >= 3 ? '#353535' : '#878787',
|
||
|
fontWeight: editProcess >= 3 ? 'bold' : 'normal'
|
||
|
}}
|
||
|
>选择所属者</div>
|
||
|
</div>
|
||
|
<div className='editright'><RightOutlined /></div>
|
||
|
<div className='editProcess'>
|
||
|
<div className='editProcessNum' style={{
|
||
|
background: editProcess >= 4 ? '#3B60E8' : '',
|
||
|
color: editProcess >= 4 ? '#fff' : '#B1B1B1',
|
||
|
borderColor: editProcess >= 4 ? '' : '#B1B1B1'
|
||
|
}}>4</div>
|
||
|
<div className='editProcessTitle'
|
||
|
style={{
|
||
|
color: editProcess >= 4 ? '#353535' : '#878787',
|
||
|
fontWeight: editProcess >= 4 ? 'bold' : 'normal'
|
||
|
}}
|
||
|
>
|
||
|
订单支付
|
||
|
</div>
|
||
|
</div>
|
||
|
<div className='editright'><RightOutlined /></div>
|
||
|
<div className='editProcess'>
|
||
|
<div className='editProcessNum' style={{
|
||
|
background: editProcess >= 5 ? '#3B60E8' : '',
|
||
|
color: editProcess >= 5 ? '#fff' : '#B1B1B1',
|
||
|
borderColor: editProcess >= 5 ? '' : '#B1B1B1'
|
||
|
}}>5</div>
|
||
|
<div className='editProcessTitle'
|
||
|
style={{
|
||
|
color: editProcess >= 5 ? '#353535' : '#878787',
|
||
|
fontWeight: editProcess >= 5 ? 'bold' : 'normal'
|
||
|
}}
|
||
|
>上传委托书</div>
|
||
|
</div>
|
||
|
<div className='editright'><RightOutlined /></div>
|
||
|
<div className='editProcess'>
|
||
|
<div className='editProcessNum' style={{
|
||
|
background: editProcess >= 6 ? '#3B60E8' : '',
|
||
|
color: editProcess >= 6 ? '#fff' : '#B1B1B1',
|
||
|
borderColor: editProcess >= 6 ? '' : '#B1B1B1'
|
||
|
}}>6</div>
|
||
|
<div className='editProcessTitle'
|
||
|
style={{
|
||
|
color: editProcess >= 6 ? '#353535' : '#878787',
|
||
|
fontWeight: editProcess >= 6 ? 'bold' : 'normal'
|
||
|
}}
|
||
|
>上传商标局</div>
|
||
|
</div>
|
||
|
|
||
|
|
||
|
</div>
|
||
|
<div className='editFormBox'>
|
||
|
<div style={{
|
||
|
display: editProcess == 1 ? 'block' : 'none'
|
||
|
}}>
|
||
|
<EditOne
|
||
|
setEditProcess={setEditProcess}
|
||
|
></EditOne>
|
||
|
</div>
|
||
|
<div style={{
|
||
|
display: editProcess == 2 ? 'block' : 'none'
|
||
|
}}>
|
||
|
<EditTwo setEditProcess={setEditProcess}></EditTwo>
|
||
|
|
||
|
</div>
|
||
|
<div style={{
|
||
|
display: editProcess == 3 ? 'block' : 'none'
|
||
|
}}>
|
||
|
<EditThree setEditProcess={setEditProcess}></EditThree>
|
||
|
</div>
|
||
|
<div style={{
|
||
|
display: editProcess == 4 ? 'block' : 'none'
|
||
|
}}>
|
||
|
<EditFour setEditProcess={setEditProcess}></EditFour>
|
||
|
</div>
|
||
|
<div style={{
|
||
|
display: editProcess == 5 ? 'block' : 'none'
|
||
|
}}>
|
||
|
<EditFive setEditProcess={setEditProcess}></EditFive>
|
||
|
</div>
|
||
|
<div style={{
|
||
|
display: editProcess == 6 ? 'block' : 'none'
|
||
|
}}>
|
||
|
<EditSix setEditProcess={setEditProcess}></EditSix>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
)
|
||
|
}
|