|
|
|
@ -1,24 +1,24 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div class="social-container"> |
|
|
|
<div class="social-container"> |
|
|
|
<div class="box" @click="handleClick('github')"> |
|
|
|
<div @click="handleClick('github')"> |
|
|
|
<span class="container" :style="{backgroundColor:'#61676D'}"> |
|
|
|
<span class="container" :style="{backgroundColor:'#61676D'}"> |
|
|
|
<i icon-class="github" class="iconfont icongithub"></i> |
|
|
|
<i icon-class="github" class="iconfont icongithub"></i> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<p class="title">{{$t('login.github')}}</p> |
|
|
|
<p class="title">{{$t('login.github')}}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="box" @click="handleClick('gitee')"> |
|
|
|
<div @click="handleClick('gitee')"> |
|
|
|
<span class="container" :style="{backgroundColor:'#c35152'}"> |
|
|
|
<span class="container" :style="{backgroundColor:'#c35152'}"> |
|
|
|
<i icon-class="gitee" class="iconfont icongitee2"></i> |
|
|
|
<i icon-class="gitee" class="iconfont icongitee2"></i> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<p class="title">{{$t('login.gitee')}}</p> |
|
|
|
<p class="title">{{$t('login.gitee')}}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="box" @click="handleClick('wechat_open')"> |
|
|
|
<div @click="handleClick('wechat_open')"> |
|
|
|
<span class="container" :style="{backgroundColor:'#8dc349'}"> |
|
|
|
<span class="container" :style="{backgroundColor:'#8dc349'}"> |
|
|
|
<i icon-class="wechat" class="iconfont icon-weixin"/> |
|
|
|
<i icon-class="wechat" class="iconfont icon-weixin"/> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<p class="title">{{$t('login.wechat')}}</p> |
|
|
|
<p class="title">{{$t('login.wechat')}}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="box" @click="handleClick('qq')"> |
|
|
|
<div @click="handleClick('qq')"> |
|
|
|
<span class="container" :style="{backgroundColor:'#6ba2d6'}"> |
|
|
|
<span class="container" :style="{backgroundColor:'#6ba2d6'}"> |
|
|
|
<i icon-class="qq" class="iconfont icon-qq"/> |
|
|
|
<i icon-class="qq" class="iconfont icon-qq"/> |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
@ -46,15 +46,14 @@ |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-around; |
|
|
|
justify-content: space-around; |
|
|
|
.box { |
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.iconfont { |
|
|
|
.iconfont { |
|
|
|
color: #fff; |
|
|
|
color: #fff; |
|
|
|
font-size: 30px; |
|
|
|
font-size: 30px; |
|
|
|
} |
|
|
|
} |
|
|
|
.container { |
|
|
|
.container { |
|
|
|
$height: 50px; |
|
|
|
$height: 50px; |
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
display: inline-block; |
|
|
|
display: inline-block; |
|
|
|
width: $height; |
|
|
|
width: $height; |
|
|
|
height: $height; |
|
|
|
height: $height; |
|
|
|
|