Files
bamboo_admin_message/src/pages/login/index.vue
T
2022-07-09 02:53:59 +08:00

86 lines
2.0 KiB
Vue

<template>
<div class="text-center width-100vw">
<img src="/loginBackground.png" class="login-background">
<div class="login-box page-center" style="width: 360px;height: 360px;">
<el-card class="box-card width-100p margin-right-l">
<div class="title-l text-center">
账号登录
</div>
<el-form ref="form" :model="form" label-position="left">
<el-form-item label="账号">
<el-input v-model="form.account"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.account"></el-input>
</el-form-item>
<el-form-item class="text-center">
<el-button type="primary" @click="login">立即登录</el-button>
<el-button @click="registered">立即注册</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</div>
</template>
<script>
export default {
navigate: {
hide : true,
notShow: true,
},
//组件
components: {},
props : [],
//数据
data() {
return {
type: 'accountPassword',
form: {
account : '',
password: '',
},
}
},
//计算属性
computed: {},
//在实例创建完成后被立即调用
created() {
},
//实例被挂载后调用
mounted() {
},
//methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。
methods: {
async login() {
const res = await this.$api.post('/permission/api/login', {
type: this.type,
data: this.form,
})
console.log('res',res);
},
async registered() {
const res = await this.$api.post('/permission/api/registered', {
type: this.type,
data: this.form,
})
console.log('res',res);
}
},
//包含 Vue 实例可用过滤器的哈希表。
filters: {},
//侦听器
watch: {},
}
</script>
<style scoped lang="less">
.login-background {
width: 100vh;
height: 100vh;
}
.login-box {
}
</style>