编程版本
开发语言:html
提交：ajax
完整源码
<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", sans-serif;
}
body {
min-height: 100vh;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #050b20 0%, #102048 50%, #0a1435 100%);
overflow: hidden;
text-align: center;
}
/* 背景动态光效 */
.bg-light-1, .bg-light-2 {
position: fixed;
border-radius: 50%;
filter: blur(120px);
opacity: 0.35;
z-index: 0;
}
.bg-light-1 {
width: 500px;
height: 500px;
background: #2563eb;
top: -150px;
left: -100px;
}
.bg-light-2 {
width: 600px;
height: 600px;
background: #7c3aed;
bottom: -200px;
right: -150px;
}
/* 登录容器 */
.login-wrap {
position: relative;
z-index: 1;
width: 100%;
max-width: 820px;
padding: 0 20px;
margin: 140px auto;
display: inline-block;
width: 820px;
}
.login-card {
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 20px;
padding: 48px 36px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
/* 头部logo标题 */
.login-header {
text-align: center;
margin-bottom: 40px;
}
.login-header h1 {
font-size: 26px;
color: #ffffff;
font-weight: 600;
letter-spacing: 1px;
}
.login-header p {
color: rgba(255,255,255,0.6);
margin-top: 8px;
font-size: 14px;
}
/* 输入框组 */
.input-group {
margin-bottom: 24px;
}
.input-group label {
display: block;
color: rgba(255,255,255,0.8);
font-size: 14px;
margin-bottom: 10px;
display: inline-block;
}
.input-box {
position: relative;
display: inline-block;
}
.input-box input {
width: 100%;
height: 52px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 12px;
padding: 0 18px;
color: #fff;
font-size: 15px;
outline: none;
transition: all 0.3s ease;
}
.input-box input:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
background: rgba(255,255,255,0.1);
}
.input-box input::placeholder {
color: rgba(255,255,255,0.35);
}
/* 登录按钮 */
.login-btn {
width: 100%;
height: 54px;
border-radius: 12px;
border: none;
background: linear-gradient(135deg, #2563eb, #7c3aed);
color: #fff;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
letter-spacing: 1px;
}
.login-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(37, 99, 235, 0.35);
}
.login-btn:active {
transform: translateY(0);
}
</style>
</head>
<body>
<!-- 背景光影 -->
<div class="bg-light-1"></div>
<div class="bg-light-2"></div>
<div class="login-wrap">
<div class="login-card">
<div class="login-header">
<h1>
曲靖市健康证管理系统</h1>
<p>Qujing Health Certificate Management System</p>
</div>
<div class="input-group">
<label>账号</label>
<div class="input-box">
<input type="text" placeholder="请输入管理员账号" id="username" style="width:180px;">
</div>
<label>密码</label>
<div class="input-box">
<input type="password" placeholder="请输入登录密码" id="password" style="width:180px;">
</div>
<button class="login-btn" id="submitBtn" style="display: inline-block;
width: 90px;">登录</button>
</div>
</div>
</div>
</div>
<script>
// 简单登录点击交互
const submitBtn = document.getElementById('submitBtn');
submitBtn.addEventListener('click', function() {
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value.trim();
if (!username) {
alert('请输入账号');
return;
}
if (!password) {
alert('请输入密码');
return;
}
alert('登录校验通过，跳转后台首页');
// window.location.href = "/admin/index.html";
})
</script>
</body>
</html>
这是一套曲靖市健康证管理系统的登录页单页 HTML 源码，纯原生 HTML+CSS+JS 实现，无外部框架，核心作用如下：
1. 页面结构
- 页面标题：企业管理系统 - 登录，页面主体展示系统名称「曲靖市健康证管理系统」中英文标题；
- 两层圆形模糊渐变光影作为固定背景装饰，深蓝色暗调渐变底色；
- 磨砂玻璃毛玻璃风格登录卡片，承载账号输入框、密码输入框、登录按钮；
- 内置原生 JS 登录校验逻辑。
2. CSS 样式功能
- 全局重置内外边距、统一微软雅黑字体；
- 深色渐变背景 + 两处大尺寸高斯模糊彩色光晕，营造高端政务系统视觉；
- 登录卡片使用毛玻璃（backdrop-filter） 半透明效果，细白边框、柔和阴影；
- 输入框半透明白底，聚焦时高亮蓝色边框 + 发光阴影；
- 登录按钮蓝紫渐变，hover 上浮、按压回弹动效；
- 适配基础移动端视口，限定卡片最大宽度居中展示。
3. JS 交互逻辑
绑定登录按钮点击事件，做前端简单非空校验：
- 账号为空：弹窗提示输入账号
- 密码为空：弹窗提示输入密码
- 账号密码均填写：弹出校验通过提示，预留跳转后台首页的页面跳转代码
整体用途
本地直接打开即可运行的静态登录界面，用于曲靖健康证管理系统管理员登录入口，视觉风格偏向政务、医疗后台管理系统，仅实现前端展示与基础表单校验，无后端真实登录接口交互
人人皆为创造者，共创方能共成长
每个人都是使用者，也是创造者；是数字世界的消费者，更是价值的生产者与分享者。在智能时代的浪潮里，单打独斗的发展模式早已落幕，唯有开放连接、创意共创、利益共享，才能让个体价值汇聚成生态合力，让技术与创意双向奔赴，实现平台与伙伴的快速成长、共赢致远。
原创永久分成，共赴星辰大海
原创创意共创、永久收益分成，是东方仙盟始终坚守的核心理念。我们坚信，每一份原创智慧都值得被尊重与回馈，以永久分成锚定共创初心，让创意者长期享有价值红利，携手万千伙伴向着科技星辰大海笃定前行，拥抱硅基 生命与数字智能交融的未来，共筑跨越时代的数字文明共同体。
东方仙盟：拥抱知识开源，共筑数字新生态
在全球化与数字化浪潮中，东方仙盟始终秉持开放协作、知识共享的理念，积极拥抱开源技术与开放标准。我们相信，唯有打破技术壁垒、汇聚全球智慧，才能真正推动行业的可持续发展。
开源赋能中小商户：通过将前端异常检测、跨系统数据互联等核心能力开源化，东方仙盟为全球中小商户提供了低成本、高可靠的技术解决方案，让更多商家能够平等享受数字转型的红利。
共建行业标准：我们积极参与国际技术社区，与全球开发者、合作伙伴共同制定开放协议 与技术规范，推动跨境零售、文旅、餐饮等多业态的系统互联互通，构建更加公平、高效的数字生态。
知识普惠，共促发展：通过开源社区 、技术文档与培训体系，东方仙盟致力于将前沿技术转化为可落地的行业实践，赋能全球合作伙伴，共同培育创新人才，推动数字经济 的普惠式增长
阿雪技术观
在科技发展浪潮中，我们不妨积极投身技术共享。不满足于做受益者，更要主动担当贡献者 。无论是分享代码、撰写技术博客，还是参与开源项目 维护改进，每一个微小举动都可能蕴含推动技术进步的巨大能量。东方仙盟是汇聚力量的天地，我们携手在此探索硅基 生命，为科技进步添砖加瓦。
Hey folks, in this wild tech - driven world, why not dive headfirst into the whole tech - sharing scene? Don't just be the one reaping all the benefits; step up and be a contributor too. Whether you're tossing out your code snippets , hammering out some tech blogs, or getting your hands dirty with maintaining and sprucing up open - source projects, every little thing you do might just end up being a massive force that pushes tech forward. And guess what? The Eastern FairyAlliance is this awesome place where we all come together. We're gonna team up and explore the whole silicon - based life thing, and in the process, we'll be fueling the growth of technology
扫一扫
994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
