building-sign/commons/style.css

947 lines
16 KiB
CSS

/* 内容区 */
page{
color: #333333;
}
/* 首页 */
.sign-top{
position: relative;
text-align: center;
padding-bottom: 80rpx;
}
.sign-top .sign-type{
width: 100rpx;
line-height: 44rpx;
border-radius: 22rpx;
margin-top: 3rpx;
position: absolute;
right: 25rpx;
z-index: 1;
}
.sign-top>image{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.sign-top .sign-time{
line-height: 50rpx;
}
.sign-top .sign-time>text:nth-of-type(1){
margin-right: 18rpx;
}
/* 打卡 */
.sign-top .sign-btn{
width: 240rpx;
height: 240rpx;
border-radius: 100%;
background-image: linear-gradient(to top,#4e4e4e,#cbcbcb);
margin: 44rpx auto 12rpx;
box-shadow: 0 0 22rpx 8rpx rgba(11,66,101,.25);
overflow: hidden;
}
.sign-top .sign-btn.finish{
background-image: linear-gradient(to top,#eb7607,#ffc600);
}
.sign-top .sign-btn>text{
line-height: 30rpx;
}
.sign-top .sign-btn>text:nth-of-type(1){
display: block;
font-weight: bold;
line-height: 60rpx;
margin: 70rpx 0 32rpx;
}
.sign-top .sign-site{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 25rpx;
height: 48rpx;
overflow: hidden;
}
.sign-top .sign-site .position,
.sign-top .sign-site .warning,
.sign-top .sign-site .position-btn{
display: flex;
align-items: center;
height: 100%;
}
.sign-top .sign-site .warning>image{
width: 23rpx;
height: 23rpx;
margin-right: 6rpx;
}
.sign-top .sign-site .position-btn{
justify-content: center;
width: 164rpx;
border-radius: 24rpx;
margin-left: 10rpx;
background-color: rgba(56,24,24,.3);
border: 1px solid rgba(255,255,255,.3);
}
.sign-top .sign-site .position-btn>image{
width: 27rpx;
height: 27rpx;
margin-right: 5rpx;
}
/* 打卡记录 */
.sign-record{
border-radius: 60rpx 60rpx 0 0;
overflow: hidden;
margin-top: -60rpx;
padding: 10rpx 48rpx;
overflow: hidden;
}
.sign-record-other{
margin-top: 0;
}
.sign-record-other{
padding: 0 30rpx;
}
.sign-record .title{
display: flex;
align-items: center;
height: 64rpx;
border-bottom: 3rpx solid #f1f5f9;
}
.sign-record .title>image{
width: 30rpx;
height: 30rpx;
margin-right: 8rpx;
}
.sign-record .item{
display: flex;
justify-content: space-between;
padding: 28rpx 0;
border-bottom: 2rpx solid #f1f5f9;
line-height: 1.85;
}
.sign-record .item:last-child{
border-bottom: 0;
}
.sign-record-other .item:last-child{
border-bottom: 2rpx solid #f1f5f9;
}
.sign-record .info{
display: flex;
flex-direction: column;
width: calc(100% - 80rpx);
padding-left: 22rpx;
position: relative;
}
.sign-record .info:before{
content: "";
display: block;
width: 9rpx;
height: 9rpx;
background-color: #0788ff;
border-radius: 100%;
position: absolute;
left: 0;
top: 20rpx;
z-index: 1;
}
.sign-record .state{
width: 90rpx;
text-align: right;
}
/* 弹窗 */
.pop-up-bg{
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.7);
position: fixed;
left: 0;
top: 0;
z-index: 999;
}
/* 打卡类型 */
.sign-cate{
box-sizing: border-box;
width: calc(100% - 150rpx);
border-radius: 10rpx;
padding: 40rpx 60rpx;
}
.sign-cate .title{
font-weight: bold;
text-align: center;
}
.sign-cate .txt{
display: flex;
align-items: center;
justify-content: space-around;
}
.sign-cate .notice-msg{
margin: 40rpx 0 60rpx;
}
.sign-cate .radio-item{
display: flex;
align-items: center;
height: 60rpx;
margin: 30rpx 0 40rpx;
}
.sign-cate .radio-item>view:first-child{
box-sizing: border-box;
width: 30rpx;
height: 30rpx;
border: 2rpx solid #bdbdbd;
border-radius: 100%;
margin-right: 6rpx;
position: relative;
}
.sign-cate .radio-item>view.checked{
border: 2rpx solid #0788ff;
}
.sign-cate .radio-item>view.checked::after{
content: "";
display: block;
width: 18rpx;
height: 18rpx;
border-radius: 100%;
background-color: #0788ff;
position: absolute;
left: 5rpx;
top: 5rpx;
z-index: 1;
}
.sign-cate-btns{
display: flex;
justify-content: space-around;
align-items: center;
}
.sign-cate-btns .btn{
width: calc(50% - 30rpx);
line-height: 70rpx;
border-radius: 5rpx;
text-align: center;
}
.sign-cate-btns .btn:first-child{
background-color: #b5b5b5;
}
.sign-cate-btns .btn:last-child{
background-image: linear-gradient(to right,#028bfd,#02b4fe);
}
/* 安全公告 */
.safety-bulletin{
box-sizing: border-box;
width: calc(100% - 90rpx);
border-radius: 10rpx;
padding: 40rpx 45rpx 66rpx;
}
.safety-bulletin .title{
font-weight: bold;
text-align: center;
margin-bottom: 20rpx;
}
.safety-bulletin .txt{
line-height: 1.75;
text-align: justify;
}
.safety-bulletin .close-btn{
display: flex;
justify-content: center;
align-items: center;
width: 200rpx;
height: 68rpx;
border: 2rpx solid #dcdcdc;
border-radius: 10rpx;
margin: 50rpx auto 0;
}
/* 注册信息 */
.register-information{
box-sizing: border-box;
width: calc(100% - 90rpx);
border-radius: 10rpx;
padding: 40rpx 25rpx 50rpx;
}
.register-information .item{
display: flex;
justify-content: space-between;
align-items: center;
height: 68rpx;
margin-top: 16rpx;
}
.register-information .item:first-child{
margin-top: 0;
}
.register-information .item .title{
width: 150rpx;
text-align: right;
}
.register-information .item .input{
box-sizing: border-box;
width: calc(100% - 170rpx);
height: 68rpx;
padding: 0 10rpx;
border: 2rpx solid #dcdcdc;
border-radius: 5rpx;
}
.register-information .submit-btn{
width: calc(100% - 170rpx);
line-height: 80rpx;
border-radius: 10rpx;
text-align: center;
margin: 26rpx 0 0 170rpx;
}
.register-information .item .name{
display: flex;
justify-content: space-between;
align-items: center;
height: 64rpx;
}
.register-information .item .name image{
width: 19rpx;
height: 14rpx;
margin-right: 5rpx;
}
/* 加班 */
.overtime-from{
width: 100%;
padding-top: 10rpx;
border-top: 26rpx solid #ecf5fb;
}
.overtime-from .item{
width: calc(100% - 60rpx);
padding: 20rpx 0 33rpx;
margin: 0 auto;
border-top: 2rpx solid #f1f5f9;
line-height: 2;
}
.overtime-from .item:first-child{
border-top: 0;
}
.overtime-from .item .title{
display: flex;
align-items: center;
font-weight: bold;
}
.overtime-from .item .title:before{
content: "";
display: inline-block;
width: 9rpx;
height: 9rpx;
border-radius: 100%;
background-color: #333333;
margin-right: 15rpx;
}
.overtime-from .item .input{
box-sizing: border-box;
width: calc(100% - 25rpx);
height: 70rpx;
margin: 7rpx 0 0 25rpx;
padding: 0 10rpx;
border: 2rpx solid #dcdcdc;
border-radius: 5rpx;
}
.overtime-from .item .textarea{
height: 295rpx;
padding: 10rpx;
line-height: 1.6;
}
.overtime-from .item .name{
display: flex;
justify-content: space-between;
align-items: center;
height: 66rpx;
}
.overtime-from .item .name image{
width: 18rpx;
height: 10rpx;
margin-right: 5rpx;
}
.overtime-from .item .time-input{
display: flex;
justify-content: space-between;
align-items: center;
}
.overtime-from .item .time-input .input{
width: calc(100% - 90rpx);
}
.overtime-from .submit-btn{
width: calc(100% - 85rpx);
background-image: linear-gradient(to right,#028bfd,#02b4fe);
border-radius: 5rpx;
line-height: 80rpx;
margin-left: 55rpx;
text-align: center;
}
/* 个人中心 */
.my-top{
padding-bottom: 45rpx;
}
.my-info{
display: flex;
align-items: center;
padding: 25rpx 30rpx;
}
.my-info .my-cover{
width: 130rpx;
height: 130rpx;
margin-right: 20rpx;
border-radius: 100%;
border: 2rpx solid #dcdcdc;
overflow: hidden;
}
.my-info .my-cover image{
width: 130rpx;
height: 130rpx;
}
.my-info .my-txt{
line-height: 1.5;
text-align: left;
}
.my-info .my-txt view:nth-of-type(2){
display: inline-block;
padding: 0 30rpx;
margin-top: 8rpx;
line-height: 46rpx;
background-color: #036db3;
border: 2rpx solid #b8c7e7;
border-radius: 25rpx;
letter-spacing: 2rpx;
text-indent: 2rpx;
text-align: center;
}
.my-more{
margin-top: -45rpx;
border-radius: 20rpx 20rpx 0 0;
padding: 0;
}
.my-more .item{
display: flex;
justify-content: space-between;
align-items: center;
height: 95rpx;
padding: 0 30rpx;
border-bottom: 15rpx solid #f1f5f9;
}
.my-more .item:last-child{
border-bottom: 15rpx solid #f1f5f9;
}
.my-more .item .img{
display: flex;
align-items: center;
width: 45rpx;
height: 95rpx;
}
.my-more .item .txt{
width: calc(100% - 57rpx);
}
.my-more .item>image{
width: 12rpx;
height: 19rpx;
}
/* 通知 */
.notice-tips{
padding: 15rpx 30rpx;
border-top: 2rpx solid #ecf5fb;
line-height: 1.6;
}
/* 个人资料 */
.information-from{
border-top: 26rpx solid #ecf5fb;
}
.information-from .item{
display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% - 60rpx);
height: 80rpx;
margin: 0 auto;
border-bottom: 2rpx solid #f1f5f9;
}
.information-from .item:first-child{
height: 144rpx;
}
.information-from .cover{
width: 100rpx;
height: 100rpx;
border-radius: 100%;
overflow: hidden;
}
.information-from .cover image{
width: 100rpx;
height: 100rpx;
}
.information-from .item>image{
width: 12rpx;
height: 19rpx;
margin-left: 14rpx;
}
.information-from .item .title{
width: 150rpx;
}
.information-from .item .msg{
display: flex;
justify-content: flex-end;
align-items: center;
width: calc(100% - 176rpx);
text-align: right;
}
.information-from .item .msg>text{
color: #028bfd;
}
/* 资料修改 */
.edit-box{
box-sizing: border-box;
width: calc(100% - 90rpx);
border-radius: 10rpx;
padding: 57rpx 50rpx 66rpx;
position: relative;
}
.edit-box .title{
text-align: center;
margin-bottom: 30rpx;
}
.edit-box .input{
height: 76rpx;
padding: 0 20rpx;
border: 2rpx solid #e2e5ed;
border-radius: 5rpx;
}
.edit-box .input .name{
display: flex;
justify-content: space-between;
align-items: center;
height: 76rpx;
}
.edit-box .input .name image{
width: 18rpx;
height: 10rpx;
}
.edit-box .close-btn{
width: 23rpx;
height: 23rpx;
padding: 15rpx;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.edit-box .submit-btn{
background-image: linear-gradient(to right,#028bfd,#02b4fe);
border-radius: 5rpx;
line-height: 80rpx;
margin-top: 30rpx;
text-align: center;
}
/* 加载提示 */
.more-tips{
text-align: center;
opacity: .3;
margin: 30rpx 0;
}
/* 筛选 */
.screen-box{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
width: calc(100% - 60rpx);
padding: 23rpx 30rpx;
border-top: 26rpx solid #ecf5fb;
border-bottom: 2rpx solid #f1f5f9;
}
.screen-box .item{
width: calc(50% - 39rpx);
height: 66rpx;
padding: 0 15rpx;
border: 2rpx solid #e2e5ed;
border-radius: 5rpx;
}
.screen-box .item:first-child{
width: calc(100% - 30rpx);
margin-bottom: 10rpx;
}
.screen-box .item .name{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 66rpx;
}
.screen-box .item .name text{
width: calc(100% - 18rpx);
}
.screen-box .item .name image{
width: 18rpx;
height: 10rpx;
}
/* 工资记录 */
.sign-record .info-other{
width: 150rpx;
}
.sign-record .wages-info{
text-align: right;
}
/* 单页内容 */
.single-page{
padding: 25rpx 30rpx;
line-height: 1.75;
border-top: 26rpx solid #ecf5fb;
}
/* 负责人端 */
.pull-nav{
position: sticky;
left: 0;
z-index: 9;
}
.choose-all-bg{
border-top: 26rpx solid #ecf5fb;
}
.choose-all{
display: flex;
align-items: center;
padding: 0 30rpx;
height: 118rpx;
border-bottom: 2rpx solid #f1f5f9;
}
.radio{
box-sizing: border-box;
width: 32rpx;
height: 32rpx;
border: 2rpx solid #bdbdbd;
border-radius: 2rpx;
margin-right: 15rpx;
}
.radio.checked{
background-color: #0788ff;
border: 2rpx solid #0788ff;
background-image: url(/static/icon/icon-checked.png);
background-size: cover;
}
.sign-record .radio{
margin-top: 8rpx;
}
.sign-record .info.hide{
padding-left: 0;
width: calc(100% - 147rpx);
}
.sign-record .info.enter-info{
width: calc(100% - 170rpx);
}
.sign-record .info.hide::before{
display: none;
}
/* 按钮 */
.choose-all-btns .btn,
.examine-btns .btn{
box-sizing: border-box;
line-height: 46rpx;
border: 2rpx solid #0788ff;
border-radius: 5rpx;
padding: 0 25rpx;
}
.choose-all-btns{
display: flex;
align-items: center;
margin-left: 25rpx;
}
.choose-all-btns .btn:nth-of-type(2){
border: 2rpx solid #b5b5b5;
margin-left: 15rpx;
}
.examine-btns .btn:nth-of-type(2),
.examine-btns .btn.btn-other{
border: 2rpx solid #b5b5b5;
margin-top: 10rpx;
}
/* 支出 */
.screen-box.pay-screen-box .item:first-child{
width: calc(50% - 39rpx);
margin-bottom: 0;
}
.pay-info{
padding: 20rpx 30rpx;
border-bottom: 26rpx solid #ecf5fb;
}
.pay-info .item{
display: flex;
justify-content: space-between;
line-height: 2;
padding-left: 22rpx;
}
.pay-info .item:first-child{
position: relative;
}
.pay-info .item:first-child:before{
content: "";
display: block;
width: 9rpx;
height: 9rpx;
background-color: #0788ff;
border-radius: 100%;
position: absolute;
left: 0;
top: 26rpx;
z-index: 1;
}
/* 工人信息 */
.enter-detail{
border-top: 26rpx solid #ecf5fb;
}
.enter-detail .item{
display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% - 60rpx);
height: 80rpx;
margin: 0 auto;
border-bottom: 2rpx solid #f1f5f9;
}
.enter-detail .item .title{
width: 150rpx;
}
.enter-detail .item .msg{
display: flex;
justify-content: flex-end;
align-items: center;
width: calc(100% - 150rpx);
text-align: right;
}
.director-arrow{
display: flex;
align-items: center;
}
.director-arrow:before {
content: "";
display: inline-block;
width: .76rem;
height: .36rem;
background-image: url(/static/icon/icon-change.png);
background-size: cover;
margin: 0 .1rem;
}
.enter-detail .item .msg>text{
color: #028bfd;
}
.enter-detail-btns{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
margin: 50rpx 0 30rpx;
}
.enter-detail-btns .btn{
width: calc(50% - 11rpx);
line-height: 80rpx;
border-radius: 5rpx;
text-align: center;
}
.enter-detail-btns .btn:first-child{
background-image: linear-gradient(to right,#028bfd,#02b4fe);
}
.enter-detail-btns .btn:last-child{
background-color: #b5b5b5;
}
/* 登录 */
.login-header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 0;
position: fixed;
left: 50%;
top: 40%;
transform: translate(-50%,-50%);
}
.infoImg {
display: block;
width: 224rpx;
height: 224rpx;
border-radius: 100%;
margin: 0 auto;
}
.logo-name {
margin-top: 20rpx;
text-align: center;
font-weight: bold;
}
.login-footer {
width: 100%;
text-align: center;
position: fixed;
left: 0;
bottom: 120rpx;
}
.login-btn {
width: calc(100% - 100rpx);
border-radius: 20rpx;
line-height: 90rpx;
margin: 0 auto;
box-shadow: 0 0 20rpx 4rpx rgba(7,136,255,.3);
letter-spacing: 3rpx;
text-indent: 3rpx;
}
.agreement-box{
margin-top: 30rpx;
}
/* 授权弹窗 */
.user-info-box{
box-sizing: border-box;
width: calc(100% - 150rpx);
border-radius: 10rpx;
padding: 40rpx 45rpx 35rpx;
}
.user-info-box .info{
text-align: center;
}
.user-info-box .cover{
width: 150rpx;
height: 150rpx;
border-radius: 100%;
margin: 0 auto;
overflow: hidden;
}
.user-info-box .cover image{
width: 100%;
height: 100%;
}
.user-info-box .name{
line-height: 1.5;
margin: 12rpx 0 8rpx;
}
.user-info-box .tips{
line-height: 1.6;
}
.user-info-box .item{
display: flex;
align-items: center;
justify-content: space-between;
padding: 15rpx 0;
border-bottom: 2rpx solid #f1f5f9;
}
.user-info-box .item text{
line-height: 1.8;
}
.user-info-box .avatar{
width: 100rpx;
height: 100rpx;
padding: 0;
border: 0;
margin: 0;
border-radius: 100%;
background: none;
}
.user-info-box .avatar image{
width: 100%;
height: 100%;
}
.user-info-box .nick-name{
height: 60rpx;
text-align: right;
}
.user-info-box .empower-btns{
display: flex;
align-items: center;
margin-top: 20rpx;
}
.user-info-box .empower-btns .btn{
width: 50%;
text-align: center;
align-items: 1.5;
padding-top: 20rpx;
}