suojin
/
workorder_front
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

登录初步页面

Browse Source
main
赵培友 3 years ago
parent 305cab1f48
commit 300283b7dc
8 changed files with 208 additions and 259 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/font/IMPACT.TTF
  2. 6
      src/assets/font/font.css
  3. 2
      src/lang/zh.js
  4. 112
      src/page/login/index.vue
  5. 27
      src/page/login/userlogin.vue
  6. 3
      src/styles/common.scss
  7. 16
      src/styles/custom/custom.scss
  8. 169
      src/styles/login.scss

BIN
src/assets/font/IMPACT.TTF
View File

Binary file not shown.

6
src/assets/font/font.css
Unescape View File

@ -0,0 +1,6 @@
@font-face {
font-family: "Impact";
src: url('./IMPACT.TTF');
font-weight: normal;
font-style: normal;
}

2
src/lang/zh.js
Unescape View File

@ -80,7 +80,7 @@ export default {
title: '登录 ', title: '登录 ',
info: 'BladeX 企业级开发平台', info: 'BladeX 企业级开发平台',
tenantId: '请输入租户ID', tenantId: '请输入租户ID',
username: '请输入账号', username: '请输入用户名',
password: '请输入密码', password: '请输入密码',
wechat: '微信', wechat: '微信',
qq: 'QQ', qq: 'QQ',

112
src/page/login/index.vue
Unescape View File

@ -1,55 +1,21 @@
<template> <template>
<div class="login-container" <div class="login-container" ref="login" @keyup.enter.native="handleLogin">
ref="login"
@keyup.enter.native="handleLogin">
<top-color v-show="false"></top-color> <top-color v-show="false"></top-color>
<div class="login-weaper animated bounceInDown"> <div class="login-weaper animated bounceInDown">
<div class="login-left"> <!-- 左侧 -->
<div class="login-time">
{{time}}
</div>
<p class="title">{{ $t('login.info') }}</p>
<div style="font-size: 15px">
<span>----------------------------------------------</span>
<br>
<span>管理租户编号：000000</span>
<br>
<span>超级管理员账号: admin / admin</span>
<br>
<span>人事账号: hr / hr</span>
<br>
<span>经理账号: manager / manager</span>
<br>
<span>老板账号: boss / boss</span>
<br>
<span>----------------------------------------------</span>
<br>
<span>普通租户编号：详见租户管理模块</span>
<br>
<span>租户管理员账号: admin / admin</span>
<br>
<span>----------------------------------------------</span>
</div>
<!--<img class="img" src="/img/logo.png" alt="">-->
</div>
<div class="login-border"> <div class="login-border">
<div class="login-main"> <div class="login-main">
<h4 class="login-title"> <div class="login-logo"></div>
{{ $t('login.title') }}{{website.title}} <div class="login-title">运维管理系统，欢迎您！</div>
<top-lang></top-lang> <div class="login-subTitle">
</h4> WELCOME TO THE OPERATION AND MAINTENANCE<br />
<userLogin v-if="activeName==='user'"></userLogin> MANAGEMENT SYSTEM
<codeLogin v-else-if="activeName==='code'"></codeLogin>
<thirdLogin v-else-if="activeName==='third'"></thirdLogin>
<div class="login-menu">
<a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>
<!--<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>-->
<a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a>
<a :href="website.ssoUrl + website.redirectUri">{{ $t('login.ssoLogin') }}</a>
</div> </div>
<userLogin></userLogin>
</div> </div>
</div> </div>
<!-- 右侧 -->
<div class="login-right"></div>
</div> </div>
</div> </div>
</template> </template>
@ -71,33 +37,31 @@
codeLogin, codeLogin,
thirdLogin, thirdLogin,
topLang, topLang,
topColor topColor,
}, },
data() { data() {
return { return {
time: "", time: "",
activeName: "user",
socialForm: { socialForm: {
tenantId: "000000", tenantId: "000000",
source: "", source: "",
code: "", code: "",
state: "", state: "",
} },
}; };
}, },
watch: { watch: {
$route() { $route() {
this.handleLogin(); this.handleLogin();
} },
}, },
created() { created() {
this.handleLogin(); this.handleLogin();
this.getTime(); this.getTime();
}, },
mounted() { mounted() {},
},
computed: { computed: {
...mapGetters(["website", "tagWel"]) ...mapGetters(["website", "tagWel"]),
}, },
props: [], props: [],
methods: { methods: {
@ -113,43 +77,61 @@
this.socialForm.source = getQueryString("source"); this.socialForm.source = getQueryString("source");
this.socialForm.code = getQueryString("code"); this.socialForm.code = getQueryString("code");
this.socialForm.state = getQueryString("state"); this.socialForm.state = getQueryString("state");
if (validatenull(this.socialForm.source) && topUrl.includes(redirectUrl)) { if (
validatenull(this.socialForm.source) &&
topUrl.includes(redirectUrl)
) {
let source = topUrl.split("?")[0]; let source = topUrl.split("?")[0];
source = source.split(redirectUrl)[1]; source = source.split(redirectUrl)[1];
this.socialForm.source = source; this.socialForm.source = source;
} }
if (topUrl.includes(redirectUrl) && !validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) { if (
topUrl.includes(redirectUrl) &&
!validatenull(this.socialForm.source) &&
!validatenull(this.socialForm.code) &&
!validatenull(this.socialForm.state)
) {
const loading = this.$loading({ const loading = this.$loading({
lock: true, lock: true,
text: '第三方系统登录中,请稍后。。。', text: "第三方系统登录中,请稍后。。。",
spinner: "el-icon-loading" spinner: "el-icon-loading",
}); });
this.$store.dispatch("LoginBySocial", this.socialForm).then(() => { this.$store
.dispatch("LoginBySocial", this.socialForm)
.then(() => {
window.location.href = topUrl.split(redirectUrl)[0]; window.location.href = topUrl.split(redirectUrl)[0];
this.$router.push({ path: this.tagWel.value }); this.$router.push({ path: this.tagWel.value });
loading.close(); loading.close();
}).catch(() => { })
.catch(() => {
loading.close(); loading.close();
}); });
} else if (!topUrl.includes(redirectUrl) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) { } else if (
!topUrl.includes(redirectUrl) &&
!validatenull(this.socialForm.code) &&
!validatenull(this.socialForm.state)
) {
const loading = this.$loading({ const loading = this.$loading({
lock: true, lock: true,
text: '单点系统登录中,请稍后。。。', text: "单点系统登录中,请稍后。。。",
spinner: "el-icon-loading" spinner: "el-icon-loading",
}); });
this.$store.dispatch("LoginBySso", this.socialForm).then(() => { this.$store
.dispatch("LoginBySso", this.socialForm)
.then(() => {
window.location.href = topUrl.split(ssoCode)[0]; window.location.href = topUrl.split(ssoCode)[0];
this.$router.push({ path: this.tagWel.value }); this.$router.push({ path: this.tagWel.value });
loading.close(); loading.close();
}).catch(() => { })
.catch(() => {
loading.close(); loading.close();
}); });
} }
} },
} },
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
@import "@/styles/login.scss"; @import "@/styles/login.scss";
</style> </style>

