@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device
-width" />
<title>资料修改</title>
<link href="~/Scripts/
layui/css/
layui.css" rel="stylesheet" />
<script src="~/Scripts/
layui/
layui.js"></script>
<script src="~/Scripts/jquery
-3.4.1.js"></script>
<style>
body {
display: flex;
justify
-content: center;
align
-items: center;
min
-height: 100vh;
background
-color: #f8f8f8;
}
.form
-container {
width: 100%;
max
-width: 768px;
padding: 24px;
background: #fff;
box
-shadow: 0 2px 8px rgba(0,0,0,0.1);
border
-radius: 8px;
}
.
layui-form
-item .
layui-form
-label {
width: 120px;
}
.
layui-form
-item .
layui-input
-block {
margin
-left: 120px;
}
@*@media (max
-width: 768px) {
.
layui-form
-item .
layui-form
-label {
width: 90px;
}*@
.
layui-form
-item .
layui-input
-block {
margin
-left: 90px;
}
</style>
</head>
<body>
<div class="form
-container">
<form class="
layui-form">
<!
-- 基础信息
-->
<fieldset class="
layui-elem
-field
layui-field
-title">
<legend>基础信息</legend>
</fieldset>
<div class="
layui-form
-item">
<label class="
layui-form
-label">用户账号</label>
<div class="
layui-input
-block">
<input type="text" name="UserCode" lay
-verify="required|username" placeholder="请输入用户账号" autocomplete="off" class="
layui-input" disabled>
</div>
</div>
<div class="
layui-form
-item">
<label class="
layui-form
-label">用户名</label>
<div class="
layui-input
-block">
<input type="text" name="UserName" lay
-verify="required|nickname" placeholder="请输入用户名" autocomplete="off" class="
layui-input">
</div>
</div>
<div class="
layui-form
-item">
<label class="
layui-form
-label">性别</label>
<div class="
layui-input
-block">
<input type="radio" name="Sex" value="true" title="男" checked>
<input type="radio" name="Sex" value="false" title="女">
</div>
</div>
<!
-- 联系信息
-->
<fieldset class="
layui-elem
-field
layui-field
-title">
<legend>联系信息</legend>
</fieldset>
<div class="
layui-form
-item">
<label class="
layui-form
-label">电话</label>
<div class="
layui-input
-block">
<input type="tel" name="Tel" lay
-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="
layui-input">
</div>
</div>
<div class="
layui-form
-item">
<label class="
layui-form
-label">邮箱</label>
<div class="
layui-input
-block">
<input type="text" name="Email" lay
-verify="email" placeholder="请输入邮箱" autocomplete="off" class="
layui-input">
</div>
</div>
<!
-- 安全设置
-->
<fieldset class="
layui-elem
-field
layui-field
-title">
<legend>安全设置</legend>
</fieldset>
<div class="
layui-form
-item">
<label class="
layui-form
-label">原密码</label>
<div class="
layui-input
-inline
layui-input
-wrap">
<input type="password" name="OldPassword" lay
-verify="pass" placeholder="请输入原密码" autocomplete="off" lay
-affix="eye" class="
layui-input">
</div>
<div class="
layui-form
-mid
layui-text
-em">6
-12位字符</div>
</div>
<div class="
layui-form
-item">
<label class="
layui-form
-label">新密码</label>
<div class="
layui-input
-inline
layui-input
-wrap">
<input type="password" name="NewPassword" lay
-verify="pass" placeholder="请输入新密码" autocomplete="off" lay
-affix="eye" class="
layui-input">
</div>
<div class="
layui-form
-mid
layui-text
-em">6
-12位字符</div>
</div>
<!
-- 其他信息
-->
<fieldset class="
layui-elem
-field
layui-field
-title">
<legend>其他信息</legend>
</fieldset>
<div class="
layui-form
-item">
<label class="
layui-form
-label">出生日期</label>
<div class="
layui-input
-inline
layui-input
-wrap">
<div class="
layui-input
-prefix">
<i class="
layui-icon
layui-icon
-date"></i>
</div>
<input type="text" name="BirthDay" id="birthDate" lay
-verify="date" placeholder="yyyy
-MM
-dd" autocomplete="off" class="
layui-input">
</div>
</div>
<div class="
layui-form
-item">
<label class="
layui-form
-label">籍贯</label>
<div class="
layui-input
-block">
<input type="text" name="NativePlace" placeholder="请输入籍贯" autocomplete="off" class="
layui-input">
</div>
</div>
<div class="
layui-form
-item">
<label class="
layui-form
-label">地址</label>
<div class="
layui-input
-block">
<input type="text" name="Address" placeholder="请输入详细地址" autocomplete="off" class="
layui-input">
</div>
</div>
<!
-- 权限信息
-->
<fieldset class="
layui-elem
-field
layui-field
-title">
<legend>权限信息</legend>
</fieldset>
<div class="
layui-form
-item">
<label class="
layui-form
-label">职位</label>
<div class="
layui-input
-block">
<select name="PositionID" lay
-verify="required" lay
-search>
<option value="">请选择职位</option>
<option value="1">管理员</option>
<option value="2">普通员工</option>
<option value="3">超级管理员</option>
</select>
</div>
</div>
<div class="
layui-form
-item">
<label class="
layui-form
-label">组织机构</label>
<div class="
layui-input
-block">
<select name="OrganizationID" lay
-verify="required" lay
-search>
<option value="">请选择组织机构</option>
<option value="1">总部</option>
<option value="2">技术部</option>
<option value="3">市场部</option>
</select>
</div>
</div>
<!
-- 操作按钮
-->
<div class="
layui-form
-item">
<div class="
layui-input
-block">
<button type="submit" class="
layui-btn" lay
-submit lay
-filter="formSubmit">立即提交</button>
<button type="button" class="
layui-btn
layui-btn
-primary" onclick="window.history.back()">返回登录</button>
<button type="reset" class="
layui-btn
layui-btn
-primary">重置</button>
</div>
</div>
</form>
</div>
<script>
// 初始化日期选择器
layui.use('laydate', function () {
var laydate =
layui.laydate;
laydate.render({
elem: '#birthDate'
});
});
// 表单验证规则扩展
layui.use('form', function () {
var form =
layui.form;
form.verify({
username: function (value) {
if (!/^[a
-zA
-Z0
-9_]{4,16}$/.test(value)) {
return '用户名为4
-16位字母、数字或下划线';
}
},
nickname: function (value) {
if (value.length < 2 || value.length > 20) {
return '昵称长度应在2
-20个字符之间';
}
}
});
});
</script>
</body>
</html>
使修改密码放在和个人资料同一列表下并从中移出来
本文记录了作者在自学layUI过程中遇到的列间距显示问题及解决方案。通过调整div结构，成功实现不同尺寸的列间距效果，适用于网页布局优化。
查阅资料后，在layui-col-md4下又加了一层div就出来效果了
扫一扫
580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
