const imgProperty1 = "https://www.figma.com/api/mcp/asset/d7e8a26f-8f20-4ceb-9d96-5a5a957ee950";
const imgUnion = "https://www.figma.com/api/mcp/asset/312a0cc5-3273-4682-92b4-5877608aed5c";
const img = "https://www.figma.com/api/mcp/asset/2d3acf26-0e79-4836-b954-05d2a91a33a3";
const img1 = "https://www.figma.com/api/mcp/asset/9337f60d-883c-46a6-8198-8555aff43851";
const imgGroup1597881806 = "https://www.figma.com/api/mcp/asset/9c9ca8a3-e505-4745-8bba-7ba092246583";
const img2 = "https://www.figma.com/api/mcp/asset/8cf1a951-129e-4c4a-80bf-ea81bb242391";
const img3 = "https://www.figma.com/api/mcp/asset/112341aa-05bd-4e94-add1-44f1dfec3e91";
const img4 = "https://www.figma.com/api/mcp/asset/99633dce-4161-4261-9e85-f3bb4c3b4c7b";
const img5 = "https://www.figma.com/api/mcp/asset/5f6c3462-db90-44a0-9d19-004eafadf0f4";
const imgGroup1597881805 = "https://www.figma.com/api/mcp/asset/9b550072-1c83-450f-8df3-416678fb9924";
const img6 = "https://www.figma.com/api/mcp/asset/13fe10f2-23f0-45dc-8741-9096c96e15f7";
const img7 = "https://www.figma.com/api/mcp/asset/0b96397c-6794-48df-ba81-bc494e6dbaa3";
const imgUnion1 = "https://www.figma.com/api/mcp/asset/78e76d06-0a77-42fa-80a5-19b7a9615bc3";
const imgUnion2 = "https://www.figma.com/api/mcp/asset/b3acd964-7992-496f-9902-ba907628a29b";
const imgUnion3 = "https://www.figma.com/api/mcp/asset/c55d096e-75a2-4909-b62c-c84e6a31a96f";
const imgUnion4 = "https://www.figma.com/api/mcp/asset/ddceb7e5-b5c2-40f2-a821-6a6909da1025";
const imgUnion5 = "https://www.figma.com/api/mcp/asset/1b59cf32-811a-49d6-be63-b644ad88047a";
const imgUnion6 = "https://www.figma.com/api/mcp/asset/bad982d6-6b66-421f-9c6f-f524e706d941";
const imgUnion7 = "https://www.figma.com/api/mcp/asset/728cb986-5f47-43d2-be90-b2535304d3f8";
const imgUnion8 = "https://www.figma.com/api/mcp/asset/b15af3c0-a5a4-4e1e-a86f-facb1ffbd38e";
const imgUnion9 = "https://www.figma.com/api/mcp/asset/7606782a-27fc-4681-8c23-985e787c1698";
const imgUnion10 = "https://www.figma.com/api/mcp/asset/7111cd2f-44f3-4b0f-a1d7-1165d338f71b";
const imgUnion11 = "https://www.figma.com/api/mcp/asset/c15327da-51b3-4e45-a39e-a1e3a97405ab";
const imgUnion12 = "https://www.figma.com/api/mcp/asset/15510633-94a7-4e8e-9177-abba13250b9a";
const imgUnion13 = "https://www.figma.com/api/mcp/asset/30ece914-7c6f-4d2b-ac64-f61b6cef0978";
const imgUnion14 = "https://www.figma.com/api/mcp/asset/b72aafd1-638a-4c6a-8829-44f39f645ad6";
const imgUnion15 = "https://www.figma.com/api/mcp/asset/fc070e41-f0dc-42e9-bca5-27138bdc9a1e";
const imgUnion16 = "https://www.figma.com/api/mcp/asset/c133d60a-5bb0-4e73-9a15-e6a0f5cc6d8b";
const imgUnion17 = "https://www.figma.com/api/mcp/asset/58930ab8-4a9a-477b-9bec-41f2cd22cdb5";
const img8 = "https://www.figma.com/api/mcp/asset/3d7c9841-ac0f-451a-bb41-1c598ba9eb1f";
const imgGroup1158 = "https://www.figma.com/api/mcp/asset/2b455234-fbca-47b7-b55d-66d26aa4df8a";
const img9 = "https://www.figma.com/api/mcp/asset/cf94951d-f067-46ef-9458-3984d322915a";
const img10 = "https://www.figma.com/api/mcp/asset/cc6d0085-447a-4403-8194-d3aa0cf709ec";
type TextProps = {
  className?: string;
  propValue?: "24px" | "26px" | "34px";
  propValue1?: "特粗";
  propValue2?: "左对齐" | "右对齐" | "居中对齐";
};

