|
|
@@ -2,31 +2,15 @@
|
|
|
<div class="login-container">
|
|
|
<div class="flexBox">
|
|
|
<div>
|
|
|
- <el-form
|
|
|
- ref="loginForm"
|
|
|
- :model="loginForm"
|
|
|
- :rules="loginRules"
|
|
|
- class="login-form"
|
|
|
- auto-complete="on"
|
|
|
- label-position="left"
|
|
|
- @submit.native.prevent="handleLogin"
|
|
|
- >
|
|
|
+ <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left" @submit.native.prevent="handleLogin">
|
|
|
<div class="flex">
|
|
|
<div class="image-container">
|
|
|
<div class="empty-height">
|
|
|
<img class="logo" src="@/assets/login/logo.png" alt="" />
|
|
|
</div>
|
|
|
- <el-carousel
|
|
|
- :interval="5000"
|
|
|
- arrow="always"
|
|
|
- height="440px"
|
|
|
- class="carousel"
|
|
|
- >
|
|
|
+ <el-carousel :interval="5000" arrow="always" height="440px" class="carousel">
|
|
|
<el-carousel-item v-for="item in banner" :key="item.id">
|
|
|
- <el-image
|
|
|
- :z-index="1"
|
|
|
- :src="imageURL + item.imgCarouselUrl"
|
|
|
- ></el-image>
|
|
|
+ <el-image :z-index="1" :src="imageURL + item.imgCarouselUrl"></el-image>
|
|
|
</el-carousel-item>
|
|
|
</el-carousel>
|
|
|
</div>
|
|
|
@@ -34,18 +18,10 @@
|
|
|
<div class="empty-height" />
|
|
|
<div class="form-container">
|
|
|
<div class="flex title">
|
|
|
- <div
|
|
|
- class="title-item"
|
|
|
- :class="acitve == 'pas' ? 'acitve' : ''"
|
|
|
- @click="hanleTabs('pas', 'account')"
|
|
|
- >
|
|
|
+ <div class="title-item" :class="acitve == 'pas' ? 'acitve' : ''" @click="hanleTabs('pas', 'account')">
|
|
|
密码登录
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="title-item"
|
|
|
- :class="acitve == 'wei' ? 'acitve' : ''"
|
|
|
- @click="hanleTabs('wei', 'mobile')"
|
|
|
- >
|
|
|
+ <div class="title-item" :class="acitve == 'wei' ? 'acitve' : ''" @click="hanleTabs('wei', 'mobile')">
|
|
|
手机号登录
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -54,173 +30,72 @@
|
|
|
<div v-if="acitve == 'pas'">
|
|
|
<el-form-item prop="username" class="input-box">
|
|
|
<span class="svg-container">
|
|
|
- <el-image
|
|
|
- style="width: 20px; height: 20px"
|
|
|
- :src="require('@/assets/login/icon_001.png')"
|
|
|
- fit="contain "
|
|
|
- ></el-image>
|
|
|
+ <el-image style="width: 20px; height: 20px" :src="require('@/assets/login/icon_001.png')" fit="contain "></el-image>
|
|
|
</span>
|
|
|
- <el-input
|
|
|
- ref="username"
|
|
|
- v-model="loginForm.username"
|
|
|
- placeholder="请输入用户名"
|
|
|
- name="username"
|
|
|
- type="text"
|
|
|
- tabindex="1"
|
|
|
- auto-complete="on"
|
|
|
- />
|
|
|
+ <el-input ref="username" v-model="loginForm.username" placeholder="请输入用户名" name="username" type="text" tabindex="1" auto-complete="on" />
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item prop="password" class="input-box">
|
|
|
<span class="svg-container">
|
|
|
- <el-image
|
|
|
- style="width: 20px; height: 20px"
|
|
|
- :src="require('@/assets/login/icon_002.png')"
|
|
|
- fit="contain "
|
|
|
- ></el-image>
|
|
|
+ <el-image style="width: 20px; height: 20px" :src="require('@/assets/login/icon_002.png')" fit="contain "></el-image>
|
|
|
</span>
|
|
|
- <el-input
|
|
|
- :key="passwordType"
|
|
|
- ref="password"
|
|
|
- v-model="loginForm.password"
|
|
|
- :type="passwordType"
|
|
|
- placeholder="请输入密码"
|
|
|
- name="password"
|
|
|
- tabindex="2"
|
|
|
- auto-complete="off"
|
|
|
- @keyup.enter.native="handleLogin"
|
|
|
- />
|
|
|
+ <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="请输入密码" name="password" tabindex="2" auto-complete="off" @keyup.enter.native="handleLogin" />
|
|
|
<span class="show-pwd" @click="showPwd">
|
|
|
- <svg-icon
|
|
|
- :icon-class="
|
|
|
+ <svg-icon :icon-class="
|
|
|
passwordType === 'password' ? 'eye' : 'eye-open'
|
|
|
- "
|
|
|
- />
|
|
|
+ " />
|
|
|
</span>
|
|
|
</el-form-item>
|
|
|
|
|
|
<div class="input-box">
|
|
|
<el-form-item prop="codeValue">
|
|
|
<span class="svg-container">
|
|
|
- <el-image
|
|
|
- style="width: 20px; height: 20px"
|
|
|
- :src="require('@/assets/login/icon_003.png')"
|
|
|
- fit="contain "
|
|
|
- ></el-image>
|
|
|
+ <el-image style="width: 20px; height: 20px" :src="require('@/assets/login/icon_003.png')" fit="contain "></el-image>
|
|
|
</span>
|
|
|
- <el-input
|
|
|
- ref="codeValue"
|
|
|
- v-model="loginForm.codeValue"
|
|
|
- placeholder="请输入验证码"
|
|
|
- name="codeValue"
|
|
|
- type="text"
|
|
|
- tabindex="3"
|
|
|
- auto-complete="off"
|
|
|
- @keyup.enter.native="handleLogin"
|
|
|
- />
|
|
|
+ <el-input ref="codeValue" v-model="loginForm.codeValue" placeholder="请输入验证码" name="codeValue" type="text" tabindex="3" auto-complete="off" @keyup.enter.native="handleLogin" />
|
|
|
</el-form-item>
|
|
|
<div class="code" @click.stop="getCode">
|
|
|
- <img
|
|
|
- :src="'data:image/jpeg;base64,' + codeImage"
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <img :src="'data:image/jpeg;base64,' + codeImage" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="checkbox">
|
|
|
<div class="check-yes">
|
|
|
- <el-image
|
|
|
- style="width: 16px; height: 16px"
|
|
|
- :src="require('@/assets/login/icon_004.png')"
|
|
|
- fit="contain "
|
|
|
- ></el-image>
|
|
|
- <el-image
|
|
|
- v-if="isRemenberPw"
|
|
|
- class="yes"
|
|
|
- style="width: 11px; height: 11px"
|
|
|
- :src="require('@/assets/login/icon_005.png')"
|
|
|
- fit="contain "
|
|
|
- ></el-image>
|
|
|
+ <el-image style="width: 16px; height: 16px" :src="require('@/assets/login/icon_004.png')" fit="contain "></el-image>
|
|
|
+ <el-image v-if="isRemenberPw" class="yes" style="width: 11px; height: 11px" :src="require('@/assets/login/icon_005.png')" fit="contain "></el-image>
|
|
|
</div>
|
|
|
- <el-checkbox v-model="isRemenberPw"
|
|
|
- >记住账号密码</el-checkbox
|
|
|
- >
|
|
|
+ <el-checkbox v-model="isRemenberPw">记住账号密码</el-checkbox>
|
|
|
</div>
|
|
|
|
|
|
<div class="button-container">
|
|
|
- <el-button
|
|
|
- :loading="loading"
|
|
|
- type="primary"
|
|
|
- @click.native.prevent="handleLogin"
|
|
|
- >登录</el-button
|
|
|
- >
|
|
|
+ <el-button :loading="loading" type="primary" @click.native.prevent="handleLogin">登录</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 手机号登录 -->
|
|
|
<div v-else class="pas">
|
|
|
<el-form-item prop="username" class="input-box">
|
|
|
<span class="svg-container">
|
|
|
- <el-image
|
|
|
- style="width: 20px; height: 20px"
|
|
|
- :src="require('@/assets/login/icon_001.png')"
|
|
|
- fit="contain "
|
|
|
- ></el-image>
|
|
|
+ <el-image style="width: 20px; height: 20px" :src="require('@/assets/login/icon_001.png')" fit="contain "></el-image>
|
|
|
</span>
|
|
|
- <el-input
|
|
|
- ref="username"
|
|
|
- v-model="loginForm.username"
|
|
|
- placeholder="请输入手机号"
|
|
|
- name="username"
|
|
|
- type="text"
|
|
|
- tabindex="1"
|
|
|
- auto-complete="on"
|
|
|
- />
|
|
|
+ <el-input ref="username" v-model="loginForm.username" placeholder="请输入手机号" name="username" type="text" tabindex="1" auto-complete="on" />
|
|
|
</el-form-item>
|
|
|
<div class="input-box">
|
|
|
<el-form-item prop="codeValue">
|
|
|
<span class="svg-container">
|
|
|
- <el-image
|
|
|
- style="width: 20px; height: 20px"
|
|
|
- :src="require('@/assets/login/icon_003.png')"
|
|
|
- fit="contain "
|
|
|
- ></el-image>
|
|
|
+ <el-image style="width: 20px; height: 20px" :src="require('@/assets/login/icon_003.png')" fit="contain "></el-image>
|
|
|
</span>
|
|
|
- <el-input
|
|
|
- ref="codeValue"
|
|
|
- v-model="loginForm.codeValue"
|
|
|
- placeholder="请输入验证码"
|
|
|
- name="codeValue"
|
|
|
- type="text"
|
|
|
- tabindex="3"
|
|
|
- auto-complete="off"
|
|
|
- @keyup.enter.native="handleLogin"
|
|
|
- />
|
|
|
+ <el-input ref="codeValue" v-model="loginForm.codeValue" placeholder="请输入验证码" name="codeValue" type="text" tabindex="3" auto-complete="off" @keyup.enter.native="handleLogin" />
|
|
|
</el-form-item>
|
|
|
<div class="code" @click.stop="getCode">
|
|
|
- <img
|
|
|
- :src="'data:image/jpeg;base64,' + codeImage"
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <img :src="'data:image/jpeg;base64,' + codeImage" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="input-box">
|
|
|
<el-form-item prop="smsCode">
|
|
|
<span class="svg-container">
|
|
|
- <el-image
|
|
|
- style="width: 20px; height: 20px"
|
|
|
- :src="require('@/assets/login/icon_003.png')"
|
|
|
- fit="contain "
|
|
|
- ></el-image>
|
|
|
+ <el-image style="width: 20px; height: 20px" :src="require('@/assets/login/icon_003.png')" fit="contain "></el-image>
|
|
|
</span>
|
|
|
- <el-input
|
|
|
- ref="smsCode"
|
|
|
- v-model="loginForm.smsCode"
|
|
|
- placeholder="请输入短信验证码"
|
|
|
- name="smsCode"
|
|
|
- type="text"
|
|
|
- tabindex="3"
|
|
|
- auto-complete="off"
|
|
|
- />
|
|
|
+ <el-input ref="smsCode" v-model="loginForm.smsCode" placeholder="请输入短信验证码" name="smsCode" type="text" tabindex="3" auto-complete="off" />
|
|
|
</el-form-item>
|
|
|
<div class="code2" @click.stop="getSmsCode">
|
|
|
<el-button :disabled="countDown != 60">{{
|
|
|
@@ -231,12 +106,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="button-container">
|
|
|
- <el-button
|
|
|
- :loading="loading"
|
|
|
- type="primary"
|
|
|
- @click.native.prevent="handleLogin"
|
|
|
- >登录</el-button
|
|
|
- >
|
|
|
+ <el-button :loading="loading" type="primary" @click.native.prevent="handleLogin">登录</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</transition>
|
|
|
@@ -250,17 +120,11 @@
|
|
|
<el-link :href="companyList[0].icpRecordLink" :underline="false" target="_blank">{{
|
|
|
companyList[0].icpRecord
|
|
|
}}</el-link>
|
|
|
- <div
|
|
|
- style="margin: 0 20px"
|
|
|
- v-if="companyList[0].companyName && companyList[0].icpRecordLink"
|
|
|
- >
|
|
|
+ <div style="margin: 0 20px" v-if="companyList[0].companyName && companyList[0].icpRecordLink">
|
|
|
|
|
|
|
</div>
|
|
|
<el-link :href="companyList[0].pubSecurityRecordLink" :underline="false" target="_blank">
|
|
|
- <el-image
|
|
|
- style="width: 14px; height: 16px"
|
|
|
- :src="require('@/assets/login/icon_0001.png')"
|
|
|
- ></el-image>
|
|
|
+ <el-image style="width: 14px; height: 16px" :src="require('@/assets/login/icon_0001.png')"></el-image>
|
|
|
{{ companyList[0].pubSecurityRecord }}
|
|
|
</el-link>
|
|
|
|
|
|
@@ -272,7 +136,12 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getAdminUserSmsCode, getCode, getCompanyList, getList } from '@/api/user'
|
|
|
+import {
|
|
|
+ getAdminUserSmsCode,
|
|
|
+ getCode,
|
|
|
+ getCompanyList,
|
|
|
+ getList,
|
|
|
+} from "@/api/user";
|
|
|
|
|
|
export default {
|
|
|
name: "Login",
|
|
|
@@ -371,7 +240,11 @@ export default {
|
|
|
methods: {
|
|
|
//获取短信验证码
|
|
|
async getSmsCode() {
|
|
|
- await getAdminUserSmsCode({ mobile: this.loginForm.username });
|
|
|
+ await getAdminUserSmsCode({
|
|
|
+ mobile: this.loginForm.username,
|
|
|
+ codeValue: this.loginForm.codeValue,
|
|
|
+ code: this.loginForm.code,
|
|
|
+ });
|
|
|
this.$successMsg("短信已发送");
|
|
|
this.isDisabled = true;
|
|
|
this.countDown--;
|
|
|
@@ -519,7 +392,7 @@ $back: #333;
|
|
|
color: $cursor;
|
|
|
}
|
|
|
}
|
|
|
-.el-link--inner{
|
|
|
+.el-link--inner {
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
/* reset element-ui css */
|
chen