<template>
<
div class="wrap">
<
div class="login">
<h1 class="tc mb20 fn f20">十方智育
-后台管理系统</h1>
<el
-form ref="ruleFormRef" style="max
-width
: 600px"
:model="ruleForm"
:rules="rules" label
-width="auto"
class="demo
-ruleForm" status
-icon>
<el
-form
-item label="用户名" prop="username">
<el
-input v
-model="ruleForm.username" placeholder="请输入" prefix
-icon="User" />
</el
-form
-item>
<el
-form
-item label="密码" prop="password">
<el
-input show
-password v
-model="ruleForm.password" placeholder="请输入" prefix
-icon="Lock" />
</el
-form
-item>
<!
-- 验证码
-->
<el
-form
-item label="验证码" prop="code">
<
div class="code">
<el
-input v
-model="ruleForm.code" placeholder="请输入" prefix
-icon="Odometer" />
<img class="ml5" src="/imgs/code.gif" alt="">
</
div>
</el
-form
-item>
<el
-form
-item label=" ">
<el
-checkbox
-group v
-model="ruleForm.remember">
<el
-checkbox value="1" name="type">记住密码</el
-checkbox>
</el
-checkbox
-group>
</el
-form
-item>
<el
-form
-item>
<el
-button size="large" style="width
: 100%;" type="primary" @click="submitForm(ruleFormRef)">登 录</el
-button>
</el
-form
-item>
</el
-form>
</
div>
</
div>
<p class="info tc">Copyright © 2018
-2024 ruoyi.vip All Rights Reserved.</p>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element
-plus'
import { useRouter } from 'vue
-router'
const router = useRouter();
const ruleFormRef = ref()
const ruleForm = reactive({
username
: 'admim',
password
: '123',
code
: '1',
remember
:['1']
})
const rules = reactive({
username
: [
{ required
: true, message
: '不许为空', trigger
: 'blur' }
],
password
: [
{ required
: true, message
: '不许为空', trigger
: 'blur' }
],
code
: [
{ required
: true, message
: '不许为空', trigger
: 'blur' }
]
})
const submitForm = async (formEl) => {
// if (!formEl) return
await formEl.validate((valid, fields) => {
params
:{
password
:ruleForm.password,
}
}).then(res=>{
let result = res.data;
if (result.code==1) {
// console.log('submit!')
ElMessage({
message
: '登录成功！',
type
: 'success',
})
router.replace('/');
} else {
console.log('error submit!', fields)
ElMessage({
message
: '登录失败！',
type
: 'warning',
})
}
})
}
</script>
<style scoped>
.wrap {
height
: 100vh;
background
-color
: pink;
background
-image
: url(@/assets/imgs/login
-bg.jpg);
background
-repeat
: no
-repeat;
background
-size
: cover;
background
-position
: center center;
display
: flex;
justify
-content
: center;
align
-items
: center;
}
.login{width
: 400px;padding
: 20px;background
-color
: #fff;border
-radius
: 10px;}
.code{display
: flex;height
: 36px;}
.info{position
: fixed;width
: 100%;bottom
: 10px;left
: 0;color
: #fff;}
</style>
本文介绍了如何利用CSS的`position: fixed`属性结合JavaScript实现网页上元素的居中效果。详细阐述了HTML、CSS和JavaScript代码示例，通过设置元素的初始位置和响应窗口大小变化来确保元素始终保持居中状态。
订阅专栏 解锁全文
扫一扫
1396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
