/** * @description: 清除浮动 * @Author: * @param {type} * @return: */ /** * @description: 响应式图片 * @Author: * @param {type} * @return: */ /** * @description: 横向排列,垂直居中布局 * @Author: * @param {type} * @return: */ /** * @description: 单行文本超出隐藏 * @Author: * @param {type} * @return: */ /** * @description: 多行文本超出隐藏 * @Author: * @param {Number} num 最多要显示几行 * @return: */ /** * @description: flex 垂直居中布局 * @Author: * @param {String} cposition 水平排列方式 * @return: */ /** * @description: 设置元素尺寸 * @Author: * @param {Number} w 宽度 * @param {Number} h 高度 * @return: */ /** * @description: 2x的雪碧图缩放 * @Author: * @param {Number} spriteW 雪碧图原始宽度 * @param {Number} spriteH 雪碧图原始高度 * @param {Number} bgOffsetX 背景定位原始X轴偏移量 * @param {Number} bgOffsetY 背景定位原始Y轴偏移量 * @return: */ /** * @description: 设置字体 * @Author: * @param {type} * @return: */ /** * @description: 修改滚动条样式 * @Author: * @param {String} scrollW 滚动条宽度 * @param {String} scrollC 滚动条背景色 * @param {String} trackP 滑块背景色 * @return: */ /** * @description: 设置背景图 * @Author: * @param {String} url 图片路径 * @return: */ /** * @description: 修改输入框占位符的字体颜色 * @Author: * @param {type} * @return: */ /** * @description: 禁止选中内容 * @Author: * @param {type} * @return: */ /** * @description: 鼠标移入图片放大效果 * @Author: * @param {type} * @return: */ /** * @description: 铺满整个容器的绝对定位 * @Author: * @param {type} * @return: */ /** * @description: 绝对定位水平垂直居中 * @Author: * @param {type} * @return: */ /** * @description: 统一容器,视项目不同,数值有所不同 * @Author: * @param {type} * @return: */ /** * @description: 替代flex的inline-block * @Author: * @param {type} * @return: */ /** * @description: 首页栏目标题样式 * @Author: * @param {type} * @return: */ /** * @description: 两端对齐辅助元素 * @Author: * @param {type} * @return: */ div.form { padding-top: 2rem; padding-bottom: 1rem; background: url('../images/bg6.png') center center / cover no-repeat; } div.form form.ss-form { padding: 0.5rem; width: 6.4rem; background-color: #fff; border-radius: 0.08rem; margin: 0 auto; } @media screen and (max-width: 1024px) { div.form form.ss-form { padding: 0.4rem !important; width: 100% !important; } } div.form form.ss-form h2.form-title { font-size: 0.24rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.31rem; color: #333333; text-align: center; } @media screen and (max-width: 1024px) { div.form form.ss-form h2.form-title { font-size: 0.36rem; line-height: 1.5; } } div.form form.ss-form h2.form-title p { font-size: 0.16rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.21rem; color: #868991; } @media screen and (max-width: 1024px) { div.form form.ss-form h2.form-title p { font-size: 0.28rem; line-height: 1.5; } } div.form form.ss-form div.form-wrapper { padding-top: 0.22rem; } div.form form.ss-form div.form-wrapper div.layui-form-item { height: 0.52rem; line-height: 0.52rem; border: 1px solid #868991; border-radius: 0.25rem; padding-left: 0.24rem; white-space: nowrap; margin-bottom: 0.16rem; } @media screen and (max-width: 1024px) { div.form form.ss-form div.form-wrapper div.layui-form-item { height: 0.8rem; line-height: 0.8rem; } } div.form form.ss-form div.form-wrapper div.layui-form-item .layui-form-label { width: 1rem; padding: 0; margin: 0; display: inline-block; vertical-align: middle; text-align: left; font-size: 0.14rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.19rem; color: #dadbde; height: 100%; line-height: inherit; } div.form form.ss-form div.form-wrapper div.layui-form-item .layui-input-block { height: 100%; line-height: inherit; display: inline-block; vertical-align: middle; margin-left: 0; } div.form form.ss-form div.form-wrapper div.layui-form-item .layui-input-block input { height: 100%; border: 0; outline: 0; background-color: transparent; line-height: inherit; font-size: 0.16rem; counter-reset: #333; padding-left: 0.3rem; } @media screen and (max-width: 1024px) { div.form form.ss-form div.form-wrapper div.layui-form-item .layui-input-block input { font-size: 0.28rem; line-height: 1.5; } } div.form form.ss-form div.form-wrapper div.layui-form-item .layui-input { width: auto; display: inline-block; vertical-align: text-bottom; } div.form form.ss-form div.btn-group { padding-bottom: 0.2rem; border-bottom: 1px solid #707070; display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: -ms-flex; display: -webkit-flex; display: flex; -moz-box-pack: space-between; -webkit-box-pack: space-between; -ms-flex-pack: space-between; -webkit-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -moz-box-align: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; -webkit-flex-direction: row; -o-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap; } div.form form.ss-form p.go-login { text-align: center; padding-top: 0.2rem; } div.form form.ss-form p.go-login a { font-size: 0.14rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.19rem; color: #0355c9; } div.form form.ss-form p.go-login a:hover { text-decoration: underline; } div.form form.ss-form p.go-login.flex { display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: -ms-flex; display: -webkit-flex; display: flex; -moz-box-pack: space-between; -webkit-box-pack: space-between; -ms-flex-pack: space-between; -webkit-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -moz-box-align: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -o-align-items: center; align-items: center; -webkit-flex-direction: row; -o-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap; } div.form form.ss-form div.code div.layui-form-item { width: 72.75%; float: left; } div.form form.ss-form div.code button#getCode { width: 26.01%; padding: 0; float: right; cursor: pointer; } div.form form.ss-form button { width: 2.6rem; height: 0.5rem; line-height: 0.5rem; text-align: center; font-size: 0.14rem; font-family: Microsoft YaHei; font-weight: 400; color: #ffffff; border-radius: 0.25rem; margin-left: 0; } @media screen and (max-width: 1024px) { div.form form.ss-form button { height: 0.8rem; line-height: 0.8rem; } } div.form form.ss-form button.active { background-color: #0355c9; } div.form form.ss-form button.noactive { background-color: #868991; } div.form form.ss-form button.block { display: block; width: 100%; } div.form form.ss-form.ss-form-login .layui-form-label { width: 0.4rem !important; } div.form form.ss-form.ss-form-login input { padding-left: 0.06rem !important; } div.form form.ss-form.ss-form-login i.icon { display: inline-block; height: 100%; width: 0.13rem; } @media screen and (max-width: 1024px) { div.form form.ss-form.ss-form-login i.icon { width: 0.26rem; } } div.form form.ss-form.ss-form-login i.icon.i-name { background: url('../images/i-name.png') center center / cover no-repeat; background-size: 0.13rem 0.15rem; } @media screen and (max-width: 1024px) { div.form form.ss-form.ss-form-login i.icon.i-name { background-size: 0.26rem 0.3rem; } } div.form form.ss-form.ss-form-login i.icon.i-password { background: url('../images/i-password.png') center center / cover no-repeat; background-size: 0.11rem 0.15rem; } @media screen and (max-width: 1024px) { div.form form.ss-form.ss-form-login i.icon.i-password { background-size: 0.22rem 0.3rem; } } div.form form.ss-form.ss-form-login div.re-password { padding-left: 0.1rem; padding-bottom: 0.16rem; } div.form form.ss-form.ss-form-login .layui-form-checkbox { font-size: 0.15rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.19rem; color: #868991; } div.form form.ss-form.ss-form-login .layui-icon-ok { width: 0.16rem; height: 0.16rem; background: #ffffff; border: 1px solid #707070; border-radius: 0.04rem; } @media screen and (max-width: 1024px) { div.form form.ss-form.ss-form-login .layui-icon-ok { width: 0.32rem; height: 0.32rem; } } div.form form.ss-form.ss-form-login .layui-form-checked[lay-skin='primary'] i { border-color: #0355c9 !important; background-color: #0355c9; color: #fff; } div.form form.ss-form.ss-form-login .layui-form-checkbox[lay-skin='primary'] span { display: inline-block; vertical-align: baseline; } div.form form.ss-form.ss-form-login a.href-find-pasword { font-size: 0.15rem; font-family: Microsoft YaHei; font-weight: 400; color: #0355c9; vertical-align: top; } div.form form.ss-form.ss-form-login a.href-find-pasword:hover { text-decoration: underline; } div.form div.ss-form2 { width: 12rem; margin: 0 auto; height: 4.41rem; } @media screen and (max-width: 1024px) { div.form div.ss-form2 { width: 100%; height: auto; } } div.form div.ss-form2 div.form-left { float: left; width: 20.84%; height: 100%; background: url('../images/form-bg.png') center center / cover no-repeat; padding-top: 1rem; } @media screen and (max-width: 1024px) { div.form div.ss-form2 div.form-left { float: none; width: 100%; padding-bottom: 1rem; } } div.form div.ss-form2 div.form-left div.user-icon { width: 0.8rem; height: 0.8rem; border-radius: 50%; margin: 0 auto; background: url('../images/i-user-big.png') center center / cover no-repeat; background-color: #fff; background-size: 0.46rem 0.48rem; background-position: center center; } @media screen and (max-width: 1024px) { div.form div.ss-form2 div.form-left div.user-icon { width: 1.6rem; height: 1.6rem; background-size: 0.92rem 0.96rem; } } div.form div.ss-form2 div.form-left h2.my-name { font-size: 0.3rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.4rem; text-align: center; margin-top: 0.3rem; } @media screen and (max-width: 1024px) { div.form div.ss-form2 div.form-left h2.my-name { font-size: 0.36rem; line-height: 1.5; } } div.form div.ss-form2 div.form-right { width: 79.16%; float: right; height: 100%; padding: 0.2rem 0.3rem; background-color: #fff; } @media screen and (max-width: 1024px) { div.form div.ss-form2 div.form-right { width: 100%; float: none; } } div.form div.ss-form2 div.form-right div.top-tab { padding-bottom: 0.15rem; border-bottom: 1px solid rgba(3, 85, 201, 0.41); } div.form div.ss-form2 div.form-right div.top-tab ul.tab-list { float: left; padding-left: 0.29rem; } div.form div.ss-form2 div.form-right div.top-tab ul.tab-list span.split { display: inline-block; width: 1px; height: 0.21rem; background-color: #333; margin: 0 0.28rem; vertical-align: bottom; } @media screen and (max-width: 1024px) { div.form div.ss-form2 div.form-right div.top-tab ul.tab-list span.split { height: 0.4rem; vertical-align: text-bottom; } } div.form div.ss-form2 div.form-right div.top-tab ul.tab-list li.list-item { display: inline-block; font-size: 0.18rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.24rem; color: #333333; cursor: pointer; transition: color 0.3s; } div.form div.ss-form2 div.form-right div.top-tab ul.tab-list li.list-item:hover a, div.form div.ss-form2 div.form-right div.top-tab ul.tab-list li.list-item.active a { color: #0355c9; transition: color 0.3s; } @media screen and (max-width: 1024px) { div.form div.ss-form2 div.form-right div.top-tab ul.tab-list li.list-item { font-size: 0.36rem; line-height: 1.5; } } div.form div.ss-form2 div.form-right div.top-tab span.logout-btn { font-size: 0.16rem; font-family: Microsoft YaHei; font-weight: 400; line-height: 0.21rem; float: right; } @media screen and (max-width: 1024px) { div.form div.ss-form2 div.form-right div.top-tab span.logout-btn { font-size: 0.36rem; line-height: 1.5; } } div.form div.ss-form2 div.form-right div.top-tab span.logout-btn i.icon { display: inline-block; height: 0.21rem; width: 0.15rem; background: url('../images/i-logout.png') center center / cover no-repeat; background-size: 0.15rem 0.15rem; background-position: center center; vertical-align: sub; margin-right: 0.04rem; } @media screen and (max-width: 1024px) { div.form div.ss-form2 div.form-right div.top-tab span.logout-btn i.icon { height: 0.42rem; width: 0.3rem; background-size: 0.3rem 0.3rem; } } div.form form.edit-form { width: auto; display: none; padding: 0 !important; } div.form form.edit-form.active { display: block; } div.form form.edit-form div.form-wrapper div.layui-form-item { border: 0 none; height: 0.5rem; line-height: 0.5rem; } @media screen and (max-width: 1024px) { div.form form.edit-form div.form-wrapper div.layui-form-item { height: 0.8rem; line-height: 0.8rem; } } div.form form.edit-form div.form-wrapper div.layui-form-item label.layui-form-label { font-size: 0.16rem; font-family: Microsoft YaHei; font-weight: 400; color: #333333; line-height: inherit; min-width: 1rem; } @media screen and (max-width: 1024px) { div.form form.edit-form div.form-wrapper div.layui-form-item label.layui-form-label { font-size: 0.28rem; } } div.form form.edit-form div.form-wrapper div.layui-form-item .layui-input-block { font-size: 0.16rem; font-family: Microsoft YaHei; font-weight: 400; color: #333333; line-height: inherit; } @media screen and (max-width: 1024px) { div.form form.edit-form div.form-wrapper div.layui-form-item .layui-input-block { font-size: 0.28rem; } } div.form form.edit-form div.form-wrapper div.layui-form-item .layui-input-block input { height: 0.5rem; line-height: inherit; border: 1px solid #e6e6e6; border-radius: 0.25rem; width: 5.6rem; } @media screen and (max-width: 1024px) { div.form form.edit-form div.form-wrapper div.layui-form-item .layui-input-block input { width: 4.6rem; font-size: 0.28rem; height: 0.8rem; } }