Initial commit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-29 11:47:47 +07:00
commit 0fbdba5ccf
622 changed files with 72105 additions and 0 deletions
@@ -0,0 +1,155 @@
+/* 公共广告位统一规范
+ * PC：双列，固定高 169
+ * H5：单列两行，宽度 100%（占满所属内容容器），比例 343/98
+ */
+
+.promo-rail {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 24px 0;
+  box-sizing: border-box;
+}
+
+.promo-card {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  height: 169px;
+  border-radius: var(--radius-md);
+  background: #232328;
+  box-sizing: border-box;
+}
+
+.promo-card img {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.promo-card__tag {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 1;
+}
+
+/* 页面广告容器：默认占满一行 */
+.play-promo,
+.list-promo,
+.list-mid-promo,
+.list-bottom-promo,
+.series-list-promo {
+  flex: 0 0 100%;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.play-promo .promo-rail {
+  padding: 12px 0;
+}
+
+.play-promo--bottom .promo-rail {
+  padding: 12px 0 0;
+}
+
+.list-bottom-promo {
+  padding-bottom: 24px;
+}
+
+@media (max-width: 768px) {
+  /* H5：纵向两行，宽度 100% */
+  .promo-rail {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    padding: 8px 0;
+  }
+
+  .promo-card {
+    flex: 0 0 auto;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    min-height: 98px;
+    aspect-ratio: 343 / 98;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--line-soft);
+  }
+
+  .promo-card img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    object-fit: cover;
+  }
+
+  .promo-card__tag {
+    top: 8px;
+    right: 8px;
+  }
+
+  /* 与页面内容区 gutter 对齐（首页 .main > .promo-rail、播放页、列表底部） */
+  .main > .promo-rail,
+  .play-promo,
+  .list-bottom-promo {
+    padding-left: var(--h5-gutter, 16px);
+    padding-right: var(--h5-gutter, 16px);
+  }
+
+  .play-promo {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+
+  .play-promo .promo-rail,
+  .play-promo--bottom .promo-rail,
+  .list-bottom-promo .promo-rail,
+  .main > .promo-rail {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .play-promo--bottom {
+    padding-top: 8px;
+    padding-bottom: 0;
+  }
+
+  .list-bottom-promo {
+    padding-top: 0;
+    padding-bottom: 8px;
+  }
+
+  /* 已在带 gutter 的 list-body / grid 内：不再重复左右边距 */
+  .list-body .promo-rail,
+  .list-body .list-mid-promo,
+  .list-body .list-promo,
+  .list-body .series-list-promo,
+  .grid--list .list-mid-promo,
+  .grid--series-list .series-list-promo {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .list-mid-promo.only-h5,
+  .series-list-promo.only-h5 {
+    display: block !important;
+  }
+}