<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简书登录页面</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f9f9f9;
}
.container {
display: flex;
width: 80%;
max-width: 1200px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.left-panel {
flex: 1;
background-color: #f5f5f5;
padding: 20px;
text-align: center;
}
.left-panel img {
width: 100%;
height: auto;
border-radius: 10px;
}
.right-panel {
flex: 1;
padding: 40px;
}
.right-panel h2 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
.form-group {
margin-bottom: 20px;
}
.form-group input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #666;
}
.login-button {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #007bff, #0056b3);
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
transition: background-color 0.3s;
}
.login-button:hover {
background: linear-gradient(135deg, #0056b3, #00338a);
}
.social-login {
margin-top: 20px;
text-align: center;
}
.social-login span {
display: block;
margin-bottom: 10px;
}
.social-login img {
width: 30px;
height: 30px;
margin: 0 10px;
cursor: pointer;
}
.app-download {
display: flex;
align-items: center;
/* 垂直居中对齐 */
gap: 50px;
/* 按钮和二维码之间的间距 */
margin: auto;
}
.download-button {
display: inline-block;
padding: 10px 20px;
/* 按钮的内边距 */
background-color: #ff5722;
/* 按钮背景颜色 */
color: white;
/* 按钮文字颜色 */
text-decoration: none;
/* 去掉下划线 */
border-radius: 5px;
/* 按钮圆角 */
line-height: 1;
/* 确保按钮高度与内容一致 */
text-align: center;
}
.qr-code {
width: 40px;
/* 二维码宽度 */
height: 40px;
/* 二维码高度 */
/* 确保二维码图片填充 */
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="left-panel">
<img src="images/sign_in_bg-bbc515a9c2e7734807ea281b9b2ab380.png" alt="简书APP">
<div class="app-download">
<a href="#" class="download-button">下载简书app</a>
<img src="images/login_page_download-791aa73fa61f50db586c09156c6242cf.png" alt="二维码" class="qr-code"
style="width: 45px;">
</div>
</div>
<div class="right-panel">
<h2>登录 · 注册</h2>
<div class="form-group">
<label for="phone-email">手机号或邮箱</label>
<input type="text" id="phone-email" placeholder="请输入手机号或邮箱">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" placeholder="请输入密码">
</div>
<div class="remember-me">
<input type="checkbox" id="remember-me">
<label for="remember-me">记住我</label>
<a href="#">登录遇到问题？</a>
</div>
<button class="login-button">登录</button>
<div class="social-login">
<span>社交账号登录</span>
<img src="images/微信.png" alt="微信">
<img src="images/qq.png" alt="QQ">
<img src="images/微博.png" alt="微博">
</div>
</div>
</div>
</body>
</html>
