system-copyright-react/src/route/TrademarkMall/TrademarkAiEdit.tsx

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' style={{
                marginBottom: 20
            }}>
                <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
                        key={editProcess}
                        setEditProcess={setEditProcess}
                    ></EditOne>
                </div>
                <div style={{
                    display: editProcess == 2 ? 'block' : 'none'
                }}>
                    <EditTwo
                        key={editProcess}
                        setEditProcess={setEditProcess}></EditTwo>

                </div>
                <div style={{
                    display: editProcess == 3 ? 'block' : 'none'
                }}>
                    <EditThree
                        key={editProcess}
                        setEditProcess={setEditProcess}></EditThree>
                </div>
                <div style={{
                    display: editProcess == 4 ? 'block' : 'none'
                }}>
                    <EditFour
                        key={editProcess}
                        setEditProcess={setEditProcess}></EditFour>
                </div>
                <div style={{
                    display: editProcess == 5 ? 'block' : 'none'
                }}>
                    <EditFive
                        key={editProcess}
                        setEditProcess={setEditProcess}></EditFive>
                </div>
                <div style={{
                    display: editProcess == 6 ? 'block' : 'none'
                }}>
                    <EditSix
                        key={editProcess}
                        setEditProcess={setEditProcess}></EditSix>
                </div>
            </div>
        </div>
    )
}