shenze-sysMan/src/styles/alarmClock/index.less

.pageClock {
  background-color: rgba(255, 255, 255, 1);
  // position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;

  .bd1 {
    width: 100%;
    height: 439px;

    .section5 {
      background-color: rgba(255, 255, 255, 1);
      z-index: 91;
      height: 54px;
      margin-top: 1px;
      width: 100%;
      position: relative;

      .layer1 {
        width: 84px;
        height: 20px;
        margin: 17px 0 0 15px;

        .ImageText1 {
          height: 20px;
          width: 84px;

          .layer1 {
            width: 84px;
            height: 20px;
            margin: 0 auto;

            .bd2 {
              width: 20px;
              height: 20px;
              background: url('../../assets/device/add.png');
              background-size: 100%;
            }

            .TextGroup1 {
              height: 20px;
              width: 56px;

              .word2 {
                width: 56px;
                height: 20px;
                overflow-wrap: break-word;
                color: rgba(64, 77, 116, 1);
                font-size: 14px;
                font-family: PingFangSC-Medium;
                text-align: left;
                white-space: nowrap;
                line-height: 20px;
                display: block;
              }
            }
          }
        }
      }

      .img2 {
        z-index: 93;
        position: absolute;
        left: 0;
        top: 53px;
        width: 100%;
        height: 2px;
      }
    }

    .section6 {
      width: 100%;
      padding: 10px 10px;

      .TextGroup2 {
        width: 25%;

        .bd3 {
          .word3 {
            width: auto;
            height: 30px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 22px;
            font-family: PingFangSC-Medium;
            text-align: left;
            white-space: nowrap;
            line-height: 30px;
            display: block;
          }

          .info2 {
            width: auto;
            height: 18px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            // white-space: nowrap;
            line-height: 18px;
            display: block;
            margin: -2px 0 0 2px;
          }
        }
      }

      .TextGroup3 {
        height: 38px;
        width: 40%;

        .main2 {
          width: auto;
          height: 38px;

          .word4 {
            width: auto;
            height: 18px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 18px;
            display: block;
          }

          .txt3 {
            width: auto;
            height: 18px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 13px;
            text-align: left;
            white-space: nowrap;
            line-height: 18px;
            margin-top: 2px;
            display: block;
          }
        }
      }

      .ImageText2 {
        height: 17px;
        width: 15%;
        // margin: 9px 0 0 5px;
        margin-top: 5px;

        .group3 {
          width: 40px;
          height: 17px;

          .group4 {
            width: 13px;
            height: 14px;
            background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngb70cca70325ff31d341004d9ce7ebf2d5f692bbe3bf755d9d44b36aa78c21c77) top center no-repeat;
            background-size: 100%;
            margin-top: 1px;
          }

          .TextGroup4 {
            height: 17px;
            width: 24px;

            .info3 {
              width: 24px;
              height: 17px;
              overflow-wrap: break-word;
              color: rgba(223, 94, 76, 1);
              font-size: 12px;
              text-align: left;
              white-space: nowrap;
              line-height: 17px;
              display: block;
            }
          }
        }
      }

      .bd4 {
        width: 15%;
        height: 36px;
        // margin: 10px 0 0 15px;

        .outer1 {
          width: 40px;
          height: 17px;
          margin-left: 5px;

          .main3 {
            width: 12px;
            height: 12px;
            background: url('../../assets/edit.png') top center no-repeat;
            background-size: 100%;
            margin-top: 1px;
          }

          .word5 {
            width: 24px;
            height: 17px;
            overflow-wrap: break-word;
            color: #4d6add;
            font-size: 12px;
            text-align: left;
            white-space: nowrap;
            line-height: 17px;
            display: block;
          }
        }

        .word6 {
          width: 39px;
          height: 18px;
          overflow-wrap: break-word;
          color: rgba(77, 193, 147, 1);
          font-size: 13px;
          text-align: left;
          white-space: nowrap;
          line-height: 18px;
          display: block;
          margin: 1px 0 0 2px;

          &.close {
            color: rgba(197, 197, 205, 1);
          }
        }
      }
    }
  }
}

