|
@@ -1,8 +1,163 @@
|
|
|
<template>
|
|
|
+ <div class="login">
|
|
|
+ <span class="login_top">账号登陆</span>
|
|
|
+ <label class="heng"></label>
|
|
|
+ <div class="input-wrap">
|
|
|
+ <input class="input_user" type="text" v-model="name" />
|
|
|
+ <span v-if="error.name" class="err-msg">{{error.name}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="input-wrap">
|
|
|
+ <input class="input_psw" type="password" v-model="pwd" />
|
|
|
+ <span v-if="error.pwd" class="err-msg">{{error.pwd}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="input-wrap">
|
|
|
+ <button @click="login" class="submit">提交</button>
|
|
|
+ </div>
|
|
|
+ <div class="login_tom">
|
|
|
+ <span class="">还没有账号?</span>
|
|
|
+ <a href="" class="tom_left">注册账号</a>
|
|
|
+ <a href="" class="tom_right">忘记密码</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ export default {
|
|
|
+ name: 'login',
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ name: '',
|
|
|
+ pwd: '',
|
|
|
+ error: {
|
|
|
+ name: '',
|
|
|
+ pwd: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ check(name, pwd) {
|
|
|
+ if (!name) {
|
|
|
+ this.error.name = '请输入姓名'
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (!pwd) {
|
|
|
+ this.error.pwd = '请输入密码'
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ login() {
|
|
|
+ const {
|
|
|
+ name,
|
|
|
+ pwd,
|
|
|
+ $router
|
|
|
+ } = this
|
|
|
+ if (!this.check(name, pwd)) return
|
|
|
+
|
|
|
+ if (name == 'admin' && pwd == '123') {
|
|
|
+ $.router.push({
|
|
|
+ name: 'main'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ alert('用户名错误')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style scoped>
|
|
|
+ .login {
|
|
|
+ width: 250px;
|
|
|
+ height: 310px;
|
|
|
+ position: absolute;
|
|
|
+ top: 220px;
|
|
|
+ left: 224px;
|
|
|
+ background-color: #f8f6f7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit {
|
|
|
+ position: absolute;
|
|
|
+ left: 13px;
|
|
|
+ top: 140px;
|
|
|
+ background-color: #4297E8;
|
|
|
+ outline: none;
|
|
|
+ border: 0px;
|
|
|
+ width: 224px;
|
|
|
+ height: 38px;
|
|
|
+ color: white;
|
|
|
+ font-size: 17px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input_user {
|
|
|
+ border: 1px solid #4299e8;
|
|
|
+ outline: none;
|
|
|
+ height: 25px;
|
|
|
+ width: 192px;
|
|
|
+ position: absolute;
|
|
|
+ top: 55px;
|
|
|
+ left: 13px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background-image: url(../../../assets/img/login/re.png);
|
|
|
+ /*设置图片的地址*/
|
|
|
+ background-size: 20px 20px;
|
|
|
+ /*这里是图片的大小*/
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ /*让图片不重复*/
|
|
|
+ background-position: 5px 3px;
|
|
|
+ padding-left: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input_psw {
|
|
|
+ border: 1px solid #4299e8;
|
|
|
+ outline: none;
|
|
|
+ height: 25px;
|
|
|
+ width: 192px;
|
|
|
+ position: absolute;
|
|
|
+ top: 95px;
|
|
|
+ left: 13px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background-image: url(../../../assets/img/login/so.png);
|
|
|
+ /*设置图片的地址*/
|
|
|
+ background-size: 20px 20px;
|
|
|
+ /*这里是图片的大小*/
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ /*让图片不重复*/
|
|
|
+ background-position: 5px 3px;
|
|
|
+ padding-left: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login_top {
|
|
|
+ color: #4198e7;
|
|
|
+ padding-left: 22px;
|
|
|
+ position: absolute;
|
|
|
+ top: 15px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .heng {
|
|
|
+ width: 85px;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #4297E8;
|
|
|
+ position: absolute;
|
|
|
+ top: 40px;
|
|
|
+ left: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login_tom {
|
|
|
+ margin-top: 185px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 11px;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login_tom a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: #4297E8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tom_right {
|
|
|
+ padding-left: 58px;
|
|
|
+ }
|
|
|
</style>
|