FKJ-HHArome/pages/settings/timeoutDuration/index.acss

.main .timeoutDuration-content {
  display: flex;
  flex-wrap: wrap;
  margin: calc(40vmax / 12.80) calc(100vmax / 12.80);
}

.main .timeoutDuration-content .form-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: left;
  width: 50%;
  font-size: calc(20vmax / 12.80);
  color: #063D8C;
  margin-bottom: calc(10vmax / 12.80);
  line-height: calc(48vmax / 12.80);
  min-height: calc(48vmax / 12.80);
}

.main .timeoutDuration-content .form-box>text {
  width: calc(230vmax / 12.80);
  margin-right: calc(20vmax / 12.80);
  line-height: calc(30vmax / 12.80);
}

.main .timeoutDuration-content .form-box .form-input {
  width: calc(100% - (250vmax / 12.80) - (85vmax / 12.80));
  height: calc(48vmax / 12.80);
  background: #fff;
  /*border-radius: calc(8vmax / 12.80);*/
  font-size: calc(18vmax / 12.80);
  color: #00A2FF;
  padding: 0 calc(20vmax / 12.80);
  box-sizing: border-box;
  border: 0 solid #B8EFF3;
  box-shadow: 0 0 calc(8vmax / 12.80) 0 rgba(115, 218, 228, 1);
}

.main .timeoutDuration-content .form-box .number-input {
  width: calc(140vmax / 12.80) !important;
  text-align: center !important;
}

.main .timeoutDuration-content .form-box .left,
.main .timeoutDuration-content .form-box .right {
  height: calc(48vmax / 12.80);
  width: calc(42vmax / 12.80);
  background-color: #f1fafb;
  color: #78c2f9;
  text-align: center;
  line-height: calc(48vmax / 12.80);
  font-size: calc(17vmax / 12.80);
  font-weight: bold;
  /*border-radius: calc(8vmax / 12.80);*/
}

.main .timeoutDuration-content .form-box .left {
  border-radius: calc(8vmax / 12.80) 0 0 calc(8vmax / 12.80);
  margin-right: calc(4vmax / 12.80);
  font-size: calc(20vmax / 12.80);
}

.main .timeoutDuration-content .form-box .right {
  border-radius: 0 calc(8vmax / 12.80) calc(8vmax / 12.80) 0;
  margin-left: calc(4vmax / 12.80);
}

/* 竖屏样式 */
.portrait-main .timeoutDuration-content {
  display: flex;
  flex-wrap: wrap;
  margin: calc(40vmin / 12.80) calc(100vmin / 12.80);
}

.portrait-main .timeoutDuration-content .form-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: left;
  width: 50%;
  font-size: calc(20vmin / 12.80);
  color: #063D8C;
  margin-bottom: calc(10vmin / 12.80);
  line-height: calc(48vmin / 12.80);
  min-height: calc(48vmin / 12.80);
}

.portrait-main .timeoutDuration-content .form-box>text {
  width: calc(230vmin / 12.80);
  margin-right: calc(20vmin / 12.80);
  line-height: calc(30vmin / 12.80);
}

.portrait-main .timeoutDuration-content .form-box .form-input {
  width: calc(100% - (250vmin / 12.80) - (85vmin / 12.80));
  height: calc(48vmin / 12.80);
  background: #fff;
  /*border-radius: calc(8vmin / 12.80);*/
  font-size: calc(18vmin / 12.80);
  color: #00A2FF;
  padding: 0 calc(20vmin / 12.80);
  box-sizing: border-box;
  border: 0 solid #B8EFF3;
  box-shadow: 0 0 calc(8vmin / 12.80) 0 rgba(115, 218, 228, 1);
}

.portrait-main .timeoutDuration-content .form-box .number-input {
  width: calc(140vmin / 12.80) !important;
  text-align: center !important;
}

.portrait-main .timeoutDuration-content .form-box .left,
.portrait-main .timeoutDuration-content .form-box .right {
  height: calc(48vmin / 12.80);
  width: calc(42vmin / 12.80);
  background-color: #f1fafb;
  color: #78c2f9;
  text-align: center;
  line-height: calc(48vmin / 12.80);
  font-size: calc(17vmin / 12.80);
  font-weight: bold;
  /*border-radius: calc(8vmin / 12.80);*/
}

.portrait-main .timeoutDuration-content .form-box .left {
  border-radius: calc(8vmin / 12.80) 0 0 calc(8vmin / 12.80);
  margin-right: calc(4vmin / 12.80);
  font-size: calc(20vmin / 12.80);
}

.portrait-main .timeoutDuration-content .form-box .right {
  border-radius: 0 calc(8vmin / 12.80) calc(8vmin / 12.80) 0;
  margin-left: calc(4vmin / 12.80);
}