/*.products_list, .main_wrapper_one {
    padding-bottom: 160rpx;
}*/

page {
  background-color: #f8f8f8;
}

.tabs {
  display: flex;
  align-items: center;
  height: 110rpx;
  background: #fff;
  font-size: 30rpx;
  font-weight: 400;
  color: #666;
  padding: 0 32rpx;
  position: sticky;
  top: 174rpx;
  z-index: 9;
}

.tab {
  margin-right: 72rpx;
}

.tab_active {
  position: relative;
  font-size: 36rpx;
  font-weight: 800;
  color: #000;
}

.tabs .tab_active::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -12rpx;
  content: "";
  width: 80rpx;
  height: 4rpx;
  background: linear-gradient(-90deg, #ffe9c7, #eecda1);
  border-radius: 2rpx;
}

.main {
  width: 100%;
  background: #f8f8f8;
  min-height: calc(100vh - 244rpx - env(safe-area-inset-bottom));
  text-align: center;
}
.main_wrapper_one {
  min-height: calc(100vh - 244rpx - env(safe-area-inset-bottom));
  /* height:calc(100vh - 156px - env(safe-area-inset-bottom)) */
  height: calc(100vh - 156px - calc(env(safe-area-inset-bottom)));
  padding-bottom: calc(env(safe-area-inset-bottom));
}
.main_wrapper_two {
  min-height: calc(100vh - 110rpx - env(safe-area-inset-bottom));
  height: calc(100vh - 32px - env(safe-area-inset-bottom));
}
.m-x-30 {
  margin: 0 30rpx;
}

.instrument_list {
  padding-bottom: 200rpx;
}

.products_list {
  width: 100%;
  height: 80rpx;
  white-space: nowrap;
  background: #f8f8f8;
  padding-top: 25rpx;
  padding-bottom: 29rpx;
  position: sticky;
  top: 286rpx;
  z-index: 9;
}

.all {
  display: inline-block;
  width: 120rpx;
  height: 70rpx;
  background: #eaeaea;
  border-radius: 35rpx;
  text-align: center;
  line-height: 70rpx;
  margin-left: 30rpx;
  color: #000000;
  font-size: 26rpx;
  font-weight: 400;
}

.products_item {
  position: relative;
  display: inline-block;
  height: 70rpx;
  line-height: 70rpx;
  background: #eaeaea;
  border-radius: 35rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: #000;
  padding-right: 23rpx;
  padding-left: 82rpx;
  margin-left: 40rpx;
}

