首页
所有分类
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 相关文章推荐
Javascript 函数中的参数使用分析
Mar 27 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
JS严格模式知识点总结
Feb 27 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 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
WeUI(1) map(4) 指针(1) 切片(1) vue-esign(1) 结构体(1) random(1) pygame(3) Slice(1) DFA(1)
You might like
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
php数组的一些常见操作汇总
2011/07/17 PHP
php array的学习笔记
2012/05/10 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
PHP中使用BigMap实例
2015/03/30 PHP
PHP结合jquery ajax实现上传多张图片，并限制图片大小操作示例
2019/03/01 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
Javascript基础教程之数据类型 （布尔型 Boolean）
2015/01/18 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
JS面向对象（3）之Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法
2016/02/25 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
pycharm 使用心得（一）安装和首次使用
2014/06/05 Python
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
python数据结构之列表和元组的详解
2017/09/23 Python
详解如何使用Python编写vim插件
2017/11/28 Python
python实现反转部分单向链表
2018/09/27 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
Python计算信息熵实例
2020/06/18 Python
从python读取sql的实例方法
2020/07/21 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
思想作风整顿个人剖析材料
2014/10/06 职场文书
2014年租房协议书范本
2014/10/30 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书