底部弹出层导航切换效果-html代码-BFW代码库

代码语言：html
代码描述：底部弹出层导航切换效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@400;800&display=swap");

body {
  font-family: "Kanit", sans-serif;
  margin: 0;
}

.App {
  align-items: center;
  background-color: #dbdad8;
  display: flex;
  height: 100vh;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}

.phone {
  background-color: #fff;
  border-radius: 25px;
  height: 560px;
  overflow: hidden;
  position: relative;
  width: 300px;
}

.phone-content {
  box-sizing: border-box;
  padding: 20px;
  position: absolute;
}

.pre-title {
  display: block;
  font-size: 16px;
  font-style: italic;
  margin-top: 52px;
  text-align: center;
  width: 100%;
}

.title {
  display: block;
  font-size: 36px;
  font-weight: 900;
  line-height: 36px;
  text-align: center;
  width: 100%;
}

.cook {
  margin-top: -8px;
}

.bottomSheet {
  position: absolute;
  height: 100%;
}

.drag-area {
  height: 500px;
  opacity: 0.5;
  position: absolute;
  width: 300px;
  z-index: 1;
}

.drag {
  cursor: pointer;
}

.container {
  box-sizing: border-box;
  height: 500px;
  padding: 20px;
  position: absolute;
  top: 60px;
  width: 100%;
}

.content {
  font-size: 28px;
  font-weight: 900;
}

.icon {
  left: 40px;
  position: absolute;
  top: 16px;
  width: 20px;
}

.close {
  left: 56px;
  position: absolute;
  top: 17px;
}

.content-title {
  margin-bottom: 24px;
}

.content-subtitle {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 20px;
}