function Text({ className, propValue = "34px", propValue1 = "特粗", propValue2 = "左对齐" }: TextProps) {
  if (propValue === "24px" && propValue1 === "特粗" && propValue2 === "左对齐") {
    return (
      <div className={className} data-name="字号=24px, 字重=特粗, 位置=左对齐" data-node-id="632:88182">
        <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[24px] text-white whitespace-nowrap" data-node-id="632:88183">
          <p className="leading-[32px]">Text line-24px</p>
        </div>
      </div>
    );
  }
  if (propValue === "26px" && propValue1 === "特粗" && propValue2 === "左对齐") {
    return (
      <div className={className} data-name="字号=26px, 字重=特粗, 位置=左对齐" data-node-id="635:42943">
        <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[26px] text-white whitespace-nowrap" data-node-id="635:42944">
          <p className="leading-[32px]">Text line-26px</p>
        </div>
      </div>
    );
  }
  if (propValue === "34px" && propValue1 === "特粗" && propValue2 === "居中对齐") {
    return (
      <div className={className} data-name="字号=34px, 字重=特粗, 位置=居中对齐" data-node-id="635:42955">
        <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[34px] text-center text-white whitespace-nowrap" data-node-id="635:42956">
          <p className="leading-[32px]">Text line-34px</p>
        </div>
      </div>
    );
  }
  if (propValue === "34px" && propValue1 === "特粗" && propValue2 === "右对齐") {
    return (
      <div className={className} data-name="字号=34px, 字重=特粗, 位置=右对齐" data-node-id="635:42959">
        <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[34px] text-right text-white whitespace-nowrap" data-node-id="635:42960">
          <p className="leading-[32px]">Text line-34px</p>
        </div>
      </div>
    );
  }
  return (
    <div className={className} data-name="字号=34px, 字重=特粗, 位置=左对齐" data-node-id="635:42949">
      <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[34px] text-white whitespace-nowrap" data-node-id="635:42950">
        <p className="leading-[32px]">Text line-34px</p>
      </div>
    </div>
  );
}

function Component({ className }: { className?: string }) {
  return (
    <div className={className} data-name="数据样式" data-node-id="1201:47976">
      <div className="absolute bg-gradient-to-b border-2 border-[#5e697e] border-solid from-[#474e60] inset-0 rounded-[6px] to-[#2b2f39]" data-name="11" data-node-id="1201:47971" />
      <div className="absolute flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] inset-[16.16%_13.74%] justify-center leading-[0] not-italic text-[60px] text-center text-white tracking-[6px]" data-node-id="1201:47972">
        <p className="leading-[normal] whitespace-pre-wrap">6</p>
      </div>
    </div>
  );
}
type iconProps = {
  className?: string;
  property1?: "油脂" | "泛盐" | "粮食" | "鲜食";
};

function icon({ className, property1 = "粮食" }: iconProps) {
  return (
    <div className={className} data-name="Property 1=粮食" data-node-id="1201:31235">
      <div className="absolute inset-[13%_21.7%]" data-name="Union" data-node-id="1198:61730">
        <img alt="" className="block max-w-none size-full" src={imgUnion} />
      </div>
    </div>
  );
}
type Component1Props = {
  className?: string;
  property1?: "上";
};

