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
Unified 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); 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 { .n-grid--video {
gap: 2.5rem; gap: 2.5rem;

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

@ -67,7 +67,7 @@ function initNewsTabs() {
updateFeaturedSwiper(); updateFeaturedSwiper();
} }
function newsCardClick() { 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; if ($(event.target).closest("a, button").length) return;
const $root = $(this); 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"); 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 (window.lenis?.start) window.lenis.start();
if (lastFocus && typeof lastFocus.focus === "function") lastFocus.focus(); if (lastFocus && typeof lastFocus.focus === "function") lastFocus.focus();
}; };
document.querySelectorAll(".n-v-card").forEach((card) => {
const bindCard = (card) => {
card.addEventListener("click", () => { 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) => { modal.querySelectorAll("[data-n-v-modal-close]").forEach((el) => {
el.addEventListener("click", closeModal); 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> <time class="n-v-card__date" datetime="{$create_time_str}">{$create_time_str|date='Y-m-d'}</time>
</button> </button>
{else /} {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"> <div class="n-card__top">
<time class="n-card__date" datetime="{$create_time_str}">{:date('Y-m-d',strtotime($create_time_str)) ?? ''}</time> <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> <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']])}"> <a class="n-link n-link--sm" href="{:hcUrl('detail/index',['id'=>$vo_content['id'],'cid'=>$vo_content['category_id']])}">
<span>Explore more</span> <span>Explore more</span>
<img <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" 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" /> alt="" width="16" height="7" />
</a> </a>
{/if}
</div> </div>
<div class="n-card__media"> <div class="n-card__media">
<img src="{$vo_content['thumbnail']['url'] ?? ''}" alt="" loading="lazy" /> <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> </div>
</article> </article>
{/if} {/if}
@ -230,7 +243,6 @@
{$hc_content|raw} {$hc_content|raw}
{/if} {/if}
{if $is_news_video}
<div class="n-v-modal" id="n-v-modal" hidden> <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__backdrop" data-n-v-modal-close></div>
<div class="n-v-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="n-v-modal-title"> <div class="n-v-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="n-v-modal-title">
@ -245,7 +257,6 @@
</div> </div>
</div> </div>
</div> </div>
{/if}
</div> </div>
</main> </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> <time class="n-v-card__date" datetime="{$create_time_str}">{$create_time_str|date='Y-m-d'}</time>
</button> </button>
{else /} {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"> <div class="n-card__top">
<time class="n-card__date" datetime="{$create_time_str}">{:date('Y-m-d',strtotime($create_time_str)) ?? ''}</time> <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> <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']])}"> <a class="n-link n-link--sm" href="{:hcUrl('detail/index',['id'=>$vo_content['id'],'cid'=>$vo_content['category_id']])}">
<span>探索更多</span> <span>探索更多</span>
<img <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" 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" /> alt="" width="16" height="7" />
</a> </a>
{/if}
</div> </div>
<div class="n-card__media"> <div class="n-card__media">
<img src="{$vo_content['thumbnail']['url'] ?? ''}" alt="" loading="lazy" /> <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> </div>
</article> </article>
{/if} {/if}
@ -230,7 +243,6 @@
{$hc_content|raw} {$hc_content|raw}
{/if} {/if}
{if $is_news_video}
<div class="n-v-modal" id="n-v-modal" hidden> <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__backdrop" data-n-v-modal-close></div>
<div class="n-v-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="n-v-modal-title"> <div class="n-v-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="n-v-modal-title">
@ -245,7 +257,6 @@
</div> </div>
</div> </div>
</div> </div>
{/if}
</div> </div>
</main> </main>

Write Preview
Loading…
Cancel
Save