|
|
@@ -1,266 +1,462 @@
|
|
|
<template>
|
|
|
- <div class="mainBox">
|
|
|
- <div class="leftBox">
|
|
|
- <!--大标题-->
|
|
|
- <div class="titleBox">
|
|
|
- <div class="titleEnglish">Operation Management Platform</div>
|
|
|
- <div class="titleChinaeseBox">
|
|
|
- <span class="titleChinasesTop">政讯通<br/></span>
|
|
|
- <span class="titleChinasesBottom">运营管理平台</span>
|
|
|
+ <div class="appBox">
|
|
|
+ <div class="mainBox">
|
|
|
+ <div class="leftBox">
|
|
|
+ <!--大标题-->
|
|
|
+ <div class="titleBox">
|
|
|
+ <div class="titleEnglish">Operation Management Platform</div>
|
|
|
+ <div class="titleChinaeseBox">
|
|
|
+ <span class="titleChinasesTop">政讯通<br></span>
|
|
|
+ <span class="titleChinasesBottom">运营管理平台</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <!--背景颜色-->
|
|
|
+ <div class="yellow" />
|
|
|
+ <div class="blue" />
|
|
|
+ <!--人物图片-->
|
|
|
+ <img src="@/assets/login/Picture.png" class="TitleImg">
|
|
|
</div>
|
|
|
- <!--背景颜色-->
|
|
|
- <div class="yellow"></div>
|
|
|
- <div class="blue"></div>
|
|
|
- <!--人物图片-->
|
|
|
- <img src="@/assets/login/Picture.png" class="TitleImg"/>
|
|
|
- </div>
|
|
|
- <div class="rightBox">
|
|
|
- <!--form登陆框-->
|
|
|
- <div class="loginFormBox">
|
|
|
- <!--开始验证表单 start-->
|
|
|
- <el-form :model="form" :rules="rules" ref="form" label-width="100px">
|
|
|
- <div class="inputBox greyBg">
|
|
|
- <img src="@/assets/login/id-card-outline.png" class="inputIcon"/>
|
|
|
- <input type="text" placeholder="请输入手机号">
|
|
|
- </div>
|
|
|
- <div class="inputBox greyBg">
|
|
|
- <img src="@/assets/login/bag-remove-outline.png" class="inputIcon"/>
|
|
|
- <input type="text" placeholder="请输入密码">
|
|
|
- </div>
|
|
|
- <div class="inputBoxSpecial">
|
|
|
- <div class="inputBoxLeft greyBg">
|
|
|
- <img src="@/assets/login/hardware-chip-outline.png" class="inputIcon"/>
|
|
|
- <input type="text" placeholder="请输入验证码">
|
|
|
- <img src="@/assets/login/eye-off-outline.png" class="inputIconSmall"/>
|
|
|
+ <div class="rightBox">
|
|
|
+ <!--form登陆框-->
|
|
|
+ <div class="loginFormBox">
|
|
|
+ <!--开始验证表单 start-->
|
|
|
+ <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
|
|
|
+ <div class="inputBox greyBg">
|
|
|
+ <img src="@/assets/login/id-card-outline.png" class="inputIcon">
|
|
|
+ <el-form-item prop="username">
|
|
|
+ <el-input
|
|
|
+ ref="username"
|
|
|
+ v-model="loginForm.username"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ name="username"
|
|
|
+ type="text"
|
|
|
+ tabindex="1"
|
|
|
+ autocomplete="off"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
</div>
|
|
|
- <div class="inputBoxRight greyBg">
|
|
|
- <div class="submitCode"></div>
|
|
|
- <div class="reloadBtn">看不清？换一张图</div>
|
|
|
+ <div class="inputBox greyBg">
|
|
|
+ <img src="@/assets/login/bag-remove-outline.png" class="inputIcon">
|
|
|
+ <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
|
|
|
+ <el-form-item prop="password">
|
|
|
+ <el-input
|
|
|
+ :key="passwordType"
|
|
|
+ ref="password"
|
|
|
+ v-model="loginForm.password"
|
|
|
+ :type="passwordType"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ name="password"
|
|
|
+ tabindex="2"
|
|
|
+ autocomplete="off"
|
|
|
+ @keyup.native="checkCapslock"
|
|
|
+ @blur="capsTooltip = false"
|
|
|
+ @keyup.enter.native="handleLogin"
|
|
|
+ />
|
|
|
+ <span class="show-pwd" @click="showPwd">
|
|
|
+ <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
|
|
+ </span>
|
|
|
+ </el-form-item>
|
|
|
+ </el-tooltip>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <button class="loginBtn" @click="submitForm('form')">登录</button>
|
|
|
- </el-form>
|
|
|
- <!--开始验证表单 end-->
|
|
|
+ <div class="inputBoxSpecial">
|
|
|
+ <div class="inputBoxLeft greyBg">
|
|
|
+ <img src="@/assets/login/hardware-chip-outline.png" class="inputIcon">
|
|
|
+ <el-form-item prop="captcha">
|
|
|
+ <el-input
|
|
|
+ ref="captcha"
|
|
|
+ v-model="loginForm.captcha"
|
|
|
+ placeholder="图形验证码"
|
|
|
+ name="captcha"
|
|
|
+ type="text"
|
|
|
+ tabindex="3"
|
|
|
+ maxlength="4"
|
|
|
+ autocomplete="off"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="inputBoxRight greyBg">
|
|
|
+ <div class="submitCode">
|
|
|
+ <img :src="codeImg" class="codeImg">
|
|
|
+ </div>
|
|
|
+ <div class="reloadBtn" @click="getImgCode">看不清？换一张图</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-button :loading="loading" type="primary" class="loginBtn" @click.native.prevent="handleLogin">
|
|
|
+ 登录
|
|
|
+ </el-button>
|
|
|
+ </el-form>
|
|
|
+ <!--开始验证表单 end-->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { validUserPhone } from '@/utils/validate'
|
|
|
+import request from '@/utils/request'
|
|
|
export default {
|
|
|
+ name: 'Login',
|
|
|
data() {
|
|
|
+ // 配置验证规则：用于表单验证
|
|
|
+ const validateUsername = (rule, value, callback) => {
|
|
|
+ if (!validUserPhone(value)) {
|
|
|
+ callback(new Error('请输入正确的手机号！'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const validatePassword = (rule, value, callback) => {
|
|
|
+ if (value.length < 6) {
|
|
|
+ callback(new Error('密码不能低于6位！'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const validateCode = (rule, value, callback) => {
|
|
|
+ if (value.length < 4) {
|
|
|
+ callback(new Error('图形验证码不能低于4位！'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 本页基础数据
|
|
|
return {
|
|
|
- form: {
|
|
|
- username: '',
|
|
|
- password: ''
|
|
|
+ loginForm: { // 1.用户使用哪些信息登录
|
|
|
+ username: '', // 1
|
|
|
+ password: '', // 111111
|
|
|
+ type: 1,
|
|
|
+ captcha: ''
|
|
|
},
|
|
|
- rules: {
|
|
|
- username: [
|
|
|
- { required: true, message: '请输入用户名', trigger: 'blur' }
|
|
|
- ],
|
|
|
- password: [
|
|
|
- { required: true, message: '请输入密码', trigger: 'blur' },
|
|
|
- { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
|
|
|
- ]
|
|
|
- }
|
|
|
- };
|
|
|
+ loginRules: { // 2.配置from表单验证规则
|
|
|
+ username: [{ required: true, trigger: 'blur', validator: validateUsername }],
|
|
|
+ password: [{ required: true, trigger: 'blur', validator: validatePassword }],
|
|
|
+ captcha: [{ required: true, trigger: 'blur', validator: validateCode }]
|
|
|
+ },
|
|
|
+ passwordType: 'password', // 3.密码域默认type 当显示密码的时候改为text
|
|
|
+ capsTooltip: false,
|
|
|
+ loading: false,
|
|
|
+ showDialog: false,
|
|
|
+ redirect: undefined,
|
|
|
+ otherQuery: {},
|
|
|
+ // 图像验证码
|
|
|
+ captchaText: '', // 保存生成的验证码文本
|
|
|
+ captchaInput: '', // 用户输入的验证码
|
|
|
+ codeImg: '' // 图形验证码
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route: {
|
|
|
+ handler: function(route) {
|
|
|
+ const query = route.query
|
|
|
+ if (query) {
|
|
|
+ this.redirect = query.redirect
|
|
|
+ this.otherQuery = this.getOtherQuery(query)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getImgCode()
|
|
|
},
|
|
|
methods: {
|
|
|
- submitForm(formName) {
|
|
|
- this.$refs[formName].validate(valid => {
|
|
|
+ // 检查输入状态
|
|
|
+ checkCapslock(e) {
|
|
|
+ const { key } = e
|
|
|
+ this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
|
|
|
+ },
|
|
|
+ // 切换密码框的显示与隐藏
|
|
|
+ showPwd() {
|
|
|
+ if (this.passwordType === 'password') {
|
|
|
+ this.passwordType = ''
|
|
|
+ } else {
|
|
|
+ this.passwordType = 'password'
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.password.focus()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 提交表单并跳转
|
|
|
+ handleLogin() {
|
|
|
+ this.$refs.loginForm.validate(valid => {
|
|
|
if (valid) {
|
|
|
- console.log('表单验证成功');
|
|
|
+ console.log()
|
|
|
+ // 开始登录
|
|
|
+ // this.loading = true
|
|
|
+ // this.$store.dispatch('user/login', this.loginForm)
|
|
|
+ // .then(() => {
|
|
|
+ // this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
|
|
|
+ // this.loading = false
|
|
|
+ // })
|
|
|
+ // .catch(() => {
|
|
|
+ // this.loading = false
|
|
|
+ // })
|
|
|
} else {
|
|
|
- console.log('表单验证失败');
|
|
|
- return false;
|
|
|
+ console.log('error submit!!')
|
|
|
+ return false
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 请求图形验证码
|
|
|
+ getImgCode() {
|
|
|
+ const that = this
|
|
|
+ request({
|
|
|
+ url: 'http://192.168.1.201:9501/verifyCode',
|
|
|
+ method: 'get'
|
|
|
+ }).then(response => {
|
|
|
+ that.codeImg = response.data
|
|
|
+ }).catch(error => {
|
|
|
+ console.log(error)
|
|
|
+ })
|
|
|
},
|
|
|
- resetForm(formName) {
|
|
|
- this.$refs[formName].resetFields();
|
|
|
+ getOtherQuery(query) {
|
|
|
+ return Object.keys(query).reduce((acc, cur) => {
|
|
|
+ if (cur !== 'redirect') {
|
|
|
+ acc[cur] = query[cur]
|
|
|
+ }
|
|
|
+ return acc
|
|
|
+ }, {})
|
|
|
}
|
|
|
}
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
- .mainBox {
|
|
|
+ /*整体盒子模型 使用display flex布局保持中间主体始终居中*/
|
|
|
+ .appBox{
|
|
|
+ clear: both;
|
|
|
width: 100%;
|
|
|
- max-width: 1920px;
|
|
|
+ height: 100%;
|
|
|
display:flex;
|
|
|
- justify-content: center;
|
|
|
- margin: 0 auto;
|
|
|
- .leftBox{
|
|
|
- width: 55%; //1057/1920
|
|
|
- max-width: 1057px;
|
|
|
- margin-right: 50px;
|
|
|
- max-height:585px;
|
|
|
- height: 100vh; //自适应全屏高度
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .rightBox{
|
|
|
- max-width: 400px;
|
|
|
- height:360px;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- }
|
|
|
- /*标题文字 start*/
|
|
|
- .titleBox {
|
|
|
- width: 516px;
|
|
|
- height: 280px;
|
|
|
- position: absolute;
|
|
|
- z-index:9999;
|
|
|
- top:5%;
|
|
|
- left:10%;
|
|
|
- .titleEnglish{
|
|
|
- left: 0px;
|
|
|
- top: 238px;
|
|
|
- position: absolute;
|
|
|
- color: #333333;
|
|
|
- font-size: 32px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
- word-wrap: break-word
|
|
|
+ align-items: center;
|
|
|
+ /*中央盒子模型 在1920x1080下将会保持恒定的显示效果 低于这个分辨率左侧将会自动收缩*/
|
|
|
+ .mainBox {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 1920px;
|
|
|
+ display:flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ .leftBox{
|
|
|
+ width: 55%; //左侧自动收缩 最低1057 最高1920 1057/1920=55%
|
|
|
+ max-width: 1057px;
|
|
|
+ margin-right: 50px;
|
|
|
+ max-height:585px;
|
|
|
+ height: 100vh;//自适应全屏高度
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .rightBox{
|
|
|
+ max-width: 400px;
|
|
|
+ height:360px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
}
|
|
|
- .titleChinaeseBox{
|
|
|
- left: 0px;
|
|
|
- top: 0px;
|
|
|
+
|
|
|
+ /*中央左侧main内容*/
|
|
|
+
|
|
|
+ /*1.标题文字 start*/
|
|
|
+ .titleBox {
|
|
|
+ width: 516px;
|
|
|
+ height: 280px;
|
|
|
position: absolute;
|
|
|
- .titleChinasesTop{
|
|
|
- color: #5570F1;
|
|
|
- font-size: 86px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 700;
|
|
|
- word-wrap: break-word
|
|
|
- }
|
|
|
- .titleChinasesBottom{
|
|
|
+ z-index:9999;
|
|
|
+ top:5%;
|
|
|
+ left:2%;
|
|
|
+ .titleEnglish{
|
|
|
+ left: 0px;
|
|
|
+ top: 238px;
|
|
|
+ position: absolute;
|
|
|
color: #333333;
|
|
|
- font-size: 86px;
|
|
|
+ font-size: 32px;
|
|
|
font-family: Microsoft YaHei;
|
|
|
- font-weight: 700;
|
|
|
+ font-weight: 400;
|
|
|
word-wrap: break-word
|
|
|
}
|
|
|
+ .titleChinaeseBox{
|
|
|
+ left: 0px;
|
|
|
+ top: 0px;
|
|
|
+ position: absolute;
|
|
|
+ .titleChinasesTop{
|
|
|
+ color: #5570F1;
|
|
|
+ font-size: 86px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 700;
|
|
|
+ word-wrap: break-word
|
|
|
+ }
|
|
|
+ .titleChinasesBottom{
|
|
|
+ color: #333333;
|
|
|
+ font-size: 86px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 700;
|
|
|
+ word-wrap: break-word
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- /*标题文字 end*/
|
|
|
- /*背景颜色 start*/
|
|
|
- .yellow,.blue {
|
|
|
- width: 226px;
|
|
|
- height: 226px;
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
- .yellow{
|
|
|
- z-index:1000;
|
|
|
- opacity: 0.45;
|
|
|
- top:0;
|
|
|
- left:0;
|
|
|
- background: #DDA82A;
|
|
|
- border-radius: 50%;
|
|
|
- filter: blur(120px)
|
|
|
- }
|
|
|
- .blue{
|
|
|
- z-index:1001;
|
|
|
- bottom:15%;
|
|
|
- left:20%;
|
|
|
- background: #4461F2;
|
|
|
- border-radius: 50%;
|
|
|
- filter: blur(150px)
|
|
|
- }
|
|
|
- /*背景颜色 end*/
|
|
|
- /*背景图 start*/
|
|
|
- .TitleImg {
|
|
|
- display:block;
|
|
|
- position: absolute;
|
|
|
- z-index:1100;
|
|
|
- right:0;
|
|
|
- bottom:0;
|
|
|
- @media (max-width: 1366px) and (max-height: 768px) {
|
|
|
- transform: scale(0.7); //稍微缩小
|
|
|
+ /*标题文字 end*/
|
|
|
+
|
|
|
+ /*2.背景颜色 start*/
|
|
|
+ .yellow,.blue {
|
|
|
+ width: 226px;
|
|
|
+ height: 226px;
|
|
|
+ position: absolute;
|
|
|
}
|
|
|
- }
|
|
|
- /*背景图 end*/
|
|
|
- /*登录框 start*/
|
|
|
- .loginFormBox {
|
|
|
- margin-top:15%;
|
|
|
- .inputBox {
|
|
|
- margin-bottom: 20px;
|
|
|
- .inputIcon {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- margin: 0 20px 0 20px;
|
|
|
- }
|
|
|
- .inputIconSmall {
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
- }
|
|
|
+ .yellow{
|
|
|
+ z-index:1000;
|
|
|
+ opacity: 0.45;
|
|
|
+ top:0;
|
|
|
+ left:0;
|
|
|
+ background: #DDA82A;
|
|
|
+ border-radius: 50%;
|
|
|
+ filter: blur(120px)
|
|
|
}
|
|
|
- .inputBoxSpecial {
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 80px;
|
|
|
+ .blue{
|
|
|
+ z-index:1001;
|
|
|
+ bottom:15%;
|
|
|
+ left:20%;
|
|
|
+ background: #4461F2;
|
|
|
+ border-radius: 50%;
|
|
|
+ filter: blur(150px)
|
|
|
}
|
|
|
- .inputBox,.inputBoxSpecial{
|
|
|
- height: 52px;
|
|
|
- width: 400px;
|
|
|
- box-sizing: border-box;
|
|
|
- align-items: center;
|
|
|
- display:flex;
|
|
|
- input {
|
|
|
- border:0;
|
|
|
- background: transparent;
|
|
|
- font-size: 18x;
|
|
|
- }
|
|
|
- input:focus {
|
|
|
- outline: none;
|
|
|
+ /*背景颜色 end*/
|
|
|
+
|
|
|
+ /*3.背景图 start*/
|
|
|
+ .TitleImg {
|
|
|
+ display:block;
|
|
|
+ position: absolute;
|
|
|
+ z-index:1100;
|
|
|
+ right:0;
|
|
|
+ bottom:0;
|
|
|
+ @media (max-width: 1366px) and (max-height: 768px) {
|
|
|
+ transform: scale(0.7); //稍微缩小
|
|
|
}
|
|
|
}
|
|
|
- .greyBg {
|
|
|
- background: rgba(239, 241, 249, 0.60);
|
|
|
- border-radius: 8px;
|
|
|
- }
|
|
|
- .inputBoxLeft {
|
|
|
- width:250px;
|
|
|
- height: 52px;
|
|
|
- box-sizing: border-box;
|
|
|
- align-items: center;
|
|
|
- display:flex;
|
|
|
- input {
|
|
|
- width: 150px;
|
|
|
+ /*背景图 end*/
|
|
|
+
|
|
|
+ /*中央右侧main内容*/
|
|
|
+ /*登录框 start*/
|
|
|
+ .loginFormBox {
|
|
|
+ margin-top:15%;
|
|
|
+ .inputBox {
|
|
|
+ margin-bottom: 30px;
|
|
|
+ .inputIcon {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin: 0 20px 0 20px;
|
|
|
+ }
|
|
|
+ .inputIconSmall {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ }
|
|
|
}
|
|
|
- .inputIcon {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- margin: 0 20px 0 20px;
|
|
|
+ .inputBoxSpecial {
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 80px;
|
|
|
}
|
|
|
- }
|
|
|
- .inputBoxRight {
|
|
|
- width:140px;
|
|
|
- height: 52px;
|
|
|
- position: relative;
|
|
|
- .submitCode {
|
|
|
+ .inputBox,.inputBoxSpecial{
|
|
|
height: 52px;
|
|
|
+ width: 400px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ align-items: center;
|
|
|
+ display:flex;
|
|
|
+ input {
|
|
|
+ border:0;
|
|
|
+ background: transparent;
|
|
|
+ font-size: 18x;
|
|
|
+ }
|
|
|
+ input:focus {
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .greyBg {
|
|
|
+ background: rgba(239, 241, 249, 0.60);
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ .inputBoxLeft {
|
|
|
+ width:250px;
|
|
|
+ height: 52px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ align-items: center;
|
|
|
+ display:flex;
|
|
|
+ input {
|
|
|
+ width: 150px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .inputIcon {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin: 0 20px 0 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .inputBoxRight {
|
|
|
+ width:140px;
|
|
|
+ height: 52px;
|
|
|
+ position: relative;
|
|
|
+ .submitCode {
|
|
|
+ height: 52px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-top: 5px;
|
|
|
+ padding-left: 10px;
|
|
|
+ .codeImg{
|
|
|
+ display: block;
|
|
|
+ width: 120px;
|
|
|
+ height: 42px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .reloadBtn {
|
|
|
+ color: #5570F1;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ word-wrap: break-word;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -20px;
|
|
|
+ right: 0;
|
|
|
+ cursor:pointer
|
|
|
+ }
|
|
|
+ .loginBtn {
|
|
|
+ width: 400px;
|
|
|
+ height: 58px;
|
|
|
+ background: #5570F1;
|
|
|
+ box-shadow: 0px 4px 19px rgba(85, 112, 241, 0.40);
|
|
|
+ border-radius: 12px;
|
|
|
+ font-size:24px;
|
|
|
+ color:#fff;
|
|
|
+ border:0;
|
|
|
}
|
|
|
}
|
|
|
- .reloadBtn {
|
|
|
- color: #5570F1;
|
|
|
- font-size: 12px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
- word-wrap: break-word;
|
|
|
- position: absolute;
|
|
|
- bottom: -20px;
|
|
|
- right: 0;
|
|
|
- }
|
|
|
- .loginBtn {
|
|
|
- width: 400px;
|
|
|
- height: 58px;
|
|
|
- background: #5570F1;
|
|
|
- box-shadow: 0px 4px 19px rgba(85, 112, 241, 0.40);
|
|
|
- border-radius: 12px;
|
|
|
- font-size:24px;
|
|
|
- color:#fff;
|
|
|
- border:0;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ /*验证码*/
|
|
|
+ .captcha-img {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 120px;
|
|
|
+ height: 40px; /* 调整验证码图片大小 */
|
|
|
+ }
|
|
|
+ .show-pwd{
|
|
|
+ margin-left: 30px;
|
|
|
}
|
|
|
/*登录框 end*/
|
|
|
+
|
|
|
+ /*此处修改了element-ui中的部分内置样式，但是通过css-scope可以保证不会污染到全局*/
|
|
|
+ /*在index中使用deep或者>>>深度选择器来修改el-input的默认样式*/
|
|
|
+
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ background: transparent;
|
|
|
+ width:100%;
|
|
|
+ border: 0;
|
|
|
+ //border:0
|
|
|
+ }
|
|
|
+ /deep/ .el-form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ /deep/ .el-form-item__content {
|
|
|
+ display: flex;
|
|
|
+ width: 300px;
|
|
|
+ }
|
|
|
+ /deep/ .el-form-item__error {
|
|
|
+ bottom: -34px;
|
|
|
+ left:15px;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
</style>
|
Sean