wjd
/
rui-neng
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(video): 添加企业视频卡片样式和交互逻辑

master
peijunlei 2 weeks ago
parent
e5c0ad3eae
commit
6cfecfd21e
4 changed files with 92 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 57
      public/themes/dist_static/static/css/news.css
  2. 14
      public/themes/dist_static/static/js/news2.js
  3. 17
      public/themes/website/1/en/demo/news.html
  4. 17
      public/themes/website/1/zh/demo/news.html

57
public/themes/dist_static/static/css/news.css
View File

@ -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;

14
public/themes/dist_static/static/js/news2.js
View File

@ -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);
});

17
public/themes/website/1/en/demo/news.html
View File

@ -197,19 +197,32 @@
<time class="n-v-card__date" datetime="{$create_time_str}">{$create_time_str|date='Y-m-d'}</time>
</button>
{else /}
<article class="n-card" data-category="insight">
{php}
$is_item_video = ($news_video_id !== '' && $news_video_id !== '0' && (string)($vo_content['category_id'] ?? '') === $news_video_id);
{/php}
<article class="n-card{if $is_item_video} n-card--video{/if}" data-category="{if $is_item_video}video{else /}insight{/if}"{if $is_item_video} data-video-src="{$vo_content['cover']['url'] ?? ''}"{/if}>
<div class="n-card__top">
<time class="n-card__date" datetime="{$create_time_str}">{:date('Y-m-d',strtotime($create_time_str)) ?? ''}</time>
<h3 class="n-card__title">{$vo_content.title}</h3>
{if !$is_item_video}
<a class="n-link n-link--sm" href="{:hcUrl('detail/index',['id'=>$vo_content['id'],'cid'=>$vo_content['category_id']])}">
<span>Explore more</span>
<img
src="data:image/svg+xml,%3csvg%20viewBox='0%200%2016.502%206.66113'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='16.501953'%20height='6.661133'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='箭头%202'%20d='M0%202.83057L16%202.83057L16%203.83057L0%203.83057L0%202.83057ZM15.2929%203.33057L12.818%200.855693C12.62%200.657703%2012.62%200.346575%2012.818%200.148586C13.016%20-0.0494041%2013.3271%20-0.0494046%2013.5251%200.148585L16.3536%202.97701C16.5515%203.175%2016.5515%203.48613%2016.3536%203.68412L13.5251%206.51255C13.3271%206.71054%2013.016%206.71054%2012.818%206.51255C12.62%206.31456%2012.62%206.00343%2012.818%205.80544L15.2929%203.33057Z'%20fill='rgb(102,102,102)'%20fill-rule='nonzero'%20/%3e%3c/svg%3e"
alt="" width="16" height="7" />
</a>
{/if}
</div>
<div class="n-card__media">
<img src="{$vo_content['thumbnail']['url'] ?? ''}" alt="" loading="lazy" />
{if $is_item_video}
{notempty name="description"}
<span class="n-card__duration">{$description}</span>
{/notempty}
<span class="n-card__play" aria-hidden="true">
<img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2013.5386%2016'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='13.538574'%20height='16.000000'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='多边形%201'%20d='M8.86093%201.45695L15.1085%2012.0297C15.5024%2012.6963%2015.0219%2013.5384%2014.2476%2013.5384L1.75245%2013.5384C0.978149%2013.5384%200.497614%2012.6963%200.891523%2012.0297L7.13907%201.45695C7.52614%200.801924%208.47387%200.801924%208.86093%201.45695Z'%20fill='rgb(255,255,255)'%20fill-rule='evenodd'%20transform='matrix(0,1,-1,0,13.5386,0)'%20/%3e%3c/svg%3e" alt="" width="14" height="16" />
</span>
{/if}
</div>
</article>
{/if}
@ -230,7 +243,6 @@
{$hc_content|raw}
{/if}
{if $is_news_video}
<div class="n-v-modal" id="n-v-modal" hidden>
<div class="n-v-modal__backdrop" data-n-v-modal-close></div>
<div class="n-v-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="n-v-modal-title">
@ -245,7 +257,6 @@
</div>
</div>
</div>
{/if}
</div>
</main>

17
public/themes/website/1/zh/demo/news.html
View File

@ -197,19 +197,32 @@
<time class="n-v-card__date" datetime="{$create_time_str}">{$create_time_str|date='Y-m-d'}</time>
</button>
{else /}
<article class="n-card" data-category="insight">
{php}
$is_item_video = ($news_video_id !== '' && $news_video_id !== '0' && (string)($vo_content['category_id'] ?? '') === $news_video_id);
{/php}
<article class="n-card{if $is_item_video} n-card--video{/if}" data-category="{if $is_item_video}video{else /}insight{/if}"{if $is_item_video} data-video-src="{$vo_content['cover']['url'] ?? ''}"{/if}>
<div class="n-card__top">
<time class="n-card__date" datetime="{$create_time_str}">{:date('Y-m-d',strtotime($create_time_str)) ?? ''}</time>
<h3 class="n-card__title">{$vo_content.title}</h3>
{if !$is_item_video}
<a class="n-link n-link--sm" href="{:hcUrl('detail/index',['id'=>$vo_content['id'],'cid'=>$vo_content['category_id']])}">
<span>探索更多</span>
<img
src="data:image/svg+xml,%3csvg%20viewBox='0%200%2016.502%206.66113'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='16.501953'%20height='6.661133'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='箭头%202'%20d='M0%202.83057L16%202.83057L16%203.83057L0%203.83057L0%202.83057ZM15.2929%203.33057L12.818%200.855693C12.62%200.657703%2012.62%200.346575%2012.818%200.148586C13.016%20-0.0494041%2013.3271%20-0.0494046%2013.5251%200.148585L16.3536%202.97701C16.5515%203.175%2016.5515%203.48613%2016.3536%203.68412L13.5251%206.51255C13.3271%206.71054%2013.016%206.71054%2012.818%206.51255C12.62%206.31456%2012.62%206.00343%2012.818%205.80544L15.2929%203.33057Z'%20fill='rgb(102,102,102)'%20fill-rule='nonzero'%20/%3e%3c/svg%3e"
alt="" width="16" height="7" />
</a>
{/if}
</div>
<div class="n-card__media">
<img src="{$vo_content['thumbnail']['url'] ?? ''}" alt="" loading="lazy" />
{if $is_item_video}
{notempty name="description"}
<span class="n-card__duration">{$description}</span>
{/notempty}
<span class="n-card__play" aria-hidden="true">
<img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2013.5386%2016'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='13.538574'%20height='16.000000'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='多边形%201'%20d='M8.86093%201.45695L15.1085%2012.0297C15.5024%2012.6963%2015.0219%2013.5384%2014.2476%2013.5384L1.75245%2013.5384C0.978149%2013.5384%200.497614%2012.6963%200.891523%2012.0297L7.13907%201.45695C7.52614%200.801924%208.47387%200.801924%208.86093%201.45695Z'%20fill='rgb(255,255,255)'%20fill-rule='evenodd'%20transform='matrix(0,1,-1,0,13.5386,0)'%20/%3e%3c/svg%3e" alt="" width="14" height="16" />
</span>
{/if}
</div>
</article>
{/if}
@ -230,7 +243,6 @@
{$hc_content|raw}
{/if}
{if $is_news_video}
<div class="n-v-modal" id="n-v-modal" hidden>
<div class="n-v-modal__backdrop" data-n-v-modal-close></div>
<div class="n-v-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="n-v-modal-title">
@ -245,7 +257,6 @@
</div>
</div>
</div>
{/if}
</div>
</main>

Write Preview
Loading…
Cancel
Save