|
|
@@ -0,0 +1,154 @@
|
|
|
+<template>
|
|
|
+ <div class='full-screen flex flex-center '>
|
|
|
+ <el-card class='login'>
|
|
|
+ <div class='flex flex-center' style='width: 100%'>
|
|
|
+ <div class='flex-child-average flex flex-center left'>
|
|
|
+ <div class='flex flex-justify-start flex-align-start full-height '>
|
|
|
+ <img src='@/assets/img/logo.png' class='padding-14 logo'/>
|
|
|
+ <img src='https://hooray.gitee.io/fantastic-admin-example/assets/login-banner.a565fac8.png' class='logo-main' />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class='flex-child-average right'>
|
|
|
+ <div class='padding-20'>
|
|
|
+ <span class='font-24 black bold '>欢迎来到梧桐树云项目管理云平台👏</span>
|
|
|
+ <el-form class='form' :model="form" :rules="rules" ref='loginForm'>
|
|
|
+ <el-form-item prop='name'>
|
|
|
+ <el-input
|
|
|
+ v-model='form.name'
|
|
|
+ size='large'
|
|
|
+ placeholder="用户名"
|
|
|
+ prefix-icon="Avatar"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop='pass'>
|
|
|
+ <el-input
|
|
|
+ v-model='form.pass'
|
|
|
+ size='large'
|
|
|
+ placeholder="密码"
|
|
|
+ :type='flag ? "text" : "password"'
|
|
|
+ prefix-icon="WalletFilled">
|
|
|
+ <template v-slot:suffix>
|
|
|
+ <div @click='flag=!flag' class='pointer'>
|
|
|
+ <el-icon v-if='!flag'><Hide /></el-icon>
|
|
|
+ <el-icon v-else><View /></el-icon>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <div class='flex flex-align-center flex-justify-between full-width'>
|
|
|
+ <el-checkbox :checked='true'>记住我</el-checkbox>
|
|
|
+ <el-button type='text' class='font-12'>忘记密码?</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-button type='primary' class='full-width' size='large' @click='submint'>登录</el-button>
|
|
|
+ <div class='mt-20 flex flex-center'>
|
|
|
+ <span>还没账户？</span>
|
|
|
+ <el-button type='text'>注册账户</el-button>
|
|
|
+ </div>
|
|
|
+ <el-divider/>
|
|
|
+ <div class='flex flex-col'>
|
|
|
+ <span class='grey-6'>
|
|
|
+ 由梧桐经济学院提供技术支持
|
|
|
+ </span>
|
|
|
+ <div>
|
|
|
+ <el-button size='small' type='primary' plain class='mt-10' @click='loginAdmin'>admin</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<route>
|
|
|
+ {
|
|
|
+ meta: {
|
|
|
+ layout: 'empty',
|
|
|
+ },
|
|
|
+ }
|
|
|
+</route>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'login',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ flag: false,
|
|
|
+ form: {
|
|
|
+ name: '',
|
|
|
+ pass: ''
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: '请输入用户名', trigger: 'blur' },
|
|
|
+ { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ pass: [
|
|
|
+ { required: true, message: '请输入密码', trigger: 'blur' },
|
|
|
+ { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ submint () {
|
|
|
+ this.$refs.loginForm.validate((res) => {
|
|
|
+ if (res) {
|
|
|
+ this.$message.success('登录成功')
|
|
|
+ this.$router.replace('/')
|
|
|
+ } else {
|
|
|
+ this.$message.error('登录失败')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ loginAdmin () {
|
|
|
+ this.form.name = 'admin'
|
|
|
+ this.form.pass = 'admin'
|
|
|
+ this.submint()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang='scss' scoped>
|
|
|
+.login{
|
|
|
+ :deep(.el-card__body){
|
|
|
+ padding: 0 !important;
|
|
|
+ };
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: white;
|
|
|
+ width: 950px;
|
|
|
+ height: 500px;
|
|
|
+ .left {
|
|
|
+ background-color: #F5F7FA;
|
|
|
+ height: 500px;
|
|
|
+ .logo {
|
|
|
+ width: 45px;
|
|
|
+ height: 45px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .logo-main {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 70px;
|
|
|
+ margin-left: -80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ background-color: white;
|
|
|
+ height: 500px;
|
|
|
+ .form{
|
|
|
+ margin-top: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
scorpio