.content-body {
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
</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>
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;

const THRESHOLD = 300;

function Close({ stroke, scale }) {
  return (
    React.createElement("svg", {
      className: "close",
      xmlns: "http://www.w3.org/2000/svg",
      height: "20",
      width: "20" },

    React.createElement(animated.g, { style: { scale, transformOrigin: "50%" } },
    React.createElement("path", {
      d: "M3 3l13 13M16 3L3 16",
      fill: "none",
      strokeWidth: "2.2",
      strokeLinecap: "round",
      style: { stroke } }))));




}

function Veg({ fill }) {
  return (
    React.createElement("svg", {
      className: "icon",
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 20 25",
      fill: fill },

    React.createElement("path", { d: "M13.1 3.8c-.6-.3-1.3-.6-2.1-.7.2-1 .9-1.2 1.9-1.1.5 0 1-.4 1.1-.9S13.6 0 13.1 0C10.6-.2 9.2 1.2 9 3.1c-.7.1-1.4.3-2.1.7C3.7 1.5-.5 4.4.3 8.5L2 17.4c.3 1.5 1.6 2.6 3.1 2.6.9 0 1.6-.4 2.2-1 .7.6 1.7 1 2.7 1 1.1 0 2-.4 2.7-.9.5.6 1.3.9 2.1.9 1.5 0 2.8-1.1 3.1-2.6l1.7-8.9c.8-4.1-3.3-6.9-6.5-4.7zM5.1 18c-.5 0-1-.4-1.1-1L2.3 8.2c-.4-2 1.2-3.6 3-3-.8 1-1.1 2.2-.8 3.4l1.7 8.2c-.2.6-.3 1.2-1.1 1.2zm4.9 0c-1 0-1.7-.5-1.8-1L6.4 8.1C6.1 6.4 7.9 5 10 5c2 0 4 1.4 3.6 3.1-1.9 9.3-1.7 8.2-1.8 8.9-.1.5-.8 1-1.8 1zm7.7-9.8L16 17c-.1.6-.6 1-1.1 1-.7 0-.9-.5-1-1.2l1.7-8.3c.2-1.1 0-2.4-.8-3.4 1.7-.6 3.3 1 2.9 3.1z" })));


}

function Chicken({ fill }) {
  return (
    React.createElement("svg", {
      className: "icon",
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 20 25",
      fill: fill },

    React.createElement("path", { d: "M17.7 2.3C15.1-.3 12.5-1 9.9 1.6 8.2 3.3 6.9 6 6.7 8.4c-.1.5-.3 1-.6 1.3l-.9.9c-.5.5-1.3.6-1.9.6-.9-.1-1.8.2-2.4.9-1.2 1.2-1.2 3.1 0 4.2.5.5 1.2.8 2 .9 0 .7.3 1.4.9 2 1.2 1.2 3.1 1.2 4.2 0 .6-.6.9-1.5.9-2.4 0-.6 0-1.3.6-1.9l.9-.9c.3-.3.8-.5 1.3-.6 2.3-.2 5-1.5 6.7-3.2 2.6-2.7 1.9-5.3-.7-7.9zM17 8.7c-1.3 1.3-3.7 2.5-5.5 2.6-1 .1-1.9.5-2.5 1.2l-1 1c-.9.9-1.3 2.1-1.1 3.5 0 .3-.1.6-.3.8-.4.4-1 .4-1.4 0-.2-.2-.3-.5-.3-.8.1-1-.7-1.8-1.7-1.7-.3 0-.6-.1-.8-.3-.4-.4-.4-1 0-1.4.2-.2.5-.3.8-.3 1.4.1 2.6-.3 3.5-1.1l.9-.9c.7-.7 1.1-1.5 1.2-2.5 0-2.1 1.2-4.4 2.5-5.8 1.6-1.6 3-1.3 5 .7 1.9 1.9 2.3 3.3.7 5z" })));


}

function Fish({ fill }) {
  return (
    React.createElement("svg", {
      className: "icon",
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 20 25",
      fill: fill },

    React.createElement("path", { d: "M19.9 1c-.1-.5-.4-.8-.9-.9C10.9-.8 4.9 3.5 4.6 11.6l-3.8.7C0 12.5-.3 13.4.3 14L6 19.7c.6.6 1.5.3 1.7-.5l.8-3.8C16.6 15.1 20.8 9 19.9 1zM18 2c.1 2.1-.2 4.1-.8 5.7-2.4-.6-4.3-2.5-4.9-4.9 1.6-.6 3.5-.9 5.7-.8zM6 17l-3-3 1.6-.3c0 .2 0 .5.1.7.1.5.4.8.9.9.3 0 .5.1.8.1L6 17zm.6-3.6c-.2-3.8.8-7.4 3.8-9.6.9 2.7 3 4.9 5.8 5.8-2.2 3-5.8 4-9.6 3.8z" }),
    React.createElement("path", { d: "M15.6 4.9c.7.3 1.4-.2 1.4-.9 0-.4-.3-.8-.6-.9-.5-.2-1.1 0-1.3.5-.2.6.1 1.1.5 1.3z" })));


}

function Cook() {
  return (
    React.createElement("svg", {
      className: "cook",
      xmlns: "http://www.w3.org/2000/svg",
      width: "260",
      height: "400" },

    React.createElement("path", {
      d: "M154.193 179.977c-.278 1.194-6.235 55.415-6.235 55.415l-5.388 7.661-1.46 11.73 11.175 27.693h-82.82s-1.313-14.632-1.2-18.546c.114-3.913 2.108-18.266 2.108-18.266l-.191-14.573-3.137-63.538 28.066-9.052c16.955-2.918 41.907 9.768 41.907 9.768l17.175 11.708",
      fill: "#f03d5f" }),

    React.createElement("path", {
      d: "M143.43 139.564c3.688-.231 6.516-3.314 8.55-6.4 1.898-2.879 3.523-6.116 3.54-9.566.015-2.995-1.18-5.848-2.355-8.603-1.209-2.838-2.44-5.711-4.34-8.141-1.902-2.43-4.584-4.403-7.645-4.783l2.25 37.493",
      fill: "#17282f" }),

    React.createElement("path", {
      d: "M100.327 154.01l.037-.913 2.164-52.94 1.195-3.003 26.48-3.663c8.652-.674 16.11 5.999 16.418 14.672.34 9.636.376 21.414-.96 28.56-2.691 14.37-13.804 15.9-13.804 15.9s-.19 3.763-.397 9.197c-.155 4.105-3.78 15.938-7.886 16.054-1.765.05-6.578-1.48-8.876-1.814-14.482-2.116-14.371-22.05-14.371-22.05",
      fill: "#f8a58d" }),

    React.createElement("path", {
      d: "M141.733 116.562c.007.978-.815 1.792-1.836 1.818-1.02.027-1.855-.742-1.863-1.721-.007-.979.815-1.792 1.835-1.82 1.021-.026 1.856.745 1.864 1.723M143.899 114.215c-.236.234-1.61-.841-3.602-.892-1.989-.077-3.479.907-3.688.657-.103-.11.142-.54.791-.986.64-.445 1.72-.864 2.961-.824 1.24.04 2.272.526 2.858 1.01.6.487.796.93.68 1.035M122.241 116.371c.008.978-.814 1.792-1.835 1.818-1.02.027-1.855-.743-1.862-1.721-.008-.979.814-1.793 1.834-1.82 1.021-.026 1.856.745 1.863 1.723M124.31 114.046c-.236.236-1.612-.84-3.602-.89-1.989-.079-3.479.906-3.688.655-.103-.11.14-.54.792-.985.64-.444 1.72-.864 2.96-.824 1.241.04 2.272.527 2.86 1.01.597.487.794.93.679 1.034M131.132 129.017c-.007-.114 1.237-.293 3.25-.495.51-.038.995-.126 1.09-.47.13-.365-.068-.92-.298-1.518l-1.397-3.914c-1.937-5.571-3.324-10.147-3.099-10.223.225-.076 1.978 4.378 3.914 9.95.465 1.373.91 2.683 1.333 3.935.177.583.49 1.248.21 2.004-.148.376-.53.642-.857.72-.33.091-.615.088-.868.097-2.02.052-3.274.027-3.278-.087",
      fill: "#17282f" }),

    React.createElement("path", {
      d: "M131.857 152.624s-9.726.358-19.186-5.69c0 0 4.416 10.044 18.897 9.092l.29-3.402M130.157 133.793c-.69-.967-1.931-1.521-3.18-1.422-.868.07-1.753.463-2.297 1.152-.544.69-.682 1.685-.223 2.37.516.77 1.635.976 2.593.732s1.792-.847 2.587-1.449c.22-.166.445-.34.585-.574.14-.232.178-.54.017-.74",
      fill: "#f68260" }),

    React.createElement("path", {
      d: "M125.232 130.233c.324-.01.269 2.152 2.077 3.737 1.804 1.591 4.116 1.412 4.124 1.714.027.137-.525.406-1.497.405-.956.007-2.34-.338-3.447-1.308-1.103-.972-1.554-2.241-1.603-3.13-.058-.906.198-1.435.346-1.418M125.04 106.255c-.212.537-2.193.224-4.538.441-2.348.171-4.252.803-4.548.309-.132-.237.21-.736.987-1.24.769-.503 1.988-.966 3.395-1.085 1.407-.114 2.686.144 3.527.514.849.369 1.268.806 1.177 1.061M143.326 108.43c-.364.443-1.723-.065-3.372-.132-1.647-.126-3.055.22-3.364-.262-.134-.234.098-.681.72-1.092.614-.41 1.63-.731 2.762-.666 1.132.068 2.104.504 2.665.984.57.48.749.952.589 1.168M100.183 116.332s-3.539 1.896-7.271 6.579c-2.295 2.88-3.787 6.604-3.214 10.243.795 5.041 5.168 8.629 9.23 11.717 2.342.34 4.083-2.243 4.45-4.582.365-2.337.037-4.864 1.144-6.955.993-1.877 2.956-3.026 4.264-4.697 2.436-3.109 2.27-7.483 1.676-11.388-.595-3.905.022-9.81 5.019-15.36 0 0-12.202 4.784-15.298 14.443",
      fill: "#17282f" }),

    React.createElement("path", {
      d: "M95.857 129.334c2.132-3.03 1.57-7.48-.855-10.283-2.425-2.802-6.355-4.024-10.046-3.706-2.69.23-5.407 1.284-7.145 3.35-1.737 2.067-2.263 5.244-.82 7.526.798 1.262 2.187 2.455 1.867 3.913-.309 1.404-1.969 1.936-3.149 2.757-2.063 1.434-2.863 4.333-2.072 6.718.792 2.385 2.991 4.172 5.44 4.737 2.448.564 5.081-.01 7.24-1.297-.014 2.243 2.409 3.957 4.644 3.766 2.235-.19 4.127-1.815 5.325-3.712 1.69-2.68 2.274-5.938 2.2-9.105-.074-3.167-.764-6.284-1.45-9.376",
      fill: "#17282f" }),

    React.createElement("path", {
      d: "M99.554 145.56c-.007.01-.12-.063-.33-.209l-.907-.657a51.242 51.242 0 01-3.213-2.578c-1.302-1.15-2.806-2.616-4.098-4.547-1.291-1.917-2.285-4.376-2.394-7.077-.042-1.343.14-2.675.607-3.865.451-1.196 1.165-2.225 1.955-3.076 1.607-1.695 3.4-2.786 4.817-3.776 1.44-.968 2.545-1.827 3.254-2.484.36-.324.622-.592.796-.78.178-.182.276-.275.286-.267.01.008-.07.117-.232.316-.156.204-.404.49-.751.834-.687.693-1.781 1.595-3.206 2.592-1.402 1.018-3.169 2.13-4.717 3.792-.762.835-1.44 1.828-1.868 2.976-.444 1.142-.617 2.425-.577 3.726.105 2.615 1.061 5.019 2.31 6.904 1.252 1.904 2.718 3.373 3.99 4.54 1.28 1.165 2.378 2.042 3.129 2.658l.863.711c.195.165.295.257.286.267",
      fill: "#33535f" }),

    React.createElement("path", {
      d: "M89.265 127.293c-.06.034-.429-.738-1.347-1.723-.901-.98-2.442-2.137-4.431-2.626-1.99-.485-3.892-.172-5.144.282-1.27.449-1.953.963-1.99.905-.014-.018.143-.163.459-.383a7.5 7.5 0 011.44-.764c1.264-.528 3.24-.902 5.322-.394 2.079.511 3.66 1.755 4.537 2.809.446.527.747 1 .924 1.342.178.341.25.542.23.552M78.035 131.127c-.04-.004.218-.694 1.16-1.284.464-.29 1.084-.525 1.79-.646.708-.125 1.49-.147 2.304-.13 1.635.042 3.094.34 4.114.647 1.023.309 1.617.6 1.6.643-.019.051-.641-.154-1.666-.394a20.526 20.526 0 00-4.059-.532c-1.6-.058-3.053.115-3.953.635-.914.494-1.241 1.1-1.29 1.061M75.63 142.567c-.002-.067 1.001-.044 2.57-.35a15.135 15.135 0 005.69-2.4 15.125 15.125 0 004.216-4.516c.828-1.366 1.152-2.316 1.214-2.291.022.007-.037.25-.19.678a12 12 0 01-.802 1.744c-.774 1.42-2.178 3.254-4.229 4.684-2.049 1.431-4.254 2.117-5.853 2.354-.804.123-1.462.158-1.914.153-.453-.005-.703-.034-.702-.056M89.966 127.067c.028-.033.425.378 1.308.862.872.486 2.302.962 4.1.9a9.411 9.411 0 002.86-.551c.986-.36 1.98-.915 2.905-1.653 1.867-1.47 3.436-3.641 4.605-6.125 1.168-2.496 1.916-5.034 2.666-7.315.734-2.288 1.493-4.33 2.319-5.96.815-1.635 1.67-2.854 2.332-3.63.326-.391.601-.678.796-.862.195-.185.3-.278.31-.269.023.023-.376.421-.996 1.22-.623.796-1.434 2.022-2.211 3.654-.787 1.629-1.514 3.66-2.231 5.95-.73 2.283-1.47 4.835-2.656 7.367-1.186 2.522-2.796 4.738-4.726 6.233a10.625 10.625 0 01-3.012 1.674 9.541 9.541 0 01-2.956.524c-1.848.031-3.306-.5-4.174-1.033a4.405 4.405 0 01-.566-.378 2.932 2.932 0 01-.386-.316c-.197-.183-.296-.282-.287-.292",
      fill: "#33535f" }),

    React.createElement("path", {
      d: "M110.508 114.095c.035.021-.254.422-.577 1.238-.325.816-.598 2.063-.704 3.635-.141 1.564-.083 3.475-.622 5.541-.548 2.05-1.802 4.138-3.67 5.73-1.853 1.612-4.13 2.52-6.246 2.692a11.638 11.638 0 01-5.508-.845 10.985 10.985 0 01-3.194-1.988 7.106 7.106 0 01-.72-.727c-.154-.175-.23-.271-.22-.28.03-.03.348.348 1.033.9.68.55 1.731 1.296 3.197 1.855 1.45.57 3.324.959 5.38.751 2.05-.186 4.242-1.071 6.04-2.634 1.812-1.544 3.036-3.562 3.585-5.544.54-1.992.515-3.9.688-5.473.14-1.583.457-2.854.83-3.667.187-.405.354-.71.493-.9.131-.194.205-.291.215-.284M151.976 132.23c-.024-.03.235-.22.611-.649a6.594 6.594 0 001.224-2.053 8.401 8.401 0 00.497-3.493c-.089-1.334-.516-2.775-1.196-4.17-1.386-2.802-3.294-4.949-4.54-6.59a17.773 17.773 0 01-1.364-2.038c-.283-.506-.407-.802-.388-.812.026-.014.192.259.51.738.316.479.795 1.156 1.444 1.953 1.288 1.59 3.248 3.727 4.666 6.59.696 1.43 1.13 2.918 1.203 4.308a8.362 8.362 0 01-.592 3.61c-.404.971-.94 1.652-1.36 2.055-.211.202-.385.347-.514.43-.126.09-.194.13-.201.121",
      fill: "#33535f" }),

    React.createElement("path", {
      d: "M149.902 136.325c-.07-.057.94-.783 1.733-2.502a8.045 8.045 0 00.691-3.194c.031-1.24-.27-2.593-.816-3.923-.538-1.337-1.275-2.508-1.883-3.622a85.428 85.428 0 01-1.56-2.974 41.68 41.68 0 01-.965-2.049c-.211-.492-.308-.772-.286-.782.024-.01.165.25.414.72l1.066 1.993c.455.838 1.002 1.833 1.624 2.929.616 1.092 1.375 2.276 1.928 3.648.56 1.361.865 2.777.814 4.067a7.944 7.944 0 01-.794 3.296 6.88 6.88 0 01-1.322 1.861c-.19.193-.35.327-.463.413-.11.087-.173.128-.181.119",
      fill: "#33535f" }),

    React.createElement("path", {
      d: "M99.5 118.19c4.791-8.18 11.498-15.791 20.72-17.993 9.22-2.203 18.63-.676 26.6 4.456V88.528l-11.512-37.16-8.974-4.73-21.191 12.105-5.484 44.697-.158 14.75",
      fill: "#f03d5f" }),

    React.createElement("path", {
      d: "M99.5 118.19l.159-14.75 5.484-44.697 21.19-12.104 8.975 4.73 11.512 37.16v16.124a36.636 36.636 0 00-.897-.56c-5.378-3.238-11.367-4.875-17.486-4.875-2.728 0-5.481.325-8.217.979a23.682 23.682 0 00-4.79 1.711c-.47.226-.933.468-1.388.723l-.19.106c-6.042 3.447-10.741 9.288-14.351 15.453",
      fill: "#f9b2c4" }),

    React.createElement("path", {
      d: "M146.369 89.112c-.007.011-.181-.07-.507-.239-.33-.16-.795-.436-1.431-.72a31.098 31.098 0 00-5.502-2.057 36.104 36.104 0 00-8.604-1.24 43.87 43.87 0 00-5.141.191c-1.778.182-3.617.408-5.413.986-3.604 1.145-6.8 2.904-9.5 4.758a33.35 33.35 0 00-6.466 5.802c-1.625 1.885-2.584 3.666-3.248 4.881l-.65 1.462c-.152.334-.236.508-.248.504-.012-.004.05-.186.179-.53.133-.342.317-.854.591-1.496.629-1.243 1.564-3.062 3.179-4.985 1.595-1.926 3.752-4.023 6.47-5.913 2.715-1.886 5.93-3.67 9.586-4.832 1.831-.588 3.703-.815 5.486-.992a43.277 43.277 0 015.184-.172c3.31.098 6.262.635 8.665 1.327a28.878 28.878 0 015.495 2.18c.629.304 1.085.6 1.403.782.317.189.478.293.472.303",
      fill: "#17282f" }),

    React.createElement("path", {
      d: "M132.368 84.797c-.1.017-1.601-8.475-3.353-18.963-1.753-10.492-3.093-19.008-2.993-19.025.099-.017 1.6 8.472 3.352 18.964 1.753 10.49 3.093 19.008 2.994 19.024M118.324 86.33c-.1-.002.058-8.06.355-17.994.296-9.937.618-17.988.718-17.985.102.003-.058 8.058-.355 17.996-.296 9.934-.617 17.987-.718 17.984M106.37 93.024c-.012 0-.014-.133-.008-.385l.046-1.098c.047-.955.137-2.334.272-4.037.265-3.405.728-8.102 1.378-13.273.652-5.172 1.367-9.838 1.954-13.203.29-1.683.546-3.041.736-3.977l.229-1.076c.056-.246.09-.373.103-.371.013.002 0 .134-.031.383l-.16 1.089c-.156.994-.365 2.346-.623 3.993a486.938 486.938 0 00-3.329 26.458l-.387 4.024c-.047.441-.084.803-.114 1.094-.03.25-.052.38-.066.38M134.411 87.516c.052.005.028.624-.037 1.622-.084 1.136-.178 2.446-.284 3.893l-.296 3.893c-.084.995-.152 1.612-.204 1.61-.05-.002-.071-.622-.055-1.623.019-1.001.078-2.383.191-3.908.114-1.522.26-2.897.39-3.89.133-.994.246-1.603.295-1.597",
      fill: "#17282f" }),

    React.createElement("path", {
      d: "M67.627 246.66c-.882-1.29-3.252-2.437-4.805-2.606-5.377-.587-10.277 1.728-14.512 5.092l-.833 1.515c-2.282 1.78-4.66 3.81-5.37 6.616-.71 2.806-.911 6.004-.97 8.898-.027 1.325.582 2.814 1.813 4.25.98 1.146 2.432 1.766 3.932 1.913 2.828.275 5.703-.472 8.193-1.84 2.491-1.367 4.617-3.333 6.42-5.529a31.474 31.474 0 006.55-13.962c.283-1.469.426-3.112-.418-4.347",
      fill: "#f03d5f" }),

    React.createElement("path", {
      d: "M48.058 272.394c-.392 0-.785-.018-1.176-.056-1.5-.147-2.953-.767-3.932-1.912a8.594 8.594 0 01-1.28-1.948c-1.63-13.298 9.871-24.27 19.633-24.27 1.184 0 2.343.16 3.448.499l-.393-.267c1.291.475 2.649 1.312 3.27 2.22.475.697.638 1.524.638 2.376-.001.658-.098 1.331-.22 1.971a31.474 31.474 0 01-6.55 13.962c-1.804 2.196-3.93 4.162-6.42 5.53-2.146 1.177-4.578 1.895-7.018 1.895",
      fill: "#9c2438" }),

    React.createElement("path", {
      d: "M67.045 167.553c-.843.281-42.781 59.722-43.906 63.658s-7.27 13.375 1.406 22.212c8.65 8.81 17.143 15.206 17.143 15.206-1.944-14.98 12.8-27.059 23.063-23.922l-7.872-5.343 17.995-23.898-7.829-47.913M154.193 179.977s6.598 8.246 8.248 13.59c1.41 4.564 8.886 25.67 8.886 25.67l13.625 33.767s-2.07 2.984-2.566 5.513c-.198 1.002-1.93 16.516-6.057 23.119l-21.855-9.77-2.754-19.562-3.762-16.912 3.894-45.38 2.34-10.035M92.855 158.976s5.622-5.17 7.156-5.893c0 0 1.778 6.063 6.975 8.935 5.196 2.872 8.589 5.965 8.589 6.375v7.521s-21.372-5.842-22.72-16.938",
      fill: "#f03d5f" }),

    React.createElement("path", {
      d: "M96.431 197.246L138 194.735l-1.92-23.744-1.81-4.026-2.813-5.049s-.1 2.582-1.964 4.61c-3.427 3.729-8.446 4.465-8.446 4.465l-.82 4.923-21.047-8.7s-2.748 28.665-2.748 29.349",
      fill: "#f03d5f" }),

    React.createElement("path", {
      d: "M121.046 170.991c.006 0-.004.11-.032.321l-.137.944c-.133.854-.324 2.082-.573 3.67l-.01.066-.067.002-17.099.524c-.92.025-1.86.052-2.821.08l-1.457.041c-.5.009-.965.022-1.419.183-.898.31-1.669 1.048-1.977 1.987-.168.474-.189.953-.163 1.49l.03 1.594.287 13.507c.318 13.142.522 25.044.462 33.66a595.07 595.07 0 01-.127 10.2l-.075 2.773-.029.72c-.009.163-.016.246-.022.246-.006 0-.011-.084-.016-.246-.001-.181-.003-.42-.007-.722l.007-2.773.012-10.199c-.007-8.613-.25-20.508-.57-33.651l-.272-13.51-.025-1.592c-.026-.512-.003-1.1.185-1.606.346-1.041 1.2-1.854 2.193-2.193.497-.176 1.04-.188 1.517-.194l1.457-.035 2.822-.068 17.103-.376-.077.067.648-3.659.177-.937c.043-.21.067-.315.075-.314",
      fill: "#17282f" }),

    React.createElement("path", {
      d: "M101.968 185.086a1.78 1.78 0 11-3.56 0 1.78 1.78 0 013.56 0",
      fill: "#17282f" }),

    React.createElement("path", {
      d: "M110.128 183.176c.012.107-2.004.368-4.437.936-2.436.558-4.361 1.209-4.398 1.108-.035-.087 1.853-.898 4.315-1.463 2.462-.575 4.514-.675 4.52-.58M107.145 186.705c-.033.1-1.397-.297-3.105-.652-1.707-.361-3.115-.544-3.106-.649.005-.096 1.447-.074 3.181.292 1.735.36 3.064.92 3.03 1.01M101.968 205.186a1.78 1.78 0 11-3.56 0 1.78 1.78 0 013.56 0",
      fill: "#17282f" }),

    React.createElement("path", {
      d: "M110.128 203.275c.012.107-2.004.368-4.437.936-2.436.559-4.361 1.21-4.398 1.108-.035-.087 1.853-.898 4.315-1.463 2.462-.574 4.514-.675 4.52-.58M107.145 206.804c-.033.1-1.397-.297-3.105-.651-1.707-.361-3.115-.545-3.106-.65.005-.096 1.447-.074 3.181.293 1.735.36 3.064.919 3.03 1.008M101.968 225.284a1.78 1.78 0 11-3.56 0 1.78 1.78 0 013.56 0",
      fill: "#17282f" }),

    React.createElement("path", {
      d: "M110.128 223.375c.012.106-2.004.367-4.437.935-2.436.559-4.361 1.21-4.398 1.109-.035-.087 1.853-.898 4.315-1.464 2.462-.573 4.514-.674 4.52-.58M107.145 226.904c-.033.1-1.397-.298-3.105-.652-1.707-.36-3.115-.544-3.106-.65.005-.095 1.447-.073 3.181.293 1.735.36 3.064.919 3.03 1.009M72.337 220.883c-.012-.003.022-.178.098-.507l.35-1.439c.31-1.247.77-3.048 1.297-5.284.524-2.234 1.106-4.906 1.56-7.905.454-2.994.751-6.325.642-9.816-.134-3.488-.733-6.788-1.663-9.664-.935-2.876-2.164-5.333-3.459-7.216-1.287-1.89-2.556-3.258-3.504-4.117-.452-.455-.861-.743-1.108-.974-.256-.221-.387-.343-.38-.353.008-.01.154.092.425.295.263.214.688.485 1.158.927.984.832 2.293 2.185 3.621 4.076 1.336 1.885 2.603 4.358 3.566 7.258.958 2.901 1.573 6.233 1.708 9.756.11 3.522-.199 6.874-.674 9.88-.474 3.01-1.085 5.683-1.642 7.914a166.779 166.779 0 01-1.41 5.26l-.416 1.421c-.099.323-.157.492-.169.488",
      fill: "#17282f" }),

    React.createElement("path", {
      d: "M71.691 220.27c-.024.005-.108-.326-.238-.932a38.51 38.51 0 01-.451-2.581c-.323-2.19-.597-5.247-.552-8.63.052-3.382.413-6.431.798-8.61.191-1.09.373-1.968.524-2.568.147-.601.24-.93.265-.925.024.005-.022.345-.125.953-.109.607-.252 1.49-.41 2.58a67.597 67.597 0 00-.688 8.576 67.565 67.565 0 00.444 8.59 83.11 83.11 0 00.335 2.59c.086.612.123.953.098.957M31.889 238.503c-.005-.031.39-.1 1.087-.273.694-.189 1.673-.542 2.816-1.132 1.146-.584 2.442-1.408 3.915-2.286 1.475-.85 3.164-1.814 5.165-2.146 2-.382 3.967.127 5.501.9 1.562.779 2.74 1.818 3.708 2.675.96.877 1.657 1.668 2.12 2.224.462.56.696.885.678.9-.02.017-.292-.278-.784-.805a28.779 28.779 0 00-2.186-2.128c-.982-.825-2.164-1.829-3.683-2.564-1.505-.736-3.38-1.208-5.293-.842-1.918.315-3.582 1.246-5.058 2.076-1.473.857-2.793 1.666-3.968 2.226-1.172.568-2.185.892-2.897 1.04-.356.08-.641.096-.83.123-.19.02-.29.025-.291.012",
      fill: "#17282f" }),

    React.createElement("path", {
      d: "M46.384 223.944c.01-.023.246.068.666.256.212.09.466.208.747.375.283.162.617.33.952.57.694.443 1.465 1.056 2.258 1.804a17.8 17.8 0 012.268 2.72 17.775 17.775 0 011.632 3.144c.386 1.02.652 1.968.792 2.78.092.402.119.774.16 1.098.044.324.056.604.057.835.01.46.003.712-.022.712-.071.005-.095-1.01-.447-2.593-.17-.792-.457-1.714-.851-2.707a19.111 19.111 0 00-1.624-3.067 19.111 19.111 0 00-2.2-2.682c-.764-.747-1.504-1.368-2.169-1.83-1.323-.937-2.25-1.35-2.22-1.415",
      fill: "#17282f" }),

    React.createElement("path", {
      d: "M56.435 239.089a48.247 48.247 0 00-1.927-2.12c.676.626 1.2 1.18 1.587 1.59l.166.18.174.35m-24.926-.67c-.549 0-1.08-.133-1.407-.552-.584-.75-.096-1.852.512-2.583a9.167 9.167 0 014.501-2.93c.905-.258 2.06-.59 2.161-1.526.045-.413-.153-.81-.195-1.224-.086-.844.517-1.645 1.277-2.026.627-.314 1.338-.396 2.045-.396.148 0 .297.004.445.01 6.295.245 12.278 4.377 14.735 10.177l.23.465.028.21a22.099 22.099 0 00-1.76-1.803c-.969-.857-2.146-1.896-3.708-2.674-1.175-.594-2.606-1.03-4.11-1.03-.458 0-.923.04-1.39.129-2.002.332-3.691 1.296-5.166 2.146-1.473.878-2.77 1.702-3.915 2.286-.828.427-1.57.73-2.18.937-.44.127-.885.232-1.338.311a4.449 4.449 0 01-.765.073m24.51-.169l-.104-.122c.001-.024.003-.051.003-.083l.102.205m-17.999-2.063c.59-.341 1.207-.709 1.854-1.085 1.476-.83 3.14-1.76 5.058-2.076a7.195 7.195 0 011.352-.127c1.13 0 2.219.255 3.192.639a8.261 8.261 0 00-2.49-.379c-2.27 0-4.549.851-6.626 1.855-.783.378-1.559.78-2.34 1.173",
      fill: "#9c2438" }),

    React.createElement("path", {
      d: "M56.261 238.739l-.166-.18a31.097 31.097 0 00-1.587-1.59c-1.466-1.498-3.092-2.814-5.031-3.431-.973-.384-2.061-.639-3.192-.639-.446 0-.898.04-1.352.127-1.918.315-3.582 1.246-5.058 2.076-.647.376-1.265.744-1.854 1.085-1.435.722-2.885 1.41-4.41 1.848.61-.207 1.353-.51 2.181-.937 1.146-.584 2.442-1.408 3.915-2.286 1.475-.85 3.164-1.814 5.165-2.146a7.44 7.44 0 011.391-.13c1.504 0 2.935.437 4.11 1.03 1.562.779 2.74 1.818 3.708 2.675.738.673 1.32 1.298 1.76 1.802.019.128.034.195.052.195.01 0 .018-.037.022-.11.036.042.07.083.105.122l.241.489",
      fill: "#0c1418" }),

    React.createElement("path", {
      d: "M55.893 238.238c-.018 0-.033-.067-.052-.195a12.58 12.58 0 01-.028-.209l.105.211c0 .032-.002.06-.003.083-.004.073-.011.11-.021.11",
      fill: "#0c1418" }),

    React.createElement("path", {
      d: "M147.958 235.392c.009.009-.081.114-.26.306l-.8.825c-.346.359-.777.79-1.304 1.263-.523.478-1.104 1.04-1.795 1.606-1.345 1.17-3.028 2.474-4.961 3.827a67.332 67.332 0 01-6.57 3.97 67.252 67.252 0 01-7.012 3.127c-2.215.816-4.246 1.452-5.976 1.888-.858.245-1.65.4-2.341.557-.69.162-1.29.27-1.783.35l-1.133.184c-.26.038-.397.053-.4.04-.002-.012.132-.05.387-.112.295-.065.664-.15 1.118-.25.488-.102 1.082-.23 1.765-.41.684-.176 1.47-.348 2.32-.607 1.715-.467 3.727-1.125 5.924-1.953a71.913 71.913 0 006.962-3.137 72.125 72.125 0 006.55-3.923c1.933-1.331 3.623-2.608 4.984-3.75.699-.55 1.29-1.096 1.824-1.557.538-.458.983-.873 1.343-1.216l.845-.774c.196-.175.304-.263.313-.254",
      fill: "#17282f" }),

    React.createElement("path", {
      d: "M154.474 189.371c.013.003-.003.165-.045.472l-.203 1.34-.776 4.92c-.64 4.155-1.486 9.903-2.358 16.26-.851 6.342-1.62 12.081-2.186 16.288l-.662 4.937-.194 1.34c-.05.306-.08.467-.092.464-.013-.001-.006-.164.018-.473l.128-1.349.547-4.951a796.795 796.795 0 012.08-16.307c.872-6.359 1.758-12.103 2.465-16.251.36-2.073.657-3.75.89-4.903l.27-1.328c.066-.302.106-.46.118-.459M130.79 258.564c-.02-.014.117-.252.38-.67a61.08 61.08 0 011.157-1.743 138.79 138.79 0 014.05-5.589 137.598 137.598 0 014.317-5.388c.57-.674 1.04-1.213 1.373-1.578.333-.365.527-.559.545-.543.02.016-.136.242-.436.634l-1.283 1.65a465.51 465.51 0 00-4.226 5.445 476.729 476.729 0 00-4.13 5.518l-1.25 1.675c-.3.393-.475.603-.496.589M175.842 243.994c-.012.026-.405-.153-1.12-.462-.713-.31-1.75-.752-3.062-1.207-2.608-.904-6.387-1.912-10.615-1.786-1.046.05-2.064.224-2.961.611-.901.382-1.678.948-2.328 1.576-1.3 1.272-2.087 2.753-2.628 4.02-.54 1.275-.864 2.357-1.105 3.096-.235.743-.371 1.152-.396 1.145-.024-.007.066-.428.26-1.184.2-.754.486-1.85 1.004-3.156.517-1.296 1.295-2.829 2.63-4.16.667-.659 1.475-1.258 2.422-1.664.947-.414 2.01-.596 3.085-.647 4.31-.129 8.112.935 10.72 1.907 1.31.49 2.337.97 3.035 1.32.35.171.615.32.795.42.18.101.27.16.264.171",
      fill: "#17282f" }),

    React.createElement("path", {
      d: "M170.604 233.008c.001.073-1.098.038-2.825.337-.865.142-1.876.408-2.967.788a20.14 20.14 0 00-3.385 1.621 20.217 20.217 0 00-2.985 2.278c-.835.8-1.531 1.579-2.051 2.284-1.051 1.403-1.52 2.398-1.586 2.363-.022-.01.085-.262.3-.71.104-.226.241-.497.43-.795.185-.3.377-.656.648-1.01.5-.735 1.189-1.548 2.027-2.375a18.936 18.936 0 013.026-2.345 18.902 18.902 0 013.464-1.628c1.119-.37 2.156-.614 3.038-.725.438-.08.842-.09 1.193-.118.352-.033.656-.031.904-.02.497.01.77.03.77.055",
      fill: "#17282f" }),

    React.createElement("path", {
      d: "M176.232 277.353c-.591-4.572-3.78-8.67-7.989-10.553-3.333-1.492-7.941-1.834-11.11-.017-3.168 1.816-7.408 6.34-6.552 9.89l7.271 12.213c3.657 2.807 9.098 2.912 12.97.409 3.87-2.503 6-7.37 5.41-11.942",
      fill: "#f03d5f" }),

    React.createElement("path", {
      d: "M164.59 291.087c-2.414 0-4.821-.73-6.738-2.2l-3.824-6.423-.205-.345-3.242-5.445a4.107 4.107 0 01-.112-.968c0-3.366 3.778-7.269 6.664-8.923 1.5-.86 3.32-1.236 5.177-1.236 2.067 0 4.178.467 5.933 1.253 4.208 1.882 7.398 5.981 7.989 10.553.065.509.098 1.021.097 1.534 0 .88-.097 1.76-.281 2.623-.674 3.144-2.527 6.04-5.227 7.785-1.842 1.191-4.04 1.792-6.231 1.792",
      fill: "#9c2438" }),

    React.createElement("path", {
      d: "M173.967 286.255c-.027-.017.255-.49.715-1.362.424-.889.987-2.22 1.256-3.96.257-1.728.237-3.88-.535-6.077-.164-.558-.427-1.09-.668-1.647-.294-.53-.572-1.085-.944-1.596-.709-1.039-1.569-2.04-2.612-2.879a12.928 12.928 .........完整代码请登录后点击上方下载按钮下载查看