chiu
/
video_pro
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

上傳檔案到「modules/video_pro」

This commit is contained in:
ken 2026-09-24 05:29:13 +00:00
parent 352f1c27c2
commit ab6a528c5a
5 changed files with 779 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

176
modules/video_pro/_video_pro_widget5.html.erb Normal file
View File

@ -0,0 +1,176 @@
<div class="w-video_data video_data-widget-5 row">
<h3 class="widget-title"><span>{{widget-title}}</span></h3>
<ul class="video_data_wrap col-sm-8 cycle-slideshow"
data-list="videos"
data-level="0"
data-cycle-fx="scrollHorz"
data-cycle-timeout="0"
data-cycle-slides=".video_data"
data-cycle-pager="#pager-{{subpart-id}}"
data-cycle-next="#next-{{subpart-id}}"
data-cycle-prev="#prev-{{subpart-id}}"
data-cycle-pager-template="<a href='#' class='pager-item' data-slide-num=''><h5></h5></a>">
<li class="video_data col-xs-12 col-sm-12" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}" data-title="{{video_title}}">
<a href="{{video_show_url}}" title="{{video_title_escape}}">
<div class="video_linkwrapper">
<div class="videohover">
<div class="view_info">
<span>{{view_count}}</span>
</div>
<div class="Video__Player"><div class="Video__PlayerButton"></div></div>
<div class="videoduration"></div>
</div>
<img class="video_snapshot" src="{{snapshot_url}}"/>
</div>
</a>
<div class="video_group_time">{{video_postdate}}</div>
<div class="video_info">
<div class="video_length">{{video_duration}}</div>
<div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
<div class="video_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></div>
</div>
</li>
</ul>
<div id="pager-{{subpart-id}}" class="cycle-pager col-sm-4"></div>
<div class="clearfix"></div>
</div>
<script>
$(document).ready(function () {
setTimeout(function () {
$(".w-video_data").each(function () {
var $container = $(this);
var videoDataItems = $container.find(".video_data").not(".cycle-sentinel"); // 過濾 Cycle2 產生的複製元素
var videoData = videoDataItems.map(function () {
return {
title: $(this).attr("data-title"),
date: $(this).find(".video_group_time").text().trim() // 取得日期
};
}).get();
// 只影響「當前」輪播的 Pager Items
$container.find(".cycle-pager .pager-item").slice(0, videoData.length).each(function (index) {
var { title, date } = videoData[index];
$(this).attr("data-slide-num", index);
// 先移除舊的日期標籤，避免重複
$(this).find(".video-date").remove();
// 插入日期作為獨立的 <span>，放在 h5 之前
if (date) {
$("<span class='video-date'></span>").text(date + " ").prependTo(this);
}
$(this).find("h5").text(title);
});
// 只讓「當前」的 Pager 綁定點擊事件
$container.find(".cycle-pager").on("click", ".pager-item", function (e) {
e.preventDefault();
var index = $(this).attr("data-slide-num");
// 只影響「當前」輪播的 .cycle-slideshow
$container.find(".cycle-slideshow").cycle("goto", index);
});
});
}, 300); // 延長時間確保 DOM 生成
setTimeout(function () {
$(".w-video_data.video_data-widget-5").each(function () { //限制只影響 .video_data-widget-5
var $container = $(this);
var $items = $container.find(".video_data").not(".cycle-sentinel"); // 過濾 Cycle2 產生的元素
var $pager = $container.find(".cycle-pager"); // 取得 Pager 容器
var totalItems = $items.length;
var itemsPerPage = 5;
var currentIndex = 0;
// 取得所有 video_data 的標題與日期
var videoData = $items.map(function () {
return {
title: $(this).attr("data-title"),
date: $(this).find(".video_group_time").text().trim()
};
}).get();
// 生成對應的 .pager-item
var pagerHTML = "";
videoData.forEach(function ({ title, date }, index) {
pagerHTML += `<a href="#" class="pager-item" data-slide-num="${index}">`;
if (date) {
pagerHTML += `<span class="video-date">${date} </span>`;
}
pagerHTML += `<h5>${title}</h5></a>`;
});
$pager.html(pagerHTML); // 插入新的 Pager
var $pagerItems = $pager.find(".pager-item"); // 重新抓取 .pager-item
$pagerItems.hide(); // 先全部隱藏
// 插入按鈕（確保不會重複）
if ($pager.next(".pager-controls").length === 0) {
$pager.after(`
<div class="pager-controls">
<button class="prev-btn" title="下一張" aria-label="下一張"><i class="fa fa-angle-left prev-button" aria-hidden="true" style="font-size: 1.5rem;"></i></button>
<button class="next-btn" title="上一張" aria-label="上一張"><i class="fa fa-angle-right next-button" aria-hidden="true" style="font-size: 1.5rem;"></i></button>
</div>
`);
}
var $prevBtn = $pager.next(".pager-controls").find(".prev-btn");
var $nextBtn = $pager.next(".pager-controls").find(".next-btn");
// 更新顯示的 pager-item 和 video_data
function updateVisibleItems() {
var firstVisibleIndex = currentIndex; // 取得當前顯示的第一個 Index
var lastVisibleIndex = Math.min(currentIndex + itemsPerPage, totalItems);
// 隱藏所有
$items.hide().removeClass("cycle-slide-active");
$pagerItems.hide().removeClass("cycle-pager-active");
// 顯示當前的 3 個 pager-item
var visiblePagerItems = $pagerItems.slice(firstVisibleIndex, lastVisibleIndex).show();
// 加上 `cycle-pager-active` 到第一個
var firstPagerItem = visiblePagerItems.first().addClass("cycle-pager-active");
// 取得對應的 video_data
var firstPagerIndex = firstPagerItem.data("slide-num");
var $firstVideoItem = $items.eq(firstPagerIndex).show().addClass("cycle-slide-active");
}
// 綁定 Pager 點擊事件
$pager.on("click", ".pager-item", function (e) {
e.preventDefault();
var index = $(this).data("slide-num"); // 獲取對應 index
$pagerItems.removeClass("cycle-pager-active");
$(this).addClass("cycle-pager-active");
$items.hide().removeClass("cycle-slide-active").eq(index).show().addClass("cycle-slide-active");
});
// 綁定上一頁按鈕
$prevBtn.off("click").on("click", function () {
if (currentIndex > 0) {
currentIndex -= itemsPerPage;
updateVisibleItems();
}
});
// 綁定下一頁按鈕
$nextBtn.off("click").on("click", function () {
if (currentIndex + itemsPerPage < totalItems) {
currentIndex += itemsPerPage;
updateVisibleItems();
}
});
// 初始化顯示
updateVisibleItems();
});
}, 300); // 延長時間確保 DOM 生成
});
</script>

