通过数组来遍历展示antd中的四个一组的走马灯

重点为第一次遍历4个分为一组，然后第一组中的四个根据index放入一个div，然后在第二层进行样式修改

    <Carousel afterChange={onChange}>
                    {trainList?.map((_, index) => {
                      if (index % 4 == 0) {
                        return (
                          <div>
                            <div className={styles.grid}>
                              {trainList
                                .slice(index, index + 4)
                                ?.map((item) => {
                                  return (
                                    <div
                                      key={index}
                                      onClick={() => {
                                        history.push(
                                          `/user/planCenterDetail/${item.id}`,
                                        );
                                      }}
                                      className={styles.taskBox}
                                    >
                                      <div
                                        style={{
                                          height: 170,
                                          borderRadius: '10px 10px 0 0',
                                          overflow: 'hidden',
                                        }}
                                      >
                                        {item.cover_obj?.[0]?.url ? (
                                          <img
                                            src={item.cover_obj?.[0]?.url}
                                            alt=""
                                            style={{
                                              borderRadius: '10px 10px 0 0',
                                              width: '100%',
                                              height: '100%',
                                            }}
                                          />
                                        ) : (
                                          <div
                                            style={{
                                              backgroundColor: '#f0edf2',
                                              width: '100%',
                                              height: '100%',
                                              borderRadius: 10,
                                            }}
                                          >
                                            <RobotOutlined
                                              style={{
                                                width: '100%',
                                                height: '100%',
                                                display: 'flex',
                                                justifyContent: 'center',
                                                alignItems: 'center',
                                              }}
                                            />
                                          </div>
                                        )}
                                      </div>
                                      <div style={{ padding: 15 }}>
                                        <div className={styles.innerTextBox}>
                                          {item.title}
                                        </div>
                                        <div style={{ margin: '10px 0' }}>
                                          <span>学分:{item.total_credit}</span>
                                        </div>
                                        <div style={{ paddingRight: 30 }}>
                                          <Progress
                                            percent={item?.progress * 100}
                                            format={(percent) =>
                                              `已学${percent}%`
                                            }
                                          />
                                        </div>
                                      </div>
                                    </div>
                                  );
                                })}
                            </div>
                          </div>
                        );
                      }
                    })}
                  </Carousel>