.indexPage{ position: relative; z-index: 1; background: #F5F5F5; min-height: calc(100vh - 52px); .item-content__info-title{ font-size: 28px; color: #9BA0AA; } .item-extra__info{ font-size: 28px; color: #9BA0AA; } .at-list__item::after{ border-bottom: 0; } .at-list::after{ border-top: 0; } .indexPage .at-list::after{ border: 0; } .searchContent{ position: relative; background: white; .searchTop{ z-index: 1000; } .searchBottom{ display: flex; align-items: center; justify-content: space-between; background: #FFFFFF; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 10px 0 10px 0; .searchBottomBack{ position: fixed; z-index: -1; left: 0; right: 0; bottom: 0; top: 100px; background: rgba(0,0,0,.7); } .searchItem{ position: relative; font-size: 25px; color: #FFFFFF; .shortValuecontent{ position: relative; display: flex; align-items: center; width: 155px; background: #6190E8; border-radius: 100px; padding: 10px 0; margin-right: 5px; .selectValue{ width: 110px; padding-left: 15px; white-space: nowrap; } .selectTitle{ padding-left: 15px; white-space: nowrap; width: 110px; } .iconContent{ width: 45px; padding-right: 20px; text-align: right; } } .valuecontent{ position: relative; display: flex; align-items: center; width: 190px; background: #6190E8; border-radius: 100px; padding: 10px 0; margin-right: 5px; .selectValue{ padding-left: 15px; width: 145px; white-space: nowrap; } .selectTitle{ padding-left: 15px; white-space: nowrap; width: 145px; } .iconContent{ width: 45px; padding-right: 20px; text-align: right; } } .searchSelectContent{ position: absolute; right: 0; top: 0; bottom: 0; z-index: 1; width: 45px; padding-right: 20px; text-align: right; display: flex; justify-content: flex-end; align-items: center; padding-bottom: 3px; } .closeIcon{ background: #F00; width: 60px; height: 46px; display: flex; padding-left: 20px; align-items: center; } } } .searchBottomLOL{ position: fixed; z-index: 1000; top:0; left: 0; right: 0; box-shadow: 0px 6px 27px 16px #8e8d8d; background: #FFFFFF; } } .list{ padding: 20px 23px 52px 23px; .item{ border-radius: 6px; padding: 31px; background: #FFFFFF; display: flex; flex-flow: row nowrap; margin-bottom: 17px; position: relative; overflow: hidden; .revoke{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.7); z-index: 999; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; .revokeImg{ width: 250px; height: 250px; } } .infor{ width: 100%; position: relative; .title{ display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding-bottom: 20px; .aname{ flex: 1; padding-right: 20px; font-weight: bolder; display: flex; flex-direction: row; align-items: center; .aIcon{ background: #1E90FF; color: white; padding: 5px 8px; border-radius: 4px; margin-left: 10px; font-size: 25px; } } .createTimes{ font-size: 20px; color: #999999; white-space: nowrap; } } .userName{ font-size: 25px; color: #999999; padding-bottom: 15px; } .releaseStarts{ font-size: 25px; color: #999999; padding-bottom: 15px; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; position: relative; .punchClock{ position: absolute; border-bottom-left-radius: 100px; border-top-left-radius: 100px; padding: 20px 30px; background: #f1662f; color: white; display: flex; justify-content: center; align-items: center; right: -31px; top: -10px; } } .releaseEnds{ font-size: 25px; color: #999999; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; padding-bottom: 25px; } .bottomContent{ display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; .status{ font-size: 28px; } .clockIn{ padding: 3px 8px; font-size: 28px; border-radius: 6px; } } } } } .skeleton { border-radius: 11px; margin-bottom: 20px; } }