126
modules/video_pro/_video_pro_widget6.html.erb Normal file
View File

@ -0,0 +1,126 @@
<div class="w-video_data video_data-widget-6">
<h3 class="widget-title"><span>{{widget-title}}</span></h3>
<div class="btnwrapper" style="">
<button id="prev-{{subpart-id}}" class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="transition: 0.4s;
float: left;
left: 0.5rem;
transition: 0.4s;
right: 0.5rem;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.4);
text-align: center;
top: 50%;
position: absolute;
transform: translateY(-50%);
z-index: 999;
height: 2em !important;
width: 2em !important;
font-size: 1em !important;
line-height: 2rem !important;
border-radius: 1em;
border: 0;"><i class="fa fa-angle-left prev-button" aria-hidden="true" style="font-size: 1rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %></span></button>
<button id="next-{{subpart-id}}" class="btn-right" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" style="
float: right;
transition: 0.4s;
right: 1.5rem;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.4);
text-align: center;
top: 50%;
position: absolute;
transform: translateY(-50%);
z-index: 999;
height: 2em !important;
width: 2em !important;
font-size: 1em !important;
line-height: 2rem !important;
border-radius: 1em;
border: 0;"><i class="fa fa-angle-right next-button" aria-hidden="true" style="font-size: 1rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %></span></button>
</div>
<ul class="video_data_wrap col-sm-12 cycle-slideshow" data-list="videos" data-level="0" data-cycle-fx="carousel"
data-cycle-timeout="0"
data-cycle-carousel-visible="1"
data-cycle-carousel-fluid="true"
data-cycle-next="#next-{{subpart-id}}"
data-cycle-prev="#prev-{{subpart-id}}"
data-cycle-slides=".video_data"
>
<li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}" >
<a href="{{video_show_url}}" title="{{video_title_escape}}">
<div class="video_linkwrapper">
<div class="videohover">
<div class="view_info">
<span>{{view_count}}</span>
</div>
<div class="Video__Player"><div class="Video__PlayerButton"></div></div>
<div class="videoduration"></div>
</div>
<img class="video_snapshot" src="{{snapshot_url}}"/>
</div>
<div class="video_info">
<div class="video_length">{{video_duration}}</div>
<div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
<div class="video_keyword">{{video_keyword}}</div>
<div class="video_group_time">{{video_postdate}}</div>
<div class="video_title"><div class="video_link"><h4>{{video_title}}</h4></div></div>
<div class="video_desc"><div class="video_link">{{video_desc}}</div></div>
</div>
</a>
</li>
</ul>
<div class="clearfix"></div>
<style>
.video_title h5{
@extend .i-title;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.view_info{
float: right;
}
.view_info img{
margin-right: 5px;
}
.view_info{
max-height: 100%;
border-radius: 2px;
font-size: 0.875rem;
font-weight: normal;
letter-spacing: 0.3px;
text-align: center;
display: flex;
-webkit-box-align: center;
align-items: center;
position: absolute;
padding: 0px 8px;
background-color: #000000cc;
color: rgb(255, 255, 255);
z-index: 10;
top: 10px;
left: 10px;
border: 1px solid transparent;
line-height: 1.45;
span{
color:#fff;
}
&:before{
content: "";
display: inline-block;
margin-right: 5px;
width: 14px;
height: 10px;
background: url(/assets/icon-view@2x.png) no-repeat;
position: relative;
background-size: contain;
}
}
</style>
</div>
<script>
</script>

387
modules/video_pro/_video_pro_widget8.html.erb Normal file
View File

@ -0,0 +1,387 @@
<div class="w-video_data video_data-widget-8" data-subpart-id="{{subpart-id}}">
<h3 class="widget-title"><span>{{widget-title}}</span></h3>
<div class="vw3-carousel">
<button class="vw3-prev" title="上一組" aria-label="上一組" type="button">
<i class="fa fa-angle-left" aria-hidden="true"></i>
</button>
<div class="vw3-track-wrap">
<ul class="video_data_wrap vw3-track" data-list="videos" data-level="0">
<li class="video_data vw3-slide" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
<a href="{{video_show_url}}" title="{{video_title_escape}}">
<div class="video_linkwrapper3">
<div class="videohover">
<div class="view_info"><span>{{view_count}}</span></div>
<div class="Video__Player"><button class="Video__PlayerButton" type="button"></button></div>
</div>
<img class="video_snapshot" src="{{snapshot_url}}" alt="{{video_title_escape}}">
</div>
</a>
<div class="video_info">
<div class="video_title">
<a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h4>{{video_title}}</h4></a>
</div>
<div class="video_desc">
<a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a>
</div>
</div>
</li>
</ul>
</div>
<button class="vw3-next" title="下一組" aria-label="下一組" type="button">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</button>
</div>
</div>
<style>
.video_data-widget-8 {
position: relative;
.widget-title { margin-bottom: 1rem; }
/* 外層輪播框 */
.vw3-carousel {
display: flex;
align-items: center;
gap: 0.5rem;
position: relative;
}
/* 可視區域 */
.vw3-track-wrap {
overflow: hidden;
flex: 1;
}
/* 滑動軌道 */
.vw3-track {
display: flex;
align-items: center;
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
transition: transform 0.4s ease;
}
/* 所有 slide 共用 */
.vw3-slide {
flex-shrink: 0;
box-sizing: border-box;
}
/* 第一張大卡：40% 相對容器 */
.vw3-slide:nth-child(1) {
width: 40%;
position: relative;
.video_linkwrapper3 { margin-bottom: 0; }
.video_info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2rem 1rem 1rem;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
border-radius: 0 0 14px 14px;
z-index: 10;
margin: 0;
}
.video_title h4 {
color: #fff;
font-size: 1.15rem;
font-weight: 500;
margin: 0 0 0.2rem;
}
.video_desc,
.video_desc a {
color: rgba(255,255,255,0.85);
font-size: 0.85rem;
}
}
/* 後續小卡：各約 20% */
.vw3-slide:nth-child(n+2) {
width: calc(20% - 0.75rem);
.video_info {
padding: 0.5rem 0 0;
margin: 0;
}
.video_title h4 {
font-size: 0.95rem;
font-weight: 500;
color: #1a1a1a;
margin: 0 0 0.2rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.video_desc,
.video_desc a {
font-size: 0.82rem;
color: #666;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* 圖片共用 */
.video_linkwrapper3 {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 14px;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
transition: transform 0.22s ease, box-shadow 0.22s ease;
&:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}
/* 播放按鈕 */
.Video__Player {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.Video__PlayerButton {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255,255,255,0.85);
border: none;
cursor: pointer;
position: relative;
&::after {
content: '';
position: absolute;
top: 50%;
left: 54%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent #1a1a1a;
}
&:hover { background: #fff; }
}
/* 左右箭頭 */
.vw3-prev,
.vw3-next {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(0,0,0,0.15);
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
transition: background 0.2s;
z-index: 10;
&:hover { background: rgba(0,0,0,0.4); }
&:focus { outline: 2px solid #2980b9; outline-offset: 2px; }
&:disabled { opacity: 0.3; cursor: default; }
}
/* view_info */
.view_info {
position: absolute;
top: 10px;
left: 10px;
background: rgba(0,0,0,0.75);
color: #fff;
font-size: 0.8rem;
padding: 2px 8px;
border-radius: 3px;
z-index: 10;
display: flex;
align-items: center;
gap: 4px;
}
/* RWD */
@media(max-width: 768px) {
.vw3-slide:nth-child(1) { width: 100%; }
.vw3-slide:nth-child(n+2) { width: calc(50% - 0.5rem); }
}
@media(max-width: 480px) {
.vw3-slide:nth-child(n+2) { width: 100%; }
}
}
</style>
<script>
$(document).ready(function() {
var $widget = $('[data-subpart-id="{{subpart-id}}"]');
var $trackWrap = $widget.find('.vw3-track-wrap');
var $track = $widget.find('.vw3-track');
var $prevBtn = $widget.find('.vw3-prev');
var $nextBtn = $widget.find('.vw3-next');
var originalSlides = $widget.find('.vw3-slide').toArray();
var total = originalSlides.length;
if (total === 0) return;
var currentIndex = 0; // 目前第一個顯示的 slide index（在 originalSlides 裡）
// 重建 track：把所有 slide 克隆三份（前後各補一輪），讓循環無縫
function buildTrack() {
$track.empty();
// 補後一輪（讓往右循環）
$(originalSlides).each(function() {
$track.append($(this).clone().addClass('vw3-clone'));
});
// 原始
$(originalSlides).each(function() {
$track.append($(this).clone());
});
// 補前一輪（讓往左循環）
$(originalSlides).each(function() {
$track.append($(this).clone().addClass('vw3-clone'));
});
}
function getVisibleCount() {
return $(window).width() < 1024 ? 1 : 4;
}
function isMobile() {
return $(window).width() < 1024;
}
// 更新每個 slide 的寬度
function updateWidths() {
var $allSlides = $track.find('.vw3-slide');
var wrapWidth = $trackWrap.width();
var gap = 16;
var visibleCount = getVisibleCount();
var mobile = isMobile();
// 先全部清除大卡樣式
$allSlides.find('.video_info').css({
'color' : '',
'position' : '',
'bottom' : '',
'width' : '',
'padding' : '',
'background-image' : '',
'border-radius' : ''
});
$allSlides.find('.video_title h4').css({
'color' : '',
'font-size' : ''
});
if (mobile) {
// 手機：一次一則，全寬，不套大卡樣式
$allSlides.css('width', wrapWidth + 'px');
} else {
// 桌機：第一張 40%，其餘平分
var bigWidth = wrapWidth * 0.4;
var smallTotal = wrapWidth - bigWidth - gap * (visibleCount - 1);
var smallWidth = smallTotal / (visibleCount - 1);
$allSlides.css('width', smallWidth + 'px');
var firstVisibleIdx = total + currentIndex;
var $firstSlide = $allSlides.eq(firstVisibleIdx);
$firstSlide.css('width', bigWidth + 'px');
$firstSlide.find('.video_info').css({
'color' : '#fff',
'position' : 'absolute',
'bottom' : '0',
'width' : '100%',
'padding' : '2em',
'background-image' : 'linear-gradient(180deg, transparent 0, #00000066 40%, #000000a3)',
'border-radius' : '0 0 14px 14px'
});
$firstSlide.find('.video_title h4').css({
'color' : '#fff',
'font-size' : '1.5em'
});
}
}
// 計算 track 的 translateX，讓第一個顯示的 slide 對齊左邊
function getOffset(targetIdx) {
var $allSlides = $track.find('.vw3-slide');
var offset = 0;
var gap = 16;
for (var i = 0; i < targetIdx; i++) {
offset += parseFloat($allSlides.eq(i).css('width')) + gap;
}
return offset;
}
function goTo(newIndex, animate) {
currentIndex = ((newIndex % total) + total) % total;
updateWidths();
var targetIdx = total + currentIndex; // 中間那組的 index
var offset = getOffset(targetIdx);
if (animate === false) {
$track.css('transition', 'none');
$track.css('transform', 'translateX(-' + offset + 'px)');
$track[0].offsetHeight; // force reflow
$track.css('transition', '');
} else {
$track.css('transform', 'translateX(-' + offset + 'px)');
}
}
// 初始化
buildTrack();
goTo(0, false);
$prevBtn.on('click', function() {
goTo(currentIndex - 1, true);
});
$nextBtn.on('click', function() {
goTo(currentIndex + 1, true);
});
$(window).on('resize', function() {
goTo(currentIndex, false);
});
});
</script>

75
modules/video_pro/info.json
View File

@ -7,7 +7,61 @@
"zh_tw" : "1. 影片列表1 ( 縮圖, 影片資訊, 頁面連結)",
"en" : "1. Video List 1 ( snapshot, video info, page link)"
},
"thumbnail" : "thumb.png"
"thumbnail" : "video_pro_widget1_thumb.png"
},
{
"filename" : "video_pro_widget2",
"force_cover": "true",
"name" : {
"zh_tw" : "2. 影片列表2 ( 縮圖, 影片資訊, 頁面連結)",
"en" : "2. Video List 2 ( snapshot, video info, page link)"
},
"thumbnail" : "video_pro_widget2_thumb.png"
},
{
"filename" : "video_pro_widget3",
"force_cover": "true",
"name" : {
"zh_tw" : "3. 影片列表倫波 ( 縮圖, 影片資訊, 頁面連結)",
"en" : "3.carousel-Video List ( snapshot, video info, page link)"
},
"thumbnail" : "video_pro_widget3_thumb.png"
},
{
"filename" : "video_pro_widget4",
"force_cover": "true",
"name" : {
"zh_tw" : "4. 四欄影片列表 ( 縮圖, 影片資訊, 頁面連結)",
"en" : "4. 4col-Video List 1 ( snapshot, video info, page link)"
},
"thumbnail" : "video_pro_widget4_thumb.png"
},
{
"filename" : "video_pro_widget5",
"force_cover": "true",
"name" : {
"zh_tw" : "5. 大圖影片列表倫波 ( 縮圖, 影片資訊, 頁面連結)",
"en" : "5.bigcarousel-Video List ( snapshot, video info, page link)"
},
"thumbnail" : "video_pro_widget5_thumb"
},
{
"filename" : "video_pro_widget6",
"force_cover": "true",
"name" : {
"zh_tw" : "6. 影片單欄倫波 ( 縮圖, 影片資訊, 頁面連結)",
"en" : "6.carousel-Video 1 List ( snapshot, video info, page link)"
},
"thumbnail" : "video_pro_widget6_thumb.png"
},
{
"filename" : "video_pro_widget8",
"force_cover": "true",
"name" : {
"zh_tw" : "8.一大三小影片列表倫波 ( 縮圖, 影片資訊, 頁面連結)",
"en" : "8.one big three small carousel-Video List ( snapshot, video info, page link)"
},
"thumbnail" : "video_pro_widget3_thumb.png"
},
{
"filename" : "video_pro_widget_jqcloud1",
@ -16,7 +70,7 @@
"zh_tw" : "2. 影片文字雲(標籤)",
"en" : "2. Video Word Cloud(tags)"
},
"thumbnail" : "thumb.png"
"thumbnail" : "video_pro_widgetcloud_thumb"
}
],
"frontend" : [
@ -51,8 +105,8 @@
"filename" : "video_pro_index3",
"force_cover": "true",
"name" : {
"zh_tw" : "3. 影片列表2 + 懸浮框 ( 縮圖, 影片資訊)",
"en" : "3. Video List 2 + Modal window ( snapshot, video info)"
"zh_tw" : "3. 三欄 影片列表 + 懸浮框 ( 縮圖, 影片資訊)",
"en" : "3. 3col-Video List + Modal window ( snapshot, video info)"
},
"thumbnail" : "thumb.png"
},
@ -60,8 +114,17 @@
"filename" : "video_pro_index_post_agency1",
"force_cover": "true",
"name" : {
"zh_tw" : "4. 影片列表3 + 發佈單位篩選 ( 縮圖, 影片資訊, 關鍵字, 頁面連結)",
"en" : "4. Video List 3 + Post Agency filter ( snapshot, video info, keyword, page link)"
"zh_tw" : "4. 三欄影片列表 + 發佈單位篩選 ( 縮圖, 影片資訊, 關鍵字, 頁面連結)",
"en" : "4. 3col-Video List + Post Agency filter ( snapshot, video info, keyword, page link)"
},
"thumbnail" : "thumb.png"
},
{
"filename" : "video_pro_index4",
"force_cover": "true",
"name" : {
"zh_tw" : "4. 三欄影片列表 + 類別 + 搜尋 ( 縮圖, 影片資訊, 頁面連結)",
"en" : "4. 3col-Video List + Category filter + Search ( snapshot, video info, page link)"
},
"thumbnail" : "thumb.png"
}

