考核登录界面login

Rembin-Li

已于 2024-07-03 21:06:02 修改

阅读量222

点赞数 2

文章标签：前端 javascript html

于 2024-06-26 15:12:04 首次发布

本文链接：https://blog.csdn.net/qq_61894863/article/details/139989947

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
	</head>
	<body>
		<div class="wrap-y">
			<div class="wrap-x y-center space-around">
				<div class="wrap-x y-center">
					<img src="img/logo.jpg" />
					<div style="font-size: 28px;color: #999999;">欢迎登录</div>
				</div>
				<div class="">
					<a href="index.html">进入网站首页</a>
				</div>
			</div>
			<div class="content">
				<div style="flex: 1;"></div>
				<!-- 登录盒子 -->
				<div class="login wrap-y">
					<!-- 标题部分 -->
					<div class="wrap-x pad-tb line-bottom space-around">
						<div id="user" style="color: red;" onclick="change(1)">账户登录</div>
						<div id="code" onclick="change(2)">
							扫码登录
						</div>
					</div>
					<!-- 用户名登录的界面 -->
					<div class="wrap-y" id="div-user">
						<!-- 短信文案	 -->
						<div class="pad-tb color-red msg margin-lr">
							使用短信登录
						</div>
						<!-- 用户输入框 -->
						<div class="wrap-x margin-lr ">
							<img class="input-icon" />
							<input id="username" placeholder="请输入用户名" />
						</div>
						<!-- 密码输入框 -->
						<div class="wrap-x margin-lr pad-tb">
							<img class="input-icon" />
							<input  id="password" placeholder="请输入密码" />
						</div>
						<div class="margin-lr button" onclick="login()">登录</div>
						<div class="wrap-x margin-lr space-between pad-tb bottom-text">
							<div>忘记密码</div>
							<div>免费注册</div>
						</div>
					</div>
					<!-- 二维码登录的界面 -->
					<div class="wrap-y flex-x-center pad-tb" id="div-code" style="display: none;">
						<img src="img/erweima.jpg" style="width: 200px;height: 200px;" />
						<div style="font-size: 12px;">打开<span>助农商城</span>扫码登录</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		var login = () => {
			var username = document.getElementById("username").value//获取输入框的用户名
			var password = document.querySelector("#password").value//获取输入框的密码
			if(username==""){
				alert("用户名不能为空")
				return
			}
			if(password==""){
				alert("密码不能为空")
				return
			}
			var namePattern = /^[0-9a-zA-Z]{3,9}$/g 
			var pwdPattern = /^[0-9a-zA-Z]{6}$/g 
			if(!namePattern.test(username)){
				alert("用户名只能由数字字母构成，且长度为3到9位")
				return
			}
			if(!pwdPattern.test(password)){
				alert("密码只能由数字字母构成，且长度为6位")
				return
			}
			
		}
		var change = (type) => {
			var user = document.getElementById("user")
			var code = document.querySelector("#code")
			var div_user = document.getElementById("div-user")
			var div_code = document.querySelector("#div-code")
			if (type == 1) { //表示点击了用户名登录
				user.style.color = "red"
				code.style.color = "black"
				div_user.style.display = "flex" //显示
				div_code.style.display = "none" //隐藏


			} else { //表示点击了扫码登录
				code.style.color = "red"
				user.style.color = "black"
				div_code.style.display = "flex" //显示
				div_user.style.display = "none" //隐藏
			}
		}
	</script>
	<style>
		/* 竖直布局 */
		.wrap-y {
			display: flex;
			/* 设置弹性布局布局向为上下 */
			flex-direction: column;
		}

		/* 水平布局 */
		.wrap-x {
			display: flex;

		}

		/* 左右两边 ，居中 */
		.space-around {
			justify-content: space-around;
		}

		/* 左右两边 ，没有左右边距 */
		.space-between {
			justify-content: space-between;
		}

		/* 如果是水平布局，水平居中 */
		.flex-center {
			justify-content: center;
		}

		/* 如果是竖直布局，水平居中 */
		.flex-x-center {
			align-items: center;
		}

		.y-center {
			align-items: center;
		}

		.content {
			display: flex;
			background: url(img/lunbo-1.png) no-repeat 50%/cover;
			width: 100%;
			height: 500px;
		}

		.login {
			height: 400px;
			width: 400px;
			border-radius: 10px;
			background-color: white;
			margin-right: 100px;
			margin-top: 50px;
		}

		.pad-tb {
			padding: 20px 0px;
		}

		.line-bottom {
			border-bottom: 1px solid #efefef;
		}

		.color-red {
			color: red;
		}

		.margin-lr {
			margin: 0px 30px;
		}

		.msg {
			text-align: right;

		}

		.input-icon {
			height: 40px;
			width: 40px;
			background: #ccc;
		}

		input {
			border: 1px solid #ccc;
			flex: 1;
			padding: 0 10px;
		}

		.button {
			background-color: red;
			color: white;
			padding: 10px 0;
			text-align: center;
			border-radius: 4px;
		}

		.bottom-text {
			font-size: 10px;
			color: #999999;
		}

		span {
			color: red;
			font-size: 16px;
		}
	</style>
</html>

主页

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>事件</title>
</head>

<body>

    <div style="display: flex;flex-direction: column;">
        <div style="position: fixed;top: 0;">
            <div id="topView">
                <div style="flex: 1;"></div>
                <!--  -->
                <a href="login(1).html">登录</a>
                <a>注册</a>
                <a>我的订单</a>
                <a>会员中心</a>
                <a>帮助中心</a>
                <a>关于我们</a>
                <a style="margin-right: 200px; border-right:0px solid white;">手机版</a>
            </div>
            <div style="display: flex;justify-content: center;padding: 10px 0;">
                <img
                    src="img/logo.jpg" />
                <ul>
                    <li><a>首页</a></li>
                    <li><a>居家</a></li>
                    <li><a>美食</a></li>
                    <li><a>服饰</a></li>
                    <li><a>母婴</a></li>
                    <li><a>个护</a></li>
                    <li><a>严选</a></li>
                    <li><a>数码</a></li>
                    <li><a>运动</a></li>
                    <li><a>杂项</a></li>
                </ul>
            </div>
        </div>

        <div class="content">
            <div class="wrap-y bg-black left-view">
                <div class="item"><span>助农 </span>原生态黑猪 水产海鲜</div>
                <div class="item"><span>居家 </span>茶咖酒具 水具杯壶</div>
                <div class="item"><span>服饰 </span>室外拖鞋 春夏潮鞋</div>
                <div class="item"><span>助农 </span>原生态黑猪 水产海鲜</div>
                <div class="item"><span>助农 </span>原生态黑猪 水产海鲜</div>
                <div class="item"><span>助农 </span>原生态黑猪 水产海鲜</div>
                <div class="item"><span>助农 </span>原生态黑猪 水产海鲜</div>
                <div class="item"><span>助农 </span>原生态黑猪 水产海鲜</div>
                <div class="item"><span>助农 </span>原生态黑猪 水产海鲜</div>
                <div class="item"><span>助农 </span>原生态黑猪 水产海鲜</div>
            </div>
        </div>
    </div>
</body>
<style>
    .left-view{
        height: 100%;
        width: 20%;
    }
    .item{
        width: 100%;
        color: white;
        font-size: 14px;
        padding: 12px 0;
        text-align: center;
    }
    .item:hover{
        background-color: red;
    }
    .item span{
        font-size: 18px;
        /* margin-left: 30px; */
    }
    .bg-black{
        background: rgba(0, 0, 0, 0.8);
    }
    .wrap-y {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    ul {
        list-style: none;
        display: flex;

    }
    img {
        width: 250px;
        height: 75px;
    }

    li {
        color: #333;
        padding: 10px 20px;
        border-radius: 5px;
    } 

    li :hover{
        color: rgb(182, 20, 20);
        border-bottom: 1px solid  rgb(182, 20, 20);
    }
    #topView {
        background-color: #FF0000;
        width: 100vw;
        height: 50px;
        display: flex;
        align-items: center;

    }

    #topView a {
        font-size: 12px;
        color: white;
        padding: 0 20px;
        border-right: 2px solid white;
    }

    .content {
        background: url(img/lunbo-2.jpg) no-repeat 50%/cover;
        margin: 0 200px;
        height: 500px;
        margin-top: 150px;
    }
</style>

</html>