375 lines
7.8 KiB
SCSS
375 lines
7.8 KiB
SCSS
.factory {
|
|
margin-top: -58px;
|
|
font-family: alibabareg;
|
|
background: #f1f6fd;
|
|
|
|
&-banner {
|
|
width: 100vw;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background-color: #000316;
|
|
|
|
// background-image: url("../images/factory/banner1.png");
|
|
// background-size: cover;
|
|
// /* 确保图片完整显示不被拉伸 */
|
|
// background-repeat: no-repeat;
|
|
// background-position: top center;
|
|
// /* 可选：将图片居中显示 */
|
|
|
|
.video-wpapper {
|
|
width: 100%;
|
|
}
|
|
|
|
&-video {
|
|
width: 100%;
|
|
display: none;
|
|
}
|
|
|
|
.video-show {
|
|
display: block;
|
|
}
|
|
|
|
.banner-content {
|
|
position: absolute;
|
|
top: 60vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: 40vh;
|
|
|
|
.h-wrapper {
|
|
--delay-factor: 0.45;
|
|
transition: transform 0.1s ease-out;
|
|
transform: translateY(calc(var(--scroll-delay) * 1px)) !important;
|
|
}
|
|
|
|
h1 {
|
|
line-height: normal;
|
|
font-family: "DouyinSansBold";
|
|
font-weight: 700;
|
|
font-size: 76px;
|
|
color: #ffffff;
|
|
opacity: 0;
|
|
transform: scaleX(2) scaley(1.5);
|
|
animation: headerShow 2s ease-in-out forwards;
|
|
animation-delay: 2s;
|
|
margin-bottom: 10px;
|
|
letter-spacing: 10px;
|
|
}
|
|
|
|
.p-wrapper {
|
|
--delay-factor: 0.5;
|
|
transition: transform 0.1s ease-out;
|
|
transform: translateY(calc(var(--scroll-delay) * 1px)) !important;
|
|
}
|
|
|
|
|
|
p {
|
|
opacity: 0;
|
|
color: #ffffffd3;
|
|
line-height: 36px;
|
|
font-family: alibabareg;
|
|
font-size: 20px;
|
|
width: 635px;
|
|
text-align: center;
|
|
animation: fadeInUp 2s ease-in-out forwards;
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
.b-wrapper {
|
|
--delay-factor: 0.5;
|
|
transition: transform 0.2s ease-out !important;
|
|
transform: translateY(calc(var(--scroll-delay) * 1px)) !important;
|
|
display: flex;
|
|
|
|
a:nth-child(2) {
|
|
div {
|
|
background: url('../images/factory/header-button.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
margin-right: 0;
|
|
&::after {
|
|
opacity: 0;
|
|
}
|
|
&::before {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
a {
|
|
margin-top: 50px;
|
|
|
|
}
|
|
|
|
&-button {
|
|
margin-right: 50px;
|
|
opacity: 0;
|
|
width: 230px;
|
|
height: 64px;
|
|
background: linear-gradient(90deg, #5b47f2 1.89%, #164ce4 97.65%);
|
|
border-radius: 29px;
|
|
box-shadow: 0px -3px 12px rgba(255, 255, 255, 0.45) inset;
|
|
position: relative;
|
|
font-family: alibaba;
|
|
color: #ffffff;
|
|
font-size: 19px;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
line-height: 58px;
|
|
animation: fadeInUp 2s ease-in-out forwards;
|
|
animation-delay: 2s;
|
|
|
|
&::before {
|
|
z-index: 1;
|
|
content: '';
|
|
opacity: 0.9;
|
|
width: 138px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
height: 2px;
|
|
/* 边框的高度 */
|
|
background: linear-gradient(90.02deg, rgba(255, 255, 255, 0) 0%, #ffffff 46.97%, rgba(255, 255, 255, 0) 99.63%);
|
|
}
|
|
|
|
&::after {
|
|
z-index: 1;
|
|
content: '';
|
|
width: 138px;
|
|
position: absolute;
|
|
opacity: 0.9;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
height: 1px;
|
|
/* 边框的高度 */
|
|
background: linear-gradient(90.02deg, rgba(255, 255, 255, 0) 0%, #ffffff 46.97%, rgba(255, 255, 255, 0) 99.63%);
|
|
}
|
|
}
|
|
|
|
&-more {
|
|
opacity: 0;
|
|
margin-top: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-bottom: 20px;
|
|
animation: mouseShow 1s forwards;
|
|
animation-delay: 4s;
|
|
--delay-factor: 0.05;
|
|
transition: transform 0.3s ease-out;
|
|
transform: translateY(calc(var(--scroll-delay) * 1px)) !important;
|
|
|
|
div {
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: "";
|
|
width: 3px;
|
|
height: 8px;
|
|
background: #ffffff;
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
animation: mouse 1.5s ease-out infinite;
|
|
}
|
|
}
|
|
|
|
img {
|
|
width: 27px;
|
|
}
|
|
|
|
span {
|
|
opacity: 0.85;
|
|
line-height: 20px;
|
|
font-family: alibabareg;
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.banner-2 {
|
|
height: 100vh;
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 100vh;
|
|
}
|
|
|
|
.hide {
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
.banner-data {
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
height: 151px;
|
|
background: linear-gradient(90.18deg, rgba(255, 255, 255, 0) 0.01%, rgba(53, 111, 211, 0.39) 48.04%, rgba(255, 255, 255, 0) 99.56%);
|
|
backdrop-filter: blur(25px);
|
|
display: flex;
|
|
padding: 0 160px;
|
|
justify-content: space-between;
|
|
|
|
.data-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
position: relative;
|
|
width: 20%;
|
|
|
|
&-value {
|
|
line-height: normal;
|
|
font-family: ziyouwenyihei;
|
|
color: #ffffff;
|
|
font-size: 40px;
|
|
|
|
span {
|
|
font-weight: 500;
|
|
color: #4de997;
|
|
font-size: 15px;
|
|
font-family: alibabareg;
|
|
}
|
|
}
|
|
|
|
&-name {
|
|
width: 100%;
|
|
color: #ffffff;
|
|
font-size: 15px;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
opacity: 29%;
|
|
width: 1.5px;
|
|
height: 65px;
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 49.65%, rgba(255, 255, 255, 0) 100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-module {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.module-title {
|
|
opacity: 0;
|
|
font-family: alibabaBold;
|
|
color: #091221;
|
|
font-size: 44px;
|
|
margin-bottom: 10px;
|
|
line-height: 50px;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
|
|
.animate-active {
|
|
|
|
.module-title,
|
|
video,
|
|
.news-1-left,
|
|
.news-1-right,
|
|
.resource2-content-left,
|
|
.resource2-content-right,
|
|
.scene-list {
|
|
animation: fadeInUp 0.8s ease-out forwards;
|
|
}
|
|
|
|
.resource-container,
|
|
.feature-container {
|
|
animation: resourceShow 0.8s ease-in-out forwards;
|
|
}
|
|
|
|
video,
|
|
.news-1-left,
|
|
.resource2-content-left,
|
|
.scene-list {
|
|
animation-delay: 0.2s; // 延迟 0.2s 执行
|
|
}
|
|
|
|
.news-1-right,
|
|
.resource2-content-right {
|
|
animation-delay: 0.4s; // 延迟 0.2s 执行
|
|
}
|
|
}
|
|
|
|
&-video {
|
|
margin-top: 83px;
|
|
|
|
video {
|
|
opacity: 0;
|
|
margin-top: 31px;
|
|
width: 1144px;
|
|
height: 654px;
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
|
|
.pin-spacer {
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(50px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes resourceShow {
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes headerShow {
|
|
to {
|
|
opacity: 1;
|
|
transform: scalex(1) scaleY(1);
|
|
}
|
|
}
|
|
|
|
@keyframes mouse {
|
|
50% {
|
|
top: 8px
|
|
}
|
|
|
|
to {
|
|
top: 16px;
|
|
}
|
|
}
|
|
|
|
@keyframes mouseShow {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
} |