effekt-interface-frontend/src/components/User/Login.vue

<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">&nbsp;</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">&nbsp;</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>