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:27 +00:00
parent ab6a528c5a
commit 8fe30347f6
5 changed files with 301 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
modules/video_pro/video_pro_index1.html.erb
View File

@ -1,17 +1,25 @@
<div class="i-video_data video_data-index-1"> <div class="i-video_data video_data-index-1">
<h3 class="i-annc__page-title">{{page-title}}</h3> <h3 class="i-annc__page-title"><span>{{page-title}}</span></h3>
<ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0"> <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
<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}}"> <li class="video_data col-sm-12 row" 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}}"> <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
<div class="col-sm-4">
<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}}"/> <img class="video_snapshot" src="{{snapshot_url}}"/>
<div class="video_info"> </div>
</div>
<div class="col-sm-8 video_info">
<div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div> <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
<div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div> <div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
<div class="video_title"><h4>{{video_title}}</h4></div> <div class="video_title"><h4>{{video_title}}</h4></div>
<div class="video_desc">{{video_desc}}</div> <div class="video_desc">{{video_desc}}</div>
<div class="view_info"> <div class="view_info">
<span><img src="{{hd_icon_url}}" alt="HD"></span> <!-- <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>
</div> </div>
</a> </a>
@ -19,7 +27,25 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
<style> <style>
.video_data-index-1{
.video_desc{
height:auto!important;
}
.video_data{
background:#fff;
overflow: hidden;
margin-bottom: 1.875em;
box-shadow: #0000004d 0 0 4px;
border: 1px solid #bbb;
margin: 0.5em;
padding: 1em;
&:hover{
border: 1px solid #1a1b20;
box-shadow: #1a1b20e6 0 0 4px;
}
}
.video_data_wrap{ .video_data_wrap{
padding:0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -28,9 +54,10 @@
} }
.video_tag{ .video_tag{
color: #e4374a; color: #e4374a;
display: none;
} }
.video_title h4{ .video_title h5{
font-size: 1.6em; @extend .i-title;
font-weight: bold; font-weight: bold;
margin-bottom: 0; margin-bottom: 0;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -43,6 +70,27 @@
.view_info img{ .view_info img{
margin-right: 5px; margin-right: 5px;
} }
.video_group_time{
display: none;
}
.video_tags{
display: none;
}
.video_desc{
color: #333;
padding-top: 0.5em;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.video_title{
border-bottom: 2px solid #1a1b20;
padding-bottom: 0.5em;
}
}
</style> </style>
</div> </div>
{{pagination_goes_here}} {{pagination_goes_here}}

54
modules/video_pro/video_pro_index2.html.erb
View File

@ -1,5 +1,5 @@
<div class="i-video_data video_data-index-2"> <div class="i-video_data video_data-index-2">
<h3 class="i-annc__page-title">{{page-title}}</h3> <h3 class="i-annc__page-title"><span>{{page-title}}</span></h3>
<div class="video_filter_area col-sm-12"> <div class="video_filter_area col-sm-12">
<form> <form>
<div class="category_box col-sm-6"> <div class="category_box col-sm-6">
@ -24,22 +24,37 @@
<ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0"> <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
<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}}"> <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 class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"> <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}}"/> <img class="video_snapshot" src="{{snapshot_url}}"/>
</div>
<div class="video_info"> <div class="video_info">
<div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div> <div class="video_group_time"><div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>{{video_postdate}}</div>
<div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
<div class="video_title"><h4>{{video_title}}</h4></div> <div class="video_title"><h4>{{video_title}}</h4></div>
<div class="video_desc">{{video_desc}}</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>
</div>
</div> </div>
</a> </a>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
<style> <style>
.video_group_time{
display: flex;
align-items: center;
}
.video_tag{
margin: 0.5em 0.5em 0.5em 0;
}
.video_data{
margin-bottom: 1em;
padding: 0 0.5em;
}
.video_info {
margin: 1em 0;
}
.video_data_wrap{ .video_data_wrap{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -109,26 +124,17 @@
padding: 10px 0; padding: 10px 0;
text-align: center; text-align: center;
background-color: #8d681e; background-color: #8d681e;
color: #fff; color: #333;
text-decoration: none; text-decoration: none;
font-size: 120%; font-size: 120%;
} }
.video_data_wrap { .video_title h5 {
padding-left: 0; @extend .i-title;
} display: -webkit-box;
.video_group_time { -webkit-line-clamp: 2;
color: #4487cb; -webkit-box-orient: vertical;
} overflow: hidden;
.video_tag { text-overflow: ellipsis;
color: #e4374a;
}
.video_title h4 {
font-size: 1.6em;
font-weight: bold;
margin-bottom: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} }
.view_info { .view_info {
float: right; float: right;

54
modules/video_pro/video_pro_index2_tag.html.erb
View File

@ -1,5 +1,5 @@
<div class="i-video_data video_data-index-2"> <div class="i-video_data video_data-index-2">
<h3 class="i-annc__page-title">{{page-title}}</h3> <h3 class="i-annc__page-title"><span>{{page-title}}</span></h3>
<div class="video_filter_area col-sm-12"> <div class="video_filter_area col-sm-12">
<form> <form>
<div class="category_box col-sm-6"> <div class="category_box col-sm-6">
@ -24,22 +24,37 @@
<ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0"> <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
<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}}"> <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 class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"> <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}}"/> <img class="video_snapshot" src="{{snapshot_url}}"/>
</div>
<div class="video_info"> <div class="video_info">
<div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div> <div class="video_group_time"><div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>{{video_postdate}}</div>
<div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
<div class="video_title"><h4>{{video_title}}</h4></div> <div class="video_title"><h4>{{video_title}}</h4></div>
<div class="video_desc">{{video_desc}}</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>
</div>
</div> </div>
</a> </a>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
<style> <style>
.video_group_time{
display: flex;
align-items: center;
}
.video_tag{
margin: 0.5em 0.5em 0.5em 0;
}
.video_data{
padding: 0 0.5em;
margin-bottom: 1em;
}
.video_info {
margin: 1em 0;
}
.video_data_wrap{ .video_data_wrap{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -109,26 +124,17 @@
padding: 10px 0; padding: 10px 0;
text-align: center; text-align: center;
background-color: #8d681e; background-color: #8d681e;
color: #fff; color: #333;
text-decoration: none; text-decoration: none;
font-size: 120%; font-size: 120%;
} }
.video_data_wrap { .video_title h5 {
padding-left: 0; @extend .i-title;
} display: -webkit-box;
.video_group_time { -webkit-line-clamp: 2;
color: #4487cb; -webkit-box-orient: vertical;
} overflow: hidden;
.video_tag { text-overflow: ellipsis;
color: #e4374a;
}
.video_title h4 {
font-size: 1.6em;
font-weight: bold;
margin-bottom: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} }
.view_info { .view_info {
float: right; float: right;

36
modules/video_pro/video_pro_index3.html.erb
View File

@ -3,7 +3,7 @@
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" title="<%= I18n.t(:close) %>" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" title="<%= I18n.t(:close) %>" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
@ -12,14 +12,17 @@
</div> </div>
</div> </div>
</div> </div>
<h3 class="i-annc__page-title">{{page-title}}</h3> <h3 class="i-annc__page-title"><span>{{page-title}}</span></h3>
<ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0"> <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
<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}}"> <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="javascript:void(0)" title="{{video_title_escape}}" data-api-url="{{api_url}}"> <a class="video_link" href="javascript:void(0)" title="{{video_title_escape}}" data-api-url="{{api_url}}">
<div class="video_snapshot_wrap"> <div class="video_linkwrapper">
<img class="video_snapshot" src="{{snapshot_url}}"/> <div class="videohover">
<img src="/assets/video_pro/btn-play.png" alt="" class="play_icon"> <div class="Video__Player"><div class="Video__PlayerButton"></div></div>
<div class="videoduration"></div>
</div> </div>
<img class="video_snapshot" src="{{snapshot_url}}"/>
</div>
<div class="video_info"> <div class="video_info">
<div class="video_time"><span date-format="%Y/%m/%d">{{video_postdate}}</span></div> <div class="video_time"><span date-format="%Y/%m/%d">{{video_postdate}}</span></div>
<div class="video_title"><h4>{{video_title}}</h4></div> <div class="video_title"><h4>{{video_title}}</h4></div>
@ -30,17 +33,24 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
<style> <style>
.video_data{
margin-bottom: 1em;
padding: 0 0.5em;
}
.video_info{
margin: 1em 0;
}
.video_data_wrap{ .video_data_wrap{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.video_title h4{ .video_title h5{
font-size: 1.1em; @extend .i-title;
font-weight: bold; display: -webkit-box;
margin-bottom: 0; -webkit-line-clamp: 2;
text-overflow: ellipsis; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
white-space: nowrap; text-overflow: ellipsis;
} }
.video_snapshot_wrap { .video_snapshot_wrap {
position: relative; position: relative;

159
modules/video_pro/video_pro_index4.html.erb Normal file
View File

@ -0,0 +1,159 @@
<div class="i-video_data video_data-index-4">
<h3 class="i-annc__page-title"><span>{{page-title}}</span></h3>
<ul class="video_data_wrap col-sm-12" 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 data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
<div class="video_group_time">{{video_postdate}}</div>
<div class="video_title"><h5>{{video_title}}</h5></div>
<div class="video_desc">{{video_desc}}</div>
</div>
</a>
</li>
</ul>
<div class="clearfix"></div>
<style>
.video_group_time{
display: flex;
align-items: center;
}
.video_tag{
margin: 0.5em 0.5em 0.5em 0;
}
.video_data{
margin-bottom: 1em;
padding: 0 0.5em;
}
.video_info {
margin: 1em 0;
}
.video_data_wrap{
display: flex;
flex-wrap: wrap;
}
.video_filter_area {
margin-bottom: 20px;
}
#filter_category_box {
width: 100%;
line-height: 50px;
height: 50px;
max-width: none;
border: none;
padding: 0 1em;
}
.category_box {
padding: 0;
}
.search_box {
padding-right: 0;
}
@media (max-width: 767px){
.search_box {
padding: 0;
margin-top: 0.5em;
}
}
.search_keyword {
margin-right: 50px;
}
.search_input input[type=text] {
padding: 0 1em;
line-height: 50px;
}
.search_input input {
max-width: none;
width: 100%;
height: 50px;
border: none;
}
.search_submit {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 100%;
}
.search_input input[type=submit] {
background: url(/assets/video_pro/search_btn.png) center center no-repeat #c9c9c9;
font-size: 0;
}
.video_tablist {
overflow: hidden;
letter-spacing: 0.1em;
margin-bottom: 15px;
padding: 0;
}
.video_tablist>li, .album_tablist>li {
width: 50%;
float: left;
}
.video_tablist li.now_view a {
background-color: #c47f27;
}
.video_tablist a {
display: block;
padding: 10px 0;
text-align: center;
background-color: #8d681e;
color: #333;
text-decoration: none;
font-size: 120%;
}
.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;
}
</style>
<script>
$(document).ready(function () {
var $select = $("#filter_category_box"); // 取得 select
var $categoryBox = $(".category_box"); // 取得分類框
// 創建按鈕並插入
$select.find("option").each(function () {
var value = $(this).val();
var text = $(this).text();
// 只處理有值的選項
if (value) {
var $btn = $('<button class="category-btn" data-value="' + value + '">' + text + '</button>');
$categoryBox.append($btn);
}
});
// 點擊按鈕時，更新 select 並觸發變更事件
$(".category-btn").on("click", function () {
var selectedValue = $(this).data("value");
$select.val(selectedValue).trigger("change"); // 設定 select 值並觸發變更事件
});
// 隱藏原本的 select
$select.hide();
$('#filter_category_box').on('change', function(){
$(this).prop('form').submit();
})
});
</script>
</div>
{{pagination_goes_here}}