37
modules/video_pro/video_pro_index_post_agency1.html.erb
View File

@ -12,15 +12,20 @@
<ul class="video_data_wrap" data-list="videos" data-level="0">
<li class="video_data col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
<a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
<div class="video_linkwrapper">
<div class="videohover">
<div class="Video__Player"><div class="Video__PlayerButton"></div></div>
<div class="videoduration"></div>
</div>
<img class="video_snapshot" src="{{snapshot_url}}"/>
</div>
<div class="video_info">
<div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
<div class="video_keyword">{{keyword_trans}}: {{video_keyword}}</div>
<div class="video_title"><h4>{{video_title}}</h4></div>
<div class="video_desc">{{video_desc}}</div>
<div class="view_info">
<span><img src="{{hd_icon_url}}" alt="HD"></span>
<span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
<span>x {{view_count}}</span>
</div>
</div>
</a>
@ -28,6 +33,12 @@
</ul>
<div class="clearfix"></div>
<style>
.video_data{
margin-bottom: 1em;
}
.video_info {
margin: 1em 0;
}
.video_filter_area {
margin-bottom: 20px;
}
@ -67,19 +78,13 @@
.video_data_wrap {
padding-left: 0;
}
.video_group_time {
color: #4487cb;
}
.video_tag {
color: #e4374a;
}
.video_title h4 {
font-size: 1.6em;
font-weight: bold;
margin-bottom: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
.video_title h5 {
@extend .i-title;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.view_info {
float: right;
@ -94,4 +99,4 @@
})
</script>
</div>
{{pagination_goes_here}}
{{pagination_goes_here}}