.indexPage{ position: relative; z-index: 1; background: #F5F5F5; min-height: calc(100vh - 52px); .list{ padding: 20px 23px 52px 23px; .item{ border-radius: 6px; padding: 31px; background: #FFFFFF; display: flex; flex-flow: row nowrap; margin-bottom: 17px; .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; } .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; } }