首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

React四级菜单的实现

Posted in Javascript onApril 08, 2022

效果图

React四级菜单的实现

JS

import { Fragment, useState } from 'react';
import styles from './style.less';
const data1 = [
    {
        name: '人口',
        id: 1,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 3, type: 3 },
            { name: '预警文案', id: 4, type: 4 },
            { name: '预警文案', id: 5, type: 5 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
        ],
    },
    {
        name: '社会矛盾',
        id: 2,
        arr: [
            { name: '嘻嘻哈哈', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 3, type: 3 },
            { name: '预警文案', id: 6, type: 6 },
        ],
    },
    { name: '大联勤', id: 3, arr: [{ name: '预警文案', id: 1, type: 1 }] },
    {
        name: '社会舆情',
        type: 3,
        id: 4,
        arr: [{ name: '预警文案', id: 1, type: 1 }],
    },
    { name: '12345', id: 5, arr: [{ name: '预警文案', id: 1, type: 1 }] },
];
const data2 = [
    {
        name: '人口',
        id: 1,
        type: 2,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 6, type: 3 },
        ],
    },
    {
        name: '社会矛盾',
        id: 2,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 3, type: 3 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
        ],
    },
    {
        name: '大联勤',
        id: 3,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
        ],
    },

];
const data3 = [
    {
        name: 'GDP',
        type: 3,
        id: 1,
        arr: [
            { name: '龙哥第一', id: 1, type: 1 },
            { name: '涛涛第二', id: 2, type: 2 },
            { name: '余畅第一', id: 3, type: 3 },
            { name: '阿川', id: 4, type: 4 },
            { name: '宇宙', id: 5, type: 5 },
            { name: '第一', id: 6, type: 6 },
        ],
    },
    {
        name: '财政税收',
        type: 2,
        id: 2,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 4, type: 4 },
            { name: '预警文案', id: 6, type: 6 },
        ],
    },
    {
        name: '产业投资',
        id: 3,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 3, type: 3 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
        ],
    },
    {
        name: '产业投资',
        id: 3,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 3, type: 3 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
        ],
    },
    {
        name: '产业投资',
        id: 3,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 3, type: 3 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
        ],
    },
];
const data4 = [
    {
        name: '人口',
        id: 1,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 3, type: 3 },
            { name: '预警文案', id: 4, type: 4 },
            { name: '预警文案', id: 5, type: 5 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
        ],
    },
    {
        name: '社会矛盾',
        id: 2,
        type: 3,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 3, type: 3 },
            { name: '预警文案', id: 4, type: 4 },
            { name: '预警文案', id: 5, type: 5 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
        ],
    },
    {
        name: '大联勤',
        id: 3,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 3, type: 3 },
            { name: '预警文案', id: 4, type: 4 },
            { name: '预警文案', id: 5, type: 5 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
        ],
    },
    {
        name: '社会舆情',
        id: 4,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 3, type: 3 },
            { name: '预警文案', id: 4, type: 4 },
            { name: '预警文案', id: 5, type: 5 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
        ],
    },
    {
        name: '12345',
        id: 5,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 3, type: 3 },
            { name: '预警文案', id: 4, type: 4 },
            { name: '预警文案', id: 5, type: 5 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
        ],
    },
];
const data5 = [
    {
        name: '人口',
        id: 1,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 3, type: 3 },
            { name: '预警文案', id: 4, type: 4 },
            { name: '预警文案', id: 5, type: 5 },
        ],
    },
    {
        name: '社会矛盾',
        id: 2,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 3, type: 3 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
        ],
    },
    {
        name: '大联勤',
        id: 3,
        type: 2,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 4, type: 4 },
            { name: '预警文案', id: 5, type: 5 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
        ],
    },

];
const data6 = [

    {
        name: 'GDP',
        id: 1,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 3, type: 3 },
            { name: '预警文案', id: 4, type: 4 },
            { name: '预警文案', id: 5, type: 5 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
        ],
    },
    {
        name: '财政税收',
        id: 2,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 3, type: 3 },
            { name: '预警文案', id: 4, type: 4 },
            { name: '预警文案', id: 5, type: 5 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
        ],
    },
    {
        name: '产业投资',
        type: 2,
        id: 3,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 3, type: 3 },
            { name: '预警文案', id: 4, type: 4 },
            { name: '预警文案', id: 5, type: 5 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
        ],
    },
    {
        name: '产业投资',
        type: 1,
        id: 4,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 3, type: 3 },
            { name: '预警文案', id: 4, type: 4 },
            { name: '预警文案', id: 5, type: 5 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
        ],
    },
    {
        name: '产业投资',
        type: 1,
        id: 5,
        arr: [
            { name: '预警文案', id: 1, type: 1 },
            { name: '预警文案', id: 2, type: 2 },
            { name: '预警文案', id: 3, type: 3 },
            { name: '预警文案', id: 4, type: 4 },
            { name: '预警文案', id: 5, type: 5 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
            { name: '预警文案', id: 6, type: 6 },
        ],
    },
];

