This commit is contained in:
rulingcom 2023-04-06 09:41:37 +08:00
parent 29c08c0bed
commit 93b7069a69
13 changed files with 544 additions and 14 deletions

View File

@ -528,6 +528,24 @@
// 當文件物件模型(DOM)載入後執行init函數
$(document).ready(function(){
$(".popup-btn").click(function() {
var href = $(this).attr("href")
$(href).fadeIn(250);
$(href).children$("popup-box").removeClass("transform-out").addClass("transform-in");
e.preventDefault();
});
$(".popup-close").click(function() {
closeWindow();
});
// $(".popup-wrap").click(function(){
// closeWindow();
// })
function closeWindow(){
$(".popup-wrap").fadeOut(200);
$(".popup-box").removeClass("transform-in").addClass("transform-out");
event.preventDefault();
}
//RWD 自動縮放headerbannner
function headerH() {
if ($(window).width() < 769) {

View File

@ -239,3 +239,84 @@ margin-top: 10px;
transform: translateY(0) translateZ(0);
}
}
////
.wrap {
text-align: center;
padding-top: 20%;
}
.btn {
background-color: #FFB80C;
text-decoration: none;
color: #1e1e1e;
padding: 16px;
border-radius: 5px;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
}
.popup-wrap {
width: 100%;
height: 100%;
display: block;
position: fixed;
top: 0px;
left: 0px;
content: '';
background: rgba(0, 0, 0, 0.85);
z-index: 10;
}
.popup-box {
width:80%;
padding: 50px 75px;
transform: translate(-50%, -50%) scale(0.5);
position: absolute;
top: 50%;
left: 50%;
box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
border-radius: 3px;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
background: #fff;
text-align: center;
}
h3 {
font-size: 2em;
color: #333;
font-weight: bold;
letter-spacing: 3px;
text-align: initial;
line-height: 1.5em;
}
.close-btn {
width: 50px;
height: 50px;
display: inline-block;
position: absolute;
top: 10px;
right: 10px;
border-radius: 100%;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
background: #d75f70;
font-weight: bold;
text-decoration: none;
color: #fff;
line-height: 40px;
font-size: 32px;
}
.transform-in, .transform-out {
display: block;
-webkit-transition: all ease 0.5s;
transition: all ease 0.5s;
}
.transform-in {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
}
.transform-out {
-webkit-transform: translate(-50%, -50%) scale(0.5);
transform: translate(-50%, -50%) scale(0.5);
}

View File

@ -110,9 +110,11 @@
// Widget-4
.widget-announcement-4 {
.w-annc__title {
font-family: $main-font;
line-height: 1.3;
font-size: 1.2rem;
color: #fccc27;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0;
}
.w-annc__widget-title { float: left; }
.w-annc__more { margin-top: 1.5em; }
@ -125,7 +127,27 @@
margin: 0 0 1em 0;
}
}
// Widget-21
.widget-announcement-21 {
.w-annc__title{
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.w-annc__subtitle{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.w-annc__img-wrap{
height: 10.5em;
margin: 0;
}
}
// Widget-5
.widget-announcement-5 {
.w-annc__title {

View File

@ -121,4 +121,46 @@
line-height: 2.5;
}
}
&.index3 {
.list-unstyled {
display: flex;
flex-wrap: wrap;
}
.index-content {
padding: 1em;
}
.status-top {
line-height: 2.5;
}
.borderwhite{
border: 1px solid #ffffff4d;
padding: 10px;
position: relative;
}
.index-content-title{
h4{
color: #fff;
font-size: 1.15rem;
font-weight: 500;
letter-spacing: 2px;
}
.index-context{
color: #ffbd19;
font-weight: 300;
font-size: .95rem;
}
}
.link-img-wrap{
margin: 0;
display: block;
height: auto!important;
img{
width: 100%;
}
}
.link-title{
color: #fff!important;
font-size: 1.15rem!important;
}
}
}

View File

@ -197,22 +197,35 @@ ul.tab_nav {
font-family: $main-font;
li {
padding: 0.5em 1em;
background: $theme-color-green;
margin: 0.2em;
width: 16%;
background: #2f3132;
padding: 12px;
text-align: center;
font-size: 1.1rem;
letter-spacing: 2px;
color: #eee;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
font-weight: 600;
&.active {
background: #19524b;
color: #fff;
color: #333;
background: #ccc;
}
}
}
.tab_ken{
background: #222;
margin-top: 5px;
padding: 30px 15px;
img{
border: 1px solid #aaa;
padding: 5px;
}
}
.noscroll { overflow: hidden; position: fixed; }
//覆蓋bootstrap 設定

View File

@ -0,0 +1,121 @@
<div class="w-annc widget-announcement-4 widget-announcement-21">
<div class="w-annc__more-wrap clearfix">
<h2 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h2>
<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">
<div class="w-annc__img-wrap bullseye">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
</div>
<div class="w-annc__content-wrap">
<!-- <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 fa-calendar-o"></i>
<span class="w-annc__postdate">{{postdate}}</span>
</span>
<span class="w-annc__category-wrap">
<i class="fa fa-tasks"></i>
<span class="w-annc__category">{{category}}</span>
</span>
</div> -->
<h4 class="w-annc__entry-title">
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
</h4>
<p class="w-annc__subtitle">{{subtitle}}</p>
</div>
</li>
</ul>
</div>
<style type="text/css">
[data-subpart-id="{{subpart-id}}"] .bullseye{
overflow: hidden;
}
.w-annc__content-wrap{
border: 1px solid #ffffff4d;
padding: 10px;
position: relative;
min-height: 115px;
max-height: 115px;
}
.w-annc__title{
color: #fccc27!important;
font-size: 1.1rem!important;
font-weight: 600;
letter-spacing: 0;
}
</style>
<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){
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 >li').css('width','calc('+100/num+'% - '+20/16+'em)'); //20px=>li的margin
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css("float","left");
};
$(window).resize(function(){
if($(window).width()>1024){
reorganize_{{subpart-id}}(3);
num=3;
}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}}(3);
num=3;
}else if($(window).width()>576){
reorganize_{{subpart-id}}(2);
num=2;
}else{
reorganize_{{subpart-id}}(1);
num=1;
}
})
</script>

