侧边导航栏封装

            <div className="left">
                {
                    items.map((item, index) => (
                        <div
                            className={actIndex == index ? 'left-item-active' : 'left-item'}
                            key={item.id}
                            onClick={() => { getitem(index, item) }}
                        >
                            {item.name}
                        </div>

                    ))
                }

            </div>
            {flag ? <Loading type="spinner" /> : (
                <div className="right">
                    {
                        datas.filter(i => i.type == actName).map(item => (
                            <div className="item" key={item._id}>
                                <div className="img">
                                    <img src={item.img} alt="" style={{ width: '120px', height: '120px' }} />

                                </div>
                                <div className="dec">
                                    <div className='name'>{item.name}</div>
                                    <div className='type'>{item.type}</div>
                                    <div className='store'>月销{item.store}</div>
                                    <div className='box'>
                                        <div className='price'>￥{item.price}</div>
                                        <div className='btns'>
                                            <button onClick={(e) => dianji(e, item)}>+</button>
                                        </div>  
                                        
                                    </div>

                                </div>
                            </div>

                        ))
                    }

                </div>

            )}

            <div id="ball">

            </div>

    .left {
        width: 100px;
        border-right: 1px solid #eee;

        .left-item {
            height: 60px;
            width: 100%;
            line-height: 60px;
            text-align: center;
            font-size: 15px;
        }

        .left-item-active {
            height: 60px;
            width: 100%;
            line-height: 60px;
            text-align: center;
            border-left: 5px solid yellow;
            font-size: 15px;
        }
    }

    .right {
        flex: 1;
        padding: 0 15px;
        box-sizing: border-box;

        .item {
            width: 100%;
            display: flex;
            margin: 10px 0;

            .img {
                width: 120px;
            }

            .dec {
                flex: 1;
                padding: 0 10px;
                box-sizing: border-box;

                .name {
                    font-size: 15px;
                    font-weight: bolder;
                    margin: 10px 0;

                }

                .type {
                    color: rgb(232, 167, 4);

                }

                .store {
                    color: #ccc;
                    margin: 10px 0;

                }

                .box {
                    display: flex;
                    justify-content: space-between;

                    .price {
                        color: red;

                    }

                    .btns {
                        button {
                            border: 0;
                            background-color: rgb(244, 193, 55);
                            height: 15px;
                            width: 15px;
                            border-radius: 3px;
                        }

                    }
                }
            }
        }

    }


    #ball {
        width: 15px;
        height: 15px;
        background: #f4ad52;
        border-radius: 50%;
        position: fixed;
        transition: left 1s linear, top 1s ease-in;
        z-index: 1;
    }
    
    
    
    // 点击按钮 抛掷小球
    function dianji(evt, item) {
        // setFlag2(false)
        dispatch(add({ ...item, sum: 1, checked: false }))
        var $ball = document.getElementById('ball');  //获取小球的dom节点
        // 将小球进行归位，移到点击的位置，
        $ball.style.top = evt.pageY + 'px';
        $ball.style.left = evt.pageX + 'px';
        $ball.style.transition = 'left 0s, top 0s';  //动画
        // 小球向下进行抛掷， 设置定时器可以重复点击
        setTimeout(() => {
            $ball.style.top = window.innerHeight + 100 + 'px';
            $ball.style.bottom = "20px"
            $ball.style.left = '10px';
            //css动画   加上cubic-bezier(.35,.8,1,1) 立方贝塞尔曲线  
            $ball.style.transition = 'left 1s cubic-bezier(.35,.8,1,1), top 1s ease-in';
        }, 20)

        // setNmu(num++)


    }