This commit is contained in:
ken 2026-06-24 19:28:29 +08:00
parent 91af81075f
commit 10302c125f
45 changed files with 1384 additions and 729 deletions

File diff suppressed because it is too large Load Diff

View File

@ -62,11 +62,7 @@ a:focus {
text-decoration: none;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.admin-edit {
clear: both;
@ -171,13 +167,17 @@ a.btn-primary {
}
}
}
.w-annc,.i-video_data,.w-video_data,.w-ba-banner,.widget-link{
.w-annc,.i-video_data,.w-video_data,.w-ba-banner,.widget-link,.i-member-pic-wrap,.i-annc__img-wrap{
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
img {
max-width: 100%;
height: auto;
}
// Take care of exceeding content
// body[data-module="page_content"],
// body[data-module="announcement"] {

View File

@ -78,18 +78,39 @@
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
.search_widget{
font-size: 1em!important;
}
.status {
font-family: $main-font;
font-size: 0.750em;
}
.status-top {
background-color: $theme-color-main;
border-radius: 1em!important;
display: flex;
justify-content: center;
align-items: center;
transform: rotate(45deg);
float: left;
i{
color: #a2a2a2!important;
font-size: 1em!important;
padding: 0!important;
}
}
.status-hot {
background-color: $theme-color-third;
border-radius: 1em!important;
display: flex;
justify-content: center;
align-items: center;
float: left;
i{
color: #c60000!important;
font-size: 1em!important;
padding: 0!important;
}
}
.status-source {

View File

@ -574,10 +574,10 @@ button.close {
}
}
.tab-content>.tab-pane {
display: none
}
// .tab-content>.tab-pane {
// display: none
// }
.tab-content>.active {
display: block
}
// .tab-content>.active {
// display: block
// }

View File

@ -69,7 +69,7 @@
position: relative;
width: 100%;
background: #F8F9FA;
padding-bottom: 2em;
padding-bottom: 3em;
padding-top: 2em;
p{
padding-bottom: 1em;

View File

@ -111,8 +111,8 @@ a[href="/en/sitemap"]{
padding: 0.5em 0;
}
.header-nav {
display: flex !important;
flex-wrap: wrap;
// display: flex !important;
// flex-wrap: wrap;
ul{
padding: 0;
}
@ -148,7 +148,7 @@ a[href="/en/sitemap"]{
list-style: none;
}
a[accesskey]{
position: relative;
}
.container {
@ -200,6 +200,7 @@ a[href="/en/sitemap"]{
}
.navbar-header {
z-index: 10;
position: relative;
padding: 0;
margin: 0;
display: flex;

View File

@ -45,14 +45,13 @@
}
}
.w-annc__status{
margin-right: 0.5em;
line-height: 1 !important;
}
.w-annc__status-wrap{
display: flex;
}
.i-annc__status-wrap{
display: flex;
float: left;
}
.i-annc__th--date{
min-width: 6em;
@ -260,9 +259,9 @@
}
.w-annc__img-wrap {
padding: 0;
aspect-ratio: 16 / 9;
}
.w-annc__content-wrap {
padding-top: 1em;
@media(max-width: $screen-xs){
padding-right: 0.9375em;
padding-left: 0.9375em;
@ -330,7 +329,7 @@
clear: both;
}
.w-annc__img-wrap {
height: 14.5em;
aspect-ratio: 16 / 9;
margin:0;
.w-annc__img{
width: 100%;
@ -949,6 +948,7 @@
margin-bottom: 0.5em;
border-radius: 20px;
overflow: hidden;
aspect-ratio: 16 / 9;
.w-annc__img{
width: 100%;
position: relative !important;
@ -2098,18 +2098,19 @@
margin: 0;
overflow: hidden;
border: 2px solid #333;
@media(min-width:480px)and(max-width:820px){
height: 9.5em;
}
@media(min-width:821px)and(max-width:1024px){
height: 12.5em;
}
@media(min-width:1025px){
height: 15.5em;
}
@media(max-width:480px){
height: 14.5em;
}
aspect-ratio: 16 / 9;
// @media(min-width:480px)and(max-width:820px){
// height: 9.5em;
// }
// @media(min-width:821px)and(max-width:1024px){
// height: 12.5em;
// }
// @media(min-width:1025px){
// height: 15.5em;
// }
// @media(max-width:480px){
// height: 14.5em;
// }
}
.w-annc__item{
padding: 0.5em;
@ -2160,6 +2161,7 @@
}
.w-annc__img-wrap {
margin: 0 0 0.5rem 0;
aspect-ratio: 16 / 9;
}
}
@ -2206,12 +2208,9 @@
height: 2em;
}
.w-annc__img-wrap {
height: 13.5em;
aspect-ratio: 16 / 9;
margin:0;
overflow: hidden;
@media (max-width: $screen-xs) {
height: 13.5em;
}
}
.w-annc__content-wrap{
background-color: #fff;
@ -2712,7 +2711,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
}
.i-annc__img-wrap {
overflow: hidden;
height: 13.5em;
aspect-ratio: 16 / 9;
margin: 1em 0.5em;
img {
@media (max-width:767px) {
@ -2752,7 +2751,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
}
.i-annc__img-wrap {
overflow: hidden;
height: 13.5em;
aspect-ratio: 16 / 9;
margin: 0.5em;
img {
@media (max-width:767px) {
@ -3150,11 +3149,19 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
display: inline-block;
}
.s-annc__flie-title {
.s-annc__flie-title,.s-annc__link-title {
padding-left: 0;
white-space: nowrap;
width: 100%;
margin-bottom: 0.5em;
text-align: justify;
color: #0077D8;
border: 1px solid #0077D8;
margin-bottom: 1em;
padding: 0.5em;
&:hover{
background:#f3f3f3;
}
}
.s-annc__social > * {
@ -3206,7 +3213,6 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
text-align: center;
background-color: #aab2bd;
border-radius: 4px;
//behavior: url("/assets/ie_support/PIE2/PIE.htc");
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
z-index: 100;
@ -3227,7 +3233,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
background-color: #4fc1e9;
border: 4px solid #f5f7fa;
border-radius: 50%;
//behavior: url("/assets/ie_support/PIE2/PIE.htc");
-webkit-border-radius: 50%;
-moz-border-radius: 50%
}
@ -3249,7 +3255,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
margin-top: 31px;
background-color: #CCC;
border-radius: 4px;
//behavior: url("/assets/ie_support/PIE2/PIE.htc");
-webkit-border-radius: 4px;
-moz-border-radius: 4px
}
@ -3304,7 +3310,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
.VivaTimeline dl dd .events .events-footer ol li {
background: #32b487;
border-radius: 5px;
//behavior: url("/assets/ie_support/PIE2/PIE.htc");
margin: 10px;
display: inline-block;
width: 10px;
@ -3521,3 +3527,9 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
padding: 0;
}
}
.carousel_img_item img {
cursor: pointer;
width: 100%;
height: 100%;
object-fit: cover;
}

View File

@ -499,6 +499,9 @@
.member-plugins {
margin: 0;
li{
list-style: none;
}
a {

View File

@ -193,7 +193,6 @@
.modules-menu {
font-family: $sub-font;
max-height: none;
z-index: 1020;
li {
padding: 1em;

View File

@ -163,7 +163,7 @@
-o-transition: all .3s ease;
transition: all .3s ease;
}
.video_linkwrapper2{
.video_linkwrapper{
.video_snapshot{
-webkit-transform: scale(1.1) !important;
-ms-transform: scale(1.1) !important;
@ -232,12 +232,6 @@
.video_tags2{
display: block!important;
}
.video_linkwrapper2{
@media(min-width:$screen-xs)and(max-width:768px){
height: 24em;
}
}
width: 100% ;
margin-bottom: 2em;
@media(max-width:1024px){
@ -379,23 +373,6 @@
}
}
.video_linkwrapper2{
@media(min-width:1025px){
height: 40.6em;
}
@media(min-width:769px)and(max-width:1024px){
height: 32.6em!important;
}
@media(max-width: 821px)and(min-width: 769px){
height: 25.6em!important;
}
@media(max-width:$screen-xs){
height: 14.5em!important;
}
}
}
}
@ -804,10 +781,20 @@
border: 1px solid #6868688f;
}
.video_linkwrapper{
padding: 0;
border-radius: 0.5em;
position:relative;
height: 13.5em;
overflow:hidden;
width: 100%;
transition: transform 0.22s ease, box-shadow 0.22s ease;
border-radius: 14px;
box-shadow: 0 4px 18px rgba(127, 119, 221, 0.13);
border: 1px solid #ede9fe;
aspect-ratio: 16 / 9;
&:hover{
transform: translateY(-6px);
box-shadow: 0 12px 32px rgba(127, 119, 221, 0.28);
}
img{
width: 100%;
}
@ -834,102 +821,8 @@
}
}
}
.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: 13.5em;
}
@media(max-width: $screen-xs){
height:13em;
}
}
.video_linkwrapper{
@media(max-width: 1025px)and(min-width: 821px){
height:10.5em;
}
@media(max-width: 821px)and(min-width: 769px){
height:8em;
}
@media(max-width:768px)and(min-width: 600px){
height: 23.5em;
}
@media(max-width: $screen-xs){
height: 13.5em;
}
}
.video_linkwrapper2{
position:relative;
height: 13.5em;
overflow:hidden;
@media(max-width: 1025px)and(min-width: 769px){
height:10em;
}
@media(max-width: 821px)and(min-width: 768px){
height:7.5em;
}
@media(max-width:767px)and(min-width:$screen-xs){
height: 22.5em;
}
@media(max-width:$screen-xs){
height: 13.5em;
}
}
.video_linkwrapper3{
position:relative;
height: 13.5em;
overflow:hidden;
@media(max-width: 1025px)and(min-width: 821px){
height:10em;
}
@media(max-width: 821px)and(min-width: 769px){
height: 7.8em;
}
@media(max-width:768px)and(min-width:$screen-xs){
height: 13.5em;
}
@media(max-width: $screen-xs){
height:13.5em;
}
}
.video_linkwrapper5{
position:relative;
height: 27em;
overflow:hidden;
@media(max-width: 1025px)and(min-width: 821px){
height:21.5em;
}
@media(max-width: 821px)and(min-width: 769px){
height: 7.8em;
}
@media(max-width:768px)and(min-width:$screen-xs){
height: 25em;
}
@media(max-width: $screen-xs){
height:13.5em;
}
aspect-ratio: 16 / 9;
}
.video_group_time{
q{
@ -1004,9 +897,6 @@
color: #ffffff;
}
}
// .video_linkwrapper2{
// height: 9.5em;
// }
.video_desc{
letter-spacing: 0.3px;
color: #8f8f8f;

View File

@ -119,38 +119,38 @@ input:hover {
}
.extra { clear: both; }
.tab-content .tab-pane {
// .tab-content .tab-pane {
display: block !important;
// display: block !important;
height: 0;
// height: 0;
overflow: hidden;
// overflow: hidden;
}
.tab-content .tab-pane.active {
// }
// .tab-content .tab-pane.active {
height: auto;
// height: auto;
overflow: visible;
// overflow: visible;
}
.tab-content .tab-pane {
// }
// .tab-content .tab-pane {
display: block !important;
// display: block !important;
height: 0;
// height: 0;
overflow: hidden;
// overflow: hidden;
}
.tab-content .tab-pane.active {
// }
// .tab-content .tab-pane.active {
height: auto;
// height: auto;
overflow: visible;
// overflow: visible;
}
// }
//公告頁籤
ul.tab_nav {
list-style-type: none;
@ -596,20 +596,19 @@ ul.tab_nav {
tbody td {
position: relative;
padding-left: 45%;
text-align: left;
border-bottom: 1px solid #eee;
min-height: 72px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
/* 用 data-label 顯示對應標題 */
tbody td::before {
content: attr(data-label);
position: absolute;
left: 8px;
position: relative;
left: 0;
width: 40%;
font-weight: bold;
color: #333;
@ -926,19 +925,33 @@ a.ui-state-default{
overflow: hidden;
border-radius: 2em;
height: fit-content;
input:focus,
input:hover{
background: transparent !important;
transition: all 0.2s ease-in-out !important;
border-radius: 2em !important;
}
@media(max-width: 768px){
position: absolute;
right: 6em;
color: #fff;
top: 1em;
}
width: fit-content;
// input:focus,
// input:hover{
// border-color: rgba(82, 168, 236, 0.8);
// outline: 0;
// outline: thin dotted \9;
// -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
// -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
// box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
// border-radius: 2em;
// }
// .btn-search:focus{
// border-color: rgba(82, 168, 236, 0.8);
// outline: 0;
// outline: thin dotted \9;
// -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
// -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
// box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
// border-radius: 1em;
// color: $theme-color-second;
// }
// @media(max-width: 768px){
// position: absolute;
// right: 6em;
// color: #fff;
// top: 1em;
// }
}
.search-box{
width: fit-content;
@ -962,7 +975,7 @@ a.ui-state-default{
position: relative;
@media(max-width:768px){
color:#333!important ;
height: 30px;
}
}
.input-search::placeholder{
@ -1017,8 +1030,6 @@ a.ui-state-default{
pointer-events: auto;
@media(max-width:768px){
color:gray ;
width: 70px;
height: 30px;
}
}
.btn-search:focus ~ .input-search{

View File

@ -41,10 +41,10 @@
<p style="display: none;"><%= I18n.t("ad_banner.pause") %></p>
</a>
</ul>
<ul class="button-mid">
<i class="fa fa-angle-left prev-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></i>
<i class="fa fa-angle-right next-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>"></i>
</ul>
<ul class="button-mid">
<i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
<i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
</ul>
</div>
<script>
var flag = 1;

View File

@ -45,10 +45,10 @@
<p style="display: none;"><%= I18n.t("ad_banner.pause") %></p>
</a>
</ul>
<ul class="button-mid">
<i class="fa fa-angle-left prev-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></i>
<i class="fa fa-angle-right next-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>"></i>
</ul>
<ul class="button-mid">
<i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
<i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
</ul>
</div>
<script>
var flag = 1;

View File

@ -44,8 +44,8 @@
</a>
</ul>
<ul class="button-mid">
<i class="fa fa-angle-left prev-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></i>
<i class="fa fa-angle-right next-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>"></i>
<i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
<i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
</ul>
<div class="background-overlay"></div>
</div>

View File

@ -1,8 +1,8 @@
<div class="w-annc w-annc widget-announcement-15" style="position:relative;">
<div class="w-annc__more-wrap clearfix">
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<div class="w-annc__more-wrap clearfix">
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
</div>
<div style="position: absolute;top: 50%;width:100%; z-index: 101;">
@ -25,6 +25,7 @@
data-cycle-prev="#prev-{{subpart-id}}"
data-cycle-slides=".w-annc__item" >
<li class="w-annc__item " >
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}" class="widget-title-a">
<div class="w-annc__item_inner">
<div class="w-annc__img-wrap bullseye" style="position:relative">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
@ -50,6 +51,7 @@
<p class="w-annc__subtitle">{{subtitle}}</p>
</div>
</div>
</a>
</li>
</ul>
</div>

View File

@ -1,8 +1,8 @@
<div class="w-annc widget-announcement-18">
<div class="w-annc__more-wrap clearfix">
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<div class="w-annc__more-wrap clearfix">
<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">

View File

@ -1,8 +1,8 @@
<div class="w-annc w-annc widget-announcement-19" style="position:relative;">
<div class="w-annc__more-wrap clearfix">
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<div class="w-annc__more-wrap clearfix">
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
</div>
<div style="position: absolute;top: 50%;width:100%; z-index: 101;">

View File

@ -1,8 +1,8 @@
<div class="w-annc widget-announcement-20">
<div class="w-annc__more-wrap clearfix">
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<div class="w-annc__more-wrap clearfix">
<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">

View File

@ -1,8 +1,8 @@
<div class="w-annc widget-announcement-4 widget-announcement-21">
<div class="w-annc__more-wrap clearfix">
<div class="w-annc widget-announcement-21">
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<div class="w-annc__more-wrap clearfix">
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
</div>
<div style="position: absolute;top: 62%;width:100%; z-index: 101;">

View File

@ -1,8 +1,8 @@
<div class="w-annc w-annc widget-announcement-22" style="position:relative;">
<div class="w-annc__more-wrap clearfix">
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<div class="w-annc__more-wrap clearfix">
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
</div>
<div style="position: absolute;top: 50%;width:100%; z-index: 101;">

View File

@ -1,8 +1,8 @@
<div class="w-annc widget-announcement-24">
<div class="w-annc__more-wrap clearfix">
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<div class="w-annc__more-wrap clearfix">
<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">

View File

@ -1,8 +1,8 @@
<div class="w-annc widget-announcement-4 widget-announcement-25">
<div class="w-annc__more-wrap clearfix">
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<div class="w-annc__more-wrap clearfix">
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
</div>
<div class="prevnext" style="position: absolute;top: 62%;width:100%; z-index: 101;">

View File

@ -1,8 +1,8 @@
<div class="w-annc widget-announcement-4">
<div class="w-annc__more-wrap clearfix">
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<div class="w-annc__more-wrap clearfix">
<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">

View File

@ -14,11 +14,12 @@
<i class="fa-solid fa-list"></i>
<span class="w-annc__category">{{category}}</span>
</span>
</div>
<h4 class="w-annc__entry-title">
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
</span>
</div>
<h4 class="w-annc__entry-title">
<span class="w-annc__title">{{title}}</span>
</h4>
<p class="w-annc__subtitle">{{subtitle}}</p>

View File

@ -36,6 +36,7 @@
<a href="{{url}}"><span class="s-annc__tag label label-default">{{tag}}</span></a>
</span>
</li>
{{orbithashtags}}
</ul>
<section class="s-annc__post-wrap">

View File

@ -1,8 +1,8 @@
<div class="w-annc w-annc widget-announcement-15 event-news-15" style="position:relative;">
<div class="w-annc__more-wrap clearfix">
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<div class="w-annc__more-wrap clearfix">
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
</div>
<div style="position: absolute;top: 50%;width:100%; z-index: 101;">

View File

@ -1,8 +1,8 @@
<div class="w-annc widget-announcement-20">
<div class="w-annc__more-wrap clearfix">
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<div class="w-annc__more-wrap clearfix">
<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="event_news">

View File

@ -1,8 +1,8 @@
<div class="w-annc widget-announcement-4 event-news-21">
<div class="w-annc__more-wrap clearfix">
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<div class="w-annc__more-wrap clearfix">
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
</div>
<div style="position: absolute;top: 62%;width:100%; z-index: 101;">

View File

@ -1,9 +1,9 @@
<div class="show-member" module="member">
<div class="row">
<div class="member-pic col-xs-3">
<div class="member-pic col-sm-3">
<img src="{{image}}" alt="{{name}}" title="{{name}}" width="100%">
</div>
<div class="member-data col-xs-9">
<div class="member-data col-sm-9">
<table class="table table-striped">
<div data-list="profile_data" data-level="0">
<tr class="row">
@ -15,7 +15,9 @@
</div>
</div>
<ul class="member-plugins nav nav-pills" role="tablist" data-list="plugins" data-level="0">
<li class="{{plugin_class}}"><a href="#{{plugin_name}}" role="tab" data-bs-toggle="tab" title="{{plugin_title}}">{{plugin_title}}</a></li>
<li class="nav-item {{plugin_class}}">
<a class="nav-link" href="#{{plugin_name}}" role="tab" data-bs-toggle="tab" title="{{plugin_title}}">{{plugin_title}}</a>
</li>
</ul>
<div class="tab-content" data-list="plugins" data-level="0">
<div class="tab-pane {{plugin_class}}" id="{{plugin_name}}">
@ -45,15 +47,21 @@
// Adding class on first element
function memberPlugins() {
var plugins = document.querySelector('.member-plugins');
if( plugins.children.length === 0 ) {
return;
}
if( plugins.querySelectorAll('.member-plugins .active').length === 0 ) {
var navs = plugins.querySelectorAll('.member-plugins > li'),
contents = plugins.nextElementSibling.children[0];
navs[0].className += ' ' + 'active';
contents.className += ' ' + 'active';
if (!plugins || plugins.children.length === 0) return;
// 改用 a.nav-link 判斷是否已有 active不看 li
if (plugins.querySelectorAll('a.nav-link.active').length === 0) {
var firstLink = plugins.querySelector('li a.nav-link');
var firstPane = document.querySelector(firstLink.getAttribute('href'));
// active 只加在 a.nav-link不加在 li
firstLink.classList.add('active');
// pane 要同時加 active 和 show
if (firstPane) {
firstPane.classList.add('active', 'show');
}
}
}
memberPlugins();
}())
@ -91,10 +99,13 @@ $('.tab-pane table').each(function(){
});
}
});
$(document).ready(function () {
$('.member-data-value-5 a').each(function () {
$(this).replaceWith($(this).html()); // 把<a>替換成它裡面的內容
// 同步 li.nav-item 的 active class
document.addEventListener('show.bs.tab', function(e) {
// 移除所有 li 的 active
document.querySelectorAll('.member-plugins li.nav-item').forEach(function(li) {
li.classList.remove('active');
});
// 把被點的 a 的父層 li 加上 active
e.target.closest('li.nav-item').classList.add('active');
});
</script>

View File

@ -3,19 +3,23 @@
<thead>
<tr>
<th class="col-md-1">{{th_year}}</th>
<th class="col-md-6">{{th_course_title}}</th>
<th class="col-md-3">{{th_course_category}}</th>
<th class="col-md-4">{{th_course_title}}</th>
<th class="col-md-2">{{th_course_class}}</th>
<th class="col-md-2">{{th_course_category}}</th>
<th class="col-md-1 min-tablet">{{th_course_semester}}</th>
<th class="col-md-1 min-tablet-l">{{th_authors}}</th>
<th class="col-md-1 min-tablet-2">{{th_url}}</th>
</tr>
</thead>
<tbody data-level="0" data-list="courses">
<tr>
<td>{{year}}</td>
<td><a href="{{link_to_show}}">{{title}}</a></td>
<td>{{course_class}}</td>
<td>{{category}}</td>
<td>{{semester}}</td>
<td>{{authors}}</td>
<td>{{url}}</td>
</tr>
</tbody>
</table>
@ -33,4 +37,4 @@ $('table.courses-index').each(function(){
});
}
});;
</script>
</script>

View File

@ -0,0 +1,154 @@
<style>
tr>th:first-child{
display: none!important;
}
tr>td:first-child{
display: none!important;
}
.universal-table-index3{
table-layout: auto!important;
}
.universal-dropdown-menu {
padding: 15px 18px;
white-space: nowrap;
}
.universal-th-text{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
white-space: normal;
}
.universal-dropdown-menu {
padding: 15px 18px;
white-space: nowrap;
}
.universal-th-text {
padding: 8px 0 0 0;
display: inline;
margin-right: 5px;
}
.universal-dropdown {
display: inline-block;
}
a.universal-btn {
vertical-align: baseline;
color: #fff;
}
.universal-table-index {
border-collapse: collapse;
border: 1px solid #eee;
table-layout: fixed;
word-wrap: break-word;
}
.universal-table-index h3 {
float: left;
margin: 0;
}
.universal-table-index.table td{
padding: 15px 18px;
}
.universal-table-index thead th:last-child .dropdown-menu {
left: auto;
right: 0;
}
/* .universal-table-index tbody {
counter-reset: item;
} */
.universal-th-icon {
border: 1px solid #eee;
padding: 5px 8px;
margin-right: 5px;
color: gray;
cursor: pointer;
}
.universal-th-text.no-sort.no-search {
position: relative;
top: -6px;
}
.image-preview {
width: 120px;
}
</style>
<form class="form-inline universal-form-inline " action="{{url}}" method="get">
<table id="tdstylesp" class="table table-hover table-striped universal-table-index universal-table-index3">
<div class="searchbtn">
<div class="ken-click">
<a href="{{url}}" class="universal-btn btn btn-info {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
<button class="searchbtn2 btn-primary " title="查詢" class="btn btn-default"><i class="fa-solid fa-magnifying-glass"></i>查詢</button>
</div>
</div>
<div class="searchbox">
<div class="theadsearch2">
<div class="row col-md-10 col-xs-12" data-list="searchable-columns" data-level="0">
<div class="{{col-class}}">
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a>
<div class="universal-th-text {{title-class}}">{{title}}</div>
<div class="dropdown universal-dropdown {{search}}">
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
<div class="form-group">
{{form-field}}
<input type="hidden" value="{{key}}" name="column" >
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-xs-12 submit-btn-wrap">
<button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
</div>
</div>
</div>
<caption>
<h3>{{table-name}}</h3>
</caption>
<thead class="theadsearch">
<tr data-list="head-columns" data-level="0">
<th class="col-ken">
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
<div class="universal-th-text {{title-class}}">{{title}}</div>
<div class="dropdown universal-dropdown {{search}}">
<button class="btn btn-sm" id="dLabel" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="搜尋" title="搜尋" role="button">
<i class="fa fa-search"></i>
<span class="caret"></span>
</button>
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
<form class="form-inline universal-form-inline" action="{{url}}" method="get">
<div class="form-group">
{{form-field}}
<input type="hidden" value="{{key}}" name="column" >
</div>
<button class="btn btn-primary" type="submit" class="btn btn-default">Go</button>
</form>
</div>
</div>
</th>
</tr>
</thead>
<tbody data-level="0" data-list="rows">
<tr data-level="1" data-list="columns">
<td>{{text}}</td>
</tr>
</tbody>
</table>
</form>
<div>{{total_entries}}</div>
<div>{{export_button}}</div>
{{pagination_goes_here}}
<script>
// $(document).ready(function(){
// $("tr>th:first-child").removeClass("col-md-3");
// $("tr>th:first-child").addClass("col-md-1");
// $("tr>th:nth-child(2)").removeClass("col-md-3");
// $("tr>th:nth-child(2)").addClass("col-md-6");
// $("tr>th:nth-child(3)").removeClass("col-md-3");
// $("tr>th:nth-child(3)").addClass("col-md-3");
// $("tr>th:nth-child(4)").removeClass("col-md-3");
// $("tr>th:nth-child(4)").addClass("col-md-2");
// $("tr>th:nth-child(5)").removeClass("col-md-3");
// $("tr>th:nth-child(5)").addClass("col-md-3");
// });
// $('.universal-table-index thead tr').prepend('<th></th>')
// $('.universal-table-index tbody tr').prepend('<td></td>')
</script>

View File

@ -0,0 +1,146 @@
<style>
.universal-table-index4{
table-layout: auto!important;
}
.universal-dropdown-menu {
padding: 15px 18px;
white-space: nowrap;
}
.universal-th-text{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
white-space: normal;
}
.universal-dropdown-menu {
padding: 15px 18px;
white-space: nowrap;
}
.universal-th-text {
padding: 8px 0 0 0;
display: inline;
margin-right: 5px;
}
.universal-dropdown {
display: inline-block;
}
a.universal-btn {
vertical-align: baseline;
color: #fff;
}
.universal-table-index {
border-collapse: collapse;
border: 1px solid #eee;
table-layout: fixed;
word-wrap: break-word;
}
.universal-table-index h3 {
float: left;
margin: 0;
}
.universal-table-index.table td{
padding: 15px 18px;
}
.universal-table-index thead th:last-child .dropdown-menu {
left: auto;
right: 0;
}
/* .universal-table-index tbody {
counter-reset: item;
} */
.universal-th-icon {
border: 1px solid #eee;
padding: 5px 8px;
margin-right: 5px;
color: gray;
cursor: pointer;
}
.universal-th-text.no-sort.no-search {
position: relative;
top: -6px;
}
.image-preview {
width: 120px;
}
</style>
<form class="form-inline universal-form-inline " action="{{url}}" method="get">
<table id="tdstylesp" class="table table-hover table-striped universal-table-index universal-table-index4">
<div class="searchbtn">
<div class="ken-click">
<a href="{{url}}" class="universal-btn btn btn-info {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
<button class="searchbtn2 btn-primary " title="查詢" class="btn btn-default"><i class="fa-solid fa-magnifying-glass"></i>查詢</button>
</div>
</div>
<div class="searchbox">
<div class="theadsearch2">
<div class="row col-md-10 col-xs-12" data-list="searchable-columns" data-level="0">
<div class="{{col-class}}">
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a>
<div class="universal-th-text {{title-class}}">{{title}}</div>
<div class="dropdown universal-dropdown {{search}}">
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
<div class="form-group">
{{form-field}}
<input type="hidden" value="{{key}}" name="column" >
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-xs-12 submit-btn-wrap">
<button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
</div>
</div>
</div>
<caption>
<h3>{{table-name}}</h3>
</caption>
<thead class="theadsearch">
<tr data-list="head-columns" data-level="0">
<th class="col-ken">
<a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
<div class="universal-th-text {{title-class}}">{{title}}</div>
<div class="dropdown universal-dropdown {{search}}">
<button class="btn btn-sm" id="dLabel" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="搜尋" title="搜尋" role="button">
<i class="fa fa-search"></i>
<span class="caret"></span>
</button>
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
<form class="form-inline universal-form-inline" action="{{url}}" method="get">
<div class="form-group">
{{form-field}}
<input type="hidden" value="{{key}}" name="column" >
</div>
<button class="btn btn-primary" type="submit" class="btn btn-default">Go</button>
</form>
</div>
</div>
</th>
</tr>
</thead>
<tbody data-level="0" data-list="rows">
<tr data-level="1" data-list="columns">
<td>{{text}}</td>
</tr>
</tbody>
</table>
</form>
<div>{{total_entries}}</div>
<div>{{export_button}}</div>
{{pagination_goes_here}}
<script>
// $(document).ready(function(){
// $("tr>th:first-child").removeClass("col-md-3");
// $("tr>th:first-child").addClass("col-md-1");
// $("tr>th:nth-child(2)").removeClass("col-md-3");
// $("tr>th:nth-child(2)").addClass("col-md-6");
// $("tr>th:nth-child(3)").removeClass("col-md-3");
// $("tr>th:nth-child(3)").addClass("col-md-3");
// $("tr>th:nth-child(4)").removeClass("col-md-3");
// $("tr>th:nth-child(4)").addClass("col-md-2");
// $("tr>th:nth-child(5)").removeClass("col-md-3");
// $("tr>th:nth-child(5)").addClass("col-md-3");
// });
// $('.universal-table-index thead tr').prepend('<th></th>')
// $('.universal-table-index tbody tr').prepend('<td></td>')
</script>

View File

@ -50,7 +50,24 @@
"en" : "6. card 3-col Pure index table+ Multiple Field Search"
},
"thumbnail" : "thumb.png"
}
},
{
"filename" : "index7",
"name" : {
"zh_tw" : "7.rwd左右 單純表格列表 + 多欄位搜尋",
"en" : "7.rwd左右 col Pure index table+ Multiple Field Search"
},
"thumbnail" : "thumb.png"
},
{
"filename" : "index8",
"name" : {
"zh_tw" : "8.rwd左右 含序號表格列表 + 多欄位搜尋",
"en" : "8.rwd左右 col Index Table with serial number + Multiple Field Search"
},
"thumbnail" : "thumb.png",
"default": true
}
],
"widgets" : [
{

View File

@ -21,7 +21,7 @@
<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_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>

View File

@ -3,7 +3,7 @@
<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}}">
<div class="video_linkwrapper2">
<div class="video_linkwrapper">
<div class="videohover">
<div class="view_info">
<span>{{view_count}}</span>
@ -20,7 +20,7 @@
<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_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>

View File

@ -22,7 +22,7 @@
>
<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_linkwrapper3">
<div class="video_linkwrapper">
<div class="videohover">
<div class="view_info">
<span>{{view_count}}</span>
@ -39,7 +39,7 @@
<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_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>

View File

@ -3,7 +3,7 @@
<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="video_linkwrapper">
<div class="videohover">
<div class="view_info">
<span>{{view_count}}</span>
@ -19,7 +19,7 @@
<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_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>

View File

@ -12,7 +12,7 @@
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_linkwrapper5">
<div class="video_linkwrapper">
<div class="videohover">
<div class="view_info">
<span>{{view_count}}</span>

View File

@ -47,7 +47,7 @@
>
<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_linkwrapper6">
<div class="video_linkwrapper">
<div class="videohover">
<div class="view_info">
<span>{{view_count}}</span>
@ -64,7 +64,7 @@
<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_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>

View File

@ -3,7 +3,7 @@
<ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
<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="video_linkwrapper3 col-sm-4">
<div class="video_linkwrapper col-sm-4">
<div class="videohover">
<div class="Video__Player"><button class="Video__PlayerButton"></button></div>
<div class="videoduration"></div>
@ -13,7 +13,7 @@
<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"><h5>{{video_title}}</h5></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> -->

View File

@ -33,7 +33,7 @@
</div>
<div class="video_info">
<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"><h5>{{video_title}}</h5></div>
<div class="video_title"><h4>{{video_title}}</h4></div>
<div class="video_desc">{{video_desc}}</div>
</div>
</a>

View File

@ -33,7 +33,7 @@
</div>
<div class="video_info">
<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"><h5>{{video_title}}</h5></div>
<div class="video_title"><h4>{{video_title}}</h4></div>
<div class="video_desc">{{video_desc}}</div>
</div>
</a>

View File

@ -25,7 +25,7 @@
</div>
<div class="video_info">
<div class="video_time"><span date-format="%Y/%m/%d">{{video_postdate}}</span></div>
<div class="video_title"><h5>{{video_title}}</h5></div>
<div class="video_title"><h4>{{video_title}}</h4></div>
<div class="video_desc">{{video_desc}}</div>
</div>
</a>

View File

@ -13,7 +13,7 @@
<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"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h5>{{video_title}}</h5></a></div>
<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>
</a>

View File

@ -22,7 +22,7 @@
<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"><h5>{{video_title}}</h5></div>
<div class="video_title"><h4>{{video_title}}</h4></div>
<div class="video_desc">{{video_desc}}</div>
<div class="view_info">
<span>x {{view_count}}</span>