2020-08-13 15:18:26 +08:00
< template >
< footer class = "footer" >
< div class = "container" >
< div class = "footer-main" >
< h4 > { { langConfig . links } } < / h4 >
2020-10-26 17:16:22 +08:00
< a href = "https://github.com/element-plus/element-plus" class = "footer-main-link" target = "_blank" > { { langConfig . repo } } < / a >
< a href = "https://github.com/element-plus/element-plus/releases" class = "footer-main-link" target = "_blank" > { { langConfig . changelog } } < / a >
2021-04-13 17:51:38 +08:00
<!-- < a href = "https://github.com/element-plus/element-plus/blob/dev/FAQ.md" class = "footer-main-link" target = "_blank" > { { langConfig . faq } } < / a > -- >
2020-10-26 17:16:22 +08:00
< a href = "https://github.com/element-plus/element-plus-starter" class = "footer-main-link" target = "_blank" > { { langConfig . starter } } < / a >
2020-08-13 15:18:26 +08:00
< a : href = "'/#/' + lang + '/component/custom-theme'" class = "footer-main-link" target = "_blank" > { { langConfig . theme } } < / a >
< a href = "https://github.com/elemefe/element-react" class = "footer-main-link" target = "_blank" > Element - React < / a >
< a href = "https://github.com/ElemeFE/element-angular" class = "footer-main-link" target = "_blank" > Element - Angular < / a >
< / div >
< div class = "footer-main" >
< h4 > { { langConfig . community } } < / h4 >
< a :href ="gitterLink" class = "footer-main-link" target = "_blank" > { { langConfig . gitter } } < / a >
2021-04-13 17:51:38 +08:00
< a href = "https://github.com/element-plus/element-plus/issues" class = "footer-main-link" target = "_blank" > { { langConfig . feedback } } < / a >
< a : href = "`https://github.com/element-plus/element-plus/blob/dev/.github/CONTRIBUTING.${ lang }.md`" class = "footer-main-link" target = "_blank" > { { langConfig . contribution } } < / a >
< a href = "https://segmentfault.com/t/element-plus" class = "footer-main-link" target = "_blank" > SegmentFault < / a >
<!-- < a href = "https://github.com/ElementUI/awesome-element" class = "footer-main-link" target = "_blank" > Awesome Element < / a > -- >
2020-08-13 15:18:26 +08:00
< / div >
< div class = "footer-social" >
2021-01-03 11:37:55 +08:00
< p class = "footer-social-title" > Element Team < / p >
2020-08-13 15:18:26 +08:00
< el -popover
ref = "weixin"
2020-10-19 13:44:50 +08:00
v - model : visible = "footerVisible"
2020-08-13 15:18:26 +08:00
placement = "top"
width = "120"
popper - class = "footer-popover"
trigger = "hover"
>
2020-10-19 13:44:50 +08:00
< template # reference >
< i class = "doc-icon-weixin elementdoc" > < / i >
< / template >
< template # default >
< div class = "footer-popover-title" > { { langConfig . eleme } } UED < / div >
< img src = "../assets/images/qrcode.png" alt = "" >
< / template >
2020-08-13 15:18:26 +08:00
< / e l - p o p o v e r >
2020-12-01 14:55:35 +08:00
< a href = "https://github.com/element-plus/element-plus" target = "_blank" >
2020-08-13 15:18:26 +08:00
< i class = "doc-icon-github elementdoc" > < / i >
< / a >
< / div >
< / div >
< / footer >
< / template >
< script >
import compoLang from '../i18n/component.json'
2020-10-29 11:52:38 +08:00
import { Language } from '../enums/language'
2020-08-13 15:18:26 +08:00
const version = '1.0.0' // element version
export default {
data ( ) {
return {
version ,
2020-10-19 13:44:50 +08:00
footerVisible : false ,
2020-08-13 15:18:26 +08:00
}
} ,
computed : {
lang ( ) {
2020-10-29 11:52:38 +08:00
return this . $route . path . split ( '/' ) [ 1 ] || Language . CN
2020-08-13 15:18:26 +08:00
} ,
langConfig ( ) {
return compoLang . filter ( config => config . lang === this . lang ) [ 0 ] [ 'footer' ]
} ,
gitterLink ( ) {
2020-10-29 11:52:38 +08:00
return this . lang === Language . CN ? 'https://gitter.im/ElemeFE/element' : 'https://gitter.im/element-en/Lobby'
2020-08-13 15:18:26 +08:00
} ,
} ,
}
< / script >
< style lang = "scss" scoped >
. footer {
background - color : # F7FBFD ;
width : 100 % ;
padding : 40 px 150 px ;
margin - top : - 340 px ;
box - sizing : border - box ;
height : 340 px ;
. container {
box - sizing : border - box ;
width : auto ;
}
. footer - main {
font - size : 0 ;
display : inline - block ;
vertical - align : top ;
margin - right : 110 px ;
h4 {
font - size : 18 px ;
color : # 333 ;
line - height : 1 ;
margin : 0 0 15 px 0 ;
}
. footer - main - link {
display : block ;
margin : 0 ;
line - height : 2 ;
font - size : 14 px ;
color : # 666 ;
& : hover {
color : # 333 ;
}
}
}
. footer - social {
float : right ;
text - align : right ;
. footer - social - title {
color : # 666 ;
font - size : 18 px ;
line - height : 1 ;
margin : 0 0 20 px 0 ;
padding : 0 ;
font - weight : bold ;
}
. elementdoc {
transition : .3 s ;
display : inline - block ;
line - height : 32 px ;
text - align : center ;
color : # c8d6e8 ;
background - color : transparent ;
size : 32 px ;
font - size : 32 px ;
vertical - align : middle ;
margin - right : 20 px ;
& : hover {
transform : scale ( 1.2 ) ;
color : # 8 D99AB ;
}
}
. doc - icon - gitter {
margin - right : 0 ;
}
}
}
. el - popover . footer - popover {
padding : 0 ;
min - width : 120 px ;
line - height : normal ;
box - shadow : 0 0 11 px 0 rgba ( 174 , 187 , 211 , 0.24 ) ;
. footer - popover - title {
border - bottom : solid 1 px # eaeefb ;
height : 30 px ;
line - height : 30 px ;
text - align : center ;
color : # 99 a9bf ;
background - color : # f8f9fe ;
}
img {
size : 100 px ;
margin : 10 px ;
}
}
@ media ( max - width : 1140 px ) {
. footer {
height : auto ;
}
}
@ media ( max - width : 1000 px ) {
. footer - social {
display : none ;
}
}
@ media ( max - width : 768 px ) {
. footer {
. footer - main {
margin - bottom : 30 px ;
}
}
}
< / style >