2025-06-19 17:33:18 +08:00

418 lines
9.0 KiB
Plaintext

/**index.wxss**/
.container {
min-height: 100vh;
padding-top: 56px;
box-sizing: border-box;
background: #EFF1F4;
position: relative;
.bg {
width: 100%;
height: 128px;
background: linear-gradient(360deg, #538AFC 0%, #3679FC 100%);
position: absolute;
top: 0;
}
.user-container {
width: calc(100% - 26px);
margin: 0 auto 8px;
padding: 40px 12px 18px;
box-sizing: border-box;
box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.1);
background: #fff;
border-radius: 8px;
position: relative;
.top {
width: calc(100% - 24px);
// margin-top: -32px;
margin-bottom: 14px;
display: flex;
position: absolute;
top: -32px;
.user-pic {
width: 64px;
height: 64px;
margin: 0 8px;
border-radius: 50%;
// border: 2px solid #FFFFFF;
box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
image {
width: 100%;
height: 100%;
display: block;
}
}
.user-inf {
.name {
margin-top: 8px;
color: #fff;
font-size: 15px;
}
.profession {
margin-top: 12px;
color: #333;
font-size: 13px;
}
}
.btn-exit {
width: 20px;
height: 20px;
position: absolute;
top: 6px;
right: 0px;
image {
width: 100%;
height: 100%;
display: block;
}
}
.project-name {
font-size: 14px;
font-weight: bold;
color: #4381FC;
position: absolute;
top: 10px;
right: 16px;
}
}
.attendance-content {
width: 100%;
.search-content, .search-content2{
width: 100%;
margin-bottom: 6px;
display: flex;
justify-content: space-between;
align-items: center;
picker {
width: 48%;
position: relative;
border: 1px solid #E6EAF2;
border-radius: 4px;
.picker {
width: 80%;
height: 36px;
padding-left: 10px;
box-sizing: border-box;
font-size: 14px;
display: flex;
// justify-content: space-between;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.picker::after {
content: '';
width: 0;
height: 0;
border-top: 6px solid #636B83;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-2px);
}
}
}
.search-content2 {
picker {
width: 100%;
.picker {
.select-val {
position: absolute;
right: 34px;
}
}
}
}
}
.location-tips, .location-tips-err {
// height: 28px;
padding: 6px 5px;
margin-bottom: 16px;
box-sizing: border-box;
background: #DFEBFF;
border-radius: 4px;
display: flex;
align-items: center;
image {
width: 16px;
height: 16px;
margin-right: 2px;
display: block;
}
}
.location-tips-err {
background: #FFEEEE;
color: #FA5955;
}
.check-box {
width: 50vw;
height: 50vw;
margin: 0 auto;
position: relative;
image {
width: 100%;
height: 100%;
display: block;
position: absolute;
}
.check-inf {
width: 100%;
height: 100%;
position: absolute;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-flow: column;
.date {
font-size: 14px;
}
.time {
margin: 6px 0;
font-size: 24px;
}
.label {
font-size: 24px;
}
}
}
.clock-record {
margin-top: -6px;
margin-bottom: 16px;
color: #4381FC;
font-size: 14px;
font-weight: bold;
text-align: center;
}
}
.maintain-container {
width: calc(100% - 26px);
margin: 0 auto 8px;
padding: 6px 12px;
box-sizing: border-box;
box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.1);
background: #fff;
border-radius: 8px;
.top {
margin-bottom: 8px;
color: #2E3A4F;
display: flex;
justify-content: space-between;
align-items: center;
.left {
display: flex;
align-items: center;
.icon {
width: 18px;
height: 18px;
margin-right: 4px;
border-radius: 50%;
background: #E2EAFB;
}
.val {
font-size: 14px;
font-weight: bold;
}
}
.right {
.icon {
}
.val {
font-size: 14px;
font-weight: bold;
color: #4381FC;
}
}
}
>.content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
>.btn {
width: calc((100% - 10px) / 2);
height: 64px;
line-height: 64px;
background: linear-gradient(180deg, #3772F6 0%, #5AAEF7 100%);
border-radius: 8px;
color: #fff;
font-size: 14px;
font-weight: bold;
text-align: center;
position: relative;
overflow: hidden;
.bg {
width: 100%;
height: 100%;
position: absolute;
image {
width: 100%;
height: 100%;
}
}
.val {
position: relative;
}
}
.record {
background: linear-gradient(180deg, #3BBA95 0%, #67D7B0 100%);
}
.btn-report {
width: calc(100%);
height: 36px;
margin: 8px 0;
background: #EDF4FE;
border-radius: 8px;
border: 1px solid #C4DAFA;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
image {
width: 28px;
height: 28px;
display: block;
}
.val {
margin-left: 12px;
color: #2E3A4F;
font-size: 14px;
font-weight: bold;
}
}
}
}
}
.workbench-container {
width: calc(100% - 26px);
margin: 0 auto 8px;
padding: 6px 12px;
box-sizing: border-box;
box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.1);
background: #fff;
border-radius: 8px;
.top {
margin-bottom: 8px;
color: #2E3A4F;
display: flex;
justify-content: space-between;
align-items: center;
.left {
display: flex;
align-items: center;
.icon {
width: 18px;
height: 18px;
margin-right: 4px;
border-radius: 50%;
background: #E2EAFB;
overflow: hidden;
image {
width: 100%;
height: 100%;
display: block;
}
}
.val {
font-size: 14px;
font-weight: bold;
}
}
.right {
display: flex;
align-items: center;
.icon {
width: 16px;
height: 16px;
margin-right: 4px;
border-radius: 4px;
overflow: hidden;
image {
width: 100%;
height: 100%;
display: block;
}
}
.val {
font-size: 14px;
font-weight: bold;
color: #4381FC;
}
}
}
.content {
display: flex;
justify-content: space-between;
align-items: center;
>.btn {
width: calc((100% - 10px) / 2);
height: 64px;
line-height: 64px;
// background: linear-gradient(180deg, #3772F6 0%, #5AAEF7 100%);
border-radius: 8px;
color: #fff;
font-size: 14px;
font-weight: bold;
text-align: center;
position: relative;
.bg {
width: 100%;
height: 100%;
position: absolute;
image {
width: 100%;
height: 100%;
}
}
.val {
position: relative;
}
}
.record {
background: linear-gradient(180deg, #3BBA95 0%, #67D7B0 100%);
}
.UpkeepBill {
width: calc((100% - 12px) / 3);
.val {
margin-right: 4px;
text-align: right;
}
}
}
.workbench-list {
display: flex;
// justify-content: space-between;
flex-wrap: wrap;
>.btn {
width: calc(100% / 4);
// width: 56px;
// height: 62px;
margin-bottom: 18px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
.pic {
width: 36px;
height: 36px;
margin-bottom: 8px;
// background: #000;
image {
width: 100%;
height: 100%;
}
}
.title {
font-size: 14px;
font-weight: 400;
color: #2E3A4F;
white-space: nowrap;
}
}
}
}