利用路由的知识编写一个登录页面使用tab栏实现账号登录和二维码登录的两种方式的切换参考登录注册页面的样式,使用mui.css
时间: 2024-02-27 18:58:21 浏览: 118
好的,我可以帮你编写一个登录页面,使用Tab栏实现账号登录和二维码登录的切换。下面是示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<link href="https://cdn.bootcdn.net/ajax/libs/mui/3.7.1/css/mui.min.css" rel="stylesheet">
<style>
.mui-content {
background-color: #f5f5f5;
}
.mui-bar.mui-bar-nav {
background-color: #fff;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}
.mui-content .mui-input-group {
margin-top: 20px;
}
.mui-content .mui-input-group input {
border-radius: 20px;
}
.mui-content .mui-btn-primary {
margin-top: 20px;
background-color: #2196f3;
border-radius: 20px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
<h1 class="mui-title">登录页面</h1>
</header>
<div class="mui-content">
<div class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#account">账号登录</a>
<a class="mui-control-item" href="#qr">二维码登录</a>
</div>
<div id="account" class="mui-control-content mui-active">
<form class="mui-input-group">
<div class="mui-input-row">
<label>账号</label>
<input type="text" placeholder="请输入账号">
</div>
<div class="mui-input-row">
<label>密码</label>
<input type="password" placeholder="请输入密码">
</div>
<button type="submit" class="mui-btn mui-btn-primary mui-btn-block">登录</button>
</form>
</div>
<div id="qr" class="mui-control-content">
<div class="mui-input-row">
<img src="https://via.placeholder.com/150x150" style="width: 150px; height: 150px; display: block; margin: 0 auto;">
</div>
<button class="mui-btn mui-btn-primary mui-btn-block">扫描二维码登录</button>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/mui/3.7.1/js/mui.min.js"></script>
<script>
mui.init({
swipeBack: false
});
</script>
</body>
</html>
```
这段代码使用了 MUI 框架来实现界面的样式和交互效果,其中主要使用了 MUI 的 Tab 栏和表单组件。
在页面头部先定义了一个 Tab 栏,通过设置 `href` 属性来实现对应内容的切换。其中,第一个 Tab 栏项使用了 `mui-active` 类来表示默认选中。
接下来在 Tab 栏下面分别定义了两个内容区域,并分别设置了 `id` 属性来与 Tab 栏对应。第一个内容区域使用了表单组件来实现账号登录界面,第二个内容区域则使用了一个二维码图片和按钮来实现二维码登录。
最后,通过引入 MUI 的 JavaScript 文件,初始化页面,开启 MUI 的滑动返回功能。
阅读全文