|
|
@@ -71,24 +71,24 @@ const cases = [
|
|
|
.case-container {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
- height: 800PX;
|
|
|
+ height: 800px;
|
|
|
background: url('/images/products/case-bg.png') no-repeat center;
|
|
|
background-size: cover;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- margin-bottom: 140PX;
|
|
|
+ margin-bottom: 140px;
|
|
|
|
|
|
&::before {
|
|
|
position: absolute;
|
|
|
content: '应用场景';
|
|
|
- top: -45PX;
|
|
|
+ top: -45px;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
- font-size: 45PX;
|
|
|
+ font-size: 45px;
|
|
|
font-style: normal;
|
|
|
font-weight: 500;
|
|
|
- line-height: 45PX;
|
|
|
+ line-height: 45px;
|
|
|
background: linear-gradient(91deg, #B8AFFF 10.8%, #C597FF 108.3%);
|
|
|
background-clip: text;
|
|
|
-webkit-background-clip: text;
|
|
|
@@ -97,41 +97,41 @@ const cases = [
|
|
|
|
|
|
.case-cards {
|
|
|
width: 100%;
|
|
|
- max-width: 1200PX;
|
|
|
- margin-top: 60PX;
|
|
|
+ max-width: 1200px;
|
|
|
+ margin-top: 60px;
|
|
|
}
|
|
|
|
|
|
.card-content {
|
|
|
display: flex;
|
|
|
- gap: 80PX;
|
|
|
+ gap: 80px;
|
|
|
align-items: flex-start;
|
|
|
}
|
|
|
|
|
|
.tabs-list {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- gap: 24PX;
|
|
|
- width: 224PX;
|
|
|
+ gap: 24px;
|
|
|
+ width: 224px;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
.tab-item {
|
|
|
- height: 72PX;
|
|
|
+ height: 72px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- border-radius: 8PX;
|
|
|
- border: 1PX solid rgba(255, 255, 255, 0.20);
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.20);
|
|
|
background: rgba(255, 255, 255, 0.10);
|
|
|
color: rgba(255, 255, 255, 0.60);
|
|
|
;
|
|
|
cursor: pointer;
|
|
|
- font-size: 26PX;
|
|
|
+ font-size: 26px;
|
|
|
font-weight: 400;
|
|
|
- line-height: 26PX;
|
|
|
+ line-height: 26px;
|
|
|
|
|
|
&:hover {
|
|
|
- border-radius: 8PX;
|
|
|
+ border-radius: 8px;
|
|
|
background: linear-gradient(91deg, #A39DFF 1.24%, #7D46FF 122.93%);
|
|
|
}
|
|
|
|
|
|
@@ -145,46 +145,46 @@ const cases = [
|
|
|
.tab-content {
|
|
|
flex: 1;
|
|
|
color: #fff;
|
|
|
- height: 500PX; // Fixed height to prevent jitter
|
|
|
+ height: 500px; // Fixed height to prevent jitter
|
|
|
}
|
|
|
|
|
|
.content-wrapper {
|
|
|
display: flex;
|
|
|
align-items: stretch;
|
|
|
/* 让左右两列在高度上保持一致(无 JS) */
|
|
|
- gap: 36PX;
|
|
|
+ gap: 36px;
|
|
|
}
|
|
|
|
|
|
.text-content {
|
|
|
- width: 540PX;
|
|
|
+ width: 540px;
|
|
|
flex-shrink: 0;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- gap: 18PX;
|
|
|
+ gap: 18px;
|
|
|
justify-content: center;
|
|
|
|
|
|
.title {
|
|
|
- font-size: 36PX;
|
|
|
+ font-size: 36px;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.description {
|
|
|
- font-size: 18PX;
|
|
|
+ font-size: 18px;
|
|
|
font-weight: 400;
|
|
|
- line-height: 36PX;
|
|
|
- margin-bottom: 38PX;
|
|
|
+ line-height: 36px;
|
|
|
+ margin-bottom: 38px;
|
|
|
}
|
|
|
|
|
|
|
|
|
.value-desc {
|
|
|
- font-size: 18PX;
|
|
|
+ font-size: 18px;
|
|
|
font-weight: 400;
|
|
|
- line-height: 36PX;
|
|
|
+ line-height: 36px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.image-content {
|
|
|
- max-width: 540PX;
|
|
|
+ max-width: 540px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|