kaiPingWeb/code/src/pages/A1Home/index.tsx

import React, { useMemo, useState } from "react";
import styles from "./index.module.scss";
import classNames from "classnames";
import { baseUrl } from "@/index";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
import history from "@/utils/history";

function A1Home() {
  const { dianOut, dianIn } = useSelector(
    (state: RootState) => state.A0Layout.dataAll.home
  );

  const [mapShow, setMapShow] = useState(false);

  const hoverData = useMemo(() => {
    const arr = dianOut.map((v) => ({ name: v.name, id: v.id, ...v.hover }));
    return arr;
  }, [dianOut]);

  // 鼠标移入的变量
  const [hoverAc, setHoverAc] = useState(0);

  return (
    <div
      className={styles.A1Home}
      style={{ backgroundImage: `url(${baseUrl}/A1Home/pc/bg.jpg)` }}
    >
      {/* 图标定位 */}
      {dianOut.map((v) => (
        <div
          className={classNames(
            "A1locBox",
            hoverAc === v.id ? "A1locBoxHide" : ""
          )}
          key={v.id}
          style={{ top: v.top, left: v.left, right: v.right, bottom: v.bottom }}
        >
          {/* 名字 */}
          <div className="A1locBoxName">{v.name}</div>
          {/* 标点 */}
          <div className="A1locBoxLoc"></div>
        </div>
      ))}

      {/* hover出来的定位 */}
      {hoverData.map((v) => (
        <div
          className={classNames("A1locHover")}
          onMouseEnter={() => setHoverAc(v.id)}
          onMouseLeave={() => setHoverAc(0)}
          onClick={() => history.push(`/village?id=${v.id}`)}
          key={v.id}
          style={{
            backgroundImage: `url(${baseUrl}/A1Home/pc/hover${v.id}.png)`,
            width: v.width,
            height: v.height,
            top: v.top,
            left: v.left,
          }}
        >
          <div>
            <div>{v.name}</div>
          </div>
        </div>
      ))}

      {/* 左下角的开发保护 */}
      <div className="A1leftBtn" onClick={() => setMapShow(true)}>
        开发保护
      </div>

      {/* 开发保护 */}
      <div
        className={classNames("A1mapBox", mapShow ? "A1mapBoxShow" : "")}
        style={{ backgroundImage: `url(${baseUrl}/A1Home/pc/map.jpg)` }}
      >
        {/* 主要内容 */}
        {dianIn.map((v) => (
          <div
            className="A1mapRow"
            key={v.id}
            style={{
              top: v.top,
              left: v.left,
              right: v.right,
              bottom: v.bottom,
            }}
          >
            <div className="A1mapRowDian"></div>
            <p>{v.name}</p>

            {/* 信息盒子 */}
            {v.txtLoc ? (
              <div
                className="A1mapTxt"
                style={{
                  top: v.txtLoc.top,
                  left: v.txtLoc.left,
                  right: v.txtLoc.right,
                  bottom: v.txtLoc.bottom,
                }}
              >
                <div>
                  <h3>历史事件</h3>
                  <div className="A1mapXian"></div>
                  <p>{v.txt}</p>
                </div>
              </div>
            ) : null}
          </div>
        ))}

        {/* 返回按钮 */}
        <div className="A1back" onClick={() => setMapShow(false)}></div>
      </div>
    </div>
  );
}

const MemoA1Home = React.memo(A1Home);

export default MemoA1Home;