/* 阿里巴巴矢量图标库 start */ @font-face { font-family: "iconfont"; /* Project id 3180711 */ src: url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.woff2?t=1651830764889') format('woff2'), url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.woff?t=1651830764889') format('woff'), url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.ttf?t=1651830764889') format('truetype'); } .icon { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-del:before { content: "\e718"; } .icon-cut:before { content: "\e609"; } .icon-add:before { content: "\e60a"; } .icon-add-picture05:before { content: "\e639"; } .icon-add-picture04:before { content: "\e636"; } .icon-add-picture03:before { content: "\e642"; } .icon-add-picture02:before { content: "\e8bc"; } .icon-add-picture01:before { content: "\e62c"; } .icon-sandian:before { content: "\e769"; } .icon-nothing-collection:before { content: "\e610"; } .icon-nothing-more:before { content: "\e624"; } .icon-nothing-data:before { content: "\e60c"; } .icon-address-check:before { content: "\e6c2"; } .icon-address-unchecked:before { content: "\e623"; } .icon-navigate-now:before { content: "\e640"; } .icon-send-goods:before { content: "\e601"; } .icon-payment:before { content: "\e602"; } .icon-finish:before { content: "\e63f"; } .icon-take:before { content: "\e649"; } .icon-refund:before { content: "\e613"; } .icon-customer-black:before { content: "\ec2e"; } .icon-customer:before { content: "\e628"; } .icon-check:before { content: "\e61e"; } .icon-del-white:before { content: "\e61f"; } .icon-screen:before { content: "\e60b"; } .icon-search:before { content: "\e653"; } .icon-caidan-mo:before { content: "\e73e"; } .icon-renwu-mo:before { content: "\e73f"; } .icon-shop-cart:before { content: "\e73d"; } .icon-caidan-active:before { content: "\e608"; } .icon-renwu-acitve:before { content: "\e67c"; } .icon-home-mo:before { content: "\e673"; } .icon-home-active:before { content: "\e674"; } .icon-return:before { content: "\e600"; } .icon-next:before { content: "\e60e"; } /* 阿里巴巴矢量图标库 end */ /* 项目基础样式 start */ /* 盒模型 */ .border-box{box-sizing: border-box;} /* 字体 */ .font18{ font-size: 18rpx;} .font20{ font-size: 20rpx;} .font22{ font-size: 22rpx;} .font24{ font-size: 24rpx;} .font26{ font-size: 26rpx;} .font28{ font-size: 28rpx;} .font30{ font-size: 30rpx;} .font32{ font-size: 32rpx;} .font34{ font-size: 34rpx;} .font36{ font-size: 36rpx;} .font38{ font-size: 38rpx;} .font40{ font-size: 40rpx;} .font42{ font-size: 42rpx;} .font44{ font-size: 44rpx;} .font46{ font-size: 46rpx;} .font48{ font-size: 48rpx;} .font50{ font-size: 50rpx;} .font52{ font-size: 52rpx;} .font54{ font-size: 54rpx;} .font56{ font-size: 56rpx;} .font58{ font-size: 58rpx;} .font60{ font-size: 60rpx;} /* 文字颜色 */ .color-white{ color: #ffffff;} .color-blue{ color: #0788ff;} .color-yellow{ color: #ffde00;} .color-red{ color: #ec0707;} .color-00{ color: #000000;} .color-33{ color: #333333;} .color-66{ color: #666666;} .color-88{ color: #888888;} .color-99{ color: #999999;} /* 背景颜色 */ .bg-blue{ background-color: #0788ff;} .bg-yellow{ background-color: #ffde00;} .bg-white{ background-color: #ffffff;} .bg-red{ background-color: #ec0707;} .bg-orange{ background-color: #ec7807;} .bg-green{ background-color: #25a63b;} /* 内边距 */ .pad-x100{ padding-bottom: 100rpx;} .pad-x120{ padding-bottom: 120rpx;} /* 文字行数 */ .clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips4{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips5{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips6{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips7{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 7;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips8{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 8;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips9{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 9;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips10{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 10;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} image{ /* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */ border: 0; /* 取消图片底侧有空白缝隙的问题 ① */ vertical-align: middle; /* 取消图片底侧有空白缝隙的问题 ② */ object-fit: cover; } /* 去除滚动条 */ scroll-view ::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; -webkit-appearance: none; background: transparent; } /* 项目基础样式 end */ /* 项目样式 start */ /* 内容区 */ 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-date{ line-height: 85rpx; padding: 0 30rpx; border-bottom: 3rpx solid #f1f5f9; } /* 打卡记录 */ .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; } /* 打卡日历 */ .sign-calendar{ background-color: #f7f7f7; padding: 32rpx 25rpx 0; } /* 弹窗 */ .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 30rpx; } .sign-cate .title{ text-align: center; padding-bottom: 20rpx; border-bottom: 2rpx solid #e7e7e7; } .sign-cate .txt{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 20rpx 30rpx 30rpx; } .notick-status{ display: flex; align-items: center; height: 120rpx; padding: 0 30rpx; border-top: 25rpx solid #ecf5fb; } .sign-cate .notice-msg{ margin: 40rpx 0 60rpx; } .notick-status .radio-item:first-child{ margin-right: 50rpx; } .notick-status .radio-item, .sign-cate .radio-item{ display: flex; align-items: center; height: 70rpx; } .notick-status .radio-item>view:first-child, .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; } .notick-status .radio-item>view.checked, .sign-cate .radio-item>view.checked{ border: 2rpx solid #0788ff; } .notick-status .radio-item>view.checked::after, .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: center; align-items: center; } .sign-cate-btns .btn{ width: 205rpx; margin: 0 10rpx; 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); } .notick-txt{ width: calc(100% - 60rpx); margin: 0 auto; border-top: 2rpx solid #e9ebf3; } .notick-tips{ display: flex; align-items: center; height: 60rpx; margin-top: 20rpx; } .notick-tips::before{ content: ""; display: inline-block; width: 10rpx; height: 10rpx; background-color: #333333; margin: 5rpx 15rpx 0 0; border-radius: 10rpx; } .notick-txt .input{ box-sizing: border-box; width: 100%; height: 650rpx; padding: 10rpx; border: 2rpx solid #e2e5ed; line-height: 1.6; border-radius: 5rpx; } .sign-cate .evaluate-txt{ justify-content: center; } .sign-cate .evaluate-txt .evaluate-stars{ margin: 30rpx 7rpx 10rpx; } .sign-cate .evaluate-txt .evaluate-stars image{ width: 62rpx; height: 59rpx; } /* 安全公告 */ .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: 10rpx 25rpx 0; border-top: 30rpx solid #ffffff; border-bottom: 30rpx solid #ffffff; max-height: 80vh; overflow-y: auto; } .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 .item .textarea{ padding: 5rpx 10rpx; height: 186rpx; line-height: 1.6; } .register-information .item .addr-box{ width: calc(100% - 170rpx); } .register-information .item .addr-box .input{ width: 100%; } .register-information .item .addr-input{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 16rpx; } .register-information .item .input-box{ box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; width: calc(100%/3 - 8rpx); height: 68rpx; padding: 0 10rpx; border: 2rpx solid #dcdcdc; border-radius: 5rpx; } .register-information .item .input-box .input-flex{ width: calc(100% - 20rpx); } .register-information .item .input-box image{ width: 19rpx; height: 14rpx; } .register-information .submit-btn{ width: calc(100% - 170rpx); line-height: 80rpx; border-radius: 10rpx; text-align: center; margin: 26rpx 0 2rpx 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; } .register-information .item-other{ height: auto; } .register-information .item-other>.upload-box{ display: flex; box-sizing: border-box; width: calc(100% - 170rpx); } .register-information .item-other .img{ position: relative; width: 100%; height: 298rpx; border-radius: 5rpx; overflow: hidden; } .register-information .item-other .img>image:first-child{ width: 100%; min-height: 100%; } .register-information .item-other .del-btn{ width: 48rpx; height: 48rpx; position: absolute; right: 2rpx; top: 2rpx; } .register-information .item-other .upload-btn{ width: 100%; height: 298rpx; border-radius: 5rpx; overflow: hidden; position: relative; } .register-information .item-other .upload-btn .bg{ width: 100%; height: 298rpx; position: absolute; left: 0; top: 0; } .register-information .item-other .upload-btn .bg>image{ width: 100%; height: 298rpx; } .register-information .item-other .upload-btn .icon{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: rgba(0,0,0,.66); position: absolute; left: 0; top: 0; z-index: 1; } .register-information .item-other .upload-btn .icon>image{ width: 70rpx; height: 53rpx; margin-bottom: 20rpx; } /* 加班 */ .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-other .item:first-child{ width: calc(100% - 210rpx); margin-bottom: 0; } .screen-box-other .item:last-child{ width: 134rpx; border-color: #0788ff; } .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: -webkit-sticky; 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(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAA6pJREFUeF7tmluITlEUx///lPJGUV5EihIpT6I8uT2QIreIpAZFiSaiySWp0YQiimiKkmko5RalpJEhKY0UEg2l1DxMiVzy165N09fZ5+xzdb7vO+v17LX2+v/O2vvsb+2PaHJjk+tHBaCqgCYnUC2BJi+AahOslkC1BJqcQLUEGqUAJB0AsN/qOU1yq4+2hqgASTcALKoRfJCkgRJqdQ9A0joAF4JUkozUFzkgiuD/fC5pOIDvrhyaAcBrAJMcAM6S3Bz1guq2AiQdAtDmEPgKwDySHxsSgKRpAPpCxC0neTVKvHlelxUg6SuAEQ6BHSR3+YivSwCSugCsdAh8YEv/Z0MCkLQMgKu0fwCYS7LHV3zdVYAkhYhrJXk0jvi6AiCpF8BMh8ArJFfEFV83ACTtBtDuEPjBrntzJohtpf8KSJoA4F2IsvUkL8ZWbh3qAUA/gHEOgadIbksqvvRLQNJZAC0OgU9t6Q82JABJCwDcCRG3kOTdNOJLXQGSfgEY5hC4j6T5LZDaSrkHOBocf8XeIlnb/EgMonQAJJlN7aRD0YA97T1PrLjG0RuApCMA1gAwm445eES2m+ImKWkMgM8hfltInokbN2y8F4CahmMupWiCSnoGYIYj4U6SG7MU770JSnoBYGrA5L0kZ2WRlKTDAPY6Yr20n7xPWcw1NIZvBZiTmDmRBdkbkpPTJCZpNoCHITGWkryWZg6Xry8As+42hSQwQHJ00gQlmTc71uHfTnJP0thRfl4A7Po0h475oRuKRxu61l9SJ4ANjrj37a7/O0pI0ufeACyEbgDLQyYbJDnSNxlJqwBcdoz/ZsU/8o2XZFwsABbCeQBhu3E/yfFRyUgyPT3T23PZTpLHo+KkfR4bgIVwDMCOkMn7SE4PS06SOeeb836QdZFcnVacj38iABbC0MvIoLl6SM4JeiDJwDMQg+y9/eS99RGQdkxiAJ4QbpJcPDRJSVMAmO+6y9aSvJRWmK9/KgCeELpJ/mtjSzIXGuZiI8hOkNzum3wW41IDiANBUgeAVkfij23pf8lCmG+MTAD4QgAQ1rk1d3n3fBPPalxmADwhuPJuI2l+CxRumQJICOE6ySWFK7cTZg4gJgTz29+UfthNb65scgEQA0ILyXO5KowInhsADwhef2LKG06uACwEs/Obq62JAEYBuA3gSR4ttSSwcgeQJKkifSoARdIu41xVBZTxrRSZU1UBRdIu41xVBZTxrRSZU1UBRdIu41xNXwF/APOHFVDQMgdrAAAAAElFTkSuQmCC); 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(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAASCAYAAAA31qwVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkJENTU0MEJFNkVCRTExRUQ5NDM1RkE5RUI1NEZFNkYyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkJENTU0MEJGNkVCRTExRUQ5NDM1RkE5RUI1NEZFNkYyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QkQ1NTQwQkM2RUJFMTFFRDk0MzVGQTlFQjU0RkU2RjIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QkQ1NTQwQkQ2RUJFMTFFRDk0MzVGQTlFQjU0RkU2RjIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6W9cMkAAAAnklEQVR42mJgoDO4LsfWAMIMgwmAHHRDju0/CA86x92UY6sctI67Ls9ePHhDTp49Z/CGnBxr6iBOc6yx2BzHeF2GxWGgHcfIxCQGpFaC2P8ZGBo1H/1qYAS5lGGQAZDjWBj+/z8waFzEyOgwuDKBLFvkoMsE12VZEwafo+RY0wedo27IsecNvpCSZy8ZhGmKrWoQpqlB3OwhtqEIEGAAO6prh9H+imwAAAAASUVORK5CYII=); 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%; -webkit-transform: translate(-50%,-50%); 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; } /* 项目样式 end */ /* 加载中样式 start */ .loading-box { display: flex; justify-content: center; width: 100%; padding-top: 20px; font-size: 30px; color: rgba(253, 82, 75, 1); vertical-align: top; transition: .3s color, .3s border; } /* .loading-box:hover { color: #d60b52; font-size: 0; padding: 0; border-width: 3px; line-height: 200px; } .loading-box:hover [class*="loader-"] { font-size: 70px; line-height: 200px; } */ [class*="loader-"] { display: inline-block; width: 1em; height: 1em; color: inherit; vertical-align: middle; pointer-events: none; } .loader-01 { border: .2em dotted currentcolor; border-radius: 50%; -webkit-animation: 1s loader-01 linear infinite; animation: 1s loader-01 linear infinite; } @-webkit-keyframes loader-01 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-01 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .loader-02 { border: .2em solid transparent; border-left-color: currentcolor; border-right-color: currentcolor; border-radius: 50%; -webkit-animation: 1s loader-02 linear infinite; animation: 1s loader-02 linear infinite; } @-webkit-keyframes loader-02 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-02 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .loader-03 { border: .2em solid currentcolor; border-bottom-color: transparent; border-radius: 50%; -webkit-animation: 1s loader-03 linear infinite; animation: 1s loader-03 linear infinite; position: relative; } @-webkit-keyframes loader-03 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-03 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .loader-04 { border: 1px solid currentcolor; border-radius: 50%; -webkit-animation: 1s loader-04 linear infinite; animation: 1s loader-04 linear infinite; position: relative; } .loader-04:before { content: ''; display: block; width: 0; height: 0; position: absolute; top: -.2em; left: 50%; border: .2em solid currentcolor; border-radius: 50%; } @-webkit-keyframes loader-04 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-04 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .loader-05 { border: .2em solid transparent; border-top-color: currentcolor; border-radius: 50%; -webkit-animation: 1s loader-05 linear infinite; animation: 1s loader-05 linear infinite; position: relative; } .loader-05:before { content: ''; display: block; width: inherit; height: inherit; position: absolute; top: -.2em; left: -.2em; border: .2em solid currentcolor; border-radius: 50%; opacity: .5; } @-webkit-keyframes loader-05 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-05 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .loader-06 { border: .2em solid currentcolor; border-radius: 50%; -webkit-animation: loader-06 1s ease-out infinite; animation: loader-06 1s ease-out infinite; } @-webkit-keyframes loader-06 { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes loader-06 { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } .loader-07 { border: 0 solid transparent; border-radius: 50%; position: relative; } .loader-07:before, .loader-07:after { content: ''; border: .2em solid currentcolor; border-radius: 50%; width: inherit; height: inherit; position: absolute; top: 0; left: 0; -webkit-animation: loader-07 1s linear infinite; animation: loader-07 1s linear infinite; opacity: 0; } .loader-07:before { -webkit-animation-delay: 1s; animation-delay: 1s; } .loader-07:after { -webkit-animation-delay: .5s; animation-delay: .5s; } @-webkit-keyframes loader-07 { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes loader-07 { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } .loader-08 { position: relative; } .loader-08:before, .loader-08:after { content: ''; width: inherit; height: inherit; border-radius: 50%; background-color: currentcolor; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: loader-08 2.0s infinite ease-in-out; animation: loader-08 2.0s infinite ease-in-out; } .loader-08:after { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes loader-08 { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes loader-08 { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } .loader-09 { background-color: currentcolor; border-radius: 50%; -webkit-animation: loader-09 1.0s infinite ease-in-out; animation: loader-09 1.0s infinite ease-in-out; } @-webkit-keyframes loader-09 { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes loader-09 { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } .loader-10 { position: relative; -webkit-animation: loader-10-1 2.0s infinite linear; animation: loader-10-1 2.0s infinite linear; } .loader-10:before, .loader-10:after { content: ''; width: 0; height: 0; border: .5em solid currentcolor; display: block; position: absolute; border-radius: 100%; -webkit-animation: loader-10-2 2s infinite ease-in-out; animation: loader-10-2 2s infinite ease-in-out; } .loader-10:before { top: 0; left: 50%; } .loader-10:after { bottom: 0; right: 50%; -webkit-animation-delay: -1s; animation-delay: -1s; } @-webkit-keyframes loader-10-1 { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-10-1 { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes loader-10-2 { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes loader-10-2 { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } .loader-11 { background-color: currentcolor; -webkit-animation: loader-11 1.2s infinite ease-in-out; animation: loader-11 1.2s infinite ease-in-out; } @-webkit-keyframes loader-11 { 0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } @keyframes loader-11 { 0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } .loader-12 { position: relative; } .loader-12:before, .loader-12:after { content: ''; display: block; position: absolute; background-color: currentcolor; left: 50%; right: 0; top: 0; bottom: 50%; box-shadow: -.5em 0 0 currentcolor; -webkit-animation: loader-12 1s linear infinite; animation: loader-12 1s linear infinite; } .loader-12:after { top: 50%; bottom: 0; -webkit-animation-delay: .25s; animation-delay: .25s; } @-webkit-keyframes loader-12 { 0%, 100% { box-shadow: -.5em 0 0 transparent; background-color: currentcolor; } 50% { box-shadow: -.5em 0 0 currentcolor; background-color: transparent; } } @keyframes loader-12 { 0%, 100% { box-shadow: -.5em 0 0 transparent; background-color: currentcolor; } 50% { box-shadow: -.5em 0 0 currentcolor; background-color: transparent; } } .loader-13:before, .loader-13:after, .loader-13 { border-radius: 50%; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation: loader-13 1.8s infinite ease-in-out; animation: loader-13 1.8s infinite ease-in-out; } .loader-13 { color: currentcolor; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; top: -1em; } .loader-13:before { right: 100%; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .loader-13:after { left: 100%; } .loader-13:before, .loader-13:after { content: ''; display: block; position: absolute; top: 0; width: inherit; height: inherit; } @-webkit-keyframes loader-13 { 0%, 80%, 100% { box-shadow: 0 1em 0 -1em; } 40% { box-shadow: 0 1em 0 -.2em; } } @keyframes loader-13 { 0%, 80%, 100% { box-shadow: 0 1em 0 -1em; } 40% { box-shadow: 0 1em 0 -.2em; } } .loader-14 { border-radius: 50%; box-shadow: 0 1em 0 -.2em currentcolor; position: relative; -webkit-animation: loader-14 0.8s ease-in-out alternate infinite; animation: loader-14 0.8s ease-in-out alternate infinite; -webkit-animation-delay: 0.32s; animation-delay: 0.32s; top: -1em; } .loader-14:after, .loader-14:before { content: ''; position: absolute; width: inherit; height: inherit; border-radius: inherit; box-shadow: inherit; -webkit-animation: inherit; animation: inherit; } .loader-14:before { left: -1em; -webkit-animation-delay: 0.48s; animation-delay: 0.48s; } .loader-14:after { right: -1em; -webkit-animation-delay: 0.16s; animation-delay: 0.16s; } @-webkit-keyframes loader-14 { 0% { box-shadow: 0 2em 0 -.2em currentcolor; } 100% { box-shadow: 0 1em 0 -.2em currentcolor; } } @keyframes loader-14 { 0% { box-shadow: 0 2em 0 -.2em currentcolor; } 100% { box-shadow: 0 1em 0 -.2em currentcolor; } } .loader-15 { background: currentcolor; position: relative; -webkit-animation: loader-15 1s ease-in-out infinite; animation: loader-15 1s ease-in-out infinite; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; width: .25em; height: .5em; } .loader-15:after, .loader-15:before { content: ''; position: absolute; width: inherit; height: inherit; background: inherit; -webkit-animation: inherit; animation: inherit; } .loader-15:before { right: .5em; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .loader-15:after { left: .5em; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } @-webkit-keyframes loader-15 { 0%, 100% { box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor; } 50% { box-shadow: 0 -.25em 0 currentcolor, 0 .25em 0 currentcolor; } } @keyframes loader-15 { 0%, 100% { box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor; } 50% { box-shadow: 0 -.25em 0 currentcolor, 0 .25em 0 currentcolor; } } .loader-16 { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); -webkit-perspective: 1000px; perspective: 1000px; border-radius: 50%; } .loader-16:before, .loader-16:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: inherit; height: inherit; border-radius: 50%; -webkit-animation: 1s spin linear infinite; animation: 1s spin linear infinite; } .loader-16:before { -webkit-transform: rotateX(70deg); transform: rotateX(70deg); } .loader-16:after { -webkit-transform: rotateY(70deg); transform: rotateY(70deg); -webkit-animation-delay: .4s; animation-delay: .4s; } @-webkit-keyframes rotate { 0% { -webkit-transform: translate(-50%, -50%) rotateZ(0deg); transform: translate(-50%, -50%) rotateZ(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotateZ(360deg); transform: translate(-50%, -50%) rotateZ(360deg); } } @keyframes rotate { 0% { -webkit-transform: translate(-50%, -50%) rotateZ(0deg); transform: translate(-50%, -50%) rotateZ(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotateZ(360deg); transform: translate(-50%, -50%) rotateZ(360deg); } } @-webkit-keyframes rotateccw { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(-360deg); transform: translate(-50%, -50%) rotate(-360deg); } } @keyframes rotateccw { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(-360deg); transform: translate(-50%, -50%) rotate(-360deg); } } @-webkit-keyframes spin { 0%, 100% { box-shadow: .2em 0px 0 0px currentcolor; } 12% { box-shadow: .2em .2em 0 0 currentcolor; } 25% { box-shadow: 0 .2em 0 0px currentcolor; } 37% { box-shadow: -.2em .2em 0 0 currentcolor; } 50% { box-shadow: -.2em 0 0 0 currentcolor; } 62% { box-shadow: -.2em -.2em 0 0 currentcolor; } 75% { box-shadow: 0px -.2em 0 0 currentcolor; } 87% { box-shadow: .2em -.2em 0 0 currentcolor; } } @keyframes spin { 0%, 100% { box-shadow: .2em 0px 0 0px currentcolor; } 12% { box-shadow: .2em .2em 0 0 currentcolor; } 25% { box-shadow: 0 .2em 0 0px currentcolor; } 37% { box-shadow: -.2em .2em 0 0 currentcolor; } 50% { box-shadow: -.2em 0 0 0 currentcolor; } 62% { box-shadow: -.2em -.2em 0 0 currentcolor; } 75% { box-shadow: 0px -.2em 0 0 currentcolor; } 87% { box-shadow: .2em -.2em 0 0 currentcolor; } } .loader-17 { position: relative; background-color: currentcolor; border-radius: 50%; } .loader-17:after, .loader-17:before { content: ""; position: absolute; width: .25em; height: .25em; border-radius: 50%; opacity: .8; } .loader-17:after { left: -.5em; top: -.25em; background-color: currentcolor; -webkit-transform-origin: .75em 1em; transform-origin: .75em 1em; -webkit-animation: loader-17 1s linear infinite; animation: loader-17 1s linear infinite; opacity: .6; } .loader-17:before { left: -1.25em; top: -.75em; background-color: currentcolor; -webkit-transform-origin: 1.5em 1em; transform-origin: 1.5em 1em; -webkit-animation: loader-17 2s linear infinite; animation: loader-17 2s linear infinite; } @-webkit-keyframes loader-17 { 0% { -webkit-transform: rotateZ(0deg) translate3d(0, 0, 0); transform: rotateZ(0deg) translate3d(0, 0, 0); } 100% { -webkit-transform: rotateZ(360deg) translate3d(0, 0, 0); transform: rotateZ(360deg) translate3d(0, 0, 0); } } @keyframes loader-17 { 0% { -webkit-transform: rotateZ(0deg) translate3d(0, 0, 0); transform: rotateZ(0deg) translate3d(0, 0, 0); } 100% { -webkit-transform: rotateZ(360deg) translate3d(0, 0, 0); transform: rotateZ(360deg) translate3d(0, 0, 0); } } .loader-18 { position: relative; } .loader-18:before, .loader-18:after { content: ''; display: block; position: absolute; border-radius: 50%; border: .1em solid transparent; border-bottom-color: currentcolor; top: 0; left: 0; -webkit-animation: 1s loader-18 linear infinite; animation: 1s loader-18 linear infinite; } .loader-18:before { width: 1em; height: 1em; } .loader-18:after { width: .8em; height: .8em; top: .1em; left: .1em; -webkit-animation-direction: reverse; animation-direction: reverse; } @-webkit-keyframes loader-18 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-18 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .loader-19 { border-top: .2em solid currentcolor; border-right: .2em solid transparent; -webkit-animation: loader-19 1s linear infinite; animation: loader-19 1s linear infinite; border-radius: 100%; position: relative; } @-webkit-keyframes loader-19 { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-19 { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* 加载中样式 end */