.products_item_active {
  background: linear-gradient(90deg, #efdcc2, #fff2df);
}

.products_item:last-child {
  margin-right: 30rpx;
}

.products_cover {
  position: absolute;
  z-index: 2;
  left: -17rpx;
  top: -5rpx;
  width: 80rpx;
  height: 80rpx;
  background: #fff;
  border-radius: 50%;
  object-fit: cover;
}

.statistic {
  position: relative;
  display: flex;
  align-items: center;
  /*height: 200rpx;*/
  background: #fff;
  border-radius: 30rpx;
}

/*.statistic::after {*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*    content: '';*/
/*    width: 1rpx;*/
/*    height: 90rpx;*/
/*    background: #DDDDDD;*/
/*}*/

.statistic_item {
  flex: 1;
  text-align: center;
}

.border {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1rpx;
  height: 90rpx;
  background: #dddddd;
}

.statistic_num {
  font-size: 48rpx;
  font-weight: 600;
  color: #000;
  margin-bottom: 26rpx;
}

.statistic_desc {
  font-size: 26rpx;
  font-weight: 400;
  color: #999;
}

// .instrument_item {
//   margin-top: 20rpx;
//   background: #ffffff;
//   border-radius: 30rpx;
//   padding: 46rpx 36rpx;
//   margin: 0 auto 20rpx;
//   width: 690rpx;
//   height: 290rpx;
//   box-sizing: border-box;
//   padding: 41rpx 33rpx;
// }

// .time {
//   font-size: 28rpx;
//   font-weight: bold;
//   color: #000;
//   margin-right: 23rpx;
// }

// .tag {
//   width: 90rpx;
//   height: 36rpx;
//   line-height: 36rpx;
//   background: #e5f9ee;
//   border-radius: 18rpx;
//   font-size: 24rpx;
//   font-weight: 400;
//   color: #57bc81;
//   text-align: center;
// }

.tag_active {
  background: #f8f8f8;
  color: #999;
}

// .report_btn {
//   font-size: 26rpx;
//   font-weight: 400;
//   color: #666;
//   align-items: baseline;
// }

// .arrow_icon {
//   width: 10rpx;
//   height: 20rpx;
//   margin-left: 14rpx;
// }

// .instrument_middle {
//   margin-top: 40rpx;
//   text-align: left;
// }

// .instrument_cover {
//   width: 140rpx;
//   height: 140rpx;
//   border-radius: 20rpx;
//   margin-right: 37rpx;
// }

// .instrument_content {
//   display: flex;
//   flex-direction: column;
//   flex: 1;
// }

// .instrument_title {
//   font-size: 28rpx;
//   font-weight: bold;
//   color: #000;
//   padding-top: 3rpx;
// }

// .instrument_desc_box {
//   margin-top: 25rpx;
//   min-height: 73rpx;
// }

// .instrument_desc {
//   font-size: 24rpx;
//   font-weight: 400;
//   color: #999;
// }

.instrument_bottom {
  position: relative;
  margin-top: 28rpx;
  background: #f8f8f8;
  border-radius: 20rpx;
  padding: 23rpx 0 23rpx;
}

.place_item {
  flex: 1;
  border-right: 1rpx solid #dddd;
}

.place_item:last-child {
  border: none;
}

.place {
  font-size: 24rpx;
  font-weight: 400;
  color: #666;
  margin-bottom: 15rpx;
}

.duration {
  font-size: 20rpx;
  font-weight: 400;
  color: #000;
}

.plan_list {
  position: relative;
  padding-bottom: 40rpx;
}

.plan_reward {
  margin-bottom: 10rpx;
}

.plan_progress_bg {
  width: 200rpx;
  height: 14rpx;
  background: #f8f8f8;
  margin-right: 30rpx;
  border-radius: 20rpx;
  overflow: hidden;
}

.plan_progress_bar {
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, #efdcc2, #fff2df);
}

.plan_middle {
  text-align: left;
}

.border-p-t {
  border-top: 1rpx solid #f8f8f8;
  padding-top: 30rpx;
}

.arrow {
  position: absolute;
  bottom: 40rpx;
  left: 50%;
  display: block;
  width: 40rpx;
  height: 40rpx;
  transition: 0.5s;
  margin-left: -20rpx;
}

.clock_in_statistics {
  background: #fff;
  border-radius: 30rpx;
  /*margin-top: 30rpx;*/
  height: 383rpx;
  padding: 46rpx 36rpx;
  flex-direction: column;
}

.clock_in_statistics_title {
  height: 31rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #000;
}

.clock_in_statistics_date {
  height: 21rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: #666;
}

.chart {
  margin-top: 44rpx;
  height: 100%;
  align-items: flex-end;
}

.column {
  width: 13rpx;
  height: 186rpx;
  background: linear-gradient(0deg, #efdcc2, #fff2df);
  border-radius: 7rpx;
}

.buoy {
  font-size: 20rpx;
  font-weight: 400;
  color: #000;
  margin-bottom: 16rpx;
}

.month {
  font-size: 20rpx;
  font-weight: 400;
  color: #999;
  margin-top: 12rpx;
}

.month_box {
  padding-bottom: 200rpx;
}

.month_statistics {
  background: #fff;
  border-radius: 30rpx;
  margin: 30rpx auto;
  padding: 46rpx 36rpx;
}

.more_icon {
  display: inline-block;
  width: 24rpx;
  height: 24rpx;
  margin-left: 10rpx;
}

.more_text {
  font-size: 26rpx;
  font-weight: 400;
  color: #666;
}

.month_item {
  border-top: 1rpx solid #dddddd;
  padding: 37rpx 0;
  text-align: left;
}

.month_item_cover {
  display: inline-block;
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
}

.month_item_date {
  font-size: 28rpx;
  font-weight: bold;
  color: #000;
}

.month_item_note {
  font-size: 24rpx;
  font-weight: 400;
  color: #999;
  margin-top: 31rpx;
}

.month_image_box {
  margin: 48rpx 0 50rpx;
  justify-content: start;
}
.month_image_box image {
  margin-right: 10rpx;
}
.month_image_box image:last-child {
  margin-right: 0;
}

.clock_button_wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 153rpx;
  background-color: #fff;
  box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173, 191, 207, 0.21);
}

.clock_button {
  width: 690rpx;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 32rpx;
  color: #fff;
  text-align: center;
  font-weight: 400;
  background: #000000;
  border-radius: 45rpx;
}

.footer {
  position: fixed;
  z-index: 99;
  bottom: 0;
  width: 100%;
  height: 153rpx;
  box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173, 191, 207, 0.21);
  background: #ffffff;
  padding-right: 42rpx;
  justify-content: center;
}

