SDMS/web/css/login-style.css

@charset "utf-8"; /* 指定字符编码为 UTF-8 */

/* 通用样式 */
* {
  font-size: 9pt; /* 设置所有元素的字体大小为9pt */
  border: 0; /* 去掉所有元素的边框 */
  margin: 0; /* 去掉所有元素的外边距 */
  padding: 0; /* 去掉所有元素的内边距 */
}

body {
  font-family: '微软雅黑'; /* 设置body的字体为微软雅黑 */
  margin: 0 auto; /* 将body的外边距设置为自动，从而实现水平居中 */
  min-width: 980px; /* 设置body的最小宽度为980px */
}

ul {
  display: block; /* 将ul设置为块级元素 */
  margin: 0; /* 去掉ul的外边距 */
  padding: 0; /* 去掉ul的内边距 */
  list-style: none; /* 去掉ul的默认列表样式（无点的列表） */
}

li {
  display: block; /* 将li设置为块级元素 */
  margin: 0; /* 去掉li的外边距 */
  padding: 0; /* 去掉li的内边距 */
  list-style: none; /* 去掉li的默认列表样式 */
}

img {
  border: 0; /* 去掉图片的边框 */
}

dl, dt, dd, span {
  margin: 0; /* 去掉dl, dt, dd, span的外边距 */
  padding: 0; /* 去掉dl, dt, dd, span的内边距 */
  display: block; /* 将这些元素设置为块级元素 */
}

a, a:focus {
  text-decoration: none; /* 去掉链接的下划线 */
  color: #000; /* 设置链接的文字颜色为黑色 */
  outline: none; /* 去掉链接的聚焦时轮廓 */
  blr: expression(this.onFocus=this.blur()); /* 兼容IE去掉聚焦时的蓝色框（已废弃，建议不再使用） */
}

a:hover {
  color: #00a4ac; /* 设置鼠标悬停时，链接的文字颜色为 #00a4ac（浅蓝色） */
  text-decoration: none; /* 鼠标悬停时去掉链接的下划线 */
}

table {
  border-collapse: collapse; /* 设置表格的边框合并为一个单一的边框 */
  border-spacing: 0; /* 去掉表格单元格之间的间距 */
}

cite {
  font-style: normal; /* 取消cite标签的斜体样式 */
}

h2 {
  font-weight: normal; /* 设置h2标题的字体粗细为正常 */
}

/* 背景云朵部分样式 */
#mainBody {
  width: 100%; /* 设置#mainBody的宽度为100% */
  height: 100%; /* 设置#mainBody的高度为100% */
  position: absolute; /* 设置#mainBody为绝对定位 */
  z-index: -1; /* 设置#mainBody的z-index为-1，确保它在页面其他内容的下面 */
}

.cloud {
  position: absolute; /* 设置.cloud为绝对定位 */
  top: 0px; /* 设置.cloud的顶部距离为0 */
  left: 0px; /* 设置.cloud的左侧距离为0 */
  width: 100%; /* 设置.cloud的宽度为100% */
  height: 100%; /* 设置.cloud的高度为100% */
  background: url(../images/cloud.png) no-repeat; /* 设置背景图为云朵图片，不重复显示 */
  z-index: 1; /* 设置.cloud的z-index为1，确保它在#mainBody之上 */
  opacity: 0.5; /* 设置.cloud的透明度为0.5 */
}

#cloud2 {
  z-index: 2; /* 设置#cloud2的z-index为2，确保它在.cloud元素之上 */
}


/* 顶部登录栏 */
.logintop {
    height: 47px; /* 设置顶部条的高度为47px */
    position: absolute; /* 使用绝对定位 */
    top: 0; /* 距离顶部为0，固定在页面顶端 */
    background: url(../images/loginbg1.png) repeat-x; /* 背景图片，横向平铺 */
    z-index: 100; /* 层级较高，确保其位于其他内容上面 */
    width: 100%; /* 宽度为100%，覆盖整个页面宽度 */
}

/* 登录栏中的文字样式 */
.logintop span {
    color: #fff; /* 文字颜色为白色 */
    line-height: 47px; /* 行高为47px，使文字垂直居中 */
    background: url(../images/loginsj.png) no-repeat 21px 18px; /* 设置背景图片，调整位置 */
    text-indent: 44px; /* 文字缩进，避免文字与图片重叠 */
    color: #afc5d2; /* 文字颜色 */
    float: left; /* 向左浮动 */
}

