up

2026-09-24 15:30:13 +08:00 · 2026-09-24 15:30:13 +08:00 · f35df832a0
parent d11c017342
commit f35df832a0
13 changed files with 193 additions and 54 deletions
--- a/assets/stylesheets/template/base/_global.scss
+++ b/assets/stylesheets/template/base/_global.scss
@ -290,9 +290,9 @@ blockquote ol:last-child, blockquote p:last-child, blockquote ul:last-child {
 }
 iframe{
  @media(max-width:1024px){
-    width: 100%!important;
-    aspect-ratio: 16 / 9;
-    height: auto !important;
+    width: 100%;
+    // aspect-ratio: 16 / 9;
+    // height: auto !important;
  }
 }

--- a/assets/stylesheets/template/layout/content.scss
+++ b/assets/stylesheets/template/layout/content.scss
@ -86,8 +86,8 @@
  overflow: hidden;
  position: relative;
  width: 100%;
-  padding-bottom: 3em;
-  padding-top: 2em;
+  padding-bottom: 1em;
+  padding-top: 1em;
  //  p{
  //  padding-bottom: 1em;
  // }
--- a/assets/stylesheets/template/layout/header.scss
+++ b/assets/stylesheets/template/layout/header.scss
@ -118,6 +118,9 @@ sup {
    }
  }
 .navbar-header h1.default_site_h1, .navbar-header h2.default_site_h1{
+  @media(max-width:768px){
+    font-size: 0.8em;
+  }
    display: flex;
    align-items: center;
 }
