广告修改
This commit is contained in:
谢宇宁
@@ -737,13 +737,13 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Figma: 1431×178 banner frame — stretch, 178px, radius 12, image cover-crop */
|
||||
/* 详情横幅：按素材 720×150 等比展示，避免裁切 */
|
||||
.content-ad-stack a {
|
||||
display: block;
|
||||
position: relative;
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
height: 178px;
|
||||
aspect-ratio: 720 / 150;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
}
|
||||
@@ -865,7 +865,6 @@
|
||||
.content-ad-stack { gap: calc(12px * var(--detail-s)); }
|
||||
|
||||
.content-ad-stack a {
|
||||
height: calc(166px * var(--detail-s));
|
||||
border-radius: calc(12px * var(--detail-s));
|
||||
}
|
||||
|
||||
@@ -1001,9 +1000,11 @@
|
||||
.detail-h5-top-actions,
|
||||
.square-promo--pc-only,
|
||||
.content-official-info,
|
||||
.content-ad-stack,
|
||||
.content-column-divider { display: none !important; }
|
||||
|
||||
.content-ad-stack { gap: 10px; }
|
||||
.content-ad-stack a { border-radius: 8px; }
|
||||
|
||||
.detail-layout,
|
||||
.detail-main,
|
||||
.detail-sidebar { display: contents; }
|
||||
|
||||
@@ -1,100 +0,0 @@
|
||||
/* Shared home banner ad row (PC 2-col flex / H5 stack). */
|
||||
|
||||
/* PC Figma: stretch row, 94px, gap 36, two equal flex slots */
|
||||
.home-ad-row {
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
gap: 36px;
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-ad-row.home-ad-row--mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.home-ad-row .home-ad-banner {
|
||||
position: relative;
|
||||
flex: 1 1 calc((100% - 36px) / 2);
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
max-width: calc((100% - 36px) / 2);
|
||||
height: 94px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-ad-row .home-ad-banner img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.home-ad-row {
|
||||
gap: 36px;
|
||||
}
|
||||
|
||||
.home-ad-row .home-ad-banner {
|
||||
flex: 1 1 calc((100% - 36px) / 2);
|
||||
max-width: calc((100% - 36px) / 2);
|
||||
height: 94px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.home-ad-row .home-ad-banner img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.home-ad-row,
|
||||
.home-ad-row.home-ad-row--mobile {
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
align-self: stretch;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.home-ad-row.home-ad-row--desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* H5 Figma: 343×43 banner — stretch, 43px, radius 6, image cover-crop */
|
||||
.home-ad-row .home-ad-banner {
|
||||
position: relative;
|
||||
align-self: stretch;
|
||||
flex: 0 0 43px;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: 43px;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.home-ad-row .home-ad-banner img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
background: #464646;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
/* 九宫格弹窗：深色模糊遮罩 + 4 列应用图标 + 底部关闭按钮（对齐 huangguocg.com） */
|
||||
.nine-grid-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1900;
|
||||
padding: 40px 24px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
backdrop-filter: blur(12px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nine-grid-mask.is-open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nine-grid-panel {
|
||||
width: min(520px, 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.nine-grid-list {
|
||||
width: 100%;
|
||||
max-height: 70vh;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 28px 24px;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.nine-grid-item {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nine-grid-item[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nine-grid-icon {
|
||||
width: 100%;
|
||||
max-width: 80px;
|
||||
aspect-ratio: 1;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.nine-grid-name {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nine-grid-close {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nine-grid-close img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.nine-grid-panel {
|
||||
width: min(360px, 100%);
|
||||
}
|
||||
|
||||
.nine-grid-list {
|
||||
gap: 20px 12px;
|
||||
}
|
||||
|
||||
.nine-grid-icon {
|
||||
max-width: 70px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.nine-grid-name {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
@@ -2784,7 +2784,6 @@ a.play-info-tag:focus-visible {
|
||||
|
||||
.square-promo--pc-only,
|
||||
.content-official-info,
|
||||
.content-ad-stack,
|
||||
.content-column-divider,
|
||||
.play-sidebar,
|
||||
.play-download-btn { display: none !important; }
|
||||
|
||||
Reference in New Issue
Block a user