/* 登录栏右侧的导航链接样式 */
.logintop ul {
    float: right; /* 向右浮动 */
    padding-right: 30px; /* 右侧内边距 */
}

/* 导航链接列表项的样式 */
.logintop ul li {
    float: left; /* 向左浮动 */
    margin-left: 20px; /* 左侧间距 */
    line-height: 47px; /* 行高为47px，确保与顶部对齐 */
}

/* 导航链接的样式 */
.logintop ul li a {
    color: #afc5d2; /* 设置链接文字颜色 */
}

/* 导航链接鼠标悬停时的样式 */
.logintop ul li a:hover {
    color: #fff; /* 悬停时文字颜色变为白色 */
}

/* 登录页面主体样式 */
.loginbody {
    background: url(../images/loginbg3.png) no-repeat center center; /* 设置背景图片，并且居中显示 */
    width: 100%; /* 宽度为100% */
    height: 585px; /* 高度为585px */
    overflow: hidden; /* 隐藏超出的内容 */
    position: absolute; /* 使用绝对定位 */
    top: 47px; /* 距离顶部47px，避免与顶部导航栏重叠 */
}

/* 系统logo的样式 */
.systemlogo {
    background: url(../images/loginlogo.png) no-repeat center; /* 设置logo背景，居中显示 */
    width: 100%; /* 宽度为100% */
    height: 71px; /* 高度为71px */
    margin-top: 75px; /* 上边距为75px，调整位置 */
}

/* 登录框的基本样式 */
.loginbox {
    width: 692px; /* 宽度为692px */
    height: 336px; /* 高度为336px */
    background: url(../images/logininfo.png) no-repeat; /* 设置背景图片 */
    margin-top: 30px; /* 上边距为30px */
}

/* 登录框内表单内容的样式 */
.loginbox ul {
    margin-top: 88px; /* 上边距为88px */
    margin-left: 285px; /* 左边距为285px */
}

/* 表单项的样式 */
.loginbox ul li {
    margin-bottom: 25px; /* 每个表单项之间的底部间距 */
}

/* 表单项标签的样式 */
.loginbox ul li label {
    color: #687f92; /* 标签文字颜色 */
    padding-left: 25px; /* 左内边距25px */
}

/* 标签链接的样式 */
.loginbox ul li label a {
    color: #687f92; /* 设置链接文字颜色 */
}

/* 标签链接的悬停样式 */
.loginbox ul li label a:hover {
    color: #3d96c9; /* 悬停时文字颜色变为蓝色 */
}

/* 输入框的样式 */
.loginbox ul li label input {
    margin-right: 5px; /* 输入框右侧的间距 */
}

/* 其他登录框的样式（不同背景图片） */
.loginbox,.loginbox1,.loginbox2,.loginbox3,.loginbox4 {
    width: 692px; /* 宽度为692px */
    height: 373px; /* 高度为373px */
    margin-top: 30px; /* 上边距为30px */
}

/* 用户名输入框的样式 */
.loginuser {
    width: 299px; /* 宽度为299px */
    height: 48px; /* 高度为48px */
    background: url(../images/loginuser.png) no-repeat; /* 背景图 */
    border: none; /* 无边框 */
    line-height: 48px; /* 行高与高度相同，保证文字垂直居中 */
    padding-left: 44px; /* 左内边距44px */
    font-size: 14px; /* 字体大小为14px */
    font-weight: bold; /* 字体加粗 */
}

/* 密码输入框的样式 */
.loginpwd {
    width: 299px; /* 宽度为299px */
    height: 48px; /* 高度为48px */
    background: url(../images/loginpassword.png) no-repeat; /* 背景图 */
    border: none; /* 无边框 */
    line-height: 48px; /* 行高与高度相同，保证文字垂直居中 */
    padding-left: 44px; /* 左内边距44px */
    font-size: 14px; /* 字体大小为14px */
    color: #90a2bc; /* 字体颜色 */
}

