.punchClock { position: relative; background: #F5F5F5; min-height: calc(100vh - 50px); padding: 25px; .header { background: #FFFFFF; padding: 30px; border-radius: 30px; margin-bottom: 20px; .skeleton { padding: 0; } .headerContent { display: flex; flex-flow: row nowrap; align-items: center; } .userAvatarUrl { width: 100px; height: 100px; border-radius: 20px; overflow: hidden; } .infor { padding-left: 15px; .name { font-size: 28px; padding-bottom: 15px; } .address { font-size: 25px; color: #8e8d8d; display: flex; align-items: flex-start; .nickname { width: 270px; color: #4564DC; } } .types { font-size: 28px; margin-top: 10px; font-weight: bold; } } .state { margin-left: auto; font-size: 25px; align-self: flex-start; } .switchContent { display: flex; align-items: center; align-content: center; border-radius: 30px; border: 1px #999999 solid; padding: 11px 10px; margin-top: 28px; .switchTitle { font-size: 18px; color: #999999; padding-right: 10px; } .switchItem { width: 25px; height: 25px; } } } .content { background: #FFFFFF; padding: 30px; border-radius: 30px; margin-bottom: 20px; display: flex; flex-flow: column nowrap; align-items: center; position: relative; .history { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; font-size: 30px; width: 100%; } .noData { display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; width: 100%; margin-top: -20px; padding-bottom: 225px; .tipsNoData { font-size: 28px; color: #969696; padding-bottom: 20px; } .goOut { font-size: 28px; color: #007aff; } } .timeContent { width: 100%; padding-top: 20px; display: flex; flex-flow: row nowrap; justify-content: space-between; padding-bottom: 30px; .timeItem { background: #eae8e8; padding: 20px; border-radius: 20px; .timeTitle { font-size: 30px; padding-bottom: 8px; } .timeValue { font-size: 27px; color: #767272; } } } .map { position: relative; height: 600px; width: 100%; border-radius: 20px; overflow: hidden; #map { height: 600px; width: 100% } } .tips { color: #999999; font-size: 18px; padding-top: 10px; align-self: flex-start; } .photographUnusual { width: 100px; height: 100px; box-shadow: 1px 1px 15px 1px red; background: red; border-radius: 50px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; position: absolute; right: 30px; top: 300px; } .punchClockContent { width: 250px; height: 250px; border-radius: 250px; margin-top: 45px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; margin-bottom: 75px; .punchClockTitle { color: white; font-size: 35px; padding-bottom: 8px; } .punchClockTime { color: #e8e6e6; font-size: 25px; padding-bottom: 8px; } .refreshClock { color: #f5f6f8; font-size: 25px; } } .photographContent { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; width: 100%; padding-left: 20px; padding-right: 20px; padding-bottom: 25px; .photographTitle { font-size: 30px; .tips { font-size: 18px; color: #999999; } } .photograph {} } } .locationContent { position: absolute; display: flex; flex-flow: column nowrap; padding: 35px; z-index: 999; .location { display: inline-block; padding: 15px 15px 10px 15px; background: #FFFFFF; border-radius: 150px; margin-bottom: 30px; .locationIcon { width: 50px; height: 50px; } } .punchRange { display: inline-block; padding: 15px 15px 10px 15px; background: #FFFFFF; border-radius: 150px; .punchRangeIcon { width: 50px; height: 50px; } } } }