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