chiu
/
asia-home-b-en
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated

This commit is contained in:
rulingcom 2022-12-07 15:01:53 +08:00
parent 289468ac6f
commit f5fc124a20
5 changed files with 216 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
assets/javascripts/app.js
View File

@ -11,6 +11,15 @@
this.replaceWith(new_html); this.replaceWith(new_html);
} }
}); });
function fix_layout(){
window.has_topest_banner = ($('[data-pp="300"] .w-ad-banner').length != 0);
if (!window.has_topest_banner) {
$('.downIcon').css('display','none')
}else{
$("#onesection").css("margin", "0");
$('.layout-content-inner .row, .layout-content-inner .row > [class*="col-"]').css("padding", "0");
}
}
function initdata1 () { function initdata1 () {
window.temp_scrollY = window.pageYOffset; window.temp_scrollY = window.pageYOffset;
window.temp_scrollX = window.pageXOffset; window.temp_scrollX = window.pageXOffset;
@ -18,20 +27,17 @@
window.temp_scrollY = document.documentElement.scrollTop; window.temp_scrollY = document.documentElement.scrollTop;
window.temp_scrollX = document.documentElement.scrollLeft; window.temp_scrollX = document.documentElement.scrollLeft;
} }
if ($('.header-banner').html().trim() == "") {
$('.downIcon').css('display','none')
}
// if (location.href.search('editmode') == -1 && document.getElementsByClassName('asideright').length != 0) { // if (location.href.search('editmode') == -1 && document.getElementsByClassName('asideright').length != 0) {
if ( $('.header-banner').length != 0) { if ( $('.header-banner').length != 0 ) {
$('.layout-header').css('height', ''); $('.layout-header').css('height', '');
var scrollTop = $(window).scrollTop(); var scrollTop = $(window).scrollTop();
if (scrollTop>5) { /* 要滑動到選單的距離 */ if (!window.has_topest_banner || scrollTop>5) { /* 要滑動到選單的距離 */
if (parseInt($('.layout-content').css('margin-top'))==0 && $('.layout-content.topcontent').length != 0 && $('.layout-content.topcontent').offset().top<400){ if (parseInt($('.layout-content').css('margin-top'))==0 && $('.layout-content.topcontent').length != 0 && $('.layout-content.topcontent').offset().top<400){
$('.layout-content').css('margin-top',$('.kenjohn').height()-$('#orbit-bar').height()); $('.layout-content').css('margin-top',$('.kenjohn').height()-$('#orbit-bar').height());
} }
$('.kenjohn').addClass('navFixed').removeClass('navRel'); /* 幫選單加上固定效果 */ $('.kenjohn').addClass('navFixed').removeClass('navRel'); /* 幫選單加上固定效果 */
} else { } else {
if ($('.header-banner').html().trim() == "") { if (!window.has_topest_banner) {
$('.kenjohn').removeClass('navFixed').addClass('navRel'); $('.kenjohn').removeClass('navFixed').addClass('navRel');
}else{ }else{
$('.kenjohn').removeClass('navRel').removeClass('navFixed'); /* 移除選單固定效果 */ $('.kenjohn').removeClass('navRel').removeClass('navFixed'); /* 移除選單固定效果 */
@ -450,6 +456,7 @@
} }
// 在所有的頁面(包含首頁)執行下面這幾個函數 // 在所有的頁面(包含首頁)執行下面這幾個函數
fix_layout();
initdata1(); initdata1();
orbit.sitemenuDropdown(); orbit.sitemenuDropdown();
orbit.goBackTop('top', 800); orbit.goBackTop('top', 800);

387
assets/stylesheets/template/layout/content.scss
View File

@ -2,89 +2,85 @@
@import "../initial"; @import "../initial";
body{ body{
@media (min-width: 1150px){ @media (min-width: 1150px){
.black-screen-social-window.reactable{ .black-screen-social-window.reactable{
.content-social .social_wrap i, .content-social .social_wrap img { .content-social .social_wrap i, .content-social .social_wrap img {
width: 1.2em; width: 1.2em;
font-size: 2em; font-size: 2em;
} }
.content-social .social_wrap>div{ .content-social .social_wrap>div{
width: 3.2em; width: 3.2em;
} }
} }
} }
} }
.downIcon { .downIcon {
position: absolute;
left: 50%;
bottom: 15%;
//bottom: 10%;
z-index: 2;
color: #fff;
span {
position: absolute; position: absolute;
top: 0;
left: 50%; left: 50%;
bottom: 15%; width: 46px;
//bottom: 10%; height: 46px;
z-index: 2; margin-left: -23px;
color: #fff; border: 2px solid #fff;
border-radius: 100%;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
box-sizing: border-box;
}
span { a:hover span {
position: absolute; width: 60px;
top: 0; height: 60px;
left: 50%; margin-left: -30px;
width: 46px; top: -7px;
height: 46px; border-width: 4px;
margin-left: -23px; border-color: #facf3d;
border: 2px solid #fff; }
border-radius: 100%;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
box-sizing: border-box;
}
a:hover span {
width: 60px;
height: 60px;
margin-left: -30px;
top: -7px;
border-width: 4px;
border-color: #facf3d;
}
} }
.downIcon a:hover span::after { .downIcon a:hover span::after {
width: 21px; width: 21px;
height: 21px; height: 21px;
border-left-width: 4px; border-left-width: 4px;
border-bottom-width: 4px; border-bottom-width: 4px;
margin: -14px 0 0 -10px; margin: -14px 0 0 -10px;
border-color: #facf3d; border-color: #facf3d;
} }
.downIcon a span::after{ .downIcon a span::after{
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
content: ''; content: '';
width: 16px; width: 16px;
height: 16px; height: 16px;
margin: -12px 0 0 -8px; margin: -12px 0 0 -8px;
border-left: 2px solid #fff; border-left: 2px solid #fff;
border-bottom: 2px solid #fff; border-bottom: 2px solid #fff;
-webkit-transform: rotate( -webkit-transform: rotate(-45deg);
-45deg transform: rotate(-45deg);
); box-sizing: border-box;
transform: rotate(
-45deg
);
box-sizing: border-box;
} }
.downIcon a span::before{ .downIcon a span::before{
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
content: ''; content: '';
width: 44px; width: 44px;
height: 44px; height: 44px;
box-shadow: 0 0 0 0 #ffffff1a; box-shadow: 0 0 0 0 #ffffff1a;
border-radius: 100%; border-radius: 100%;
behavior: url("/assets/ie_support/PIE2/PIE.htc"); behavior: url("/assets/ie_support/PIE2/PIE.htc");
opacity: 0; opacity: 0;
-webkit-animation: sdb03 3s infinite; -webkit-animation: sdb03 3s infinite;
animation: sdb03 3s infinite; animation: sdb03 3s infinite;
box-sizing: border-box; box-sizing: border-box;
} }
@-webkit-keyframes sdb03 { @-webkit-keyframes sdb03 {
0% { 0% {
@ -142,58 +138,59 @@ body{
@extend .response-pagecontainer; @extend .response-pagecontainer;
} }
} }
#onesection{
margin: 0 0.9375em;
}
.bannertwo{ .bannertwo{
padding: 0;
@media(min-width:1024px){ @media(min-width:1024px){
padding: 0; .w-ba-banner{
.w-ba-banner{ display: flex;
display: flex; flex-direction: row-reverse;
flex-direction: row-reverse; .w-ba-banner__wrap{
.w-ba-banner__wrap{ flex: 0 0 65%;
flex: 0 0 65%; }
}
.ad-overlay{
position: relative;
background: none;
}
}
}
@media(min-width:800px){
.ad-overlay{
p{
margin-top: 4em;
}
}
}
@media(min-width:768px){
.ad-overlay{ .ad-overlay{
p{ position: relative;
margin-top: 1em; background: none;
}
}
.ba-banner-widget-1 .w-ba-banner__caption{
padding: 3em;
} }
}
}
@media(min-width:800px){
.ad-overlay{
p{
margin-top: 4em;
}
}
}
@media(min-width:768px){
.ad-overlay{
p{
margin-top: 1em;
} }
.button-mid .prev-button{
background: none;
} }
.button-mid .next-button{ .ba-banner-widget-1 .w-ba-banner__caption{
background: none; padding: 3em;
} }
}
.button-mid .prev-button{
background: none;
}
.button-mid .next-button{
background: none;
}
} }
.video-banner{ .video-banner{
max-width: 850px; max-width: 850px;
margin: auto; margin: auto;
@media(min-width:1200px){ @media(min-width:1200px){
margin-top: -20em; margin-top: -20em;
} }
@media only screen and (max-width: 1200px) and (min-width: 1024px){ @media only screen and (max-width: 1200px) and (min-width: 1024px){
margin-top: -17em; margin-top: -17em;
} }
@media only screen and (max-width: 1024px) and(min-width:789px){ @media only screen and (max-width: 1024px) and(min-width:789px){
margin-top: -9em; margin-top: -9em;
} }
img{ img{
border-radius: 20px; border-radius: 20px;
@ -234,7 +231,7 @@ body{
// } // }
.leftannounce{ .leftannounce{
@media(max-width: 769px){ @media(max-width: 769px){
margin-bottom: 1em; margin-bottom: 1em;
} }
} }
.subword{ .subword{
@ -255,8 +252,8 @@ body{
display: flex; display: flex;
padding: 2em; padding: 2em;
@media(max-width: 1024px){ @media(max-width: 1024px){
flex-wrap: wrap; flex-wrap: wrap;
padding: 0 15px; padding: 0 15px;
} }
} }
.fontgroup{ .fontgroup{
@ -265,7 +262,7 @@ body{
flex-wrap: wrap; flex-wrap: wrap;
padding: 2em; padding: 2em;
@media(max-width: $screen-xs){ @media(max-width: $screen-xs){
flex-wrap: wrap; flex-wrap: wrap;
} }
} }
.iconbox{ .iconbox{
@ -295,8 +292,8 @@ body{
object-fit: cover; object-fit: cover;
} }
.box .w-ba-banner__slide, .box .w-ba-banner__slide a { .box .w-ba-banner__slide, .box .w-ba-banner__slide a {
height: 100%; height: 100%;
display: block; display: block;
} }
.box{ .box{
flex: 3; flex: 3;
@ -325,9 +322,9 @@ body{
} }
} }
.layout-content-box3{ .layout-content-box3{
@media(min-width: $screen-xs){ @media(min-width: $screen-xs){
top: -9em; top: -9em;
} }
} }
.score{ .score{
.scorebutton{ .scorebutton{
@ -343,25 +340,22 @@ body{
.swiper-banner{ .swiper-banner{
.ba-banner-widget-1 { .ba-banner-widget-1 {
.ad-overlay{ .ad-overlay{
background-image: none!important; background-image: none!important;
} }
ul.button-mid .next-button{ ul.button-mid .next-button{
color: #E4002B!important; color: #E4002B!important;
background: none!important; background: none!important;
} }
ul.button-mid .prev-button{ ul.button-mid .prev-button{
color: #E4002B!important; color: #E4002B!important;
background: none!important; background: none!important;
} }
} }
} }
.bannertwo{ .bannertwo{
@media(min-width:1024px){ @media(min-width:1024px){
background-color: #72bcad; background-color: #72bcad;
} }
@media(max-width: $screen-sm){
padding: 0;
}
} }
.onesection{ .onesection{
color: #fff; color: #fff;
@ -524,20 +518,20 @@ body{
text-shadow:none; text-shadow:none;
} }
.dropdowns{ .dropdowns{
justify-content: center; justify-content: center;
} }
.kenjohn { .kenjohn {
//flex-wrap:wrap-reverse; //flex-wrap:wrap-reverse;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.navbar-header{ .navbar-header{
display: flex!important;
}
.header-nav{
@media(min-width: 480px){
display: flex!important; display: flex!important;
} }
.header-nav{ }
@media(min-width: 480px){
display: flex!important;
}
}
.layout-header .header-nav a{ .layout-header .header-nav a{
text-shadow: none; text-shadow: none;
} }
@ -601,68 +595,67 @@ body{
.site-logo{ .site-logo{
width:100%!important; width:100%!important;
} }
@media(min-width:1900px){ @media(min-width:1900px){
width: 225px; width: 225px;
margin-top: -12px; margin-top: -12px;
} }
@media screen and (min-width:1025px) and (max-width:1899px){ @media screen and (min-width:1025px) and (max-width:1899px){
width: 181px; width: 181px;
margin-top: -3px; margin-top: -3px;
} }
@media screen and (min-width:769px) and (max-width:1025px){ @media screen and (min-width:769px) and (max-width:1025px){
width: 150px; width: 150px;
margin-top: -5px; margin-top: -5px;
} }
@media screen and (min-width:$screen-xs) and (max-width:769px){ @media screen and (min-width:$screen-xs) and (max-width:769px){
width: 146px !important; width: 146px !important;
} }
@media screen and (max-width:$screen-xs){ @media screen and (max-width:$screen-xs){
width: 110px !important; width: 110px !important;
margin-top: 3px; margin-top: 3px;
} }
}
.navbar-brand:nth-child(2){
@media(min-width:1900px){
width: 330px!important;
margin-top: -14px;
}
@media screen and (min-width:1025px) and (max-width:1899px){
width: 261px!important;
margin-top: -5px;
}
@media screen and (min-width:769px) and (max-width:1025px){
width: 200px!important;
}
@media screen and (max-width:768px){
width: 140px!important;
}
}
.modules-menu .modules-menu-level-0 > li > a{
color: #333;
text-shadow: none;
}
.header-nav{
background: #e7e8ea;
padding:0.5em !important;
}
.header-nav a{
text-shadow:none;
color: #333333;
}
.navbar-toggle .icon-bar{
background-color: #333;
box-shadow: none;
}
.navbar-header .navbar-brand{
@media(max-width: 769px){
display: block!important;
}
}
.navbar-toggle{
position: absolute;
right: 0;
} }
.navbar-brand:nth-child(2){
@media(min-width:1900px){
width: 330px!important;
margin-top: -14px;
}
@media screen and (min-width:1025px) and (max-width:1899px){
width: 261px!important;
margin-top: -5px;
}
@media screen and (min-width:769px) and (max-width:1025px){
width: 200px!important;
}
@media screen and (max-width:768px){
width: 140px!important;
}
}
.modules-menu .modules-menu-level-0 > li > a{
color: #333;
text-shadow: none;
}
.header-nav{
background: #e7e8ea;
padding:0.5em !important;
}
.header-nav a{
text-shadow:none;
color: #333333;
}
.navbar-toggle .icon-bar{
background-color: #333;
box-shadow: none;
}
.navbar-header .navbar-brand{
@media(max-width: 769px){
display: block!important;
}
}
.navbar-toggle{
position: absolute;
right: 0;
}
} }
} }
@media(max-width:768px){ @media(max-width:768px){

5
assets/stylesheets/template/modules/menu.scss
View File

@ -1,6 +1,11 @@
@charset "utf-8"; @charset "utf-8";
@import "../initial"; @import "../initial";
@media (min-width: $screen-sm) {
.modules-menu.collapse.in .social_wrap{
justify-content: initial;
}
}
.collapse{ .collapse{
@media(min-width: 769px){ @media(min-width: 769px){
width:100%; width:100%;

3
assets/stylesheets/template/template.scss
View File

@ -22,6 +22,9 @@
//RWD //RWD
@import "RWD"; @import "RWD";
[data-pp="8"] [data-subpart-id]:last-child {
margin-bottom: 2em;
}
div.weather_widget1{ div.weather_widget1{
background: unset; background: unset;
} }

6
home/index.html.erb
View File

@ -24,7 +24,9 @@
<section class="layout-content-box box " data-pp="4"></section> <section class="layout-content-box box " data-pp="4"></section>
<section class="layout-content-box box " data-pp="1"></section> <section class="layout-content-box box " data-pp="1"></section>
</div> </div>
<div class="row">
<section class="layout-content-box col-sm-12" data-pp="9"></section>
</div>
<div class="colorbox"> <div class="colorbox">
<div class=" row"> <div class=" row">
<section class="extra-box col-sm-12" data-pp="33"></section> <section class="extra-box col-sm-12" data-pp="33"></section>
@ -32,6 +34,8 @@
</div> </div>
<div class="layout-content-box2 colorbox container row"> <div class="layout-content-box2 colorbox container row">
<section class="body-banner line" data-pp="8"></section> <section class="body-banner line" data-pp="8"></section>
<section class="body-banner" data-pp="16"></section>
<section class="body-banner line" data-pp="17"></section>
<div class="column row image-carousel"> <div class="column row image-carousel">
<div class="extra-box col-sm-12" data-pp="37"></div> <div class="extra-box col-sm-12" data-pp="37"></div>
<div class="extra-box col-sm-12" data-pp="38"></div> <div class="extra-box col-sm-12" data-pp="38"></div>