27
src/page/login/userlogin.vue
Unescape View File

@ -4,26 +4,26 @@
:rules="loginRules" :rules="loginRules"
ref="loginForm" ref="loginForm"
:model="loginForm" :model="loginForm"
label-width="0"> label-width="0"
<el-form-item v-if="tenantMode" prop="tenantId"> label-position="top"
>
<!-- <el-form-item v-if="tenantMode" prop="tenantId" label="用户名">
<el-input size="small" <el-input size="small"
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
v-model="loginForm.tenantId" v-model="loginForm.tenantId"
auto-complete="off" auto-complete="off"
:placeholder="$t('login.tenantId')"> :placeholder="$t('login.tenantId')">
<i slot="prefix" class="icon-quanxian"/>
</el-input> </el-input>
</el-form-item> </el-form-item> -->
<el-form-item prop="username"> <el-form-item prop="username" label="用户名">
<el-input size="small" <el-input size="small"
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
v-model="loginForm.username" v-model="loginForm.username"
auto-complete="off" auto-complete="off"
:placeholder="$t('login.username')"> :placeholder="$t('login.username')">
<i slot="prefix" class="icon-yonghu"/>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password" label="密码">
<el-input size="small" <el-input size="small"
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
:type="passwordType" :type="passwordType"
@ -31,10 +31,10 @@
auto-complete="off" auto-complete="off"
:placeholder="$t('login.password')"> :placeholder="$t('login.password')">
<i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/> <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/>
<i slot="prefix" class="icon-mima"/>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item v-if="this.website.captchaMode" prop="code"> <div><el-checkbox v-model="rememberPwd">记住密码</el-checkbox></div>
<!-- <el-form-item v-if="this.website.captchaMode" prop="code">
<el-row :span="24"> <el-row :span="24">
<el-col :span="16"> <el-col :span="16">
<el-input size="small" <el-input size="small"
@ -52,7 +52,7 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item> -->
<el-form-item> <el-form-item>
<el-button type="primary" <el-button type="primary"
size="small" size="small"
@ -80,6 +80,7 @@
data() { data() {
return { return {
tenantMode: this.website.tenantMode, tenantMode: this.website.tenantMode,
rememberPwd: false,
loginForm: { loginForm: {
//租户ID //租户ID
tenantId: "000000", tenantId: "000000",
@ -101,9 +102,9 @@
image: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", image: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
}, },
loginRules: { loginRules: {
tenantId: [ // tenantId: [
{required: false, message: "请输入租户ID", trigger: "blur"} // {required: false, message: "请输入租户ID", trigger: "blur"}
], // ],
username: [ username: [
{required: true, message: "请输入用户名", trigger: "blur"} {required: true, message: "请输入用户名", trigger: "blur"}
], ],

3
src/styles/common.scss
Unescape View File

@ -18,7 +18,8 @@
@import './media.scss'; @import './media.scss';
//通用配置 //通用配置
@import './normalize.scss'; @import './normalize.scss';
// 字体
@import '~@/assets/font/font.css';
a{ a{
text-decoration: none; text-decoration: none;
color:#333; color:#333;

16
src/styles/custom/custom.scss
Unescape View File

@ -0,0 +1,16 @@
// input输入框
.el-input--small .el-input__inner {
width: 420px;
height: 50px;
line-height: 50px;
border-radius: 3px 3px 3px 3px;
color: #333;
position: relative;
border: 1px solid #CFCFCF
}
// input输入框label
.el-form--label-top .el-form-item__label {
font-size: 16px;
color: #273240;
padding: 0!important;
}

169
src/styles/login.scss
Unescape View File

@ -5,31 +5,32 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
background-image: url("/img/bg/bg.jpg"); background-image: url("/img/bg/bg4.jpg");
background-size: 100% 100%; background-size: 100% 100%;
} }
.login-weaper { .login-weaper {
margin: 0 auto; margin: 0 auto;
width: 1000px; width: 1393px;
box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4); height: 775px;
// box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
.el-input-group__append { .el-input-group__append {
border: none; border: none;
} }
} }
.login-left, .login-right,
.login-border { .login-border {
position: relative; position: relative;
min-height: 500px; min-height: 775px;
align-items: center; align-items: center;
display: flex; display: flex;
} }
.login-left { .login-right {
border-top-left-radius: 5px; border-top-right-radius: 9px;
border-bottom-left-radius: 5px; border-bottom-right-radius: 9px;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
background-color: #8b9aac; background-color: #8b9aac;
@ -39,145 +40,87 @@
position: relative; position: relative;
} }
.login-left .img {
width: 140px;
}
.login-time {
position: absolute;
left: 25px;
top: 25px;
width: 100%;
color: #fff;
font-weight: 200;
opacity: 0.9;
font-size: 18px;
overflow: hidden;
}
.login-left .title {
text-align: center;
color: #fff;
font-weight: bold;
font-size: 30px;
letter-spacing: 2px;
}
.login-border { .login-border {
border-left: none; border-left: none;
border-top-right-radius: 5px; border-top-left-radius: 9px;
border-bottom-right-radius: 5px; border-bottom-left-radius: 9px;
color: #fff; color: #fff;
background-color: #fff; background-color: #fff;
width: 50%; width: 50%;
float: left; float: left;
padding-top: 63px;
box-sizing: border-box; box-sizing: border-box;
} }
.login-main { .login-main {
margin: 0 auto; width: 334px;
width: 65%;
box-sizing: border-box; box-sizing: border-box;
position: absolute;
top: 63px;
left: 50%;
transform: translateX(-50%);
}
.login-logo {
width: 118px;
height: 124px;
background: pink;
display: flex;
margin: 0 auto;
} }
.login-main > h3 {
margin-bottom: 20px;
}
.login-main > p {
color: #76838f;
}
.login-title { .login-title {
color: #333; color: #273240;
margin-bottom: 40px; // 字体
font-size: 30px;
font-weight: 500; font-weight: 500;
font-size: 22px; margin-top: 21px;
text-align: center;
letter-spacing: 4px;
}
.login-menu {
margin-top: 40px;
width: 100%;
text-align: center;
a {
color: #999;
font-size: 12px;
margin: 0px 8px;
} }
.login-subTitle {
font-size: 10px;
color: #405364;
margin-top: 8px;
margin-bottom: 46px;
} }
.login-submit { .login-submit {
width: 100%; width: 100%;
height: 45px; height: 50px;
border: 1px solid #409EFF; background: #2E92F6;
background: none; font-size: 16px;
font-size: 18px; color: #fff;
letter-spacing: 2px; letter-spacing: 2px;
font-weight: 300;
color: #409EFF;
cursor: pointer; cursor: pointer;
margin-top: 30px; margin-top: 50px;
font-family: "neo"; font-family: "neo";
transition: 0.25s; transition: 0.25s;
} }
.login-form { .login-form {
margin: 10px 0; margin: 10px 0;
i { i {
color: #333; position: absolute;
} right: 6px;
.el-form-item__content {
width: 100%;
} }
.el-form-item {
margin-bottom: 12px;
} }
.el-input--small .el-input__inner {
.el-input { width: 330px;
input { height: 50px;
padding-bottom: 10px; line-height: 50px;
text-indent: 5px; border-radius: 3px 3px 3px 3px;
background: transparent;
border: none;
border-radius: 0;
color: #333; color: #333;
border-bottom: 1px solid rgb(235, 237, 242); position: relative;
}
.el-input__prefix {
i {
padding: 0 5px;
font-size: 16px !important;
}
} }
.el-form--label-top .el-form-item__label {
font-size: 16px;
color: #333;
padding: 0!important;
} }
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
display: none;
} }
.el-checkbox__inner {
.login-code { border-color: #999;
display: flex;
align-items: center;
justify-content: space-around;
margin: 0 0 0 10px;
} }
.el-checkbox__label {
.login-code-img { color: #999;
margin-top: 2px;
width: 100px;
height: 38px;
background-color: #fdfdfd;
border: 1px solid #f0f0f0;
color: #333;
font-size: 14px;
font-weight: bold;
letter-spacing: 5px;
line-height: 38px;
text-indent: 5px;
text-align: center;
cursor:pointer!important;
} }
Write Preview
Loading…
Cancel
Save