Vue3 第二十八篇：常用页面：登录页

JSX组件

import {reactive} from 'vue'
import style from './login.module.css'
import logo from './admin-logo.png'

let {m}=reactive({
    m:{
        username:'',
        password:''
    }
})

//页面主视图
const Login = () => {
    return(
        <>
        <div className={style.viewBox}>
		<div className={style.bg1}></div>
		<div className={style.bg2}></div>
		<div className={style.loginBox}>
            <Top></Top>
            <Form></Form>
		</div>
		{/* 底部 版权 */}
		<div style="position: absolute; bottom: 40px; width: 100%; text-align: center; color: #666;">
			Copyright ©2020 sa-admin模板 | xx省xxx网络科技有限公司 - 提供技术支持
		</div>
	</div>
        </>
    )
};

// 表头
const Top=()=>{
    return(
        <>
            <div className={style.loginTop}>
                <img src={logo} className={style.logoImg}/>
                <span className={style.adminTitle}>SA-后台模板</span>
            </div>
        </>
    )
}

// 表单
const Form=()=>{
    // TODO 登录
    const ok=()=>{
        layer.msg('登录成功',{icon:1,time:1000})
    }
    const enterEvent=(event)=>{
        if (event.keyCode === 13) {
            ok()
        }
    }
    return(
        <>
        <div className={style.fromBox}>
					<h3 className={style.fromTitle}>账号登录</h3>
					<el-form size="small" label-position="left" label-width="0px">
						<el-form-item>
							<el-input prefix-icon="el-icon-user" v-model={m.username} placeholder="请输入账号"></el-input>
						</el-form-item>
						<el-form-item>
							<el-input prefix-icon="el-icon-unlock" v-model={m.password} type="password" placeholder="请输入密码" onKeyup={enterEvent}></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" size="small" style="width: 100%;" onClick={ok}>登录</el-button>
						</el-form-item>
						<el-form-item>
							<span style="color: #999;">测试账号：sa/sa123456</span>
						</el-form-item>
					</el-form>
				</div>
        </>
    )
}
export default Login

CSS样式：

/* 视图盒子 */
.viewBox{position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1000;}
/* EAEFF3 */
.bg1{height: 50%; background: linear-gradient(to bottom right, #0466c5, #3496F5);}
.bg2{height: 50%; background-color: #EAEFF3;}

.loginBox{width: 400px; height: 400px; position: absolute; left: calc(50% - 200px); top: calc(50% - 250px); }
/* .login-box{} */


/* logo */
.loginTop{margin-bottom: 40px; text-align: center; }
.logoImg{width: 50px; height: 50px; vertical-align: middle;border-radius: 50%; margin-left: -10px; margin-right: 20px;}
.logoImg{ position: relative; top: -5px; }
.adminTitle{font-size: 28px; color: #FFF; font-weight: 700;}

/* 表单 */
.fromBox{padding: 20px 50px; background-color: #FFF;}
.fromBox{ border-radius: 1px; box-shadow: 1px 1px 2px #666;}
.fromTitle{margin-top: 20px; margin-bottom: 30px; text-align: center;}