上傳檔案到「modules/video_pro」
This commit is contained in:
parent
ab6a528c5a
commit
8fe30347f6
|
|
@ -1,17 +1,25 @@
|
|||
<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">
|
||||
<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}}">
|
||||
<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}}"/>
|
||||
<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 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_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><img src="{{hd_icon_url}}" alt="HD"></span> -->
|
||||
<span>x {{view_count}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
|
@ -19,7 +27,25 @@
|
|||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
<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{
|
||||
padding:0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
|
@ -28,9 +54,10 @@
|
|||
}
|
||||
.video_tag{
|
||||
color: #e4374a;
|
||||
display: none;
|
||||
}
|
||||
.video_title h4{
|
||||
font-size: 1.6em;
|
||||
.video_title h5{
|
||||
@extend .i-title;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -43,6 +70,27 @@
|
|||
.view_info img{
|
||||
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>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
{{pagination_goes_here}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<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">
|
||||
<form>
|
||||
<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">
|
||||
<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}}">
|
||||
<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 data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></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 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>
|
||||
</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;
|
||||
|
|
@ -109,26 +124,17 @@
|
|||
padding: 10px 0;
|
||||
text-align: center;
|
||||
background-color: #8d681e;
|
||||
color: #fff;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-size: 120%;
|
||||
}
|
||||
.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;
|
||||
|
|
@ -143,4 +149,4 @@
|
|||
})
|
||||
</script>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
{{pagination_goes_here}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<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">
|
||||
<form>
|
||||
<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">
|
||||
<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}}">
|
||||
<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 data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></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 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>
|
||||
</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{
|
||||
padding: 0 0.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.video_info {
|
||||
margin: 1em 0;
|
||||
}
|
||||
.video_data_wrap{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -109,26 +124,17 @@
|
|||
padding: 10px 0;
|
||||
text-align: center;
|
||||
background-color: #8d681e;
|
||||
color: #fff;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-size: 120%;
|
||||
}
|
||||
.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;
|
||||
|
|
@ -143,4 +149,4 @@
|
|||
})
|
||||
</script>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
{{pagination_goes_here}}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<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">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -12,14 +12,17 @@
|
|||
</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">
|
||||
<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}}">
|
||||
<div class="video_snapshot_wrap">
|
||||
<img class="video_snapshot" src="{{snapshot_url}}"/>
|
||||
<img src="/assets/video_pro/btn-play.png" alt="" class="play_icon">
|
||||
<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_time"><span date-format="%Y/%m/%d">{{video_postdate}}</span></div>
|
||||
<div class="video_title"><h4>{{video_title}}</h4></div>
|
||||
|
|
@ -30,17 +33,24 @@
|
|||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
<style>
|
||||
.video_data{
|
||||
margin-bottom: 1em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
.video_info{
|
||||
margin: 1em 0;
|
||||
}
|
||||
.video_data_wrap{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.video_title h4{
|
||||
font-size: 1.1em;
|
||||
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;
|
||||
}
|
||||
.video_snapshot_wrap {
|
||||
position: relative;
|
||||
|
|
@ -72,4 +82,4 @@
|
|||
})
|
||||
</script>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
{{pagination_goes_here}}
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
Loading…
Reference in New Issue