update
This commit is contained in:
parent
93f6d0e7fc
commit
20ae68e7e8
|
|
@ -964,7 +964,7 @@
|
|||
$(this).append('<span class="sr-only">網路資源標題</span>');
|
||||
}
|
||||
});
|
||||
$('input').each(function() {
|
||||
$('input.input-search, .search-container input, .search-box input, #search input').each(function() {
|
||||
var $this = $(this);
|
||||
if (!$this.attr('title') || $this.attr('title').trim() === '') {
|
||||
$this.attr('title', '網內搜尋');
|
||||
|
|
@ -2183,6 +2183,28 @@ $(function() {
|
|||
// 預設 aria-expanded 為 false
|
||||
$(".searchbtn2").attr("aria-expanded", "false");
|
||||
});
|
||||
// ✅ searchbtn2 Tab 鍵聚焦時自動展開 .searchbox
|
||||
$(document).ready(function() {
|
||||
function fixSearchbtn2FocusA11y() {
|
||||
setTimeout(function() {
|
||||
$('.searchbtn2').on('focus', function() {
|
||||
var $searchbox = $('.searchbox');
|
||||
|
||||
// ✅ 只在收合狀態時才展開，不影響已展開的狀態
|
||||
if (!$searchbox.is(':visible')) {
|
||||
$searchbox.slideDown(300, function() {
|
||||
// ✅ 同步更新 aria-expanded（與原本 click 邏輯一致）
|
||||
$('.searchbtn2').attr('aria-expanded', 'true');
|
||||
// ✅ 同步加上 ken-click2（與原本 click 邏輯一致）
|
||||
$('.searchbtn2').closest('.ken-click').addClass('ken-click2');
|
||||
});
|
||||
}
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
|
||||
fixSearchbtn2FocusA11y();
|
||||
});
|
||||
// 強制保持全站search展開
|
||||
$(document).ready(function () {
|
||||
|
||||
|
|
@ -3075,11 +3097,6 @@ $(document).ready(function() {
|
|||
// 執行修復功能
|
||||
fixVideoPosterAlt();
|
||||
});
|
||||
//網站導覽換icon
|
||||
// $(document).ready(function() {
|
||||
// $('a[href="/zh_tw/sitemap"]').html('<i class="fa-solid fa-sitemap"></i>');
|
||||
// $('a[href="/en/sitemap"]').html('<i class="fa-solid fa-sitemap"></i>')
|
||||
// });
|
||||
//#tdstylesp表格樣式
|
||||
$(function () {
|
||||
$('#tdstylesp').each(function () {
|
||||
|
|
@ -3114,11 +3131,6 @@ function fixCarouselBtnA11y() {
|
|||
$('.carousel_images .w-ba-banner ~ div .button-mid').remove();
|
||||
}, 500);
|
||||
}
|
||||
$(document).ready(function () {
|
||||
setTimeout(function () {
|
||||
$('.dtr-control').removeAttr('tabindex');
|
||||
}, 500);
|
||||
});
|
||||
//cycle2無障礙
|
||||
$(document).ready(function() {
|
||||
// 取得頁面上所有的 Cycle2 輪播圖
|
||||
|
|
@ -3357,6 +3369,7 @@ $(function() {
|
|||
attributeFilter: ['style']
|
||||
});
|
||||
});
|
||||
//fake_link問題
|
||||
$(document).ready(function() {
|
||||
|
||||
function removeFakeLinks() {
|
||||
|
|
@ -3435,7 +3448,7 @@ function fixSortLinkA11y() {
|
|||
});
|
||||
}
|
||||
function fixSearchInputA11y() {
|
||||
$('input[type="search"], input[type="text"]').each(function () {
|
||||
$('input[type="search"], input.input-search, .search-container input, .search-box input').each(function () {
|
||||
var $input = $(this);
|
||||
|
||||
// 已有對應 label 就跳過
|
||||
|
|
@ -3675,7 +3688,6 @@ function fixGalleryViewLinkA11y() {
|
|||
$a.find('i, svg').attr('aria-hidden', 'true');
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
// 比 fixAccessibilityAll 的 800ms 晚，確保最後執行
|
||||
setTimeout(fixGalleryViewLinkA11y, 2000);
|
||||
|
|
|
|||
|
|
@ -29,7 +29,8 @@ body[data-module="page_content"] {
|
|||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
// border-collapse: collapse;
|
||||
border-collapse: unset;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -241,4 +241,5 @@ iframe{
|
|||
aspect-ratio: 16 / 9;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -124,8 +124,12 @@ ol, ul{
|
|||
padding-left: 1.6em;
|
||||
text-align: left;
|
||||
}
|
||||
ul{
|
||||
li {
|
||||
list-style: disc;
|
||||
}
|
||||
}
|
||||
ol{
|
||||
padding-left: 1.6em;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,6 @@ $sub-font: "Noto Sans TC", sans-serif;
|
|||
// $main-font: "arial", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif;
|
||||
// $sub-font: "arial", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif;
|
||||
|
||||
@font-face {font-family: "IndustryW00-Medium"; src: url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.eot"); src: url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.woff") format("woff"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.svg#IndustryW00-Medium") format("svg"); }
|
||||
|
||||
// Font sizes
|
||||
$font-15: 0.9375rem;
|
||||
|
|
|
|||
|
|
@ -308,7 +308,6 @@ a {
|
|||
}
|
||||
.i-annc__content-wrap{
|
||||
padding: 0.5em;
|
||||
height: 100%;
|
||||
}
|
||||
.index-announcement-7{
|
||||
.i-annc__item{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,111 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../initial";
|
||||
.pagestyle2 {
|
||||
.pbanner {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.pbanner-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pbanner-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.pbanner-content {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
min-height: 25em;
|
||||
padding-top: 4em;
|
||||
padding-bottom: 4em;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.rwdtext {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.rwdimg {
|
||||
height: 67vh;
|
||||
width: auto !important;
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagestyle3 {
|
||||
.gridwrapper {
|
||||
heigh: 50em;
|
||||
}
|
||||
|
||||
.txtgrid {
|
||||
--heightA: 50em;
|
||||
height: calc(var(--heightA) * 0.35 - 1rem);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.imggrid {
|
||||
--heightA: 50em;
|
||||
height: calc(var(--heightA) * 0.65 - 1rem);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pbanner {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.pbanner-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pbanner-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(0deg, rgba(200, 200, 200, 0.8), rgba(200, 200, 200, 0.8));
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.pbanner-content {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.imggrid img {
|
||||
width: 100% !important;
|
||||
max-width: 100%;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.col-sm-4,
|
||||
.col-sm-6,
|
||||
.col-sm-8 {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -37,7 +37,7 @@ ul.button-mid{
|
|||
.banner-pager .active-slide button{
|
||||
background: $theme-color-second!important;
|
||||
}
|
||||
.w-ba-banner .button-mid {
|
||||
.button-mid {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
|
|
@ -410,6 +410,9 @@ ul.button-mid{
|
|||
//Widget 5
|
||||
.ba-banner-widget-5 {
|
||||
margin: 1em 0;
|
||||
.w-ba-banner__wrap{
|
||||
display: flex;
|
||||
}
|
||||
.slide-img {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -235,6 +235,10 @@
|
|||
|
||||
// Widget-2
|
||||
.widget-announcement-2 {
|
||||
.widget-title-a-inner{
|
||||
display: block;
|
||||
padding-top: 0.2em;
|
||||
}
|
||||
// @media(min-width: 768px){
|
||||
// .col-sm-4{
|
||||
// width: 33.33333333%;
|
||||
|
|
@ -247,9 +251,8 @@
|
|||
// }
|
||||
.w-annc__item{
|
||||
margin-bottom: 1em;
|
||||
padding: 0;
|
||||
padding: 0.2em;
|
||||
overflow: hidden;
|
||||
padding-bottom: 0;
|
||||
&:hover{
|
||||
transition: all .3s;
|
||||
transform: translate(-5px, -10px);
|
||||
|
|
@ -259,7 +262,6 @@
|
|||
}
|
||||
.w-annc__img-wrap {
|
||||
padding: 0;
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
.w-annc__content-wrap {
|
||||
@media(max-width: $screen-xs){
|
||||
|
|
@ -269,6 +271,8 @@
|
|||
}
|
||||
.w-annc__img-wrap {
|
||||
margin:0;
|
||||
border-radius: 0.5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.w-annc__title {
|
||||
|
|
@ -1250,298 +1254,6 @@
|
|||
transition: height .6s;
|
||||
}
|
||||
}
|
||||
//widget-25
|
||||
.widget-announcement-25 {
|
||||
.w-annc__widget-title{
|
||||
span{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.w-annc__more-wrap{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.btn-right,.btn-left{
|
||||
&:hover{
|
||||
background: #e5e5e5!important;
|
||||
}
|
||||
}
|
||||
@media(min-width:1024px){
|
||||
.prevnext{
|
||||
width: 8% !important;
|
||||
left: 10%;
|
||||
}
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.w-annc__more-wrap{
|
||||
width:29%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.w-annc__list{
|
||||
width:71%;
|
||||
}
|
||||
}
|
||||
.w-annc__item{
|
||||
padding: 0;
|
||||
margin-right: 1em;
|
||||
overflow: hidden;
|
||||
position: relative !important;
|
||||
@media(min-width: 1600px){
|
||||
height: 28em;
|
||||
.w-annc__img-wrap{
|
||||
height: 28em;
|
||||
}
|
||||
}
|
||||
@media(min-width: $screen-xs)and(max-width: 1599px){
|
||||
height: 20em;
|
||||
.w-annc__img-wrap{
|
||||
height: 20em;
|
||||
}
|
||||
}
|
||||
@media(max-width: $screen-xs){
|
||||
height: 20em;
|
||||
.w-annc__img-wrap{
|
||||
height: 20em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.w-annc__item{
|
||||
box-shadow:none!important;
|
||||
-webkit-box-shadow:none!important;
|
||||
}
|
||||
.w-annc__entry-title{
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.w-annc__meta i{
|
||||
color: #fff!important;
|
||||
}
|
||||
.w-annc__list{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.w-annc__postdate-wrap{
|
||||
color: #fff!important;
|
||||
}
|
||||
.w-annc__status-wrap{
|
||||
color: #fff!important;
|
||||
}
|
||||
.w-annc__category-wrap{
|
||||
color: #fff!important;
|
||||
}
|
||||
|
||||
.w-annc__title{
|
||||
color: #fff;
|
||||
}
|
||||
.w-annc__title {
|
||||
font-family: $main-font;
|
||||
white-space: normal;
|
||||
}
|
||||
.w-annc__widget-title { text-align: center; }
|
||||
.w-annc__more { margin-top: 1.5em; }
|
||||
.w-annc__list > .w-annc__item:nth-child(3n+1) {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.w-annc__img-wrap {
|
||||
margin:0;
|
||||
height: auto;
|
||||
}
|
||||
.w-annc__content-wrap{
|
||||
padding: 1.5em;
|
||||
div{
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-decoration-break: clone;
|
||||
box-decoration-break: clone;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
.clearfix{
|
||||
// text-align: center;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
}
|
||||
.w-annc__subtitle {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.w-annc__content-wrap {
|
||||
display: inline-block;
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
height: 4px;
|
||||
width: 0;
|
||||
background: transparent;
|
||||
transition: width .5s ease, background-color .5s ease;
|
||||
}
|
||||
}
|
||||
.w-annc__item{
|
||||
padding: 0.5em;
|
||||
margin: 0!important;
|
||||
}
|
||||
.w-annc__item_inner{
|
||||
background: #fff;
|
||||
-webkit-transition: .3s all ease;
|
||||
-o-transition: .3s all ease;
|
||||
transition: .3s all ease;
|
||||
-webkit-box-shadow:none!important;
|
||||
box-shadow:none!important;
|
||||
margin: 0;
|
||||
margin-bottom: 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.w-annc__item_inner{
|
||||
&:hover{
|
||||
-webkit-transform: translateY(-6px);
|
||||
-ms-transform: translateY(-6px);
|
||||
transform: translateY(-6px);
|
||||
img{
|
||||
// transform: scale(1.2)!important;
|
||||
// -webkit-transition: .3s ease-out;
|
||||
// -moz-transition: .3s ease-out;
|
||||
// -ms-transition: .3s ease-out;
|
||||
// -o-transition: .3s ease-out;
|
||||
// transition: .3s ease-out;
|
||||
}
|
||||
.transitionfade{
|
||||
height: inherit;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0,0,0,.4);
|
||||
-webkit-transition: .3s ease-out;
|
||||
-moz-transition: .3s ease-out;
|
||||
-ms-transition: .3s ease-out;
|
||||
-o-transition: .3s ease-out;
|
||||
transition: .3s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
.w-annc__item{
|
||||
&:hover{
|
||||
-webkit-transform: translateY(-6px);
|
||||
-ms-transform: translateY(-6px);
|
||||
transform: translateY(-6px);
|
||||
.card{
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
img{
|
||||
transform: scale(1.2)!important;
|
||||
-webkit-transition: .3s ease-out;
|
||||
-moz-transition: .3s ease-out;
|
||||
-ms-transition: .3s ease-out;
|
||||
-o-transition: .3s ease-out;
|
||||
transition: .3s ease-out;
|
||||
}
|
||||
.transitionfade{
|
||||
height: inherit;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0,0,0,.4);
|
||||
-webkit-transition: .3s ease-out;
|
||||
-moz-transition: .3s ease-out;
|
||||
-ms-transition: .3s ease-out;
|
||||
-o-transition: .3s ease-out;
|
||||
transition: .3s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
.w-annc__subtitle{
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-decoration-break: clone;
|
||||
box-decoration-break: clone;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
-webkit-transition: max-height .6s,opacity .6s;
|
||||
transition: max-height .6s,opacity .6s;
|
||||
@media(min-width:1920px){
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
.w-annc__item{
|
||||
margin-right: 1em;
|
||||
overflow: hidden;
|
||||
position: relative !important;
|
||||
@media(min-width: 1600px){
|
||||
height: 28em;
|
||||
.w-annc__img-wrap{
|
||||
height: 28em;
|
||||
}
|
||||
}
|
||||
@media(min-width: $screen-xs)and(max-width: 1599px){
|
||||
height: 20em;
|
||||
.w-annc__img-wrap{
|
||||
height: 20em;
|
||||
}
|
||||
}
|
||||
@media(max-width: $screen-xs){
|
||||
height: 20em;
|
||||
.w-annc__img-wrap{
|
||||
height: 20em;
|
||||
}
|
||||
}
|
||||
}
|
||||
li{
|
||||
&:hover{
|
||||
.card:before{
|
||||
height:100%;
|
||||
}
|
||||
.w-annc__subtitle{
|
||||
max-height: 100px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
}
|
||||
.card{
|
||||
position: absolute;
|
||||
z-index:0;
|
||||
padding: 30px 25px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: transparent;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(32%, #ffffff00), color-stop(89%, #00000080));
|
||||
background-image: linear-gradient(
|
||||
180deg
|
||||
, #ffffff00 2%, #00000080 89%);
|
||||
width: 100%;
|
||||
}
|
||||
.card:before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background-color: #00356aab;
|
||||
z-index: -1;
|
||||
-webkit-transition: height .6s;
|
||||
transition: height .6s;
|
||||
}
|
||||
}
|
||||
// Widget-26
|
||||
.widget-announcement-26 {
|
||||
.w-annc__item{
|
||||
|
|
@ -1676,10 +1388,7 @@
|
|||
padding: 30px 25px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(32%, #ffffff00), color-stop(89%, #00000080));
|
||||
background-image: linear-gradient(
|
||||
180deg
|
||||
, #ffffff00 2%, #00000080 89%);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 2%, rgba(0, 0, 0, 0.501961) 89%);
|
||||
width: 100%;
|
||||
}
|
||||
.card:before{
|
||||
|
|
@ -3422,30 +3131,30 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
|
|||
transition-timing-function: ease;
|
||||
transition-duration: 1s;
|
||||
}
|
||||
//類別變色
|
||||
.全部{
|
||||
background-color: #cb804b;
|
||||
border: 3px solid #cb804b!important;
|
||||
}
|
||||
.公告{
|
||||
background-color: #ddc080;
|
||||
border: 3px solid #ddc080!important;
|
||||
// 類別變色（白色文字對比比 4.5:1，符合 WCAG AA）
|
||||
.全部 {
|
||||
background-color: #9e5a28 !important;
|
||||
border: 3px solid #9e5a28 !important;
|
||||
}
|
||||
.公告1{
|
||||
background-color: #94506e;
|
||||
border: 3px solid #94506e!important;
|
||||
.公告 {
|
||||
background-color: #8a6d1a !important;
|
||||
border: 3px solid #8a6d1a !important;
|
||||
}
|
||||
.公告2{
|
||||
background-color: #599cf6;
|
||||
border: 3px solid #599cf6!important;
|
||||
.公告1 {
|
||||
background-color: #7a2d52 !important;
|
||||
border: 3px solid #7a2d52 !important;
|
||||
}
|
||||
.公告3{
|
||||
background-color: #80b885;
|
||||
border: 3px solid #80b885!important;
|
||||
.公告2 {
|
||||
background-color: #1a5ec2 !important;
|
||||
border: 3px solid #1a5ec2 !important;
|
||||
}
|
||||
.公告4{
|
||||
background-color: #6e4626;
|
||||
border: 3px solid #4b2c12!important;
|
||||
.公告3 {
|
||||
background-color: #3a7a40 !important;
|
||||
border: 3px solid #3a7a40 !important;
|
||||
}
|
||||
.公告4 {
|
||||
background-color: #4b2c12 !important;
|
||||
border: 3px solid #4b2c12 !important;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -3460,6 +3169,8 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
|
|||
transition: all 0.3s;
|
||||
width: calc( 100%/5 - 1.5em);
|
||||
margin-bottom: 1em;
|
||||
background-color: $theme-color-second;
|
||||
border: 3px solid $theme-color-second;
|
||||
&:hover{
|
||||
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.5);
|
||||
transform: translateY(-5px);
|
||||
|
|
@ -3487,12 +3198,12 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
|
|||
padding: 0 0.5em;
|
||||
}
|
||||
.i-annc__item{
|
||||
padding: 0;
|
||||
padding: 0.5em;
|
||||
}
|
||||
.i-annc__img-wrap {
|
||||
overflow: hidden;
|
||||
// height: 14.5em;
|
||||
margin: 1em 0.5em;
|
||||
margin-bottom: 1em;
|
||||
@media (max-width:$screen-xs) {
|
||||
height: 7em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -152,18 +152,31 @@
|
|||
@extend .unity-title;
|
||||
}
|
||||
/* 2. 對應的檔案顏色 (轉為 iOS 半透明色調) */
|
||||
.link { background-color: rgba(18, 115, 235, 0.6) !important; } /* iOS Blue */
|
||||
.txt { background-color: rgba(109, 187, 115, 0.6) !important; } /* iOS Green */
|
||||
.xlsx { background-color: rgba(187, 109, 127, 0.6) !important; } /* iOS Pink/Red */
|
||||
.pdf { background-color: rgba(59, 131, 71, 0.7) !important; } /* 深一點的 Green */
|
||||
.docx { background-color: rgba(132, 109, 187, 0.6) !important; } /* iOS Purple */
|
||||
.doc { background-color: rgba(18, 115, 235, 0.6)!important; }
|
||||
.pptx { background-color: rgba(109, 119, 187, 0.6) !important; } /* iOS Indigo */
|
||||
.jpg { background-color: rgba(187, 109, 109, 0.6) !important; } /* iOS Red */
|
||||
.zip { background-color: rgba(220, 185, 87, 0.6) !important; } /* iOS Yellow/Orange */
|
||||
.rar { background-color: rgba(230, 149, 0, 0.6) !important; } /* iOS Orange (與 zip 區隔，更偏橘) */
|
||||
.xls { background-color: rgba(109, 187, 115, 0.6) !important; } /* 沿用 iOS Green (試算表系列) */
|
||||
.odt { background-color: rgba(100, 100, 100, 0.6) !important; } /* iOS Gray (通用文件/系統灰色) */
|
||||
// .link { background-color: rgba(18, 115, 235, 0.6) !important; } /* iOS Blue */
|
||||
// .txt { background-color: rgba(109, 187, 115, 0.6) !important; } /* iOS Green */
|
||||
// .xlsx { background-color: rgba(187, 109, 127, 0.6) !important; } /* iOS Pink/Red */
|
||||
// .pdf { background-color: rgba(59, 131, 71, 0.7) !important; } /* 深一點的 Green */
|
||||
// .docx { background-color: rgba(132, 109, 187, 0.6) !important; } /* iOS Purple */
|
||||
// .doc { background-color: rgba(18, 115, 235, 0.6)!important; }
|
||||
// .pptx { background-color: rgba(109, 119, 187, 0.6) !important; } /* iOS Indigo */
|
||||
// .jpg { background-color: rgba(187, 109, 109, 0.6) !important; } /* iOS Red */
|
||||
// .zip { background-color: rgba(220, 185, 87, 0.6) !important; } /* iOS Yellow/Orange */
|
||||
// .rar { background-color: rgba(230, 149, 0, 0.6) !important; } /* iOS Orange (與 zip 區隔，更偏橘) */
|
||||
// .xls { background-color: rgba(109, 187, 115, 0.6) !important; } /* 沿用 iOS Green (試算表系列) */
|
||||
// .odt { background-color: rgba(100, 100, 100, 0.6) !important; } /* iOS Gray (通用文件/系統灰色) */
|
||||
|
||||
.link { background-color: #1368d4 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.txt { background-color: #3a8a40 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.xlsx { background-color: #9e3050 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.pdf { background-color: #2a7d36 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.docx { background-color: #5e46a0 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.doc { background-color: #1368d4 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.pptx { background-color: #3d4aa0 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.jpg { background-color: #8f3333 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.zip { background-color: #8a6400 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.rar { background-color: #9e5000 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.xls { background-color: #3a8a40 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
|
||||
.odt { background-color: #767676 !important; margin-left: 0.5em; } /* 對比 4.6:1 */// Archive index 1
|
||||
// Archive index 1
|
||||
.index-archive-1 {
|
||||
font-family: $main-font;
|
||||
|
|
|
|||
|
|
@ -150,6 +150,7 @@
|
|||
}
|
||||
li{
|
||||
background-color: transparent;
|
||||
margin-bottom: 1em;
|
||||
@media(max-width: $screen-xs){
|
||||
width: 25%;
|
||||
}
|
||||
|
|
@ -356,7 +357,6 @@
|
|||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ input:hover {
|
|||
// }
|
||||
.internalfullwidth{
|
||||
@media(min-width: 1280px){
|
||||
transform: translateX(calc(-50vw + 625px));
|
||||
transform: translateX(calc(-50vw + 685px));
|
||||
width: 100vw;
|
||||
}
|
||||
@media(max-width:1279px)and(min-width:1025px){
|
||||
|
|
@ -313,7 +313,7 @@ ul.tab_nav {
|
|||
}
|
||||
}
|
||||
}
|
||||
//td有rwd跳色
|
||||
//td有rwd跳色，寬度占滿100%
|
||||
#tdstyle1{
|
||||
tr{
|
||||
&:nth-child(even){
|
||||
|
|
@ -339,6 +339,54 @@ ul.tab_nav {
|
|||
}
|
||||
}
|
||||
}
|
||||
//td無rwd，寬度不變
|
||||
#tdstyle2{
|
||||
table td{
|
||||
border: 1px solid #ddd!important;
|
||||
@media (max-width: 480px) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
td,th{
|
||||
@media(max-width: $screen-xs){
|
||||
width: auto ;
|
||||
}
|
||||
}
|
||||
tr{
|
||||
display: table-row;
|
||||
}
|
||||
}
|
||||
//td有rwd灰色底，寬度占滿100%
|
||||
#tdstyle3{
|
||||
tr{
|
||||
background: #efefef !important;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
td{
|
||||
border-bottom: #cacaca 1px solid !important;
|
||||
}
|
||||
}
|
||||
//td無rwd跳色，寬度不變
|
||||
#tdstyle4{
|
||||
table td{
|
||||
border: 1px solid #ddd!important;
|
||||
@media (max-width: 480px) {
|
||||
width: auto!important;
|
||||
}
|
||||
}
|
||||
td,th{
|
||||
@media(max-width: $screen-xs){
|
||||
width: auto!important;
|
||||
}
|
||||
}
|
||||
tr{
|
||||
display: table-row;
|
||||
&:nth-child(odd){
|
||||
background-color:#f2f2f2;
|
||||
}
|
||||
}
|
||||
}
|
||||
//td有rwd
|
||||
#tdstyle5{
|
||||
margin-top: 1.5em;
|
||||
|
|
@ -522,57 +570,7 @@ ul.tab_nav {
|
|||
}
|
||||
}
|
||||
}
|
||||
//td無rwd
|
||||
#tdstyle2{
|
||||
table td{
|
||||
border: 1px solid #ddd!important;
|
||||
@media (max-width: 480px) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
td,th{
|
||||
@media(max-width: $screen-xs){
|
||||
width: auto ;
|
||||
}
|
||||
}
|
||||
tr{
|
||||
display: table-row;
|
||||
}
|
||||
}
|
||||
//td有rwd灰底色
|
||||
#tdstyle3{
|
||||
tr{
|
||||
background: #efefef !important;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
td{
|
||||
border-bottom: #cacaca 1px solid !important;
|
||||
}
|
||||
}
|
||||
//td無rwd跳色
|
||||
#tdstyle4{
|
||||
table td{
|
||||
border: 1px solid #ddd!important;
|
||||
@media (max-width: 480px) {
|
||||
width: auto!important;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
td,th{
|
||||
@media(max-width: $screen-xs){
|
||||
width: auto!important;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
tr{
|
||||
&:nth-child(odd){
|
||||
background-color:#f2f2f2;
|
||||
}
|
||||
}
|
||||
}
|
||||
//rwd時標題在表格資料的左側
|
||||
#tdstylesp{
|
||||
@media (max-width: 480px) {
|
||||
thead,
|
||||
|
|
|
|||
|
|
@ -80,5 +80,9 @@
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
.ba-banner-widget-5{
|
||||
.banner-pager{
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,17 +7,17 @@
|
|||
</div>
|
||||
<ul class="w-annc__list row" data-level="0" data-list="announcements">
|
||||
<li class="w-annc__item col-sm-4">
|
||||
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}" class="widget-title-a">
|
||||
<div class="w-annc__img-wrap">
|
||||
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
</div>
|
||||
<div class="w-annc__content-wrap">
|
||||
<h4 class="w-annc__entry-title">
|
||||
<span class="w-annc__title">{{title}}</span>
|
||||
</h4>
|
||||
<div class="w-annc__subtitle">{{subtitle}}</div>
|
||||
<div class="w-annc_read_more btn">{{read_more_text}}</div>
|
||||
</div>
|
||||
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" class="widget-title-a">
|
||||
<div class="w-annc__img-wrap">
|
||||
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" >
|
||||
</div>
|
||||
<div class="w-annc__content-wrap">
|
||||
<h4 class="w-annc__entry-title">
|
||||
<span class="w-annc__title">{{title}}</span>
|
||||
</h4>
|
||||
<div class="w-annc__subtitle">{{subtitle}}</div>
|
||||
<div class="w-annc_read_more btn">{{read_more_text}}</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -38,14 +38,138 @@
|
|||
<span class="w-annc__category-wrap">
|
||||
<i class="fa-solid fa-list"></i>
|
||||
<span class="w-annc__category">{{category}}</span>
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="w-annc__entry-title">
|
||||
<span class="w-annc__title">{{title}}</span>
|
||||
</h4>
|
||||
<p class="w-annc__subtitle">{{subtitle}}</p>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <script src="//code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
|
||||
<script>
|
||||
function combineul_{{subpart-id}}(){
|
||||
var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
|
||||
parents.each(function(i,v){
|
||||
for(var i=1;i<$(v).find('ul.w-annc__list').length;i++)
|
||||
$(v).find('ul.w-annc__list').eq(0).find('>li').eq(-1).after($(v).find('ul.w-annc__list').eq(i).html());
|
||||
var ullength = $(v).find('ul.w-annc__list').length;
|
||||
for(var i = 1;i < ullength;i++)
|
||||
$(v).find('ul.w-annc__list').eq(-1).remove();
|
||||
})
|
||||
};
|
||||
var num;
|
||||
var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item').length;
|
||||
function reorganize_{{subpart-id}}(num){
|
||||
var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').toArray();
|
||||
var currentul = uls.findIndex(function(v){
|
||||
return $(v).hasClass("active") && !$(v).hasClass("hidden_item");
|
||||
})
|
||||
if(currentul == -1)
|
||||
currentul = 0;
|
||||
var li_active_idx = 0;
|
||||
if(currentul != 0)
|
||||
li_active_idx = $(uls[currentul]).find("li.w-annc__item").eq(0).index("li.w-annc__item");
|
||||
combineul_{{subpart-id}}();
|
||||
var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
|
||||
parents.each(function(i,v){
|
||||
var lilength = $(v).find('li.w-annc__item').length;
|
||||
var ul_length = Math.ceil(lilength/num);
|
||||
for(var ii=1;ii< ul_length;ii++){
|
||||
var clone_ul = $(v).find('ul.w-annc__list').eq(-1).clone();
|
||||
clone_ul.empty();
|
||||
clone_ul.removeClass("active");
|
||||
clone_ul.css("display","");
|
||||
$(v).find('ul.w-annc__list').eq(-1).after(clone_ul.prop("outerHTML"));
|
||||
var lihtml="";
|
||||
if(ii != (ul_length-1)){
|
||||
for(var j=0;j<num;j++){
|
||||
lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
|
||||
};
|
||||
}else{
|
||||
for(var j=0;j< lilength - num *(ul_length-1) ;j++){
|
||||
lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
|
||||
};
|
||||
};
|
||||
$(v).find('ul.w-annc__list').eq(-1).html(lihtml);
|
||||
}
|
||||
if(ul_length != 1 )
|
||||
for(var i=0;i< lilength -num ; i++)
|
||||
$(v).find('ul.w-annc__list').eq(0).find("li.w-annc__item").eq(num).remove();
|
||||
})
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css("display","none");
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('padding','0');
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] button').css('z-index','10');
|
||||
// $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css('width','calc('+100/num+'% - '+100/10+'em)'); //20px=>li的margin
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css('float','left');
|
||||
var active_ul = $("[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item").eq(li_active_idx).parents("ul.w-annc__list");
|
||||
active_ul.addClass("active");
|
||||
active_ul.removeClass("hidden_item");
|
||||
active_ul.css("display","");
|
||||
};
|
||||
$(window).resize(function(){
|
||||
if($(window).width()>1024){
|
||||
reorganize_{{subpart-id}}(2);
|
||||
num=2;
|
||||
}else if($(window).width()>576){
|
||||
reorganize_{{subpart-id}}(2);
|
||||
num=2;
|
||||
}else{
|
||||
reorganize_{{subpart-id}}(1);
|
||||
num=1;
|
||||
}
|
||||
})
|
||||
$(document).ready(function(){
|
||||
if($(window).width()>1024){
|
||||
reorganize_{{subpart-id}}(2);
|
||||
num=2;
|
||||
}else if($(window).width()>576){
|
||||
reorganize_{{subpart-id}}(2);
|
||||
num=2;
|
||||
}else{
|
||||
reorganize_{{subpart-id}}(1);
|
||||
num=1;
|
||||
}
|
||||
var flag=false;
|
||||
$('.btn-left').click(function(){
|
||||
if(!flag){
|
||||
var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').toArray();
|
||||
var ul_length = uls.length;
|
||||
var currentul = uls.findIndex(function(v){
|
||||
return $(v).hasClass("active");
|
||||
})
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('display','none');
|
||||
if(currentul - 1 < 0)
|
||||
currentul += ul_length;
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').removeClass("active");
|
||||
var active_item = $(uls[currentul-1]);
|
||||
active_item.addClass("active");
|
||||
active_item.find("li").css("display","block");
|
||||
flag=true;
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list.active').eq(0).effect("slide", { direction: "right", mode: 'show', duration: 500},function(){flag=false;});
|
||||
};
|
||||
});
|
||||
$('.btn-right').click(function(){
|
||||
var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item').length;
|
||||
if(!flag){
|
||||
var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').toArray();
|
||||
var ul_length = uls.length;
|
||||
var currentul = uls.findIndex(function(v){
|
||||
return $(v).hasClass("active");
|
||||
})
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('display','none');
|
||||
if(currentul + 1 > ul_length - 1)
|
||||
currentul -= ul_length;
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').removeClass("active");
|
||||
var active_item = $(uls[currentul+1]);
|
||||
active_item.addClass("active");
|
||||
active_item.find("li").css("display","block");
|
||||
flag=true;
|
||||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list.active').eq(0).effect("slide", { direction: "left", mode: 'show', duration: 500},function(){flag=false;});
|
||||
};
|
||||
});
|
||||
});
|
||||
</script> -->
|
||||
|
|
|
|||
|
|
@ -5,25 +5,27 @@
|
|||
<ul class="w-annc__list" data-level="0" data-list="announcements">
|
||||
<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__img-wrap col-sm-4">
|
||||
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
</div>
|
||||
<div class="w-annc__content-wrap col-sm-8">
|
||||
<div class="w-annc__meta">
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
|
||||
<span class="w-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<span class="w-annc__category-wrap">
|
||||
<span class="w-annc__category">{{category}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="w-annc__entry-title">
|
||||
<span class="w-annc__title">{{title}}</span>
|
||||
</h4>
|
||||
<p class="w-annc__subtitle">{{subtitle}}</p>
|
||||
<div class="widget-title-a-inner">
|
||||
<div class="w-annc__img-wrap col-sm-4">
|
||||
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
</div>
|
||||
<div class="w-annc__content-wrap col-sm-8">
|
||||
<div class="w-annc__meta">
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
|
||||
<span class="w-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<span class="w-annc__category-wrap">
|
||||
<span class="w-annc__category">{{category}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="w-annc__entry-title">
|
||||
<span class="w-annc__title">{{title}}</span>
|
||||
</h4>
|
||||
<p class="w-annc__subtitle">{{subtitle}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,103 +0,0 @@
|
|||
<div class="w-annc widget-announcement-4 widget-announcement-25">
|
||||
<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;">
|
||||
<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: #a8a6a6;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #a8a6a6;
|
||||
z-index: 2;"><i class="fa fa-angle-left prev-button" aria-hidden="true" style=""></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %></span></button>
|
||||
<button id="next-{{subpart-id}}" class="btn-right" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" style="float: right;;height: 2.5em; width: 2.5em;background-size: contain;border: 0;position: absolute;transition:.3s;right: 0.6%; color: #a8a6a6;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #a8a6a6;
|
||||
z-index: 2;"><i class="fa fa-angle-right next-button" aria-hidden="true" style=""></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="w-annc__list row cycle-slideshow" data-level="0" data-list="announcements" 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=".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" >
|
||||
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
<div class="transitionfade"></div>
|
||||
</div>
|
||||
<div class="w-annc__content-wrap card">
|
||||
<div class="w-annc__meta">
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
|
||||
<i class="fa-regular fa-calendar"></i>
|
||||
<span class="w-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<span class="w-annc__category-wrap">
|
||||
<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__title">{{title}}</span>
|
||||
</h4>
|
||||
<p class="w-annc__subtitle">{{subtitle}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
|
||||
var $widget = $('.widget-announcement-25');
|
||||
var $slideshow = $widget.find('.w-annc__list');
|
||||
|
||||
function initAnnouncementCarousel() {
|
||||
|
||||
var visibleCount = $(window).width() < 768 ? 1 : 3;
|
||||
|
||||
// 如果已初始化 → 先 destroy
|
||||
var api = $slideshow.data('cycle.API');
|
||||
if (api) {
|
||||
api.destroy();
|
||||
}
|
||||
|
||||
// 重新初始化（只針對 widget-announcement-25）
|
||||
$slideshow.cycle({
|
||||
fx: 'carousel',
|
||||
timeout: 0,
|
||||
carouselVisible: visibleCount,
|
||||
carouselFluid: true,
|
||||
slides: '> .w-annc__item',
|
||||
|
||||
// 只抓這個 widget 裡的按鈕
|
||||
prev: $widget.find('.btn-left'),
|
||||
next: $widget.find('.btn-right')
|
||||
});
|
||||
}
|
||||
|
||||
// 初始執行
|
||||
initAnnouncementCarousel();
|
||||
|
||||
// resize 時重新初始化（加 debounce 避免狂 reinit）
|
||||
var resizeTimer;
|
||||
$(window).on('resize', function () {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(function () {
|
||||
initAnnouncementCarousel();
|
||||
}, 200);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
|
@ -34,3 +34,52 @@
|
|||
<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>
|
||||
.widget-announcement-26 {
|
||||
|
||||
.w-annc__list {
|
||||
// 讓 grid 的 row 有高度
|
||||
@media(min-width: $screen-sm) {
|
||||
grid-template-rows: 1fr 1fr; // 兩列平均分配
|
||||
}
|
||||
}
|
||||
|
||||
.w-annc__item {
|
||||
// li 撐滿 grid 格子
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// a 撐滿 li
|
||||
.widget-title-a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// img-wrap 撐滿 a
|
||||
.w-annc__img-wrap {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 100%; // 配合 img height: 100%
|
||||
}
|
||||
|
||||
.w-annc__img {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
object-fit: cover; // 關鍵：讓圖片填滿並裁切
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// card 固定在底部
|
||||
.w-annc__content-wrap.card {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -2,30 +2,30 @@
|
|||
<h3 class="i-annc__page-title"><span>{{page-title}}</span></h3>
|
||||
<ul class="i-annc__list row" data-level="0" data-list="announcements">
|
||||
<li class="i-annc__item rotate0">
|
||||
<div class="i-annc__img-wrap bullseye">
|
||||
<a href="{{link_to_show}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
<img class="i-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||||
</a>
|
||||
</div>
|
||||
<div class="i-annc__content-wrap">
|
||||
<div class="i-annc__meta">
|
||||
<span class="i-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="i-annc__status label {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
|
||||
<i class="fa-regular fa-calendar"></i>
|
||||
<span class="i-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<span class="i-annc__category-wrap">
|
||||
<i class="fa-solid fa-list"></i>
|
||||
<span class="i-annc__category">{{category}}</span>
|
||||
</span>
|
||||
<a href="{{link_to_show}}" title="{{img_description}}" style="display: block;">
|
||||
<div class="i-annc__img-wrap bullseye">
|
||||
<img class="i-annc__img" src="{{img_src}}" alt="{{img_description}}">
|
||||
</div>
|
||||
<h4 class="i-annc__entry-title">
|
||||
<a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</h4>
|
||||
<p class="i-annc__subtitle">{{subtitle}}</p>
|
||||
</div>
|
||||
<div class="i-annc__content-wrap">
|
||||
<div class="i-annc__meta">
|
||||
<span class="i-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="i-annc__status label {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
|
||||
<i class="fa-regular fa-calendar"></i>
|
||||
<span class="i-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<span class="i-annc__category-wrap">
|
||||
<i class="fa-solid fa-list"></i>
|
||||
<span class="i-annc__category">{{category}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="i-annc__entry-title">
|
||||
<span class="i-annc__title">{{title}}</span>
|
||||
</h4>
|
||||
<p class="i-annc__subtitle">{{subtitle}}</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -251,15 +251,6 @@
|
|||
},
|
||||
"thumbnail": "annc_widget22_thumbs.png"
|
||||
},
|
||||
{
|
||||
"filename": "annc_widget25",
|
||||
"name": {
|
||||
"zh_tw": "25. 2/3輪波三欄圖文型態2-slide ( 模組標題, 圖片, 狀態, 日期, 類別, 標題, 副標題 )",
|
||||
"en": "25. 2/3carousel3.2-3-Column Standard Image + Text -slide(widget-title, image, status, postdate, category, title, subtitle)"
|
||||
},
|
||||
"thumbnail": "annc_widget21_thumbs.png"
|
||||
},
|
||||
|
||||
{
|
||||
"filename": "annc_widget5",
|
||||
"name": {
|
||||
|
|
|
|||
|
|
@ -9,8 +9,7 @@
|
|||
<span class="w-archive__title" href="{{archive_url}}">{{archive-title}}</span>
|
||||
<ul class="w-archive__list level-4" data-list="files" data-level="2">
|
||||
<li class="w-archive__item level-4">
|
||||
<a href="{{file-url}}" class="widget-archive-files-item w-archive__link" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
|
||||
<a href="{{file-url}}" class="i-archive-files-item" target="_blank" data-bs-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
|
||||
<a href="{{file-url}}" class="widget-archive-files-item w-archive__link" target="{{target}}" title="{{file-name}}">{{file-name}}<span class="label label-primary">{{file-type}}</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
{{category-title}}
|
||||
<i class="fa fa-chevron-down" aria-hidden="true"></i>
|
||||
</a>
|
||||
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapse" class="panel-collapse collapse {{in_class}}">
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
border:0;
|
||||
}
|
||||
.archive-items:nth-child(odd) {
|
||||
background-color: #F3F3F3;
|
||||
background-color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,6 +31,93 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
function fixArchive13TabA11y() {
|
||||
setTimeout(function() {
|
||||
var $tabList = $('.index-archive-13 .archive-categories[role="tablist"]');
|
||||
if ($tabList.length === 0) return;
|
||||
|
||||
var $tabs = $tabList.find('a[role="tab"]');
|
||||
|
||||
// ✅ 補上每個 tab 的必要 ARIA 屬性
|
||||
$tabs.each(function(i) {
|
||||
var $tab = $(this);
|
||||
var $li = $tab.closest('.nav-item');
|
||||
var panelId = ($tab.attr('href') || '').replace('#', '');
|
||||
var tabId = panelId + '-tab';
|
||||
|
||||
// 補上 id 供 tabpanel 的 aria-labelledby 對應
|
||||
$tab.attr('id', tabId);
|
||||
|
||||
// 補上 tabindex：active 為 0，其餘為 -1（roving tabindex 模式）
|
||||
var isActive = $li.hasClass('active');
|
||||
$tab.attr({
|
||||
'tabindex': isActive ? '0' : '-1',
|
||||
'aria-selected': isActive ? 'true' : 'false',
|
||||
'aria-controls': panelId
|
||||
});
|
||||
|
||||
// ✅ 補上 tabpanel 的 aria-labelledby
|
||||
$('#' + panelId).attr('aria-labelledby', tabId);
|
||||
});
|
||||
|
||||
// ✅ 方向鍵在 tab 間移動（roving tabindex 模式）
|
||||
$tabList.on('keydown', 'a[role="tab"]', function(e) {
|
||||
var $currentTab = $(this);
|
||||
var $allTabs = $tabList.find('a[role="tab"]');
|
||||
var currentIndex = $allTabs.index($currentTab);
|
||||
var $targetTab = null;
|
||||
|
||||
// 左方向鍵 / 上方向鍵
|
||||
if (e.which === 37 || e.which === 38) {
|
||||
e.preventDefault();
|
||||
var prevIndex = currentIndex > 0 ? currentIndex - 1 : $allTabs.length - 1;
|
||||
$targetTab = $allTabs.eq(prevIndex);
|
||||
}
|
||||
|
||||
// 右方向鍵 / 下方向鍵
|
||||
if (e.which === 39 || e.which === 40) {
|
||||
e.preventDefault();
|
||||
var nextIndex = currentIndex < $allTabs.length - 1 ? currentIndex + 1 : 0;
|
||||
$targetTab = $allTabs.eq(nextIndex);
|
||||
}
|
||||
|
||||
// Home：跳到第一個
|
||||
if (e.which === 36) {
|
||||
e.preventDefault();
|
||||
$targetTab = $allTabs.first();
|
||||
}
|
||||
|
||||
// End：跳到最後一個
|
||||
if (e.which === 35) {
|
||||
e.preventDefault();
|
||||
$targetTab = $allTabs.last();
|
||||
}
|
||||
|
||||
if ($targetTab && $targetTab.length > 0) {
|
||||
// ✅ roving tabindex：只有目標 tab 可聚焦
|
||||
$allTabs.attr('tabindex', '-1').attr('aria-selected', 'false');
|
||||
$targetTab.attr('tabindex', '0').attr('aria-selected', 'true');
|
||||
$targetTab.focus();
|
||||
// ✅ 觸發 Bootstrap tab 切換
|
||||
$targetTab.tab('show');
|
||||
}
|
||||
});
|
||||
|
||||
// ✅ 點擊時同步 aria-selected 和 tabindex
|
||||
$tabList.on('shown.bs.tab', 'a[role="tab"]', function() {
|
||||
var $allTabs = $tabList.find('a[role="tab"]');
|
||||
$allTabs.attr('tabindex', '-1').attr('aria-selected', 'false');
|
||||
$(this).attr('tabindex', '0').attr('aria-selected', 'true');
|
||||
});
|
||||
|
||||
}, 500);
|
||||
}
|
||||
|
||||
fixArchive13TabA11y();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.index-archive-13{
|
||||
.i-archive__status-wrap {
|
||||
|
|
|
|||
|
|
@ -22,8 +22,7 @@
|
|||
<dl class="i-archive__file-list" data-list="files" data-level="2">
|
||||
<dd class="i-archive__file-wrap">
|
||||
<i class="fa-solid fa-file"></i>
|
||||
<a class="i-archive__file-name" href="{{file-url}}" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
|
||||
<a href="{{file-url}}" class="i-archive-files-item" target="_blank" data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
|
||||
<a class="i-archive__file-name" href="{{file-url}}" target="{{target}}" title="{{file-name}}">{{file-name}}<span class="label label-primary">{{file-type}}</span></a>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
|
@ -33,6 +32,93 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
function fixArchive13TabA11y() {
|
||||
setTimeout(function() {
|
||||
var $tabList = $('.index-archive-15 .archive-categories[role="tablist"]');
|
||||
if ($tabList.length === 0) return;
|
||||
|
||||
var $tabs = $tabList.find('a[role="tab"]');
|
||||
|
||||
// ✅ 補上每個 tab 的必要 ARIA 屬性
|
||||
$tabs.each(function(i) {
|
||||
var $tab = $(this);
|
||||
var $li = $tab.closest('.nav-item');
|
||||
var panelId = ($tab.attr('href') || '').replace('#', '');
|
||||
var tabId = panelId + '-tab';
|
||||
|
||||
// 補上 id 供 tabpanel 的 aria-labelledby 對應
|
||||
$tab.attr('id', tabId);
|
||||
|
||||
// 補上 tabindex：active 為 0，其餘為 -1（roving tabindex 模式）
|
||||
var isActive = $li.hasClass('active');
|
||||
$tab.attr({
|
||||
'tabindex': isActive ? '0' : '-1',
|
||||
'aria-selected': isActive ? 'true' : 'false',
|
||||
'aria-controls': panelId
|
||||
});
|
||||
|
||||
// ✅ 補上 tabpanel 的 aria-labelledby
|
||||
$('#' + panelId).attr('aria-labelledby', tabId);
|
||||
});
|
||||
|
||||
// ✅ 方向鍵在 tab 間移動（roving tabindex 模式）
|
||||
$tabList.on('keydown', 'a[role="tab"]', function(e) {
|
||||
var $currentTab = $(this);
|
||||
var $allTabs = $tabList.find('a[role="tab"]');
|
||||
var currentIndex = $allTabs.index($currentTab);
|
||||
var $targetTab = null;
|
||||
|
||||
// 左方向鍵 / 上方向鍵
|
||||
if (e.which === 37 || e.which === 38) {
|
||||
e.preventDefault();
|
||||
var prevIndex = currentIndex > 0 ? currentIndex - 1 : $allTabs.length - 1;
|
||||
$targetTab = $allTabs.eq(prevIndex);
|
||||
}
|
||||
|
||||
// 右方向鍵 / 下方向鍵
|
||||
if (e.which === 39 || e.which === 40) {
|
||||
e.preventDefault();
|
||||
var nextIndex = currentIndex < $allTabs.length - 1 ? currentIndex + 1 : 0;
|
||||
$targetTab = $allTabs.eq(nextIndex);
|
||||
}
|
||||
|
||||
// Home：跳到第一個
|
||||
if (e.which === 36) {
|
||||
e.preventDefault();
|
||||
$targetTab = $allTabs.first();
|
||||
}
|
||||
|
||||
// End：跳到最後一個
|
||||
if (e.which === 35) {
|
||||
e.preventDefault();
|
||||
$targetTab = $allTabs.last();
|
||||
}
|
||||
|
||||
if ($targetTab && $targetTab.length > 0) {
|
||||
// ✅ roving tabindex：只有目標 tab 可聚焦
|
||||
$allTabs.attr('tabindex', '-1').attr('aria-selected', 'false');
|
||||
$targetTab.attr('tabindex', '0').attr('aria-selected', 'true');
|
||||
$targetTab.focus();
|
||||
// ✅ 觸發 Bootstrap tab 切換
|
||||
$targetTab.tab('show');
|
||||
}
|
||||
});
|
||||
|
||||
// ✅ 點擊時同步 aria-selected 和 tabindex
|
||||
$tabList.on('shown.bs.tab', 'a[role="tab"]', function() {
|
||||
var $allTabs = $tabList.find('a[role="tab"]');
|
||||
$allTabs.attr('tabindex', '-1').attr('aria-selected', 'false');
|
||||
$(this).attr('tabindex', '0').attr('aria-selected', 'true');
|
||||
});
|
||||
|
||||
}, 500);
|
||||
}
|
||||
|
||||
fixArchive13TabA11y();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.i-archive__archive-title {
|
||||
font-size: 1.2em;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
}
|
||||
</style>
|
||||
<article class="s-annc show-announcement">
|
||||
<h1 class="s-annc__show-title">{{title}}</h1>
|
||||
<h3 class="s-annc__show-title">{{title}}</h3>
|
||||
|
||||
<ul class="s-annc__meta-wrap list-unstyled no-print">
|
||||
<li class="s-annc__date-wrap s-annc__meta--item">
|
||||
|
|
|
|||
|
|
@ -5,10 +5,8 @@
|
|||
<ul class="list-unstyled" data-list="faqs" data-level="0">
|
||||
<li class="index-content">
|
||||
<h4 class="index-content-title-wrap" aria-expanded="false">
|
||||
<span class="index-content-title">{{question}}</span>
|
||||
<span data-list="statuses" data-level="1">
|
||||
<span class="label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<span class="index-content-title"><span data-list="statuses" data-level="1">
|
||||
<span class="label status {{status-class}}">{{status}}</span></span>{{question}}</span>
|
||||
<i class="fa-solid fa-chevron-right" style="float:right;"></i>
|
||||
</h4>
|
||||
<section class="post">
|
||||
|
|
|
|||
|
|
@ -12,11 +12,9 @@
|
|||
src="{{thumb-src}}"
|
||||
alt="{{alt_title}}"
|
||||
>
|
||||
</a>
|
||||
<a href="{{link_to_show}}" title="{{album-name}}">
|
||||
<div class="mask_title">{{image_description}}</div>
|
||||
<div class="album-name">{{link_text}}</div>
|
||||
</a>
|
||||
<a class="album-name" href="{{link_to_show}}" title="{{album-name}}">{{link_text}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
|
||||
<div class="index-content">
|
||||
<div class="index-content-inner clearfix row">
|
||||
<a href="{{link_to_show}}" title="{{album-name}}">
|
||||
<a href="{{link_to_show}}">
|
||||
<div class="index-pic col-sm-2">
|
||||
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{album-name}}">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
</h3>
|
||||
<div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
|
||||
<div class="index-content col-sm-3">
|
||||
<a href="{{link_to_show}}" title="{{album-name}}">
|
||||
<a href="{{link_to_show}}">
|
||||
<div class="index-content-inner">
|
||||
<div class="index-pic">
|
||||
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{alt_title}}">
|
||||
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{album-name}}">
|
||||
</div>
|
||||
<div class="index-part">
|
||||
<h4 class="index-content-title">{{album-name}}</h4>
|
||||
|
|
|
|||
|
|
@ -5,16 +5,15 @@
|
|||
<link rel="stylesheet" type="text/css" href="/assets/gallery_card.css">
|
||||
<div class="row" data-level="0" data-list="albums">
|
||||
<div class="card card-flip h-100">
|
||||
<a href="{{link_to_show}}" title="{{album-name}}">
|
||||
<a href="{{link_to_show}}">
|
||||
<div class="card-front">
|
||||
<div class="card-body" style="padding:0;">
|
||||
<img src="{{thumb-src}}"alt="{{alt_title}}">
|
||||
<img src="{{thumb-src}}" alt="{{album-name}}">
|
||||
<div class="card-footer">
|
||||
<h3 class="card-title">{{album-name}}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-back">
|
||||
<div class="card-body" style="background-color: {{album_color}};color: {{album_card_text_color}};">
|
||||
<h3 class="card-title">{{album-name}}</h3>
|
||||
|
|
@ -25,3 +24,10 @@
|
|||
</div>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
<style>
|
||||
.h-100{
|
||||
height: auto !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue