fix bugs
This commit is contained in:
parent
ca34845795
commit
e5cc5aa3c5
83
src/App.css
83
src/App.css
@ -142,7 +142,11 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
box-shadow: 0px 35px 80px #15181d59;
|
||||
height: 2312px;
|
||||
@ -153,7 +157,11 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
height: 560px;
|
||||
left: 515px;
|
||||
@ -163,7 +171,11 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
height: 560px;
|
||||
left: 1101px;
|
||||
@ -173,7 +185,11 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
height: 561px;
|
||||
left: 808px;
|
||||
@ -183,7 +199,11 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
height: 560px;
|
||||
left: 515px;
|
||||
@ -518,7 +538,11 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
left: 185px;
|
||||
position: absolute;
|
||||
@ -589,7 +613,11 @@
|
||||
.desktop-template .generate-quickly-3 {
|
||||
-webkit-background-clip: text !important;
|
||||
-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;
|
||||
color: transparent;
|
||||
font-family: "Alibaba PuHuiTi 2.0-115Black", Helvetica;
|
||||
@ -725,7 +753,11 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
height: 863px;
|
||||
left: 256px;
|
||||
@ -894,7 +926,11 @@
|
||||
}
|
||||
|
||||
.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;
|
||||
height: 43px;
|
||||
left: 727px;
|
||||
@ -999,7 +1035,7 @@
|
||||
left: 18px;
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
width: 359px;
|
||||
width: 1880;
|
||||
}
|
||||
|
||||
.desktop-template .image-26 {
|
||||
@ -1103,7 +1139,11 @@
|
||||
}
|
||||
|
||||
.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-color: #0b3b7a;
|
||||
border-radius: 25.5px;
|
||||
@ -1287,3 +1327,24 @@
|
||||
top: 99px;
|
||||
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 [scale, setScale] = useState(window.innerWidth / designWidth);
|
||||
const innerWidth = document.body.clientWidth;
|
||||
|
||||
const [isFirstPageLoaded, setIsFirstPageLoaded] = useState(false);
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
@ -29,7 +29,34 @@ export default function App() {
|
||||
transformOrigin: "left top",
|
||||
backgroundSize: "100% 100%",
|
||||
}} 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" />
|
||||
<img className="img" alt="Rectangle" src="https://c.animaapp.com/H8eCsQjb/img/rectangle-163.png" />
|
||||
<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-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>
|
||||
</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>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user