feat: self adjusted

src/App.css

@@ -7,6 +7,11 @@
     transition: 0.5s;
 }
 
+#root {
+    overflow: hidden;
+    width: 100vw;
+}
+
 .overlap>* {
     transition: 0.5s;
 }

src/App.tsx

@@ -1,10 +1,34 @@
-import React from "react";
+import React, { useState } from "react";
 import "./App.css";
 
-export  default function App () {
+export default function App() {
+  const designWidth = 1430;
+  const designHeight = 5550;
+  const [scale, setScale] = useState(window.innerWidth / designWidth);
+  const innerWidth = document.body.clientWidth;
+
   return (
-    <div className="desktop-template">
-    <div className="div">
+    <div
+      style={{
+        width: designWidth * scale + "px",
+        height: designHeight * scale + "px",
+        overflow: "hidden",
+        position: "relative"
+      }}
+      className="desktop-template">
+      <div onResize={() => {
+        setScale(innerWidth / designWidth);
+      }}
+        style={{
+          position: "absolute",
+          top: -60 * scale + "px",
+          left: 0,
+          transform: `scale(${scale})`,
+          height: '5640px',
+          width: '1440px',
+          transformOrigin: "left top",
+          backgroundSize: "100% 100%",
+        }} className="div">
         <div className="overlap">
           <div className="rectangle" />
           <img className="img" alt="Rectangle" src="https://c.animaapp.com/H8eCsQjb/img/rectangle-163.png" />
@@ -105,7 +129,7 @@ export  default function App () {
           </p>
           <div className="overlap-wrapper">
             <div className="overlap-group">
-            <div className="text-wrapper-13" onClick={()=>{
+              <div className="text-wrapper-13" onClick={() => {
                 window.location.replace('https://kaozr59ke4i.feishu.cn/share/base/form/shrcn8lBYjw4RpFVTth7CTOacZd?ccm_open_type=form_v1_link_share')
               }}>预约使用</div>
               <img className="arrow-2" alt="Arrow" src="https://c.animaapp.com/H8eCsQjb/img/arrow-2.svg" />
@@ -136,7 +160,7 @@ export  default function App () {
             <p className="div-3">
             </p>
             <div className="div-wrapper">
-            <div className="text-wrapper-17" onClick={()=>{
+              <div className="text-wrapper-17" onClick={() => {
                 window.location.replace('https://kaozr59ke4i.feishu.cn/share/base/form/shrcn8lBYjw4RpFVTth7CTOacZd?ccm_open_type=form_v1_link_share')
               }}>
                 预约
@@ -145,7 +169,7 @@ export  default function App () {
           </div>
           <div className="rectangle-17" />
           <div className="text-wrapper-19">copyright 2023 深圳市万梦智能科技有限公司 <a href="https://beian.miit.gov.cn">粤ICP备2023112289号
-</a></div>
+          </a></div>
           <div className="rectangle-18" />
           <div className="text-wrapper-22">AI摄影棚</div>
           <p className="to-making-progress-2">
@@ -173,7 +197,7 @@ export  default function App () {
           <p className="text-wrapper-25">liberate art and make design progress</p>
           <div className="overlap-group-wrapper">
             <div className="overlap-group-2">
-            <div className="text-wrapper-26" onClick={()=>{
+              <div className="text-wrapper-26" onClick={() => {
                 window.location.replace('https://kaozr59ke4i.feishu.cn/share/base/form/shrcn8lBYjw4RpFVTth7CTOacZd?ccm_open_type=form_v1_link_share')
               }}>预约使用</div>
               <img className="arrow-3" alt="Arrow" src="https://c.animaapp.com/H8eCsQjb/img/arrow-2-1.svg" />