@ -1,254 +1,253 @@
< template >
<!-- colto - section -- >
< footer class = "footer" >
< div class = "footer-upper-section" >
<!-- logo -- >
< div class = "footer-upper-section-right" >
< div class = "footer-logo d-flex" >
< div style = "width: 190px; height: 91px" >
< img
: src = "appConfig.head_logo"
alt = "logo"
style = "width: 100%; height: 100%; object-fit: contain"
/ >
< div class = "content" >
< div class = "footer-upper-section" >
<!-- logo -- >
< div class = "footer-upper-section-top" >
< div class = "footer-logo" >
< div style = "width: 89px; height: 44px" >
< img
: src = "appConfig.head_logo"
alt = "logo"
style = "width: 100%; height: 100%; object-fit: contain"
/ >
< / div >
< div style = "color: #5B5B5B;font-size: 16px;" > { { appConfig . copyright } } < / div >
< / div >
< / div >
< / div >
< div class = "footer-upper-section-left" >
<!-- service -- >
< div class = "service" v-if ="service.length>0" >
< div class = "item" style = "width: 100%;text-align: left" >
< p
class = "item_p"
style = "
font - size : 20 px ;
color : # 444 ;
font - weight : 700 ;
"
>
{ { $t ( "common.service" ) } }
< / p >
< p class = "foot_p" >
< router -link :to ="service[0].url" > { {
service [ 0 ] . label
} } < / r o u t e r - l i n k >
< / p >
< p class = "foot_p" >
< router -link :to ="service[1].url" > { {
service [ 1 ] . label
} } < / r o u t e r - l i n k >
< / p >
< p class = "foot_p" >
< router -link :to ="service[2].url" > { {
service [ 2 ] . label
} } < / r o u t e r - l i n k >
<!-- < router -link :to ="service[3].url" > { { service [ 3 ] . label } } < / r o u t e r - l i n k > - - >
< / p >
<!-- < p class = "foot_p" >
< router -link :to ="service[3].url" > { {
service [ 3 ] . label
} } < / r o u t e r - l i n k >
< / p > -- >
< div class = "footer-upper-section-lang" >
< button class = "lang_now" @click ="toggleMenu" > {{ nativeLang }} < / button >
< div class = "lang_menu" :class ="showMenu?'show':'hide'" >
< div class = "item" v-for ="(item1, index1) in langList" :key ="index1" >
{ { item1 . label } }
< / div >
< / div >
< / div >
< div class = "footer-upper-section-list" >
<!-- service -- >
< div class = "service" v-if ="service.length>0" >
< div class = "item" style = "width: 100%;text-align: left" >
< p
class = "item_p"
style = "
font - size : 20 px ;
color : # fff ;
"
>
{ { $t ( "common.service" ) } }
< / p >
< p class = "foot_p" >
< router -link :to ="service[0].url" > { {
service [ 0 ] . label
} } < / r o u t e r - l i n k >
< / p >
< p class = "foot_p" >
< router -link :to ="service[1].url" > { {
service [ 1 ] . label
} } < / r o u t e r - l i n k >
< / p >
< p class = "foot_p" >
< router -link :to ="service[2].url" > { {
service [ 2 ] . label
} } < / r o u t e r - l i n k >
<!-- < router -link :to ="service[3].url" > { { service [ 3 ] . label } } < / r o u t e r - l i n k > - - >
< / p >
<!-- < p class = "foot_p" >
< router -link :to ="service[3].url" > { {
service [ 3 ] . label
} } < / r o u t e r - l i n k >
< / p > -- >
< / div >
< / div >
<!-- college -- >
< div class = "college" style = "margin:0 119px;" v-if ="college.length>0" >
< div class = "item item1" style = "width: 100%;text-align: left" >
< p
class = "item_p"
style = "
font - size : 20 px ;
color : # fff ;
"
>
{ { $t ( "common.college" ) } }
< / p >
< p class = "foot_p" >
< router -link :to ="college[0].url" > { {
college [ 0 ] . label
} } < / r o u t e r - l i n k >
< / p >
< p class = "foot_p" >
< router -link :to ="college[1].url" > { {
college [ 1 ] . label
} } < / r o u t e r - l i n k >
< / p >
< p class = "foot_p" >
< router -link :to ="college[2].url" > { {
college [ 2 ] . label
} } < / r o u t e r - l i n k >
< / p >
< p class = "foot_p" >
< router -link :to ="college[3].url" > { {
college [ 3 ] . label
} } < / r o u t e r - l i n k >
< / p >
< / div >
< / div >
<!-- college -- >
< div class = "college" style = "margin:0 119px;" v-if ="college.length>0" >
< div class = "item item1" style = "width: 100%;text-align: left" >
<!-- email -- >
< div class = "item" >
< p
class = "item_p"
style = "
font - size : 20 px ;
color : # 444 ;
font - weight : 700 ;
"
style = "text-align: left; font-size: 20px; color: #fff"
>
{ { $t ( "common.college" ) } }
< / p >
< p class = "foot_p" >
< router -link :to ="college[0].url" > { {
college [ 0 ] . label
} } < / r o u t e r - l i n k >
{ { $t ( "common.contactUs" ) } }
< / p >
< p class = "foot_p" >
< router -link :to ="college[1].url" > { {
college [ 1 ] . label
} } < / r o u t e r - l i n k >
< p class = "foot_p" style = "font-size: 14px" >
{ { $t ( "common.email" ) } } :
< / p >
< p class = "foot_p" >
< router -link :to ="college[2].url" > { {
college [ 2 ] . label
} } < / r o u t e r - l i n k >
< / p >
< p class = "foot_p" >
< router -link :to ="college[3].url" > { {
college [ 3 ] . label
} } < / r o u t e r - l i n k >
< p class = "foot_p" style = "font-size: 14px;" >
{ { email } }
< / p >
< / div >
< / div >
<!-- email -- >
< div class = "item" >
< p
class = "item_p"
style = "text-align: left; font-size: 20px; color: #444"
>
{ { $t ( "common.contactUs" ) } }
< / p >
< p class = "foot_p" style = "font-size: 14px" >
{ { $t ( "common.email" ) } } :
< / p >
< p class = "foot_p" style = "font-size: 14px;" >
{ { email } }
< / p >
< / div >
<!-- < div class = "logo" > -- >
<!-- < img src = "../assets/img/logo1.png" alt = "logo" style = "width:208px;height:68px" / > -- >
<!-- < div style = "width: 90px; height: 91px" >
< img
: src = "appConfig.head_logo"
alt = "logo"
style = "width: 100%; height: 100%; object-fit: contain"
/ >
< / div > -- >
<!-- < div class = "logo" > -- >
<!-- < img src = "../assets/img/logo1.png" alt = "logo" style = "width:208px;height:68px" / > -- >
<!-- < div style = "width: 90px; height: 91px" >
< img
: src = "appConfig.head_logo"
alt = "logo"
style = "width: 100%; height: 100%; object-fit: contain"
/ >
< / div > -- >
<!-- < span > { { $t ( 'common.footerTips1' ) } } < / span > -- >
<!-- < / div > -- >
<!-- < span > { { $t ( 'common.footerTips1' ) } } < / span > -- >
<!-- < p class = "foot_p" > { { $t ( 'common.footerTips2' , { name : appConfig . name } ) } } < / p > -- >
<!-- < p class = "foot_p" > { { $t ( 'appConfig.name' ) } } < / p > -- >
<!-- < p class = "foot_p" > { { $t ( 'common.footerTips3' ) } } < / p > -- >
< / div >
<!-- < span > { { $t ( 'common.footerTips1' ) } } < / span > -- >
<!-- < / div > -- >
<!-- < span > { { $t ( 'common.footerTips1' ) } } < / span > -- >
<!-- < p class = "foot_p" > { { $t ( 'common.footerTips2' , { name : appConfig . name } ) } } < / p > -- >
<!-- < p class = "foot_p" > { { $t ( 'appConfig.name' ) } } < / p > -- >
<!-- < p class = "foot_p" > { { $t ( 'common.footerTips3' ) } } < / p > -- >
< / div >
<!-- email -- >
<!-- < div class = "item" style = "width:30%;margin-top: 74px;" >
< p class = "item_p" style = "text-align: start; font-size:16px;" > { { $t ( "common.contactUs" ) } } < / p >
< p class = "foot_p" style = "text-align: start; font-size:16px;" >
{ { $t ( "common.email" ) } } : { { email } }
< / p >
< div class = "icon_foot" >
< img src = "../assets/img/chat.png" >
< div class = "icon_img" v-for ="(item,index) in list" :key ="item" >
< img :src ="item.src" / >
< / div >
<!-- email -- >
<!-- < div class = "item" style = "width:30%;margin-top: 74px;" >
< p class = "item_p" style = "text-align: start; font-size:16px;" > { { $t ( "common.contactUs" ) } } < / p >
< p class = "foot_p" style = "text-align: start; font-size:16px;" >
{ { $t ( "common.email" ) } } : { { email } }
< / p >
< div class = "icon_foot" >
< img src = "../assets/img/chat.png" >
< div class = "icon_img" v-for ="(item,index) in list" :key ="item" >
< img :src ="item.src" / >
< / div >
< / div >
< p class = "foot_p" style = "width:100%" >
{ { email } }
< / p >
< / div > -- >
<!-- < div class = "container" >
< div class = "row" > -- >
<!-- < div class = "col-lg-2 col-md-3 mb-4" >
< div class = "footer-logo" >
< a href = "#" >
< img :src ="logo.imgurl" alt = "img" class = "img-responsive" / >
< img :src ="appConfig.foot_logo" alt = "logo" / >
< / a >
< / div >
< p class = "foot_p" style = "width:100%" >
{ { email } }
< / p >
< / div > -- >
<!-- < div class = "container" >
< div class = "row" > -- >
<!-- < div class = "col-lg-2 col-md-3 mb-4" >
< div class = "footer-logo" >
< a href = "#" >
< img :src ="logo.imgurl" alt = "img" class = "img-responsive" / >
< img :src ="appConfig.foot_logo" alt = "logo" / >
< / a >
< / div >
< / div > -- >
<!-- 服务列表 -- >
<!-- < div class = "col-lg-1 col-md-3 mb-4" >
< div class = "footer-info-list" >
< h4 > { { $t ( "common.service" ) } } < / h4 >
< ul >
< li v-for ="(item, index) in service" :key ="index" >
< router -link :to ="item.url" > { { item . label } } < / r o u t e r - l i n k >
< / li >
< / ul >
< / div >
< / div > -- >
<!-- 学院列表 -- >
<!-- < div class = "col-lg-1 col-md-3 mb-4" >
< div class = "footer-info-list" >
< h4 > { { $t ( "common.college" ) } } < / h4 >
< ul >
< li v-for ="item in college" :key="item.id" >
< router -link :to ="item.url" > { { item . label } } < / r o u t e r - l i n k >
< / li >
< / ul >
< / div >
< / div > -- >
<!-- 联系我们 -- >
<!-- < div class = "col-lg-2 col-md-6" >
< div class = "footer-info-list" >
< h4 > { { $t ( 'common.contactUs' ) } } < / h4 >
< ul class = "contact-info" >
< li >
{ { $t ( "common.email" ) } } :
< span > { { email } } < / span >
< / li >
< li >
Phone : < span > { { contactinfo . mobile } } < / span >
< / li >
< / ul >
< ul class = "social-style-two" >
< li >
< a href = "#" >
< i class = "fab fa-facebook-f" > < / i >
< / a >
< / li >
< li >
< a href = "#" >
< i class = "fab fa-twitter" > < / i >
< / a >
< / li >
< li >
< a href = "#" >
< i class = "fab fa-google-plus-g" > < / i >
< / a >
< / li >
< li >
< a href = "#" >
< i class = "fab fa-github" > < / i >
< / a >
< / li >
< li >
< a href = "#" >
< i class = "fab fa-linkedin-in" > < / i >
< / a >
< / li >
< / ul >
< / div >
< / div > -- >
<!-- < div class = "col-lg-4 col-md-6 border-left" >
< div class = "pl-2 " >
< div class = "mb-2" >
{ { $t ( 'common.footerTips1' ) } }
< / div > -- >
<!-- 服务列表 -- >
<!-- < div class = "col-lg-1 col-md-3 mb-4" >
< div class = "footer-info-list" >
< h4 > { { $t ( "common.service" ) } } < / h4 >
< ul >
< li v-for ="(item, index) in service" :key ="index" >
< router -link :to ="item.url" > { { item . label } } < / r o u t e r - l i n k >
< / li >
< / ul >
< / div >
< div class = "mb-2" > { { $t ( 'common.footerTips2' , { name : appConfig . name } ) } } < / div >
< div class = "mb-2" > { { $t ( 'common.footerTips3' ) } } < / div >
< / div >
< / div > -- >
<!-- < / div > -- >
<!-- < / div > -- >
< / div >
< div class = "footer-bottom" >
<!-- 版权信息 -- >
< div class = "container" >
<!-- < div class = "footer-bottom-wrap" >
& copy ;
< div class = "copyright-text text-center" >
{ { appConfig . copyright } }
< / div >
< / div > -- >
< / div > -- >
<!-- 学院列表 -- >
<!-- < div class = "col-lg-1 col-md-3 mb-4" >
< div class = "footer-info-list" >
< h4 > { { $t ( "common.college" ) } } < / h4 >
< ul >
< li v-for ="item in college" :key="item.id" >
< router -link :to ="item.url" > { { item . label } } < / r o u t e r - l i n k >
< / li >
< / ul >
< / div >
< / div > -- >
<!-- 联系我们 -- >
<!-- < div class = "col-lg-2 col-md-6" >
< div class = "footer-info-list" >
< h4 > { { $t ( 'common.contactUs' ) } } < / h4 >
< ul class = "contact-info" >
< li >
{ { $t ( "common.email" ) } } :
< span > { { email } } < / span >
< / li >
< li >
Phone : < span > { { contactinfo . mobile } } < / span >
< / li >
< / ul >
< ul class = "social-style-two" >
< li >
< a href = "#" >
< i class = "fab fa-facebook-f" > < / i >
< / a >
< / li >
< li >
< a href = "#" >
< i class = "fab fa-twitter" > < / i >
< / a >
< / li >
< li >
< a href = "#" >
< i class = "fab fa-google-plus-g" > < / i >
< / a >
< / li >
< li >
< a href = "#" >
< i class = "fab fa-github" > < / i >
< / a >
< / li >
< li >
< a href = "#" >
< i class = "fab fa-linkedin-in" > < / i >
< / a >
< / li >
< / ul >
< / div >
< / div > -- >
<!-- < div class = "col-lg-4 col-md-6 border-left" >
< div class = "pl-2 " >
< div class = "mb-2" >
{ { $t ( 'common.footerTips1' ) } }
< / div >
< div class = "mb-2" > { { $t ( 'common.footerTips2' , { name : appConfig . name } ) } } < / div >
< div class = "mb-2" > { { $t ( 'common.footerTips3' ) } } < / div >
< div class = "copyright-text text-center" >
{ { appConfig . copyright } }
< / div >
< / div >
< / div > -- >
<!-- < / div > -- >
<!-- < / div > -- >
< / div >
< div class = "footer-right" >
< div style = "font-size: 20px;" > { { $t ( "homeNewText.cc1" ) } } < / div >
< div class = "jump_btn" > { { $t ( "homeNewText.cc2" ) } } < / div >
< img src = "" alt = "" style = "width: 120px;height: 120px;" >
< div style = "font-size: 16px; color: #9c9c9c;margin-top: 12px;" > { { $t ( "homeNewText.cc3" ) } } < / div >
< / div >
< / div >
< / footer >
@ -276,14 +275,92 @@ export default {
{ src : "https://www.rsncoin.com/static/flag/vk.png" } ,
{ src : "https://www.rsncoin.com/static/flag/youtube.jpg" } ,
] ,
langList : [
/ / {
/ / v a l u e : " c n " , / / z h - C N
/ / l a b e l : " 简 体 中 文 "
/ / } ,
{
value : "en" ,
label : "English" ,
url : require ( "../assets/img/en.jpg" ) ,
} ,
{
value : "kor" ,
label : "한국어" ,
url : require ( "../assets/img/kor.jpg" ) ,
} ,
{
value : "de" ,
label : "Deutsch" ,
url : require ( "../assets/img/de.jpg" ) ,
} ,
{
value : "fra" ,
label : "Français" ,
url : require ( "../assets/img/fra.jpg" ) ,
} ,
{
value : "spa" ,
label : "Español" ,
url : require ( "../assets/img/spa.jpg" ) ,
} ,
{
value : "it" ,
label : "Italiano" ,
url : require ( "../assets/img/it.jpg" ) ,
} ,
{
value : "jp" ,
label : "日本語" ,
url : require ( "../assets/img/jp.jpg" ) ,
} ,
{
value : "pt" ,
label : "Português" ,
url : require ( "../assets/img/pt.jpg" ) ,
} ,
{
value : "tr" ,
label : "Turkey" ,
url : require ( "../assets/img/tr.jpg" ) ,
} ,
{
value : "tw" , / / z h - T W
label : "繁体中文" ,
url : require ( "../assets/img/tw.jpg" ) ,
} ,
] ,
showMenu : false
} ;
} ,
computed : {
... mapState ( {
appConfig : "appConfig" ,
} ) ,
/ / 当 前 语 言
nativeLang ( ) {
let UALang ;
/ / 检 测 中 文 简 体 和 翻 译
/ / i f ( n a v i g a t o r . l a n g u a g e . s t a r t s W i t h ( " z h " ) ) {
/ / U A L a n g = _ . t r i m S t a r t ( n a v i g a t o r . l a n g u a g e , " z h - " ) . t o L o w e r C a s e ( ) ;
/ / } e l s e {
UALang = "en" ; / / 其 余 英 文
/ / }
let lang = localStorage . lang || UALang ;
if ( localStorage . getItem ( "lang" ) == null ) {
/ / l e t l o c a l S t o r a g e . g e t I t e m ( " l a n g " ) = ' e n ' ;
}
this . langer = require ( "../assets/img/" + lang + ".jpg" ) ;
return this . langList . find ( ( item ) => item . value == lang ) . label ;
} ,
} ,
methods : {
toggleMenu ( e ) {
e . stopPropagation ( ) ;
this . showMenu = ! this . showMenu ;
} ,
getCollegeLinks ( ) {
College . getCategoryList ( )
. then ( ( list ) => {
@ -328,101 +405,150 @@ export default {
< style scoped lang = "scss" >
. footer {
background - color : # 000 ;
background - color : # 121212 ;
border - top : none ;
. footer - upper - section {
padding : 0 ;
display : flex ;
align - items : center ;
height : 324 px ;
/ / m a r g i n - l e f t : 2 3 3 p x ;
justify - content : center ;
padding : 0 400 px ;
/ / b a c k g r o u n d - c o l o r : # 0 0 0 ;
. footer - upper - section - left {
. content {
display : flex ;
justify - content : space - between ;
margin - left : 100 px ;
}
. footer - upper - section - right {
. footer - logo {
align - items : center ;
justify - content : start ;
}
align - items : center ;
width : 1200 px ;
height : 560 px ;
margin : 0 px auto ;
}
. footer - upper - section {
padding : 0 px ;
. footer - upper - section - lang {
width : 182 px ; height : 49 px ;
border - radius : 11 px ;
border : 1 px solid # fff ;
font - size : 16 px ;
margin : 37 px 0 px 31 px ;
position : relative ;
. lang_now {
display : block ;
text - align : center ;
width : 100 % ;
line - height : 45 px ;
color : # fff ;
background - color : transparent ;
outline : none ;
border : none ;
position : relative ;
& : : before {
content : '' ;
position : absolute ;
width : 24 px ;
height : 24 px ;
background - image : url ( "../assets/img/home/global_grey.png" ) ;
background - size : 100 % ;
left : 24 px ;
top : 12 px ;
}
& : : after {
content : '' ;
position : absolute ;
width : 8 px ;
height : 8 px ;
border - top : 1 px solid transparent ;
border - left : 1 px solid # 999 ;
border - right : 1 px solid transparent ;
border - bottom : 1 px solid # 999 ;
transform : rotate ( - 45 deg ) ;
right : 30 px ;
top : 18 px ;
}
}
. lang_menu {
position : absolute ;
width : 182 px ;
height : 220 px ;
background - color : # fff ;
border - radius : 10 px ;
overflow : scroll ;
color : # 101010 ;
& : : - webkit - scrollbar { width : 0 ; height : 0 ; background - color : transparent ; }
& : : - webkit - scrollbar - track { background - color : transparent ; }
& : : - webkit - scrollbar - thumb { background - color : transparent ; }
. item {
padding : 5 px 10 px ;
}
& . show {
display : block ;
}
& . hide {
display : none ;
}
}
}
. footer - upper - section - list {
display : flex ;
justify - content : space - between ;
}
. footer - upper - section - top {
. footer - logo {
}
}
. item_left {
width : 454 px ;
/ / m a r g i n - r i g h t : 3 0 0 p x ;
. logo {
display : flex ;
align - items : center ;
color : # 172636 ;
justify - content : space - between ;
width : 100 % ;
font - size : 16 px ;
}
}
. item_left {
width : 454 px ;
/ / m a r g i n - r i g h t : 3 0 0 p x ;
. logo {
display : flex ;
align - items : center ;
color : # 172636 ;
justify - content : space - between ;
width : 100 % ;
font - size : 16 px ;
}
}
/ / . i t e m _ r i g h t {
/ / d i s p l a y : f l e x ;
/ / h e i g h t : 9 9 p x ;
/ / . i t e m {
/ / / / b o r d e r - r i g h t : 1 p x s o l i d # 3 0 3 D 4 B ;
/ / m a r g i n - r i g h t : 8 0 p x ;
/ / p a d d i n g : 0 1 5 p x ;
/ / . i t e m _ p {
/ / }
/ / }
/ / . i t e m 1 {
/ / t e x t - a l i g n : c e n t e r ;
/ / }
/ / . i t e m 2 {
/ / p a d d i n g - l e f t : 6 4 p x ;
/ / }
/ / . i t e m : l a s t - c h i l d {
/ / b o r d e r : n o n e ;
/ / }
/ / }
}
. footer - bottom {
width : 100 % ;
height : 57 px ;
/ / b a c k g r o u n d - c o l o r : r g b a ( 0 , 0 , 0 , 1 ) ;
text - align : center ;
border : 1 px solid rgba ( 46 , 46 , 46 , 1 ) ;
. container {
width : 100 % ;
/ / h e i g h t : 5 7 p x ;
margin : 0 auto ;
. copyright - text {
color : # 444 ;
. footer - right {
display : flex ;
flex - direction : column ;
align - items : center ;
. jump_btn {
display : inline - block ;
min - width : 200 px ;
height : 56 px ;
line - height : 56 px ;
text - align : center ;
color : # 101010 ;
background - color : # fff ;
border - radius : 50 px ;
font - size : 20 px ;
padding : 0 px 20 px ;
box - sizing : border - box ;
margin : 46 px 0 px 42 px ;
}
}
}
}
. foot_p {
color : # 797979 ;
font - size : 14 px ;
color : # b5b5b5 ;
font - size : 16 px ;
margin : 0 ;
a : hover {
color : # 797979 ;
color : # b5b5b5 ;
}
a : visited {
color : # 797979 ;
color : # b5b5b5 ;
}
}
