fix bugs
This commit is contained in:
parent
ca34845795
commit
e5cc5aa3c5
85
src/App.css
85
src/App.css
@ -12,7 +12,7 @@
|
|||||||
width: 100vw;
|
width: 100vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlap>* {
|
.overlap > * {
|
||||||
transition: 0.5s;
|
transition: 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -142,7 +142,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.desktop-template .rectangle-6 {
|
.desktop-template .rectangle-6 {
|
||||||
background: linear-gradient(180deg, rgb(21, 24, 29) 0%, rgba(21, 24, 29, 0) 100%);
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgb(21, 24, 29) 0%,
|
||||||
|
rgba(21, 24, 29, 0) 100%
|
||||||
|
);
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
box-shadow: 0px 35px 80px #15181d59;
|
box-shadow: 0px 35px 80px #15181d59;
|
||||||
height: 2312px;
|
height: 2312px;
|
||||||
@ -153,7 +157,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.desktop-template .rectangle-7 {
|
.desktop-template .rectangle-7 {
|
||||||
background: linear-gradient(180deg, rgb(0, 122, 255) 0%, rgba(0, 122, 255, 0.14) 100%);
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgb(0, 122, 255) 0%,
|
||||||
|
rgba(0, 122, 255, 0.14) 100%
|
||||||
|
);
|
||||||
border-radius: 24px 0px 0px 24px;
|
border-radius: 24px 0px 0px 24px;
|
||||||
height: 560px;
|
height: 560px;
|
||||||
left: 515px;
|
left: 515px;
|
||||||
@ -163,7 +171,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.desktop-template .rectangle-8 {
|
.desktop-template .rectangle-8 {
|
||||||
background: linear-gradient(180deg, rgb(162.56, 162.56, 162.56) 0%, rgba(158.31, 158.31, 158.31, 0) 100%);
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgb(162.56, 162.56, 162.56) 0%,
|
||||||
|
rgba(158.31, 158.31, 158.31, 0) 100%
|
||||||
|
);
|
||||||
border-radius: 0px 24px 24px 0px;
|
border-radius: 0px 24px 24px 0px;
|
||||||
height: 560px;
|
height: 560px;
|
||||||
left: 1101px;
|
left: 1101px;
|
||||||
@ -173,7 +185,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.desktop-template .rectangle-9 {
|
.desktop-template .rectangle-9 {
|
||||||
background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(87.45, 75.04, 137.06, 0) 100%);
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgb(255, 255, 255) 0%,
|
||||||
|
rgba(87.45, 75.04, 137.06, 0) 100%
|
||||||
|
);
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
height: 561px;
|
height: 561px;
|
||||||
left: 808px;
|
left: 808px;
|
||||||
@ -183,7 +199,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.desktop-template .rectangle-10 {
|
.desktop-template .rectangle-10 {
|
||||||
background: linear-gradient(180deg, rgb(0, 61, 146) 0%, rgba(10.26, 66.3, 105.19, 0) 100%);
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgb(0, 61, 146) 0%,
|
||||||
|
rgba(10.26, 66.3, 105.19, 0) 100%
|
||||||
|
);
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
height: 560px;
|
height: 560px;
|
||||||
left: 515px;
|
left: 515px;
|
||||||
@ -518,7 +538,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.desktop-template .rectangle-14 {
|
.desktop-template .rectangle-14 {
|
||||||
background: linear-gradient(180deg, rgb(0, 1.29, 36.12) 0%, rgba(0, 0, 0, 0) 100%);
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgb(0, 1.29, 36.12) 0%,
|
||||||
|
rgba(0, 0, 0, 0) 100%
|
||||||
|
);
|
||||||
height: 900px;
|
height: 900px;
|
||||||
left: 185px;
|
left: 185px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -589,7 +613,11 @@
|
|||||||
.desktop-template .generate-quickly-3 {
|
.desktop-template .generate-quickly-3 {
|
||||||
-webkit-background-clip: text !important;
|
-webkit-background-clip: text !important;
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
background: linear-gradient(180deg, rgba(0, 147, 249, 0.46) 0%, rgba(0, 25, 104, 0.7) 100%);
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(0, 147, 249, 0.46) 0%,
|
||||||
|
rgba(0, 25, 104, 0.7) 100%
|
||||||
|
);
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
color: transparent;
|
color: transparent;
|
||||||
font-family: "Alibaba PuHuiTi 2.0-115Black", Helvetica;
|
font-family: "Alibaba PuHuiTi 2.0-115Black", Helvetica;
|
||||||
@ -725,7 +753,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.desktop-template .rectangle-16 {
|
.desktop-template .rectangle-16 {
|
||||||
background: linear-gradient(180deg, rgba(0, 3.93, 39.31, 0.71) 0%, rgba(0, 11.69, 24.44, 0) 100%);
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(0, 3.93, 39.31, 0.71) 0%,
|
||||||
|
rgba(0, 11.69, 24.44, 0) 100%
|
||||||
|
);
|
||||||
border-radius: 0px 0px 60px 60px;
|
border-radius: 0px 0px 60px 60px;
|
||||||
height: 863px;
|
height: 863px;
|
||||||
left: 256px;
|
left: 256px;
|
||||||
@ -894,7 +926,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.desktop-template .rectangle-18 {
|
.desktop-template .rectangle-18 {
|
||||||
background: linear-gradient(180deg, rgb(0, 122, 255) 0%, rgba(0, 122, 255, 0) 100%);
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgb(0, 122, 255) 0%,
|
||||||
|
rgba(0, 122, 255, 0) 100%
|
||||||
|
);
|
||||||
border-radius: 93.9px;
|
border-radius: 93.9px;
|
||||||
height: 43px;
|
height: 43px;
|
||||||
left: 727px;
|
left: 727px;
|
||||||
@ -999,7 +1035,7 @@
|
|||||||
left: 18px;
|
left: 18px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 14px;
|
top: 14px;
|
||||||
width: 359px;
|
width: 1880;
|
||||||
}
|
}
|
||||||
|
|
||||||
.desktop-template .image-26 {
|
.desktop-template .image-26 {
|
||||||
@ -1103,7 +1139,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.desktop-template .overlap-group-2 {
|
.desktop-template .overlap-group-2 {
|
||||||
background: radial-gradient(50% 50% at 50% 50%, rgb(0, 147, 249) 0%, rgb(0, 127.96, 216.75) 100%);
|
background: radial-gradient(
|
||||||
|
50% 50% at 50% 50%,
|
||||||
|
rgb(0, 147, 249) 0%,
|
||||||
|
rgb(0, 127.96, 216.75) 100%
|
||||||
|
);
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
border-color: #0b3b7a;
|
border-color: #0b3b7a;
|
||||||
border-radius: 25.5px;
|
border-radius: 25.5px;
|
||||||
@ -1287,3 +1327,24 @@
|
|||||||
top: 99px;
|
top: 99px;
|
||||||
width: 1222px;
|
width: 1222px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.words {
|
||||||
|
position: relative;
|
||||||
|
width: fit-content;
|
||||||
|
animation: move 4s linear infinite;
|
||||||
|
padding-left: 50px;
|
||||||
|
}
|
||||||
|
.words::after {
|
||||||
|
position: absolute;
|
||||||
|
right: -100%;
|
||||||
|
content: attr(data-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes move {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
67
src/App.tsx
67
src/App.tsx
@ -6,7 +6,7 @@ export default function App() {
|
|||||||
const designHeight = 5550;
|
const designHeight = 5550;
|
||||||
const [scale, setScale] = useState(window.innerWidth / designWidth);
|
const [scale, setScale] = useState(window.innerWidth / designWidth);
|
||||||
const innerWidth = document.body.clientWidth;
|
const innerWidth = document.body.clientWidth;
|
||||||
|
const [isFirstPageLoaded, setIsFirstPageLoaded] = useState(false);
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
@ -29,7 +29,34 @@ export default function App() {
|
|||||||
transformOrigin: "left top",
|
transformOrigin: "left top",
|
||||||
backgroundSize: "100% 100%",
|
backgroundSize: "100% 100%",
|
||||||
}} className="div">
|
}} className="div">
|
||||||
<div className="overlap">
|
<div className="overlap-3">
|
||||||
|
<img className="image-25" onLoad={() => {
|
||||||
|
setIsFirstPageLoaded(true)
|
||||||
|
}} alt="Image" src="https://mindingdesign.oss-cn-beijing.aliyuncs.com/fixed/head_bg.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 words" data-text="MINDING DESIGN">MINDING DESIGN</div>
|
||||||
|
</div>
|
||||||
|
{isFirstPageLoaded && (<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" />
|
||||||
<div className="rectangle-2" />
|
<div className="rectangle-2" />
|
||||||
@ -176,41 +203,7 @@ export default function App() {
|
|||||||
<span className="text-wrapper-14">To Making Progress Happen</span>
|
<span className="text-wrapper-14">To Making Progress Happen</span>
|
||||||
<span className="text-wrapper-23">.</span>
|
<span className="text-wrapper-23">.</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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>
|
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user