feat:引入国旗图标组件
This commit is contained in:
PZ688
parent
e7fe6ecc67
commit
b543f1ffc0
@ -69,13 +69,13 @@
|
||||
"vue-clipboard3": "^2.0.0",
|
||||
"vue-demi": "0.14.10",
|
||||
"vue-draggable-plus": "^0.6.0",
|
||||
"vue-flag-icon": "^2.1.0",
|
||||
"vue-grid-layout": "3.0.0-beta1",
|
||||
"vue-i18n": "^11.1.1",
|
||||
"vue-json-pretty": "^2.4.0",
|
||||
"vue-plugin-hiprint": "^0.0.59-beta2",
|
||||
"vue-router": "^4.5.0",
|
||||
"vue-signature-pad": "^3.0.2",
|
||||
"vue3-flag-icons": "^0.0.3",
|
||||
"vue3-tree-org": "^4.2.2",
|
||||
"vxe-pc-ui": "^4.3.95",
|
||||
"vxe-table": "^4.10.0",
|
||||
|
||||
@ -49,7 +49,7 @@ import zhTW from 'vxe-table/lib/locale/lang/zh-TW';
|
||||
|
||||
// 定义变量内容
|
||||
const messages = {};
|
||||
const element = {
|
||||
const element ={
|
||||
en: enLocale,
|
||||
'zh-CN': zhcnLocale,
|
||||
'zh-TW': zhtwLocale,
|
||||
|
||||
@ -29,7 +29,6 @@ import sysDict from "/@/components/sysDict/sysDict.vue";
|
||||
|
||||
// 关闭自动打印
|
||||
import { disAutoConnect } from 'vue-plugin-hiprint';
|
||||
import VueFlagIcon from 'vue-flag-icon';
|
||||
|
||||
disAutoConnect();
|
||||
|
||||
@ -54,5 +53,4 @@ app.use(pinia)
|
||||
.use(VueSignaturePad)
|
||||
.use(vue3TreeOrg)
|
||||
.use(JwChat)
|
||||
.use(VueFlagIcon)
|
||||
.mount('#app');
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
<el-tooltip :visible="state.capsLockVisible" effect="light" :content="t('message.account.lockTag')" placement="top">
|
||||
<el-form ref="ruleFormRef" :model="state.ruleForm" size="large" :rules="state.rules" class="login-content-form">
|
||||
<el-form-item class="login-animation1" prop="account">
|
||||
<el-input ref="accountRef" text :placeholder="t('message.account.accountneed')" v-model="state.ruleForm.account" clearable autocomplete="off" @keyup.enter.native="handleSignIn">
|
||||
<el-input ref="accountRef" text :placeholder="t('message.account.accountneed')"
|
||||
v-model="state.ruleForm.account" clearable autocomplete="off" @keyup.enter.native="handleSignIn">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<ele-User />
|
||||
@ -11,30 +12,26 @@
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="login-animation2" prop="password">
|
||||
<el-input ref="passwordRef" :type="state.isShowPassword ? 'text' : 'password'" :placeholder="t('message.account.passwordneed')" v-model="state.ruleForm.password" autocomplete="off" @keyup.enter.native="handleSignIn">
|
||||
<el-input ref="passwordRef" :type="state.isShowPassword ? 'text' : 'password'"
|
||||
:placeholder="t('message.account.passwordneed')" v-model="state.ruleForm.password"
|
||||
autocomplete="off" @keyup.enter.native="handleSignIn">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<ele-Unlock />
|
||||
</el-icon>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<i class="iconfont el-input__icon login-content-password" :class="state.isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'" @click="state.isShowPassword = !state.isShowPassword">
|
||||
<i class="iconfont el-input__icon login-content-password"
|
||||
:class="state.isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
|
||||
@click="state.isShowPassword = !state.isShowPassword">
|
||||
</i>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="login-animation3" prop="captcha" v-if="state.captchaEnabled">
|
||||
<el-col :span="15">
|
||||
<el-input
|
||||
ref="codeRef"
|
||||
text
|
||||
maxlength="4"
|
||||
:placeholder="$t('message.account.accountPlaceholder3')"
|
||||
v-model="state.ruleForm.code"
|
||||
clearable
|
||||
autocomplete="off"
|
||||
@keyup.enter.native="handleSignIn"
|
||||
>
|
||||
<el-input ref="codeRef" text maxlength="4" :placeholder="$t('message.account.accountPlaceholder3')"
|
||||
v-model="state.ruleForm.code" clearable autocomplete="off" @keyup.enter.native="handleSignIn">
|
||||
<template #prefix>
|
||||
<el-icon>
|
||||
<ele-Position />
|
||||
@ -44,37 +41,41 @@
|
||||
</el-col>
|
||||
<el-col :span="1"></el-col>
|
||||
<el-col :span="8">
|
||||
<div :class="[state.expirySeconds > 0 ? 'login-content-code' : 'login-content-code-expired']" @click="getCaptcha">
|
||||
<div style="width: 130px; height: 38px; text-align: center; cursor: pointer" v-if="state.captchaImage == ''">
|
||||
<div :class="[state.expirySeconds > 0 ? 'login-content-code' : 'login-content-code-expired']"
|
||||
@click="getCaptcha">
|
||||
<div style="width: 130px; height: 38px; text-align: center; cursor: pointer"
|
||||
v-if="state.captchaImage == ''">
|
||||
<el-icon class="is-loading">
|
||||
<ele-Loading />
|
||||
</el-icon>
|
||||
</div>
|
||||
<img class="login-content-code-img" width="130px" height="38px" :src="state.captchaImage" style="cursor: pointer" v-else />
|
||||
<img class="login-content-code-img" width="130px" height="38px" :src="state.captchaImage"
|
||||
style="cursor: pointer" v-else />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item class="login-animation4">
|
||||
<el-button type="primary" icon="ele-Promotion" class="login-content-submit" round v-waves @click="handleSignIn" :loading="state.loading.signIn">
|
||||
<el-button type="primary" icon="ele-Promotion" class="login-content-submit" round v-waves
|
||||
@click="handleSignIn" :loading="state.loading.signIn">
|
||||
<span>{{ $t('message.account.accountBtnText') }}</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<div class="font12 mt30 login-animation4 login-msg">{{ $t('message.mobile.msgText') }}</div>
|
||||
<div>
|
||||
<FlagIcon code="gr" />
|
||||
<FlagIcon code="gb" :size="25" square />
|
||||
<FlagIcon code="us" size="32" circle />
|
||||
<FlagIcon code="fr" title="A flag icon" />
|
||||
</div>
|
||||
<!-- <el-button type="primary" round v-waves @click="weixinSignIn" :loading="state.loading.signIn"></el-button> -->
|
||||
</el-form>
|
||||
</el-tooltip>
|
||||
<div class="dialog-header">
|
||||
<el-dialog v-model="state.rotateVerifyVisible" :show-close="false">
|
||||
<DragVerifyImgRotate
|
||||
ref="dragRef"
|
||||
:imgsrc="state.rotateVerifyImg"
|
||||
v-model:isPassing="state.isPassRotate"
|
||||
:text="t('message.account.splitslive')"
|
||||
:successText="t('message.account.success')"
|
||||
handlerIcon="fa fa-angle-double-right"
|
||||
successIcon="fa fa-hand-peace-o"
|
||||
@passcallback="passRotateVerify"
|
||||
/>
|
||||
<DragVerifyImgRotate ref="dragRef" :imgsrc="state.rotateVerifyImg" v-model:isPassing="state.isPassRotate"
|
||||
:text="t('message.account.splitslive')" :successText="t('message.account.success')"
|
||||
handlerIcon="fa fa-angle-double-right" successIcon="fa fa-hand-peace-o"
|
||||
@passcallback="passRotateVerify" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@ -95,6 +96,7 @@ import { storeToRefs } from 'pinia';
|
||||
|
||||
import { accessTokenKey, clearTokens, feature, getAPI } from '/@/utils/axios-utils';
|
||||
import { SysAuthApi } from '/@/api-services/api';
|
||||
import FlagIcon from 'vue3-flag-icons'
|
||||
|
||||
// 旋转图片滑块组件
|
||||
// import verifyImg from '/@/assets/logo-mini.svg';
|
||||
@ -398,6 +400,7 @@ defineExpose({ saveTokenAndInitRoutes });
|
||||
|
||||
.login-content-code-expired {
|
||||
@extend .login-content-code;
|
||||
|
||||
&::before {
|
||||
content: t('message.account.captchaExpired');
|
||||
position: absolute;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user