Skip to content

C
CRM
Commit 307aa2fa authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 96932cf2
Hide whitespace changes
Inline Side-by-side
Showing with 322 additions and 314 deletions
src/views/login.vue
View file @ 307aa2fa
......@@ -10,9 +10,8 @@
</div>
<div class="publisher">徐总</div>
<div class="job">总经理</div>
<div
class="content"
>職場上成功者與失敗者最大的分別就是，前者找機會，後者找藉口，今日的你痛恨每天上班「度日如年」，將來的你會感激經歷過這一切，你練成了更強大的自己，玻璃心不再怕碎。</div>
<div class="content">職場上成功者與失敗者最大的分別就是，前者找機會，後者找藉口，今日的你痛恨每天上班「度日如年」，將來的你會感激經歷過這一切，你練成了更強大的自己，玻璃心不再怕碎。
</div>
</div>
</el-carousel-item>
</el-carousel>
......@@ -28,13 +27,8 @@
<div class="mu-text-field has-label">
<div class="mu-text-field-content">
<div class="mu-text-field-label">账号</div>
<input
type="text"
v-model="account"
class="mu-text-field-input"
@focus="accountStatus=true"
@blur="accountStatus=false"
/>
<input type="text" v-model="account" class="mu-text-field-input" @focus="accountStatus=true"
@blur="accountStatus=false" />
<div>
<hr class="mu-text-field-line" />
<hr class="mu-text-field-focus-line" :class="{'focus':accountStatus}" />
......@@ -48,13 +42,8 @@
<div class="mu-text-field has-label">
<div class="mu-text-field-content">
<div class="mu-text-field-label">密码</div>
<input
type="password"
v-model="pwd"
class="mu-text-field-input"
@focus="pwdStatus=true"
@blur="pwdStatus=false"
/>
<input type="password" v-model="pwd" class="mu-text-field-input" @focus="pwdStatus=true"
@blur="pwdStatus=false" />
<div>
<hr class="mu-text-field-line" />
<hr class="mu-text-field-focus-line" :class="{'focus':pwdStatus}" />
......@@ -64,12 +53,8 @@
</div>
</div>
<div class="field_wrap" style="margin-top:30px;">
<el-button
type="primary"
:loading="isLogining"
@click="goLogin()"
style="width:100%; font-family:perfectFont;font-size: 16px;"
>立即登录</el-button>
<el-button type="primary" :loading="isLogining" @click="goLogin()"
style="width:100%; font-family:perfectFont;font-size: 16px;">立即登录</el-button>
</div>
<div class="field_wrap forget">
<div class="item-forget">
......@@ -85,306 +70,329 @@
</div>
</div>
<div class="logo-box">
<el-row :gutter="12">
<el-col :span="10">
<img src="../assets/img/logo.png" />
</el-col>
<el-col :span="12">CRM</el-col>
</el-row>
<el-row :gutter="12">
<el-col :span="10">
<img src="../assets/img/logo.png" />
</el-col>
<el-col :span="12">CRM</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
data() {
return {
accountStatus: false,
account: "",
pwdStatus: false,
pwd: "",
isLogining: false,
isAutoLogin: false,
};
},
created() {
let autoLogin = localStorage.autoLogin
? JSON.parse(localStorage.autoLogin)
: null;
this.account = autoLogin ? autoLogin.acc : "";
this.pwd = autoLogin ? autoLogin.pwd : "";
this.isAutoLogin = autoLogin ? true : false;
},
methods: {
goLogin() {
if (this.account == "") {
return this.$message({
message: "请输入账号!",
type: "warning",
});
}
if (this.pwd == "") {
return this.$message({
message: "请输入密码!",
type: "warning",
});
}
var msg = {
EmAccount: this.account,
EmPassword: this.pwd,
// Domain:'testerp.oytour.com'
Domain: "fcrmyx.oytour.com",
export default {
data() {
return {
accountStatus: false,
account: "",
pwdStatus: false,
pwd: "",
isLogining: false,
isAutoLogin: false,
};
this.apipost("/api/Login/UserLogin", msg, (res) => {
var jsonData = res.data;
if (jsonData.resultCode == 1) {
//登录成功
let autoLogin = this.isAutoLogin
? {
acc: this.account,
pwd: this.pwd,
}
: null;
localStorage.autoLogin = JSON.stringify(autoLogin);
var userData = jsonData.data;
var userJson = JSON.stringify(userData);
localStorage.userInfo = userJson;
this.loginState = 0;
this.$router.push({ path: "/Home" });
} else {
this.$message({
message: res.data.message,
type: "error",
},
created() {
let autoLogin = localStorage.autoLogin ?
JSON.parse(localStorage.autoLogin) :
null;
this.account = autoLogin ? autoLogin.acc : "";
this.pwd = autoLogin ? autoLogin.pwd : "";
this.isAutoLogin = autoLogin ? true : false;
},
methods: {
goLogin() {
if (this.account == "") {
return this.$message({
message: "请输入账号!",
type: "warning",
});
}
if (this.pwd == "") {
return this.$message({
message: "请输入密码!",
type: "warning",
});
this.loginState = 0;
}
});
var msg = {
EmAccount: this.account,
EmPassword: this.pwd,
Domain: "fcrmyx.oytour.com",
};
if (!this.isOnline()) {
msg.Domain = "www.test.com";
}
this.apipost("/api/Login/UserLogin", msg, (res) => {
var jsonData = res.data;
if (jsonData.resultCode == 1) {
//登录成功
let autoLogin = this.isAutoLogin ?
{
acc: this.account,
pwd: this.pwd,
} :
null;
localStorage.autoLogin = JSON.stringify(autoLogin);
var userData = jsonData.data;
var userJson = JSON.stringify(userData);
localStorage.userInfo = userJson;
this.loginState = 0;
this.$router.push({
path: "/Home"
});
} else {
this.$message({
message: res.data.message,
type: "error",
});
this.loginState = 0;
}
});
},
},
},
};
};
</script>
<style scoped>
.login {
background: url("../assets/img/login/bg.jpg") no-repeat 100% 100%;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.logo-box {
position: absolute;
top: 30px;
left: 30px;
width: 120px;
font-size: 48px;
font-family: perfectFont;
color: #fff;
}
.login .login-box {
width: 1000px;
height: 560px;
box-shadow: 0 6px 20px 5px rgba(40, 120, 255, 0.1),
0 16px 24px 2px rgba(0, 0, 0, 0.05);
border-radius: 8px;
background: #fff;
display: flex;
}
.login .login-box .left-card {
width: 440px;
height: 100%;
}
.login .login-box .left-card .item-card {
background: url("../assets/img/login/yinhao.png") right bottom/221px no-repeat,
linear-gradient(180deg, #2878ff, #409efe);
width: 100%;
height: 100%;
padding-top: 96px;
color: white;
box-sizing: border-box;
}
.login .login-box .left-card .item-card .head-icon {
width: 104px;
height: 104px;
margin: 0 auto;
border-radius: 100%;
background: rgba(40, 120, 255, 0.5);
padding: 5px;
}
.login .login-box .left-card .item-card .head-icon img {
width: 100%;
height: 100%;
border-radius: 100%;
}
.login .login-box .left-card .item-card .publisher,
.login .login-box .left-card .item-card .job {
margin-top: 20px;
font-size: 24px;
font-family: perfectFont;
text-align: center;
}
.login .login-box .left-card .item-card .publisher {
font-weight: bold;
}
.login .login-box .left-card .item-card .job {
font-size: 16px;
margin-top: 10px;
}
.login .login-box .left-card .item-card .content {
font-size: 13px;
font-family: perfectFont;
margin-top: 20px;
margin: 20px;
line-height: 24px;
text-indent: 28px;
}
.login .login-box .right-card {
flex: 1;
padding-top: 50px;
font-family: perfectFont;
}
.login .login-box .right-card .company {
font-size: 20px;
text-align: center;
font-weight: bold;
}
.login .login-box .right-card .t {
margin-top: 20px;
font-size: 34px;
text-align: center;
font-weight: bold;
margin-bottom: 30px;
}
.field_wrap {
width: 330px;
margin: 0 auto;
font-family: perfectFont;
}
.field_wrap .pwd_box {
position: relative;
}
.field_wrap .pwd_box .mu-text-field {
width: 100%;
color: rgba(0, 0, 0, 0.54);
}
.field_wrap .pwd_box .mu-text-field.has-label {
min-height: 72px;
}
.field_wrap .pwd_box .mu-text-field .mu-text-field-content {
display: block;
height: 100%;
padding-bottom: 12px;
padding-top: 4px;
}
.field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content {
padding-top: 28px;
padding-bottom: 12px;
}
.field_wrap
.pwd_box
.mu-text-field.has-label
.mu-text-field-content
.mu-text-field-label {
line-height: 20px;
transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 1;
cursor: text;
transform: translateZ(0) scale(0.75);
transform-origin: left top;
user-select: none;
pointer-events: none;
backface-visibility: hidden;
font-size: 16px;
font-family: perfectFont;
font-weight: bold;
}
.field_wrap
.pwd_box
.mu-text-field.has-label
.mu-text-field-content
.mu-text-field.has-label
.mu-text-field-label {
top: 8px;
position: absolute;
}
.field_wrap
.pwd_box
.mu-text-field.has-label
.mu-text-field-content
.mu-text-field-input {
appearance: none;
outline: none;
border: none;
background: none;
border-radius: 0 0 0 0;
box-shadow: none;
display: block;
padding: 0;
margin: 0;
width: 100%;
height: 32px;
color: rgba(0, 0, 0, 0.87);
font-family: inherit;
position: relative;
}
.field_wrap .el-button,
.field_wrap .el-checkbox__inner {
border-radius: 0;
}
.mu-text-field-line {
background-color: rgba(0, 0, 0, 0.4);
margin: 0;
height: 1px;
border: none;
left: 0;
right: 0;
position: absolute;
box-sizing: content-box;
overflow: visible;
}
.mu-text-field-focus-line {
margin: 0;
height: 2px;
border: none;
background-color: #409efe;
position: absolute;
left: 0;
right: 0;
margin-top: -1px;
transform: scaleX(0);
transition: -webkit-transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.mu-text-field-focus-line.focus {
transform: scaleX(1);
}
.el-button--primary,
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #409efe !important;
border-color: #409efe !important;
}
.login .login-box .right-card .forget {
margin-top: 12px;
display: flex;
}
.login .login-box .right-card .forget .item-forget {
flex: 1;
font-size: 14px;
font-family: perfectFont;
}
.login .login-box .right-card .forget .item-forget:last-child {
text-align: right;
}
.login .login-box .right-card .forget .item-forget a {
color: #000;
text-decoration: none;
}
.login .login-box .right-card .forget .item-forget a:hover {
color: #409efe;
}
</style>
.login {
background: url("../assets/img/login/bg.jpg") no-repeat 100% 100%;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.logo-box {
position: absolute;
top: 30px;
left: 30px;
width: 120px;
font-size: 48px;
font-family: perfectFont;
color: #fff;
}
.login .login-box {
width: 1000px;
height: 560px;
box-shadow: 0 6px 20px 5px rgba(40, 120, 255, 0.1),
0 16px 24px 2px rgba(0, 0, 0, 0.05);
border-radius: 8px;
background: #fff;
display: flex;
}
.login .login-box .left-card {
width: 440px;
height: 100%;
}
.login .login-box .left-card .item-card {
background: url("../assets/img/login/yinhao.png") right bottom/221px no-repeat,
linear-gradient(180deg, #2878ff, #409efe);
width: 100%;
height: 100%;
padding-top: 96px;
color: white;
box-sizing: border-box;
}
.login .login-box .left-card .item-card .head-icon {
width: 104px;
height: 104px;
margin: 0 auto;
border-radius: 100%;
background: rgba(40, 120, 255, 0.5);
padding: 5px;
}
.login .login-box .left-card .item-card .head-icon img {
width: 100%;
height: 100%;
border-radius: 100%;
}
.login .login-box .left-card .item-card .publisher,
.login .login-box .left-card .item-card .job {
margin-top: 20px;
font-size: 24px;
font-family: perfectFont;
text-align: center;
}
.login .login-box .left-card .item-card .publisher {
font-weight: bold;
}
.login .login-box .left-card .item-card .job {
font-size: 16px;
margin-top: 10px;
}
.login .login-box .left-card .item-card .content {
font-size: 13px;
font-family: perfectFont;
margin-top: 20px;
margin: 20px;
line-height: 24px;
text-indent: 28px;
}
.login .login-box .right-card {
flex: 1;
padding-top: 50px;
font-family: perfectFont;
}
.login .login-box .right-card .company {
font-size: 20px;
text-align: center;
font-weight: bold;
}
.login .login-box .right-card .t {
margin-top: 20px;
font-size: 34px;
text-align: center;
font-weight: bold;
margin-bottom: 30px;
}
.field_wrap {
width: 330px;
margin: 0 auto;
font-family: perfectFont;
}
.field_wrap .pwd_box {
position: relative;
}
.field_wrap .pwd_box .mu-text-field {
width: 100%;
color: rgba(0, 0, 0, 0.54);
}
.field_wrap .pwd_box .mu-text-field.has-label {
min-height: 72px;
}
.field_wrap .pwd_box .mu-text-field .mu-text-field-content {
display: block;
height: 100%;
padding-bottom: 12px;
padding-top: 4px;
}
.field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content {
padding-top: 28px;
padding-bottom: 12px;
}
.field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content .mu-text-field-label {
line-height: 20px;
transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 1;
cursor: text;
transform: translateZ(0) scale(0.75);
transform-origin: left top;
user-select: none;
pointer-events: none;
backface-visibility: hidden;
font-size: 16px;
font-family: perfectFont;
font-weight: bold;
}
.field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content .mu-text-field.has-label .mu-text-field-label {
top: 8px;
position: absolute;
}
.field_wrap .pwd_box .mu-text-field.has-label .mu-text-field-content .mu-text-field-input {
appearance: none;
outline: none;
border: none;
background: none;
border-radius: 0 0 0 0;
box-shadow: none;
display: block;
padding: 0;
margin: 0;
width: 100%;
height: 32px;
color: rgba(0, 0, 0, 0.87);
font-family: inherit;
position: relative;
}
.field_wrap .el-button,
.field_wrap .el-checkbox__inner {
border-radius: 0;
}
.mu-text-field-line {
background-color: rgba(0, 0, 0, 0.4);
margin: 0;
height: 1px;
border: none;
left: 0;
right: 0;
position: absolute;
box-sizing: content-box;
overflow: visible;
}
.mu-text-field-focus-line {
margin: 0;
height: 2px;
border: none;
background-color: #409efe;
position: absolute;
left: 0;
right: 0;
margin-top: -1px;
transform: scaleX(0);
transition: -webkit-transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.mu-text-field-focus-line.focus {
transform: scaleX(1);
}
.el-button--primary,
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #409efe !important;
border-color: #409efe !important;
}
.login .login-box .right-card .forget {
margin-top: 12px;
display: flex;
}
.login .login-box .right-card .forget .item-forget {
flex: 1;
font-size: 14px;
font-family: perfectFont;
}
.login .login-box .right-card .forget .item-forget:last-child {
text-align: right;
}
.login .login-box .right-card .forget .item-forget a {
color: #000;
text-decoration: none;
}
.login .login-box .right-card .forget .item-forget a:hover {
color: #409efe;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment