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

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

.mask {
  /* background-color: rgba(0, 0, 0, 0.5); */
  /* pointer-events: none; */
}

.main .basic-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 .basic-content .form-box>text {
  width: calc(180vmax / 12.80);
  margin-right: calc(20vmax / 12.80);
  line-height: calc(30vmax / 12.80);
}

.main .cus-switch {
  display: flex;
  align-items: center;
  font-size: calc(20vmax / 12.80);
}

.main .cus-switch .switch-main {
  position: relative;
  width: calc(58vmax / 12.80);
  height: calc(34vmax / 12.80);
  background: #fff;
  border: calc(1vmax / 12.80) solid #ccc;
  margin-right: calc(20vmax / 12.80);
  transition: all 0.3s ease;
}

.main .cus-switch .capsule {
  border-radius: calc(36vmax / 12.80);
}

.main .cus-switch .switch-main::after {
  content: "";
  position: absolute;
  left: calc(3vmax / 12.80);
  top: calc(3vmax / 12.80);
  width: calc(28vmax / 12.80);
  height: calc(28vmax / 12.80);
  background: #fff;
  box-shadow: 0 0 0 calc(1vmax / 12.80) #ccc;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.main .cus-switch .capsule::after {
  border-radius: 50%;
}

.main .cus-switch .checked {
  background: rgba(61, 115, 255, 1);
  border-color: rgba(61, 115, 255, 1);
}

.main .cus-switch .checked::after {
  box-shadow: none;
}

.main .cus-switch .capsule.checked::after {
  transform: translateX(calc(58vmax / 12.80 - 34vmax / 12.80));
}

.main .cus-switch .disabled {
  opacity: 0.4;
}

.main .basic-content .form-box .radio-group .radioBox-text,
.main .basic-content .form-box .checkbox-group .checkbox-text {
  line-height: calc(30vmax / 12.80);
  margin-left: calc(16vmax / 12.80);
  font-size: calc(20vmax / 12.80);
  color: #063D8C;
}

.main .basic-content .form-box .radio-group .radio,
.main .basic-content .form-box .checkbox-group .checkbox {
  width: calc(130vmax / 12.80);
  height: calc(40vmax / 12.80);
  display: flex;
  align-items: center;
}

.main .basic-content .form-box .radio-group,
.main .basic-content .form-box .checkbox-group {
  display: flex;
  align-items: center;
}

.main .basic-content .form-box .checkbox-checked,
.main .basic-content .form-box .checkbox-unchecked,
.main .basic-content .form-box .radioBox-checked,
.main .basic-content .form-box .radioBox-unchecked {
  position: relative;
  width: calc(28vmax / 12.80);
  height: calc(28vmax / 12.80);
  border-radius: calc(8vmax / 12.80);
  border: calc(1vmax / 12.80) solid rgba(233, 233, 246, 1);
  background: #fff;
}

.main .basic-content .form-box .radioBox-checked,
.main .basic-content .form-box .radioBox-unchecked,
.main .basic-content .form-box .radioBox-checked::after {
  border-radius: 50% !important;
}

.main .basic-content .form-box .checkbox-checked::after,
.main .basic-content .form-box .radioBox-checked::after {
  position: absolute;
  content: '✔';
  border-radius: calc(8vmax / 12.80);
  width: calc(28vmax / 12.80);
  height: calc(28vmax / 12.80);
  line-height: calc(28vmax / 12.80);
  text-align: center;
  color: #fff;
  background: rgba(61, 115, 255, 1);
  border-color: rgba(61, 115, 255, 1);
}

.main .basic-content .form-box .form-input {
  width: calc(100% - (200vmax / 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 .basic-content .form-box .number-input {
  border-radius: 0 !important;
  width: calc(140vmax / 12.80) !important;
  text-align: center !important;
}

.main .basic-content .form-box .left,
.main .basic-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;
}

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

.main .basic-content .form-box .right {
  border-radius: 0 calc(5vmax / 12.80) calc(5vmax / 12.80) 0;
  margin-left: calc(2vmax / 12.80);
}

.main .basic-content .wid {
  width: 100%;
  position: relative;
}

.main .basic-content .form-box .more-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(65vmax / 12.80);
  height: calc(48vmax / 12.80);
  border-radius: calc(8vmax / 12.80);
  background-color: #48b5b1;
  margin-left: calc(20vmax / 12.80);
}

.main .basic-content .form-box .more-box .more-icon {
  width: calc(36vmax / 12.80);
  height: calc(28vmax / 12.80);
}

.main .basic-content .form-box .cus-switch {
  transform: scale(1.1);
}

.main .basic-content .form-box .select-area {
  max-height: calc(150vmax / 12.80);
  position: absolute;
  left: calc(200vmax / 12.80);
  bottom: calc(58vmax / 12.80);
  width: calc(100% - (200vmax / 12.80) - (85vmax / 12.80));
  background-color: #fff;
  padding: calc(6vmax / 12.80) calc(20vmax / 12.80);
  box-sizing: border-box;
  font-size: calc(18vmax / 12.80);
  color: #4489B9;
  z-index: 999;
  box-shadow: 0 0 calc(8vmax / 12.80) 0 rgba(115, 218, 228, 1);
  border-radius: calc(8vmax / 12.80);
  overflow-y: auto;
}

.main .basic-content .form-box .select-area .item {
  padding: calc(10vmax / 12.80) 0;
  opacity: 0.7;
  text-align: center;
  border-bottom: calc(1vmax / 12.80) solid transparent;
}

.main .basic-content .form-box .select-area .item:not(:last-child) {
  border-bottom: calc(1vmax / 12.80) solid #DFEDF7;
}

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

.portrait-main .basic-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 .basic-content .form-box>text {
  width: calc(180vmin / 12.80);
  margin-right: calc(20vmin / 12.80);
  line-height: calc(30vmin / 12.80);
}

.portrait-main .cus-switch {
  display: flex;
  align-items: center;
  font-size: calc(20vmin / 12.80);
}

.portrait-main .cus-switch .switch-main {
  position: relative;
  width: calc(58vmin / 12.80);
  height: calc(34vmin / 12.80);
  background: #fff;
  border: calc(1vmin / 12.80) solid #ccc;
  margin-right: calc(20vmin / 12.80);
  transition: all 0.3s ease;
}

.portrait-main .cus-switch .capsule {
  border-radius: calc(36vmin / 12.80);
}

.portrait-main .cus-switch .switch-main::after {
  content: "";
  position: absolute;
  left: calc(3vmin / 12.80);
  top: calc(3vmin / 12.80);
  width: calc(28vmin / 12.80);
  height: calc(28vmin / 12.80);
  background: #fff;
  box-shadow: 0 0 0 calc(1vmin / 12.80) #ccc;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.portrait-main .cus-switch .capsule::after {
  border-radius: 50%;
}

.portrait-main .cus-switch .checked {
  background: rgba(61, 115, 255, 1);
  border-color: rgba(61, 115, 255, 1);
}

.portrait-main .cus-switch .checked::after {
  box-shadow: none;
}

.portrait-main .cus-switch .capsule.checked::after {
  transform: translateX(calc(58vmin / 12.80 - 34vmin / 12.80));
}

.portrait-main .cus-switch .disabled {
  opacity: 0.4;
}

.portrait-main .basic-content .form-box .radio-group .radioBox-text,
.portrait-main .basic-content .form-box .checkbox-group .checkbox-text {
  line-height: calc(30vmin / 12.80);
  margin-left: calc(16vmin / 12.80);
  font-size: calc(20vmin / 12.80);
  color: #063D8C;
}

.portrait-main .basic-content .form-box .radio-group .radio,
.portrait-main .basic-content .form-box .checkbox-group .checkbox {
  width: calc(130vmin / 12.80);
  height: calc(40vmin / 12.80);
  display: flex;
  align-items: center;
}

.portrait-main .basic-content .form-box .radio-group,
.portrait-main .basic-content .form-box .checkbox-group {
  display: flex;
  align-items: center;
}

.portrait-main .basic-content .form-box .checkbox-checked,
.portrait-main .basic-content .form-box .checkbox-unchecked,
.portrait-main .basic-content .form-box .radioBox-checked,
.portrait-main .basic-content .form-box .radioBox-unchecked {
  position: relative;
  width: calc(28vmin / 12.80);
  height: calc(28vmin / 12.80);
  border-radius: calc(8vmin / 12.80);
  border: calc(1vmin / 12.80) solid rgba(233, 233, 246, 1);
  background: #fff;
}

.portrait-main .basic-content .form-box .radioBox-checked,
.portrait-main .basic-content .form-box .radioBox-unchecked,
.portrait-main .basic-content .form-box .radioBox-checked::after {
  border-radius: 50% !important;
}

.portrait-main .basic-content .form-box .checkbox-checked::after,
.portrait-main .basic-content .form-box .radioBox-checked::after {
  position: absolute;
  content: '✔';
  border-radius: calc(8vmin / 12.80);
  width: calc(28vmin / 12.80);
  height: calc(28vmin / 12.80);
  line-height: calc(28vmin / 12.80);
  text-align: center;
  color: #fff;
  background: rgba(61, 115, 255, 1);
  border-color: rgba(61, 115, 255, 1);
}

.portrait-main .basic-content .form-box .form-input {
  width: calc(100% - (200vmin / 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 .basic-content .form-box .number-input {
  border-radius: 0 !important;
  width: calc(140vmin / 12.80) !important;
  text-align: center !important;
}

.portrait-main .basic-content .form-box .left,
.portrait-main .basic-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;
}

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

.portrait-main .basic-content .form-box .right {
  border-radius: 0 calc(5vmin / 12.80) calc(5vmin / 12.80) 0;
  margin-left: calc(2vmin / 12.80);
}

.portrait-main .basic-content .wid {
  width: 100%;
  position: relative;
}

.portrait-main .basic-content .form-box .more-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(65vmin / 12.80);
  height: calc(48vmin / 12.80);
  border-radius: calc(8vmin / 12.80);
  background-color: #48b5b1;
  margin-left: calc(20vmin / 12.80);
}

.portrait-main .basic-content .form-box .more-box .more-icon {
  width: calc(36vmin / 12.80);
  height: calc(28vmin / 12.80);
}

.portrait-main .basic-content .form-box .cus-switch {
  transform: scale(1.1);
}

.portrait-main .basic-content .form-box .select-area {
  max-height: calc(150vmin / 12.80);
  position: absolute;
  left: calc(200vmin / 12.80);
  bottom: calc(58vmin / 12.80);
  width: calc(100% - (200vmin / 12.80) - (85vmin / 12.80));
  background-color: #fff;
  padding: calc(6vmin / 12.80) calc(20vmin / 12.80);
  box-sizing: border-box;
  font-size: calc(18vmin / 12.80);
  color: #4489B9;
  z-index: 999;
  box-shadow: 0 0 calc(8vmin / 12.80) 0 rgba(115, 218, 228, 1);
  border-radius: calc(8vmin / 12.80);
  overflow-y: auto;
}

.portrait-main .basic-content .form-box .select-area .item {
  padding: calc(10vmin / 12.80) 0;
  opacity: 0.7;
  text-align: center;
  border-bottom: calc(1vmin / 12.80) solid transparent;
}

.portrait-main .basic-content .form-box .select-area .item:not(:last-child) {
  border-bottom: calc(1vmin / 12.80) solid #DFEDF7;
}