295 lines
5.0 KiB
CSS
295 lines
5.0 KiB
CSS
|
/* 内容区 */
|
||
|
.content *{
|
||
|
box-sizing: border-box;
|
||
|
}
|
||
|
/* 首页 */
|
||
|
.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;
|
||
|
}
|
||
|
|
||
|
.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 .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;
|
||
|
}
|
||
|
|
||
|
/* 安全公告 */
|
||
|
.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 .position-name{
|
||
|
display: flex;
|
||
|
justify-content: space-between;
|
||
|
align-items: center;
|
||
|
height: 64rpx;
|
||
|
}
|
||
|
.register-information .item .position-name image{
|
||
|
width: 19rpx;
|
||
|
height: 14rpx;
|
||
|
margin-right: 5rpx;
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
/* 登录 */
|
||
|
.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;
|
||
|
}
|