From ca34845795e553dd3f5fc1a35a1d70f0c9ebba45 Mon Sep 17 00:00:00 2001
From: zjt <937178071@qq.com>
Date: Wed, 22 Nov 2023 20:25:26 +0800
Subject: [PATCH] feat: self adjusted

---
 src/App.css |   5 +
 src/App.tsx | 382 ++++++++++++++++++++++++++++------------------------
 2 files changed, 208 insertions(+), 179 deletions(-)

diff --git a/src/App.css b/src/App.css
index 917cb39..d9de53d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -7,6 +7,11 @@
     transition: 0.5s;
 }
 
+#root {
+    overflow: hidden;
+    width: 100vw;
+}
+
 .overlap>* {
     transition: 0.5s;
 }
diff --git a/src/App.tsx b/src/App.tsx
index f452cbf..7e19939 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,193 +1,217 @@
-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 className="overlap">
-        <div className="rectangle" />
-        <img className="img" alt="Rectangle" src="https://c.animaapp.com/H8eCsQjb/img/rectangle-163.png" />
-        <div className="rectangle-2" />
-        <img className="image" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-82@2x.png" />
-        <img className="image-2" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-83@2x.png" />
-        <img className="image-3" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-84@2x.png" />
-        <img className="image-4" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-85@2x.png" />
-        <img className="image-5" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-89@2x.png" />
-        <img className="image-6" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-91@2x.png" />
-        <div className="rectangle-3" />
-        <div className="rectangle-4" />
-        <div className="rectangle-5" />
-        <div className="rectangle-6" />
-        <div className="rectangle-7" />
-        <div className="rectangle-8" />
-        <div className="rectangle-9" />
-        <div className="rectangle-10" />
-        <div className="AI">
-          图片云端存储
-          <br />
-          不再担心本地丢失
-        </div>
-        <div className="text-wrapper">
-          一键适配
-          <br />
-          各大平台
-          <br />
-          更好表述您的产品
-          <br />
-        </div>
-        <div className="one-click-dressing">
-          One-click
-          <br />
-          dressing
-        </div>
-        <div className="one-click">One-click Acquisition</div>
-        <div className="generate-quickly">Generate Quickly</div>
-        <div className="generate-quickly-2">Generate Quickly</div>
-        <div className="text-wrapper-2">
-          收藏您的最爱
-          <br />
-          不怕灵感丢失
-        </div>
-        <div className="text-wrapper-3">
-          平台文案
-          <br />
-          一键生成
-        </div>
-        <div className="text-wrapper-4">
-          一键穿衣
-          <br />
-          从此告别传统模特
-        </div>
-        <div className="text-wrapper-5">*</div>
-        <div className="text-wrapper-6">*</div>
-        <div className="text-wrapper-7">*</div>
-        <div className="text-wrapper-8">*</div>
-        <img className="rectangle-11" alt="Rectangle" src="https://c.animaapp.com/H8eCsQjb/img/rectangle-92.png" />
-        <img className="image-7" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-78.png" />
-        <div className="image-8" />
-        <img className="rectangle-12" alt="Rectangle" src="https://c.animaapp.com/H8eCsQjb/img/rectangle-98.png" />
-        <div className="rectangle-13" />
-        <img className="element" alt="Element" src="https://c.animaapp.com/H8eCsQjb/img/683687585217745014-1.png" />
-        <div className="group">
-          <img className="arrow" alt="Arrow" src="https://c.animaapp.com/H8eCsQjb/img/arrow-1-3.svg" />
-        </div>
-        <div className="arrow-wrapper">
-          <img className="arrow" alt="Arrow" src="https://c.animaapp.com/H8eCsQjb/img/arrow-1-2.svg" />
-        </div>
-        <div className="img-wrapper">
-          <img className="arrow" alt="Arrow" src="https://c.animaapp.com/H8eCsQjb/img/arrow-1-1.svg" />
-        </div>
-        <div className="group-2">
-          <img className="arrow" alt="Arrow" src="https://c.animaapp.com/H8eCsQjb/img/arrow-1-2.svg" />
-        </div>
-        <div className="text-wrapper-9">
-          足不出户完成拍摄
-          <br />
-          不同拍摄场景和模型类型，
-          <br />
-          适应任何真实模特图像。
-        </div>
-        <div className="text-wrapper-10">
-          你的艺术
-          <br />
-          一键设计
-        </div>
-        <div className="AI-2">
-          从灵感到成品
-          <br />
-          仅需3步
-          <br />
-          让设计没有门槛
-        </div>
-        <div className="rectangle-14" />
-        <p className="p">
-        </p>
-        <div className="overlap-wrapper">
-          <div className="overlap-group">
-            <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" />
+    <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" />
+          <div className="rectangle-2" />
+          <img className="image" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-82@2x.png" />
+          <img className="image-2" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-83@2x.png" />
+          <img className="image-3" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-84@2x.png" />
+          <img className="image-4" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-85@2x.png" />
+          <img className="image-5" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-89@2x.png" />
+          <img className="image-6" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-91@2x.png" />
+          <div className="rectangle-3" />
+          <div className="rectangle-4" />
+          <div className="rectangle-5" />
+          <div className="rectangle-6" />
+          <div className="rectangle-7" />
+          <div className="rectangle-8" />
+          <div className="rectangle-9" />
+          <div className="rectangle-10" />
+          <div className="AI">
+            图片云端存储
+            <br />
+            不再担心本地丢失
           </div>
