From ec3aa57302c87191d67cb51cf0c3c0542c4069d0 Mon Sep 17 00:00:00 2001 From: ken Date: Tue, 14 Oct 2025 13:29:03 +0800 Subject: [PATCH] 'update' --- assets/javascripts/app.js | 27 ++++- assets/stylesheets/template/base/_unity.scss | 2 +- .../stylesheets/template/layout/content.scss | 111 +++++++++++++++++- .../stylesheets/template/layout/footer.scss | 2 +- .../stylesheets/template/layout/header.scss | 100 +++++++++++++++- .../template/modules/ad_banner.scss | 100 +++++++++++++++- .../template/modules/announcement.scss | 42 ++++++- assets/stylesheets/template/modules/menu.scss | 16 ++- .../template/widget/breadcrumb.scss | 4 +- home/header.html.erb | 10 +- home/index.html.erb | 4 +- home/page.html.erb | 4 +- modules/ad_banner/_ad_banner_widget1.html.erb | 1 + .../ad_banner/_ad_banner_widget10.html.erb | 86 ++++++++++++++ modules/ad_banner/info.json | 10 +- modules/announcement/_annc_widget10.html.erb | 4 +- modules/announcement/_annc_widget11.html.erb | 4 +- modules/announcement/annc_index3.html.erb | 4 +- modules/announcement/annc_index4.html.erb | 4 +- 19 files changed, 496 insertions(+), 39 deletions(-) create mode 100644 modules/ad_banner/_ad_banner_widget10.html.erb diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index 2775459..e9adf49 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -1,7 +1,12 @@ ;(function($, win, undefined) { // ECMAScript 5 嚴格模式 'use strict'; - +$(document).ready(function() { + // 確保兩個元素都存在 + if ($('.header-nav blockquote').length && $('.orbit-bar-menu').length) { + $('.header-nav blockquote').appendTo('.orbit-bar-menu'); + } +}); //header fixed在上方 function initdata1() { if ( $('.homebanner').length != 0) { @@ -1135,7 +1140,7 @@ $(document).ready(function () { if ($(window).width() <769) { $('.modules-menu-level-0').after($('.header-nav')); }else{ - $('.outdropdowns').before($('.header-nav')); + $('.navbar-header').before($('.header-nav')); }; $('.sitemenu-vertical .sitemenu-dropdown-toggle').click(function(){ $('.sitemenu-vertical .dropdown-menu').slideToggle(); @@ -1204,7 +1209,7 @@ $(document).ready(function () { $('.modules-menu-level-0').after($('.header-nav')); }else{ - $('.outdropdowns').before($('.header-nav')); + $('.navbar-header').before($('.header-nav')); }; if ($(window).width() > 821) { @@ -1264,6 +1269,9 @@ $(document).ready(function () { handleAnimationOnce('.hide3', 'animationvisible3', 0.5); handleAnimationOnce('.rotate0', 'animationrotate0', 0.5); handleAnimationOnce('.zoomin', 'animationvisible5', 0.5); + + handleAnimationOnce('.fadeInUp', 'animationvisible', 0.5); + handleAnimationOnce('.fadeInDown', 'animationvisible3', 0.5); }); init(); @@ -1441,6 +1449,19 @@ $(document).ready(function() { $(this).find('span').text(selectedText + '（已選取）'); }); }); + +$(document).ready(function() { + $('.toggler').on('click', function() { + $(this) + .toggleClass('active') + .next('.content-wrapper') // 只選相鄰的後一個 .content-wrapper + .stop(true, true) + .slideToggle(300); // 平滑展開/收起 + }); +}); + + + // //選單樣式2 // $(document).ready(function() { // "use strict"; diff --git a/assets/stylesheets/template/base/_unity.scss b/assets/stylesheets/template/base/_unity.scss index b98f8a2..db2c57c 100644 --- a/assets/stylesheets/template/base/_unity.scss +++ b/assets/stylesheets/template/base/_unity.scss @@ -12,7 +12,7 @@ content: ''; height: 6px; width: 80px; - background-color: #00356a; + background-color:$theme-color-second; margin-bottom: 0.2em; } diff --git a/assets/stylesheets/template/layout/content.scss b/assets/stylesheets/template/layout/content.scss index fa6e6a7..e762f18 100644 --- a/assets/stylesheets/template/layout/content.scss +++ b/assets/stylesheets/template/layout/content.scss @@ -294,7 +294,7 @@ } } .membercontainer{ - background-color: #fff; + // background-color: #fff; } .marqueeken { font-family: "Noto Serif TC", sans-serif; @@ -420,4 +420,113 @@ &:hover{ } +} +#itemFullText{ + td{ + &:first-child{ + @media(min-width:769px){ + width: 27%; + } + + } + } +} +#subCategory{ + tr { + background: #fafafa; + border: 1px solid #ddd; + margin-bottom: 1em !important; + position: relative; + display: flex; + } + td{ + display: block; + width: fit-content!important; + &:first-child{ + width: 18%; + min-width: 130px; + } + img{ + outline: 0px; + border: 1px solid #ddd; + vertical-align: middle; + display: block; + height: 130px; + max-width: 100%; + padding: 4px; + margin: 0px 8px 0px 0px; + width: 130px; + } + h2{ + outline: 0px; + font-weight: 300; + line-height: 1.1; + color: inherit; + margin-top: 20px; + margin-bottom: 10px; + font-size: 1em!important; + a{ + color: #347018; + } + a:before { + content: ""; + display: block; + background: url(/assets/li-sign.gif) no-repeat; + width: 20px; + height: 20px; + float: left; + margin: 0 6px 0 0; + } + } + } + +} +.subCategory { + background: #fafafa; + border: 1px solid #ddd; + h2{ + font-size: 1.5em!important ; + } +} +.subCategory h2 a:before { + content: ""; + display: block; + background: url(/assets/li-sign.gif) no-repeat; + width: 20px; + height: 20px; + float: left; + margin: 0 6px 0 0; +} + +.itemFullText { + font-size: 0.8em; + +} +.ic-wrapper { + background-color: #F0F0F0; + border-top: 10px solid #ffffff; + border-bottom: 3px solid #E0E0E0; + padding: 8px; + font-size: 20px; + line-height: 20px; + font-family: Microsoft JhengHei, arial; +} +.ic-wrapper-item { + padding: 0; + min-width:unset!important; +} +.toggler{ + cursor: pointer; + margin-bottom: 10px; + padding: 7px; + border: 1px solid #ddd; + background: #F5F5F5; + background: -moz-linear-gradient(top, #FAFAFA 0%, #F5F5F5 100%); + background: -webkit-linear-gradient(top, #FAFAFA 0%, #F5F5F5 100%); + background: -o-linear-gradient(top, #FAFAFA 0%, #F5F5F5 100%); + background: linear-gradient(to bottom, #FAFAFA 0%, #F5F5F5 100%); + border-radius: 5px; + box-shadow: 0 1px 0 #fff inset; + text-shadow: 0 1px 0 #fff; + font-size: 1.2em!important; } \ No newline at end of file diff --git a/assets/stylesheets/template/layout/footer.scss b/assets/stylesheets/template/layout/footer.scss index d7f2fa9..cf1ad5f 100644 --- a/assets/stylesheets/template/layout/footer.scss +++ b/assets/stylesheets/template/layout/footer.scss @@ -7,7 +7,7 @@ clear: both; position: relative; padding:0; - background-color: $theme-color-second; + background-color: #00172f; color: $theme-color-main; .layout-footer-inner{ padding-bottom: 1em!important; diff --git a/assets/stylesheets/template/layout/header.scss b/assets/stylesheets/template/layout/header.scss index bea6070..aed9e9a 100644 --- a/assets/stylesheets/template/layout/header.scss +++ b/assets/stylesheets/template/layout/header.scss @@ -10,13 +10,105 @@ .outdropdowns{ position: relative; z-index: 1; - padding-bottom: 0.5em; +} +.nav_ul{ + padding: 0; + & > li{ + position: relative; + list-style:none; + float: left; + display: inline-block; + @media(max-width:480px){ + width: 100%; + a{ + display: block; + } + } + &:hover{ + background-color:transparent; + > a{ + text-decoration: underline; + padding: 0.7em; + } + & > ul{ + display: block; + a{ + color: #fff; + } + } + } + & > ul{ + @media(max-width:480px){ + position: relative; + box-shadow: none; + display: block; + li{ + width: 100%; + } + } + display: none; + width:-webkit-fill-available; + min-width: max-content; + box-shadow: 2px 2px 5px #00000033; + margin: 0; + transition-duration: 0.5s; + background:$theme-color-second; + position: absolute; + padding: 0; + li{ + list-style:none; + float: none!important; + a{ + color: #fff; + display: block; + padding: 0.7em; + } + &:hover{ + background-color: rgba(darken($theme-color-second, 10%), 1);; + & > ul{ + display: block; + } + } + } + } + } + + +} +.orbit-bar-inner{ + .orbit-bar-menu{ + display: flex; + align-items: center; + } + + blockquote{ + color: #fff; + padding: 0; + margin: 0; + font-size: unset; + border-left: 0; + &:after, &:before{ + display: none; + } + a{ + color: #fff; + text-decoration: none; + display: inline-block; + height: 40px; + padding: 0.7em; + font-size: 0.85em; + } + } } .header-nav { + z-index: 2; ul{ padding: 0; } - @media(max-width: 769px){ + @media(min-width: 769px){ + float: right; + } + @media(max-width: 768px){ ul{ display: flex!important; flex-wrap: wrap; @@ -51,7 +143,6 @@ } .header-banner { overflow: hidden; } .header-nav { - padding:0; >.container{ color: $theme-color-main; font-family: $main-font; @@ -117,6 +208,7 @@ @media (min-width: $screen-sm) { margin:0; line-height: 3.75em; + height: auto; h1{ font-size: 1.2em; display: flex; @@ -169,7 +261,7 @@ } .navbar-toggle { - margin-top: 1.5em; + margin-top: 1em; position: absolute; right: 0; // border-radius: 0.125em; diff --git a/assets/stylesheets/template/modules/ad_banner.scss b/assets/stylesheets/template/modules/ad_banner.scss index 4cd9d20..7d93fc1 100644 --- a/assets/stylesheets/template/modules/ad_banner.scss +++ b/assets/stylesheets/template/modules/ad_banner.scss @@ -214,6 +214,99 @@ ul.button-mid{ position: absolute; width: 100%; } +// Widget 10 +.ba-banner-widget-10 { + height: 30vh !important; + z-index: 0; + .title{ + border-bottom:0!important; + } + .en{ + letter-spacing: 0.5px; + color: #EAFFDB; + font-size: 0.6em; + line-height: 1.3; + font-weight: 400; + } + + .youtube, .cycle-youtube { + width: 100%; + height: 100%; + } + + object, embed { + width: 100%; + height: 100%; + } + .banner-pager { + + } + .button-mid{ + z-index: 101; + } + .ad-overlay{ + text-align: center; + position: relative; + background: none; + color: #fff; + z-index: 100; + padding-left: 10%; + padding-right: 10%; + // text-shadow: 1px 1px 1px #0000008c; + color: #fff; + text-align: center; + text-shadow: 0px 0px 6px #00000080; + h3{ + width: 100%; + display: inline-block; + font-size: 2.1em; + } + .cht{ + color: #fff; + width: 100%; + display: inline-block; + font-size: 1.3em; + font-weight: normal; + } + } + img{ + position: fixed; + top:0; + height: 50vh; + width: 100vw; + } + &,& .jp-jplayer{ + @media(min-width:1801px){ + .ad-overlay{ + bottom: 0; + position: absolute; + } + } + + .ad-overlay{ + position: absolute; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + h2{ + text-align: center; + line-height: 1.5; + text-transform: uppercase; + font-weight: 600; + display: block; + span{ + color: #c9eff6; + font-size: 0.6em; + line-height: 1.1; + margin: 0px; + display: block; + font-weight: 500; + } + } + } + } +} // Widget 0 .ba-banner-widget-0 { height: 100vh !important; @@ -297,6 +390,7 @@ ul.button-mid{ } // Widget 1 .ba-banner-widget-1 { + .banner-overlay{ padding: 3.5em 5em; background-image: linear-gradient(180deg, transparent 0, #00000066 40%, #000); @@ -532,7 +626,11 @@ ul.button-mid{ content: ''; width: 60%; height: 100%; - background: linear-gradient(to right, #002d58e3 0%, #03162700 100%); + background: linear-gradient( + to right, + rgba(red($theme-color-second), green($theme-color-second), blue($theme-color-second), 0.8) 0%, + #03162700 100% +); display: block; z-index: 100; @media(max-width:768px){ diff --git a/assets/stylesheets/template/modules/announcement.scss b/assets/stylesheets/template/modules/announcement.scss index d5c1ae2..5fa8fd3 100644 --- a/assets/stylesheets/template/modules/announcement.scss +++ b/assets/stylesheets/template/modules/announcement.scss @@ -2294,6 +2294,20 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl .index-announcement-7 { .i-annc__item{ border:0; + &:hover{ + .i-annc__img-wrap{ + -webkit-transform: translateY(-6px); + -ms-transform: translateY(-6px); + transform: translateY(-6px); + box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033; + -webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033; + -webkit-transition: all .3s ease; + -moz-transition: all .3s ease; + -ms-transition: all .3s ease; + -o-transition: all .3s ease; + transition: all .3s ease; + } + } } .i-annc__list { display: flex; @@ -2321,8 +2335,12 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl } .i-annc__img-wrap { overflow: hidden; - height: 13.5em; + height: 16.5em; margin: 1em 0.5em; + border-radius: 1em; + @media(max-width:1024px)and(min-width:768px){ + height: 11.5em; + } img { @media (max-width:767px) { transform: scale(1) !important; @@ -2332,6 +2350,23 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl } // Index-19 .index-announcement-19 { + .i-annc__item{ + border:0; + &:hover{ + .i-annc__img-wrap{ + -webkit-transform: translateY(-6px); + -ms-transform: translateY(-6px); + transform: translateY(-6px); + box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033; + -webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033; + -webkit-transition: all .3s ease; + -moz-transition: all .3s ease; + -ms-transition: all .3s ease; + -o-transition: all .3s ease; + transition: all .3s ease; + } + } + } .i-annc__list { display: flex; flex-wrap: wrap; @@ -2341,6 +2376,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl } .i-annc__list > .i-annc__item { width: calc( 100%/4); + border-bottom: 0; @media (max-width:767px) { width: calc( 100%/2); min-height: unset; @@ -2361,6 +2397,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl overflow: hidden; height: 13.5em; margin: 1em 0.5em; + border-radius: 1em; img { @media (max-width:767px) { transform: scale(1) !important; @@ -3015,7 +3052,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl display: none; } .i-annc__title,.i-annc__subtitle{ - color: #fff!important; + } .homecard2{ transform: perspective(2500px) rotateY(-100deg); @@ -3089,6 +3126,7 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl } .i-annc__content-wrap{ padding: 0 0.5em; + padding-bottom: 1em; } .i-annc__item{ padding: 0; diff --git a/assets/stylesheets/template/modules/menu.scss b/assets/stylesheets/template/modules/menu.scss index c3c9382..ae7d2a0 100644 --- a/assets/stylesheets/template/modules/menu.scss +++ b/assets/stylesheets/template/modules/menu.scss @@ -80,7 +80,7 @@ //固定選單 .navFixed { .header-nav{ - display: none!important; + // display: none!important; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; @@ -90,7 +90,6 @@ z-index: 10; position: fixed; left: 0; - top:0; margin-top: 0; min-width: 100%; -webkit-backdrop-filter: saturate(180%) blur(20px); @@ -639,9 +638,9 @@ } } html[lang="en"]{ - .modules-menu .modules-menu-level-0{ + .modules-menu .modules-menu-level-0{ @media (min-width: 1025px){ - width: 50%; + width: 72%; } } .modules-menu-level-1{ @@ -649,4 +648,13 @@ html[lang="en"]{ min-width: 220px!important; } } + @media (min-width: 769px) { + .modules-menu .modules-menu-level-0 > li > a { + font-size: 1em; + } + } + .modules-menu .modules-menu-level-1 > li > a { + font-size: 1em; + } } + diff --git a/assets/stylesheets/template/widget/breadcrumb.scss b/assets/stylesheets/template/widget/breadcrumb.scss index 2cf8cca..cf67db1 100644 --- a/assets/stylesheets/template/widget/breadcrumb.scss +++ b/assets/stylesheets/template/widget/breadcrumb.scss @@ -8,9 +8,7 @@ } } .breadcrumb { - @media(max-width: 768px){ - padding: 0; - } + background-color: transparent; margin-left: 0; margin-bottom: 0; a:link, a:visited { color: $theme-color-main; } diff --git a/home/header.html.erb b/home/header.html.erb index 1be98bc..1974ac8 100644 --- a/home/header.html.erb +++ b/home/header.html.erb @@ -21,6 +21,10 @@
+
+ ::: + {{header-data}} +
@@ -32,12 +36,6 @@
-
-
- ::: - {{header-data}} -
-