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四级菜单内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!


Tags in this post...

Javascript 相关文章推荐
picChange 图片切换特效的函数代码
May 06 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
Vue自动构建发布脚本的方法示例
Jul 24 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
You might like
PHP中trait使用方法详细介绍
2017/05/21 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
python3 实现的人人影视网站自动签到
2016/06/19 Python
python中lambda()的用法
2017/11/16 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
群众路线教育实践活动心得体会
2014/03/07 职场文书
保护环境建议书100字
2014/05/13 职场文书
抗震救灾标语
2014/06/26 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
Python pyecharts绘制条形图详解
2022/04/02 Python
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript