登录页面2
2022-03-01 本文已影响0人
xueyueshuai
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.pageDiv {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
/* http://project-all.oss-cn-beijing.aliyuncs.com/%E7%9B%B4%E6%92%AD%E5%B8%A6%E8%B4%A7/20211124/112618_525397.jpg */
background-image: url('http://project-all.oss-cn-beijing.aliyuncs.com/jianzhan/20211123/204733_311667.jpeg');
background-size: 100% 100%;
}
.filterDiv {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
backdrop-filter: saturate(180%) blur(20px);
background-color: rgba(255, 255, 255, 0.1);
}
.pageDiv .centerDiv {
width: 380px;
min-height: 100px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 10px;
position: relative;
}
.pageDiv .centerDiv .titleDiv {
width: 90px;
height: 90px;
margin: 50px auto 30px;
text-align: center;
line-height: 90px;
font-size: 24px;
background-color: rgba(11, 193, 96, 0.8);
color: rgba(0, 0, 0, 0.5);
border-radius: 90px;
font-weight: bold;
}
.pageDiv .centerDiv .qrDiv {
width: 24px;
height: 24px;
background-color: #fff;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: absolute;
top: 114px;
left: 214px;
}
.pageDiv .centerDiv .qrDiv img {
width: 16px;
height: 16px;
}
.pageDiv .centerDiv .inputDiv {
width: 284px;
margin: 0 auto;
height: 38px;
background-color: #fff;
margin-bottom: 20px;
border-radius: 20px;
overflow: hidden;
position: relative;
}
.pageDiv .centerDiv .inputDiv input {
width: 100%;
height: 100%;
border: 0px solid red;
outline: none;
padding: 0 40px 0 20px;
}
.pageDiv .centerDiv .inputDiv .loginIcon {
position: absolute;
top: 11px;
right: 11px;
font-size: 16px;
cursor: pointer;
}
.pageDiv .otherDiv {
width: 284px;
margin: 10px auto 40px;
display: flex;
justify-content: space-around;
}
.pageDiv a {
text-decoration: none;
color: #343a40;
}
</style>
</head>
<body>
<div class="pageDiv">
<div class="filterDiv">
<div class="centerDiv">
<div class="titleDiv">新知</div>
<div class="qrDiv">
<img
src="http://project-all.oss-cn-beijing.aliyuncs.com/%E7%9B%B4%E6%92%AD%E5%B8%A6%E8%B4%A7/20211124/111842_805765.svg"
alt="">
</div>
<div class="inputDiv">
<input type="text" placeholder="输入账号">
</div>
<div class="inputDiv">
<input type="text" placeholder="输入密码">
<svg class="icon loginIcon"
style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path
d="M288 544v320a32 32 0 0 0 32 32h544a32 32 0 0 0 32-32V160a32 32 0 0 0-32-32H320a32 32 0 0 0-32 32v320h337.6l-170.176-170.176a32 32 0 0 1 45.248-45.248l226.304 226.24a32 32 0 0 1 0 45.28l-226.304 226.272a32 32 0 0 1-45.248-45.248l173.12-173.12H288z m0-64v-160a32 32 0 1 1-64 0V128a64 64 0 0 1 64-64h608a64 64 0 0 1 64 64v768a64 64 0 0 1-64 64H288a64 64 0 0 1-64-64v-192a32 32 0 0 1 64 0v-160H96a32 32 0 0 1 0-64h192z"
p-id="1929"></path>
</svg>
</div>
<br>
<div style="color:#343a40;text-align:center">
<svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
fill="currentColor"
d="M472.064 751.552 72.832 352.32c-22.08-22.08-22.08-57.792 0-79.872 22.016-22.016 57.792-22.08 79.872 0L512 631.744l359.296-359.296c22.016-22.016 57.792-22.08 79.872 0 22.08 22.08 22.016 57.792 0 79.872l-399.232 399.232C529.856 773.568 494.144 773.568 472.064 751.552z">
</path>
</svg>
</div>
<div class="otherDiv">
<a href="javascript:;">注册</a>
<a href="javascript:;">忘记密码</a>
<a href="javascript:;">关于xzd</a>
</div>
</div>
</div>
</div>
</body>
</html>