function Component1({ className, property1 = "上" }: Component1Props) {
  return (
    <div className={className} data-name="Property 1=上" data-node-id="1201:48133">
      <div className="absolute content-stretch flex flex-col gap-[40px] h-[944px] items-center justify-center left-0 right-[37.7%] top-1/2 translate-y-[-50%]" data-name="导航内容" data-node-id="1201:47870">
        <div className="bg-[rgba(255,255,255,0.05)] box-border content-stretch flex flex-col gap-[20px] h-[220px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[60px]" data-name="111" data-node-id="1201:47862">
          <icon className="overflow-clip relative shrink-0 size-[50px]" />
          <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" data-name="text" data-node-id="1201:47859">
            <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[32px] not-italic relative shrink-0 text-[26px] text-white whitespace-nowrap" data-node-id="I1201:47859;635:42944">
              <p className="mb-0">粮</p>
              <p className="mb-0">&nbsp;</p>
              <p>食</p>
            </div>
          </div>
        </div>
        <div className="box-border content-stretch flex flex-col gap-[20px] h-[220px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[60px]" data-name="222" data-node-id="1201:47864">
          <div className="overflow-clip relative shrink-0 size-[50px]" data-name="产业icon" data-node-id="1201:47865">
            <div className="absolute inset-[13%_26.2%]" data-name="Vector" data-node-id="I1201:47865;1200:31218">
              <div className="absolute inset-0" style={{ "--fill-0": "rgba(255, 255, 255, 1)" } as React.CSSProperties}>
                <img alt="" className="block max-w-none size-full" src={img} />
              </div>
            </div>
          </div>
          <div className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" data-name="text" data-node-id="1201:47866">
            <div className="flex flex-col font-['HarmonyOS_Sans_SC:Bold',sans-serif] justify-center leading-[32px] not-italic relative shrink-0 text-[26px] text-[rgba(255,255,255,0.5)] whitespace-nowrap" data-node-id="I1201:47866;635:42944">
              <p className="mb-0">油</p>
              <p className="mb-0">&nbsp;</p>
              <p>脂</p>
            </div>
          </div>
        </div>
      </div>
      <div className="absolute bottom-0 flex items-center justify-center left-[25.05%] right-0 top-0">
        <div className="flex-none h-[1078.893px] rotate-[180deg] scale-y-[-100%] w-[113.088px]">
          <div className="relative size-full" data-name="光标左侧" data-node-id="1201:48121">
            <div className="absolute bottom-[-0.04%] left-0 right-0 top-[-0.04%]">
              <img alt="" className="block max-w-none size-full" src={img1} />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Component2({ className }: { className?: string }) {
  return (
    <div className={className} data-name="弹出框样式2" data-node-id="741:54163">
      <div className="flex h-[calc(1px*((var(--transform-inner-width)*1)+(var(--transform-inner-height)*0)))] items-center justify-center leading-[0] relative shrink-0 w-[calc(1px*((var(--transform-inner-height)*1)+(var(--transform-inner-width)*0)))]">
        <div className="flex-none rotate-[90deg] scale-y-[-100%]">
          <div className="grid-cols-[max-content] grid-rows-[max-content] inline-grid justify-items-start relative" data-node-id="1207:33739">
            <div className="col-[1] h-[80px] ml-[7.5px] mt-[17px] relative row-[1] w-[2px]" data-node-id="1207:33513">
              <div className="absolute bottom-[-1.25%] left-0 right-[-50%] top-[-1.25%]">
                <img alt="" className="block max-w-none size-full" src={imgGroup1597881806} />
              </div>
            </div>
            <div className="col-[1] ml-0 mt-0 relative row-[1] size-[17px]" data-name="圆圈圈" data-node-id="741:53539">
              <img alt="" className="block max-w-none size-full" src={img2} />
            </div>
          </div>
        </div>
      </div>
      <div className="h-[320px] relative shrink-0 w-[476px]" data-name="框" data-node-id="741:53541">
        <div className="absolute inset-[-0.06%_-0.09%_-0.06%_-0.04%]">
          <img alt="" className="block max-w-none size-full" src={img3} />
        </div>
      </div>
    </div>
  );
}

function Component3({ className }: { className?: string }) {
  return (
    <div className={className} data-name="定位点/产业链" data-node-id="1205:31870">
      <div className="absolute inset-[10%_13.79%]" data-name="底部" data-node-id="1201:48987">
        <img alt="" className="block max-w-none size-full" src={img4} />
      </div>
      <div className="absolute bottom-[40.42%] left-1/4 overflow-clip right-1/4 shadow-[0px_0px_6px_0px_#4593ff] top-[17.92%]" data-name="产业链" data-node-id="1205:31863">
        <div className="absolute inset-[5.36%_10.72%]" data-name="Union" data-node-id="I1205:31863;1205:31861">
          <img alt="" className="block max-w-none size-full" src={img5} />
        </div>
        <div className="absolute inset-0 pointer-events-none shadow-[inset_0px_0px_3px_0px_#ffffff]" />
      </div>
    </div>
  );
}

function Component4({ className }: { className?: string }) {
  return (
    <div className={className} data-name="定位点/基地" data-node-id="1205:31871">
      <div className="absolute inset-[12.5%_8.66%]" data-node-id="1205:32108">
        <img alt="" className="block max-w-none size-full" src={imgGroup1597881805} />
      </div>
      <div className="absolute inset-[27.5%_23%] overflow-clip" data-name="产业icon" data-node-id="1204:31851">
        <div className="absolute inset-[13%_21.7%]" data-name="Union" data-node-id="I1204:31851;1198:61730">
          <div className="absolute inset-[-20.02%_-26.17%]">
            <img alt="" className="block max-w-none size-full" src={img6} />
          </div>
        </div>
      </div>
    </div>
  );
}

function Component5({ className }: { className?: string }) {
  return (
    <div className={className} data-name="边" data-node-id="84:21868">
      <img alt="" className="block max-w-none size-full" src={img7} />
    </div>
  );
}

function Component6({ className }: { className?: string }) {
  return (
    <div className={className} data-name="线" data-node-id="84:21850">
      <div className="absolute inset-[45.14%_13.47%_22.05%_68.8%]" data-name="Union" data-node-id="84:21851">
        <div className="absolute inset-[-0.28%_-0.28%_-0.27%_-0.35%]">
          <img alt="" className="block max-w-none size-full" src={imgUnion1} />
        </div>
      </div>
      <div className="absolute inset-[69.45%_7.91%_11.34%_79.45%]" data-name="Union" data-node-id="84:21852">
        <div className="absolute inset-[-0.36%_-0.44%_-0.33%_-0.45%]">
          <img alt="" className="block max-w-none size-full" src={imgUnion2} />
        </div>
      </div>
      <div className="absolute bottom-[58.34%] left-[13.82%] right-[58.52%] top-0" data-name="Union" data-node-id="84:21853">
        <div className="absolute inset-[-0.16%_-0.17%_-0.16%_-0.25%]">
          <img alt="" className="block max-w-none size-full" src={imgUnion3} />
        </div>
      </div>
      <div className="absolute inset-[40.22%_52.11%_21.49%_24.35%]" data-name="Union" data-node-id="84:21854">
        <div className="absolute inset-[-0.17%_-0.21%_-0.2%_-0.28%]">
          <img alt="" className="block max-w-none size-full" src={imgUnion4} />
        </div>
      </div>
      <div className="absolute inset-[15.1%_38.74%_51.84%_30.9%]" data-name="Union" data-node-id="84:21855">
        <div className="absolute inset-[-0.2%_-0.17%_-0.22%_-0.17%]">
          <img alt="" className="block max-w-none size-full" src={imgUnion5} />
        </div>
      </div>
      <div className="absolute inset-[62.63%_13.38%_23.24%_79.12%]" data-name="Union" data-node-id="84:21856">
        <div className="absolute inset-[-0.45%_-0.62%_-0.6%_-0.65%]">
          <img alt="" className="block max-w-none size-full" src={imgUnion6} />
        </div>
      </div>
      <div className="absolute inset-[39.2%_33.9%_32.16%_45.04%]" data-name="Union" data-node-id="84:21857">
        <div className="absolute inset-[-0.26%_-0.43%_-0.35%_-0.33%]">
          <img alt="" className="block max-w-none size-full" src={imgUnion7} />
        </div>
      </div>
      <div className="absolute inset-[33.43%_19.83%_31.88%_63.81%]" data-name="Union" data-node-id="84:21858">
        <div className="absolute inset-[-0.19%_-0.36%_-0.2%_-0.31%]">
          <img alt="" className="block max-w-none size-full" src={imgUnion8} />
        </div>
      </div>
      <div className="absolute inset-[61.63%_26.15%_9.48%_37%]" data-name="Union" data-node-id="84:21859">
        <div className="absolute inset-[-0.27%_-0.13%_-0.27%_-0.21%]">
          <img alt="" className="block max-w-none size-full" src={imgUnion9} />
        </div>
      </div>
      <div className="absolute bottom-[16.35%] left-[77.75%] right-0 top-[39.25%]" data-name="Union" data-node-id="84:21860">
        <div className="absolute inset-[-0.15%_-0.22%]">
          <img alt="" className="block max-w-none size-full" src={imgUnion10} />
        </div>
      </div>
      <div className="absolute bottom-0 left-[66.67%] right-[14.92%] top-[70.14%]" data-name="Union" data-node-id="84:21861">
        <div className="absolute inset-[-0.22%_-0.27%_-0.22%_-0.26%]">
          <img alt="" className="block max-w-none size-full" src={imgUnion11} />
        </div>
      </div>
      <div className="absolute inset-[19.86%_25.75%_54.08%_56.23%]" data-name="Union" data-node-id="84:21862">
        <div className="absolute inset-[-0.28%_-0.27%_-0.49%_-0.27%]">
          <img alt="" className="block max-w-none size-full" src={imgUnion12} />
        </div>
      </div>
      <div className="absolute bottom-[2%] left-0 right-[70.7%] top-[44.26%]" data-name="Union" data-node-id="84:21863">
        <div className="absolute inset-[-0.12%_-0.16%_-0.14%_-0.18%]">
          <img alt="" className="block max-w-none size-full" src={imgUnion13} />
        </div>
      </div>
      <div className="absolute inset-[64.64%_29.68%_24.46%_58.95%]" data-name="Union" data-node-id="84:21864">
        <div className="absolute inset-[-0.59%_-0.41%_-0.67%_-0.42%]">
          <img alt="" className="block max-w-none size-full" src={imgUnion14} />
        </div>
      </div>
      <div className="absolute inset-[61.94%_39.82%_24.69%_53.29%]" data-name="Union" data-node-id="84:21865">
        <div className="absolute inset-[-0.64%_-0.74%_-0.48%_-0.82%]">
          <img alt="" className="block max-w-none size-full" src={imgUnion15} />
        </div>
      </div>
      <div className="absolute inset-[55.88%_34.28%_31.77%_54.46%]" data-name="Union" data-node-id="84:21866">
        <div className="absolute inset-[-0.54%_-0.41%_-0.57%_-0.41%]">
          <img alt="" className="block max-w-none size-full" src={imgUnion16} />
        </div>
      </div>
      <div className="absolute inset-[33.35%_66.33%_53.33%_20.28%]" data-name="Union" data-node-id="84:21867">
        <div className="absolute inset-[-0.55%_-0.49%_-0.53%_-0.4%]">
          <img alt="" className="block max-w-none size-full" src={imgUnion17} />
        </div>
      </div>
    </div>
  );
}

function Component7({ className }: { className?: string }) {
  return (
    <div className={className} data-name="导航底框" data-node-id="631:36462">
      <div className="absolute bottom-[18.95%] left-0 right-0 top-0" data-name="1" data-node-id="631:36440">
        <div className="absolute inset-[-181.3%_-19.68%_-413.77%_-19.68%]">
          <img alt="" className="block max-w-none size-full" src={img8} />
        </div>
      </div>
      <div className="absolute bottom-0 left-[27.44%] right-[27.44%] top-[62.9%]" data-node-id="631:36441">
        <div className="absolute inset-[-257.75%_-17.4%]">
          <img alt="" className="block max-w-none size-full" src={imgGroup1158} />
        </div>
      </div>
    </div>
  );
}

function Component8({ className }: { className?: string }) {
  return (
    <div className={className} data-name="底部网格" data-node-id="631:69869">
      <div className="absolute bottom-[-71.42%] content-stretch flex flex-col items-start left-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[0px_175.624px] mask-size-[1920px_1080px] right-0 top-[-16.26%]" data-name="底部内容" data-node-id="631:69865" style={{ maskImage: `url('${img9}')` }}>
        <div className="h-[1013.464px] relative shrink-0 w-[1920px]" data-name="网格" data-node-id="631:69866">
          <img alt="" className="block max-w-none size-full" src={img10} />
        </div>
        <div className="h-[1013.464px] relative shrink-0 w-[1920px]" data-name="网格" data-node-id="631:69867">
          <img alt="" className="block max-w-none size-full" src={img10} />
        </div>
      </div>
    </div>
  );
}
type Component9Props = {
  className?: string;
  property1?: "供应链专用界面";
};

function Component9({ className, property1 = "供应链专用界面" }: Component9Props) {
  return (
    <div className={className} data-name="Property 1=供应链专用界面" data-node-id="1486:134453">
      <div aria-hidden="true" className="absolute inset-0 pointer-events-none">
        <img alt="" className="absolute max-w-none object-50%-50% object-cover size-full" src={imgProperty1} />
        <div className="absolute bg-[rgba(0,79,154,0.1)] inset-0" />
      </div>
      <div className="absolute contents left-0 top-0" data-node-id="1486:133993" />
    </div>
  );
}

export default function Component10() {
  return (
    <div className="bg-[rgba(33,33,33,0.6)] relative size-full" data-name="操控屏-4-鲜食 • 泛盐-泛盐首页-基地弹出数据" data-node-id="1443:80521">
      <div className="absolute contents left-0 top-0" data-name="我是底部" data-node-id="I1443:80521;1412:199413">
        <Component9 className="absolute h-[1080px] left-0 overflow-clip top-0 w-[1920px]" />
        <Component8 className="absolute h-[1080px] left-0 top-0 w-[1920px]" />
        <Component7 className="absolute h-[71.119px] left-[526.95px] top-[40px] w-[866.265px]" />
        <Text className="absolute box-border content-stretch flex gap-[10px] items-center justify-center left-1/2 px-0 py-[4px] top-[40px] translate-x-[-50%]" propValue2="居中对齐" />
      </div>
      <div className="absolute content-stretch flex flex-col gap-[10px] items-end right-[80px] top-[150px]" data-name="1+！" data-node-id="I1443:80521;1412:199419">
        <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
        <Text className="box-border content-stretch flex gap-[10px] h-[77px] items-center justify-end px-0 py-[4px] relative shrink-0 w-full" propValue2="右对齐" />
        <Text className="box-border content-stretch flex gap-[10px] items-center justify-end px-0 py-[4px] relative shrink-0" propValue2="右对齐" />
      </div>
      <div className="absolute contents left-[529.88px] top-[calc(50%+33.79px)] translate-y-[-50%]" data-name="地图" data-node-id="I1443:80521;1412:206775">
        <div className="absolute contents left-[27.6%] right-[4.17%] top-[calc(50%+33.79px)] translate-y-[-50%]" data-name="地图" data-node-id="I1443:80521;1412:206776">
          <Component6 className="absolute inset-[19.27%_4.17%_13.01%_27.6%]" />
          <Component5 className="absolute h-[731.454px] left-[27.6%] right-[4.17%] top-[calc(50%+33.79px)] translate-y-[-50%]" />
        </div>
        <Component4 className="absolute h-[48px] left-[985px] top-[610.22px] w-[40px]" />
        <Component4 className="absolute h-[48px] left-[1125.81px] top-[409.52px] w-[40px]" />
        <Component4 className="absolute h-[48px] left-[1229.57px] top-[570px] w-[40px]" />
        <Component4 className="absolute h-[48px] left-[1445px] top-[560.35px] w-[40px]" />
        <Component3 className="absolute h-[48px] left-[949.08px] top-[680.31px] w-[40px]" />
        <Component3 className="absolute h-[48px] left-[1178.36px] top-[418.4px] w-[40px]" />
        <Component3 className="absolute h-[72px] left-[1319.74px] top-[441.51px] w-[60px]" />
        <Component3 className="absolute h-[48px] left-[1403.37px] top-[603.77px] w-[40px]" />
      </div>
      <div className="absolute bottom-[80px] content-stretch flex items-center left-1/2 translate-x-[-50%]" data-name="说明" data-node-id="I1443:80521;1412:206787">
        <div className="box-border content-stretch flex gap-[20px] h-[54px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[202px]" data-name="111" data-node-id="I1443:80521;1412:206788">
          <Component4 className="h-[50px] relative shrink-0 w-[41.667px]" />
          <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="26px" />
        </div>
        <div className="box-border content-stretch flex gap-[20px] h-[54px] items-center justify-center px-[20px] py-0 relative rounded-[10px] shrink-0 w-[202px]" data-name="112" data-node-id="I1443:80521;1412:206791">
          <Component3 className="h-[50px] relative shrink-0 w-[41.667px]" />
          <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="26px" />
        </div>
      </div>
      <div className="absolute h-[351px] left-[739.74px] overflow-clip top-[462.7px] w-[580px]" data-name="基地弹出框" data-node-id="I1443:80521;1412:199442">
        <div className="absolute flex items-center justify-center left-0 top-0">
          <div className="flex-none rotate-[180deg] scale-y-[-100%]">
            <Component2 className="content-stretch flex items-start overflow-clip relative" />
          </div>
        </div>
        <div className="absolute content-stretch flex flex-col gap-[10px] items-center left-[30px] top-[calc(50%+-2.5px)] translate-y-[-50%] w-[420px]" data-name="粮食源头" data-node-id="I1443:80521;1701:138931">
          <div className="content-stretch flex flex-col gap-[10px] items-start relative shrink-0 w-full" data-node-id="I1443:80521;1701:138932">
            <Text className="box-border content-stretch flex gap-[10px] h-[62px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
            <Text className="box-border content-stretch flex gap-[10px] h-[62px] items-center px-0 py-[4px] relative shrink-0 w-full" propValue="24px" />
          </div>
          <div className="content-stretch flex flex-col gap-[10px] items-start relative shrink-0 w-full" data-node-id="I1443:80521;1701:138935">
            <div className="content-stretch flex gap-[20px] items-start relative shrink-0" data-node-id="I1443:80521;1701:138936">
              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" />
              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
            </div>
            <div className="content-stretch flex gap-[20px] items-start relative shrink-0" data-node-id="I1443:80521;1701:138940">
              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" />
              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
            </div>
          </div>
        </div>
      </div>
      <Component1 className="absolute h-[1078.893px] left-[40px] top-[0.43px] w-[150.879px]" />
      <div className="absolute content-stretch flex flex-col gap-[11px] items-start left-[199.88px] top-[calc(50%+4.02px)] translate-y-[-50%] w-[330px]" data-name="组合1" data-node-id="I1443:80521;1495:45348">
        <Text className="box-border content-stretch flex gap-[10px] h-[80px] items-center px-[26px] py-[4px] relative shrink-0 w-full" />
        <div className="box-border content-stretch flex flex-col h-[700px] items-center justify-between px-0 py-[20px] relative shrink-0 w-full" data-node-id="I1443:80521;1495:45350">
          <div className="box-border content-stretch flex flex-col gap-[20px] items-start px-0 py-[20px] relative shrink-0 w-[278px]" data-name="总产值达" data-node-id="I1443:80521;1495:45351">
            <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0 w-full" />
            <div className="content-stretch flex gap-[10px] h-[80px] items-end relative shrink-0 w-full" data-name="数据金额" data-node-id="I1443:80521;1495:45353">
              <div className="content-stretch flex gap-[6px] items-center relative shrink-0" data-name="1" data-node-id="I1443:80521;1495:45354">
                <Component className="h-[80px] relative shrink-0 w-[53.333px]" />
                <Component className="h-[80px] relative shrink-0 w-[53.333px]" />
              </div>
              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
            </div>
          </div>
          <div className="box-border content-stretch flex flex-col gap-[20px] items-start px-0 py-[20px] relative shrink-0 w-[278px]" data-name="总产值达" data-node-id="I1443:80521;1495:45360">
            <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0 w-full" />
            <div className="content-stretch flex gap-[10px] h-[80px] items-end relative shrink-0 w-full" data-name="数据金额" data-node-id="I1443:80521;1495:45362">
              <div className="content-stretch flex gap-[6px] items-center relative shrink-0" data-name="1" data-node-id="I1443:80521;1495:45363">
                <Component className="h-[80px] relative shrink-0 w-[53.333px]" />
              </div>
              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
            </div>
          </div>
          <div className="box-border content-stretch flex flex-col gap-[20px] items-start px-0 py-[20px] relative shrink-0 w-[278px]" data-name="总产值达" data-node-id="I1443:80521;1495:45368">
            <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0 w-full" />
            <div className="content-stretch flex gap-[10px] h-[80px] items-end relative shrink-0 w-full" data-name="数据金额" data-node-id="I1443:80521;1495:45370">
              <div className="content-stretch flex gap-[6px] items-center relative shrink-0" data-name="1" data-node-id="I1443:80521;1495:45371">
                <Component className="h-[80px] relative shrink-0 w-[53.333px]" />
              </div>
              <Text className="box-border content-stretch flex gap-[10px] items-center px-0 py-[4px] relative shrink-0" propValue="24px" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
SUPER CRITICAL: The generated React+Tailwind code MUST be converted to match the target project's technology stack and styling system.
1. Analyze the target codebase to identify: technology stack, styling approach, component patterns, and design tokens
2. Convert React syntax to the target framework/library
3. Transform all Tailwind classes to the target styling system while preserving exact visual design
4. Follow the project's existing patterns and conventions
DO NOT install any Tailwind as a dependency unless the user instructs you to do so.

Node ids have been added to the code as data attributes, e.g. `data-node-id="1:2"`.
These styles are contained in the design: 文字颜色/2-100%白色: #FFFFFF, 文字颜色/3-50%白色: #FFFFFF, 渐变/2-蓝色: , 主色/主色-2亮绿: #00FFFF, 边框-蓝色: #133BA0, 主色/icon色: , 主色/产业-泛盐: #92A5FE, 主色/产业-畜牧: #F593A5, 文字颜色/4-30%白色: #FFFFFF.
Images and SVGs will be stored as constants, e.g. const image = 'https://www.figma.com/api/mcp/asset/550e8400-e29b-41d4-a716-446655440000'. These constants will be used in the code as the source for the image, ex: <img src={image} />. Image assets are stored on a remote server for 7 days and can be fetched using the provided URLs until they expire.
IMPORTANT: After you call this tool, you MUST call get_screenshot to get a screenshot of the node for context.