增加造数的页面
This commit is contained in:
qiaoxinjiu
232
src/components/User/Login.vue
Normal file
232
src/components/User/Login.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<div id="backgroud">
|
||||
<div class="content_right">
|
||||
<div class="login-body-title">
|
||||
<h2>登录</h2>
|
||||
</div>
|
||||
<div class="messge">
|
||||
<span>{{ msg }}</span>
|
||||
</div>
|
||||
<div class="cr_top">
|
||||
<div class="ct_input" style="height: 60px;width: 254px">
|
||||
<span class="ct-img-yhm"> </span>
|
||||
<input
|
||||
id="username"
|
||||
v-model="username"
|
||||
name="username"
|
||||
class="input_text"
|
||||
tabindex="1"
|
||||
accesskey="n"
|
||||
type="text"
|
||||
size="25"
|
||||
autocomplete="off"
|
||||
placeholder="学号">
|
||||
</div>
|
||||
<div class="ct_input" style="height:60px;width: 254px">
|
||||
<span class="ct_img_mm"> </span>
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
name="password"
|
||||
class="input_text"
|
||||
tabindex="2"
|
||||
accesskey="p"
|
||||
type="password"
|
||||
size="25"
|
||||
autocomplete="off"
|
||||
placeholder="密码">
|
||||
</div>
|
||||
<input class="btn_login" value="登录" @click="handleLogin">
|
||||
</div>
|
||||
<div class="account-oprate clearfix">
|
||||
<router-link :to="{ name: 'register' }">
|
||||
<a class="regist-btn">注册</a>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Login } from '@/api/Userapi'
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
data() {
|
||||
return {
|
||||
msg: ' ',
|
||||
username: null,
|
||||
password: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleLogin() {
|
||||
Login({
|
||||
studentId: this.username,
|
||||
password: this.password
|
||||
}).then(data => {
|
||||
if (data.code === 200 && data.success === 'true') {
|
||||
localStorage.setItem('userinfo', JSON.stringify(data.data.userinfo))
|
||||
localStorage.setItem('Token', data.data.token)
|
||||
this.$store.commit('SetRole', data.data.userinfo.userStatus)
|
||||
this.$router.push({ path: '/effekt' })
|
||||
} else {
|
||||
this.msg = data.message
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "../../assets/css/Form.css";
|
||||
|
||||
.content_right {
|
||||
padding: 20px 0;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
border-radius: 3px;
|
||||
border-color: rgba(250, 255, 251, .8);
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, .1), 0 0 8px rgba(140, 141, 140, .6);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
outline: 0;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cr_top .ct_input {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.account-oprate .regist-btn {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.messge {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
height: 20px;
|
||||
text-align: left;
|
||||
padding-left: 24px;
|
||||
color: #D60909;
|
||||
}
|
||||
|
||||
.content_right .cr_top {
|
||||
position: relative;
|
||||
margin: 0 23px 0;
|
||||
}
|
||||
|
||||
.content_right .input_text {
|
||||
margin-bottom: 18px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.account-oprate {
|
||||
width: 252px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.ct_img_mm,
|
||||
.ct-img-yhm {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url("https://t4.chei.com.cn/passport/images/login2014/icon_input.png");
|
||||
}
|
||||
|
||||
.ct-img-yhm {
|
||||
background-position: -16px 0;
|
||||
}
|
||||
|
||||
.input_text {
|
||||
display: inline-block;
|
||||
width: 224px;
|
||||
height: 24px;
|
||||
padding: 8px 0 8px 28px;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.input_text:hover {
|
||||
border-color: rgba(82, 168, 236, .8);
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 0 8px rgba(82, 168, 236, .6);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.btn_login:hover {
|
||||
background-color: #3e82dc;
|
||||
}
|
||||
|
||||
.btn_login {
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
width: 254px;
|
||||
height: 37px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
border: 1px solid #4591f5;
|
||||
background-color: #4591f5;
|
||||
margin-bottom: 14px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
option,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
body,
|
||||
button,
|
||||
code,
|
||||
dd,
|
||||
div,
|
||||
dl,
|
||||
dt,
|
||||
fieldset,
|
||||
form,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
input,
|
||||
legend,
|
||||
li,
|
||||
ol,
|
||||
p,
|
||||
pre,
|
||||
td,
|
||||
textarea,
|
||||
th,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: '\5FAE\8F6F\96C5\9ED1', '\5B8B\4F53', Arial, Helvetica, sans-serif;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user