Skip to content

E
ElectricitySheep
Commit f54cfca1 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 92adce88
Show whitespace changes
Inline Side-by-side
Showing with 118 additions and 84 deletions
src/components/Login.vue
View file @ f54cfca1
<style>
* {
* {
margin: 0;
padding: 0;
}
.loginDiv {
}
.loginDiv {
width: 100%;
height: 100%;
background-image: url("../assets/img/loginBack.jpg");
......@@ -11,8 +12,9 @@
background-size: cover;
background-size: 100% 100%;
background-position: center;
}
.loginOpacity {
}
.loginOpacity {
background-color: rgba(0, 0, 0, 0.15);
height: 100%;
width: 100%;
......@@ -20,8 +22,9 @@
left: 0;
top: 0;
z-index: 1;
}
.loginDiv .box-card {
}
.loginDiv .box-card {
position: relative;
border-radius: 15px;
z-index: 99;
......@@ -35,38 +38,63 @@
background-position: center;
background-size: 100% 100%;
background-image: url("../assets/img/loginBack.jpg");
}
[flex]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}
[flex~="main:center"]{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
[flex~="cross:center"]{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.loginDiv .logo {
}
[flex] {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
[flex~="main:center"] {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
[flex~="cross:center"] {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.loginDiv .logo {
position: absolute;
left: 40px;
top: 40px;
height: 50px;
}
.loginDiv .login-form {
}
.loginDiv .login-form {
padding: 50px 45px 30px;
height: 480px;
width: 245px;
float: right;
background-color: #fff;
}
.loginDiv .form-title {
}
.loginDiv .form-title {
font-size: 26px;
color: #1F4881;
margin-bottom: 40px;
}
.loginDiv .el-form-item--mini.el-form-item, .loginDiv .el-form-item--small.el-form-item {
}
.loginDiv .el-form-item--mini.el-form-item,
.loginDiv .el-form-item--small.el-form-item {
margin-bottom: 18px;
}
.loginDiv .el-input .el-input__inner {
}
.loginDiv .el-input .el-input__inner {
height: 36px;
border-radius: 18px;
background-color: #f7f5fb;
border-color: #f7f5fb;
}
.loginDiv .el-input__inner {
}
.loginDiv .el-input__inner {
-webkit-appearance: none;
background-color: #FFF;
background-image: none;
......@@ -81,18 +109,20 @@
line-height: 40px;
outline: 0;
padding: 0 15px;
-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
-webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
width: 100%;
}
.register_box {
}
.register_box {
position: absolute;
right: 15%;
bottom: 35px;
width: 150px;
font-size:14px;
}
.register {
font-size: 14px;
}
.register {
display: inline-block;
width: 48%;
height: 15px;
......@@ -100,62 +130,53 @@
text-align: center;
cursor: pointer;
color: #4291ff;
}
.login-btn {
}
.login-btn {
width: 100%;
border-radius: 20px;
height: 38px;
font-size: 16px;
background: linear-gradient(to right, #2E9FFF, #3E79FF);
box-shadow: 0 4px 10px rgba(0, 123, 255, .5);
}
.loginDiv .el-card__body {
}
.loginDiv .el-card__body {
padding: 0;
}
}
</style>
<template>
<div class="loginDiv">
<div class="loginOpacity" flex="cross:center main:center">
<div class="el-card box-card is-always-shadow">
<div class="el-card__body">
<img alt class="logo" src="../assets/img/logo.png"/>
<img alt class="logo" src="../assets/img/logo.png" />
<form class="el-form login-form">
<div class="form-title">管理员登录</div>
<div class="el-form-item is-required el-form-item--small">
<div class="el-form-item__content" style="margin-left: 0px;">
<div class="el-input el-input--small">
<input
type="text"
autocomplete="off"
v-model="msg.UserName"
placeholder="请输入用户名"
class="el-input__inner"
/>
<input type="text" autocomplete="off" v-model="msg.Account" placeholder="请输入用户名"
class="el-input__inner" maxlength="25" />
</div>
</div>
</div>
<div class="el-form-item is-required el-form-item--small">
<div class="el-form-item__content" style="margin-left: 0px;">
<div class="el-input el-input--small">
<input
type="password"
autocomplete="off"
placeholder="请输入密码"
v-model="msg.Password"
class="el-input__inner"
/>
<input type="password" autocomplete="off" placeholder="请输入密码" v-model="msg.Password"
class="el-input__inner" maxlength="25" />
</div>
</div>
</div>
<div class="el-form-item is-required el-form-item--small">
<div class="el-form-item__content" style="margin-left: 0px;">
<div class="el-input el-input--small" style="width: 140px;">
<input type="text" autocomplete="off" placeholder="验证码" v-model="msg.validataCode" class="el-input__inner" />
<input type="text" autocomplete="off" placeholder="验证码" v-model="msg.ValidataCode"
class="el-input__inner" maxlength="4" />
</div>
<img
class="pic-captcha"
src="/web/index.php?r=site%2Fpic-captcha&amp;v=5e9e7ef6a93ac6.36592545"
/>
<img class="pic-captcha" src="/web/index.php?r=site%2Fpic-captcha&amp;v=5e9e7ef6a93ac6.36592545" />
</div>
</div>
<div class="el-form-item el-form-item--small">
......@@ -173,11 +194,8 @@
</div>
<div class="el-form-item el-form-item--small">
<div class="el-form-item__content" style="margin-left: 0px;">
<button
type="button"
@click="login()"
class="el-button login-btn el-button--primary el-button--small is-round"
>
<button type="button" @click="login()"
class="el-button login-btn el-button--primary el-button--small is-round">
<span>登录</span>
</button>
</div>
......@@ -197,10 +215,10 @@
export default {
data() {
return {
msg:{
UserName:'',
Password:'',
validataCode:''
msg: {
Account: '', //账号
Password: '', //密码
ValidataCode: '', //验证码
}
};
},
......@@ -209,12 +227,27 @@
},
methods: {
//登录
login(){
login() {
if (this.msg.Account == "") {
this.Info("请输入用户名!")
}
if (this.msg.Password == "") {
this.Info("请输入密码!")
}
if (this.msg.ValidataCode == "") {
this.Info("请输入验证码!")
}
this.apipost("api/user/login", this.msg, res => {
console.log("res", res);
})
}
},
mounted() {
if (!this.isOnline()) {
this.msg.Account = "13551126755";
this.msg.Password = "123456";
this.msg.ValidataCode = "1234";
}
}
};
</script>
\ No newline at end of file
src/main.js
View file @ f54cfca1
......@@ -3,12 +3,13 @@
import Vue from 'vue'
import App from './App'
import router from './router'
import ajaxPlug from './plug/index'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
Vue.use(ajaxPlug)
/* eslint-disable no-new */
new Vue({
el: '#app',
......
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