.alarmClockSetPage {
  width: 100%;

  .alarmClockSetBox {
    width: 100%;
    height: calc(100% - 44px);
    overflow: auto;
    overflow-x: hidden;

    .equipmentField {
      .van-field__label {
        display: flex;
        align-items: center;
        line-height: 1;

        &::before {
          content: '';
          width: 4px;
          height: 12px;
          margin: 0 4px;
          background-color: #8096ec;
          border-radius: 2px;
          display: inline-block;
        }
      }
    }

    .repeatTimeBox {
      width: 100%;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--van-cell-border-color);
    }

    .dayCon {
      padding: 6px 15px;

      .dayName {
        padding: 6px 10px;
        background-color: rgba(223, 223, 229, 1);
        border-radius: 2px;
        border: 0.5px solid rgba(185, 186, 208, 1);
      }

      .active {
        background-color: #4d6add !important;
        border-color: #4d6add !important;
        color: #fff !important;
      }
    }

    .txt6 {
      width: 112px;
      height: 13px;
      overflow-wrap: break-word;
      color: rgba(64, 77, 116, 1);
      font-size: 14px;
      font-family: PingFangSC-Medium;
      text-align: left;
      white-space: nowrap;
      line-height: 14px;
      display: block;
      margin: 18px 0 15px 15px;
    }

    .outer4 {
      width: 345px;
      height: 38px;
      margin: 20px 0 0 15px;

      .mod3 {
        background-color: rgba(223, 223, 229, 1);
        border-radius: 2px;
        height: 38px;
        border: 0.5px solid rgba(185, 186, 208, 1);
        width: 119px;

        .word2 {
          width: 26px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 13px;
          text-align: left;
          white-space: nowrap;
          line-height: 13px;
          display: block;
          margin: 13px 0 0 47px;
        }
      }

      .Button1 {
        background-color: rgba(223, 223, 229, 1);
        border-radius: 2px;
        height: 38px;
        border: 0.5px solid rgba(185, 186, 208, 1);
        width: 211px;

        .word3 {
          width: 117px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 13px;
          text-align: left;
          white-space: nowrap;
          line-height: 13px;
          display: block;
          margin: 13px 0 0 47px;
        }
      }
    }

    .outer5 {
      width: 345px;
      height: 38px;
      margin: 15px 0 0 15px;

      .bd1 {
        background-color: rgba(223, 223, 229, 1);
        border-radius: 2px;
        height: 38px;
        border: 0.5px solid rgba(185, 186, 208, 1);
        width: 211px;

        .word4 {
          width: 117px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 13px;
          text-align: left;
          white-space: nowrap;
          line-height: 13px;
          display: block;
          margin: 13px 0 0 47px;
        }
      }

      .bd2 {
        background-color: rgba(223, 223, 229, 1);
        border-radius: 2px;
        height: 38px;
        border: 0.5px solid rgba(185, 186, 208, 1);
        width: 119px;

        .word5 {
          width: 39px;
          height: 13px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 13px;
          text-align: left;
          white-space: nowrap;
          line-height: 13px;
          display: block;
          margin: 13px 0 0 40px;
        }
      }
    }

    .ImageText1 {
      height: 18px;
      width: auto;
      margin: 15px 0 0 15px;

      .mod4 {
        width: 109px;

        .TextGroup1 {
          height: 13px;
          margin-top: 2px;
          width: auto;

          .info4 {
            width: auto;
            margin-top: 3px;
            height: 14px;
            overflow-wrap: break-word;
            color: rgba(64, 77, 116, 1);
            font-size: 14px;
            text-align: left;
            white-space: nowrap;
            line-height: 13px;
            display: block;
          }
        }

        .section1 {
          background-color: rgba(223, 223, 229, 1);
          border-radius: 9px;
          height: 18px;
          width: 38px;

          .van-switch {
            width: 38px;
            height: 18px;

            .van-switch__node {
              width: 18px;
              height: 18px;
            }

            &.van-switch--on .van-switch__node {
              transform: translate(calc(38px - 18px));
            }
          }
        }
      }
    }
  }

  .van-checkbox__icon--checked .van-icon {
    background-color: #4d6add;
    border-color: #4d6add;
  }

  .van-switch--on {
    background-color: #4d6add;
  }

  .van-button--primary {
    background-color: #4d6add;
    border-color: #4d6add;
  }

  .van-cascader__option--selected {
    color: #4d6add;
  }

  .van-tabs__line {
    background-color: #4d6add !important;
  }
}