Mina/pages/clock/clock.wxss

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

.video {
  width: 710rpx;
  height: 268rpx;
  margin: 20rpx;
}

.no-pass,
.no-authentication {
  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: 690rpx;
  height: 840rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.06);
  border-radius: 32rpx;
  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: 10rpx;
  border: 2rpx solid rgba(0, 122, 255, 1);
  margin-top: 88rpx;
}

.pass {
  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;
}

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

.pass-header-content {
  width: 70%;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  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;
}

.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: 32rpx;
  margin-top: 20rpx;
}

.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;
  height: 748rpx;
  background: #FFFFFF;
  box-shadow: 0px 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.06);
  border-radius: 32rpx;
  margin-top: 20rpx;
  padding: 30rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.status {
  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;
  border-radius: 10rpx;
  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;
  margin-bottom: 100rpx;
}

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

.image image {
  height: 100%;
  width: 100%;
}

.clock-status {
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  margin-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;
  margin-top: 40rpx;
}

.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: 164rpx;
}

.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;
}

.height {
  height: 894rpx;
}

.video {
  height: 268rpx;
  width: 710rpx;
  margin: 0 auto;
}