@ -161,6 +164,11 @@ sup {
  .navbar-header {
    z-index: 10;
    position: relative;
+    @media(max-width:768px){
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
    padding: 0;
    padding-top: 0.5em!important;
    margin: 0;
@ -222,7 +230,7 @@ sup {
        float: left;
        height: 50px;
        padding-right: 0.5em;
-        width: auto!important;
+        width: auto;
        @media(min-width: 1024px){
          height: 50px;
        }
--- a/assets/stylesheets/template/modules/ad_banner.scss
+++ b/assets/stylesheets/template/modules/ad_banner.scss
@ -474,25 +474,22 @@ ul.button-mid{

 // Widget 3
 .ba-banner-widget-3 {
-.banner-pager .active-slide a {
-    background: $theme-color-second !important;
-}
-
-  .w-ba-banner__wrap {
+  overflow: hidden;
+  border-radius: 2em;
+  .w-ba-banner__image {
    width: 100%;
+    height: auto;
  }

-  .w-ba-banner__slide {
+  .youtube, .cycle-youtube {
    width: 100%;
-    position: relative;
+    height: 100%;
  }

-  .banner-pager {
-    right: 0;
-    bottom: 2em;
-   li { height: unset; width: unset; }
+  object, embed {
+    width: 100%;
+    height: 100%;
  }
-  ul.button-mid { display: none; }
 }

 //Widget 4
--- a/assets/stylesheets/template/modules/announcement.scss
+++ b/assets/stylesheets/template/modules/announcement.scss
@ -2306,6 +2306,10 @@ img.w-annc__img {
 }
 //widget 15
 .widget-announcement-15 {
+  .w-annc__item_inner{
+    -webkit-box-shadow: 0 1px 2px 0 #0000002e;
+    box-shadow: 0 1px 2px 0 #0000002e;
+  }
  .cycle-carousel-wrap {
    align-items: stretch;
  }
@ -2354,10 +2358,9 @@ img.w-annc__img {
 //  }

 .w-annc__img-wrap {
-
   margin: 0;
   overflow: hidden;
-   border: 2px solid #333;
+   aspect-ratio: 16 / 9;
   aspect-ratio: 16 / 9;
  //  @media(min-width:480px)and(max-width:820px){
  //   height: 9.5em;
--- a/assets/stylesheets/template/modules/menu.scss
+++ b/assets/stylesheets/template/modules/menu.scss
@ -78,6 +78,39 @@

 //固定選單
 .navFixed {
+    @media (max-width: 768px) {
+      .site-logo {
+        display: block!important;
+        -webkit-transition: all .3s ease;
+        -moz-transition: all .3s ease;
+        -ms-transition: all .3s ease;
+        -o-transition: all .3s ease;
+        transition: all .3s ease;
+        height: 40px !important;
+        width: auto !important;
+      }
+      .default_site_h1{
+        padding: 0.5em !important;
+      }
+      .navbar-header .default_site_h1>*{
+        display: none;
+        -webkit-transition: all .3s ease;
+        -moz-transition: all .3s ease;
+        -ms-transition: all .3s ease;
+        -o-transition: all .3s ease;
+        transition: all .3s ease;
+      }
+    }
+    @media (max-width: 768px) {
+      .site-logo {
+        display: none;
+        -webkit-transition: all .3s ease;
+        -moz-transition: all .3s ease;
+        -ms-transition: all .3s ease;
+        -o-transition: all .3s ease;
+        transition: all .3s ease;
+      }
+    }
  .dropdowns{
    background-image: none!important;
  }
--- a/assets/stylesheets/template/modules/universal-table.scss
+++ b/assets/stylesheets/template/modules/universal-table.scss
@ -4,6 +4,10 @@
 .universal-th-text{
  white-space: pre;
 }
+.btn-info {
+    background-color: #157d9d;
+    border-color: #157d9d;
+}
 .universal-table-index h3 {
    padding: 0;
 }
--- a/assets/stylesheets/template/modules/video.scss
+++ b/assets/stylesheets/template/modules/video.scss
@ -453,7 +453,7 @@
    font-family: "Noto Sans TC", PingFangTC, 微軟正黑體, "Microsoft JhengHei", sans-serif;
    font-weight: normal;
    letter-spacing: 0.3px;
-    color: #8f8f8f;
+    color: #707070;
    line-height: 1.6;
    cursor: pointer;
 }
@ -707,7 +707,7 @@
 .movie_desc{
  clear: both;
  letter-spacing: 0.3px;
-  color: #8f8f8f;
+  color: #707070;
  line-height: 1.8;
 }
 .video_title {
@ -727,7 +727,7 @@
  clear: both;
 }
 .video_group_time{
-  color: #8f8f8f!important;
+  color: #707070!important;
 }
 .movietitle{
  margin-bottom: 15px;
@ -905,7 +905,7 @@
  }
    .video_desc{
      letter-spacing: 0.3px;
-      color: #8f8f8f;
+      color: #707070;
      line-height: 1.6;
      max-height: 5em;
    }
--- a/assets/stylesheets/template/modules/web_resource.scss
+++ b/assets/stylesheets/template/modules/web_resource.scss
@ -72,7 +72,11 @@
    vertical-align: top;
 }
 .widget-link {
-    margin-bottom: 1em;
+  margin-bottom: 1em;
+  margin-top: 1em;
+  .widget-link__more{
+    display: none;
+  }
 }
 .morebken{
  font-size: 1.2em;
--- a/home/header.html.erb
+++ b/home/header.html.erb
@ -38,7 +38,7 @@
      </button>
    </div>
   </div>
-    <div class="no-print single-child-datapp homebanner " data-pp="301" ></div>
+    <div class="no-print single-child-datapp homebanner " data-pp="999"></div>
    <div class="collapse navbar-collapse modules-menu" id="layout-navigation">
      <div class="container">
        <a id="accesskey_menu" title="accesskey menu" accesskey="M" href="#" title="Main menu">:::</a>
--- a/home/index.html.erb
+++ b/home/index.html.erb
@ -7,7 +7,6 @@
  <%= render_orbit_bar %>
  <div class="background" data-pp="100"></div>
  <%= render_header %>
-
  <div class="no-print single-child-datapp homebanner " data-pp="999"></div>
  <div class="layout-slide no-print single-child-datapp homebanner" data-pp="300"></div>
  <div class="layout-content2 topcontent">
@ -17,10 +16,15 @@
  <div class="verticalhome">
    <div class="layout-content topcontent">
      <a id="accesskey_content" accesskey="C" href="/<%= "#{locale.to_s}" %>/accesskey" title="Content">:::</a>
-
      <div class="contentwrap">
        <div class="container">
-          <section class="body-banner" data-pp="0"></section>
+          <div class="video-banner" data-pp="301" ></div>
+        </div>
+      </div>
+      <div class="layout-slide big-banner extra-box" data-pp="302" ></div>
+      <div class="contentwrap1">
+        <div class="layout-content-inner container">
+          <div class="body-banner" data-pp="0"></div>
          <div class="row ">
            <section class="layout-content-box col-sm-4" data-pp="1"></section>
            <section class="layout-content-box col-sm-4" data-pp="2"></section>
@ -36,13 +40,6 @@
            <section class="layout-content-box col-sm-3" data-pp="6"></section>
            <section class="layout-content-box col-sm-3" data-pp="7"></section>
          </div>
-        </div>
-      </div>
-
-      <div class="layout-slide big-banner extra-box" data-pp="302" ></div>
-
-      <div class="contentwrap1">
-        <div class="layout-content-inner container">
          <div class="column row">
            <div class="two-column col-sm-6 ken" data-pp="11"></div>
            <div class="two-column col-sm-6 ken" data-pp="12"></div>
@ -53,12 +50,9 @@
          <div class="column row">
            <section class="two-column col-sm-3" data-pp="16"></section>
            <section class="two-column col-sm-9" data-pp="17"></section>
+          </div>
        </div>
-        </div>
-      </div>
-
-      <div class="contentwrap">
-          <div class="container">
+        <div class="container">
            <section class="body-banner" data-pp="68"></section>
            <div class="row">
              <section class="layout-content-box col-sm-3" data-pp="64"></section>
@ -78,15 +72,7 @@
            </div>
          </div>
      </div>
-
      <div class="contentwrap2">
-<!--        <div class="marqueeken">
-                    <div class="scroll">
-                        <div class="text1">
-                            ORBIT
-                        </div>
-                    </div>
-       </div> -->
          <div class="layout-content-inner container">
            <div class="column row">
              <section class="two-column col-sm-9" data-pp="39"></section>
@ -103,15 +89,12 @@
            <div class="column row">
              <section class="extra-box col-sm-12 swiper-banner" data-pp="201"></section>
            </div>
-          </div>
-      </div>
-
-      <div class="contentwrap">
-            <div class="container row">
+            <div class="row">
              <section class="layout-content-box col-sm-8" data-pp="35"></section>
              <section class="layout-content-box col-sm-4" data-pp="34"></section>
              <section class="layout-content-box col-sm-12" data-pp="233"></section>
            </div>
+          </div>
      </div>
      <div class="container ">
        <div class="move-box-wrapper row">
--- a/modules/ad_banner/_ad_banner_widget3.html.erb
+++ b/modules/ad_banner/_ad_banner_widget3.html.erb
@ -0,0 +1,99 @@
+<div class="w-ba-banner ba-banner-widget-3">
+  <div class="w-ba-banner__wrap  cycle-slideshow"
+      data-list="images"
+      data-level="0"
+      data-cycle-slides=".w-ba-banner__slide"
+      data-cycle-log="false"
+      data-cycle-auto-height="{{base_image}}"
+      data-cycle-speed="{{speed}}"
+      data-cycle-timeout="{{timeout}}"
+      data-cycle-fx="{{ad_fx}}"
+      data-cycle-pager=".banner_caption_{{subpart-id}}"
+      data-pager-template="<li><button></button></li>"
+      data-pager-active-class="active-slide"
+      data-cycle-youtube=true
+      data-cycle-youtube-autostart=false
+      data-cycle-swipe=true
+      data-cycle-swipe-fx="scrollHorz"
+    >
+     <div class="w-ba-banner__slide {{class}}"
+        data-link="{{link}}"
+        data-cycle-title="{{title}}"
+        data-cycle-desc="{{context}}"
+        data-overlay-template="<h3>{{title}}</h3>{{desc}}"
+        data-bs-target="{{target}}"
+      >
+       <a href="{{link}}" target="{{target}}" title="{{alt_title}}">
+           <img class="w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
+       </a>
+
+    </div>
+  </div>
+  <ul class="w-ad-banner__pager-2 banner-pager banner_caption_{{subpart-id}}"></ul>
+  <ul class="controlplay" role="radiogroup" aria-label="播放控制選項">
+    <a role="radio" aria-checked="true" href="javascript:;" class="resume-slide active" title="繼續播放" aria-label="繼續播放" aria-live="assertive">
+      <i aria-hidden="true"></i>
+      <p style="display: none;"><%= I18n.t("ad_banner.resume") %></p>
+    </a>
+
+    <a role="radio" aria-checked="false" href="javascript:;" class="pause-slide" title="暫停播放" aria-label="暫停播放" aria-live="assertive">
+      <i aria-hidden="true"></i>
+      <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-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>
+  $('[data-subpart-id="{{subpart-id}}"] .pause-slide').click(function(){
+    $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
+    $(this).addClass('active')
+    $(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active')
+  });
+  $('[data-subpart-id="{{subpart-id}}"] .resume-slide').click(function(){
+    $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
+    $(this).addClass('active')
+    $(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active')
+  });
+  $('[data-subpart-id="{{subpart-id}}"] .next-button').click(function(){
+    $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
+
+  })
+  $('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
+    $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
+  });
+    /* 修正點：處理 Pager 無障礙朗讀文字 */
+  $('.cycle-slideshow').on('cycle-post-initialize', function(event, optionHash) {
+    var $container = $(this).closest('.w-ba-banner');
+    var $slides = $(this).find('.w-ba-banner__slide');
+    var $pagerButtons = $container.find(".banner-pager button");
+
+    $pagerButtons.each(function(index) {
+      var slideTitle = $slides.eq(index).data('cycle-title') || "";
+      var ariaLabel = "第 " + (index + 1) + " 張投影片 " + slideTitle;
+      $(this).attr({
+        "aria-label": ariaLabel,
+        "title": ariaLabel
+      });
+    });
+  });
+</script>
+<style type="text/css">
+  .w-ba-banner .controlplay .pause-slide.active i{
+    color: #ff4500;
+  }
+  .w-ba-banner .controlplay{
+    width: auto;
+  }
+  .w-ba-banner .button-mid{
+    position: absolute;
+    width: 100%;
+    height: 0;
+    top: 50%;
+  }
+  .next-button,.prev-button{
+    cursor: pointer;
+  }
+</style>
--- a/modules/ad_banner/info.json
+++ b/modules/ad_banner/info.json
@ -40,6 +40,14 @@
            },
            "thumbnail": "ad_banner2_thumb.png"
        },
+        {
+            "filename": "ad_banner_widget3",
+            "name": {
+                "zh_tw": "P1-1. 純圖片導圓角輪播-標準 ( 圖片, 導航圖示 )",
+                "en": "P1-1. Pure Image Carousel - Rounded - Standard ( image, navigation )"
+            },
+            "thumbnail": "ad_banner2_thumb.png"
+        },
        {
            "filename": "ad_banner_widget0",
            "name": {