const getRandomIntInclusive = (min, max) =>
{
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
};

const index = () =>
{
    const [menuId1, setMenuId1] = useState(1); // 菜单1的按钮切换
    const [menuTop1, setMenuTop1] = useState(data1[0]);
    const [menuId2, setMenuId2] = useState(1); // 菜单2的按钮切换
    const [menuTop2, setMenuTop2] = useState(data2[0]);
    const [menuId3, setMenuId3] = useState(1); // 菜单3的按钮切换
    const [menuTop3, setMenuTop3] = useState(data3[0]);
    const [menuId4, setMenuId4] = useState(1); // 菜单4的按钮切换
    const [menuTop4, setMenuTop4] = useState(data4[0]);
    const [menuId5, setMenuId5] = useState(1); // 菜单5的按钮切换
    const [menuTop5, setMenuTop5] = useState(data5[0]);
    const [menuId6, setMenuId6] = useState(1); // 菜单6的按钮切换
    const [menuTop6, setMenuTop6] = useState(data6[0]);
    // 标题的点击事件
    const titleClick1 = (data) =>
    {
        setMenuTop1(data);
    };
    const titleClick2 = (data) =>
    {
        setMenuTop2(data);
    }
    const titleClick3 = (data) =>
    {
        console.log(data, '1111');
        setMenuTop3(data);
    }
    const titleClick4 = (data) =>
    {
        setMenuTop4(data);
    }
    const titleClick5 = (data) =>
    {
        setMenuTop5(data);
    }
    const titleClick6 = (data) =>
    {
        setMenuTop6(data);
    }

    const changeColor = (type) =>
    {
        let lan = 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=624d513511001e31b43f07a3'
        let hui = 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=624d50ebfd73383908ca4506'
        let hong = 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=624d50a4b5b1ce5fbbe3ce07'
        let huang = 'https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=624d511322a0c670476cddc2'
        return type === 2 ? hui : type === 3 ? hong : type === 4 ? huang : lan
    }
    const widthAndHigh = (type) =>
    {
        let random = getRandomIntInclusive(83, 99);
        let padding = null;
        let fontSize = null;
        let backgroundImage = `url(${changeColor(type)})`

        if (random >= 93)
        {
            padding = '26px';
            fontSize = '16px';

        } else if (random >= 83)
        {
            padding = '26px';
            fontSize = '14px';
        } else
        {
            padding = '26px';
            fontSize = '18px';
        }
        let size = { width: random, height: random, padding, fontSize, backgroundImage };
        return size;
    };


    // 根据类型判断背景颜色高亮
    const fadeActive = (type) =>
    {
        return type === 2 ? styles.fadeHui : type === 3 ? styles.fadeHong : type === 4 ? styles.fadeHuang : styles.lan
    }
    return (
        <div className={styles.wrap}>
            <div className={styles.container}>
                {/* 小球球 */}
                <div className={styles.ballBox}>
                    {/* 开始~ */}
                    <div className={`${styles.ball} ${styles.ball1}`} >
                        {menuTop1.arr.map((data, index) => (
                            <div key={index}
                                style={widthAndHigh(data.type)}
                                className={
                                    `${styles.childName} ${index % 2 === 0 && index <= 3
                                        ? styles.childNameOdd
                                        : styles.childNameEven}`}>
                                {data.name}
                            </div>
                        ))}
                    </div>
                    <div className={`${styles.ball} ${styles.ball2}`} >
                        {menuTop2.arr.map((data, index) => (
                            <div key={index}
                                style={widthAndHigh(data.type)}
                                className={
                                    `${styles.childName} ${index % 2 === 0 && index <= 3
                                        ? styles.childNameOdd
                                        : styles.childNameEven}`}>
                                {data.name}
                            </div>
                        ))}
                    </div>
                    <div className={`${styles.ball} ${styles.ball3}`} >
                        {menuTop3.arr.map((data, index) => (
                            <div
                                key={index}
                                style={widthAndHigh(data.type)}
                                className={
                                    `${styles.childName} ${index % 2 === 0 && index <= 3
                                        ? styles.childNameOdd
                                        : styles.childNameEven}`}>
                                {data.name}
                            </div>
                        ))}
                    </div>
                    <div className={`${styles.ball} ${styles.ball4}`} >
                        {menuTop4.arr.map((data, index) => (
                            <div
                                key={index}
                                style={widthAndHigh(data.type)}
                                className={
                                    `${styles.childName} ${index % 2 === 0 && index <= 3
                                        ? styles.childNameOdd
                                        : styles.childNameEven}`}>
                                {data.name}
                            </div>
                        ))}
                    </div>
                    <div className={`${styles.ball} ${styles.ball5}`} >
                        {menuTop5.arr.map((data, index) => (
                            <div
                                key={index}
                                style={widthAndHigh(data.type)}
                                className={
                                    `${styles.childName} ${index % 2 === 0 && index <= 3
                                        ? styles.childNameOdd
                                        : styles.childNameEven}`}>
                                {data.name}
                            </div>
                        ))}
                    </div>
                    <div className={`${styles.ball} ${styles.ball6}`} >
                        {menuTop6.arr.map((data, index) => (
                            <div
                                key={index}
                                style={widthAndHigh(data.type)}
                                className={
                                    `${styles.childName} ${index % 2 === 0 && index <= 3
                                        ? styles.childNameOdd
                                        : styles.childNameEven}`}>
                                {data.name}
                            </div>
                        ))}
                    </div>
                </div>

                {/* 结束~ */}
                <div className={styles.centerBox}>
                    <div className={styles.center1}>
                        {data1.map((data, index) => (
                            <Fragment>
                                <span
                                    className={styles.centerName}
                                    onClick={() =>
                                    {
                                        titleClick1(data);
                                    }}
                                    key={index}
                                >
                                    {data.name}
                                    {/* 背景线 */}
                                    <div className={`${styles.fade} ${fadeActive(data.type)}`}></div>
                                </span>
                            </Fragment>
                        ))}
                    </div>

                    <div className={styles.center2}>
                        {data2.map((data, index) => (
                            <span className={styles.centerName} onClick={() =>
                            {
                                titleClick2(data);
                            }} key={index}>
                                {data.name}
                                <div className={`${styles.fade} ${fadeActive(data.type)}`}></div>
                            </span>
                        ))}
                    </div>
                    <div className={styles.center3}>
                        {data3.map((data, index) => (
                            <span className={styles.centerName} onClick={() =>
                            {
                                titleClick3(data);
                            }} key={index}>
                                {data.name}
                                <div className={`${styles.fade} ${fadeActive(data.type)}`}></div>
                            </span>
                        ))}
                    </div>
                    <div className={styles.center4}>
                        {data4.map((data, index) => (
                            <span className={styles.centerName} onClick={() =>
                            {
                                titleClick4(data);
                            }} key={index}>
                                {data.name}
                                <div className={`${styles.fade} ${fadeActive(data.type)}`}></div>
                            </span>
                        ))}
                    </div>
                    <div className={styles.center5}>
                        {data5.map((data, index) => (
                            <span className={styles.centerName} onClick={() =>
                            {
                                titleClick5(data);
                            }} key={index}>
                                {data.name}
                                <div className={`${styles.fade} ${fadeActive(data.type)}`}></div>
                            </span>
                        ))}
                    </div>
                    <div className={styles.center6}>
                        {data6.map((data, index) => (
                            <div className={styles.centerName} onClick={() =>
                            {
                                titleClick6(data);
                            }} key={index}>
                                {data.name}
                                <div className={`${styles.fade} ${fadeActive(data.type)}`}></div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div >
    );
};
export default index;

CSS

.wrap {
  position: relative;
  transform-origin: 0px 0px;
  transform: scale(.5); // 压缩盒子
  width: 3166px;
  height: 1440px;
  background: url('https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=624d4f5dfd73383908ca4505') no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
}

.container {
  position: absolute;
  position: relative;
  width: 786px;
  height: 786px;
  margin-top: 403px;
  border-radius: 50%;

  // 底部公共文字
  .centerName {
    display: inline-block;
    position: relative;
    margin: 2px 0 2px 46px;
    font-size: 19px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    color: #FFFFFF;
    cursor: pointer;

    .fade {
      //   display: none;
      position: absolute;
      top: 9px;
      width: 100%;
      height: 25px;
      border-radius: 2px;
    }

    // 高亮灰
    .fadeHui {
      background: linear-gradient(rgba(227, 229, 230, 0), rgba(238, 239, 240, 0.2549019607), rgba(120, 127, 134, 0.56470588), rgba(120, 127, 134, 0.56470588), rgba(191, 195, 198, 1));
    }

    // 高亮红
    .fadeHong {
      background: linear-gradient(rgba(113, 56, 21, 0), rgba(222, 56, 6, 0.4117647058823), rgba(249, 67, 2, 0.423529411764), rgba(255, 122, 74, 0.9568627450));
    }

    // 高亮黄
    .fadeHuang {
      background: linear-gradient(rgba(113, 99, 21, 0), rgba(222, 156, 6, 0.411764705882), rgba(249, 163, 2, 0.423529411764), rgba(255, 234, 74, 0.95686274509));
    }
  }


  .center1 {
    transform: rotate(-27deg);
    position: absolute;
    // position: relative;
    left: 65px;
    top: 40px;
    width: 337px;
    height: 176px;
    padding: 2px;

    .centerName:first-child {
      position: absolute;
      top: 25px;
      left: 155px;
      margin: auto;
      transform: rotate(-2deg);
    }

    .centerName:nth-child(2) {
      position: absolute;
      top: 33px;
      left: 227px;
      margin: auto;
      transform: rotate(9deg);
    }

    .centerName:nth-child(3) {
      position: absolute;
      top: 87px;
      left: 43px;
      margin: auto;
      transform: rotate(-15deg);
    }

    .centerName:nth-child(4) {
      position: absolute;
      top: 68px;
      left: 137px;
      margin: auto;
      transform: rotate(-3deg);
    }

    .centerName:nth-child(5) {
      position: absolute;
      top: 75px;
      left: 240px;
      margin: auto;
      transform: rotate(12deg);
    }

  }


  .center2 {
    display: inline-block;
    transform: rotate(-90deg);
    position: absolute;
    left: -33px;
    top: 318px;
    width: 337px;
    height: 176px;
    padding: 2px;

    .centerName:first-child {
      position: absolute;
      top: 7px;
      left: 53px;
      margin: auto;
      transform: rotate(-15deg);
    }

    .centerName:nth-child(2) {
      position: absolute;
      top: -3px;
      left: 140px;
      margin: auto;
      transform: rotate(-1deg);
    }

    .centerName:nth-child(3) {
      position: absolute;
      top: 14px;
      left: 251px;
      margin: auto;
      transform: rotate(17deg);
    }


  }

  .center3 {
    // transform: rotate(43deg);
    // position: absolute;
    // left: 0px;
    // bottom: 0px;
    // width: 337px;
    // height: 176px;
    // padding: 2px;

    transform: rotate(32deg);
    position: absolute;
    left: 48px;
    bottom: 0px;
    width: 337px;
    height: 176px;
    padding: 2px;

    .centerName:nth-child(5) {
      //   transform: rotate(10deg);
      //   position: absolute;
      //   left: 0px;
      //   bottom: -19px;
      //   width: 337px;
      //   height: 176px;
      //   padding: 2px;
      transform: rotate(16deg);
      position: absolute;
      left: -12px;
      bottom: 135px;
      padding: 2px;
    }

    .centerName:nth-child(4) {
      //   position: absolute;
      //   top: -7px;
      //   left: 149px;
      //   margin: auto;
      //   transform: rotate(-5deg);
      position: absolute;
      top: 22px;
      left: 134px;
      margin: auto;
      transform: rotate(1deg);
    }

    .centerName:nth-child(3) {
      //   position: absolute;
      //   top: -35px;
      //   left: 250px;
      //   margin: auto;
      //   transform: rotate(-28deg);
      position: absolute;
      top: 7px;
      left: 228px;
      margin: auto;
      transform: rotate(-18deg);

    }

    .centerName:nth-child(2) {
      //   position: absolute;
      //   top: 37px;
      //   left: 56px;
      //   margin: auto;
      //   transform: rotate(5deg);
      position: absolute;
      top: 56px;
      left: 39px;
      margin: auto;
      transform: rotate(13deg);
    }

    .centerName:nth-child(1) {
      //   position: absolute;
      //   top: 35px;
      //   left: 176px;
      //   margin: auto;
      //   transform: rotate(-1deg);
      position: absolute;
      top: 62px;
      left: 166px;
      margin: auto;
      transform: rotate(-1deg);
    }
  }


  .center4 {
    transform: rotate(-33deg);
    position: absolute;
    left: 413px;
    bottom: -22px;
    width: 337px;
    height: 176px;
    padding: 2px;

    .centerName:nth-child(5) {
      position: absolute;
      top: -8px;
      left: 63px;
      margin: auto;
      transform: rotate(9deg);
    }

    .centerName:nth-child(2) {
      position: absolute;
      top: 30px;
      left: 49px;
      margin: auto;
      transform: rotate(7deg);
    }

    .centerName:nth-child(3) {
      position: absolute;
      top: -8px;
      left: 226px;
      margin: auto;
      transform: rotate(-13deg);
    }

    .centerName:nth-child(4) {
      position: absolute;
      top: 3px;
      left: 138px;
      margin: auto;
      transform: rotate(1deg);
    }

    .centerName:nth-child(1) {
      position: absolute;
      top: 44px;
      left: 163px;
      margin: auto;
      transform: rotate(-3deg);
    }
  }

  .center5 {
    transform: rotate(94deg);
    position: absolute;
    right: -155px;
    top: 318px;
    width: 337px;
    height: 176px;

    .centerName:first-child {
      position: absolute;
      top: 150px;
      left: 38px;
      margin: auto;
      transform: rotate(-15deg);
    }

    .centerName:nth-child(2) {
      position: absolute;
      top: 131px;
      left: 118px;
      margin: auto;
      transform: rotate(-5deg);
    }

    .centerName:nth-child(3) {
      position: absolute;
      top: 139px;
      left: 222px;
      margin: auto;
      transform: rotate(17deg);
    }

  }

  .center6 {
    display: inline-block;
    transform: rotate(33deg);
    position: absolute;
    right: 90px;
    top: 84px;
    width: 337px;
    height: 176px;
    padding: 2px;


    .centerName:first-child {
      position: absolute;
      top: -18px;
      left: 138px;
      margin: auto;
      transform: rotate(-3deg);
    }

    .centerName:nth-child(2) {
      position: absolute;
      top: -8px;
      left: 223px;
      margin: auto;
      transform: rotate(15deg);
    }

    .centerName:nth-child(3) {
      position: absolute;
      top: 42px;
      left: 43px;
      margin: auto;
      transform: rotate(-15deg);
    }

    .centerName:nth-child(4) {
      position: absolute;
      top: 27px;
      left: 134px;
      margin: auto;
      transform: rotate(1deg);
    }

    .centerName:nth-child(5) {
      position: absolute;
      top: 40px;
      left: 240px;
      margin: auto;
      transform: rotate(20deg);
    }

  }

}



// 相对于中间定位
.ballBox {
  position: absolute;
  position: relative;
  width: 100%;
  height: 100%;


  .childName {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 5px;
    width: 83px;
    height: 82px;
    border-radius: 50%;
    text-align: center;
    padding: 15px;
    color: #fff;
    background-size: 100% 100%;
  }

  .childNameEven {
    padding: 18px;

  }

  .childNameOdd {
    margin-top: 10px;
  }

  // 小球球
  .ball {
    position: absolute;
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 500px;
    height: 250px;
    padding: 30px;
  }

  .ball1 {
    left: -102px;
    top: -179px;
    transform: rotate(-29deg);
  }

  .ball2 {
    left: -349px;
    top: 13px;
    transform: rotate(-90deg);
  }

  .ball3 {
    left: -91px;
    top: 188px;
    transform: rotate(29deg);
  }

  .ball4 {
    left: 384px;
    top: -55px;
    transform: rotate(-29deg);
  }

  .ball5 {
    left: 642px;
    top: -722px;
    transform: rotate(90deg);
  }


  .ball6 {
    left: 394px;
    top: -1424px;
    transform: rotate(29deg);
  }

  .child {
    display: none;
    position: absolute;
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    left: -220px;
    top: -300px;
    width: 500px;
    height: 250px;
    padding: 30px;

    .childName {
      display: flex;
      // justify-content: center;
      align-items: center;
      text-align: center;
      margin: 5px;
      // display: inline-block;
      width: 83px;
      height: 82px;
      border-radius: 50%;
      background-color: red;
      text-align: center;
      padding: 15px;
    }

    .childNameEven {
      display: flex;
      // justify-content: center;
      align-items: center;
      text-align: center;
      margin: 5px;
      // display: inline-block;
      // width: 80px;
      // height: 80px;
      // font-size: 16px;
      border-radius: 50%;
      background-color: red;
      text-align: center;
      padding: 18px;

      background: url('https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=624d50a4b5b1ce5fbbe3ce07') no-repeat center;
      background-size: 100% 100%;

      color: #fff;
    }

    .childNameOdd {
      display: flex;
      // justify-content: center;
      align-items: center;
      text-align: center;
      margin: 5px;
      // display: inline-block;
      // width: 83px;
      // height: 83px;
      // padding: 18px;
      // font-size: 14px;
      border-radius: 50%;
      background: url('../../assets/shengtaihuanjing/lan.png') no-repeat center;
      background-size: 100% 100%;
      text-align: center;

      margin-top: 10px;

      color: #fff;
    }

  }

}

到此这篇关于React四级菜单的实现的文章就介绍到这了,更多相关React四级菜单内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

React四级菜单的实现

- Author -

臧小川

- Original Sources -

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Tags in this post...

React(6)
Javascript 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
js中设置元素class的三种方法小结
Aug 28 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
学习AngularJs:Directive指令用法（完整版）
Apr 26 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
vue实现列表拖拽排序的示例代码
vue实现可以快进后退的跑马灯组件
Apr 08 #Vue.js
JavaScript获取URL参数的方法分享
Apr 07 #Javascript
如何通过简单的代码描述Angular父组件、子组件传值
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 #Javascript
Axios代理配置及封装响应拦截处理方式
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 #Vue.js
结构体(1) 蒙特卡罗(1) Pillow(2) map(4) WeUI(1) 指针(1) 微信小程序(9) pdfkit(1) random(1) vue-esign(1)
You might like
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
抓取YAHOO股票报价的类
2009/05/15 PHP
php实现rc4加密算法代码
2012/04/25 PHP
php生成excel列序号代码实例
2013/12/24 PHP
php对数组排序代码分享
2014/02/24 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
vue中使用heatmapjs的示例代码（结合百度地图）
2018/09/05 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
布同自制Python函数帮助查询小工具
2011/03/13 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
Python几种常见算法汇总
2020/06/02 Python
python 实现超级玛丽游戏
2020/11/25 Python
详解HTML5中的拖放事件（Drag 和 drop）
2016/11/14 HTML / CSS
跑鞋、网球鞋、网球拍、服装及装备：Holabird Sports
2016/09/19 全球购物
全神贯注教学反思
2014/02/03 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
Python实现学生管理系统（面向对象版）
2021/06/24 Python
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
python超详细实现完整学生成绩管理系统
2022/03/17 Python