fix: 主图1产品图片放大,四周更均匀

This commit is contained in:
12600k-rog-d4
2026-04-04 22:45:27 +08:00
parent c45b8eacd0
commit 4506f90d3d
3 changed files with 18 additions and 11 deletions

View File

@@ -60,10 +60,10 @@
margin-top: 6px;
letter-spacing: 3px;
}
/* 产品展示台 - 更大 */
/* 产品展示台 */
.product-stage {
width: 600px;
height: 480px;
height: 500px;
background: rgba(255,255,255,0.08);
border-radius: 25px;
display: flex;
@@ -76,17 +76,23 @@
box-shadow:
0 20px 60px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.1);
overflow: hidden;
}
/* 产品图片 - 放大 */
/* 产品图片 - 放大并裁剪 */
.product-img-wrapper {
position: relative;
padding: 15px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.product-img {
max-width: 520px;
max-height: 420px;
object-fit: contain;
border-radius: 12px;
width: 580px;
height: 480px;
object-fit: cover;
object-position: center;
border-radius: 10px;
box-shadow:
0 15px 40px rgba(0,0,0,0.4),
0 0 0 1px rgba(255,255,255,0.1);
@@ -97,9 +103,10 @@
top: 100%;
left: 50%;
transform: translateX(-50%) scaleY(-1);
max-width: 520px;
max-height: 420px;
object-fit: contain;
width: 580px;
height: 100px;
object-fit: cover;
object-position: center bottom;
opacity: 0.12;
filter: blur(3px);
mask-image: linear-gradient(to top, rgba(0,0,0,0.3), transparent);