-        </div>
-        <div className="generate-quickly-3">Generate Quickly</div>
-        <p className="to-making-progress">
-          <span className="text-wrapper-14">To Making Progress Happen</span>
-          <span className="text-wrapper-15">.</span>
-        </p>
-        <img className="image-9" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-69@2x.png" />
-        <img className="image-10" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-64@2x.png" />
-        <img className="image-11" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-70@2x.png" />
-        <img className="image-12" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-65@2x.png" />
-        <img className="image-13" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-71@2x.png" />
-        <img className="image-14" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-81@2x.png" />
-        <img className="image-15" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-79@2x.png" />
-        <img className="image-16" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-76@2x.png" />
-        <img className="image-17" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-80@2x.png" />
-        <img className="image-18" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-72@2x.png" />
-        <div className="rectangle-15" />
-        <div className="rectangle-16" />
-        <div className="group-3">
-          <div className="text-wrapper-16">赶快加入我们吧</div>
-          <div className="join-us">JOIN US！</div>
-          <p className="div-2">
+          <div className="text-wrapper">
+            一键适配
+            <br />
+            各大平台
+            <br />
+            更好表述您的产品
+            <br />
+          </div>
+          <div className="one-click-dressing">
+            One-click
+            <br />
+            dressing
+          </div>
+          <div className="one-click">One-click Acquisition</div>
+          <div className="generate-quickly">Generate Quickly</div>
+          <div className="generate-quickly-2">Generate Quickly</div>
+          <div className="text-wrapper-2">
+            收藏您的最爱
+            <br />
+            不怕灵感丢失
+          </div>
+          <div className="text-wrapper-3">
+            平台文案
+            <br />
+            一键生成
+          </div>
+          <div className="text-wrapper-4">
+            一键穿衣
+            <br />
+            从此告别传统模特
+          </div>
+          <div className="text-wrapper-5">*</div>
+          <div className="text-wrapper-6">*</div>
+          <div className="text-wrapper-7">*</div>
+          <div className="text-wrapper-8">*</div>
+          <img className="rectangle-11" alt="Rectangle" src="https://c.animaapp.com/H8eCsQjb/img/rectangle-92.png" />
+          <img className="image-7" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-78.png" />
+          <div className="image-8" />
+          <img className="rectangle-12" alt="Rectangle" src="https://c.animaapp.com/H8eCsQjb/img/rectangle-98.png" />
+          <div className="rectangle-13" />
+          <img className="element" alt="Element" src="https://c.animaapp.com/H8eCsQjb/img/683687585217745014-1.png" />
+          <div className="group">
+            <img className="arrow" alt="Arrow" src="https://c.animaapp.com/H8eCsQjb/img/arrow-1-3.svg" />
+          </div>
+          <div className="arrow-wrapper">
+            <img className="arrow" alt="Arrow" src="https://c.animaapp.com/H8eCsQjb/img/arrow-1-2.svg" />
+          </div>
+          <div className="img-wrapper">
+            <img className="arrow" alt="Arrow" src="https://c.animaapp.com/H8eCsQjb/img/arrow-1-1.svg" />
+          </div>
+          <div className="group-2">
+            <img className="arrow" alt="Arrow" src="https://c.animaapp.com/H8eCsQjb/img/arrow-1-2.svg" />
+          </div>
+          <div className="text-wrapper-9">
+            足不出户完成拍摄
+            <br />
+            不同拍摄场景和模型类型，
+            <br />
+            适应任何真实模特图像。
+          </div>
+          <div className="text-wrapper-10">
+            你的艺术
+            <br />
+            一键设计
+          </div>
+          <div className="AI-2">
+            从灵感到成品
+            <br />
+            仅需3步
+            <br />
+            让设计没有门槛
+          </div>
+          <div className="rectangle-14" />
+          <p className="p">
           </p>
-          <p className="div-3">
-          </p>
-          <div className="div-wrapper">
-            <div className="text-wrapper-17" onClick={()=>{
-              window.location.replace('https://kaozr59ke4i.feishu.cn/share/base/form/shrcn8lBYjw4RpFVTth7CTOacZd?ccm_open_type=form_v1_link_share')
-            }}>
-              预约
+          <div className="overlap-wrapper">
+            <div className="overlap-group">
+              <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" />
             </div>
           </div>
