jsasg/orico-official-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

调整
All checks were successful
Gitea Actions Official-website / deploy-dev (push) Successful in 3s
Details

Browse Source
This commit is contained in:
liqian
2025-12-18 16:16:47 +08:00
parent b7e09aeb04
commit d9000fbe1c
14 changed files with 309 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
public/static/index/pc/css/topic_laptop/amd.css
View File

@@ -1,16 +1,16 @@
.amd-box {
width: 100%;
width: auto;
background: #000;
overflow: hidden;
max-width: 1440px;
min-width: 1280px;
/* overflow: hidden; */
max-width: 14.4rem;
/* min-width: 1280px; */
margin: 0 auto;
margin-top:-2rem;
}
.amd-img-box {
width: 100%;
max-width: 14.4rem;
/* 移除height:100%，避免继承高度导致比例失效 */
}
@@ -21,7 +21,7 @@
.amd-img-4,
.amd-img-5,
.amd-img-6 {
width: 100%;
max-width: 14.4rem;
}
.amd-img-2,
@@ -29,7 +29,7 @@
.amd-img-4,
.amd-img-5,
.amd-img-6 {
margin-top:0.15rem;
margin-top:0.2rem;
}
.fade-in {
opacity: 1 !important;
@@ -39,15 +39,9 @@
/* 原有图片样式（重点修改） */
.amd-img-1-1 {
max-width: 14.4rem;
width: 100%;
/* 移除height:100%，改用auto保持比例 */
height: auto;
/* aspect-ratio: 1440/429; */
display: block;
width: 14.4rem;
display: block;
}
.amd-img-2 {
display: flex;
gap: 0.2rem;
@@ -58,17 +52,12 @@
.amd-img-2-2 {
flex: 1;
width: 50%;
/* 固定宽高比：710/210 ≈ 3.38，反向则210/710≈29.58% */
/* aspect-ratio: 711/261; */
overflow: hidden; /* 裁剪超出部分（可选） */
}
.amd-img-2-1 img,
.amd-img-2-2 img {
width: 100%;
height: 100%;
width: 7.11rem;
display: block;
aspect-ratio: 711/261;
}
.amd-img-3 {
@@ -90,7 +79,7 @@
}
.amd-img-3-left img {
display: block;
aspect-ratio: 711/541;
width: 7.11rem;
}
@@ -102,49 +91,41 @@
.amd-img-3-1-right img,
.amd-img-3-2-right img {
width: 100%;
width: 7.11rem;
height: 100%;
display: block;
aspect-ratio: 711/261;
}
/* 统一处理其他图片容器的比例 */
.amd-img-4 {
max-width: 1440px;
aspect-ratio: 1440/178; /* 按原始1440:178比例固定 */
width: 14.4rem;
}
.amd-img-4 img {
width: 100%;
height: 100%;
/* object-fit: cover; */
display: block;
}
.amd-img-5 {
max-width: 1440px;
/* max-width: 1440px; */
width: 100%;
display: flex;
gap: 0.2rem;
aspect-ratio: 1440/260; /* 1440:260比例 */
}
.amd-img-5 img {
flex: 1;
width: 50%;
height: 100%;
/* object-fit: cover; */
width: 7.11rem;
display: block;
}
.amd-img-6 {
max-width: 1440px;
aspect-ratio: 1440/260; /* 1440:260比例 */
overflow: hidden;
width: 14.4rem;
}
.amd-img-6 img {
width: 100%;
height: 100%;
/* object-fit: cover; */
display: block;
}