zjt/wise-mind-mainpage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: self adjusted

Browse Source
This commit is contained in:
zjt 2023-11-22 20:25:26 +08:00
parent e91a400781
commit ca34845795
2 changed files with 208 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.css
View File

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

382
src/App.tsx
View File

@ -1,193 +1,217 @@
import React from "react"; import React, { useState } from "react";
import "./App.css"; 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 ( return (
<div className="desktop-template"> <div
<div className="div"> style={{
<div className="overlap"> width: designWidth * scale + "px",
<div className="rectangle" /> height: designHeight * scale + "px",
<img className="img" alt="Rectangle" src="https://c.animaapp.com/H8eCsQjb/img/rectangle-163.png" /> overflow: "hidden",
<div className="rectangle-2" /> position: "relative"
<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" /> className="desktop-template">
<img className="image-3" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-84@2x.png" /> <div onResize={() => {
<img className="image-4" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-85@2x.png" /> setScale(innerWidth / designWidth);
<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" /> style={{
<div className="rectangle-3" /> position: "absolute",
<div className="rectangle-4" /> top: -60 * scale + "px",
<div className="rectangle-5" /> left: 0,
<div className="rectangle-6" /> transform: `scale(${scale})`,
<div className="rectangle-7" /> height: '5640px',
<div className="rectangle-8" /> width: '1440px',
<div className="rectangle-9" /> transformOrigin: "left top",
<div className="rectangle-10" /> backgroundSize: "100% 100%",
<div className="AI"> }} className="div">
图片云端存储 <div className="overlap">
<br /> <div className="rectangle" />
不再担心本地丢失 <img className="img" alt="Rectangle" src="https://c.animaapp.com/H8eCsQjb/img/rectangle-163.png" />
</div> <div className="rectangle-2" />
<div className="text-wrapper"> <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" />
<br /> <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" />
<br /> <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" />
<br /> <div className="rectangle-3" />
</div> <div className="rectangle-4" />
<div className="one-click-dressing"> <div className="rectangle-5" />
One-click <div className="rectangle-6" />
<br /> <div className="rectangle-7" />
dressing <div className="rectangle-8" />
</div> <div className="rectangle-9" />
<div className="one-click">One-click Acquisition</div> <div className="rectangle-10" />
<div className="generate-quickly">Generate Quickly</div> <div className="AI">
<div className="generate-quickly-2">Generate Quickly</div> 图片云端存储
<div className="text-wrapper-2"> <br />
收藏您的最爱 不再担心本地丢失
<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> </div>
</div> <div className="text-wrapper">
<div className="generate-quickly-3">Generate Quickly</div> 一键适配
<p className="to-making-progress"> <br />
<span className="text-wrapper-14">To Making Progress Happen</span> 各大平台
<span className="text-wrapper-15">.</span> <br />
</p> 更好表述您的产品
<img className="image-9" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-69@2x.png" /> <br />
<img className="image-10" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-64@2x.png" /> </div>
<img className="image-11" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-70@2x.png" /> <div className="one-click-dressing">
<img className="image-12" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-65@2x.png" /> One-click
<img className="image-13" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-71@2x.png" /> <br />
<img className="image-14" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-81@2x.png" /> dressing
<img className="image-15" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-79@2x.png" /> </div>
<img className="image-16" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-76@2x.png" /> <div className="one-click">One-click Acquisition</div>
<img className="image-17" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-80@2x.png" /> <div className="generate-quickly">Generate Quickly</div>
<img className="image-18" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-72@2x.png" /> <div className="generate-quickly-2">Generate Quickly</div>
<div className="rectangle-15" /> <div className="text-wrapper-2">
<div className="rectangle-16" /> 收藏您的最爱
<div className="group-3"> <br />
<div className="text-wrapper-16">赶快加入我们吧</div> 不怕灵感丢失
<div className="join-us">JOIN US！</div> </div>
<p className="div-2"> <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>
<p className="div-3"> <div className="overlap-wrapper">
</p> <div className="overlap-group">
<div className="div-wrapper"> <div className="text-wrapper-13" 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')
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>
</div> <div className="generate-quickly-3">Generate Quickly</div>
<div className="rectangle-17" /> <p className="to-making-progress">
<div className="text-wrapper-19">copyright 2023 深圳市万梦智能科技有限公司 <a href="https://beian.miit.gov.cn">粤ICP备2023112289号 <span className="text-wrapper-14">To Making Progress Happen</span>
</a></div> <span className="text-wrapper-15">.</span>
<div className="rectangle-18" /> </p>
<div className="text-wrapper-22">AI摄影棚</div> <img className="image-9" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-69@2x.png" />
<p className="to-making-progress-2"> <img className="image-10" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-64@2x.png" />
<span className="text-wrapper-14">To Making Progress Happen</span> <img className="image-11" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-70@2x.png" />
<span className="text-wrapper-23">.</span> <img className="image-12" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-65@2x.png" />
</p> <img className="image-13" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-71@2x.png" />
</div> <img className="image-14" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-81@2x.png" />
<div className="overlap-3"> <img className="image-15" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-79@2x.png" />
<img className="image-19" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-66@2x.png" /> <img className="image-16" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-76@2x.png" />
<img className="image-20" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-67@2x.png" /> <img className="image-17" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-80@2x.png" />
<img className="image-21" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-70-1.png" /> <img className="image-18" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-72@2x.png" />
<img className="image-22" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-68@2x.png" /> <div className="rectangle-15" />
<img className="image-23" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-72-1.png" /> <div className="rectangle-16" />
<img className="image-24" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-73@2x.png" /> <div className="group-3">
<img className="image-25" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-74.png" /> <div className="text-wrapper-16">赶快加入我们吧</div>
<img className="image-26" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-76-1@2x.png" /> <div className="join-us">JOIN US！</div>
<img className="image-27" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-71-1@2x.png" /> <p className="div-2">
<img className="image-28" alt="Image" src="https://c.animaapp.com/H8eCsQjb/img/image-75@2x.png" /> </p>
<div className="rectangle-19" /> <p className="div-3">
<div className="text-wrapper-24"> </p>
梦小迪 <div className="div-wrapper">
<br /> <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> }}>
<p className="text-wrapper-25">liberate art and make design progress</p> 预约
<div className="overlap-group-wrapper"> </div>
<div className="overlap-group-2"> </div>
<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="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>
<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>
<div className="rectangle-20" />
<div className="rectangle-21" />
<div className="rectangle-22" />
<div className="text-wrapper-32">MINDING DESIGN</div>
</div> </div>
</div> </div>
</div>
); );
}; };