|
|
@@ -376,13 +376,13 @@ export default Vue.extend({
|
|
|
<div class="third-login">
|
|
|
<div class="third-title">第三方登录/注册：</div>
|
|
|
<div class="button-list">
|
|
|
- <div class="third-button" @click="openThirdLogin('wechat')">
|
|
|
+ <div class="third-button wechat" @click="openThirdLogin('wechat')">
|
|
|
<img class="icon" src="/static/image/icon/wechat.png">
|
|
|
</div>
|
|
|
- <div class="third-button" @click="openThirdLogin('google')">
|
|
|
+ <div class="third-button google" @click="openThirdLogin('google')">
|
|
|
<img class="icon" src="/static/image/icon/google.png">
|
|
|
</div>
|
|
|
- <div class="third-button" @click="openThirdLogin('linkin')">
|
|
|
+ <div class="third-button linkin" @click="openThirdLogin('linkin')">
|
|
|
<img class="icon" src="/static/image/icon/linkin.png">
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -560,9 +560,10 @@ export default Vue.extend({
|
|
|
display: flex;
|
|
|
gap: 16px;
|
|
|
.third-button{
|
|
|
+ transition-duration: 300ms;
|
|
|
cursor: pointer;
|
|
|
- width: 46px;
|
|
|
- height: 46px;
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
border-radius: 50%;
|
|
|
background-color: #eeeeee;
|
|
|
display: flex;
|
|
|
@@ -570,16 +571,25 @@ export default Vue.extend({
|
|
|
justify-content: center;
|
|
|
.icon{
|
|
|
transition-duration: 300ms;
|
|
|
- filter: brightness(0) opacity(0.5);
|
|
|
width: 22px;
|
|
|
height: 22px;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
&:hover{
|
|
|
- background-color: #f4f4f4;
|
|
|
+ &.wechat{
|
|
|
+ background-color: #0E932E;
|
|
|
+ box-shadow: 0 0 0 1px white,0 0 0 3px #0E932E;
|
|
|
+ }
|
|
|
+ &.google{
|
|
|
+ background-color: #EA4335;
|
|
|
+ box-shadow: 0 0 0 1px white,0 0 0 3px #EA4335;
|
|
|
+ }
|
|
|
+ &.linkin{
|
|
|
+ background-color: #0B66C1;
|
|
|
+ box-shadow: 0 0 0 1px white,0 0 0 3px #0B66C1;
|
|
|
+ }
|
|
|
.icon{
|
|
|
- scale: 1.04;
|
|
|
- filter: brightness(1) opacity(1);
|
|
|
+ filter: brightness(0) invert(1)
|
|
|
}
|
|
|
}
|
|
|
}
|
zhoujump