diff --git a/public/themes/dist_static/static/css/news.css b/public/themes/dist_static/static/css/news.css index 92e1be1..80fe21e 100644 --- a/public/themes/dist_static/static/css/news.css +++ b/public/themes/dist_static/static/css/news.css @@ -264,6 +264,63 @@ border-top-color: var(--color-primary); } +/* 全部 Tab 内混排的企业视频:沿用 n-card 大布局,微调播放态 */ +.n-card--video .n-card__top::after { + content: ""; + display: block; + padding-top: 1.5rem; + border-top: 1px solid rgb(223, 224, 226); + transition: border-color var(--duration-fast) var(--easing); +} +.n-card--video:hover .n-card__top::after { + border-top-color: var(--color-primary); +} +.n-card--video .n-card__media { + position: relative; +} +.n-card__duration { + position: absolute; + left: 1rem; + bottom: 1rem; + z-index: 2; + padding: 0.375rem 0.5rem; + border-radius: 0.5rem; + background: rgba(46, 53, 58, 0.45); + color: var(--color-white, #fff); + font-family: "D-DIN-PRO", "MiSans VF", "PingFang SC", sans-serif; + font-size: var(--font-14); + font-weight: 400; + line-height: var(--font-18); + backdrop-filter: blur(0.25rem); +} +.n-card__play { + position: absolute; + top: 50%; + left: 50%; + z-index: 2; + display: flex; + align-items: center; + justify-content: center; + width: 3rem; + height: 3rem; + border-radius: 50%; + background: rgba(255, 255, 255, 0.28); + backdrop-filter: blur(0.375rem); + transform: translate(-50%, -50%); + transition: background 0.25s ease, transform 0.25s ease; + pointer-events: none; +} +.n-card__play img { + display: block; + width: 1rem; + height: auto; + margin-left: 0.125rem; +} +.n-card--video:hover .n-card__play { + background: rgba(255, 255, 255, 0.4); + transform: translate(-50%, -50%) scale(1.06); +} + /* 企业视频卡片(设计稿) */ .n-grid--video { gap: 2.5rem; diff --git a/public/themes/dist_static/static/js/news2.js b/public/themes/dist_static/static/js/news2.js index a013929..dde8bfb 100644 --- a/public/themes/dist_static/static/js/news2.js +++ b/public/themes/dist_static/static/js/news2.js @@ -67,7 +67,7 @@ function initNewsTabs() { updateFeaturedSwiper(); } function newsCardClick() { - $(".n-card, .n-featured").on("click", function(event) { + $(".n-card:not(.n-card--video), .n-featured").on("click", function(event) { if ($(event.target).closest("a, button").length) return; const $root = $(this); const href = $root.hasClass("n-featured") ? $root.find(".swiper-slide-active a[href]").attr("href") : $root.find("a[href]").first().attr("href"); @@ -100,14 +100,14 @@ function initNewsVideoModal() { if (window.lenis?.start) window.lenis.start(); if (lastFocus && typeof lastFocus.focus === "function") lastFocus.focus(); }; - document.querySelectorAll(".n-v-card").forEach((card) => { + const bindCard = (card) => { card.addEventListener("click", () => { - openModal( - card.getAttribute("data-video-src") || "", - card.querySelector(".n-v-card__title")?.textContent?.trim() || "" - ); + const title = + card.querySelector(".n-v-card__title, .n-card__title")?.textContent?.trim() || ""; + openModal(card.getAttribute("data-video-src") || "", title); }); - }); + }; + document.querySelectorAll(".n-v-card, .n-card--video").forEach(bindCard); modal.querySelectorAll("[data-n-v-modal-close]").forEach((el) => { el.addEventListener("click", closeModal); }); diff --git a/public/themes/website/1/en/demo/news.html b/public/themes/website/1/en/demo/news.html index c0ae253..398bced 100644 --- a/public/themes/website/1/en/demo/news.html +++ b/public/themes/website/1/en/demo/news.html @@ -197,19 +197,32 @@ {else /} -
+ {php} + $is_item_video = ($news_video_id !== '' && $news_video_id !== '0' && (string)($vo_content['category_id'] ?? '') === $news_video_id); + {/php} +

{$vo_content.title}

+ {if !$is_item_video} Explore more + {/if}
+ {if $is_item_video} + {notempty name="description"} + {$description} + {/notempty} + + {/if}
{/if} @@ -230,7 +243,6 @@ {$hc_content|raw} {/if} - {if $is_news_video} - {/if} diff --git a/public/themes/website/1/zh/demo/news.html b/public/themes/website/1/zh/demo/news.html index 608ca8d..3c3f4b8 100644 --- a/public/themes/website/1/zh/demo/news.html +++ b/public/themes/website/1/zh/demo/news.html @@ -197,19 +197,32 @@ {else /} -
+ {php} + $is_item_video = ($news_video_id !== '' && $news_video_id !== '0' && (string)($vo_content['category_id'] ?? '') === $news_video_id); + {/php} +

{$vo_content.title}

+ {if !$is_item_video} 探索更多 + {/if}
+ {if $is_item_video} + {notempty name="description"} + {$description} + {/notempty} + + {/if}
{/if} @@ -230,7 +243,6 @@ {$hc_content|raw} {/if} - {if $is_news_video} - {/if}