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;
} }

40
src/App.tsx
View File

@ -1,10 +1,34 @@
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={{
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="overlap">
<div className="rectangle" /> <div className="rectangle" />
<img className="img" alt="Rectangle" src="https://c.animaapp.com/H8eCsQjb/img/rectangle-163.png" /> <img className="img" alt="Rectangle" src="https://c.animaapp.com/H8eCsQjb/img/rectangle-163.png" />
@ -105,7 +129,7 @@ export default function App () {
</p> </p>
<div className="overlap-wrapper"> <div className="overlap-wrapper">
<div className="overlap-group"> <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') window.location.replace('https://kaozr59ke4i.feishu.cn/share/base/form/shrcn8lBYjw4RpFVTth7CTOacZd?ccm_open_type=form_v1_link_share')
}}>预约使用</div> }}>预约使用</div>
<img className="arrow-2" alt="Arrow" src="https://c.animaapp.com/H8eCsQjb/img/arrow-2.svg" /> <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 className="div-3">
</p> </p>
<div className="div-wrapper"> <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') 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>
<div className="rectangle-17" /> <div className="rectangle-17" />
<div className="text-wrapper-19">copyright 2023 深圳市万梦智能科技有限公司 <a href="https://beian.miit.gov.cn">粤ICP备2023112289号 <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="rectangle-18" />
<div className="text-wrapper-22">AI摄影棚</div> <div className="text-wrapper-22">AI摄影棚</div>
<p className="to-making-progress-2"> <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> <p className="text-wrapper-25">liberate art and make design progress</p>
<div className="overlap-group-wrapper"> <div className="overlap-group-wrapper">
<div className="overlap-group-2"> <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') window.location.replace('https://kaozr59ke4i.feishu.cn/share/base/form/shrcn8lBYjw4RpFVTth7CTOacZd?ccm_open_type=form_v1_link_share')
}}>预约使用</div> }}>预约使用</div>
<img className="arrow-3" alt="Arrow" src="https://c.animaapp.com/H8eCsQjb/img/arrow-2-1.svg" /> <img className="arrow-3" alt="Arrow" src="https://c.animaapp.com/H8eCsQjb/img/arrow-2-1.svg" />