2132 lines
60 KiB
Vue
2132 lines
60 KiB
Vue
<template>
|
||
<div class="header">
|
||
<div class="log"></div>
|
||
<div>
|
||
<!-- 未登录 -->
|
||
<div v-show="loginstatus">
|
||
<ul class="headList2">
|
||
<!-- 首页 -->
|
||
<!-- <li @click="handelJump(`/Home`)" disabled>{{ $t(`login.home`) }} </li> -->
|
||
<!-- 数据图表 -->
|
||
<!-- @click="handelJump(`/`)">{{$t(`login.Charts`)}}</el-menu-item> -->
|
||
<!-- <li @click="handelJump(`/`)" disabled>{{ $t(`login.Charts`) }} </li> -->
|
||
|
||
<!-- 登录 -->
|
||
<li @click="handelLogin" v-show="loginstatus">
|
||
{{ $t("login.btn") }}
|
||
</li>
|
||
<!-- 注册 -->
|
||
<li class="registered" v-show="loginstatus" @click="clickregistered">
|
||
{{ $t("login.registered") }}
|
||
</li>
|
||
<!-- 语言 -->
|
||
<li class="langs" @click="handelSwitching">{{ langs }}</li>
|
||
</ul>
|
||
</div>
|
||
<!-- 登录后 -->
|
||
<div v-show="!loginstatus">
|
||
<!-- 更新版本页头 -->
|
||
<div class="">
|
||
<el-menu
|
||
:default-active="activeIndex"
|
||
class="el-menu-demoNew"
|
||
mode="horizontal"
|
||
style="width: 100%"
|
||
background-color="#383d71"
|
||
text-color="#fff"
|
||
active-text-color="#f7931a"
|
||
>
|
||
<!-- <el-menu-item index="1" @click="handelJump(`/Home`)" disabled >{{$t(`login.home`)}}</el-menu-item> -->
|
||
<el-menu-item index="2" @click="handelJump(`/`)">{{
|
||
$t(`login.Charts`)
|
||
}}</el-menu-item>
|
||
<!-- <el-menu-item index="3" disabled>{{$t(`login.researchReport`)}}</el-menu-item> -->
|
||
|
||
<el-submenu index="4" id="submenuBox">
|
||
<template slot="title">
|
||
<span style="text-transform: none">{{
|
||
userName
|
||
}}</span></template
|
||
>
|
||
<el-menu-item index="4-1" @click.native="handelPeople">{{
|
||
$t(`login.personal`)
|
||
}}</el-menu-item>
|
||
<el-submenu index="4-2">
|
||
<template slot="title">{{
|
||
$t(`login.customerService`)
|
||
}}</template>
|
||
<el-menu-item index="4-2-1" @click.native="handelHelp">{{
|
||
$t(`login.submitWork`)
|
||
}}</el-menu-item>
|
||
<!-- <el-menu-item index="4-2-2" >{{$t(`login.historicalWork`)}}</el-menu-item> -->
|
||
<!-- <el-menu-item index="4-2-3" >{{$t(`login.onlineService`)}}</el-menu-item> -->
|
||
</el-submenu>
|
||
<!-- 消息订阅 -->
|
||
<el-menu-item index="4-3" @click.native="handelJump(`/Alarm`)">{{
|
||
$t(`login.subscribeBoard`)
|
||
}}</el-menu-item>
|
||
<!-- 账号升级 -->
|
||
<!-- <el-submenu index="4-4">
|
||
<template slot="title">{{$t(`login.accountUpgrade`)}}</template>
|
||
<el-menu-item index="4-4-1" @click.native="handelJump(`/privilegeLevel`)">{{$t(`login.accountUpgrade`)}}</el-menu-item>
|
||
<el-menu-item index="4-4-2">{{$t(`login.HistoryRecord`)}}</el-menu-item>
|
||
</el-submenu> -->
|
||
<!-- <el-menu-item index="4-5" v-show="identityLabel == `support` || identityLabel == `verifier`|| identityLabel == `admin`" >{{ $t(`login.publishResearchReport`) }}</el-menu-item> -->
|
||
<el-submenu
|
||
index="4-6"
|
||
v-show="
|
||
identityLabel == `accounting` || identityLabel == `admin`
|
||
"
|
||
>
|
||
<!-- 财务管理 -->
|
||
<template slot="title">{{ $t(`login.finance`) }}</template>
|
||
<el-menu-item
|
||
index="4-6-1"
|
||
@click.native="handelJump(`/BackgroundAddress`)"
|
||
>{{ $t(`login.backgroundAddress`) }}</el-menu-item
|
||
>
|
||
<el-menu-item
|
||
index="4-6-2"
|
||
@click.native="handelJump(`/RechargeRecord`)"
|
||
>{{ $t(`login.dataStatistics`) }}</el-menu-item
|
||
>
|
||
</el-submenu>
|
||
<!-- 客服管理 -->
|
||
<el-menu-item
|
||
index="4-7"
|
||
@click.native="handelJump(`/HelpBackstage`)"
|
||
v-show="identityLabel == `admin`"
|
||
>{{ $t(`login.CustomerManagemen`) }}</el-menu-item
|
||
>
|
||
<!-- <el-menu-item index="4-8" @click.native="handelJump(`/RechargeRecord`)" v-show="identityLabel == `admin`" >{{ $t(`login.dataStatistics`) }}</el-menu-item> -->
|
||
<el-menu-item index="4-9" @click.native="handelExit">{{
|
||
$t("login.exit")
|
||
}}</el-menu-item>
|
||
</el-submenu>
|
||
<!-- <el-menu-item index="5" @click.native="handelJump(`/privilegeLevel`)">{{$t(`login.accountUpgrade`)}}</el-menu-item> -->
|
||
<!-- <el-menu-item index="6" @click.native="handelJump(`/Alarm`)">{{$t(`login.subscribeBoard`)}}</el-menu-item> -->
|
||
<el-menu-item index="7" @click="handelSwitching">{{
|
||
langs
|
||
}}</el-menu-item>
|
||
</el-menu>
|
||
|
||
<ul class="headList2">
|
||
<!-- 首页 -->
|
||
<!-- <li @click="handelJump(`/Home`)">主页</li>
|
||
<li @click="handelJump(`/`)">数据图表</li>
|
||
<li @click="handelJump(`/research`)">研究报告</li> -->
|
||
<!-- 个人中心 -->
|
||
<!-- <li class="help">
|
||
<el-dropdown
|
||
trigger="click"
|
||
:modal-append-to-body="true"
|
||
szie="small"
|
||
class="loginMenu"
|
||
>
|
||
<span class="el-dropdown-link">
|
||
{{ $t("login.personal") }}
|
||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||
</span>
|
||
|
||
<el-dropdown-menu slot="dropdown" class="header-new-dro">
|
||
<el-dropdown-item @click.native="handelPeople">
|
||
<span class="el-dropdown-link" style="text-transform: none">
|
||
{{ userName }}
|
||
</span></el-dropdown-item
|
||
>
|
||
|
||
<el-dropdown-item @click.native="handelHelp">{{
|
||
$t(`login.customerService`)
|
||
}}</el-dropdown-item>
|
||
<el-dropdown-item @click.native="handelJump(`/Alarm`)">
|
||
{{ $t(`login.subscribeBoard`) }}</el-dropdown-item
|
||
>
|
||
<el-dropdown-item
|
||
@click.native="handelJump(`/privilegeLevel`)"
|
||
>
|
||
账号升级
|
||
</el-dropdown-item>
|
||
<el-dropdown-item>发布研报</el-dropdown-item>
|
||
<el-dropdown-item>财务管理</el-dropdown-item>
|
||
<el-dropdown-item @click.native="handelJump(`/HelpBackstage`)"
|
||
>客服管理</el-dropdown-item
|
||
>
|
||
<el-dropdown-item>数据统计</el-dropdown-item>
|
||
<el-dropdown-item @click.native="handelExit">
|
||
{{ $t("login.exit") }}</el-dropdown-item
|
||
>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
</li>
|
||
<li @click="handelJump(`/Alarm`)">
|
||
{{ $t(`login.subscribeBoard`) }}
|
||
</li>
|
||
<li @click="handelJump(`/privilegeLevel`)">升级账号</li>
|
||
<li></li>
|
||
|
||
<li class="langs" @click="handelSwitching">{{ langs }}</li> -->
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 注册弹窗 -->
|
||
<el-dialog
|
||
class="registeredBox"
|
||
:append-to-body="true"
|
||
:modal-append-to-body="false"
|
||
:title="$t('login.registered')"
|
||
:visible.sync="dialogFormVisible"
|
||
:close-on-click-modal="false"
|
||
@close="handelRegister"
|
||
>
|
||
<el-form class="registeredForm" :model="registered">
|
||
<!-- 邮箱 -->
|
||
<el-form-item>
|
||
<span><span class="mandatory">*</span>{{ $t("login.mailbox") }}</span>
|
||
<el-input
|
||
@blur="handelFocus"
|
||
:placeholder="$t(`login.placeholderTitle`)"
|
||
v-model="registered.email"
|
||
size="small"
|
||
autocomplete="off"
|
||
></el-input>
|
||
<span v-show="rewriteEmail" class="rewriteEmail">{{
|
||
$t(`login.rewriteEmail`)
|
||
}}</span>
|
||
</el-form-item>
|
||
<el-form-item class="registeredUserBox">
|
||
<span
|
||
><span class="mandatory">*</span
|
||
>{{ $t("login.registeredName") }}</span
|
||
>
|
||
<el-input
|
||
:placeholder="$t(`login.placeholderTitle`)"
|
||
v-model="registered.userName"
|
||
size="small"
|
||
autocomplete="off"
|
||
class="inputBox"
|
||
></el-input>
|
||
<p class="prompt">{{ $t(`login.userPrompt`) }}</p>
|
||
</el-form-item>
|
||
<!--注册密码 -->
|
||
<el-form-item class="registeredPasswordBox">
|
||
<span
|
||
><span class="mandatory">*</span>{{ $t("login.password") }}</span
|
||
>
|
||
<el-input
|
||
:placeholder="$t(`login.placeholderTitle`)"
|
||
size="small"
|
||
v-model="registered.password"
|
||
show-password
|
||
></el-input>
|
||
<p class="prompt">{{ $t(`login.passwordPrompt`) }}</p>
|
||
</el-form-item>
|
||
<!-- 确认新密码 -->
|
||
<el-form-item>
|
||
<span
|
||
><span class="mandatory">*</span
|
||
>{{ $t(`login.ConfirmNewPassword`) }}</span
|
||
>
|
||
<el-input
|
||
v-model="ConfirmNewPsd"
|
||
size="small"
|
||
show-password
|
||
:placeholder="$t(`login.placeholderTitle`)"
|
||
autocomplete="off"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 电话 -->
|
||
<!-- <el-form-item>
|
||
<span>{{ $t("login.phone") }}</span>
|
||
<el-input :placeholder="$t(`login.placeholderTitle`)" size="small" v-model="registered.phone"></el-input>
|
||
</el-form-item> -->
|
||
<!-- 验证码 -->
|
||
<el-form-item class="authCode">
|
||
<span class="mandatoryBox"
|
||
><span class="mandatory">*</span>{{ $t("login.authCode") }}</span
|
||
>
|
||
<div>
|
||
<el-input
|
||
size="small"
|
||
:placeholder="$t(`login.VerificationCode`)"
|
||
v-model="registered.emailCode"
|
||
></el-input>
|
||
</div>
|
||
<!-- 获取验证码 -->
|
||
<el-button
|
||
size="small"
|
||
:disabled="codeBtn.btnStatus"
|
||
:class="{ forbban: codeBtn.btnStatus }"
|
||
@click="handelEmailCode"
|
||
type="success"
|
||
class="emailCodeButton"
|
||
>{{ $t(codeBtn.btnText) }}</el-button
|
||
>
|
||
</el-form-item>
|
||
|
||
<!-- 勾选同意 -->
|
||
<div class="checkBox">
|
||
<input type="checkbox" v-model="check" @click="checkbox($event)" />
|
||
<span>{{ $t("login.terms") }}</span>
|
||
</div>
|
||
<div class="describe">
|
||
<p v-show="show">{{ $t("login.agree") }}</p>
|
||
<p>
|
||
{{ $t("login.areAccount") }}
|
||
<span @click="handelLogin">{{ $t("login.btn") }}</span>
|
||
</p>
|
||
<!-- <p>Haven't received email confirmation? Resend Confirmation Email</p> -->
|
||
</div>
|
||
</el-form>
|
||
<div class="langBox">
|
||
<el-radio
|
||
class="radio"
|
||
@change="handelRadio('zh')"
|
||
v-model="radio"
|
||
label="zh"
|
||
>简体中文</el-radio
|
||
>
|
||
<el-radio
|
||
class="radio"
|
||
@change="handelRadio('en')"
|
||
v-model="radio"
|
||
label="en"
|
||
>English</el-radio
|
||
>
|
||
</div>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogFormVisible = false" size="small">{{
|
||
$t("login.cancel")
|
||
}}</el-button>
|
||
<!-- 点击注册 -->
|
||
<el-button type="primary" @click="handelRegisteredEmail" size="small">{{
|
||
$t("login.registered")
|
||
}}</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 登录弹窗 -->
|
||
<el-dialog
|
||
:close-on-click-modal="false"
|
||
class="loginBOx"
|
||
:modal-append-to-body="false"
|
||
:append-to-body="true"
|
||
:title="$t('logins.data')"
|
||
:visible.sync="dialogLoginVisible"
|
||
style="z-index: 9999"
|
||
@close="handelCancel"
|
||
>
|
||
<!-- :before-close="handelClose" -->
|
||
<el-form
|
||
class="loginForm"
|
||
:model="form"
|
||
ref="loginForm"
|
||
@keydown.enter.native="handleSubmit"
|
||
>
|
||
<!-- 用户名 -->
|
||
<el-form-item class="userBox">
|
||
<span
|
||
><span class="mandatory">*</span>{{ $t("login.userName") }}</span
|
||
>
|
||
<el-input
|
||
type="text"
|
||
v-model="form.userName"
|
||
:placeholder="$t(`login.PleaseEnterYourUserName`)"
|
||
size="middle"
|
||
autocomplete="on"
|
||
name="userName111"
|
||
id="enterName"
|
||
class="enterName"
|
||
></el-input>
|
||
<span class="prompt">{{ $t(`login.userPrompt`) }} </span>
|
||
</el-form-item>
|
||
<!-- 密码输入 -->
|
||
<el-form-item class="passwordBox1">
|
||
<span
|
||
><span class="mandatory">*</span>{{ $t("login.password") }}</span
|
||
>
|
||
<el-input
|
||
size="middle"
|
||
:placeholder="$t(`login.PleasePassword`)"
|
||
type="password"
|
||
v-model="form.password"
|
||
show-password
|
||
class="enterName"
|
||
></el-input>
|
||
<span class="prompt">{{ $t(`login.passwordPrompt`) }} </span>
|
||
</el-form-item>
|
||
<!-- 验证码 -->
|
||
<el-form-item v-show="authCodeShow" class="authCode">
|
||
<span class="mandatoryBox"
|
||
><span class="mandatory">*</span>{{ $t("login.authCode") }}</span
|
||
>
|
||
<div>
|
||
<el-input
|
||
size="middle"
|
||
:placeholder="$t(`login.VerificationCode`)"
|
||
v-model="form.code"
|
||
></el-input>
|
||
</div>
|
||
<div>
|
||
<img class="codeImg" :src="codeSrc" alt="" />
|
||
<i @click="handelCode" class="icon el-icon-refresh"></i>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<!-- 没有账户？ 注册 -->
|
||
<div class="loginDescribe">
|
||
<p>
|
||
{{ $t("login.account") }}
|
||
<span @click="clickregistered" style="color: #48a2ff">
|
||
{{ $t("login.registered") }}</span
|
||
>
|
||
</p>
|
||
<!-- 忘记密码？ 重置密码 -->
|
||
<p>
|
||
{{ $t("login.forgotPassword") }}
|
||
<span @click="handelResetPassword" style="color: #48a2ff">{{
|
||
$t("login.resetPassword")
|
||
}}</span>
|
||
</p>
|
||
<!-- 邮件 -->
|
||
<!-- <p>
|
||
Haven't received email confirmation?
|
||
<span @click="dialogEmailVisible = true">
|
||
Resend Confirmation Email</span
|
||
>
|
||
</p> -->
|
||
</div>
|
||
</el-form>
|
||
<div class="langBox">
|
||
<el-radio
|
||
class="radio"
|
||
@change="handelRadio('zh')"
|
||
v-model="radio"
|
||
label="zh"
|
||
>简体中文</el-radio
|
||
>
|
||
<el-radio
|
||
class="radio"
|
||
@change="handelRadio('en')"
|
||
v-model="radio"
|
||
label="en"
|
||
>English</el-radio
|
||
>
|
||
</div>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="handelCancel" size="small">{{
|
||
$t("login.cancel")
|
||
}}</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="handleSubmit"
|
||
size="small"
|
||
class="loadingBtn"
|
||
:loading="loginLoading"
|
||
>
|
||
<span element-loading-spinner="el-icon-loading"></span>
|
||
{{ $t("login.login") }}</el-button
|
||
>
|
||
<!-- <el-button
|
||
type="primary"
|
||
@click="handleSwitchLanguage"
|
||
size="small"
|
||
class="loadingBtn"
|
||
>
|
||
<span
|
||
v-loading="loginLoading"
|
||
element-loading-spinner="el-icon-loading"
|
||
></span>
|
||
{{ $t("login.switchLanguages") }}</el-button
|
||
> -->
|
||
<!-- <el-button :plain="true" @click="open4">1</el-button> -->
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 重置密码弹窗输入邮箱 -->
|
||
<!-- @keydown.enter.native="handelResetPasswordEmail" -->
|
||
<el-dialog
|
||
:close-on-click-modal="false"
|
||
:modal-append-to-body="false"
|
||
:append-to-body="true"
|
||
:title="$t(`login.resetPassword`)"
|
||
:visible.sync="dialogPasswordVisible"
|
||
class="passwordBox"
|
||
>
|
||
<el-form
|
||
class="passwordForm"
|
||
:model="passwordForm"
|
||
@submit.native.prevent
|
||
>
|
||
<el-form-item>
|
||
<span><span class="mandatory">*</span>{{ $t(`login.email`) }}</span>
|
||
<el-input
|
||
v-model="passwordForm.email"
|
||
size="small"
|
||
autocomplete="off"
|
||
@keydown.enter.native="handelResetPasswordEmail"
|
||
></el-input>
|
||
</el-form-item>
|
||
|
||
<p>{{ $t(`login.inputEmail`) }}</p>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogPasswordVisible = false" size="small">{{
|
||
$t(`login.cancel`)
|
||
}}</el-button>
|
||
<el-button
|
||
:loading="ResetPasswordLoading"
|
||
type="primary"
|
||
@click="handelResetPasswordEmail"
|
||
size="small"
|
||
>{{ $t(`login.emailVerification`) }}</el-button
|
||
>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 重置密码填写新密码 -->
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
:title="$t(`login.resetPassword`)"
|
||
:visible.sync="dialogNewPassword"
|
||
:append-to-body="true"
|
||
class="passwordBox"
|
||
:close-on-click-modal="false"
|
||
>
|
||
<el-form class="passwordForm" :model="passwordForm">
|
||
<el-form-item>
|
||
<span><span class="mandatory">*</span>{{ $t(`login.email`) }}</span>
|
||
<el-input
|
||
v-model="passwordForm.email"
|
||
disabled
|
||
size="small"
|
||
autocomplete="off"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 输入新密码 -->
|
||
<el-form-item>
|
||
<span
|
||
><span class="mandatory">*</span>{{ $t(`login.newPassword`) }}</span
|
||
>
|
||
<el-input
|
||
v-model="passwordForm.password"
|
||
size="small"
|
||
show-password
|
||
:placeholder="$t(`login.placeholderTitle`)"
|
||
autocomplete="off"
|
||
></el-input>
|
||
<p class="prompt" style="margin-top: 5px">
|
||
{{ $t(`login.passwordPrompt`) }}
|
||
</p>
|
||
</el-form-item>
|
||
<!-- 确认新密码 -->
|
||
<el-form-item>
|
||
<span
|
||
><span class="mandatory">*</span
|
||
>{{ $t(`login.ConfirmNewPassword`) }}</span
|
||
>
|
||
<el-input
|
||
v-model="ConfirmNewPassword"
|
||
size="small"
|
||
show-password
|
||
:placeholder="$t(`login.placeholderTitle`)"
|
||
autocomplete="off"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item class="authCode">
|
||
<span class="mandatoryBox"
|
||
><span class="mandatory">*</span>{{ $t("login.authCode") }}</span
|
||
>
|
||
<div>
|
||
<el-input
|
||
size="small"
|
||
:placeholder="$t(`login.VerificationCode`)"
|
||
v-model="passwordForm.resetPwdCode"
|
||
></el-input>
|
||
</div>
|
||
<p style="margin-top: 2px">{{ $t(`login.emailCode`) }}</p>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogNewPassword = false" size="small">{{
|
||
$t(`login.cancel`)
|
||
}}</el-button>
|
||
<el-button type="primary" @click="handelNewPassword" size="small">{{
|
||
$t(`login.resetPassword`)
|
||
}}</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 重置邮箱弹窗 -->
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
:title="$t(`login.sendEmail`)"
|
||
:visible.sync="dialogEmailVisible"
|
||
:append-to-body="true"
|
||
class="passwordBox"
|
||
:close-on-click-modal="false"
|
||
>
|
||
<el-form class="passwordForm" :model="form">
|
||
<el-form-item>
|
||
<span><span class="mandatory">*</span>{{ $t(`login.email`) }}</span>
|
||
<el-input
|
||
v-model="form.name"
|
||
size="small"
|
||
autocomplete="off"
|
||
></el-input>
|
||
</el-form-item>
|
||
|
||
<p>{{ $t(`login.inputEmail`) }}</p>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogEmailVisible = false" size="small">{{
|
||
$t(`login.cancel`)
|
||
}}</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="dialogEmailVisible = false"
|
||
size="small"
|
||
>{{ $t(`login.submit`) }}</el-button
|
||
>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 登录才能查看页面遮罩 -->
|
||
<div class="loginMain" v-show="lgMask">
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<p>{{ $t(`login.loginMask`) }}</p>
|
||
<div class="lodinMaskBox">
|
||
<el-tag class="clickTag">{{ $t(`login.btn`) }}</el-tag>
|
||
<el-tag class="clickTag" type="success">{{
|
||
$t(`login.registered`)
|
||
}}</el-tag>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<!-- 注册通知弹窗 -->
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
:title="$t(`login.registrationNotice`)"
|
||
:visible.sync="registrationNotice"
|
||
:append-to-body="true"
|
||
class="passwordBox"
|
||
:close-on-click-modal="false"
|
||
>
|
||
<div class="registrationNoticeBox">
|
||
<p>{{ $t(`login.registrationPrompt`) }}</p>
|
||
<p>{{ $t(`login.registrationPrompt2`) }}</p>
|
||
<p>{{ $t(`login.registrationPrompt3`) }}</p>
|
||
<p>{{ $t(`login.registrationPrompt4`) }}</p>
|
||
</div>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="registrationNotice = false" size="small">{{
|
||
$t(`login.cancel`)
|
||
}}</el-button>
|
||
<el-button type="primary" @click="goRegister" size="small">{{
|
||
$t(`login.GoRegistered`)
|
||
}}</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from "vuex";
|
||
import { POST, Delete } from "../api/http";
|
||
import { encryption } from "../util/fun";
|
||
import { Debounce } from "../util/processingData"; //防抖
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
registrationNotice: false,
|
||
activeIndex: "",
|
||
show: false,
|
||
dialogEmailVisible: false,
|
||
dialogPasswordVisible: false,
|
||
dialogLoginVisible: false,
|
||
dialogFormVisible: false,
|
||
form: {
|
||
userName: "",
|
||
password: "",
|
||
code: "",
|
||
uuid: "",
|
||
},
|
||
formLabelWidth: "120px",
|
||
buttonShow: false,
|
||
token: "",
|
||
loginstatus: true,
|
||
loginLoading: false,
|
||
userName: "",
|
||
loginTime: "",
|
||
registered: {
|
||
userName: "",
|
||
password: "",
|
||
// phone: "",
|
||
email: "",
|
||
emailCode: "",
|
||
},
|
||
check: false,
|
||
lang: "",
|
||
radio: "",
|
||
langs: "",
|
||
codeSrc: "",
|
||
token: null,
|
||
registeredEmailCode: {
|
||
userName: "",
|
||
email: "",
|
||
},
|
||
dialogregisterCode: false,
|
||
passwordForm: {
|
||
email: "",
|
||
password: "",
|
||
resetPwdCode: "",
|
||
},
|
||
dialogNewPassword: false,
|
||
passwordCode: {
|
||
email: "",
|
||
},
|
||
codeBtn: {
|
||
btnStatus: false,
|
||
btnText: "login.getCode",
|
||
btnType: "primary",
|
||
},
|
||
codeTimer: null,
|
||
authCodeShow: false,
|
||
lgMask: false,
|
||
rewriteEmail: false,
|
||
ConfirmNewPassword: "",
|
||
checkVerification: "",
|
||
outTimer: "",
|
||
identity: {},
|
||
identityLabel: "",
|
||
navItem: "",
|
||
ResetPasswordLoading: false,
|
||
ConfirmNewPsd: "",
|
||
};
|
||
},
|
||
|
||
mounted() {
|
||
this.radio = this.$i18n.locale;
|
||
if (this.$i18n.locale == "en") {
|
||
this.langs = "简体中文";
|
||
} else if (this.$i18n.locale == "zh") {
|
||
this.langs = "English";
|
||
}
|
||
|
||
|
||
|
||
//取值token
|
||
this.token = localStorage.token;
|
||
// this.lgMask = localStorage.getItem("lgMask")
|
||
this.dialogLoginVisible = JSON.parse(
|
||
localStorage.getItem("dialogLoginVisible")
|
||
);
|
||
this.userName = localStorage.getItem("username");
|
||
this.navItem = JSON.parse(localStorage.getItem("params"));
|
||
//监听localstorage改变赋值
|
||
window.addEventListener("setItem", (e) => {
|
||
this.userName = localStorage.getItem("username") || ""; //用户名直接在缓存拿的
|
||
this.loginTime = localStorage.getItem("loginTime");
|
||
this.token = localStorage.token;
|
||
this.dialogLoginVisible = JSON.parse(
|
||
localStorage.getItem("dialogLoginVisible")
|
||
);
|
||
let arr = ["token", "username", "loginTime"];
|
||
if (arr.includes(e.key)) {
|
||
// this.lgMask = localStorage.getItem("lgMask")
|
||
|
||
console.log();
|
||
}
|
||
this.navItem = JSON.parse(localStorage.getItem("params"));
|
||
});
|
||
this.show = false;
|
||
|
||
this.identityLabel =
|
||
JSON.parse(localStorage.getItem("identity")).roleKey || "";
|
||
|
||
this.storeName = this.$store.state.user.userName;
|
||
},
|
||
watch: {
|
||
//监听有token 登录弹窗不弹出
|
||
token(val) {
|
||
console.log(val,"token ");
|
||
if (val) {
|
||
this.dialogLoginVisible = false;
|
||
this.$addStorageEvent(
|
||
1,
|
||
"dialogLoginVisible",
|
||
JSON.stringify(this.dialogLoginVisible)
|
||
);
|
||
this.loginstatus = false;
|
||
} else {
|
||
// this.dialogLoginVisible = false;
|
||
// this.$addStorageEvent(
|
||
// 1,
|
||
// "dialogLoginVisible",
|
||
// JSON.stringify(this.dialogLoginVisible)
|
||
// );
|
||
this.loginstatus = true;
|
||
this.userName = "";
|
||
}
|
||
},
|
||
//监听时间登录过期弹窗
|
||
loginTime(val) {
|
||
if (!val) {
|
||
localStorage.removeItem("token");
|
||
localStorage.removeItem("loginTime");
|
||
//弹出警告
|
||
if (this.$i18n.locale == "zh") {
|
||
// this.$message({
|
||
// message: "登录超时，请重新登录",
|
||
// type: "warning",
|
||
// customClass: "messageClass",
|
||
// });
|
||
} else if (this.$i18n.locale == "en") {
|
||
this.$message({
|
||
message: "Login timed out. Please log in again",
|
||
type: "warning",
|
||
customClass: "messageClass",
|
||
});
|
||
}
|
||
|
||
// this.dialogLoginVisible = true;
|
||
// this.$addStorageEvent(
|
||
// 1,
|
||
// "dialogLoginVisible",
|
||
// JSON.stringify(this.dialogLoginVisible)
|
||
// );
|
||
this.loginstatus = true;
|
||
}
|
||
},
|
||
|
||
//监听登录弹窗弹出LOading失效
|
||
dialogLoginVisible(val) {
|
||
if (val) {
|
||
this.dialogFormVisible = false;
|
||
}
|
||
this.$addStorageEvent(1, "loading", val);
|
||
},
|
||
//监听注册弹窗弹出LOading失效
|
||
dialogFormVisible(val) {
|
||
if (val) {
|
||
this.dialogLoginVisible = false;
|
||
this.$addStorageEvent(
|
||
1,
|
||
"dialogLoginVisible",
|
||
JSON.stringify(this.dialogLoginVisible)
|
||
);
|
||
} else {
|
||
this.show = false;
|
||
}
|
||
},
|
||
|
||
//监听语言切换
|
||
"$i18n.locale"(newValue) {
|
||
this.radio = this.$i18n.locale;
|
||
if (newValue == "en") {
|
||
this.langs = "简体中文";
|
||
} else if (newValue == "zh") {
|
||
this.langs = "English";
|
||
}
|
||
|
||
|
||
|
||
|
||
},
|
||
},
|
||
computed: {
|
||
//映射VUEX数据使用
|
||
...mapState({
|
||
loginUserName: (state) => state.user.userName,
|
||
}),
|
||
},
|
||
methods: {
|
||
//点击注册跳转至通知页
|
||
clickregistered() {
|
||
this.registrationNotice = true;
|
||
this.dialogLoginVisible = false;
|
||
this.$addStorageEvent(
|
||
1,
|
||
"dialogLoginVisible",
|
||
JSON.stringify(this.dialogLoginVisible)
|
||
);
|
||
},
|
||
goRegister() {
|
||
this.dialogFormVisible = true;
|
||
this.registrationNotice = false;
|
||
this.dialogLoginVisible = false;
|
||
this.$addStorageEvent(
|
||
1,
|
||
"dialogLoginVisible",
|
||
JSON.stringify(this.dialogLoginVisible)
|
||
);
|
||
},
|
||
//请求登录验证码图片
|
||
fetchCode: Debounce(async function () {
|
||
let list = await this.$API.getVerification();
|
||
let src = list.data.img;
|
||
this.codeSrc = "data:image/gif;base64," + src;
|
||
this.form.uuid = list.data.uuid;
|
||
}, 1000),
|
||
|
||
//请求注册验证码图片
|
||
fetchCodeEmail: Debounce(async function (userName, email) {
|
||
let list = await POST(userName, email);
|
||
|
||
//获取验证码后的提示信息
|
||
this.checkVerification = list.data.data;
|
||
if (list.data.code == 200) {
|
||
this.$message({
|
||
message: this.$t(`login.sendEmailCode`),
|
||
type: "success",
|
||
customClass: "messageClass",
|
||
});
|
||
} else {
|
||
//获取验证码失败清除按钮倒计时
|
||
clearTimeout(this.outTimer);
|
||
clearInterval(this.codeTimer);
|
||
//取消按钮禁用
|
||
this.codeBtn.btnStatus = false;
|
||
//按钮文字改成获取验证码
|
||
this.codeBtn.btnText = "login.getCode";
|
||
}
|
||
}, 500),
|
||
//请求重置密码验证码
|
||
fetchPasswordCode: Debounce(async function (address, email) {
|
||
this.ResetPasswordLoading = true;
|
||
let list = await POST(address, email);
|
||
// let list = await this.$API.getpasswrodCode()
|
||
if (list.data.code == 200) {
|
||
this.$message({
|
||
message: this.$t(`login.sendEmailCode`),
|
||
type: "success",
|
||
customClass: "messageClass",
|
||
});
|
||
this.dialogNewPassword = true;
|
||
this.dialogPasswordVisible = false;
|
||
} else {
|
||
// this.$message({
|
||
// message: this.$t(`login.newPasswordCodeFail`),
|
||
// type: "error",
|
||
// customClass: "messageClass",
|
||
// });
|
||
this.dialogNewPassword = false;
|
||
this.dialogPasswordVisible = true;
|
||
}
|
||
this.ResetPasswordLoading = false;
|
||
}, 500),
|
||
|
||
//请求重置密码
|
||
fetchNewPassword: Debounce(async function (address, data) {
|
||
let list = await POST(address, data);
|
||
// let list = await this.$API.getpasswrodCode()
|
||
if (list.data.code == 200) {
|
||
this.$message({
|
||
message: this.$t(`login.newPasswordSuccess`),
|
||
type: "success",
|
||
customClass: "messageClass",
|
||
});
|
||
//输入新密码弹窗隐藏 显示登录弹窗
|
||
this.dialogNewPassword = false;
|
||
this.dialogLoginVisible = true;
|
||
this.$addStorageEvent(
|
||
1,
|
||
"dialogLoginVisible",
|
||
JSON.stringify(this.dialogLoginVisible)
|
||
);
|
||
this.passwordForm.email = "";
|
||
this.passwordForm.password = "";
|
||
this.passwordForm.resetPwdCode = "";
|
||
// this.dialogPasswordVisible = false;
|
||
} else {
|
||
// this.$message({
|
||
// message: this.$t(`login.newPasswordCodeFail`),
|
||
// type: "warning",
|
||
// });
|
||
this.dialogNewPassword = true;
|
||
}
|
||
}, 500),
|
||
//请求个人中心
|
||
async fetchPersonal() {
|
||
const { data } = await this.$API.getpersonal();
|
||
|
||
if (data.code == 200) {
|
||
//拿到权限才跳转页面 关闭弹窗
|
||
this.identity = data.data.role;
|
||
this.identityLabel = data.data.role.roleKey;
|
||
//存入用户等级信息
|
||
this.$store.commit("handelIdentity", data.data.role);
|
||
localStorage.setItem("identity", JSON.stringify(data.data.role));
|
||
this.loginLoading = false;
|
||
if (this.identityLabel) {
|
||
if (this.$route.path !== "/") {
|
||
this.$router.push({
|
||
path: "/",
|
||
});
|
||
}
|
||
// 登录成功刷新更新当前页面
|
||
location.reload();
|
||
this.dialogLoginVisible = false;
|
||
this.loginstatus = false;
|
||
this.authCodeShow = false;
|
||
this.$addStorageEvent(
|
||
1,
|
||
"dialogLoginVisible",
|
||
JSON.stringify(this.dialogLoginVisible)
|
||
);
|
||
this.form.userName = "";
|
||
this.form.password = "";
|
||
this.form.uuid = "";
|
||
this.form.code = "";
|
||
} else {
|
||
//个人资料没拿到就删除token 重新登录
|
||
localStorage.removeItem("token");
|
||
this.form.userName = "";
|
||
this.form.password = "";
|
||
this.loginstatus = true;
|
||
this.dialogLoginVisible = true;
|
||
this.$addStorageEvent(
|
||
1,
|
||
"dialogLoginVisible",
|
||
JSON.stringify(this.dialogLoginVisible)
|
||
);
|
||
this.$addStorageEvent(1, "token", "");
|
||
localStorage.removeItem("username");
|
||
localStorage.setItem("identity", JSON.stringify({}));
|
||
}
|
||
|
||
this.identity = data.data.role;
|
||
this.identityLabel = data.data.role.roleKey;
|
||
//存入用户等级信息
|
||
localStorage.setItem("identity", JSON.stringify(data.data.role));
|
||
}
|
||
|
||
|
||
// this.personalList = data.data
|
||
},
|
||
//登录请求
|
||
fetchLogin: Debounce(async function (address, data) {
|
||
this.loginLoading = true;
|
||
let list = await POST(address, data);
|
||
|
||
//201 表示用户IP已变更
|
||
if (list.data.code == 201) {
|
||
//请求验证码
|
||
this.fetchCode();
|
||
this.authCodeShow = true;
|
||
this.dialogLoginVisible = true;
|
||
this.$addStorageEvent(
|
||
1,
|
||
"dialogLoginVisible",
|
||
JSON.stringify(this.dialogLoginVisible)
|
||
);
|
||
this.loginLoading = false;
|
||
return;
|
||
} else if (list.data.code == 200) {
|
||
this.token = list.data.data.access_token;
|
||
this.loginTime = list.data.data.expires_in;
|
||
this.userName = list.data.data.userName;
|
||
|
||
//存用户名 toekn 时间
|
||
this.$store.commit("handelName", list.data.data.userName);
|
||
this.storeName = list.data.data.userName;
|
||
this.$addStorageEvent(1, "username", list.data.data.userName);
|
||
this.$addStorageEvent(1, "token", list.data.data.access_token);
|
||
this.$addStorageEvent(1, "loginTime", list.data.data.expires_in);
|
||
|
||
//请求个人中心拿用户等级信息
|
||
this.fetchPersonal();
|
||
this.$addStorageEvent(1, "permissionMask", JSON.stringify(false));
|
||
} else {
|
||
this.loginLoading = false;
|
||
}
|
||
}, 500),
|
||
|
||
//调用登出接口
|
||
async handelDeleter(address, data) {
|
||
let list = await Delete(address);
|
||
this.$addStorageEvent(1, "maskShow", false);
|
||
},
|
||
//确认邮箱是否被注册
|
||
async fetchCheckMail(email) {
|
||
const data = await this.$API.getcheckMail(email);
|
||
//邮箱已被注册 就不能点击获取验证码
|
||
if (data.data.code == 301) {
|
||
this.codeBtn.btnStatus = true;
|
||
this.rewriteEmail = true; //警告邮箱已注册
|
||
} else {
|
||
this.codeBtn.btnStatus = false;
|
||
this.rewriteEmail = false;
|
||
}
|
||
},
|
||
//点击登录弹窗的取消
|
||
handelCancel() {
|
||
for (let key in this.form) {
|
||
//关闭清空
|
||
|
||
this.form[key] = null;
|
||
}
|
||
let flag = false;
|
||
this.$addStorageEvent(1, "dialogLoginVisible", JSON.stringify(flag));
|
||
this.dialogLoginVisible = false;
|
||
this.loginLoading = false;
|
||
},
|
||
|
||
//点击登录弹窗切换语言
|
||
handelRadio(value) {
|
||
this.$i18n.locale = value;
|
||
this.radio = this.$i18n.locale;
|
||
localStorage.setItem("lang", value);
|
||
},
|
||
//点击页面内切换语言
|
||
handelSwitching() {
|
||
if (this.$i18n.locale == "en") {
|
||
this.langs = "English";
|
||
this.$i18n.locale = "zh";
|
||
} else if (this.$i18n.locale == "zh") {
|
||
this.langs = "简体中文";
|
||
this.$i18n.locale = "en";
|
||
}
|
||
localStorage.setItem("lang", this.$i18n.locale);
|
||
|
||
|
||
|
||
|
||
},
|
||
//点击刷新验证码
|
||
handelCode() {
|
||
this.fetchCode();
|
||
},
|
||
//点击登录
|
||
handleSubmit() {
|
||
if (!this.form.userName) {
|
||
this.$message({
|
||
message: this.$t(`login.userNamePrompt`),
|
||
type: "error",
|
||
customClass: "messageClass",
|
||
});
|
||
return
|
||
}
|
||
|
||
if (!this.form.password) {
|
||
this.$message({
|
||
message: this.$t(`login.passwordPrompt1`),
|
||
type: "error",
|
||
customClass: "messageClass",
|
||
});
|
||
return
|
||
}
|
||
|
||
//去空格
|
||
this.form.userName = this.form.userName.trim();
|
||
this.form.password = this.form.password.trim();
|
||
|
||
if (this.form.userName !== "admin") {
|
||
|
||
//邮箱格式验证
|
||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
let isMailbox = emailRegex.test(this.form.userName);
|
||
|
||
if (!isMailbox ) {
|
||
|
||
//用户名规则1.长度限制：3<=用户名<=16; 字符限制：仅允许使用字母、数字、下划线 用户名必须以字母开头
|
||
const regex = /^[a-zA-Z][a-zA-Z0-9_]{2,15}$/; // 正则表达式
|
||
const isValid = regex.test(this.form.userName);
|
||
|
||
if (!isValid) {
|
||
// 如果输入不符合要求，可以根据具体需求给出错误提示或进行其他处理
|
||
this.$message({
|
||
message: this.$t(`login.userNamePrompt`),
|
||
type: "error",
|
||
customClass: "messageClass",
|
||
});
|
||
|
||
return;
|
||
}
|
||
}
|
||
//密码验证 8<=密码<=32 包含大小写字母、数字和特殊字符（！@#￥%……&*）
|
||
let symbol = [];
|
||
const regexPassword =
|
||
/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,32}$/; // 正则表达式
|
||
|
||
const PasswordIsValid = regexPassword.test(this.form.password);
|
||
if (!PasswordIsValid) {
|
||
// 如果输入不符合要求，可以根据具体需求给出错误提示或进行其他处理
|
||
this.$message({
|
||
message: this.$t(`login.passwordPrompt1`),
|
||
type: "error",
|
||
customClass: "messageClass",
|
||
});
|
||
|
||
return;
|
||
}
|
||
}
|
||
|
||
//加密
|
||
const form = { ...this.form };
|
||
form.password = encryption(this.form.password);
|
||
|
||
this.fetchLogin("/auth/login", form);
|
||
},
|
||
//点击关闭
|
||
handelClose() {
|
||
this.dialogLoginVisible = false;
|
||
this.$addStorageEvent(
|
||
1,
|
||
"dialogLoginVisible",
|
||
JSON.stringify(this.dialogLoginVisible)
|
||
);
|
||
},
|
||
//点击注册弹窗关闭X
|
||
handelRegister() {
|
||
this.check = false;
|
||
this.registered.userName = "";
|
||
this.registered.password = "";
|
||
this.registered.email = "";
|
||
this.registered.emailCode = "";
|
||
this.rewriteEmail = false;
|
||
},
|
||
//点击退出
|
||
handelExit() {
|
||
this.handelDeleter("/auth/logout");
|
||
localStorage.removeItem("token");
|
||
// this.$addStorageEvent(1, "token", "");
|
||
this.form.userName = "";
|
||
this.form.password = "";
|
||
this.loginstatus = true;
|
||
this.dialogLoginVisible = true;
|
||
this.$addStorageEvent(
|
||
1,
|
||
"dialogLoginVisible",
|
||
JSON.stringify(this.dialogLoginVisible)
|
||
);
|
||
this.$addStorageEvent(1, "token", "");
|
||
localStorage.removeItem("username");
|
||
// this.$addStorageEvent(1, "permissionMask", JSON.stringify(false));
|
||
// let identity={
|
||
// roleId:0,
|
||
// roleName:"匿名用户",
|
||
// roleKey:"guest"
|
||
|
||
// }
|
||
localStorage.setItem("identity", JSON.stringify({}));
|
||
},
|
||
//点击获取邮箱验证码
|
||
handelEmailCode() {
|
||
this.registeredEmailCode.userName = this.registered.userName;
|
||
this.registeredEmailCode.email = this.registered.email;
|
||
if (
|
||
//必须输入邮箱和用户名
|
||
!(this.registeredEmailCode.userName && this.registeredEmailCode.email)
|
||
) {
|
||
this.$message({
|
||
message: this.$t(`login.warningEmailCode`),
|
||
type: "error",
|
||
customClass: "messageClass",
|
||
});
|
||
return;
|
||
}
|
||
this.fetchCodeEmail(`/auth/emailcode`, this.registeredEmailCode);
|
||
|
||
// 获取验证码后禁用按钮
|
||
this.codeBtn.btnStatus = true;
|
||
// 按钮倒计时
|
||
this.outTimer = setTimeout(() => {
|
||
this.countDown(60);
|
||
}, 5);
|
||
},
|
||
//点击注册弹窗的注册
|
||
handelRegisteredEmail() {
|
||
//判断同意条款是否选中
|
||
if (!this.check) {
|
||
this.show = true;
|
||
// this.registered.userName = "";
|
||
// this.registered.password = "";
|
||
this.$message({
|
||
message: this.$t(`login.check1`),
|
||
type: "warning",
|
||
customClass: "messageClass",
|
||
});
|
||
|
||
return;
|
||
} else {
|
||
this.show = false;
|
||
}
|
||
//判断密码不能为空
|
||
if (!this.registered.password) {
|
||
this.$message({
|
||
message: this.$t(`login.passwordValidation`),
|
||
type: "error",
|
||
customClass: "messageClass",
|
||
});
|
||
return;
|
||
}
|
||
//判断两次密码必须相同
|
||
if (this.registered.password !== this.ConfirmNewPsd) {
|
||
this.$message({
|
||
message: this.$t(`login.inconsistency`),
|
||
type: "warning",
|
||
customClass: "messageClass",
|
||
});
|
||
return;
|
||
}
|
||
|
||
//判断验证码不能为空
|
||
if (!this.registered.emailCode) {
|
||
this.$message({
|
||
message: this.$t(`login.CodeFailNull`),
|
||
type: "error",
|
||
customClass: "messageClass",
|
||
});
|
||
return;
|
||
}
|
||
//判断邮箱不能为空或者格式是否正确
|
||
// let reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
|
||
let reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
||
if (this.registered.email == "" || !reg.test(this.registered.email)) {
|
||
//弹出警告
|
||
if (this.$i18n.locale == "zh") {
|
||
this.$message({
|
||
message: "请检查邮箱格式是否正确（邮箱不能为空）！",
|
||
type: "error",
|
||
});
|
||
} else if (this.$i18n.locale == "en") {
|
||
this.$message({
|
||
message:
|
||
"Please check the mailbox is correct (mailbox cannot be empty)!",
|
||
type: "error",
|
||
customClass: "messageClass",
|
||
});
|
||
}
|
||
|
||
return;
|
||
}
|
||
if (this.rewriteEmail) {
|
||
//判断邮箱已被注册不能发起请求
|
||
//弹出警告
|
||
this.$message({
|
||
message: this.$t(`login.rewriteEmail`),
|
||
type: "error",
|
||
customClass: "messageClass",
|
||
});
|
||
|
||
return;
|
||
}
|
||
//判断用户是否点击了获取验证码 没有获取验证码随便输入不能点击注册\
|
||
if (!this.checkVerification && !this.codeBtn.btnStatus) {
|
||
this.$message({
|
||
message: this.$t(`login.checkVerification`),
|
||
type: "error",
|
||
customClass: "messageClass",
|
||
});
|
||
return;
|
||
}
|
||
//用户名规则1.长度限制：3<=用户名<=16; 字符限制：仅允许使用字母、数字、下划线 用户名必须以字母开头
|
||
const regex = /^[a-zA-Z][a-zA-Z0-9_]{2,15}$/; // 正则表达式
|
||
const isValid = regex.test(this.registered.userName);
|
||
if (!isValid) {
|
||
// 如果输入不符合要求，可以根据具体需求给出错误提示或进行其他处理
|
||
this.$message({
|
||
message: this.$t(`login.userNamePrompt`),
|
||
type: "error",
|
||
customClass: "messageClass",
|
||
});
|
||
|
||
return;
|
||
}
|
||
// 密码验证 8<=密码<=32 包含大小写字母、数字和特殊字符（！@#￥%……&*）
|
||
const regexPassword =
|
||
/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,32}$/; // 正则表达式
|
||
const PasswordIsValid = regexPassword.test(this.registered.password);
|
||
if (!PasswordIsValid) {
|
||
// 如果输入不符合要求，可以根据具体需求给出错误提示或进行其他处理
|
||
this.$message({
|
||
message: this.$t(`login.passwordPrompt1`),
|
||
type: "error",
|
||
customClass: "messageClass",
|
||
});
|
||
|
||
return;
|
||
}
|
||
|
||
const registered = { ...this.registered };
|
||
|
||
//加密
|
||
registered.password = encryption(this.registered.password);
|
||
|
||
this.fetchRegistered("/auth/register", registered);
|
||
},
|
||
|
||
//点击帮助
|
||
handelHelp() {
|
||
this.$router.push("help");
|
||
},
|
||
//个人中心
|
||
handelPeople() {
|
||
this.$router.push("/personal");
|
||
},
|
||
//注册请求
|
||
async fetchRegistered(address, data) {
|
||
let list = await POST(address, data);
|
||
|
||
//注册成功关闭注册弹窗 邮箱输入码弹窗 弹出登录弹窗
|
||
if (list.data.code == 200) {
|
||
this.dialogFormVisible = false;
|
||
this.dialogLoginVisible = true;
|
||
this.$addStorageEvent(
|
||
1,
|
||
"dialogLoginVisible",
|
||
JSON.stringify(this.dialogLoginVisible)
|
||
);
|
||
this.dialogregisterCode = false;
|
||
this.registered.userName = "";
|
||
this.registered.password = "";
|
||
this.registered.email = "";
|
||
this.registered.emailCode = "";
|
||
this.ConfirmNewPsd = "";
|
||
this.check = false;
|
||
this.rewriteEmail = false;
|
||
}
|
||
},
|
||
//点击获取重置密码验证码
|
||
handelResetPasswordEmail() {
|
||
if (!this.passwordForm.email) return;
|
||
|
||
this.passwordCode.email = this.passwordForm.email;
|
||
this.fetchPasswordCode(`/auth/resetPwdCode`, this.passwordCode);
|
||
// if (code !== 200) {
|
||
// this.$message({
|
||
// message: this.$t(`login.newPasswordCodeFail`),
|
||
// type: "warning",
|
||
// });
|
||
// return;
|
||
// }
|
||
|
||
// this.dialogNewPassword = true;
|
||
// this.dialogPasswordVisible = false;
|
||
},
|
||
//输入新密码，确认重置密码
|
||
handelNewPassword() {
|
||
//密码验证 8<=密码<=32 包含大小写字母、数字和特殊字符（！@#￥%……&*）
|
||
const regexPassword =
|
||
/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,32}$/; // 正则表达式
|
||
const PasswordIsValid = regexPassword.test(this.passwordForm.password);
|
||
if (!PasswordIsValid) {
|
||
// 如果输入不符合要求，可以根据具体需求给出错误提示或进行其他处理
|
||
this.$message({
|
||
message: this.$t(`login.passwordPrompt1`),
|
||
type: "error",
|
||
customClass: "messageClass",
|
||
});
|
||
|
||
return;
|
||
}
|
||
|
||
//验证两次密码是否一致
|
||
if (this.passwordForm.password !== this.ConfirmNewPassword) {
|
||
this.$message({
|
||
message: this.$t(`login.inconsistency`),
|
||
type: "warning",
|
||
customClass: "messageClass",
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!this.passwordForm.resetPwdCode) {
|
||
this.$message({
|
||
message: this.$t(`login.CodeFailNull`),
|
||
type: "warning",
|
||
customClass: "messageClass",
|
||
});
|
||
return;
|
||
}
|
||
|
||
const passwordForm = { ...this.passwordForm };
|
||
|
||
//加密
|
||
passwordForm.password = encryption(this.passwordForm.password);
|
||
|
||
this.fetchNewPassword("/auth/resetPwd", passwordForm);
|
||
},
|
||
//判断CheckBOX是否选中
|
||
checkbox(e) {
|
||
// this.check = e.target.checked;
|
||
this.check = !this.check;
|
||
},
|
||
//点击登录界面的重置密码按钮
|
||
handelResetPassword() {
|
||
this.dialogPasswordVisible = true;
|
||
this.dialogLoginVisible = false;
|
||
this.$addStorageEvent(
|
||
1,
|
||
"dialogLoginVisible",
|
||
JSON.stringify(this.dialogLoginVisible)
|
||
);
|
||
},
|
||
//点击注册界面的登录按钮
|
||
handelLogin() {
|
||
this.dialogLoginVisible = true;
|
||
this.dialogFormVisible = false;
|
||
this.$addStorageEvent(
|
||
1,
|
||
"dialogLoginVisible",
|
||
JSON.stringify(this.dialogLoginVisible)
|
||
);
|
||
},
|
||
//验证码倒计时
|
||
countDown(val) {
|
||
//判断定时器是否存在
|
||
if (this.codeTimer) {
|
||
clearInterval(this.codeTimer);
|
||
}
|
||
//按钮文字改成发送中
|
||
this.codeBtn.btnText = "login.sending";
|
||
this.codeBtn.btnStatus = false;
|
||
//setTiemOut 执行一次
|
||
// setInterval 不断执行，需要条件才会停止
|
||
let tim = val;
|
||
this.codeTimer = setInterval(() => {
|
||
tim--;
|
||
if (tim === 0) {
|
||
clearInterval(this.codeTimer);
|
||
this.codeBtn.btnStatus = false;
|
||
//按钮文字改成获取验证码
|
||
this.codeBtn.btnText = "login.getCode";
|
||
} else {
|
||
this.codeBtn.btnStatus = true;
|
||
this.codeBtn.btnText = tim;
|
||
}
|
||
}, 1000);
|
||
},
|
||
//邮箱失焦验证是否注册过
|
||
handelFocus() {
|
||
setTimeout(() => {
|
||
//添加定时器判断 失焦时要判断同时未关闭弹窗
|
||
if (this.registered.email && this.dialogFormVisible) {
|
||
this.fetchCheckMail(this.registered.email);
|
||
}
|
||
}, 100);
|
||
},
|
||
|
||
//清除倒计时
|
||
clearCountDown() {
|
||
this.codeBtn.btnStatus = false;
|
||
this.codeBtn.btnText = "login.getCode";
|
||
//清除倒计时
|
||
clearInterval(this.codeTimer);
|
||
},
|
||
|
||
//跳转页面
|
||
handelJump(address) {
|
||
this.$router.push(address);
|
||
},
|
||
},
|
||
beforeDestroy() {
|
||
this.clearCountDown();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped >
|
||
.header {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 60px;
|
||
// background-color: red;
|
||
// background: lavender;
|
||
// background: #fff;
|
||
// outline: 1px solid red;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: fixed;
|
||
line-height: 60px;
|
||
color: #b3c0d1;
|
||
left: 0%;
|
||
top: 0%;
|
||
z-index: 2000;
|
||
padding: 0px 20px;
|
||
// border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||
background: #383d71;
|
||
box-shadow: 0px 2px 10px 2px #000;
|
||
.headerNavBox {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
// background: red;
|
||
padding: 0px 30px;
|
||
height: 100%;
|
||
|
||
// 头部导航菜单样式设置
|
||
.el-menu {
|
||
background: none;
|
||
::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title {
|
||
color: #fff;
|
||
border: none !important;
|
||
height: 100%;
|
||
font-size: 14px;
|
||
}
|
||
.el-menu-item {
|
||
color: #fff;
|
||
border: none !important;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.el-menu-item:hover {
|
||
background: none;
|
||
color: #f7931a !important;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.el-menu--horizontal .el-menu .el-menu-item,
|
||
.el-menu--horizontal .el-menu .el-submenu__title {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// // 头部导航菜单样式设置 二级导航文字颜色设置
|
||
::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title {
|
||
// color: #fff;
|
||
// background: none ;
|
||
font-size: 14px;
|
||
}
|
||
.el-menu.el-menu--horizontal {
|
||
border: none;
|
||
}
|
||
}
|
||
// 头部导航菜单样式设置
|
||
::v-deep .el-menu--popup {
|
||
background: none !important;
|
||
}
|
||
|
||
// 头部导航菜单样式设置
|
||
::v-deep .el-menu--popup-bottom-start {
|
||
background: none !important;
|
||
}
|
||
// 头部导航菜单样式设置
|
||
// ::v-deep .el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title{
|
||
|
||
// font-size: 14px;
|
||
// background: rgba(0,0,0,0.8) ;
|
||
// color: #fff ;
|
||
// }
|
||
// // 头部导航菜单样式设置
|
||
// .el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title{
|
||
// font-size: 14px;
|
||
// background: rgba(0,0,0,0.8) ;
|
||
// color: #fff ;
|
||
// }
|
||
// // 头部导航菜单样式设置
|
||
// ::v-deep .el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title {
|
||
// font-size: 14px;
|
||
// background: rgba(0,0,0,0.8) ;
|
||
// color: #fff ;
|
||
// }
|
||
.registrationNoticeBox {
|
||
height: 200px;
|
||
p {
|
||
color: rgba(0, 0, 0, 0.8) !important;
|
||
margin-top: 10px !important;
|
||
}
|
||
}
|
||
|
||
.langs {
|
||
// outline: 1px solid red;
|
||
cursor: pointer;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.headList2 .langs:hover {
|
||
color: #f7931a;
|
||
}
|
||
.el-dialog {
|
||
z-index: 9999;
|
||
}
|
||
.headList,
|
||
.headList2 {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
color: rgba(0, 0, 0, 0.5);
|
||
padding-inline-start: 0px;
|
||
margin-block-end: 0px;
|
||
margin-block-start: 0px;
|
||
top: 0px;
|
||
color: #fff;
|
||
}
|
||
.headList {
|
||
left: 50px;
|
||
}
|
||
|
||
.headList2 {
|
||
right: 50px;
|
||
}
|
||
::-webkit-scrollbar {
|
||
/* //隐藏滚动条 */
|
||
width: 0 !important;
|
||
}
|
||
::-webkit-scrollbar {
|
||
/* //隐藏滚动条 */
|
||
width: 0 !important;
|
||
height: 0;
|
||
}
|
||
|
||
.header li {
|
||
list-style: none;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.header li:hover {
|
||
// color: #000;
|
||
color: #f7931a;
|
||
}
|
||
.headList li {
|
||
margin-left: 15px;
|
||
}
|
||
.headList2 li {
|
||
margin-left: 15px;
|
||
}
|
||
.headList2 li {
|
||
padding: 5px 5px;
|
||
}
|
||
.headList li {
|
||
padding: 5px 5px;
|
||
}
|
||
.registered {
|
||
/* outline: 1px solid red; */
|
||
text-align: center;
|
||
outline: 1px solid rgba(0, 0, 0, 0.2);
|
||
}
|
||
/* 注册弹窗样式 */
|
||
.el-dialog {
|
||
z-index: 999999;
|
||
}
|
||
.registeredBox {
|
||
/* background: hotpink; */
|
||
z-index: 99998 !important;
|
||
width: 1000px;
|
||
margin: auto;
|
||
border: none;
|
||
outline: none;
|
||
/* background: #b3c0d1; */
|
||
text-align: left;
|
||
}
|
||
.registeredForm {
|
||
/* background: gold; */
|
||
margin-top: -30px;
|
||
}
|
||
.el-form-item {
|
||
/* background: paleturquoise; */
|
||
margin: 5px;
|
||
// height: 100px;
|
||
}
|
||
.registeredUserBox {
|
||
// outline: 1px solid red;
|
||
height: 105px;
|
||
position: relative;
|
||
.prompt {
|
||
position: absolute;
|
||
top: 80px;
|
||
left: 0px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
// display: none;
|
||
font-size: 12px;
|
||
color: #ff6365;
|
||
margin: 0;
|
||
}
|
||
|
||
// .inputBox:hover + .prompt{
|
||
// display: inline-block;
|
||
// }
|
||
}
|
||
.registeredPasswordBox {
|
||
height: 105px;
|
||
position: relative;
|
||
.prompt {
|
||
position: absolute;
|
||
top: 80px;
|
||
left: 0px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
margin: 0;
|
||
// display: none;
|
||
font-size: 12px;
|
||
color: #ff6365;
|
||
}
|
||
}
|
||
|
||
/* ----------注册弹窗勾选--------------- */
|
||
.checkBox {
|
||
display: flex;
|
||
// outline: 1px solid red;
|
||
/* outline: 1px solid red; */
|
||
width: 100%;
|
||
height: 40px;
|
||
position: relative;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
.checkBox span {
|
||
display: inline-block;
|
||
/* width: 500px; */
|
||
/* height: 50px; */
|
||
line-height: 18px;
|
||
/* outline: 1px solid red; */
|
||
font-size: 12px;
|
||
margin-left: 5px;
|
||
padding: 0 5px;
|
||
text-align: left;
|
||
}
|
||
|
||
.describe {
|
||
height: 25px;
|
||
/* outline: 1px solid red; */
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
/* margin-top: -10px; */
|
||
/* background: #b3c0d1; */
|
||
}
|
||
.describe p:nth-of-type(1) {
|
||
color: #ff6365;
|
||
position: absolute;
|
||
top: -16px;
|
||
left: 30px;
|
||
}
|
||
.describe p:nth-of-type(2) {
|
||
// margin-top: 10px;
|
||
padding: 5px 0px;
|
||
}
|
||
.describe p {
|
||
// outline: 1px solid red;
|
||
/* outline: 1px solid red; */
|
||
line-height: 15px;
|
||
margin: 2px 0px;
|
||
text-align: left;
|
||
font-size: 12px;
|
||
}
|
||
.mandatory {
|
||
color: #ff6365;
|
||
}
|
||
.emailCodeButton {
|
||
// outline: 1px solid red;
|
||
// padding: 5px 10px;
|
||
|
||
color: #67c23a;
|
||
background: #f0f9eb;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
.emailCodeButton:hover {
|
||
background: #fdf6ec;
|
||
color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
.forbban {
|
||
// background: rgba(0, 0, 0, 0.2);
|
||
width: 100px;
|
||
text-align: center;
|
||
// padding: 0px 10px;
|
||
// color: #fff;
|
||
// outline: 1px solid rgba(0, 0, 0, 0.2);
|
||
}
|
||
.rewriteEmail {
|
||
display: inline-block;
|
||
color: #ff6365;
|
||
// outline: 1px solid red;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
position: absolute;
|
||
left: 6px;
|
||
top: 75px;
|
||
}
|
||
/* -------------登录弹窗样式---------------------- */
|
||
.loginBOx {
|
||
/* background: #ff6365; */
|
||
z-index: 99998 !important;
|
||
width: 60%;
|
||
/* height: 60%; */
|
||
margin: 0 auto;
|
||
}
|
||
.loginForm {
|
||
/* background: goldenrod; */
|
||
margin-top: -40px;
|
||
.authCode {
|
||
// outline: 1px solid red;
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
|
||
// background: gold;
|
||
margin-top: 10px;
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// flex-wrap: wrap;
|
||
// justify-content: space-between;
|
||
div:nth-of-type(1) {
|
||
// outline: 1px solid red;
|
||
width: 100%;
|
||
}
|
||
|
||
div:nth-of-type(2) {
|
||
// outline: 1px solid red;
|
||
|
||
.codeImg {
|
||
// position: absolute;
|
||
// top: 0px;
|
||
// right: 0px;
|
||
// outline: 1px solid red;
|
||
margin-top: 5px;
|
||
width: 150px;
|
||
height: 39px;
|
||
}
|
||
.icon {
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
// outline: 1px solid red;
|
||
position: absolute;
|
||
top: 95px;
|
||
left: 157px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* .loginDescribe{
|
||
background: #b3c0d1;
|
||
} */
|
||
.loginDescribe p {
|
||
line-height: 10px;
|
||
font-size: 11px;
|
||
}
|
||
.loginDescribe p span {
|
||
color: rgba(0, 0, 0, 0.8);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
}
|
||
.el-form-item span {
|
||
font-size: 12px;
|
||
/* outline: 1px solid red; */
|
||
}
|
||
.langBox {
|
||
// outline: 1px solid red;
|
||
/* outline: 1px solid red; */
|
||
height: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: left;
|
||
padding: 5px 0px;
|
||
}
|
||
.radio {
|
||
/* outline: 1px solid red; */
|
||
font-size: 10px;
|
||
/* color: red; */
|
||
}
|
||
/* .el-form-item .el-input__inner{
|
||
margin-top: -20px;
|
||
} */
|
||
.dialog-footer {
|
||
/* background: #ff6365; */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: right;
|
||
margin-top: -30px;
|
||
}
|
||
.loadingBtn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.userBox {
|
||
// outline: 1px solid red;
|
||
height: 100px;
|
||
position: relative;
|
||
|
||
.prompt {
|
||
// outline: 1px solid red;
|
||
position: absolute;
|
||
top: 80px;
|
||
left: 0px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
display: none;
|
||
font-size: 12px;
|
||
color: #ff6365;
|
||
}
|
||
.enterName:hover + .prompt {
|
||
display: inline-block;
|
||
transition: 0.5s;
|
||
}
|
||
}
|
||
|
||
.passwordBox1 {
|
||
// outline: 1px solid red;
|
||
height: 110px;
|
||
position: relative;
|
||
|
||
.prompt {
|
||
// outline: 1px solid red;
|
||
position: absolute;
|
||
top: 80px;
|
||
left: 0px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
color: #ff6365;
|
||
display: none;
|
||
font-size: 12px;
|
||
}
|
||
.enterName:hover + .prompt {
|
||
display: inline-block;
|
||
transition: 0.5s;
|
||
}
|
||
}
|
||
|
||
/* -----------重置密码弹窗---------------- */
|
||
.passwordBox {
|
||
/* background: #b3c0d1; */
|
||
width: 70%;
|
||
margin: 0 auto;
|
||
z-index: 99998 !important;
|
||
}
|
||
.passwordForm {
|
||
/* background: #ff6365; */
|
||
margin-top: -40px;
|
||
}
|
||
.passwordBox p {
|
||
/* outline: 1px solid red; */
|
||
line-height: 15px;
|
||
color: #ff6365;
|
||
margin-top: -5px;
|
||
padding-left: 2px;
|
||
font-size: 12px;
|
||
}
|
||
// 登录才能查看页面的遮罩
|
||
.loginMain {
|
||
z-index: 9999 !important;
|
||
position: fixed;
|
||
top: 0px;
|
||
right: 0px;
|
||
width: 84%;
|
||
height: 100vh;
|
||
// outline: 1px solid red;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
p {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-weight: 600;
|
||
// color: #000;
|
||
}
|
||
.lodinMaskBox {
|
||
// outline: 1px solid red;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
// width: 100%;
|
||
}
|
||
.clickTag {
|
||
display: inline-block;
|
||
// outline: 1px solid red;
|
||
padding: 0px 30px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
.header .v-modal {
|
||
//所有弹窗的默认遮罩
|
||
z-index: 99997 !important;
|
||
}
|
||
.el-input__inner {
|
||
border-color: rgba(0, 0, 0, 0.3);
|
||
transition: 0.3s;
|
||
margin-top: -20px;
|
||
// background: red;
|
||
}
|
||
::v-deep.el-popper .popper__arrow,
|
||
.el-popper .popper__arrow::after {
|
||
display: none;
|
||
}
|
||
// .el-popper[x-placement^=bottom] .popper__arrow{
|
||
// display: none !important;
|
||
// }
|
||
// .el-popper .popper__arrow::after{
|
||
// display: none !important;
|
||
// }
|
||
.el-input__inner:hover {
|
||
border-color: rgba(0, 0, 0, 0.6);
|
||
// color: #f7931a;
|
||
}
|
||
|
||
// ---------登录后显示的选择导航-------------------
|
||
.loginMenu {
|
||
position: relative;
|
||
color: rgba(0, 0, 0, 0.5);
|
||
color: #fff;
|
||
// z-index: 99999 !important;
|
||
}
|
||
.header-new-dro {
|
||
//点击用户名 下拉框层级改到最高 高于遮罩
|
||
|
||
z-index: 99999 !important;
|
||
}
|
||
|
||
.loginMenu:hover {
|
||
color: #f7931a;
|
||
// font-weight: 600;
|
||
}
|
||
.header-new-dro {
|
||
background: rgba(0, 0, 0, 0.7);
|
||
margin-left: 20px;
|
||
// position: absolute;
|
||
// width: 7%;
|
||
// right: 0px;
|
||
margin-left: 110px !important;
|
||
// outline: 1px solid red;
|
||
z-index: 99;
|
||
}
|
||
.el-dropdown-menu__item {
|
||
line-height: 25px;
|
||
padding: 0px 10px !important;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
}
|
||
|
||
.el-popper .popper__arrow,
|
||
.el-popper .popper__arrow::after {
|
||
background: #67c23a;
|
||
position: absolute;
|
||
left: -200px;
|
||
opacity: 0;
|
||
}
|
||
</style>
|
||
|
||
<style >
|
||
/* 头部导航菜单样式设置 */
|
||
.el-menu--horizontal .el-menu .el-menu-item,
|
||
.el-menu--horizontal .el-menu .el-submenu__title {
|
||
font-size: 14px;
|
||
background: rgba(0, 0, 0, 0.8) !important;
|
||
color: #fff;
|
||
}
|
||
.el-menu--horizontal .el-menu .el-menu-item:hover,
|
||
.el-menu--horizontal:hover .el-menu:hover .el-submenu__title:hover {
|
||
color: #f7931a !important;
|
||
background: rgba(0, 0, 0, 0.9) !important;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.el-menu--popup {
|
||
/* background: #fff !important; */
|
||
padding: 0px;
|
||
padding-top: 5px;
|
||
background: none !important;
|
||
}
|
||
</style> |