[重大更新] 整体主题样式重写 改为卡片式布局 样式更企业化
This commit is contained in:
疯狂的狮子Li
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-table :data="auths" border style="width: 100%; height: 100%; font-size: 14px">
|
||||
<div class="profile-auth">
|
||||
<el-table :data="auths" border class="data-table profile-auth-table">
|
||||
<el-table-column label="序号" width="50" type="index" />
|
||||
<el-table-column label="绑定账号平台" width="140" align="center" prop="source" show-overflow-tooltip />
|
||||
<el-table-column label="头像" width="120" align="center" prop="avatar">
|
||||
@@ -12,43 +12,48 @@
|
||||
<el-table-column label="绑定时间" width="180" align="center" prop="createTime" />
|
||||
<el-table-column label="操作" width="80" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-button size="small" type="text" @click="unlockAuth(scope.row)">解绑</el-button>
|
||||
<el-tooltip content="解绑" placement="top">
|
||||
<el-button link type="primary" icon="CircleClose" @click="unlockAuth(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div id="git-user-binding">
|
||||
<h4 class="provider-desc">你可以绑定以下第三方帐号</h4>
|
||||
<div id="authlist" class="user-bind">
|
||||
<div class="provider-section">
|
||||
<div class="provider-heading">
|
||||
<h4 class="provider-desc">可绑定的第三方应用</h4>
|
||||
<p>点击下方平台完成账号绑定。</p>
|
||||
</div>
|
||||
<div class="user-bind">
|
||||
<a class="third-app" href="#" title="使用 微信 账号授权登录" @click="authUrl('wechat')">
|
||||
<div class="git-other-login-icon">
|
||||
<div class="third-app__icon">
|
||||
<svg-icon icon-class="wechat" />
|
||||
</div>
|
||||
<span class="app-name">WeiXin</span>
|
||||
<span class="app-name">微信</span>
|
||||
</a>
|
||||
<a class="third-app" href="#" title="使用 MaxKey 账号授权登录" @click="authUrl('maxkey')">
|
||||
<div class="git-other-login-icon">
|
||||
<div class="third-app__icon">
|
||||
<svg-icon icon-class="maxkey" />
|
||||
</div>
|
||||
<span class="app-name">MaxKey</span>
|
||||
</a>
|
||||
<a class="third-app" href="#" title="使用 TopIam 账号授权登录" @click="authUrl('topiam')">
|
||||
<div class="git-other-login-icon">
|
||||
<div class="third-app__icon">
|
||||
<svg-icon icon-class="topiam" />
|
||||
</div>
|
||||
<span class="app-name">TopIam</span>
|
||||
</a>
|
||||
<a class="third-app" href="#" title="使用 Gitee 账号授权登录" @click="authUrl('gitee')">
|
||||
<div class="git-other-login-icon">
|
||||
<div class="third-app__icon">
|
||||
<svg-icon icon-class="gitee" />
|
||||
</div>
|
||||
<span class="app-name">Gitee</span>
|
||||
</a>
|
||||
<a class="third-app" href="#" title="使用 GitHub 账号授权登录" @click="authUrl('github')">
|
||||
<div class="git-other-login-icon">
|
||||
<div class="third-app__icon">
|
||||
<svg-icon icon-class="github" />
|
||||
</div>
|
||||
<span class="app-name">Github</span>
|
||||
<span class="app-name">GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -94,44 +99,77 @@ const authUrl = (source: string) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-bind .third-app {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
.profile-auth {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.profile-auth-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.provider-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.provider-heading p {
|
||||
margin: 6px 0 0;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.user-bind .third-app {
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
min-width: 80px;
|
||||
float: left;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-height: 84px;
|
||||
padding: 12px 10px;
|
||||
border: 1px solid var(--app-surface-border);
|
||||
border-radius: 12px;
|
||||
background: rgba(248, 250, 252, 0.82);
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.user-bind {
|
||||
font-size: 1rem;
|
||||
text-align: start;
|
||||
height: 50px;
|
||||
margin-top: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(96px, 108px));
|
||||
gap: 10px;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.git-other-login-icon > img {
|
||||
height: 32px;
|
||||
.third-app:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: rgba(53, 109, 255, 0.3);
|
||||
box-shadow: var(--app-shadow-sm);
|
||||
}
|
||||
|
||||
.third-app__icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 10px;
|
||||
background: rgba(53, 109, 255, 0.08);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: #005980;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.provider-desc {
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Liberation Sans',
|
||||
'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti', SimHei, SimSun,
|
||||
'WenQuanYi Zen Hei Sharp', sans-serif;
|
||||
font-size: 1.071rem;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
td > img {
|
||||
@@ -141,4 +179,18 @@ td > img {
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
:global(html.dark) {
|
||||
.user-bind .third-app {
|
||||
background: rgba(15, 23, 42, 0.64);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user