-        </div>
-        <div className="rectangle-17" />
-        <div className="text-wrapper-19">copyright 2023 深圳市万梦智能科技有限公司 <a href="https://beian.miit.gov.cn">粤ICP备2023112289号
-</a></div>
-        <div className="rectangle-18" />
-        <div className="text-wrapper-22">AI摄影棚</div>
-        <p className="to-making-progress-2">
-          <span className="text-wrapper-14">To Making Progress Happen</span>
-          <span className="text-wrapper-23">.</span>
-        </p>
-      </div>
-      <div className="overlap-3">
-        <img className="image-19" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-66@2x.png" />
-        <img className="image-20" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-67@2x.png" />
-        <img className="image-21" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-70-1.png" />
-        <img className="image-22" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-68@2x.png" />
-        <img className="image-23" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-72-1.png" />
-        <img className="image-24" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-73@2x.png" />
-        <img className="image-25" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-74.png" />
-        <img className="image-26" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-76-1@2x.png" />
-        <img className="image-27" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-71-1@2x.png" />
-        <img className="image-28" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-75@2x.png" />
-        <div className="rectangle-19" />
-        <div className="text-wrapper-24">
-          梦小迪
-          <br />
-          解放艺术，让设计进步
-        </div>
-        <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={()=>{
-              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" />
+          <div className="generate-quickly-3">Generate Quickly</div>
+          <p className="to-making-progress">
+            <span className="text-wrapper-14">To Making Progress Happen</span>
+            <span className="text-wrapper-15">.</span>
+          </p>
+          <img className="image-9" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-69@2x.png" />
+          <img className="image-10" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-64@2x.png" />
+          <img className="image-11" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-70@2x.png" />
+          <img className="image-12" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-65@2x.png" />
+          <img className="image-13" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-71@2x.png" />
+          <img className="image-14" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-81@2x.png" />
+          <img className="image-15" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-79@2x.png" />
+          <img className="image-16" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-76@2x.png" />
+          <img className="image-17" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-80@2x.png" />
+          <img className="image-18" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-72@2x.png" />
+          <div className="rectangle-15" />
+          <div className="rectangle-16" />
+          <div className="group-3">
+            <div className="text-wrapper-16">赶快加入我们吧</div>
+            <div className="join-us">JOIN US！</div>
+            <p className="div-2">
+            </p>
+            <p className="div-3">
+            </p>
+            <div className="div-wrapper">
+              <div className="text-wrapper-17" onClick={() => {
+                window.location.replace('https://kaozr59ke4i.feishu.cn/share/base/form/shrcn8lBYjw4RpFVTth7CTOacZd?ccm_open_type=form_v1_link_share')
+              }}>
+                预约
+              </div>
+            </div>
           </div>
+          <div className="rectangle-17" />
+          <div className="text-wrapper-19">copyright 2023 深圳市万梦智能科技有限公司 <a href="https://beian.miit.gov.cn">粤ICP备2023112289号
+          </a></div>
+          <div className="rectangle-18" />
+          <div className="text-wrapper-22">AI摄影棚</div>
+          <p className="to-making-progress-2">
+            <span className="text-wrapper-14">To Making Progress Happen</span>
+            <span className="text-wrapper-23">.</span>
+          </p>
         </div>
-        <div className="text-wrapper-27">
-          梦小迪是一款以视觉智能、视觉模型架构和语言模型为核心的，助力服装行业从设计到宣发全链路智能软件。为企业降本增效，推进服装行业数字化转型，改变传统的服饰工作流。
+        <div className="overlap-3">
+          <img className="image-19" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-66@2x.png" />
+          <img className="image-20" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-67@2x.png" />
+          <img className="image-21" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-70-1.png" />
+          <img className="image-22" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-68@2x.png" />
+          <img className="image-23" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-72-1.png" />
+          <img className="image-24" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-73@2x.png" />
+          <img className="image-25" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-74.png" />
+          <img className="image-26" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-76-1@2x.png" />
+          <img className="image-27" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-71-1@2x.png" />
+          <img className="image-28" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-75@2x.png" />
+          <div className="rectangle-19" />
+          <div className="text-wrapper-24">
+            梦小迪
+            <br />
+            解放艺术，让设计进步
+          </div>
+          <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={() => {
+                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" />
+            </div>
+          </div>
+          <div className="text-wrapper-27">
+            梦小迪是一款以视觉智能、视觉模型架构和语言模型为核心的，助力服装行业从设计到宣发全链路智能软件。为企业降本增效，推进服装行业数字化转型，改变传统的服饰工作流。
+          </div>
+          <div className="rectangle-20" />
+          <div className="rectangle-21" />
+          <div className="rectangle-22" />
+          <div className="text-wrapper-32">MINDING DESIGN</div>
         </div>
-        <div className="rectangle-20" />
-        <div className="rectangle-21" />
-        <div className="rectangle-22" />        
-        <div className="text-wrapper-32">MINDING DESIGN</div>
       </div>
     </div>
-  </div>
   );
 };