Mina/pages/clock/clock.wxss

/* pages/clock/clock.wxss */
page {
  height: 100%;
  background: rgba(245, 245, 245, 1);
  font-family: PingFangSC-Regular, PingFang SC;
  /* padding-bottom: 20rpx; */
}

.container {
  height: 100%;
}

.video {
  width: 710rpx;
  height: 248rpx;
  margin: 20rpx;
  /* box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.06); */
}

.no-pass,
.no-authentication {
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.header {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.no-pass-bg,
.no-authentication-bg {
  width: 100%;
}

.no-pass-content,
.no-authentication-content {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  /* box-shadow: 0px 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.06); */
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* margin-top: 70rpx; */
}

.no-passs-img,
.no-authentication-img {
  height: 269rpx;
  width: 360rpx;
}

.no-pass-content-text,
.no-authentication-content-text {
  margin-top: 57rpx;
}

.no-pass-content-text view:first-child,
.no-authentication-content-text view:first-child {
  text-align: center;
  font-size: 42rpx;
  color: #000;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
}

.no-pass-content-text view:last-child,
.no-authentication-content-text view:last-child {
  text-align: center;
  font-size: 24rpx;
  color: #666;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  margin-top: 20rpx;
}

.no-pass-content-button,
.no-authentication-content-button {
  width: 560rpx;
  height: 88rpx;
  color: #fff;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  line-height: 88rpx;
  text-align: center;
  background: rgba(0, 122, 255, 1);
  border-radius: 16rpx;
  border: 2rpx solid rgba(0, 122, 255, 1);
  margin-top: 88rpx;
}

.pass {
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.pass-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}

.pass-header-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -1;
}

.pass-header-content-left {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.userinfo {
  height: 100%;
  font-size: 36rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar {
  width: 102rpx;
  height: 102rpx;
  border-radius: 50%;
  position: relative;
}

.avatarUrl {
  width: 102rpx;
  height: 102rpx;
  border-radius: 50%;
}

.avatar-icon {
  width: 32rpx;
  height: 32rpx;
  position: absolute;
  right: -4rpx;
  bottom: -4rpx;
}

.userinfo-status {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  margin-left: 30rpx;
}

.approveStatus {
  font-size: 26rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #007AFF;
}

.pass-header-content-right {
  height: 100%;
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  display: flex;
  align-items: center;
}

.pass-header-content-right image {
  width: 18rpx;
  height: 30rpx;
  margin-left: 15rpx;
}

.pass-header-content {
  width: 690rpx;
  height: 176rpx;
  background: #FFFFFF;
  padding: 0 30rpx;
  box-sizing: border-box;
  border-radius: 16px;
  font-weight: 400;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* margin-top: 100rpx; */
}

.number {
  font-size: 68rpx;
  font-family: DINCondensed-Bold, DINCondensed;
  font-weight: bold;
  color: #FFFFFF;
}

.unit {
  font-size: 28rpx;
  margin-left: 10rpx;
}

.pass-header-message {
  font-size: 22rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 20rpx;
}

.pass-header-footer {
  width: 690rpx;
  height: 164rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #FFFFFF;
  /* box-shadow: 0px 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.06); */
  border-radius: 16rpx;
  margin-top: 60rpx;
}

.pass-header-footer-view {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.pass-header-footer-view image {
  width: 48rpx;
  height: 52rpx;
}

.pass-header-footer-view text {
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  margin-top: 16rpx;
}

.pass-content {
  width: 690rpx;
  flex: 1;
  background: #fff;
  /* box-shadow: 0px 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.06); */
  border-radius: 16rpx;
  margin-top: 20rpx;
  padding: 30rpx 27rpx;
  margin-bottom: 20rpx;
  box-sizing: border-box;
  position: relative;
}

.status {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.clock-in,
.clock-out {
  width: 310rpx;
  height: 98rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  background: #F5F5F5;
  box-sizing: border-box;
  padding-left: 30rpx;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.clock-time {
  display: flex;
  align-items: center;
}

.clock-time image {
  width: 22rpx;
  height: 22rpx;
  margin-right: 10rpx;
}

.status-text {
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}

.rule-messgae {
  width: 100%;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  margin-top: 20rpx;
  padding-bottom: 100rpx;
}

.image {
  height: 260rpx;
  width: 260rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.image image {
  height: 260rpx;
  width: 260rpx;
}

.clock-status {
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  padding-top: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clock-status image {
  height: 30rpx;
  width: 30rpx;
  margin-right: 12rpx;
}

.reload-location {
  font-size: 26rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #007AFF;
  padding-top: 40rpx;
  padding-bottom: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reload-location image {
  height: 24rpx;
  width: 24rpx;
  margin-right: 15rpx;
}

.prepayable {
  width: 100%;
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 151rpx;
  padding-bottom: 40rpx;
}

.prepayable-number {
  font-size: 58rpx;
  font-family: DINCondensed-Bold, DINCondensed;
  font-weight: bold;
  color: #0177FF;
}

.prepayable-unit {
  font-family: PingFangSC-Semibold, PingFang SC;
  margin-left: 8rpx;
}

.cover {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cover-kefu {
  width: 600rpx;
  height: 504rpx;
  background: #FFFFFF;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.cover-kefu-title {
  font-size: 34rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
}

.cover-kefu-number {
  font-size: 48rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-top: 30rpx;
  margin-bottom: 20rpx;
}

.cover-kefu-tips {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
}

.cover-kefu-button {
  width: 392rpx;
  height: 88rpx;
  font-size: 34rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  background: #007AFF;
  border-radius: 16rpx;
  margin-top: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cover-kefu-button image {
  width: 36rpx;
  height: 35rpx;
  margin-right: 20rpx;
}

.settingVisible {
  color: #000;
  font-size: 34rpx;
  font-weight: 600;
}

.kefu {
  width: 120rpx;
  height: 120rpx;
  position: absolute;
  right: -14rpx;
  bottom: 26rpx;
}