84 lines
1.9 KiB
Vue
84 lines
1.9 KiB
Vue
<template lang="pug">
|
|
.account-signin.circumscription
|
|
div.card
|
|
.left SIGN IN
|
|
.right
|
|
input(v-model="account.name", type="text", placeholder="account")
|
|
input(v-model="account.password", type="password", placeholder="password")
|
|
button(@click="signin") Signin
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data: () => ({
|
|
account: {
|
|
name: "",
|
|
password: "",
|
|
},
|
|
}),
|
|
methods: {
|
|
signin() {
|
|
if (!this.account.name) return console.log("未填写用户名");
|
|
if (!this.account.password) return console.log("未填写密码");
|
|
this.$axios.post("/api/session", this.account).then((res) => {
|
|
this.$store.commit("account/init", res.data);
|
|
console.log(res.data);
|
|
if (res.status === 200) {
|
|
this.$router.push("/");
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.account-signin
|
|
padding-top: 6rem
|
|
.card
|
|
display: flex
|
|
width: 48rem
|
|
margin: auto
|
|
background-color: var(--background-main)
|
|
margin-top: 6rem
|
|
padding: 6rem 4rem
|
|
border-radius: 1rem
|
|
box-sizing: border-box
|
|
.left
|
|
flex: 1
|
|
font-size: 4rem
|
|
font-weight: bold
|
|
color: #ff8888
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
.right
|
|
width: 18rem
|
|
display: flex
|
|
flex-direction: column
|
|
input, button
|
|
margin-bottom: 1rem
|
|
font-size: 1.2rem
|
|
padding: .75rem
|
|
border: none
|
|
border-radius: .5rem
|
|
//.page-signin
|
|
//.contenter
|
|
// background: #f5f5f5
|
|
// .column
|
|
// display: flex
|
|
// flex-direction: column
|
|
// padding: 6rem 0
|
|
// input, button
|
|
// width: 16rem
|
|
// height: 3rem
|
|
// line-height: 3rem
|
|
// border: 1px solid #ccc
|
|
// border-radius: .5rem
|
|
// padding: 0 1rem
|
|
// margin: .5rem auto
|
|
// p
|
|
// width: 16rem
|
|
// margin: .5rem auto
|
|
</style>
|