'refresh'

assets/javascripts/app.js

@@ -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_detail .video_yt_box").insertBefore(".video_detail .video_group_time");
-    $(".video_yt_box").insertBefore(".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(); // 取得原始內容
+        var originalText = $this.text().trim();
-        // 正則表達式匹配 YYYY-MM-DD 格式的日期
+        // 把 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); // 更新內容
+        // 找到對應的 <q>，並複製
-      });
+        var $q = $this.closest(".video_data").find(".video_desc q").clone();
-    
+        // 更新內容並加上 <q>
-    $(".video_group_time").each(function () {
+        $this.html(formattedText).append($q);
-      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
-      }
     });
     //常用到的js
     // $('.').after($('.'));

assets/stylesheets/template/base/_global.scss

@@ -33,8 +33,11 @@ a:focus {
 }
 
 img {
-  max-width: 100%;
+/*  max-width: 100%;
-  height: auto;
+  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;
+}

assets/stylesheets/template/layout/header.scss

@@ -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;
         }

assets/stylesheets/template/modules/announcement.scss

@@ -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;
+          -moz-transition: .3s ease-out;
-                  -ms-transition: .3s ease-out;
+          -ms-transition: .3s ease-out;
-                  -o-transition: .3s ease-out;
+          -o-transition: .3s ease-out;
-                  transition: .3s ease-out;
+          transition: .3s ease-out;
-                  filter: brightness(40%);
+          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){
+    @media(min-width: 1100px){
-       height: 20em;
+       height: 22em;
       .w-annc__img-wrap{
-          height: 20em;
+          height: 22em;
       }
     }
-    @media(min-width: 821px)and(max-width: 1599px){
+    @media(min-width: 821px)and(max-width: 1100px){
-       height: 20em;
+       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) {

assets/stylesheets/template/modules/event_news.scss

@@ -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;
   }

assets/stylesheets/template/modules/video.scss

@@ -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;
+      padding: 0 0.5em;
-      border: 1px solid;
+
-      border-radius: 2px;
-      background-color: #1515154d;
     }
   }
 }
@@ -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{
+      .video_tags2{
-        display: -webkit-box !important;
+        display: block!important;
-        text-overflow: ellipsis;
+       }
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
-        white-space: normal;
-        overflow: hidden;
-      }
       .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{
+  // .video_linkwrapper2{
-    height: 9.5em;
+  //   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;

modules/announcement/_annc_widget18.html.erb

@@ -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}}">

modules/member/member_index2.html.erb

@@ -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">

modules/member/member_index3.html.erb

@@ -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">

modules/member/member_index5.html.erb

@@ -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">

modules/member/member_index7.html.erb

@@ -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">

modules/video_pro/_video_pro_widget1.html.erb

@@ -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;

modules/video_pro/_video_pro_widget2.html.erb

@@ -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 () {
+# $(document).ready(function () {
-  $(".video_keyword").each(function () {
+#   $(".video_keyword").each(function () {
-    $(this).insertAfter($(this).siblings(".video_tag").find(".video_tags2"));
+#     $(this).insertAfter($(this).siblings(".video_tag").find(".video_tags2"));
-  });
+#   });
-});
+# });
 
 
 

modules/video_pro/_video_pro_widget3.html.erb

@@ -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"

modules/video_pro/_video_pro_widget4.html.erb

@@ -1,135 +1,47 @@
-<div class="w-video_data video_data-widget-4">
+<div class="w-video_data video_data-widget-4" style="    background: #f0f0f0;">
-<div class="btnwrapper" style="position: absolute;
+<h3 class="widget-title"><span>{{widget-title}}</span></h3>
-    top: 19%;
+  <ul class="video_data_wrap row container" data-list="videos" data-level="0">
-    width: 97%;
+    <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}}">
-    z-index: 101;
+      <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
-    margin-left: -0.5em;">
+      <div class="video_linkwrapper10">
-<div style="">
+        <div class="videohover">
-  <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%;
+          <div class="view_info">
-    color: #909090;
+            <span>{{view_count}}</span>
-    background: #fff;
+          </div>
-    border-radius: 50%;
+          <div class="Video__Player"><button class="Video__PlayerButton"></button></div>
-    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>
+          <div class="videoduration"></div>
-  <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>
-        <div class="Video__Player"><button class="Video__PlayerButton"></button></div>
+        <img class="video_snapshot" src="{{snapshot_url}}"/>
-        <div class="videoduration"></div>
       </div>
-      <img class="video_snapshot" src="{{snapshot_url}}"/>
+        <div class="video_info">
-    </div>
+          <div class="video_length">{{video_duration}}</div>
-    </a>
+          <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_info">
+          <div class="video_group_time">{{video_postdate}}</div>
-      <div class="video_length">{{video_duration}}</div>
+          <div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h5>{{video_title}}</h5></a></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 class="video_keyword">{{video_keyword}}</div>
+        </div>
-      <div class="video_group_time">{{video_postdate}}</div>
+      </a>
-      <div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h5>{{video_title}}</h5></a></div>
+    </li>
-    </div>
-</li>
   </ul>
   <div class="clearfix"></div>
-<style>
+  <style>
-
+    .video_title h5{
-  .video_title h5{
+      @extend .i-title;
-    @extend .i-title;
+      display: -webkit-box;
-    display: -webkit-box;
+      -webkit-line-clamp: 2;
-    -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
-    -webkit-box-orient: vertical;
+      overflow: hidden;
-    overflow: hidden;
+      text-overflow: ellipsis;
-    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;
     }
-    &:before{
+    .view_info{
-      content: "";
+      float: right;
-      display: inline-block;
+    }
+    .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>

modules/video_pro/_video_pro_widget5.html.erb

@@ -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")
+      var videoDataItems = $container.find(".video_data").not(".cycle-sentinel"); // 過濾 Cycle2 產生的複製元素
-        .not(".cycle-sentinel") // 過濾掉 Cycle2 產生的複製元素
+
-        .map(function () {
+      var videoData = videoDataItems.map(function () {
-          return $(this).attr("data-title");
+        return {
-        })
+          title: $(this).attr("data-title"),
-        .get();
+          date: $(this).find(".video_group_time").text().trim() // 取得日期
+        };
+      }).get();
 
       // 只影響「當前」輪播的 Pager Items
-      $container.find(".cycle-pager .pager-item").slice(0, videoTitles.length).each(function (index) {
+      $container.find(".cycle-pager .pager-item").slice(0, videoData.length).each(function (index) {
-        var title = videoTitles[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 的標題
+      // 取得所有 video_data 的標題與日期
-      var videoTitles = $items.map(function () {
+      var videoData = $items.map(function () {
-        return $(this).attr("data-title");
+        return {
+          title: $(this).attr("data-title"),
+          date: $(this).find(".video_group_time").text().trim()
+        };
       }).get();
 
       // 生成對應的 .pager-item
       var pagerHTML = "";
-      videoTitles.forEach(function (title, index) {
+      videoData.forEach(function ({ title, date }, index) {
-        pagerHTML += `<a href="#" class="pager-item" data-slide-num="${index}"><h5>${title}</h5></a>`;
+        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>

modules/video_pro/info.json

@@ -28,14 +28,14 @@
             "thumbnail" : "thumb.png"
         },
         {
-            "filename" : "video_pro_widget4",
+                "filename" : "video_pro_widget4",
-            "force_cover": "true",
+                "force_cover": "true",
-            "name" : {
+                "name" : {
-                "zh_tw" : "4. 影片列表倫波 ( 縮圖, 頁面連結)",
+                    "zh_tw" : "4. 四欄影片列表 ( 縮圖, 影片資訊, 頁面連結)",
-                "en" : "4.carousel-Video List  ( snapshot, page link)"
+                    "en" : "4. 4col-Video List 1 ( snapshot, video info, page link)"
-                },
+                    },
-            "thumbnail" : "thumb.png"
+                "thumbnail" : "thumb.png"
-        },
+         },
         {
             "filename" : "video_pro_widget5",
             "force_cover": "true",

modules/video_pro/video_pro_index1.html.erb

@@ -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}}

modules/video_pro/video_pro_index4.html.erb

@@ -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">