html 模版文件,构建一个登陆过渡页面,页面有根据服务器推送的6个参数,决定不同的出现的角色链接是否不显示,带css
时间: 2024-09-17 08:03:25 浏览: 20
为了创建一个登录过渡页面,并根据服务器推送的六个参数动态决定角色链接的显示,你可以创建一个基础的HTML模板,结合一些JavaScript来处理参数和条件渲染。这里是一个简单的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>登录过渡</title>
<style>
/* 基础样式 */
.login-page {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f2f2f2;
transition: all 0.5s ease-in-out;
}
.hidden-role {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.role-links {
display: flex;
flex-wrap: wrap;
}
.role-link {
width: 30%;
margin: 1rem;
cursor: pointer;
}
</style>
</head>
<body>
<div id="login-transition" class="login-page">
<div id="role-links-container">
<ul class="role-links">
<li *ngFor="let role of roles; let i = index"
[class.hidden]="shouldHideRole(i)"
[routerLink]="[role.route]"
routerLinkActive="active">
{{ role.name }}
</li>
</ul>
</div>
</div>
<script>
// 假设从服务器获取的六个参数存储在一个叫roles的数组里
const roles = [
{ name: '管理员', route: '/admin', hide: true || false },
... // 其他五个角色同理
];
window.onload = function() {
updateRolesDisplay();
}
function shouldHideRole(index) {
return roles[index].hide;
}
function updateRolesDisplay() {
const roleLinks = document.querySelectorAll('.role-links li');
roleLinks.forEach((link, i) => {
link.classList.toggle('hidden-role', shouldHideRole(i));
});
}
</script>
</body>
</html>
```
在这个例子中:
- 使用了Angular的指令 `[class.hidden]="shouldHideRole(i)"` 来根据服务器推送的`hide`参数隐藏角色链接。
- JavaScript负责初始化时根据`roles`数组调整每个链接的隐藏状态,当`window.onload`触发时会自动调用`updateRolesDisplay()`函数。
- CSS定义了登录过渡页面的基本样式及角色链接的隐藏效果。