react实现弹出菜单效果-html代码-BFW代码库

代码语言：html
代码描述：react实现弹出菜单效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
<title>CodePen - Liquid overlay</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@200&family=Philosopher:ital,wght@0,700;1,700&display=swap');

.MenuItem:active {
  background: #443d7f;
}
</style>

</head>
<body translate="no">
<div id="root"></div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react.dev.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-dom.dev.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-spring-web.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/react-use-gesture.js"></script>
<script id="rendered-js">
function _extends() {_extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {if (window.CP.shouldStopExecution(0)) break;var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}window.CP.exitedLoop(0);return target;};return _extends.apply(this, arguments);}const { useState, useEffect } = React;
const { useSpring, animated, config } = ReactSpring;
const { useDrag } = ReactUseGesture;

function App() {
  const [expanded, setExpanded] = useState(false);
  const [{ x, y }, set] = useSpring(() => ({
    x: 188,
    y: 320 }));

  const bind = useDrag(
  ({ movement: [x, y], velocity, down, direction: [dx], tap }) => {
    if (tap) {
      setExpanded(!expanded);
      set({ x: expanded ? 188 : 0, y: 320 });
      return;
    }
    if (!down) {
      setExpanded(x > 96 ? false : true);
      set({ x: x > 96 ? 188 : 0, y: 320 });
    } else {
      set({ x, y });
    }
  },
  {
    initial: () => [x.get(), y.get()],
    bounds: { left: 0, right: 188, top: 0, bottom: 476 },
    rubberband: false });



  const appStyle = {
    alignItems: "center",
    backgroundColor: "#fff",
    display: "flex",
    height: "100vh",
    justifyContent: "center",
    margin: 0 };


  const phoneStyle = {
    height: 554,
    position: "relative",
    width: 265 };


  const frameStyle = {
    backgroundColor: "#000",
    borderRadius: 37,
    height: 554,
    position: "absolute",
    width: 265 };


  const screenStyle = {
    backgroundColor: "#fff",
    borderRadius: 26,
    height: 526,
    left: 13,
    overflow: "hidden",
    position: "absolute",
    top: 12,
    width: 238 };


  const backgroundStyle = {
    position: "absolute",
    userSelect: "none",
    WebkitUserSelect: "none" };


  const logoStyle = {
    fontFamily: "'Philosopher', sans-serif",
    fontSize: 30,
    position: "absolute",
    textAlign: "center",
    top: 80,
    width: "100%" };


  const overlayStyle = {
    position: "absolute" };


  const notchStyle = {
    background: "#000",
    borderRadius: 12,
    height: 30,
    left: 67,
    position: "absolute",
    top: 1,
    width: 130 };


  const menuStyle = {
    position: "absolute",
    width: "100%",
    x: x.to(x => x * 1.6) // 1.2553
  };

  const menuListStyle = {
    listStyle: "none",
    padding: "50px 36px 0",
    color: "#fff" };


  const menuItemStyle = {
    alignItems: "center",
    borderBottom: "1px solid #fff",
    display: "flex",
    fontFamily: "'Catamaran'",
    fontSize: 24,
    height: 50,
    userSelect: "none",
    WebkitUserSelect: "none" };


  //     background: #443d7f;

  const handleStyle = {
    alignItems: "center",
    borderRadius: 25,
    cursor: "pointer",
    display: "flex",
    justifyContent: "center",
    height: 50,
    position: "absolute",
    top: 0,
    width: 50,
    x,
    y };


  const backStyle = {
    fill: "none",
    stroke: "#fff",
    strokeWidth: 4,
    strokeLinecap: "round" };


  return (
    React.createElement("div", { style: appStyle },
    React.createElement("div", { style: phoneStyle },
    React.createElement("div", { style: frameStyle }),
    React.createElement("div", { style: screenStyle },

    React.createElement("svg", {
      xmlns: "http://www.w3.org/2000/svg",
      width: "238",
      height: "526",
      viewBox: "0 0 238 526",
      style: backgroundStyle },

    React.createElement("path", { d: "M238 526H0V0h238v526", fill: "#ebf3fa" }),
    React.createElement("path", {
      d: "M-2.14 284.527V266.48L9.052 263.4c1.452-.4 2.325-1.973 1.95-3.497l-.087-.347c-.32-1.284-1.433-2.14-2.638-2.14-.23 0-.458.03-.69.092l-9.727 2.675v-71.223l81.366-22.375c.51-.14 1.026-.206 1.527-.206 2.7 0 5.178 1.912 5.89 4.777l19.154 77.083c.85 3.4-1.108 6.912-4.337 7.802l-103.6 28.485m55.566-39.524c-.227 0-.458.03-.685.093l-34.26 9.42c-1.45.4-2.328 1.973-1.948 3.498l.086.346c.317 1.284 1.43 2.14 2.64 2.14.226 0 .457-.03.684-.092l34.263-9.42c1.448-.4 2.325-1.973 1.945-3.498l-.082-.346c-.32-1.285-1.433-2.14-2.642-2.14m-41.54-25.93c-.274 0-.56.04-.858.123-1.154.317-1.87 1.08-2.156 2.29-.22.95-.17 2.08.156 3.394.33 1.315.814 2.33 1.456 3.05.603.676 1.3 1.014 2.083 1.014.274 0 .556-.04.853-.122 1.143-.314 1.86-1.076 2.145-2.287.223-.96.172-2.095-.152-3.41-.33-1.313-.807-2.326-1.44-3.04-.604-.674-1.297-1.01-2.087-1.01m7.034-1.935c-.274 0-.56.04-.857.123-1.155.316-1.87 1.08-2.157 2.29-.22.95-.17 2.08.16 3.393.325 1.315.81 2.33 1.456 3.05.603.676 1.296 1.013 2.083 1.013.27 0 .552-.04.85-.122 1.142-.315 1.855-1.077 2.14-2.287.228-.958.18-2.094-.148-3.41-.325-1.313-.807-2.326-1.44-3.04-.6-.673-1.296-1.01-2.087-1.01m10.663-2.932c-.274 0-.564.04-.86.123-1.152.318-1.868 1.082-2.154 2.292-.224.948-.17 2.08.155 3.393.33 1.314.81 2.33 1.456 3.05.604.676 1.297 1.013 2.084 1.013.274 0 .556-.04.85-.122 1.146-.314 1.86-1.076 2.145-2.287.226-.96.175-2.096-.15-3.41-.33-1.314-.81-2.328-1.44-3.04-.604-.675-1.3-1.012-2.087-1.012m7.034-1.934c-.274 0-.56.04-.86.123-1.152.317-1.872 1.08-2.154 2.29-.223.95-.168 2.08.16 3.394.325 1.314.81 2.33 1.453 3.05.603.676 1.3 1.014 2.082 1.014.274 0 .56-.04.854-.122 1.143-.315 1.86-1.077 2.14-2.287.228-.96.177-2.096-.148-3.41-.325-1.313-.806-2.327-1.44-3.04-.603-.674-1.296-1.01-2.087-1.01m7.034-1.935c-.273 0-.558.04-.856.123-1.155.316-1.87 1.08-2.157 2.29-.22.95-.168 2.08.157 3.393.33 1.314.814 2.33 1.456 3.05.607.676 1.3 1.013 2.086 1.013.27 0 .552-.04.85-.122 1.143-.315 1.86-1.077 2.14-2.287.228-.958.177-2.095-.148-3.41-.328-1.313-.806-2.326-1.44-3.04-.603-.673-1.296-1.01-2.087-1.01m7.04-1.935c-.278 0-.564.04-.862.123-1.15.317-1.87 1.08-2.153 2.29-.227.95-.172 2.08.157 3.394.325 1.314.81 2.33 1.456 3.05.603.675 1.296 1.013 2.083 1.013.27 0 .557-.04.85-.122 1.143-.314 1.86-1.077 2.14-2.287.232-.96.18-2.095-.147-3.41-.325-1.313-.807-2.326-1.437-3.04-.603-.674-1.3-1.01-2.086-1.01m10.66-2.932c-.275 0-.56.04-.863.122-1.15.318-1.87 1.08-2.152 2.29-.224.95-.17 2.08.156 3.394.33 1.314.815 2.33 1.457 3.05.603.676 1.3 1.014 2.087 1.014.27 0 .552-.04.85-.122 1.142-.315 1.855-1.077 2.14-2.287.227-.96.18-2.095-.148-3.41-.325-1.313-.807-2.327-1.44-3.04-.6-.674-1.3-1.01-2.087-1.01m7.033-1.935c-.274 0-.56.04-.857.122-1.155.317-1.87 1.08-2.157 2.29-.22.95-.17 2.08.16 3.394.324 1.314.81 2.33 1.452 3.05.602.675 1.3 1.013 2.082 1.013.274 0 .56-.042.853-.123 1.143-.314 1.86-1.077 2.145-2.287.224-.958.173-2.095-.152-3.41-.325-1.313-.807-2.326-1.44-3.04-.604-.673-1.296-1.01-2.087-1.01m7.034-1.935c-.274 0-.56.04-.857.123-1.155.316-1.87 1.08-2.157 2.29-.22.95-.168 2.08.16 3.394.325 1.314.81 2.33 1.457 3.05.603.675 1.295 1.012 2.082 1.012.27 0 .552-.04.85-.12 1.147-.316 1.855-1.078 2.14-2.288.228-.96.18-2.095-.148-3.41-.325-1.313-.806-2.326-1.437-3.04-.602-.674-1.3-1.01-2.09-1.01m7.038-1.935c-.278 0-.563.042-.86.125-1.152.317-1.872 1.08-2.158 2.29-.22.948-.164 2.078.16 3.392.33 1.315.81 2.33 1.457 3.05.6.676 1.296 1.013 2.082 1.013.274 0 .556-.04.85-.12 1.143-.316 1.86-1.08 2.145-2.29.228-.958.177-2.094-.148-3.408-.33-1.314-.81-2.327-1.44-3.04-.603-.673-1.3-1.01-2.087-1.01m-6.776-21.157c-.157 0-.306.087-.388.235l-.114.21c-.117.214-.054.49.145.626 1.942 1.297 3.437 3.335 4.063 5.85.627 2.52.267 5.065-.822 7.198-.11.22-.04.494.165.622l.195.12c.07.045.148.07.227.07.16 0 .313-.09.395-.248 1.225-2.384 1.624-5.237.924-8.058-.7-2.82-2.38-5.105-4.556-6.55-.074-.05-.152-.075-.235-.075m-1.06 1.944c-.158 0-.307.085-.393.238-.113.214-.05.49.145.62 1.52 1.04 2.685 2.645 3.18 4.625.488 1.977.222 3.982-.624 5.666-.11.217-.035.49.165.617.074.045.152.066.23.066.16 0 .314-.087.392-.247.943-1.882 1.245-4.126.693-6.337-.548-2.217-1.856-4.016-3.55-5.177-.075-.05-.157-.074-.24-.074m-.982 1.798c-.153 0-.305.087-.387.24l-.068.118c-.114.215-.055.486.14.622 1.046.75 1.85 1.882 2.193 3.265.345 1.384.172 2.784-.395 3.974-.102.218-.032.49.168.613l.114.074c.074.046.152.066.23.066.157 0 .318-.09.392-.25.68-1.42.892-3.093.48-4.748-.41-1.656-1.373-3.01-2.625-3.896-.076-.053-.162-.078-.244-.078m-1.12 2.06c-.152 0-.305.08-.387.234l-.118.21c-.11.206-.063.465.117.605.53.42.938 1.03 1.12 1.758.183.73.108 1.47-.162 2.112-.09.214-.012.466.184.585l.196.124c.074.045.15.065.23.065.17 0 .333-.097.408-.274.376-.886.477-1.903.227-2.907-.25-1.01-.814-1.842-1.55-2.422-.082-.062-.172-.09-.266-.09m-59.82 43.092c-.905 0-1.606-.99-2.095-2.967-.212-.833-.29-1.555-.243-2.167.058-.905.406-1.445 1.044-1.62.114-.03.223-.046.33-.046.484 0 .927.312 1.322.938.317.512.58 1.18.783 2.004.21.84.293 1.56.253 2.162-.054.922-.4 1.47-1.025 1.643-.13.035-.255.053-.372.053m7.034-1.935c-.904 0-1.605-.99-2.094-2.967-.207-.832-.29-1.554-.243-2.166.06-.905.407-1.445 1.045-1.62.114-.032.224-.047.333-.047.487 0 .93.313 1.324.94.317.51.576 1.18.78 2.003.207.84.293 1.56.254 2.162-.055.922-.396 1.47-1.026 1.643-.13.035-.25.052-.372.052m10.66-2.93c-.905 0-1.602-.99-2.095-2.97-.204-.83-.286-1.553-.243-2.164.06-.904.407-1.445 1.045-1.62.114-.03.224-.047.333-.047.49 0 .928.313 1.323.94.317.51.58 1.18.783 2.002.208.842.294 1.563.255 2.163-.058.923-.4 1.47-1.025 1.643-.13.036-.254.054-.376.054m7.037-1.934c-.908 0-1.604-.99-2.098-2.968-.204-.832-.286-1.554-.24-2.166.06-.905.408-1.445 1.042-1.62.113-.03.223-.047.332-.047.49 0 .928.312 1.324.938.317.512.58 1.18.782 2.003.212.842.294 1.563.255 2.164-.055.922-.4 1.47-1.026 1.642-.13.035-.255.054-.373.054m7.035-1.935c-.905 0-1.605-.99-2.095-2.967-.207-.833-.29-1.554-.242-2.166.058-.905.407-1.445 1.045-1.62.113-.032.223-.047.33-.047.488 0 .93.313 1.322.94.317.51.58 1.178.783 2.002.21.84.293 1.562.254 2.163-.056.922-.396 1.47-1.026 1.642-.126.035-.25.053-.372.053m7.034-1.934c-.904 0-1.605-.988-2.094-2.967-.208-.832-.286-1.554-.243-2.165.058-.906.406-1.446 1.044-1.62.114-.032.223-.048.333-.048.485 0 .928.313 1.323.94.317.51.575 1.18.783 2.003.207.84.29 1.56.25 2.162-.054.922-.395 1.47-1.02 1.643-.134.035-.256.053-.377.053m10.66-2.93c-.905 0-1.602-.99-2.095-2.968-.203-.833-.285-1.554-.238-2.166.06-.905.407-1.445 1.04-1.62.115-.032.224-.047.338-.047.485 0 .924.312 1.32.938.316.512.578 1.18.782 2.003.207.842.294 1.563.254 2.163-.054.923-.395 1.47-1.025 1.643-.128.035-.254.053-.375.053m7.038-1.935c-.904 0-1.6-.99-2.094-2.967-.212-.833-.29-1.554-.244-2.166.06-.905.407-1.446 1.045-1.62.115-.032.225-.047.33-.047.49 0 .928.313 1.323.938.317.512.58 1.18.783 2.004.212.84.294 1.562.255 2.162-.054.92-.4 1.47-1.025 1.642-.13.035-.254.053-.372.053m7.034-1.935c-.904 0-1.604-.99-2.094-2.967-.207-.832-.29-1.554-.242-2.166.063-.905.408-1.445 1.046-1.62.113-.03.223-.047.332-.047.486 0 .928.313 1.324.94.317.51.575 1.18.778 2.002.208.84.294 1.562.255 2.163-.055.922-.395 1.47-1.026 1.643-.13.035-.25.052-.373.052m7.035-1.934c-.905 0-1.6-.99-2.095-2.967-.207-.834-.285-1.555-.242-2.167.06-.905.407-1.445 1.045-1.62.113-.032.223-.047.333-.047.485 0 .927.313 1.323.94.313.51.58 1.178.783 2.002.206.84.292 1.562.253 2.162-.06.923-.4 1.47-1.025 1.643-.13.036-.255.053-.376.053",
      fill: "#cadef7" }),

    React.createElement("path", {
      d: "M19.257 260.5c-1.208 0-2.32-.857-2.637-2.14l-.086-.347c-.383-1.525.497-3.1 1.947-3.497l34.26-9.42c.232-.065.46-.095.686-.095 1.208 0 2.323.858 2.64 2.142l.087.346c.38 1.526-.498 3.1-1.948 3.498l-34.26 9.42c-.23.064-.46.094-.688.094M12.567 228.942c-.785 0-1.48-.335-2.08-1.01-.646-.72-1.13-1.737-1.458-3.05-.327-1.315-.377-2.448-.16-3.394.287-1.212 1.005-1.974 2.16-2.292.295-.08.58-.124.86-.124.785 0 1.48.34 2.084 1.014.63.713 1.11 1.726 1.44 3.04.326 1.314.376 2.45.15 3.408-.284 1.21-1 1.974-2.144 2.288-.295.08-.577.12-.853.12m-.832-8.334c-.108 0-.218.018-.33.046-.64.177-.986.717-1.047 1.62-.043.612.034 1.336.242 2.17.494 1.977 1.192 2.965 2.095 2.965.12 0 .245-.018.373-.054.627-.173.97-.72 1.027-1.642.04-.6-.047-1.32-.255-2.164-.202-.823-.467-1.49-.783-2.002-.396-.625-.835-.94-1.322-.94M19.604 227.01c-.786 0-1.48-.337-2.08-1.013-.647-.722-1.133-1.738-1.456-3.05-.33-1.313-.38-2.447-.164-3.395.286-1.21 1.007-1.974 2.16-2.29.3-.08.584-.124.856-.124.79 0 1.486.34 2.088 1.012.636.712 1.115 1.728 1.438 3.04.33 1.316.378 2.45.153 3.41-.286 1.21-1 1.973-2.143 2.288-.3.082-.58.12-.853.12m-.833-8.332c-.108 0-.22.014-.333.046-.635.176-.982.716-1.043 1.62-.048.612.034 1.335.24 2.164.494 1.978 1.19 2.97 2.096 2.97.122 0 .244-.02.374-.055.63-.17.972-.718 1.023-1.64.04-.6-.044-1.324-.252-2.164-.204-.823-.465-1.492-.782-2.003-.394-.626-.836-.937-1.322-.937M30.264 224.076c-.783 0-1.48-.34-2.08-1.013-.644-.718-1.13-1.735-1.455-3.05-.327-1.314-.382-2.444-.16-3.39.284-1.212 1-1.977 2.155-2.294.298-.082.586-.122.86-.122.786 0 1.483.336 2.086 1.01.632.715 1.113 1.728 1.443 3.04.322 1.316.374 2.45.15 3.41-.29 1.21-1.003 1.97-2.147 2.288-.294.08-.575.12-.852.12m-.832-8.333c-.107 0-.218.015-.33.047-.64.175-.987.715-1.046 1.62-.045.61.035 1.333.243 2.164.49 1.98 1.188 2.968 2.092 2.968.12 0 .246-.02.374-.05.628-.176.967-.723 1.026-1.645.038-.602-.045-1.32-.256-2.162-.2-.824-.465-1.49-.78-2.005-.395-.623-.835-.937-1.324-.937M37.3 222.145c-.786 0-1.48-.34-2.085-1.015-.642-.72-1.13-1.735-1.452-3.05-.33-1.313-.383-2.442-.162-3.39.286-1.21 1.005-1.975 2.156-2.293.3-.08.586-.122.86-.122.79 0 1.487.336 2.087 1.012.635.712 1.112 1.727 1.44 3.04.33 1.31.378 2.448.15 3.407-.285 1.21-1 1.975-2.144 2.29-.293.08-.58.12-.85.12m-.835-8.333c-.11 0-.222.016-.334.045-.634.177-.98.716-1.04 1.62-.047.613.034 1.336.24 2.167.492 1.978 1.19 2.967 2.096 2.967.12 0 .242-.02.372-.052.628-.174.972-.72 1.024-1.643.043-.6-.042-1.32-.252-2.163-.204-.823-.467-1.49-.783-2.004-.396-.624-.835-.937-1.322-.937M44.336 220.21c-.788 0-1.48-.337-2.085-1.013-.645-.72-1.128-1.738-1.455-3.05-.327-1.314-.38-2.446-.16-3.395.288-1.207 1.005-1.973 2.156-2.29.3-.083.587-.12.86-.12.79 0 1.485.336 2.086 1.01.635.712 1.115 1.725 1.442 3.04.327 1.315.376 2.45.15 3.407-.285 1.21-1 1.972-2.143 2.29-.295.078-.58.12-.85.12m-.837-8.336c-.107 0-.217.018-.33.048-.64.176-.984.714-1.04 1.622-.05.61.03 1.334.237 2.163.494 1.98 1.19 2.967 2.096 2.967.12 0 .246-.015.373-.053.63-.17.97-.716 1.027-1.64.04-.6-.046-1.322-.256-2.162-.202-.826-.465-1.49-.78-2.003-.395-.627-.836-.94-1.326-.94M51.37 218.272c-.786 0-1.48-.336-2.08-1.01-.647-.722-1.133-1.735-1.456-3.05-.328-1.314-.38-2.444-.16-3.393.282-1.212 1.004-1.975 2.155-2.293.297-.083.58-.12.858-.12.79 0 1.485.335 2.09 1.01.632.713 1.11 1.727 1.437 3.04.327 1.31.377 2.45.147 3.41-.28 1.21-.995 1.97-2.14 2.284-.294.084-.58.122-.85.122m-.835-8.33c-.108 0-.22.014-.334.045-.637.174-.982.714-1.043 1.618-.043.613.036 1.335.24 2.167.494 1.978 1.19 2.97 2.097 2.97.12 0 .245-.02.374-.054.63-.174.972-.723 1.026-1.645.04-.598-.044-1.32-.252-2.16-.21-.824-.467-1.493-.784-2.004-.395-.63-.837-.94-1.323-.94M62.033 215.344c-.787 0-1.482-.34-2.082-1.013-.644-.72-1.13-1.736-1.46-3.05-.322-1.315-.377-2.444-.157-3.395.285-1.21 1.003-1.97 2.156-2.29.3-.08.584-.12.86-.12.786 0 1.485.335 2.085 1.01.634.71 1.117 1.728 1.44 3.04.328 1.314.376 2.45.15 3.408-.286 1.213-.997 1.975-2.142 2.287-.297.08-.58.124-.85.124m-.834-8.337c-.11 0-.22.016-.334.047-.637.177-.985.716-1.043 1.62-.048.613.032 1.337.24 2.168.492 1.98 1.19 2.965 2.095 2.965.12 0 .245-.015.373-.05.63-.173.97-.72 1.026-1.644.04-.6-.047-1.32-.256-2.164-.2-.825-.46-1.49-.78-2.003-.395-.624-.834-.94-1.32-.94M69.067 213.408c-.785 0-1.48-.34-2.08-1.013-.646-.72-1.13-1.737-1.457-3.05-.33-1.313-.378-2.447-.16-3.393.286-1.212 1.005-1.976 2.156-2.29.297-.083.586-.126.86-.126.79 0 1.485.34 2.085 1.013.634.712 1.116 1.725 1.445 3.038.322 1.317.374 2.45.148 3.41-.285 1.21-1 1.974-2.144 2.29-.297.077-.58.12-.853.12m-.833-8.337c-.108 0-.22.02-.33.048-.64.175-.985.717-1.044 1.62-.048.612.033 1.337.24 2.167.493 1.98 1.19 2.968 2.097 2.968.118 0 .24-.02.37-.054.63-.173.97-.718 1.026-1.64.04-.6-.044-1.322-.252-2.164-.202-.826-.465-1.492-.784-2.006-.396-.623-.837-.94-1.322-.94M76.104 211.473c-.786 0-1.48-.34-2.083-1.013-.643-.717-1.13-1.734-1.453-3.05-.33-1.313-.382-2.444-.16-3.394.284-1.21 1-1.975 2.154-2.29.3-.083.585-.122.86-.122.793 0 1.486.335 2.09 1.01.633.712 1.112 1.73 1.438 3.042.326 1.312.375 2.45.15 3.41-.288 1.21-1 1.97-2.143 2.285-.296.083-.58.123-.85.123m-.836-8.336c-.11 0-.218.016-.335.047-.633.178-.98.718-1.04 1.62-.05.615.033 1.336.24 2.168.493 1.978 1.19 2.968 2.093 2.968.124 0 .247-.02.375-.056.63-.17.97-.717 1.023-1.64.04-.602-.045-1.323-.25-2.163-.207-.823-.466-1.493-.784-2-.394-.628-.836-.943-1.323-.943M83.135 209.54c-.784 0-1.482-.335-2.084-1.013-.644-.717-1.125-1.734-1.455-3.05-.322-1.315-.375-2.443-.155-3.392.284-1.212 1-1.974 2.156-2.292.296-.08.58-.124.857-.124.788 0 1.486.338 2.088 1.012.634.713 1.112 1.726 1.44 3.04.327 1.313.377 2.45.15 3.41-.285 1.208-1 1.973-2.146 2.288-.292.08-.576.12-.85.12m-.833-8.332c-.105 0-.215.012-.328.044-.64.175-.986.717-1.046 1.622-.046.61.034 1.332.242 2.165.493 1.976 1.19 2.965 2.096 2.965.117 0 .243-.016.37-.052.627-.17.972-.72 1.028-1.642.038-.6-.045-1.32-.253-2.16-.206-.825-.47-1.495-.786-2.005-.394-.626-.838-.937-1.323-.937M73.695 190.014c-.078 0-.153-.02-.227-.066l-.197-.126c-.192-.12-.27-.37-.18-.586.266-.64.34-1.38.155-2.108-.18-.73-.588-1.337-1.12-1.76-.174-.14-.222-.403-.114-.602l.116-.215c.085-.152.238-.234.39-.234.093 0 .186.032.264.094.736.58 1.3 1.412 1.55 2.417.253 1.01.15 2.026-.226 2.91-.075.175-.238.277-.41.277",
      fill: "#dce9fb" }),

    React.createElement("path", {
      d: "M75.63 191.23c-.078 0-.157-.02-.23-.067l-.113-.07c-.202-.126-.273-.393-.168-.617.566-1.19.738-2.59.394-3.973-.343-1.382-1.145-2.516-2.19-3.262-.198-.136-.258-.407-.142-.623l.063-.118c.082-.154.235-.24.392-.24.082 0 .164.027.24.078 1.253.887 2.216 2.238 2.626 3.894.41 1.653.202 3.33-.48 4.746-.076.16-.233.252-.393.252",
      fill: "#dce9fb" }),

    React.createElement("path", {
      d: "M77.323 192.293c-.075 0-.154-.02-.23-.067-.2-.126-.272-.398-.164-.62.842-1.68 1.112-3.685.617-5.663-.49-1.977-1.66-3.588-3.175-4.624-.2-.135-.26-.406-.142-.623.082-.154.232-.236.39-.236.08 0 .164.024.235.075 1.696 1.158 3.003 2.958 3.554 5.172.55 2.214.246 4.455-.694 6.338-.08.16-.232.248-.393.248",
      fill: "#dce9fb" }),

    React.createElement("path", {
      d: "M79.148 193.445c-.075 0-.154-.02-.225-.067l-.196-.123c-.203-.126-.274-.403-.16-.62 1.085-2.13 1.445-4.677.822-7.195-.63-2.518-2.13-4.558-4.068-5.855-.2-.134-.263-.407-.146-.624l.112-.21c.083-.15.233-.232.387-.232.083 0 .166.024.237.07 2.176 1.448 3.856 3.733 4.56 6.552.698 2.822.296 5.676-.926 8.056-.082.158-.236.25-.398.25",
      fill: "#dce9fb" }),

    React.createElement("path", {
      d: "M62.455 521.204v4.265c0 .338-.1.655-.266.916-.18.278-.436.494-.737.615-.09.04-.184.07-.285.087-.09.018-.18.025-.275.025H-3.703c-.832 0-1.518-.693-1.562-1.56 0-.027-.003-.055-.003-.083v-4.266c0-.03.003-.058.003-.086.044-.863.73-1.56 1.562-1.56h64.596c.094 0 .185.01.275.028.1.018.195.046.285.084.3.12.557.34.736.615.165.264.265.577.265.92",
      fill: "#afcdfb" }),

    React.createElement("path", {
      d: "M26.484 519.558H-3.87c-.746 0-1.356.697-1.394 1.56 0 .028-.003.056-.003.086v4.265c0 .027.003.055.003.083.038.866.648 1.56 1.394 1.56h34.604c-2.633-2.254-3.766-5.33-4.25-7.555M53.86 527.113h.735v-7.552h-.734v7.553M51.377 527.113h.733v-7.552h-.733v7.553M48.393 527.113h.735v-7.552h-.735v7.553M43.826 527.113h.734v-7.552h-.734v7.553M38.997 527.113h.736v-7.552h-.736v7.553M31.595 527.113h.733v-7.552h-.733v7.553M56.227 527.113h.734v-7.552h-.733v7.553M57.79 527.113h.733v-7.552h-.733v7.553M59.298 527.112h.735v-7.55h-.735v7.55M60.434 519.56v7.553h.456c.094 0 .187-.008.278-.025v-7.5c-.09-.02-.184-.03-.278-.03h-.456M61.453 519.67V527c.3-.12.557-.336.735-.614v-6.1c-.178-.277-.435-.495-.735-.616",
      fill: "#77a4e5" }),

    React.createElement("path", {
      d: "M59.512 513.65v4.265c0 .34-.1.656-.268.92-.177.275-.433.49-.734.615-.09.038-.187.065-.287.083-.09.018-.18.025-.274.025H-6.648c-.834 0-1.52-.693-1.562-1.557v-4.35-.086c.044-.863.73-1.557 1.563-1.557H57.95c.093 0 .183.007.273.025.1.018.196.046.287.084.3.12.557.34.734.615.168.264.268.578.268.92",
      fill: "#afcdfb" }),

    React.createElement("path", {
      d: "M23.54 512.007H-6.812c-.744 0-1.357.694-1.395 1.557-.003.03-.003.06-.003.087v4.265c0 .028 0 .056.002.086.038.865.65 1.56 1.395 1.56H27.79c-2.636-2.255-3.765-5.33-4.25-7.553M50.916 519.558h.735v-7.55h-.734v7.55M48.432 519.558h.735v-7.55h-.735v7.55M45.455 519.558h.734v-7.552h-.735v7.552M40.885 519.558h.736v-7.552h-.735v7.552M36.052 519.56h.734v-7.553h-.734v7.552M28.65 519.56h.73v-7.553h-.73v7.552M53.282 519.558h.736v-7.55h-.736v7.55M54.845 519.558h.735v-7.55h-.735v7.55M56.356 519.558h.734v-7.55h-.734v7.55M57.49 512.007v7.55h.46c.094 0 .184-.006.275-.024v-7.5c-.09-.02-.18-.026-.274-.026h-.46M58.51 512.116v7.334c.302-.125.557-.34.735-.616v-6.103c-.178-.275-.433-.493-.734-.614",
      fill: "#77a4e5" }),

    React.createElement("path", {
      d: "M62.875 506.06v4.265c0 .34-.097.656-.267.92-.178.276-.435.493-.733.615-.09.038-.187.066-.285.083-.09.018-.184.026-.278.026H-3.28c-.834 0-1.52-.695-1.564-1.56v-4.35-.086c.044-.863.73-1.557 1.563-1.557H61.31c.094 0 .188.008.278.025.098.018.195.046.285.084.298.122.555.34.733.615.17.265.267.58.267.92",
      fill: "#afcdfb" }),

    React.createElement("path", {
      d: "M26.906 504.417H-3.45c-.744 0-1.356.694-1.397 1.558v4.438c.04.863.653 1.557 1.396 1.557H31.154c-2.633-2.255-3.767-5.33-4.25-7.553M54.284 511.97h.734v-7.553h-.734v7.552M51.8 511.968h.734v-7.55H51.8v7.55M48.817 511.97h.735v-7.553h-.735v7.552M44.25 511.97h.734v-7.553h-.735v7.552M39.42 511.97h.733v-7.553h-.733v7.552M32.014 511.97h.734v-7.553h-.734v7.552M56.646 511.97h.735v-7.553h-.734v7.552M58.212 511.97h.73v-7.553h-.73v7.552M59.718 511.97h.736v-7.553h-.736v7.552M60.857 504.417v7.55h.457c.093 0 .187-.006.278-.024v-7.5c-.09-.02-.185-.026-.278-.026h-.457M61.875 504.526v7.334c.3-.122.554-.34.733-.616v-6.103c-.18-.275-.432-.492-.733-.614",
      fill: "#77a4e5" }),

    React.createElement("path", {
      d: "M59.512 498.506v4.265c0 .343-.1.657-.268.92-.177.276-.433.494-.734.616-.09.038-.187.065-.287.083-.09.017-.18.027-.274.027H-6.648c-.834 0-1.52-.696-1.562-1.56V498.507v-.083c.044-.866.73-1.56 1.563-1.56H57.95c.093 0 .183.007.273.025.1.018.196.048.287.086.3.122.557.34.734.615.168.26.268.577.268.916",
      fill: "#afcdfb" }),

    React.createElement("path", {
      d: "M23.54 496.863H-6.812c-.744 0-1.357.694-1.395 1.56-.003.028-.003.056-.003.084v4.264c0 .03 0 .06.002.087.038.864.65 1.56 1.395 1.56H27.79c-2.636-2.256-3.765-5.33-4.25-7.554M50.916 504.417h.735v-7.554h-.734v7.554M48.432 504.417h.735v-7.554h-.735v7.554M45.455 504.417h.734v-7.555h-.735v7.555M40.885 504.417h.736v-7.555h-.735v7.555M36.052 504.417h.734v-7.554h-.734v7.554M28.65 504.417h.73v-7.554h-.73v7.554M53.282 504.417h.736v-7.554h-.736v7.554M54.845 504.417h.735v-7.554h-.735v7.554M56.356 504.417h.734v-7.554h-.734v7.554M57.49 496.863v7.554h.46c.094 0 .184-.01.275-.028v-7.502c-.09-.018-.18-.025-.274-.025h-.46M58.51 496.974v7.33c.302-.12.557-.338.735-.614v-6.1c-.178-.277-.433-.494-.734-.616",
      fill: "#77a4e5" }),

    React.createElement("path", {
      d: "M59.512 490.916v4.265c0 .343-.1.657-.268.92-.177.276-.433.494-.734.616-.09.038-.187.066-.287.083-.09.017-.18.027-.274.027H-6.648c-.834 0-1.52-.696-1.562-1.56V490.917v-.083c.044-.866.73-1.56 1.563-1.56H57.95c.093 0 .183.01.273.025.1.018.196.048.287.086.3.122.557.34.734.616.168.26.268.577.268.916",
      fill: "#afcdfb" }),

    React.createElement("path", {
      d: "M23.54 489.273H-6.812c-.744 0-1.357.694-1.395 1.56-.003.028-.003.056-.003.084v4.264c0 .032 0 .06.002.087.038.864.65 1.56 1.395 1.56H27.79c-2.636-2.256-3.765-5.33-4.25-7.554M50.916 496.827h.735v-7.554h-.734v7.554M48.432 496.827h.735v-7.554h-.735v7.554M45.455 496.827h.734v-7.555h-.735v7.555M40.885 496.827h.736v-7.554h-.735v7.554M36.052 496.828h.734v-7.555h-.734v7.555M28.65 496.827h.73v-7.554h-.73v7.554M53.282 496.827h.736v-7.554h-.736v7.554M54.845 496.827h.735v-7.554h-.735v7.554M56.356 496.827h.734v-7.554h-.734v7.554M57.49 489.273v7.554h.46c.094 0 .184-.01.275-.028v-7.502c-.09-.015-.18-.025-.274-.025h-.46M58.51 489.384v7.332c.302-.122.557-.34.735-.615V490c-.178-.276-.433-.494-.734-.616",
      fill: "#77a4e5" }),

    React.createElement("path", {
      d: "M55.58 483.327v4.267c0 .34-.1.654-.27.917-.175.277-.43.495-.73.616-.094.038-.19.066-.288.084-.09.017-.182.028-.275.028H-10.58c-.833 0-1.518-.694-1.56-1.56v-4.351-.084c.042-.866.727-1.56 1.56-1.56h64.597c.093 0 .185.008.275.026.1.02.194.047.287.085.3.12.555.337.73.615.17.26.27.578.27.917",
      fill: "#afcdfb" }),

    React.createElement("path", {
      d: "M19.61 481.683h-30.355c-.74 0-1.357.693-1.392 1.56-.003.028-.003.056-.003.083v4.268c0 .027 0 .055.003.083.035.866.65 1.56 1.392 1.56H23.863c-2.636-2.256-3.764-5.33-4.253-7.554M46.984 489.238h.735v-7.555h-.736v7.555M44.5 489.238h.735v-7.555H44.5v7.555M41.523 489.237h.734v-7.554h-.734v7.554M36.953 489.237h.735v-7.554h-.735v7.554M32.123 489.237h.735v-7.554h-.735v7.554M24.714 489.238h.735v-7.555h-.736v7.555M49.353 489.238h.733v-7.554h-.733v7.554M50.916 489.237h.735v-7.554h-.734v7.554M52.427 489.237h.73v-7.554h-.73v7.554M53.56 481.683v7.555h.458c.093 0 .185-.01.274-.028v-7.5c-.09-.02-.18-.027-.274-.027h-.46M54.578 481.795v7.33c.3-.12.556-.338.735-.614v-6.1c-.18-.278-.435-.494-.735-.615",
      fill: "#77a4e5" }),

    React.createElement("path", {
      d: "M57.722 475.737V480c0 .343-.1.657-.267.92-.18.277-.434.494-.734.616-.09.038-.19.066-.285.083-.09.017-.183.028-.276.028h-64.6c-.83 0-1.518-.697-1.5.........完整代码请登录后点击上方下载按钮下载查看