fix: 补充国际化,更新icon图标

This commit is contained in:
@changcode
2021-08-19 12:51:49 +08:00
parent f0b701b259
commit 61bf865cdb
11 changed files with 80 additions and 28 deletions

View File

@@ -1,6 +1,6 @@
/*列表table通用样式*/ /*列表table通用样式*/
.list-page { .list-page {
height: 100%; height: calc(100%);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
background-color: #f6f6f6; background-color: #f6f6f6;
@@ -365,7 +365,10 @@
} }
.profile { .profile {
.main-list { .main-list {
height: calc(100% - 14px); height: calc(100% + 7ncpx);
}
.top-tools {
padding: 0 20px 14px 20px;
} }
} }
.operation-dropdown-text { .operation-dropdown-text {

View File

@@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "nz-icon"; /* Project id 2030432 */ font-family: "nz-icon"; /* Project id 2030432 */
src: url('./font/iconfont.woff2?t=1629166963964') format('woff2'), src: url('./font/iconfont.woff2?t=1629339873183') format('woff2'),
url('./font/iconfont.woff?t=1629166963964') format('woff'), url('./font/iconfont.woff?t=1629339873183') format('woff'),
url('./font/iconfont.ttf?t=1629166963964') format('truetype'); url('./font/iconfont.ttf?t=1629339873183') format('truetype');
} }
.nz-icon { .nz-icon {

View File

@@ -1751,6 +1751,7 @@ const cn = {
profile: { profile: {
profile: '个人中心', profile: '个人中心',
close: '关闭', close: '关闭',
enable: '启用',
update: '更新', update: '更新',
operationRecord: '操作记录', operationRecord: '操作记录',
changePassword: '修改密码', changePassword: '修改密码',

View File

@@ -1632,6 +1632,7 @@ const en = {
profile: { profile: {
profile: 'Profile', profile: 'Profile',
close: 'Close', close: 'Close',
enable: 'Enable',
update: 'Update', update: 'Update',
operationRecord: 'Operation record', operationRecord: 'Operation record',
changePassword: 'Change password', changePassword: 'Change password',

View File

@@ -120,6 +120,7 @@
<script> <script>
import { mapActions } from 'vuex' import { mapActions } from 'vuex'
import QRCode from 'qrcodejs2' import QRCode from 'qrcodejs2'
import bus from '@/libs/bus.js'
export default { export default {
name: 'login', name: 'login',
data () { data () {
@@ -324,6 +325,12 @@ export default {
const creatDom = document.getElementById('creatDom') const creatDom = document.getElementById('creatDom')
creatDom.parentNode.removeChild(creatDom) creatDom.parentNode.removeChild(creatDom)
this.$message.success(this.$t('overall.copySuccess')) this.$message.success(this.$t('overall.copySuccess'))
},
initEvent () {
bus.$on('profile-dialog', () => {
this.authBindShow = true
console.log(1)
})
} }
}, },
watch: { watch: {
@@ -345,6 +352,7 @@ export default {
// } // }
document.getElementById('usernameInput').focus() document.getElementById('usernameInput').focus()
this.licenseStat() this.licenseStat()
this.initEvent()
} }
} }
</script> </script>

View File

@@ -213,7 +213,7 @@ export default {
i18n: 'profile.profile', i18n: 'profile.profile',
icon: '', icon: '',
id: 2, id: 2,
name: 'profile', name: 'Personal center',
orderNum: 1, orderNum: 1,
parentId: 1, parentId: 1,
perms: '', perms: '',

View File

@@ -126,10 +126,10 @@ export default {
position: relative; position: relative;
.profile-right__tabs-active { .profile-right__tabs-active {
margin-right: 40px; margin-right: 40px;
margin-top: 26px;
margin-left: -2px; margin-left: -2px;
height: 35px; padding-top: 25px;
font-size: 14px; font-size: 14px;
height: 30px;
color: #666666; color: #666666;
letter-spacing: 0; letter-spacing: 0;
font-weight: 400; font-weight: 400;
@@ -148,10 +148,10 @@ export default {
} }
.profile-hr { .profile-hr {
position: absolute; position: absolute;
top: 75px; top: 55px;
width: calc(100% - 40px); width: calc(100% - 40px);
height: 2px; height: 2px;
background-color: #E7EAED; background-color: #eceef0;
} }
} }
</style> </style>

View File

@@ -7,14 +7,15 @@
</div> </div>
<div class="profile-left__header-username"> <div class="profile-left__header-username">
<div>{{userList.username}}<span class="profile-left__header-username__span">2FA</span></div> <div>{{userList.username}}<span class="profile-left__header-username__span">2FA</span></div>
<div>{{userList.name}}</div> <div>@{{userList.name}}</div>
</div> </div>
</div> </div>
<div v-for="item in tableProfile" :key="item.id" class="profile-left__center"> <div v-for="item in tableProfile" :key="item.id" class="profile-left__center">
<span style="margin:0 18px 0 0"><i :class="item.icon"></i></span> <span style="margin:0 18px 0 0"><i :class="item.icon"></i></span>
<div class="profile-left__center-title"> <div class="profile-left__center-title">
<div>{{item.label}}</div> <div>{{item.label}}</div>
<div>{{item.prop}}</div> <div v-if="item.prop">{{item.prop}}</div>
<div v-if="item.prop === null || ''">-</div>
</div> </div>
</div> </div>
<div class="profile-left__center"> <div class="profile-left__center">
@@ -24,10 +25,22 @@
</div> </div>
</div> </div>
<div class="profile-left__button table-operation-items"> <div class="profile-left__button table-operation-items">
<el-button @click="profileDisable" size="small" v-show="this.userList.mfaLevel == 0 && this.userList.mfaAuthEnable == 0 ? false : true" :class="{'table-operation-item--disable': this.userList.mfaLevel == 2 || this.userList.mfaAuthEnable ==1}" :disabled="this.userList.mfaLevel == 2 || this.userList.mfaAuthEnable == 1" class="profile-left__button-footer__btn footer__btns table-operation-item"> <!-- <el-button v-show="this.userList.mfaLevel == 0 && this.userList.mfaAuthEnable == 0 ? true : false" size="small" class="profile-left__button-footer__btn footer__btns">-->
<!-- <span>{{$t('profile.enable')}}</span>-->
<!-- </el-button>-->
<!-- <el-button @click="profileDisable" size="small" v-show="this.userList.mfaLevel == 0 && this.userList.mfaAuthEnable == 0 ? false : true" :class="{'table-operation-item&#45;&#45;disable': this.userList.mfaLevel == 2 || this.userList.mfaAuthEnable ==1}" :disabled="this.userList.mfaLevel == 2 || this.userList.mfaAuthEnable == 1" class="profile-left__button-footer__btn footer__btns table-operation-item">-->
<!-- <span>{{$t('profile.close')}}</span>-->
<!-- </el-button>-->
<!-- <el-button @click="profileMfaLevel" size="small" v-show="this.userList.mfaLevel == 0 && this.userList.mfaAuthEnable == 0 ? false : true" :class="{'table-operation-item&#45;&#45;disable': this.userList.mfaLevel == 2 || this.userList.mfaAuthEnable ==1}" class="profile-left__button-footer__btn footer__btn table-operation-item">-->
<!-- <span>{{$t('profile.update')}}</span>-->
<!-- </el-button>-->
<el-button @click="profileEnable" size="small" class="profile-left__button-footer__btn footer__btns">
<span>{{$t('profile.enable')}}</span>
</el-button>
<el-button @click="profileDisable" size="small" class="profile-left__button-footer__btn footer__btns table-operation-item">
<span>{{$t('profile.close')}}</span> <span>{{$t('profile.close')}}</span>
</el-button> </el-button>
<el-button @click="profileMfaLevel" size="small" v-show="this.userList.mfaLevel == 0 && this.userList.mfaAuthEnable == 0 ? false : true" :class="{'table-operation-item--disable': this.userList.mfaLevel == 2 || this.userList.mfaAuthEnable ==1}" class="profile-left__button-footer__btn footer__btn table-operation-item"> <el-button @click="profileMfaLevel" size="small" class="profile-left__button-footer__btn footer__btn table-operation-item">
<span>{{$t('profile.update')}}</span> <span>{{$t('profile.update')}}</span>
</el-button> </el-button>
</div> </div>
@@ -49,6 +62,7 @@
<script> <script>
import operationRecord from './operationRecord' import operationRecord from './operationRecord'
import bus from '@/libs/bus.js'
export default { export default {
name: 'profile', name: 'profile',
@@ -64,25 +78,25 @@ export default {
id: 1, id: 1,
label: this.$t('profile.role'), label: this.$t('profile.role'),
prop: '', prop: '',
icon: 'nz-icon nz-icon-overview-alert' icon: 'nz-icon nz-icon-role profile-role'
}, },
{ {
id: 2, id: 2,
label: this.$t('profile.email'), label: this.$t('profile.email'),
prop: '', prop: '',
icon: 'nz-icon nz-icon-overview-alert' icon: 'nz-icon nz-icon-email profile-email'
}, },
{ {
id: 3, id: 3,
label: this.$t('profile.mobile'), label: this.$t('profile.mobile'),
prop: '', prop: '',
icon: 'nz-icon nz-icon-overview-alert' icon: 'nz-icon nz-icon-mobile profile-mobile'
}, },
{ {
id: 4, id: 4,
label: this.$t('profile.source'), label: this.$t('profile.source'),
prop: '', prop: '',
icon: 'nz-icon nz-icon-overview-alert' icon: 'nz-icon nz-icon-laiyuan profile-laiyuan'
} }
], ],
// 后台数据 // 后台数据
@@ -113,21 +127,32 @@ export default {
this.tableProfile[0].prop = this.userList.roles[0].i18n this.tableProfile[0].prop = this.userList.roles[0].i18n
this.tableProfile[1].prop = this.userList.email this.tableProfile[1].prop = this.userList.email
this.tableProfile[2].prop = this.userList.mobile this.tableProfile[2].prop = this.userList.mobile
console.log(this.tableProfile[2].prop)
this.tableProfile[3].prop = this.userList.source this.tableProfile[3].prop = this.userList.source
console.log(this.userList)
} }
resolve() resolve()
}) })
}) })
}, },
profileMfaLevel () { profileMfaLevel () {
return new Promise(resolve => {
this.$post('/mfa/genkey').then(response => {
if (response.code === 200) {
console.log(bus.$emit('profile-dialog'))
}
resolve()
})
})
},
profileEnable () {
return new Promise(resolve => { return new Promise(resolve => {
const mfaLevelList = { const mfaLevelList = {
mfaLevel: 1 mfaLevel: 1
} }
this.$post('/mfa/genKey', mfaLevelList).then(response => { this.$post('/mfa/genkey', mfaLevelList).then(response => {
if (response.code === 200) { if (response.code === 200) {
console.log(response) bus.$emit('profile-dialog')
console.log(bus.$emit('profile-dialog'))
} }
resolve() resolve()
}) })
@@ -165,12 +190,13 @@ export default {
margin: 10px 0; margin: 10px 0;
text-align: center; text-align: center;
display: flex; display: flex;
justify-content: center; justify-content: flex-start;
align-items: center; align-items: center;
.profile-left__header-img { .profile-left__header-img {
height: 80px; height: 80px;
width: 80px; width: 80px;
line-height: 80px; line-height: 80px;
margin-left: 20px;
span { span {
display: inline-block; display: inline-block;
background: rgba(60,146,241,0.10); background: rgba(60,146,241,0.10);
@@ -196,11 +222,11 @@ export default {
letter-spacing: 0; letter-spacing: 0;
line-height: 22px; line-height: 22px;
font-weight: 500; font-weight: 500;
padding: 15px 0 13px 0; padding: 12px 0 10px 0;
} }
div:nth-of-type(2) { div:nth-of-type(2) {
font-family: Roboto-Regular; font-family: Roboto-Regular;
font-size: 14px; font-size: 18px;
color: #666666; color: #666666;
letter-spacing: 0; letter-spacing: 0;
line-height: 22px; line-height: 22px;
@@ -212,12 +238,12 @@ export default {
width: 42px; width: 42px;
height: 24px; height: 24px;
margin-left: 10px; margin-left: 10px;
background: #ECF5FE; background-color: #ecf5ff;
border: 1px solid rgba(135,192,255,0.56); border-color: #d9ecff;
border-radius: 2px; border-radius: 10px;
font-family: Roboto-Regular; font-family: Roboto-Regular;
font-size: 14px; font-size: 14px;
color: #3C92F1; color: #409EFF;
letter-spacing: 0; letter-spacing: 0;
font-weight: 400; font-weight: 400;
} }
@@ -231,8 +257,21 @@ export default {
/*border: 1px solid red;*/ /*border: 1px solid red;*/
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
.profile-role {
color: #00C398;
}
.profile-email {
color: #0093F8;
}
.profile-mobile {
color: #EC7F66;
}
.profile-laiyuan {
color: #8871DB;
}
.profile-left__center-title { .profile-left__center-title {
margin-left: 8px; margin-left: 8px;
margin-top: 1px;
div:nth-of-type(1) { div:nth-of-type(1) {
padding-bottom: 5px; padding-bottom: 5px;
ont-family: Roboto-Regular; ont-family: Roboto-Regular;