.popup-container { height: 100vh; padding: 66px 0 0 0; box-sizing: border-box; overflow: hidden; } .popup-container .popup-radio { padding: 10px 0 10px 0; } .popup-container .popup-radio .popup-radio-item { color: #000; font-size: 16px; font-weight: bold; line-height: 50px; text-align: center; } .popup-container .popup-radio .popup-radio-item.selected { color: #409EFF; } .popup-container .popup-checkbox { box-sizing: border-box; position: relative; height: calc(100vh - 66px); min-height: calc(100vh - 66px); overflow: hidden; padding: 0; } .popup-container .popup-checkbox .popup-checkbox-header { background: #67C23A; font-size: 12px; text-align: center; height: 30px; line-height: 26px; color: #fff; margin: 0; position: absolute; width: 100%; top: 0; left: 0; z-index: 9999; } .popup-container .popup-checkbox .popup-checkbox-main { padding: 42px 16px 100px 16px; overflow: scroll; box-sizing: border-box; height: 100%; } .popup-container .popup-checkbox .popup-checkbox-main .popup-checkbox-item { color: #000; font-size: 16px; font-weight: bold; line-height: 42px; background: #f4f4f5; padding: 6px 12px; margin: 0 0 10px 0; border-radius: 7px; border: 1px solid #f4f4f5; display: flex; } .popup-container .popup-checkbox .popup-checkbox-main .popup-checkbox-item.selected { color: #409EFF; border: 1px solid #409EFF; } .popup-container .popup-checkbox .popup-checkbox-main .popup-checkbox-item .popup-checkbox-label { flex: 5; } .popup-container .popup-checkbox .popup-checkbox-main .popup-checkbox-item .popup-checkbox-icon { width: 20px; height: 20px; line-height: 20px; display: block; border-radius: 50%; overflow: hidden; margin: 11px 0 0 0; } .popup-container .popup-checkbox .popup-checkbox-footer { position: absolute; z-index: 9999; left: 0; bottom: 0; height: 66px; width: 100%; padding: 5px 16px; box-sizing: border-box; background: #fff; border-top: 1px solid #f0f0f0; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } .popup-container .popup-time { position: relative; height: calc(100vh - 66px); } .popup-container .popup-city { height: calc(100vh - 66px); overflow: scroll; } .popup-container .popup-city .city-item { background: #eee; } .popup-container .popup-city .city-item .city-value-row { background: #fff; } .popup-container .popup-city .city-item .city-value-row.current-city-value { height: 50px; line-height: 50px; text-align: center; color: #409EFF; } .popup-container .popup-city .city-item .city-value-item { text-align: center; height: 50px; line-height: 50px; border-bottom: 2px solid #eee; overflow: hidden; text-overflow: ellipsis; } .popup-container .popup-city .city-item .city-value-item.not-border { border: 2px solid transparent; } .popup-container .popup-city .city-item .city-value-item.changed { color: #409EFF; }