'refresh'
This commit is contained in:
parent
b00788b562
commit
48ba0eb966
assets
javascripts
stylesheets/template
modules
announcement
member
video_pro
|
|
@ -875,17 +875,19 @@ extendPanelWidget();
|
|||
}
|
||||
$(document).ready(function () {
|
||||
if ($(".main-content .video_detail").length > 0) {
|
||||
$('.videopagenone').css("display","none");
|
||||
$('.videopage').css('display', 'block');
|
||||
$('.sitemenu').css("display","none");
|
||||
$('span img[alt="HD"]').parent().hide();
|
||||
$('span img[alt="觀看人數"]').remove();
|
||||
$(".view_info span").each(function () {
|
||||
$(".video_detail .view_info span").each(function () {
|
||||
var text = $(this).text().trim(); // 取得 <span> 裡的文字，去掉前後空格
|
||||
var number = text.replace(/\D/g, ""); // 只保留數字部分
|
||||
if (number) {
|
||||
$(this).text(`・觀看次數：${number}次`); // 更新內容格式
|
||||
}
|
||||
});
|
||||
$(".movie_desc").before('<div class="movietitle"><h4>影片敘述</h4></div>');
|
||||
$(".movie_desc").before('<div class="movietitle"><h4>單元介紹</h4></div>');
|
||||
$(".movie_desc").each(function () {
|
||||
var decodedHtml = $("<div/>").html($(this).text()).html(); // 轉換轉義的 HTML
|
||||
$(this).html(decodedHtml); // 設置為真正的 HTML
|
||||
|
|
@ -912,8 +914,7 @@ $(document).ready(function () {
|
|||
"margin": "auto"
|
||||
});
|
||||
$(".video_box_wrap").css("padding-bottom", "56%");
|
||||
|
||||
$(".video_yt_box").insertBefore(".video_group_time");
|
||||
$(".video_detail .video_yt_box").insertBefore(".video_detail .video_group_time");
|
||||
|
||||
};
|
||||
function getYouTubeThumbnail() {
|
||||
|
|
@ -957,53 +958,10 @@ $(document).ready(function () {
|
|||
}
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
// 當文件物件模型(DOM)載入後，執行init函數
|
||||
$(document).ready(function() {
|
||||
function adjustSlideWidth() {
|
||||
var $container = $(".container");
|
||||
var $list = $(".w-annc__list");
|
||||
var $items = $(".w-annc__item");
|
||||
|
||||
var containerWidth = $container.width(); // 獲取容器寬度
|
||||
var slidesVisible = parseInt($list.attr("data-cycle-carousel-visible")) || 4; // 讀取可見數量 (預設4)
|
||||
var itemMargin = parseFloat($items.css("margin-left")) + parseFloat($items.css("margin-right")); // 計算 margin
|
||||
|
||||
// 計算 w-annc__item 的寬度 (確保總寬度不超過 .container)
|
||||
var itemWidth = (containerWidth / slidesVisible) - itemMargin;
|
||||
|
||||
// 更新 w-annc__item 的寬度
|
||||
$items.css({
|
||||
"width": itemWidth + "px",
|
||||
"box-sizing": "border-box"
|
||||
});
|
||||
}
|
||||
|
||||
// 初次載入時調整
|
||||
adjustSlideWidth();
|
||||
|
||||
// 監聽視窗大小變化
|
||||
$(window).resize(adjustSlideWidth);
|
||||
$(window).on("load", function () {
|
||||
var $carouselWrap = $(".cycle-carousel-wrap");
|
||||
var $carouselList = $(".w-annc__list");
|
||||
|
||||
// 取得 data-cycle-carousel-visible 的數值
|
||||
var slidesVisible = parseInt($carouselList.attr("data-cycle-carousel-visible")) || 4;
|
||||
|
||||
// 取得 .w-annc__item 的寬度
|
||||
var itemWidth = $(".w-annc__item").outerWidth(true); // 包含 margin
|
||||
|
||||
// 計算正確的 left 位置，確保第一個 item 不會被切掉
|
||||
var newLeft = -(itemWidth * Math.floor(slidesVisible / 2));
|
||||
|
||||
// 如果 newLeft 是負的，則修正為 0（避免完全消失）
|
||||
if (newLeft < 0) newLeft = 0;
|
||||
|
||||
// 更新 cycle-carousel-wrap 的位置
|
||||
$carouselWrap.css("left", newLeft + "px");
|
||||
});
|
||||
|
||||
// 綁定滑動事件
|
||||
// 綁定滑動事件
|
||||
$(".cycle-slideshow").swipe({
|
||||
swipeLeft: function () {
|
||||
$(this).cycle("next"); // 向左滑動，切換到下一張
|
||||
|
|
@ -1016,20 +974,15 @@ $(document).ready(function () {
|
|||
//改變日期格式
|
||||
$(".video_group_time").each(function () {
|
||||
var $this = $(this);
|
||||
var originalText = $this.text().trim(); // 取得原始內容
|
||||
// 正則表達式匹配 YYYY-MM-DD 格式的日期
|
||||
var originalText = $this.text().trim();
|
||||
// 把 YYYY-MM-DD 轉換成 M月D日
|
||||
var formattedText = originalText.replace(/(\d{4})-(\d{2})-(\d{2})/g, function (match, year, month, day) {
|
||||
return parseInt(month, 10) + "月" + parseInt(day, 10) + "日";
|
||||
return parseInt(month, 10) + "月" + parseInt(day, 10) + "日";
|
||||
});
|
||||
$this.text(formattedText); // 更新內容
|
||||
});
|
||||
|
||||
$(".video_group_time").each(function () {
|
||||
var $this = $(this); // 當前 .video_group_time
|
||||
var $q = $this.closest(".video_data").find(".video_desc q").clone(); // 找到對應的 q
|
||||
if ($q.length) {
|
||||
$this.append($q); // 只加上對應的 q
|
||||
}
|
||||
// 找到對應的 <q>，並複製
|
||||
var $q = $this.closest(".video_data").find(".video_desc q").clone();
|
||||
// 更新內容並加上 <q>
|
||||
$this.html(formattedText).append($q);
|
||||
});
|
||||
//常用到的js
|
||||
// $('.').after($('.'));
|
||||
|
|
|
|||
|
|
@ -33,8 +33,11 @@ a:focus {
|
|||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
/* max-width: 100%;
|
||||
height: auto;*/
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.admin-edit {
|
||||
|
|
@ -132,3 +135,6 @@ img{
|
|||
// overflow-x: auto;
|
||||
// }
|
||||
// }
|
||||
*[data-pp]>.editmode-ps>a, .admin-subpart-area .content>.editmode-ps>a{
|
||||
position: !important;
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
}
|
||||
.header-nav {
|
||||
ul{
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@media(max-width: 769px){
|
||||
ul{
|
||||
|
|
@ -151,6 +151,7 @@
|
|||
float: left;
|
||||
height: 60px;
|
||||
padding-right: 0.5em;
|
||||
width: auto!important;
|
||||
@media(min-width: 1024px){
|
||||
height: 60px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -234,7 +234,7 @@
|
|||
padding-bottom: 0;
|
||||
}
|
||||
.w-annc__img-wrap {
|
||||
height: 12.5em;
|
||||
height: 13.5em;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
|
|
@ -268,7 +268,7 @@
|
|||
padding-bottom: 0;
|
||||
}
|
||||
.w-annc__img-wrap {
|
||||
height: 12.5em;
|
||||
height: 13.5em;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
|
|
@ -555,16 +555,6 @@
|
|||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
.w-annc__img-wrap {
|
||||
img{
|
||||
height: 100% !important;
|
||||
width: auto!important;
|
||||
max-width: unset;
|
||||
position: relative !important;
|
||||
margin: 0 !important;
|
||||
// transform: translateX(-7%);
|
||||
}
|
||||
}
|
||||
.w-annc__item{
|
||||
padding: 0;
|
||||
margin-right: 0.5em;
|
||||
|
|
@ -820,16 +810,6 @@
|
|||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
.w-annc__img-wrap {
|
||||
img{
|
||||
height: 100% !important;
|
||||
width: auto!important;
|
||||
max-width: unset;
|
||||
position: relative !important;
|
||||
margin: 0 !important;
|
||||
// transform: translateX(-7%);
|
||||
}
|
||||
}
|
||||
.w-annc__item{
|
||||
padding: 0;
|
||||
margin-right: 0.5em;
|
||||
|
|
@ -1015,16 +995,15 @@
|
|||
&:hover{
|
||||
.w-annc__img{
|
||||
-webkit-transition: .3s ease-out;
|
||||
-moz-transition: .3s ease-out;
|
||||
-ms-transition: .3s ease-out;
|
||||
-o-transition: .3s ease-out;
|
||||
transition: .3s ease-out;
|
||||
filter: brightness(40%);
|
||||
-moz-transition: .3s ease-out;
|
||||
-ms-transition: .3s ease-out;
|
||||
-o-transition: .3s ease-out;
|
||||
transition: .3s ease-out;
|
||||
filter: brightness(40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.w-annc__entry-title{
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -1032,12 +1011,9 @@
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
.w-annc__meta{
|
||||
padding: 1em;
|
||||
padding-top: 1em;
|
||||
display: none;
|
||||
}
|
||||
.w-annc__entry-title{
|
||||
padding: 0 1em;
|
||||
}
|
||||
}
|
||||
// Widget-24
|
||||
.widget-announcement-24 {
|
||||
|
|
@ -1197,17 +1173,7 @@
|
|||
img{
|
||||
// height: 100% !important;
|
||||
width:100%!important;
|
||||
// max-width: unset;
|
||||
// position: relative !important;
|
||||
// margin: 0 !important;
|
||||
// transform: translateX(-7%);
|
||||
@media(max-width:767px){
|
||||
height: 100% !important;
|
||||
width:auto!important;
|
||||
max-width: unset;
|
||||
position: relative !important;
|
||||
margin: 0 !important;
|
||||
transform: translateX(-7%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1247,28 +1213,28 @@
|
|||
@media(max-width: $screen-xs){
|
||||
width: 100% !important;
|
||||
}
|
||||
@media(min-width: 1600px){
|
||||
height: 20em;
|
||||
@media(min-width: 1100px){
|
||||
height: 22em;
|
||||
.w-annc__img-wrap{
|
||||
height: 20em;
|
||||
height: 22em;
|
||||
}
|
||||
}
|
||||
@media(min-width: 821px)and(max-width: 1599px){
|
||||
height: 20em;
|
||||
@media(min-width: 821px)and(max-width: 1100px){
|
||||
height: 22em;
|
||||
.w-annc__img-wrap{
|
||||
height: 20em;
|
||||
height: 22em;
|
||||
}
|
||||
}
|
||||
@media(min-width: $screen-xs)and(max-width: 820px){
|
||||
height: 16em;
|
||||
height: 15em;
|
||||
.w-annc__img-wrap{
|
||||
height: 16em;
|
||||
height: 15em;
|
||||
}
|
||||
}
|
||||
@media(max-width: $screen-xs){
|
||||
height: 16em;
|
||||
height: 10em;
|
||||
.w-annc__img-wrap{
|
||||
height: 16em;
|
||||
height: 10em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1296,6 +1262,12 @@
|
|||
180deg
|
||||
, #ffffff00 32%, #00000080 89%);
|
||||
width: 100%;
|
||||
@media(max-width:$screen-xs){
|
||||
padding: 10px;
|
||||
.w-annc__title{
|
||||
font-size: medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card:before{
|
||||
content: "";
|
||||
|
|
@ -1624,13 +1596,8 @@
|
|||
.widget-announcement-14 {
|
||||
|
||||
.w-annc__img-wrap {
|
||||
height: 18.75em;
|
||||
margin-bottom: 0.9375em;
|
||||
|
||||
@media (min-width: $screen-md) {
|
||||
height: 12.5em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.w-annc__item {
|
||||
|
|
@ -1674,7 +1641,7 @@
|
|||
}
|
||||
|
||||
.w-annc__img-wrap {
|
||||
height: 17.5em;
|
||||
height: 15.5em;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -1699,7 +1666,7 @@
|
|||
width: 356px!important;
|
||||
}
|
||||
@media (max-width: $screen-xs) {
|
||||
width: 93.5vw !important;
|
||||
width: 94.5vw !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 1em !important;
|
||||
}
|
||||
|
|
@ -1778,11 +1745,11 @@
|
|||
height: 2em;
|
||||
}
|
||||
.w-annc__img-wrap {
|
||||
height: 12.5em;
|
||||
height: 13.5em;
|
||||
margin:0;
|
||||
overflow: hidden;
|
||||
@media (max-width: $screen-xs) {
|
||||
height: 12.5em;
|
||||
height: 13.5em;
|
||||
}
|
||||
}
|
||||
.w-annc__content-wrap{
|
||||
|
|
@ -1910,7 +1877,7 @@
|
|||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.w-annc__img-wrap {
|
||||
height: 12.5em;
|
||||
height: 13.5em;
|
||||
margin: 0 0 1em 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -2316,7 +2283,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
|
|||
}
|
||||
.i-annc__img-wrap {
|
||||
overflow: hidden;
|
||||
height: 12.5em;
|
||||
height: 13.5em;
|
||||
margin: 1em 0.5em;
|
||||
img {
|
||||
@media (max-width:767px) {
|
||||
|
|
@ -2354,7 +2321,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
|
|||
|
||||
.i-annc__img-wrap {
|
||||
overflow: hidden;
|
||||
height: 12.5em;
|
||||
height: 13.5em;
|
||||
margin: 1em 0.5em;
|
||||
img {
|
||||
@media (max-width:767px) {
|
||||
|
|
|
|||
|
|
@ -245,16 +245,6 @@
|
|||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
.w-annc__img-wrap {
|
||||
img{
|
||||
height: 100% !important;
|
||||
width: auto!important;
|
||||
max-width: unset;
|
||||
position: relative !important;
|
||||
margin: 0 !important;
|
||||
// transform: translateX(-7%);
|
||||
}
|
||||
}
|
||||
.w-annc__item{
|
||||
padding: 0;
|
||||
margin-right: 0.5em;
|
||||
|
|
@ -320,13 +310,7 @@
|
|||
}
|
||||
}
|
||||
.event-news-22{
|
||||
.w-annc__img{
|
||||
@media(max-width: 768px){
|
||||
height: 100% !important;
|
||||
width: auto!important;
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.w-annc__content-wrap{
|
||||
width:50%!important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,17 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
.video_desc{
|
||||
cite{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.video_tag .video_tags2{
|
||||
display: none;
|
||||
&:first-child{
|
||||
display: block!important;
|
||||
}
|
||||
}
|
||||
.Video__Player{
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
|
|
@ -63,13 +74,13 @@
|
|||
}
|
||||
}
|
||||
.w-video_data{
|
||||
padding-bottom: 1em;
|
||||
position: relative;
|
||||
.video_keyword{
|
||||
display: none;
|
||||
}
|
||||
.video_tag{
|
||||
top:10px;
|
||||
left:10px;
|
||||
max-height: 100%;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
|
|
@ -87,11 +98,14 @@
|
|||
color: #fff;
|
||||
z-index: 5;
|
||||
.video_tags2 {
|
||||
&:first-child{
|
||||
border:1px #fff solid;
|
||||
border-radius: 2px;
|
||||
background-color: #1515154d;
|
||||
}
|
||||
float: left;
|
||||
min-width: 5em;
|
||||
border: 1px solid;
|
||||
border-radius: 2px;
|
||||
background-color: #1515154d;
|
||||
padding: 0 0.5em;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -164,12 +178,17 @@
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.video_data-widget-1{
|
||||
.video_info{
|
||||
margin:0.5em 0;
|
||||
}
|
||||
}
|
||||
.video_data-widget-2{
|
||||
|
||||
cite{
|
||||
display: none;
|
||||
}
|
||||
.col-sm-4{
|
||||
@media(min-width:768px){
|
||||
width: 33.33333333%;
|
||||
|
|
@ -201,16 +220,10 @@
|
|||
display: none;
|
||||
}
|
||||
.video_data{
|
||||
|
||||
&:first-child{
|
||||
.video_keyword{
|
||||
display: -webkit-box !important;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video_tags2{
|
||||
display: block!important;
|
||||
}
|
||||
.video_linkwrapper2{
|
||||
|
||||
@media(min-width:$screen-xs)and(max-width:768px){
|
||||
|
|
@ -218,13 +231,16 @@
|
|||
}
|
||||
}
|
||||
width: 100% ;
|
||||
margin-bottom: 2em;
|
||||
@media(max-width:1024px){
|
||||
width: 100%!important;
|
||||
}
|
||||
@media(max-width:$screen-xs){
|
||||
width: 100.5vw !important;
|
||||
margin-left: -6vw;
|
||||
}
|
||||
.video_desc{
|
||||
.video_link{
|
||||
text-align: center;
|
||||
&:hover{
|
||||
&:before{
|
||||
background-color: #c21000!important;
|
||||
|
|
@ -259,31 +275,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.video_title{
|
||||
&:before{
|
||||
content: '';
|
||||
position: relative;
|
||||
background: url(/assets/icon-now.svg) no-repeat;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background-size: contain;
|
||||
display: block;
|
||||
margin-right: 0.5em;
|
||||
margin-top: 1.2em;
|
||||
float: left;
|
||||
@media(max-width:$screen-xs){
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: -2.5em;
|
||||
left: 44%;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
h5{
|
||||
font-size: 1.8em;
|
||||
}
|
||||
}
|
||||
.videohover{
|
||||
display: none!important;
|
||||
}
|
||||
|
|
@ -303,12 +294,12 @@
|
|||
margin-bottom: 8em;
|
||||
|
||||
}
|
||||
margin-bottom: 2em;
|
||||
|
||||
.video_group_time{
|
||||
color: #fff!important;
|
||||
position: absolute;
|
||||
bottom: 4.5em;
|
||||
margin-left: 9.5em;
|
||||
margin-left: 10.5em;
|
||||
}
|
||||
.view_info{
|
||||
display: none;
|
||||
|
|
@ -339,6 +330,11 @@
|
|||
padding: 2em 5em;
|
||||
width: 55%;
|
||||
}
|
||||
@media(max-width:820px)and(min-width:767px){
|
||||
.video_title h5{
|
||||
font-size: 1.6em;
|
||||
}
|
||||
}
|
||||
@media(max-width:767px){
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
|
|
@ -348,10 +344,11 @@
|
|||
padding-top: 3em;
|
||||
.video_title h5{
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
}
|
||||
.video_tag{
|
||||
left: 12%;
|
||||
bottom: 9em;
|
||||
bottom: 10.5em;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
display: flex!important;
|
||||
|
|
@ -381,13 +378,13 @@
|
|||
height: 40.6em;
|
||||
}
|
||||
@media(min-width:769px)and(max-width:1024px){
|
||||
height: 32.6em;
|
||||
height: 32.6em!important;
|
||||
}
|
||||
@media(max-width: 821px)and(min-width: 769px){
|
||||
height: 25.6em;
|
||||
height: 25.6em!important;
|
||||
}
|
||||
@media(max-width:$screen-xs){
|
||||
height: 14.5em;
|
||||
height: 14.5em!important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -401,12 +398,12 @@
|
|||
}
|
||||
.btnwrapper{
|
||||
@media(max-width:768px)and(min-width:$screen-xs){
|
||||
top: 90%!important;
|
||||
top:100%!important;
|
||||
width: 14%!important;
|
||||
left: 44%!important;
|
||||
}
|
||||
@media(max-width:$screen-xs){
|
||||
top: 90%!important;
|
||||
top: 100%!important;
|
||||
width: 24% !important;
|
||||
left: 38% !important;
|
||||
}
|
||||
|
|
@ -437,6 +434,7 @@
|
|||
text-overflow: ellipsis;
|
||||
max-height: 4.5em;
|
||||
line-height: 1.5em;
|
||||
min-height: 4.5em;
|
||||
}
|
||||
.video_info{
|
||||
margin:0.5em 0;
|
||||
|
|
@ -450,56 +448,27 @@
|
|||
white-space: normal;
|
||||
}
|
||||
}
|
||||
.video_data-widget-4{
|
||||
.btnwrapper{
|
||||
@media(max-width:$screen-xs){
|
||||
top: 90%!important;
|
||||
width: 24% !important;
|
||||
left: 38% !important;
|
||||
}
|
||||
}
|
||||
.video_data_wrap{
|
||||
@media(min-width:$screen-xs){
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
.video_data{
|
||||
|
||||
@media(max-width:821px)and(min-width:$screen-xs){
|
||||
width: 48vw !important;
|
||||
float: none;
|
||||
}
|
||||
@media(max-width:$screen-xs){
|
||||
width: 92.5vw !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 1em !important;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
.video_desc{
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-height: 4.5em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.video_info{
|
||||
margin:0.5em 0;
|
||||
min-height: 6em;
|
||||
}
|
||||
.video_link{
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
.video_data-widget-5{
|
||||
margin-bottom: 1em!important;
|
||||
.video_data{
|
||||
.video_group_time{
|
||||
display: none;
|
||||
}
|
||||
.video_desc{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
span.video-date {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-family: "Noto Sans TC", PingFangTC, 微軟正黑體, "Microsoft JhengHei", sans-serif;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.3px;
|
||||
color: #8f8f8f;
|
||||
line-height: 1.6;
|
||||
cursor: pointer;
|
||||
}
|
||||
margin-bottom: 1em;
|
||||
.cycle-pager{
|
||||
font-size: 1.25rem;
|
||||
font-family: "Noto Serif TC", serif;
|
||||
|
|
@ -507,7 +476,8 @@
|
|||
h5{
|
||||
font-size: 1.25rem;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 0.5em;
|
||||
padding: 0.5em 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -620,7 +590,7 @@
|
|||
}
|
||||
.video_data{
|
||||
@media(max-width:$screen-xs){
|
||||
width: 93.5vw !important;
|
||||
width: 88.5vw !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 1em !important;
|
||||
float: none;
|
||||
|
|
@ -648,6 +618,14 @@
|
|||
}
|
||||
}
|
||||
.video_detail{
|
||||
@media(max-width:820px){
|
||||
.video_box_wrap{
|
||||
width: 100vw!important;
|
||||
left: -1em!important;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h3{
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
|
@ -692,6 +670,9 @@
|
|||
}
|
||||
}
|
||||
.imglst_desc{
|
||||
.cite{
|
||||
font-style: normal !important;
|
||||
}
|
||||
.video_tag{
|
||||
background-color: transparent;
|
||||
color: $theme-color-second;
|
||||
|
|
@ -701,9 +682,11 @@
|
|||
display: inline-block;
|
||||
padding: 0px 7px;
|
||||
max-height: 100%;
|
||||
border: 1px solid;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1em;
|
||||
&:first-child{
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
.video_title {
|
||||
|
|
@ -734,7 +717,6 @@
|
|||
height: 12em;
|
||||
overflow:hidden;
|
||||
width: 100%;
|
||||
border-radius: 1em;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -750,13 +732,35 @@
|
|||
padding-bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
.video_data-widget-10{
|
||||
padding-top: 2em;
|
||||
.video_info{
|
||||
margin:0.5em 0;
|
||||
}
|
||||
.video_data{
|
||||
@media(max-width:820px)and(min-width: $screen-xs){
|
||||
width: 50%!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.video_linkwrapper10{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 9.5em;
|
||||
@media(max-width: 1025px)and(min-width: 821px){
|
||||
height:7.5em;
|
||||
}
|
||||
@media(max-width: 821px)and(min-width: 769px){
|
||||
height:13em;
|
||||
}
|
||||
@media(max-width:768px)and(min-width: 600px){
|
||||
height: 12em;
|
||||
}
|
||||
@media(max-width: $screen-xs){
|
||||
height:13em;
|
||||
}
|
||||
}
|
||||
.video_linkwrapper{
|
||||
position:relative;
|
||||
height: 12.5em;
|
||||
overflow:hidden;
|
||||
width: 100%;
|
||||
border-radius: 1em;
|
||||
@media(max-width: 1025px)and(min-width: 821px){
|
||||
height:10.5em;
|
||||
}
|
||||
|
|
@ -767,7 +771,7 @@
|
|||
height: 23.5em;
|
||||
}
|
||||
@media(max-width: $screen-xs){
|
||||
height: 11.5em;
|
||||
height: 12em;
|
||||
}
|
||||
}
|
||||
.video_linkwrapper2{
|
||||
|
|
@ -787,7 +791,7 @@
|
|||
height: 22.5em;
|
||||
}
|
||||
@media(max-width:$screen-xs){
|
||||
height: 13em;
|
||||
height: 12em;
|
||||
}
|
||||
}
|
||||
.video_linkwrapper3{
|
||||
|
|
@ -809,33 +813,9 @@
|
|||
|
||||
}
|
||||
@media(max-width: $screen-xs){
|
||||
height:13em;
|
||||
height:12em;
|
||||
}
|
||||
}
|
||||
.video_linkwrapper4{
|
||||
position:relative;
|
||||
height: 9em;
|
||||
overflow:hidden;
|
||||
|
||||
@media(max-width: 1025px)and(min-width: 821px){
|
||||
height:7em;
|
||||
|
||||
|
||||
}
|
||||
@media(max-width: 821px)and(min-width: 769px){
|
||||
height: 7.8em;
|
||||
|
||||
|
||||
}
|
||||
@media(max-width:768px)and(min-width:$screen-xs){
|
||||
height: 11.5em;
|
||||
|
||||
}
|
||||
@media(max-width: $screen-xs){
|
||||
height:13em;
|
||||
|
||||
}
|
||||
}
|
||||
.video_linkwrapper5{
|
||||
|
||||
position:relative;
|
||||
|
|
@ -856,7 +836,7 @@
|
|||
|
||||
}
|
||||
@media(max-width: $screen-xs){
|
||||
height:13em;
|
||||
height:12em;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -889,6 +869,11 @@
|
|||
position: relative;
|
||||
}
|
||||
}
|
||||
.video_data-index-2{
|
||||
.video_tag{
|
||||
display: block!important;
|
||||
}
|
||||
}
|
||||
.video_data-index-4{
|
||||
|
||||
.i-annc__page-title{
|
||||
|
|
@ -928,9 +913,9 @@
|
|||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.video_linkwrapper2{
|
||||
height: 9.5em;
|
||||
}
|
||||
// .video_linkwrapper2{
|
||||
// height: 9.5em;
|
||||
// }
|
||||
.video_desc{
|
||||
letter-spacing: 0.3px;
|
||||
color: #8f8f8f;
|
||||
|
|
@ -949,7 +934,7 @@
|
|||
white-space: normal;
|
||||
}
|
||||
.video_tag{
|
||||
top:10px;
|
||||
top:5px;
|
||||
left: 10px;
|
||||
max-height: 100%;
|
||||
border: 0;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
|
||||
</div>
|
||||
<ul class="w-annc__list row" data-level="0" data-list="announcements">
|
||||
<li class="w-annc__item col-md-4">
|
||||
<li class="w-annc__item col-sm-4">
|
||||
<div class="w-annc__img-wrap">
|
||||
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
|
||||
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div class="i-member-item-inner clearfix">
|
||||
<div class="i-member-pic-wrap col-sm-3">
|
||||
<a href="{{link_to_show}}" title="{{name}}">
|
||||
<img class="i-member-pic img-thumbnail" src="{{image}}" alt="{{name}}" title="{{name}}">
|
||||
<img class="i-member-pic img-thumbnail" src="{{image}}" title="{{name}}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="i-member-profile-data-wrap col-sm-9">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div class="i-member-item-inner clearfix">
|
||||
<div class="i-member-pic-wrap col-sm-4 col-xs-4">
|
||||
<a href="{{link_to_show}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" alt="{{name}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" title="{{name}}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="i-member-profile-data-wrap col-sm-8 col-xs-8">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div class="i-member-item-inner clearfix">
|
||||
<div class="i-member-pic-wrap">
|
||||
<a href="{{link_to_show}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" alt="{{name}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" title="{{name}}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="i-member-profile-data-wrap">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div class="i-member-item-inner clearfix">
|
||||
<div class="i-member-pic-wrap">
|
||||
<a href="{{link_to_show}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" alt="{{name}}" title="{{name}}">
|
||||
<img class="i-member-pic" src="{{image}}" title="{{name}}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="i-member-profile-data-wrap">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div class="w-video_data video_data-widget-1">
|
||||
<h3 class="widget-title"><span>{{widget-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}}">
|
||||
<a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
|
||||
|
|
@ -25,10 +26,6 @@
|
|||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
<style>
|
||||
.video_data_wrap{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.video_title h5{
|
||||
@extend .i-title;
|
||||
display: -webkit-box;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div class="w-video_data video_data-widget-2">
|
||||
<h3 class="widget-title"><span>{{widget-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}}" >
|
||||
<a href="{{video_show_url}}" title="{{video_title_escape}}">
|
||||
|
|
@ -28,13 +29,6 @@
|
|||
</div>
|
||||
<style>
|
||||
|
||||
.video_tags2{
|
||||
float: left;
|
||||
min-width: 5em;
|
||||
border: 1px solid;
|
||||
border-radius: 2px;
|
||||
background-color: #1515154d;
|
||||
}
|
||||
.video_title h5{
|
||||
@extend .i-title;
|
||||
display: -webkit-box;
|
||||
|
|
@ -53,11 +47,11 @@
|
|||
|
||||
</style>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$(".video_keyword").each(function () {
|
||||
$(this).insertAfter($(this).siblings(".video_tag").find(".video_tags2"));
|
||||
});
|
||||
});
|
||||
# $(document).ready(function () {
|
||||
# $(".video_keyword").each(function () {
|
||||
# $(this).insertAfter($(this).siblings(".video_tag").find(".video_tags2"));
|
||||
# });
|
||||
# });
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="w-video_data video_data-widget-3">
|
||||
<h3 class="widget-title"><span>{{widget-title}}</span></h3>
|
||||
<div class="btnwrapper" style="position: absolute;top: 50%;width:100%; z-index: 101;">
|
||||
<div style="">
|
||||
<button id="prev-{{subpart-id}}" class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="float: left;height: 2.5em; width: 2.5em;background: border: 0;background-size: contain;position: absolute;transition:.3s; left: 0.6%;
|
||||
color: #909090;
|
||||
background: #fff;
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
background: #fff;
|
||||
border-radius: 50%;
|
||||
border: none; z-index: 2;"><i class="fa fa-angle-right next-button" aria-hidden="true" style="font-size: 1.5rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %></span></button>
|
||||
</div>
|
||||
</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"
|
||||
|
|
|
|||
|
|
@ -1,135 +1,47 @@
|
|||
<div class="w-video_data video_data-widget-4">
|
||||
<div class="btnwrapper" style="position: absolute;
|
||||
top: 19%;
|
||||
width: 97%;
|
||||
z-index: 101;
|
||||
margin-left: -0.5em;">
|
||||
<div style="">
|
||||
<button id="prev-{{subpart-id}}" class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="float: left;height: 2.5em; width: 2.5em;background: border: 0;background-size: contain;position: absolute;transition:.3s; left: 0.6%;
|
||||
color: #909090;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
border: none; z-index: 2;"><i class="fa fa-angle-left prev-button" aria-hidden="true" style="font-size: 1.5rem;"></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;;height: 2.5em; width: 2.5em;background-size: contain;border: 0;position: absolute;transition:.3s;right: 0.6%;
|
||||
color: #909090;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
border: none; z-index: 2;"><i class="fa fa-angle-right next-button" aria-hidden="true" style="font-size: 1.5rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %></span></button>
|
||||
</div>
|
||||
</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="3"
|
||||
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_linkwrapper4">
|
||||
<div class="videohover">
|
||||
<div class="view_info">
|
||||
<span>{{view_count}}</span>
|
||||
<div class="w-video_data video_data-widget-4" style=" background: #f0f0f0;">
|
||||
<h3 class="widget-title"><span>{{widget-title}}</span></h3>
|
||||
<ul class="video_data_wrap row container" data-list="videos" data-level="0">
|
||||
<li class="video_data col-xs-12 col-sm-3" 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_linkwrapper10">
|
||||
<div class="videohover">
|
||||
<div class="view_info">
|
||||
<span>{{view_count}}</span>
|
||||
</div>
|
||||
<div class="Video__Player"><button class="Video__PlayerButton"></button></div>
|
||||
<div class="videoduration"></div>
|
||||
</div>
|
||||
<div class="Video__Player"><button class="Video__PlayerButton"></button></div>
|
||||
<div class="videoduration"></div>
|
||||
<img class="video_snapshot" src="{{snapshot_url}}"/>
|
||||
</div>
|
||||
<img class="video_snapshot" src="{{snapshot_url}}"/>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<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"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h5>{{video_title}}</h5></a></div>
|
||||
</div>
|
||||
</li>
|
||||
<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"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h5>{{video_title}}</h5></a></div>
|
||||
<div class="video_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></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;
|
||||
}
|
||||
.Video__Player{
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.Video__PlayerButton{
|
||||
display: inline-block;
|
||||
padding-bottom: 0px;
|
||||
padding-top: 0px;
|
||||
border-radius: 50%;
|
||||
border: 0px;
|
||||
background-color: rgb(255, 81, 0);
|
||||
background: url(/assets/btn-play.svg) no-repeat;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
transition: 0.5s;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
&:hover{
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
<style>
|
||||
.video_title h5{
|
||||
@extend .i-title;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
&:before{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
.view_info{
|
||||
float: right;
|
||||
}
|
||||
.view_info img{
|
||||
margin-right: 5px;
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
background: url(/assets/icon-view@2x.png) no-repeat;
|
||||
position: relative;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<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"
|
||||
|
|
@ -26,6 +27,7 @@
|
|||
<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>
|
||||
|
|
@ -37,17 +39,29 @@ $(document).ready(function () {
|
|||
setTimeout(function () {
|
||||
$(".w-video_data").each(function () {
|
||||
var $container = $(this);
|
||||
var videoTitles = $container.find(".video_data")
|
||||
.not(".cycle-sentinel") // 過濾掉 Cycle2 產生的複製元素
|
||||
.map(function () {
|
||||
return $(this).attr("data-title");
|
||||
})
|
||||
.get();
|
||||
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, videoTitles.length).each(function (index) {
|
||||
var title = videoTitles[index]; //確保順序正確
|
||||
$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);
|
||||
});
|
||||
|
||||
|
|
@ -70,15 +84,22 @@ $(document).ready(function () {
|
|||
var itemsPerPage = 5;
|
||||
var currentIndex = 0;
|
||||
|
||||
// 取得所有 video_data 的標題
|
||||
var videoTitles = $items.map(function () {
|
||||
return $(this).attr("data-title");
|
||||
// 取得所有 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 = "";
|
||||
videoTitles.forEach(function (title, index) {
|
||||
pagerHTML += `<a href="#" class="pager-item" data-slide-num="${index}"><h5>${title}</h5></a>`;
|
||||
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
|
||||
|
|
@ -116,8 +137,6 @@ $(document).ready(function () {
|
|||
// 取得對應的 video_data
|
||||
var firstPagerIndex = firstPagerItem.data("slide-num");
|
||||
var $firstVideoItem = $items.eq(firstPagerIndex).show().addClass("cycle-slide-active");
|
||||
|
||||
console.log(`顯示的第一個 pager-item 索引: ${firstPagerIndex}`);
|
||||
}
|
||||
|
||||
// 綁定 Pager 點擊事件
|
||||
|
|
@ -153,4 +172,5 @@ $(document).ready(function () {
|
|||
}, 300); // 延長時間確保 DOM 生成
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -28,14 +28,14 @@
|
|||
"thumbnail" : "thumb.png"
|
||||
},
|
||||
{
|
||||
"filename" : "video_pro_widget4",
|
||||
"force_cover": "true",
|
||||
"name" : {
|
||||
"zh_tw" : "4. 影片列表倫波 ( 縮圖, 頁面連結)",
|
||||
"en" : "4.carousel-Video List ( snapshot, page link)"
|
||||
},
|
||||
"thumbnail" : "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" : "thumb.png"
|
||||
},
|
||||
{
|
||||
"filename" : "video_pro_widget5",
|
||||
"force_cover": "true",
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
<style>
|
||||
.video_data-index-1{
|
||||
.video_desc{
|
||||
height:auto!important;
|
||||
}
|
||||
|
|
@ -83,6 +84,8 @@
|
|||
border-bottom: 2px solid #1a1b20;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,7 @@
|
|||
<div class="i-video_data video_data-index-4">
|
||||
<h3 class="i-annc__page-title">{{page-title}}</h3>
|
||||
<div class="video_filter_area col-sm-12">
|
||||
<form>
|
||||
<div class="category_box col-sm-12">
|
||||
<select name="category" id="filter_category_box" data-list="categories" data-level="0">
|
||||
{{option}}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
|
||||
<li class="video_data col-sm-3" 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="{{video_show_url}}" title="{{video_title_escape}}">
|
||||
<div class="video_linkwrapper2">
|
||||
<div class="videohover">
|
||||
|
|
|
|||
Loading…
Reference in New Issue