<区块 类名="内容板块" 行内样式="上边距: 25px">
	<区块 类名="lay-容器">
		<区块 类名="lay-栅格行 lay-栅格间隔20">
			<区块 类名="lay-栅格小屏3">
				<!--垂直导航-->
				<无序列表 类名="lay-导航 lay-导航-垂直 个人中心侧边导航">
					<列表项 类名="lay-导航-项目 lay-导航-选中项目">
						<超链接 链接地址="javascript:;"><斜体文本 类名="lay-图标 lay-图标设置"></斜体文本> 账户设置</超链接>
					</列表项>
					<列表项 类名="lay-导航-项目">
						<超链接 链接地址="javascript:;"><斜体文本 类名="lay-图标 lay-图标高级"></斜体文本> 博客设置</超链接>
					</列表项>
					<列表项 类名="lay-导航-项目">
						<超链接 链接地址="javascript:;"><斜体文本 类名="lay-图标 lay-图标退出"></斜体文本> 退出登录</超链接>
					</列表项>
				</无序列表>
			</区块>
			<区块 类名="lay-栅格小屏9">
				<!--个人中心表单-->
				<表单 类名="lay-表单 lay-卡片面板 账户设置表单" lay-过滤器="账户设置表单">
					<区块 类名="lay-表单-项目">
						<数据框标注 类名="lay-表单-标签">头像:</数据框标注>
						<区块 类名="lay-输入框-区块">
							<超链接 链接地址="javascript:;" id="头像上传">
								<图片框 id="头像" 图像地址="" 错替文本="头像" />
								<换行 />
								<行内元素 类名="lay-按钮 lay-按钮-百搭 lay-按钮-迷你" 行内样式="上边距: 5px">更改头像</行内元素>
								<数据框 id="头像数据" 属性名称="头像base64" 数据类型="隐藏数据框" 数据值="" />
							</超链接>
							<数据框 类名="lay-上传文件" 数据类型="文件类型" 文件类型="" 属性名称="file" />
						</区块>
					</区块>
					<区块 类名="lay-表单-项目">
						<数据框标注 类名="lay-表单-标签">昵称:</数据框标注>
						<区块 类名="lay-输入框-区块">
							<数据框 数据类型="文本输入" 属性名称="昵称" 自动填充="不记住" 默认提示="请输入" 类名="lay-输入框" />
						</区块>
					</区块>
					<区块 类名="lay-表单-项目">
						<数据框标注 类名="lay-表单-标签">账号:</数据框标注>
						<区块 类名="lay-输入框-区块">
							<数据框 数据类型="文本输入" 属性名称="账号" 自动填充="不记住" 默认提示="请输入账号" 类名="lay-输入框" 禁用数据框="" />
						</区块>
					</区块>
					<区块 类名="lay-表单-项目">
						<数据框标注 类名="lay-表单-标签">旧密码:</数据框标注>
						<区块 类名="lay-输入框-内联块">
							<数据框 数据类型="密码输入" 属性名称="密码" 默认提示="" 自动填充="不记住" 类名="lay-输入框" />
						</区块>
						<区块 类名="lay-表单-对齐 lay-标注">不改则不填写</区块>
					</区块>
					<区块 类名="lay-表单-项目">
						<数据框标注 类名="lay-表单-标签">新密码:</数据框标注>
						<区块 类名="lay-输入框-内联块">
							<数据框 数据类型="密码输入" 属性名称="新密码" 默认提示="" 自动填充="不记住" 类名="lay-输入框" />
						</区块>
					</区块>
					<区块 类名="lay-表单-项目">
						<数据框标注 类名="lay-表单-标签">重复密码:</数据框标注>
						<区块 类名="lay-输入框-内联块">
							<数据框 数据类型="密码输入" 属性名称="重复密码" 默认提示="" 自动填充="不记住" 类名="lay-输入框" />
						</区块>
					</区块>
					<区块 类名="lay-表单-项目">
						<数据框标注 类名="lay-表单-标签">个性签名：</数据框标注>
						<区块 类名="lay-输入框-区块">
							<多行文本框 属性名称="个性签名" 默认提示="" 类名="lay-多行文本"></多行文本框>
						</区块>
					</区块>
					<区块 类名="lay-表单-项目">
						<区块 类名="lay-输入框-区块">
							<按钮 类名="lay-按钮 lay-按钮-百搭" lay-提交="">提交修改</按钮>
						</区块>
					</区块>
				</表单>
			</区块>
		</区块>
	</区块>
