.main .advanced-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 .advanced-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 .advanced-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 .advanced-content .form-box .radio-group .radioBox-text, .main .advanced-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 .advanced-content .form-box .radio-group .radio, .main .advanced-content .form-box .checkbox-group .checkbox { width: calc(130vmax / 12.80); height: calc(40vmax / 12.80); display: flex; align-items: center; } .main .advanced-content .form-box .radio-group, .main .advanced-content .form-box .checkbox-group { display: flex; align-items: center; } .main .advanced-content .form-box .checkbox-checked, .main .advanced-content .form-box .checkbox-unchecked, .main .advanced-content .form-box .radioBox-checked, .main .advanced-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 .advanced-content .form-box .radioBox-checked, .main .advanced-content .form-box .radioBox-unchecked, .main .advanced-content .form-box .radioBox-checked::after { border-radius: 50% !important; } .main .advanced-content .form-box .checkbox-checked::after, .main .advanced-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 .advanced-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 .advanced-content .wid { width: 100%; position: relative; } .main .advanced-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 .advanced-content .form-box .more-box .more-icon { width: calc(36vmax / 12.80); height: calc(28vmax / 12.80); } .main .advanced-content .form-box .cus-switch { transform: scale(1.1); } .main .advanced-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 .advanced-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 .advanced-content .form-box .select-area .item:not(:last-child) { border-bottom: calc(1vmax / 12.80) solid #DFEDF7; } /* 竖屏样式 */ .portrait-main .advanced-content { display: flex; flex-wrap: wrap; margin: calc(40vmin / 12.80) calc(100vmin / 12.80); } .portrait-main .advanced-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 .advanced-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 .advanced-content .form-box .radio-group .radioBox-text, .portrait-main .advanced-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 .advanced-content .form-box .radio-group .radio, .portrait-main .advanced-content .form-box .checkbox-group .checkbox { width: calc(130vmin / 12.80); height: calc(40vmin / 12.80); display: flex; align-items: center; } .portrait-main .advanced-content .form-box .radio-group, .portrait-main .advanced-content .form-box .checkbox-group { display: flex; align-items: center; } .portrait-main .advanced-content .form-box .checkbox-checked, .portrait-main .advanced-content .form-box .checkbox-unchecked, .portrait-main .advanced-content .form-box .radioBox-checked, .portrait-main .advanced-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 .advanced-content .form-box .radioBox-checked, .portrait-main .advanced-content .form-box .radioBox-unchecked, .portrait-main .advanced-content .form-box .radioBox-checked::after { border-radius: 50% !important; } .portrait-main .advanced-content .form-box .checkbox-checked::after, .portrait-main .advanced-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 .advanced-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 .advanced-content .wid { width: 100%; position: relative; } .portrait-main .advanced-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 .advanced-content .form-box .more-box .more-icon { width: calc(36vmin / 12.80); height: calc(28vmin / 12.80); } .portrait-main .advanced-content .form-box .cus-switch { transform: scale(1.1); } .portrait-main .advanced-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 .advanced-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 .advanced-content .form-box .select-area .item:not(:last-child) { border-bottom: calc(1vmin / 12.80) solid #DFEDF7; }