.btn {
  width: 540rpx;
  height: 90rpx;
  background: #000000;
  border-radius: 45rpx;
  color: #fff;
  text-align: center;
  line-height: 90rpx;
  font-weight: bold;
  font-size: 32rpx;
}

.text {
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #000000;
  margin-left:48rpx;
}
// .empty {
//   display: flex;
//   flex-direction: column;
//   justify-content: center;
//   align-items: center;
//   width: 100vw;
//   height: 60vh;
//   .empty-img {
//     display: block;
//     width: 160rpx;
//     height: 160rpx;
//   }
//   .empty-text {
//     font-size: 30rpx;
//     color: #666;
//     margin-top: 20rpx;
//   }
// }

.nodata {
  width: 200rpx;
  height: 300rpx;
  margin: 0 auto;
  margin-top: 310rpx;
  text-align: center;
  .nodata_img {
    display: inline-block;
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 34rpx;
  }
  .nodata_text {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #666666;
  }
}

.recording-box {
  box-sizing: border-box;
  width: 690rpx;
  height: 290rpx;
  background-color: #fff;
  padding: 41rpx 33rpx;
  margin: 0 auto 20rpx;
  border-radius: 30rpx;

  .box-top {
    display: flex;
    margin-bottom: 36rpx;
    align-items: center;
    justify-content: space-between;
    .top-left {
      display: flex;
      .date {
        font-size: 28rpx;
        font-weight: bold;
        color: #000000;
      }
      .tip {
        width: 90rpx;
        height: 36rpx;
        background: #e5f9ee;
        border-radius: 18rpx;
        line-height: 36rpx;
        text-align: center;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #57bc81;
        margin-left: 23rpx;
      }
    }
    .top-right {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
      display: flex;
      align-items: center;

      .arrow-icon {
        font-size: 20rpx;
        color: #999;
      }
      .arrow_icon {
        width: 10rpx;
        height: 20rpx;
        margin-left: 14rpx;
      }
    }
  }
  .box-bottom {
    display: flex;
    .recording_img {
      width: 140rpx;
      height: 140rpx;
      margin-right: 38rpx;
    }
    .bottom-right {
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      height: 140rpx;
      .title {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
      }
      .subtitle-box {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        // height: 65rpx;
        .subtitle {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
        }
        .subtitle:last-child {
          margin-top: 10rpx;
        }
      }
    }
  }
}

.van-popup {
  border-radius: 30rpx;
  .popBox {
    box-sizing: border-box;
    width: 670rpx;
    height: 840rpx;
    background: #ffffff;
    border-radius: 30rpx;
    position: relative;
    padding: 42rpx 30rpx 0;
    .close_icon {
      position: absolute;
      width: 50rpx;
      height: 50rpx;
      top: 34rpx;
      right: 34rpx;
    }
    .popTitle {
      font-size: 36rpx;
      text-align: center;
      font-family: PingFang SC;
      font-weight: bold;
    }
    .popSubtitle {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      font-size: 28rpx;
      text-align: center;
      margin-top: 50rpx;
      .bold {
        font-size: 38rpx;
        font-weight: bold;
      }
    }
    .img_box {
      margin: 58rpx 0 37rpx 0;
      display: flex;
      flex-wrap: wrap;

      .img {
        position: relative;
        margin-right: 35rpx;
        width: 180rpx;
        height: 180rpx;
        .closeImg {
          position: absolute;
          top: 10rpx;
          right: 10rpx;
          width: 30rpx;
        }
      }
      .img:last-child {
        margin-right: 0;
      }
      .addBox {
        width: 180rpx;
        height: 180rpx;
        background: #ffffff;
        border: 1px solid #dddddd;
        border-radius: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        Image {
          width: 40rpx;
        }
      }
      .showImg {
        width: 100% !important;
        height: 100% !important;
        border-radius: 20rpx;
      }
      .showImg:last-child{
 width: 40rpx !important;
        height: 40rpx !important;
      }
    }
    .info4 {
      position: relative;
      textarea {
        padding: 28rpx 30rpx;
        width: 610rpx;
        height: 186rpx;
        background: #ffffff;
        border: 1px solid #dddddd;
        border-radius: 3rpx;
        box-sizing: border-box;
      }
      .tip {
        position: absolute;
        right: 20rpx;
        bottom: 22rpx;
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #cccccc;
      }
    }
    .btn1 {
      font-style: normal;
      width: 270rpx;
      height: 90rpx;
      line-height: 90rpx;
      background: #000000;
      text-align: center;
      border-radius: 45rpx;
      font-size: 32rpx;
      font-weight: bold;
      margin-top: 55rpx;
      color: #ffffff;
    }
  }
}