</区块>

.个人中心侧边导航 {
	宽度: 100%;
	背景: #1e9fff;
}
.个人中心侧边导航 列表项 {
	边框-底部: 颜色通道(255, 255, 255, 0.8) 1px 实线;
}

.个人中心侧边导航 .lay-导航-选中项目,
.个人中心侧边导航 .lay-选中 {
	背景: 颜色通道(0, 0, 0, 0.3) !important;
}
.个人中心侧边导航 列表项 斜体文本 {
	字体-大小: 18px;
	右边距: 5px;
}
.账户设置表单 {
	内边距: 20px;
}
.账户设置表单 .lay-表单-标签 {
	文本-对齐: 左侧;
}
#头像上传 图片框 {
	宽度: 50px;
	高度: 50px;
	边框: 颜色通道(0, 0, 0, 0.15) 1px 实线;
	边框-圆角: 100px;
}
.lay-导航-垂直 .lay-选中 超链接 {
	背景: 无效 !important;
}

$(".退出登录").绑定事件("@事件_点击", 定义函数 () {
	浏览器持久储存.删除数据("token");
	// 返回首页
	lay_弹出层.消息框("已退出登录!", {
		[lay_弹出层.配置.时间]: 1500,
		[lay_弹出层.配置.销毁]: 定义函数 () {
			浏览器窗口.浏览器URl操作.href = "./index.lhtml";
		},
	});
});

局部变量 头像上传 = 新建对象 lay_上传({
	[lay_上传.配置.绑定元素]: "#头像上传",
	[lay_上传.配置.自动]: 假,
	[lay_上传.配置.选择]: 定义函数 (上传选择对象) {
		//预读本地文件示例,不支持ie8
		上传选择对象.预读(定义函数 (序号, 文件, base64编码) {
			$("#头像").属性值("src", base64编码);
		});
	},
});

变量 裁剪头像;
局部变量 头像上传 = 新建对象 lay_上传({
	[lay_上传.配置.绑定元素]: "#头像上传",
	[lay_上传.配置.自动]: 假,
	[lay_上传.配置.选择]: 定义函数 (上传选择对象) {
		//预读本地文件示例,不支持ie8
		上传选择对象.预读(定义函数 (序号, 文件, base64编码) {
			lay_弹出层.创建({
				[lay_弹出层.配置.皮肤]: "裁剪弹窗",
				[lay_弹出层.配置.标题]: "裁剪头像",
				[lay_弹出层.配置.宽高]: ["500px", "500px"],
				[lay_弹出层.配置.内容]: `<图片框 id="裁剪" 图像地址="${base64编码}" />`,
				[lay_弹出层.配置.成功]: 定义函数 () {
					裁剪头像 = 新建对象 裁剪("#裁剪");
				},
				[lay_弹出层.配置.确认]: 定义函数 (序号) {
					局部变量 头像base64 = 画板操作类.获取画板数据(裁剪头像.获取裁剪画布());
					$("#头像上传 + 数据框").设置或获取值("");
					$("#头像").属性值("src", 头像base64);
					$("#头像数据").设置或获取值(头像base64);
					lay_弹出层.关闭(序号);
				},
			});
		});
	},
});

#裁剪 {
	display: block;
	max-width: 100%;
}
.裁剪弹窗 {
	max-width: 95%;
}
.裁剪弹窗 .layui-layer-content {
	padding: 0;
}