feat: self adjusted
This commit is contained in:
parent
e91a400781
commit
ca34845795
@ -7,6 +7,11 @@
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
#root {
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.overlap>* {
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
382
src/App.tsx
382
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>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user