/* 登录按钮的样式 */
.loginbtn {
    width: 111px; /* 宽度为111px */
    height: 35px; /* 高度为35px */
    background: url(../images/buttonbg.png) repeat-x; /* 按钮背景图横向平铺 */
    font-size: 14px; /* 字体大小为14px */
    font-weight: bold; /* 字体加粗 */
    color: #fff; /* 字体颜色为白色 */
    cursor: pointer; /* 鼠标指针变为点击状态 */
    line-height: 35px; /* 行高与高度相同，确保文字垂直居中 */
}

/* 底部版权栏的样式 */
.loginbm {
    height: 50px; /* 高度为50px */
    line-height: 50px; /* 行高为50px，确保文字垂直居中 */
    text-align: center; /* 文本居中对齐 */
    background: url(../images/loginbg2.png) repeat-x; /* 底部背景图横向平铺 */
    position: absolute; /* 使用绝对定位 */
    bottom: 0; /* 固定在底部 */
    width: 100%; /* 宽度为100% */
    color: #0b3a58; /* 文字颜色 */
}

/* 底部链接的样式 */
.loginbm a {
    font-weight: bold; /* 字体加粗 */
    color: #0b3a58; /* 链接颜色 */
}

/* 底部链接的悬停样式 */
.loginbm a:hover {
    color: #fff; /* 悬停时链接颜色变为白色 */
}

/* 其他登录框（不同背景） */
.loginbox1 {
    background: url(../images/logininfo1.png) no-repeat; /* 背景图 */
}

.loginbox1 ul li {
    margin-bottom: 16px; /* 每个表单项之间的底部间距 */
}

.loginbox2 {
    background: url(../images/logininfo2.png) no-repeat; /* 背景图 */
}

.loginbox2 ul li {
    margin-bottom: 16px; /* 每个表单项之间的底部间距 */
}

.loginbox3 {
    background: url(../images/logininfo3.png) no-repeat; /* 背景图 */
}

.loginbox3 ul li {
    margin-bottom: 16px; /* 每个表单项之间的底部间距 */
}

/* 验证码输入框的样式 */
.yzm {
    width: 341px; /* 宽度为341px */
    height: 46px; /* 高度为46px */
    background: url(../images/yzmbg.png) no-repeat; /* 背景图 */
    padding-bottom: 5px; /* 底部内边距5px */
}

/* 验证码输入框的文本框样式 */
.yzm span {
    display: block; /* 块级元素 */
    float: left; /* 向左浮动 */
    width: 227px; /* 宽度为227px */
    height: 46px; /* 高度为46px */
}

/* 验证码输入框的文本框输入样式 */
.yzm span input {
    background: none; /* 背景为透明 */
    border: none; /* 无边框 */
    width: 227px; /* 宽度为227px */
    height: 46px; /* 高度为46px */
    line-height: 46px; /* 行高与高度相同，确保文字垂直居中 */
    font-size: 16px; /* 字体大小为16px */
    color: #afc5d2; /* 文字颜色 */
    padding-left: 10px; /* 左内边距10px */
}

/* 验证码图像的样式 */
.yzm img {
    float: left; /* 图像向左浮动 */
    margin-left: 10px; /* 左侧间距10px */
    width: 85px; /* 图像宽度为85px */
    height: 46px; /* 图像高度为46px */
}

/* 验证码刷新按钮的样式 */
.yzm a {
    display: block; /* 设置为块级元素 */
    width: 85px; /* 宽度为85px */
    height: 46px; /* 高度为46px */
    background: url(../images/yzmrefresh.png) no-repeat center; /* 背景图居中 */
    cursor: pointer; /* 鼠标指针变为点击状态 */
}

/* 提交按钮的样式 */
.submitbtn {
    width: 300px; /* 宽度为300px */
    height: 40px; /* 高度为40px */
    background: #3d96c9; /* 背景色为蓝色 */
    color: #fff; /* 文字颜色为白色 */
    font-size: 16px; /* 字体大小为16px */
    font-weight: bold; /* 字体加粗 */
    text-align: center; /* 文字居中对齐 */
    line-height: 40px; /* 行高为40px，确保文字垂直居中 */
    border: none; /* 无边框 */
    cursor: pointer; /* 鼠标指针变为点击状态 */
}

/* 提交按钮的悬停效果 */
.submitbtn:hover {
    background: #2a7da6; /* 悬停时背景色变为更深的蓝色 */
}