View File

@ -0,0 +1,124 @@
<div class="w-annc widget-announcement-4 widget-announcement-44">
<div class="w-annc__more-wrap clearfix">
<h2 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h2>
<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">
<div class="w-annc__img-wrap bullseye">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
</div>
<div class="w-annc__content-wrap">
<!-- <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 fa-calendar-o"></i>
<span class="w-annc__postdate">{{postdate}}</span>
</span>
<span class="w-annc__category-wrap">
<i class="fa fa-tasks"></i>
<span class="w-annc__category">{{category}}</span>
</span>
</div> -->
<h4 class="w-annc__entry-title">
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
</h4>
<p class="w-annc__subtitle">{{subtitle}}</p>
</div>
</li>
</ul>
</div>
<style type="text/css">
[data-subpart-id="{{subpart-id}}"] .bullseye{
overflow: hidden;
}
.w-annc__content-wrap{
border: 1px solid #ffffff4d;
padding: 10px;
position: relative;
min-height: 85px;
}
.w-annc__img-wrap{
height: auto!important;
margin: 0!important;
}
.w-annc__title{
color: #fccc27;
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0;
}
</style>
<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){
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 >li').css('width','calc('+100/num+'% - '+20/16+'em)'); //20px=>li的margin
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css("float","left");
};
$(window).resize(function(){
if($(window).width()>1024){
reorganize_{{subpart-id}}(3);
num=3;
}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}}(3);
num=3;
}else if($(window).width()>576){
reorganize_{{subpart-id}}(2);
num=2;
}else{
reorganize_{{subpart-id}}(1);
num=1;
}
})
</script>

View File

@ -0,0 +1,29 @@
<div class="i-annc index-announcement-7 index-announcement-18">
<h3 class="i-annc__page-title">{{page-title}}</h3>
<ul class="i-annc__list row" data-level="0" data-list="announcements">
<li class="i-annc__item col-md-4 col-sm-4">
<div class="i-annc__img-wrap bullseye">
<img class="i-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
</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__category-wrap">
<span class="i-annc__category">{{category}}</span>
</span>
</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="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" : "More NEWS" %></a>
</div>
</li>
</ul>
</div>
{{pagination_goes_here}}

View File

@ -0,0 +1,29 @@
<div class="i-annc index-announcement-7">
<h3 class="i-annc__page-title">{{page-title}}</h3>
<ul class="i-annc__list row" data-level="0" data-list="announcements">
<li class="i-annc__item col-md-4 col-sm-4">
<div class="i-annc__img-wrap bullseye">
<img class="i-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
</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__category-wrap">
<span class="i-annc__category">{{category}}</span>
</span>
</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="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" : "More NEWS" %></a>
</div>
</li>
</ul>
</div>
{{pagination_goes_here}}

View File

@ -56,6 +56,14 @@
},
"thumbnail": "annc_index7_thumbs.png"
},
{
"filename": "annc_index18",
"name": {
"zh_tw": "7.5. 三欄圖文 ( 模組標題, 圖片, 狀態, 日期, 類別, 標題, 副標題 )",
"en": "7.5. 3-Column Standard Image + Text (widget-title, image, status, postdate, category, title, subtitle)"
},
"thumbnail": "annc_index7_thumbs.png"
},
{
"filename": "annc_index8",
"name": {
@ -170,6 +178,14 @@
},
"thumbnail": "annc_widget3_thumbs.png"
},
{
"filename": "annc_widget21",
"name": {
"zh_tw": "21. 內頁三欄圖文 ( 模組標題, 圖片, 狀態, 日期, 類別, 標題, 副標題 )",
"en": "21. 3-Column Standard Image + Text (widget-title, image, status, postdate, category, title, subtitle)"
},
"thumbnail": "annc_widget4_thumbs.png"
},
{
"filename": "annc_widget4",
"name": {

View File

@ -15,6 +15,14 @@
"en" : "2. 3 column List (widget-title, link, link description)"
},
"thumbnail" : "thumb.png"
},
{
"filename" : "web_res_index3",
"name" : {
"zh_tw" : "3. 內頁三欄式列表 ( 模組標題, 連結, 連結說明 )",
"en" : "3. 3 column List (widget-title, link, link description)"
},
"thumbnail" : "thumb.png"
}
],
"widgets" : [

View File

@ -8,7 +8,7 @@
<div class="link-img-wrap{{display_image}}">
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
</div>
<h4>
<h4 >
<span class="link-title">
{{title}}
</span>

View File

@ -0,0 +1,27 @@
<div class="index-link index3 index2">
<h1 class="index-title">
<span>{{page-title}}</span>
</h1>
<ul class="list-unstyled" data-list="web_link" data-level="0">
<li class="index-content col-md-4 col-sm-4">
<a class="index-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
<div class="link-img-wrap{{display_image}}">
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
</div>
<div class="borderwhite">
<h4 >
<span class="link-title">
{{title}}
</span>
<span data-list="statuses" data-level="1">
<span class="label status {{status-class}}">{{status}}</span>
</span>
</h4>
<small class="index-context">{{context}}</small>
</div>
</a>
</li>
</ul>
</div>
{{pagination_goes_here}}