刘宇飞
6e0a1fbcbb
Includes scratch-gui, scratch-vm, scratch-blocks, scratch-render, scratch-l10n, and deployment config. Co-authored-by: Cursor <cursoragent@cursor.com>
385 lines
8.0 KiB
CSS
385 lines
8.0 KiB
CSS
.u-section-1 {
|
|
background-image: url("../images/web-15.png");
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.u-section-1 .u-image-1 {
|
|
width: 284px;
|
|
height: 284px;
|
|
margin: 51px calc(((100% - 1140px) / 2) + 20px) 0 auto;
|
|
}
|
|
|
|
.u-section-1 .u-image-2 {
|
|
width: 74px;
|
|
height: 74px;
|
|
margin: -23px calc(((100% - 1140px) / 2) + 125px) 0 auto;
|
|
}
|
|
|
|
.u-section-1 .u-image-3 {
|
|
width: 143px;
|
|
height: 143px;
|
|
margin: -225px auto 0 calc(((100% - 1140px) / 2) + 177px);
|
|
}
|
|
|
|
.u-section-1 .u-btn-1 {
|
|
background-image: none;
|
|
border-style: solid;
|
|
margin: -101px calc(((100% - 1140px) / 2) + 330px) 0 auto;
|
|
padding: 0;
|
|
}
|
|
|
|
.u-section-1 .u-image-4 {
|
|
width: 74px;
|
|
height: 74px;
|
|
margin: 56px auto 0 calc(((100% - 1140px) / 2) + 37px);
|
|
}
|
|
|
|
.u-section-1 .u-image-5 {
|
|
width: 381px;
|
|
height: 134px;
|
|
margin: 5px auto 0;
|
|
}
|
|
|
|
.u-section-1 .u-image-6 {
|
|
width: 143px;
|
|
height: 143px;
|
|
margin: -151px auto 0 calc(((100% - 1140px) / 2) + 241px);
|
|
}
|
|
|
|
.u-section-1 .u-image-7 {
|
|
width: 251px;
|
|
height: 251px;
|
|
margin: 72px calc(((100% - 1140px) / 2) + 203px) 0 auto;
|
|
}
|
|
|
|
.u-section-1 .u-image-8 {
|
|
width: 251px;
|
|
height: 250px;
|
|
margin: -234px calc(((100% - 1140px) / 2)) 0 auto;
|
|
}
|
|
|
|
.u-section-1 .u-image-9 {
|
|
width: 249px;
|
|
height: 249px;
|
|
margin: -410px calc(((100% - 1140px) / 2) + 95px) 0 auto;
|
|
}
|
|
|
|
.u-section-1 .u-text-1 {
|
|
font-weight: 800;
|
|
font-size: 2.25rem;
|
|
margin: -170px auto 0;
|
|
}
|
|
|
|
.u-section-1 .u-image-10 {
|
|
width: 143px;
|
|
height: 143px;
|
|
margin: 35px auto 0 calc(((100% - 1140px) / 2) + 73px);
|
|
}
|
|
|
|
.u-section-1 .u-image-11 {
|
|
width: 284px;
|
|
height: 284px;
|
|
margin: -150px auto 50px calc(((100% - 1140px) / 2) + 171px);
|
|
}
|
|
|
|
@media (max-width: 1199px) {
|
|
.u-section-1 {
|
|
background-size: cover;
|
|
}
|
|
|
|
.u-section-1 .u-image-1 {
|
|
--animation-custom_in-translate_x: 0px;
|
|
--animation-custom_in-translate_y: 0px;
|
|
--animation-custom_in-opacity: 1;
|
|
--animation-custom_in-rotate: 360deg;
|
|
--animation-custom_in-scale: 1;
|
|
width: 134px;
|
|
height: 134px;
|
|
margin-top: 56px;
|
|
margin-right: calc(((100% - 940px) / 2) + -11px);
|
|
}
|
|
|
|
.u-section-1 .u-image-2 {
|
|
margin-top: 619px;
|
|
margin-right: calc(((100% - 940px) / 2) + -28px);
|
|
}
|
|
|
|
.u-section-1 .u-image-3 {
|
|
margin-top: -854px;
|
|
margin-left: calc(((100% - 940px) / 2) + 14px);
|
|
}
|
|
|
|
.u-section-1 .u-btn-1 {
|
|
margin-top: -243px;
|
|
margin-right: calc(((100% - 940px) / 2) + 130px);
|
|
}
|
|
|
|
.u-section-1 .u-image-4 {
|
|
margin-top: 207px;
|
|
margin-left: calc(((100% - 940px) / 2) + -17px);
|
|
}
|
|
|
|
.u-section-1 .u-image-5 {
|
|
width: 305px;
|
|
height: 107px;
|
|
margin-top: -218px;
|
|
margin-left: calc(((100% - 940px) / 2) + 379px);
|
|
}
|
|
|
|
.u-section-1 .u-image-6 {
|
|
margin-top: 0;
|
|
margin-left: calc(((100% - 940px) / 2) + -99px);
|
|
}
|
|
|
|
.u-section-1 .u-image-7 {
|
|
width: 127px;
|
|
height: 127px;
|
|
margin-top: -29px;
|
|
margin-right: calc(((100% - 940px) / 2) + 203px);
|
|
margin-left: calc(((100% - 940px) / 2) + -17px);
|
|
}
|
|
|
|
.u-section-1 .u-image-8 {
|
|
width: 143px;
|
|
height: 143px;
|
|
margin-top: 414px;
|
|
margin-right: calc(((100% - 940px) / 2) + -32px);
|
|
}
|
|
|
|
.u-section-1 .u-image-9 {
|
|
width: 139px;
|
|
height: 139px;
|
|
margin-top: 16px;
|
|
margin-right: calc(((100% - 940px) / 2) + -28px);
|
|
}
|
|
|
|
.u-section-1 .u-text-1 {
|
|
margin-top: -662px;
|
|
margin-left: calc(((100% - 940px) / 2) + 316px);
|
|
}
|
|
|
|
.u-section-1 .u-image-10 {
|
|
margin-top: 494px;
|
|
margin-left: calc(((100% - 940px) / 2) + 22px);
|
|
}
|
|
|
|
.u-section-1 .u-image-11 {
|
|
--animation-custom_in-translate_x: 0px;
|
|
--animation-custom_in-translate_y: 0px;
|
|
--animation-custom_in-opacity: 0;
|
|
--animation-custom_in-rotate: 0deg;
|
|
--animation-custom_in-scale: 0.3;
|
|
animation-duration: 120000ms;
|
|
margin-top: 108px;
|
|
margin-bottom: 60px;
|
|
margin-left: calc(((100% - 940px) / 2) + -114px);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.u-section-1 .u-image-1 {
|
|
margin-top: 52px;
|
|
margin-right: calc(((100% - 720px) / 2) + 54px);
|
|
}
|
|
|
|
.u-section-1 .u-image-2 {
|
|
margin-top: 482px;
|
|
margin-right: auto;
|
|
margin-left: calc(((100% - 720px) / 2) + 138px);
|
|
}
|
|
|
|
.u-section-1 .u-image-3 {
|
|
margin-top: -690px;
|
|
margin-left: calc(((100% - 720px) / 2) + 57px);
|
|
}
|
|
|
|
.u-section-1 .u-btn-1 {
|
|
margin-top: -266px;
|
|
margin-right: calc(((100% - 720px) / 2));
|
|
}
|
|
|
|
.u-section-1 .u-image-4 {
|
|
margin-top: 370px;
|
|
margin-left: calc(((100% - 720px) / 2));
|
|
}
|
|
|
|
.u-section-1 .u-image-5 {
|
|
margin-top: -129px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.u-section-1 .u-image-6 {
|
|
margin-left: calc(((100% - 720px) / 2) + 172px);
|
|
}
|
|
|
|
.u-section-1 .u-image-7 {
|
|
margin-top: 231px;
|
|
margin-right: calc(((100% - 720px) / 2) + 269px);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.u-section-1 .u-image-8 {
|
|
margin-top: -233px;
|
|
margin-right: auto;
|
|
margin-left: calc(((100% - 720px) / 2) + 52px);
|
|
}
|
|
|
|
.u-section-1 .u-image-9 {
|
|
margin-top: -167px;
|
|
margin-right: calc(((100% - 720px) / 2) + 27px);
|
|
}
|
|
|
|
.u-section-1 .u-text-1 {
|
|
width: auto;
|
|
margin-top: -209px;
|
|
margin-left: auto;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.u-section-1 .u-image-10 {
|
|
margin-top: 122px;
|
|
margin-bottom: 60px;
|
|
margin-left: calc(((100% - 720px) / 2) + 242px);
|
|
}
|
|
|
|
.u-section-1 .u-image-11 {
|
|
margin-left: calc(((100% - 720px) / 2) + -114px);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.u-section-1 .u-image-1 {
|
|
margin-right: calc(((100% - 540px) / 2) + 54px);
|
|
}
|
|
|
|
.u-section-1 .u-image-2 {
|
|
margin-top: 273px;
|
|
margin-right: calc(((100% - 540px) / 2) + -12px);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.u-section-1 .u-image-3 {
|
|
margin-top: -173px;
|
|
margin-left: calc(((100% - 540px) / 2));
|
|
}
|
|
|
|
.u-section-1 .u-btn-1 {
|
|
margin-top: -442px;
|
|
margin-right: calc(((100% - 540px) / 2));
|
|
}
|
|
|
|
.u-section-1 .u-image-4 {
|
|
margin-top: 236px;
|
|
margin-left: calc(((100% - 540px) / 2) + -17px);
|
|
}
|
|
|
|
.u-section-1 .u-image-6 {
|
|
margin-left: calc(((100% - 540px) / 2) + -99px);
|
|
}
|
|
|
|
.u-section-1 .u-image-7 {
|
|
width: 50px;
|
|
height: 50px;
|
|
margin-top: -161px;
|
|
margin-right: auto;
|
|
margin-left: calc(((100% - 540px) / 2) + 22px);
|
|
}
|
|
|
|
.u-section-1 .u-image-8 {
|
|
width: 104px;
|
|
height: 104px;
|
|
margin-top: 281px;
|
|
margin-left: calc(((100% - 540px) / 2) + 3px);
|
|
}
|
|
|
|
.u-section-1 .u-image-9 {
|
|
width: 62px;
|
|
height: 62px;
|
|
margin-top: -85px;
|
|
margin-right: calc(((100% - 540px) / 2) + 103px);
|
|
}
|
|
|
|
.u-section-1 .u-text-1 {
|
|
font-size: 1rem;
|
|
margin-top: -236px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.u-section-1 .u-image-10 {
|
|
margin-top: 497px;
|
|
margin-left: calc(((100% - 540px) / 2) + 22px);
|
|
}
|
|
|
|
.u-section-1 .u-image-11 {
|
|
margin-left: calc(((100% - 540px) / 2) + -114px);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 575px) {
|
|
.u-section-1 .u-image-1 {
|
|
margin-right: calc(((100% - 340px) / 2) + 54px);
|
|
}
|
|
|
|
.u-section-1 .u-image-2 {
|
|
margin-top: 454px;
|
|
margin-right: auto;
|
|
margin-left: calc(((100% - 340px) / 2) + 18px);
|
|
}
|
|
|
|
.u-section-1 .u-image-3 {
|
|
margin-top: -251px;
|
|
margin-left: calc(((100% - 340px) / 2) + -38px);
|
|
}
|
|
|
|
.u-section-1 .u-btn-1 {
|
|
margin-top: -571px;
|
|
margin-right: calc(((100% - 340px) / 2));
|
|
}
|
|
|
|
.u-section-1 .u-image-4 {
|
|
margin-top: 146px;
|
|
margin-left: calc(((100% - 340px) / 2) + -17px);
|
|
}
|
|
|
|
.u-section-1 .u-image-5 {
|
|
margin-top: 9px;
|
|
}
|
|
|
|
.u-section-1 .u-image-6 {
|
|
margin-left: calc(((100% - 340px) / 2) + -99px);
|
|
}
|
|
|
|
.u-section-1 .u-image-7 {
|
|
margin-top: 203px;
|
|
margin-right: calc(((100% - 340px) / 2) + -28px);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.u-section-1 .u-image-8 {
|
|
margin-top: 308px;
|
|
margin-right: calc(((100% - 340px) / 2) + -32px);
|
|
margin-left: calc(((100% - 340px) / 2) + 52px);
|
|
}
|
|
|
|
.u-section-1 .u-image-9 {
|
|
margin-top: -1091px;
|
|
margin-right: auto;
|
|
margin-left: calc(((100% - 340px) / 2) + -17px);
|
|
}
|
|
|
|
.u-section-1 .u-text-1 {
|
|
margin-top: 373px;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.u-section-1 .u-image-10 {
|
|
margin-top: 472px;
|
|
margin-left: calc(((100% - 340px) / 2) + 22px);
|
|
}
|
|
|
|
.u-section-1 .u-image-11 {
|
|
margin-left: calc(((100% - 340px) / 2) + -114px);
|
|
}
|
|
} |