/* 错误提示消息的样式 */
.error-msg {
    color: #e74c3c; /* 错误信息颜色为红色 */
    font-size: 14px; /* 字体大小为14px */
    margin-top: 10px; /* 上边距为10px */
    text-align: center; /* 文本居中对齐 */
}

/* 成功提示消息的样式 */
.success-msg {
    color: #2ecc71; /* 成功信息颜色为绿色 */
    font-size: 14px; /* 字体大小为14px */
    margin-top: 10px; /* 上边距为10px */
    text-align: center; /* 文本居中对齐 */
}

/* 错误信息框的样式 */
.error-box {
    background: url(../images/errorbox.png) no-repeat; /* 背景为错误框的图像 */
    width: 350px; /* 宽度为350px */
    height: 120px; /* 高度为120px */
    margin: 20px auto; /* 上下边距为20px，水平居中 */
    padding: 15px; /* 内边距为15px */
    color: #fff; /* 文字颜色为白色 */
    font-size: 14px; /* 字体大小为14px */
}

/* 错误框内的关闭按钮样式 */
.error-box .close-btn {
    float: right; /* 右浮动 */
    background: url(../images/close.png) no-repeat center; /* 关闭按钮的背景图 */
    width: 20px; /* 宽度为20px */
    height: 20px; /* 高度为20px */
    cursor: pointer; /* 鼠标指针变为点击状态 */
}

/* 错误框内的错误信息样式 */
.error-box .error-info {
    margin-top: 10px; /* 上边距为10px */
    font-size: 16px; /* 字体大小为16px */
    color: #ff0000; /* 错误信息为红色 */
}

/* 成功框的样式 */
.success-box {
    background: url(../images/successbox.png) no-repeat; /* 背景为成功框的图像 */
    width: 350px; /* 宽度为350px */
    height: 120px; /* 高度为120px */
    margin: 20px auto; /* 上下边距为20px，水平居中 */
    padding: 15px; /* 内边距为15px */
    color: #fff; /* 文字颜色为白色 */
    font-size: 14px; /* 字体大小为14px */
}

/* 成功框内的成功信息样式 */
.success-box .success-info {
    margin-top: 10px; /* 上边距为10px */
    font-size: 16px; /* 字体大小为16px */
    color: #2ecc71; /* 成功信息为绿色 */
}

/* 取消按钮的样式 */
.cancel-btn {
    width: 300px; /* 宽度为300px */
    height: 40px; /* 高度为40px */
    background: #e74c3c; /* 背景色为红色 */
    color: #fff; /* 文字颜色为白色 */
    font-size: 16px; /* 字体大小为16px */
    font-weight: bold; /* 字体加粗 */
    text-align: center; /* 文字居中对齐 */
    line-height: 40px; /* 行高为40px，确保文字垂直居中 */
    border: none; /* 无边框 */
    cursor: pointer; /* 鼠标指针变为点击状态 */
}

/* 取消按钮的悬停效果 */
.cancel-btn:hover {
    background: #c0392b; /* 悬停时背景色变为更深的红色 */
}

/* 隐藏的表单项 */
.hidden {
    display: none; /* 隐藏该元素 */
}

/* 表单项的标签样式 */
label {
    font-size: 14px; /* 字体大小为14px */
    color: #687f92; /* 标签文字颜色 */
}

/* 链接的样式 */
a {
    text-decoration: none; /* 去掉链接下划线 */
    color: #3d96c9; /* 链接颜色 */
}

/* 链接悬停时的样式 */
a:hover {
    color: #2a7da6; /* 悬停时链接颜色变为深蓝色 */
}

/* 警告框的样式 */
.alert-box {
    background: #f39c12; /* 背景色为橙色 */
    color: #fff; /* 文字颜色为白色 */
    font-size: 14px; /* 字体大小为14px */
    padding: 15px; /* 内边距为15px */
    margin: 20px 0; /* 上下边距为20px */
    border-radius: 5px; /* 圆角边框 */
}

/* 提示框的样式 */
.tip-box {
    background: #f1c40f; /* 背景色为黄色 */
    color: #fff; /* 文字颜色为白色 */
    font-size: 14px; /* 字体大小为14px */
    padding: 15px; /* 内边距为15px */
    margin: 20px 0; /* 上下边距为20px */
    border-radius: 5px; /* 圆角边框 */
}