FKJ-HHArome/pages/interviewee/index.acss

.flex1 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex2 {
  display: flex;
  justify-content: left;
  justify-items: flex-end;
  flex-wrap: wrap;
}

.main .interviewee-content {
  margin: calc(10vmax / 12.80) calc(17vmax / 12.80);
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*flex-wrap: wrap;*/
}

.main .interviewee-content .tit-box {
  height: calc(46vmax / 12.80);
  line-height: calc(46vmax / 12.80);
  font-weight: 500;
  font-size: calc(28vmax / 12.80);
  color: #145676;
  display: inline-block;
}

.main .interviewee-content .interviewee-content-left,
.main .interviewee-content .interviewee-content-right {
  background-color: #fff;
  /*overflow: hidden;*/
  box-sizing: border-box;
  height: calc(650vmax / 12.80);
}

.main .interviewee-content .interviewee-content-left {
  width: calc(377vmax / 12.80);
  padding: calc(20vmax / 12.80) calc(24vmax / 12.80);
}

.main .interviewee-content .interviewee-content-right {
  width: calc(855vmax / 12.80);
  padding: calc(20vmax / 12.80) 0 calc(20vmax / 12.80) calc(24vmax / 12.80);
  position: relative;
}

.main .interviewee-content .interviewee-content-left .userInfo-box {
  margin-top: calc(42vmax / 12.80);
  display: flex;
  justify-content: space-between;
}

.main .interviewee-content .interviewee-content-left .userInfo-box .avatar {
  width: calc(100vmax / 12.80);
  height: calc(130vmax / 12.80);
  border-radius: calc(2vmax / 12.80);
  margin-right: calc(10vmax / 12.80);
  background: #B5D7E7;
}

.main .interviewee-content .interviewee-content-left .userInfo-box .info-box {
  width: calc(100% - 110vmax / 12.80);
  font-size: calc(22vmax / 12.80);
  color: #145676;
}

.main .interviewee-content .interviewee-content-left .userInfo-box .info-box > view {
  line-height: calc(40vmax / 12.80);
  height: calc(40vmax / 12.80);
}

.main .interviewee-content .interviewee-content-left .userInfo-box .info-box .userInfo-phone {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.main .interviewee-content .interviewee-content-left .userInfo-box .info-box .userInfo-phone .phone-input {
  width: calc(100% - 32vmax / 12.80);
  height: calc(40vmax / 12.80);
  line-height: calc(40vmax / 12.80);
  border-bottom: calc(2vmax / 12.80) solid #B8EFF3;
  font-size: calc(22vmax / 12.80);
  color: #145676;
  vertical-align: middle;
  padding: 0;
}

.main .interviewee-content .interviewee-content-left .userInfo-box .info-box .userInfo-phone .phone-icon {
  width: calc(22vmax / 12.80);
  height: calc(32vmax / 12.80);
}

.main .interviewee-content .interviewee-content-left .remainingInfo-box {
  margin-top: calc(48vmax / 12.80);
  display: flex;
  justify-content: left;
  justify-items: flex-end;
  flex-wrap: wrap;
}

.main .interviewee-content .interviewee-content-left .remainingInfo-box .box-item {
  font-size: calc(22vmax / 12.80);
  color: #145676;
  margin-bottom: calc(22vmax / 12.80);
  width: calc(100%);
  position: relative;
  display: flex;
}

.main .interviewee-content .interviewee-content-left .remainingInfo-box .box-item > text {
  margin-right: calc(20vmax / 12.80);
  width: calc(50vmax / 12.80);
  height: calc(44vmax / 12.80);
  line-height: calc(44vmax / 12.80);
}

.main .interviewee-content .interviewee-content-left .remainingInfo-box .box-item .input,
.main .interviewee-content .interviewee-content-left .remainingInfo-box .box-item .picker {
  width: calc(100% - 70vmax / 12.80);
  height: calc(44vmax / 12.80);
  line-height: calc(44vmax / 12.80);
  border: calc(1vmax / 12.80) solid #B8EFF3;
  box-shadow: 0 0  calc(8vmax / 12.80) 0 rgba(185,238,243,0.98);
  border-radius: calc(2vmax / 12.80);
  color: #09AECC;
  font-size: calc(22vmax / 12.80);
  padding-left: calc(15vmax / 12.80);
  box-sizing: border-box;
}

.main .interviewee-content .interviewee-content-left .remainingInfo-box .box-item .input-pl {
  color: #B5D7E7;
}

.main .interviewee-content .interviewee-content-left .select-area {
  max-height: calc(200vmax / 12.80);
  position: absolute;
  bottom: 0;
  left: calc(100% + 10vmax / 12.80);
  width: calc(100% - 70vmax / 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(2vmax / 12.80);
  overflow-y: auto;
}

.main .interviewee-content .interviewee-content-left .select-area .item {
  padding: calc(10vmax / 12.80) 0;
  opacity: 0.7;
  text-align: center;
  border-bottom: calc(1vmax / 12.80) solid transparent;
}
.main .interviewee-content .interviewee-content-left .select-area .item:not(:last-child) {
  border-bottom: calc(1vmax / 12.80) solid #DFEDF7;
}

.main .interviewee-content .interviewee-content-right .manual-operation {
  background: #13B5B1;
  border-radius: calc(23vmax / 12.80);
  font-weight: 500;
  font-size: calc(22vmax / 12.80);
  color: #FFFFFF;
  width: calc(170vmax / 12.80);
  height: calc(46vmax / 12.80);
  line-height: calc(46vmax / 12.80);
  text-align: center;
  margin-left: calc(34vmax / 12.80);
  display: inline-block;
}

.main .interviewee-content .interviewee-content-right .right-floor {
  height: 100%;
  width: calc(76vmax / 12.80);
  position: absolute;
  top: calc(32vmax / 12.80);
  right: 0;
}

.main .interviewee-content .interviewee-content-right .right-floor .right-floor-item {
  width: calc(76vmax / 12.80);
  height: calc(40vmax / 12.80);
  line-height: calc(40vmax / 12.80);
  background: #FFF3E1;
  border-radius: calc(8vmax / 12.80) 0 0 calc(8vmax / 12.80);
  font-weight: bold;
  font-size: calc(20vmax / 12.80);
  color: #D6AB6A;
  text-align: center;
  margin-bottom: calc(12vmax / 12.80);
}

.main .interviewee-content .interviewee-content-right .search-content {
  width: calc(100% - 106vmax / 12.80);
  overflow: hidden;
  transition: max-height 0.4s linear;
}

.main .interviewee-content .interviewee-content-right .search-content-max {
  max-height: calc(200vmax / 12.80);
}
.main .interviewee-content .interviewee-content-right .search-content-min {
  max-height: 0;
}

.main .interviewee-content .interviewee-content-right .search-content .content-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.main .interviewee-content .interviewee-content-right .search-content .search-item {
  width: calc(100% / 3 - 10vmax / 12.80);
  color: #145676;
  margin-bottom: calc(16vmax / 12.80);
  box-sizing: border-box;
  display: flex;
  justify-content: left;
  align-items: center;
}

.main .interviewee-content .interviewee-content-right .search-content .search-item > text {
  font-size: calc(20vmax / 12.80);
  height: calc(44vmax / 12.80);
  line-height: calc(44vmax / 12.80);
  padding-right: calc(8vmax / 12.80);
  padding-left: calc(8vmax / 12.80);
  box-sizing: border-box;
}

.main .interviewee-content .interviewee-content-right .search-content .search-item .search-input {
  font-size: calc(20vmax / 12.80);
  /*width: calc(100% - 80vmax / 12.80);*/
  flex: 1;
  height: calc(44vmax / 12.80);
  line-height: calc(44vmax / 12.80);
  /*margin-left: 6rpx;*/
  padding: 0 calc(8vmax / 12.80);
  box-sizing: border-box;
  color: #09AECC;
}

.main .interviewee-content .interviewee-content-right .search-content .search-item .search-input-placeholder {
  font-size: calc(20vmax / 12.80);
  color: #B5D7E7;
}

.main .interviewee-content .interviewee-content-right .search-content .search-btn {
  display: flex;
  justify-content: flex-end;
  margin-bottom: calc(20vmax / 12.80);
}

.main .interviewee-content .interviewee-content-right .search-content .search-btn .click-search,
.main .interviewee-content .interviewee-content-right .search-content .search-btn .click-clear {
  width: calc(170vmax / 12.80);
  height: calc(46vmax / 12.80);
  line-height: calc(46vmax / 12.80);
  text-align: center;
  border-radius: calc(20vmax / 12.80);
  font-weight: 500;
  font-size: calc(22vmax / 12.80);
}

.main .interviewee-content .interviewee-content-right .search-content .search-btn .click-search {
  background: #146576;
  color: #FFFFFF;
  margin-right: calc(35vmax / 12.80);
}

.main .interviewee-content .interviewee-content-right .search-content .search-btn .click-clear {
  color: #146576;
  border: calc(1vmax / 12.80) solid #146576;
}

.main .interviewee-content .interviewee-content-right .input-shadow {
  box-shadow: 0 0  calc(4vmax / 12.80) 0 rgba(185,238,243,0.98);
  border-radius: calc(2vmax / 12.80);
  border: calc(1vmax / 12.80) solid #B8EFF3;
}

.main .interviewee-content .interviewee-content-right .floor-detail {
  margin-top: calc(10vmax / 12.80);
  overflow: hidden;
  transition: max-height 0.4s linear;
  width: calc(100% - 106vmax / 12.80);
}

.main .interviewee-content .interviewee-content-right .floor-detail .floor-detail-item {
  width: calc((100% - calc(72vmax / 12.80)) / 3);
  height: calc(84vmax / 12.80);
  background: #D1F4F7;
  border-radius: calc(12vmax / 12.80);
  font-size: calc(22vmax / 12.80);
  color: #145676;
  padding: calc(12vmax / 12.80);
  margin-bottom: calc(10vmax / 12.80);
  box-sizing: border-box;
  margin-left: calc(36vmax / 12.80);
}
.main .interviewee-content .interviewee-content-right .floor-detail .floor-detail-item > view {
  height: calc(30vmax / 12.80);
  line-height: calc(30vmax / 12.80);
  width: 100%;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main .interviewee-content .interviewee-content-right .floor-detail .floor-detail-item:nth-child(3n - 2) {
  margin-left: 0 !important;
}

.main .interviewee-content .interviewee-content-right .num-page {
  position: absolute;
  bottom: calc(15vmax / 12.80);
}

.main .interviewee-content .interviewee-content-right .num-page .previous,
.main .interviewee-content .interviewee-content-right .num-page .next {
  width: calc(170vmax / 12.80);
  height: calc(40vmax / 12.80);
  line-height: calc(40vmax / 12.80);
  display: inline-block;
  background: #FFF3E1;
  border-radius: calc(20vmax / 12.80);
  font-weight: 500;
  font-size: calc(22vmax / 12.80);
  color: #D6AB6A;
  text-align: center;
}

.main .interviewee-content .interviewee-content-right .num-page .total {
  display: inline-block;
  font-weight: 500;
  font-size: calc(20vmax / 12.80);
  color: #D6AB6A;
  margin: 0 calc(20vmax / 12.80);
}

.main .interviewee-content .interviewee-content-right .enter {
  margin-top: calc(35vmax / 12.80);
  width: calc(100% - 24vmax / 12.80);
}

.main .interviewee-content .interviewee-content-right .enter .enter-item {
  font-size: calc(22vmax / 12.80);
  color: #145676;
  margin-bottom: calc(22vmax / 12.80);
}

.main .interviewee-content .interviewee-content-right .enter .enter-item > text {
  width:  calc(80vmax / 12.80);
  margin-top: calc(10vmax / 12.80);
}

.main .interviewee-content .interviewee-content-right .enter .enter-item .enter-input {
  font-size: calc(22vmax / 12.80);
  height: calc(44vmax / 12.80);
  line-height: calc(44vmax / 12.80);
  width: calc(250vmax / 12.80);
  margin-left: calc(20vmax / 12.80);
  padding: 0 calc(15vmax / 12.80);
  color: #09AECC;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main .interviewee-content .interviewee-content-right .enter .enter-item .enter-input-placeholder {
  font-size: calc(22vmax / 12.80);
  color: #B5D7E7;
}

.main .interviewee-content .interviewee-content-right .enter-clear {
  width: calc(170vmax / 12.80);
  height: calc(40vmax / 12.80);
  line-height: calc(40vmax / 12.80);
  margin-top: calc(47vmax / 12.80);
  display: inline-block;
  background: #FFF3E1;
  border-radius: calc(20vmax / 12.80);
  font-weight: 500;
  font-size: calc(22vmax / 12.80);
  color: #D6AB6A;
  text-align: center;
}

.main .interviewee-content .interviewee-content-right .right-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: calc(100% - 106vmax / 12.80);
  margin-bottom: calc(20vmax / 12.80);
}

.main .interviewee-content .interviewee-content-right .right-top .right-top-tit {
  width: 50%;
  height: calc(46vmax / 12.80);
  line-height: calc(46vmax / 12.80);
}

.main .interviewee-content .interviewee-content-right .right-top .right-top-screen {
  text-align: right;
  height: calc(46vmax / 12.80);
  line-height: calc(46vmax / 12.80);
  display: flex;
  justify-content: center;
  align-items: center;
}

.main .interviewee-content .interviewee-content-right .right-top .right-top-screen .floor {
  font-weight: bold;
  font-size: calc(20vmax / 12.80);
  color: #D6AB6A;
  height: calc(46vmax / 12.80);
  line-height: calc(46vmax / 12.80);
  display: inline-block;
}

.main .interviewee-content .interviewee-content-right .right-top .right-top-screen .screen {
  font-weight: bold;
  font-size: calc(22vmax / 12.80);
  color: #80c269;
  margin-left: calc(24vmax / 12.80);
  height: calc(46vmax / 12.80);
  line-height: calc(46vmax / 12.80);
  display: flex;
  justify-content: center;
  align-items: center;
}

.main .interviewee-content .interviewee-content-right .right-top .right-top-screen .hidden-icon {
  width: calc(28vmax / 12.80);
  height: calc(28vmax / 12.80);
  margin-left: calc(10vmax / 12.80);
  vertical-align: middle;
}

/* 键盘样式开始 */

/* 键盘 */
.main .interviewee-content .keyboard {
  position: fixed;
  width: calc(640vmax / 12.80);
  padding: 0 calc(15vmax / 12.80) calc(15vmax / 12.80) calc(15vmax / 12.80);
  /*height: calc(480vmax / 12.80);*/
  bottom: calc(150vmax / 12.80);
  right: calc(180vmax / 12.80);
  z-index: 99;
  /*background-color: #fff;*/
  border: 0 solid #B8EFF3;
  box-shadow: 0 0 calc(8vmax / 12.80) 0 rgba(115, 218, 228, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: calc(16vmax / 12.80);
  background: linear-gradient(180deg, #00E3C5 0%, #07D3E0 100%);
}
.main .interviewee-content .keyboard .keyboard-tit {
  color: rgba(20, 86, 118, 1);
  font-size: calc(28vmax / 12.80);
  font-weight: 700;
  height: calc(60vmax / 12.80);
  line-height: calc(60vmax / 12.80);
}

.main .interviewee-content .keyboard .keyboard-mini {
  background-color: #fff;
  padding: calc(15vmax / 12.80) 0;
  position: relative;
  /*height: calc(375vmax / 12.80);*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: calc(16vmax / 12.80);
}

.main .interviewee-content .keyboard .keyboard-mini .provinces,
.main .interviewee-content .keyboard .keyboard-mini .keyNums{
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

.main .interviewee-content .keyboard .kb-btn-box {
  width: calc(295vmax / 12.80);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main .interviewee-content .keyboard .kb-btn-box .kb-delete-btn {
  background: rgba(225, 69, 69, 1) !important;
  color: #fff;
  width: calc(140vmax / 12.80);
  height: calc(42vmax / 12.80);
  line-height: calc(42vmax / 12.80);
  border-radius: calc(24vmax / 12.80);
  font-size: calc(22vmax / 12.80);
  text-align: center;
}

.main .interviewee-content .keyboard .kb-btn-box .kb-sure-btn {
  background: #ccc;
  color: #fff;
  width: calc(140vmax / 12.80);
  height: calc(42vmax / 12.80);
  line-height: calc(42vmax / 12.80);
  border-radius: calc(24vmax / 12.80);
  font-size: calc(22vmax / 12.80);
  text-align: center;
}

.main .interviewee-content .keyboard .kb-btn-box .down-blue {
  background-color: rgba(24, 186, 255, 1) !important;
  color: #ffffff !important;
}

.main .interviewee-content .keyboard .keyboard-mini .pro-li {
  background: rgba(208, 244, 248, 1);
  color: #145676;
  width: calc(50vmax / 12.80);
  height: calc(60vmax / 12.80);
  line-height: calc(60vmax / 12.80);
  border-radius: calc(10vmax / 12.80);
  font-size: calc(22vmax / 12.80);
  text-align: center;
  margin: 0 calc(15vmax / 12.80) calc(15vmax / 12.80) calc(15vmax / 12.80);
}

/* 键盘样式结束 */

/* 多选楼层开始 */
.main .interviewee-content .floor-box {
  position: absolute;
  top: calc(120vmax / 12.80);
  left: 50%;
  transform: translateX(-50%);
  /*width: calc(880vmax / 12.80);*/
  /*height: calc(470vmax / 12.80);*/
  padding: 0 calc(20vmax / 12.80) calc(20vmax / 12.80) calc(20vmax / 12.80);
  background-color: #01e2c7;
  border-radius:  calc(16vmax / 12.80);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.main .interviewee-content .floor-box  .floor-tit {
  position: relative;
  color: rgba(20, 86, 118, 1);
  font-size: calc(28vmax / 12.80);
  font-weight: 700;
  height: calc(60vmax / 12.80);
  line-height: calc(60vmax / 12.80);
}

.main .interviewee-content .floor-box .floor-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(880vmax / 12.80);
}

.main .interviewee-content .floor-box .floor-content .box-content {
  position: relative;
  background-color: #fff;
  border-radius: calc(10vmax / 12.80);
  width: calc(640vmax / 12.80);
  height: calc(440vmax / 12.80);
  padding: calc(30vmax / 12.80);
  box-sizing: border-box;
}

.main .interviewee-content .floor-box .floor-content .box-content .floor-item {
  height: calc(310vmax / 12.80);
  overflow: hidden;
  overflow-y: auto;
}

.main .interviewee-content .floor-box .floor-content .box-content .floor-item .floor-item-box {
  font-size: calc(20vmax / 12.80);
  display: inline-block;
  background-color: #d0f4f8;
  color: rgba(20, 86, 118, 1);
  width: calc(130vmax / 12.80);
  height: calc(56vmax / 12.80);
  line-height: calc(56vmax / 12.80);
  text-align: center;
  border-radius: calc(8vmax / 12.80);
  margin-bottom: calc(10vmax / 12.80);
  margin-right: calc(20vmax / 12.80);
}

.main .interviewee-content .floor-box .floor-content .box-content .floor-item .floor-item-box:nth-child(4n) {
  margin-right: 0;
}

.main .interviewee-content .floor-box .floor-content .box-content .floor-item .choose-floor-item {
  background-color: #13a1b4;
  color: #fff;
}

.main .interviewee-content .floor-box .floor-content .box-content .floor-btn {
  position: absolute;
  left: 50%;
  width: calc(330vmax / 12.80);
  padding: calc(20vmax / 12.80) 0;
  margin-top: calc(10vmax / 12.80);
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main .interviewee-content .floor-box .floor-content .box-content .floor-btn .floor-btn-css {
  display: inline-block;
  font-size: calc(20vmax / 12.80);
  border-radius: calc(24vmax / 12.80);
  width: calc(140vmax / 12.80);
  height: calc(42vmax / 12.80);
  line-height: calc(42vmax / 12.80);
  text-align: center;
}

.main .interviewee-content .floor-box .floor-content .box-content .floor-btn .floor-cancel {
  background-color: #b1e3ff;
  color: rgba(21, 140, 207, 1);
}

.main .interviewee-content .floor-box .floor-content .box-content .floor-btn .floor-sure {
  background-color: #18baff;
  color: rgba(255, 255, 255, 1);
}

.main .interviewee-content .floor-box .floor-content .selected-floor {
  position: relative;
  background-color: #fff;
  border-radius: calc(10vmax / 12.80);
  width: calc(220vmax / 12.80);
  height: calc(440vmax / 12.80);
  overflow-y: auto;
  padding: calc(30vmax / 12.80) calc(20vmax / 12.80);
  box-sizing: border-box;
}

.main .interviewee-content .floor-box .floor-content .selected-floor .selected-floor-item {
  background-color: #13a2b5;
  color: #fff;
  width: calc(80vmax / 12.80);
  height: calc(32vmax / 12.80);
  line-height: calc(32vmax / 12.80);
  /* text-align: center; */
  border-radius: calc(24vmax / 12.80);
  margin-bottom: calc(12vmax / 12.80);
  font-size: calc(16vmax / 12.80);
  position: relative;
  padding-left: calc(20vmax / 12.80);
  box-sizing: border-box;
  display: inline-block;
}

.main .interviewee-content .floor-box .floor-content .selected-floor .selected-floor-item:nth-child(2n - 1) {
  margin-right: calc(20vmax / 12.80);
}

.main .interviewee-content .floor-box .floor-content .selected-floor .delete-icon {
  position: absolute;
  top: calc(10vmax / 12.80);
  right: calc(12vmax / 12.80);
  width: calc(12vmax / 12.80);
  height: calc(12vmax / 12.80);
}

/*竖屏样式*/

.portrait-main .interviewee-content {
  margin: calc(10vmin / 12.80) calc(17vmin / 12.80);
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*flex-wrap: wrap;*/
}

.portrait-main .interviewee-content .tit-box {
  height: calc(46vmin / 12.80);
  line-height: calc(46vmin / 12.80);
  font-weight: 500;
  font-size: calc(28vmin / 12.80);
  color: #145676;
  display: inline-block;
}

.portrait-main .interviewee-content .interviewee-content-left,
.portrait-main .interviewee-content .interviewee-content-right {
  background-color: #fff;
  /*overflow: hidden;*/
  box-sizing: border-box;
  height: calc(650vmin / 12.80);
}

.portrait-main .interviewee-content .interviewee-content-left {
  width: calc(377vmin / 12.80);
  padding: calc(20vmin / 12.80) calc(24vmin / 12.80);
}

.portrait-main .interviewee-content .interviewee-content-right {
  width: calc(855vmin / 12.80);
  padding: calc(20vmin / 12.80) 0 calc(20vmin / 12.80) calc(24vmin / 12.80);
  position: relative;
}

.portrait-main .interviewee-content .interviewee-content-left .userInfo-box {
  margin-top: calc(42vmin / 12.80);
  display: flex;
  justify-content: space-between;
}

.portrait-main .interviewee-content .interviewee-content-left .userInfo-box .avatar {
  width: calc(100vmin / 12.80);
  height: calc(130vmin / 12.80);
  border-radius: calc(2vmin / 12.80);
  margin-right: calc(10vmin / 12.80);
  background: #B5D7E7;
}

.portrait-main .interviewee-content .interviewee-content-left .userInfo-box .info-box {
  width: calc(100% - 110vmin / 12.80);
  font-size: calc(22vmin / 12.80);
  color: #145676;
}

.portrait-main .interviewee-content .interviewee-content-left .userInfo-box .info-box > view {
  line-height: calc(40vmin / 12.80);
  height: calc(40vmin / 12.80);
}

.portrait-main .interviewee-content .interviewee-content-left .userInfo-box .info-box .userInfo-phone {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.portrait-main .interviewee-content .interviewee-content-left .userInfo-box .info-box .userInfo-phone .phone-input {
  width: calc(100% - 32vmin / 12.80);
  height: calc(40vmin / 12.80);
  line-height: calc(40vmin / 12.80);
  border-bottom: calc(2vmin / 12.80) solid #B8EFF3;
  font-size: calc(22vmin / 12.80);
  color: #145676;
  vertical-align: middle;
  padding: 0;
}

.portrait-main .interviewee-content .interviewee-content-left .userInfo-box .info-box .userInfo-phone .phone-icon {
  width: calc(22vmin / 12.80);
  height: calc(32vmin / 12.80);
}

.portrait-main .interviewee-content .interviewee-content-left .remainingInfo-box {
  margin-top: calc(48vmin / 12.80);
  display: flex;
  justify-content: left;
  justify-items: flex-end;
  flex-wrap: wrap;
}

.portrait-main .interviewee-content .interviewee-content-left .remainingInfo-box .box-item {
  font-size: calc(22vmin / 12.80);
  color: #145676;
  margin-bottom: calc(22vmin / 12.80);
  width: calc(100%);
  position: relative;
  display: flex;
}

.portrait-main .interviewee-content .interviewee-content-left .remainingInfo-box .box-item > text {
  margin-right: calc(20vmin / 12.80);
  width: calc(50vmin / 12.80);
  height: calc(44vmin / 12.80);
  line-height: calc(44vmin / 12.80);
}

.portrait-main .interviewee-content .interviewee-content-left .remainingInfo-box .box-item .input,
.portrait-main .interviewee-content .interviewee-content-left .remainingInfo-box .box-item .picker {
  width: calc(100% - 70vmin / 12.80);
  height: calc(44vmin / 12.80);
  line-height: calc(44vmin / 12.80);
  border: calc(1vmin / 12.80) solid #B8EFF3;
  box-shadow: 0 0  calc(8vmin / 12.80) 0 rgba(185,238,243,0.98);
  border-radius: calc(2vmin / 12.80);
  color: #09AECC;
  font-size: calc(22vmin / 12.80);
  padding-left: calc(15vmin / 12.80);
  box-sizing: border-box;
}

.portrait-main .interviewee-content .interviewee-content-left .remainingInfo-box .box-item .input-pl {
  color: #B5D7E7;
}

.portrait-main .interviewee-content .interviewee-content-left .select-area {
  max-height: calc(200vmin / 12.80);
  position: absolute;
  bottom: 0;
  left: calc(100% + 10vmax / 12.80);
  /*bottom: calc(58vmin / 12.80);*/
  /*right: 0;*/
  width: calc(100% - 70vmin / 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(2vmin / 12.80);
  overflow-y: auto;
}

.portrait-main .interviewee-content .interviewee-content-left .select-area .item {
  padding: calc(10vmax / 12.80) 0;
  opacity: 0.7;
  text-align: center;
  border-bottom: calc(1vmin / 12.80) solid transparent;
}
.portrait-main .interviewee-content .interviewee-content-left .select-area .item:not(:last-child) {
  border-bottom: calc(1vmin / 12.80) solid #DFEDF7;
}

.portrait-main .interviewee-content .interviewee-content-right .manual-operation {
  background: #13B5B1;
  border-radius: calc(23vmin / 12.80);
  font-weight: 500;
  font-size: calc(22vmin / 12.80);
  color: #FFFFFF;
  width: calc(170vmin / 12.80);
  height: calc(46vmin / 12.80);
  line-height: calc(46vmin / 12.80);
  text-align: center;
  margin-left: calc(34vmin / 12.80);
  display: inline-block;
}

.portrait-main .interviewee-content .interviewee-content-right .right-floor {
  height: 100%;
  width: calc(76vmin / 12.80);
  position: absolute;
  top: calc(32vmin / 12.80);
  right: 0;
}

.portrait-main .interviewee-content .interviewee-content-right .right-floor .right-floor-item {
  width: calc(76vmin / 12.80);
  height: calc(40vmin / 12.80);
  line-height: calc(40vmin / 12.80);
  background: #FFF3E1;
  border-radius: calc(8vmin / 12.80) 0 0 calc(8vmin / 12.80);
  font-weight: bold;
  font-size: calc(20vmin / 12.80);
  color: #D6AB6A;
  text-align: center;
  margin-bottom: calc(12vmin / 12.80);
}

.portrait-main .interviewee-content .interviewee-content-right .search-content {
  width: calc(100% - 106vmin / 12.80);
  overflow: hidden;
  transition: max-height 0.4s linear;
}

.portrait-main .interviewee-content .interviewee-content-right .search-content-max {
  max-height: calc(200vmax / 12.80);
}
.portrait-main .interviewee-content .interviewee-content-right .search-content-min {
  max-height: 0;
}

.portrait-main .interviewee-content .interviewee-content-right .search-content .content-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.portrait-main .interviewee-content .interviewee-content-right .search-content .search-item {
  width: calc(100% / 3 - 10vmin / 12.80);
  color: #145676;
  margin-bottom: calc(16vmin / 12.80);
  box-sizing: border-box;
  display: flex;
  justify-content: left;
  align-items: center;
}

.portrait-main .interviewee-content .interviewee-content-right .search-content .search-item > text {
  font-size: calc(20vmin / 12.80);
  height: calc(44vmin / 12.80);
  line-height: calc(44vmin / 12.80);
  padding-right: calc(8vmin / 12.80);
  padding-left: calc(8vmin / 12.80);
  box-sizing: border-box;
}

.portrait-main .interviewee-content .interviewee-content-right .search-content .search-item .search-input {
  font-size: calc(20vmin / 12.80);
  /*width: calc(100% - 80vmin / 12.80);*/
  flex: 1;
  height: calc(44vmin / 12.80);
  line-height: calc(44vmin / 12.80);
  /*margin-left: 6rpx;*/
  padding: 0 calc(8vmin / 12.80);
  box-sizing: border-box;
  color: #09AECC;
}

.portrait-main .interviewee-content .interviewee-content-right .search-content .search-item .search-input-placeholder {
  font-size: calc(20vmin / 12.80);
  color: #B5D7E7;
}

.portrait-main .interviewee-content .interviewee-content-right .search-content .search-btn {
  display: flex;
  justify-content: flex-end;
  margin-bottom: calc(20vmin / 12.80);
}

.portrait-main .interviewee-content .interviewee-content-right .search-content .search-btn .click-search,
.portrait-main .interviewee-content .interviewee-content-right .search-content .search-btn .click-clear {
  width: calc(170vmin / 12.80);
  height: calc(46vmin / 12.80);
  line-height: calc(46vmin / 12.80);
  text-align: center;
  border-radius: calc(20vmin / 12.80);
  font-weight: 500;
  font-size: calc(22vmin / 12.80);
}

.portrait-main .interviewee-content .interviewee-content-right .search-content .search-btn .click-search {
  background: #146576;
  color: #FFFFFF;
  margin-right: calc(35vmin / 12.80);
}

.portrait-main .interviewee-content .interviewee-content-right .search-content .search-btn .click-clear {
  color: #146576;
  border: calc(1vmin / 12.80) solid #146576;
}

.portrait-main .interviewee-content .interviewee-content-right .input-shadow {
  box-shadow: 0 0  calc(4vmin / 12.80) 0 rgba(185,238,243,0.98);
  border-radius: calc(2vmin / 12.80);
  border: calc(1vmin / 12.80) solid #B8EFF3;
}

.portrait-main .interviewee-content .interviewee-content-right .floor-detail {
  margin-top: calc(10vmin / 12.80);
  overflow: hidden;
  transition: max-height 0.4s linear;
  width: calc(100% - 106vmin / 12.80);
}

.portrait-main .interviewee-content .interviewee-content-right .floor-detail .floor-detail-item {
  width: calc((100% - calc(72vmin / 12.80)) / 3);
  height: calc(84vmin / 12.80);
  background: #D1F4F7;
  border-radius: calc(12vmin / 12.80);
  font-size: calc(22vmin / 12.80);
  color: #145676;
  padding: calc(12vmin / 12.80);
  margin-bottom: calc(10vmin / 12.80);
  box-sizing: border-box;
  margin-left: calc(36vmin / 12.80);
}
.portrait-main .interviewee-content .interviewee-content-right .floor-detail .floor-detail-item > view {
  height: calc(30vmin / 12.80);
  line-height: calc(30vmin / 12.80);
  width: 100%;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portrait-main .interviewee-content .interviewee-content-right .floor-detail .floor-detail-item:nth-child(3n - 2) {
  margin-left: 0 !important;
}

.portrait-main .interviewee-content .interviewee-content-right .num-page {
  position: absolute;
  bottom: calc(15vmin / 12.80);
}

.portrait-main .interviewee-content .interviewee-content-right .num-page .previous,
.portrait-main .interviewee-content .interviewee-content-right .num-page .next {
  width: calc(170vmin / 12.80);
  height: calc(40vmin / 12.80);
  line-height: calc(40vmin / 12.80);
  display: inline-block;
  background: #FFF3E1;
  border-radius: calc(20vmin / 12.80);
  font-weight: 500;
  font-size: calc(22vmin / 12.80);
  color: #D6AB6A;
  text-align: center;
}

.portrait-main .interviewee-content .interviewee-content-right .num-page .total {
  display: inline-block;
  font-weight: 500;
  font-size: calc(20vmin / 12.80);
  color: #D6AB6A;
  margin: 0 calc(20vmin / 12.80);
}

.portrait-main .interviewee-content .interviewee-content-right .enter {
  margin-top: calc(35vmin / 12.80);
  width: calc(100% - 24vmin / 12.80);
}

.portrait-main .interviewee-content .interviewee-content-right .enter .enter-item {
  font-size: calc(22vmin / 12.80);
  color: #145676;
  margin-bottom: calc(22vmin / 12.80);
}

.portrait-main .interviewee-content .interviewee-content-right .enter .enter-item > text {
  width:  calc(80vmin / 12.80);
  margin-top: calc(10vmin / 12.80);
}

.portrait-main .interviewee-content .interviewee-content-right .enter .enter-item .enter-input {
  font-size: calc(22vmin / 12.80);
  height: calc(44vmin / 12.80);
  line-height: calc(44vmin / 12.80);
  width: calc(250vmin / 12.80);
  margin-left: calc(20vmin / 12.80);
  padding: 0 calc(15vmin / 12.80);
  color: #09AECC;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portrait-main .interviewee-content .interviewee-content-right .enter .enter-item .enter-input-placeholder {
  font-size: calc(22vmin / 12.80);
  color: #B5D7E7;
}

.portrait-main .interviewee-content .interviewee-content-right .enter-clear {
  width: calc(170vmin / 12.80);
  height: calc(40vmin / 12.80);
  line-height: calc(40vmin / 12.80);
  margin-top: calc(47vmin / 12.80);
  display: inline-block;
  background: #FFF3E1;
  border-radius: calc(20vmin / 12.80);
  font-weight: 500;
  font-size: calc(22vmin / 12.80);
  color: #D6AB6A;
  text-align: center;
}

.portrait-main .interviewee-content .interviewee-content-right .right-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: calc(100% - 106vmin / 12.80);
  margin-bottom: calc(20vmin / 12.80);
}

.portrait-main .interviewee-content .interviewee-content-right .right-top .right-top-tit {
  width: 50%;
  height: calc(46vmin / 12.80);
  line-height: calc(46vmin / 12.80);
}

.portrait-main .interviewee-content .interviewee-content-right .right-top .right-top-screen {
  text-align: right;
  height: calc(46vmin / 12.80);
  line-height: calc(46vmin / 12.80);
  display: flex;
  justify-content: center;
  align-items: center;
}

.portrait-main .interviewee-content .interviewee-content-right .right-top .right-top-screen .floor {
  font-weight: bold;
  font-size: calc(20vmin / 12.80);
  color: #D6AB6A;
  height: calc(46vmin / 12.80);
  line-height: calc(46vmin / 12.80);
  display: inline-block;
}

.portrait-main .interviewee-content .interviewee-content-right .right-top .right-top-screen .screen {
  font-weight: bold;
  font-size: calc(22vmin / 12.80);
  color: #80c269;
  margin-left: calc(24vmin / 12.80);
  height: calc(46vmin / 12.80);
  line-height: calc(46vmin / 12.80);
  display: flex;
  justify-content: center;
  align-items: center;
}

.portrait-main .interviewee-content .interviewee-content-right .right-top .right-top-screen .hidden-icon {
  width: calc(28vmin / 12.80);
  height: calc(28vmin / 12.80);
  margin-left: calc(10vmin / 12.80);
  vertical-align: middle;
}

/* 键盘样式开始 */

/* 键盘 */
.portrait-main .interviewee-content .keyboard {
  position: fixed;
  width: calc(640vmin / 12.80);
  padding: 0 calc(15vmin / 12.80) calc(15vmin / 12.80) calc(15vmin / 12.80);
  /*height: calc(480vmin / 12.80);*/
  bottom: calc(150vmin / 12.80);
  right: calc(180vmin / 12.80);
  z-index: 99;
  /*background-color: #fff;*/
  border: 0 solid #B8EFF3;
  box-shadow: 0 0 calc(8vmin / 12.80) 0 rgba(115, 218, 228, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: calc(16vmin / 12.80);
  background: linear-gradient(180deg, #00E3C5 0%, #07D3E0 100%);
}
.portrait-main .interviewee-content .keyboard .keyboard-tit {
  color: rgba(20, 86, 118, 1);
  font-size: calc(28vmin / 12.80);
  font-weight: 700;
  height: calc(60vmin / 12.80);
  line-height: calc(60vmin / 12.80);
}

.portrait-main .interviewee-content .keyboard .keyboard-mini {
  background-color: #fff;
  padding: calc(15vmin / 12.80) 0;
  position: relative;
  /*height: calc(375vmin / 12.80);*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: calc(16vmin / 12.80);
}

.portrait-main .interviewee-content .keyboard .keyboard-mini .provinces,
.portrait-main .interviewee-content .keyboard .keyboard-mini .keyNums{
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

.portrait-main .interviewee-content .keyboard .kb-btn-box {
  width: calc(295vmin / 12.80);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.portrait-main .interviewee-content .keyboard .kb-btn-box .kb-delete-btn {
  background: rgba(225, 69, 69, 1) !important;
  color: #fff;
  width: calc(140vmin / 12.80);
  height: calc(42vmin / 12.80);
  line-height: calc(42vmin / 12.80);
  border-radius: calc(24vmin / 12.80);
  font-size: calc(22vmin / 12.80);
  text-align: center;
}

.portrait-main .interviewee-content .keyboard .kb-btn-box .kb-sure-btn {
  background: #ccc;
  color: #fff;
  width: calc(140vmin / 12.80);
  height: calc(42vmin / 12.80);
  line-height: calc(42vmin / 12.80);
  border-radius: calc(24vmin / 12.80);
  font-size: calc(22vmin / 12.80);
  text-align: center;
}

.portrait-main .interviewee-content .keyboard .kb-btn-box .down-blue {
  background-color: rgba(24, 186, 255, 1) !important;
  color: #ffffff !important;
}

.portrait-main .interviewee-content .keyboard .keyboard-mini .pro-li {
  background: rgba(208, 244, 248, 1);
  color: #145676;
  width: calc(50vmin / 12.80);
  height: calc(60vmin / 12.80);
  line-height: calc(60vmin / 12.80);
  border-radius: calc(10vmin / 12.80);
  font-size: calc(22vmin / 12.80);
  text-align: center;
  margin: 0 calc(15vmin / 12.80) calc(15vmin / 12.80) calc(15vmin / 12.80);
}

/* 键盘样式结束 */

/* 多选楼层开始 */
.portrait-main .interviewee-content .floor-box {
  position: absolute;
  top: calc(120vmin / 12.80);
  left: 50%;
  transform: translateX(-50%);
  /*width: calc(880vmin / 12.80);*/
  /*height: calc(470vmin / 12.80);*/
  padding: 0 calc(20vmin / 12.80) calc(20vmin / 12.80) calc(20vmin / 12.80);
  background-color: #01e2c7;
  border-radius:  calc(16vmin / 12.80);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.portrait-main .interviewee-content .floor-box  .floor-tit {
  position: relative;
  color: rgba(20, 86, 118, 1);
  font-size: calc(28vmin / 12.80);
  font-weight: 700;
  height: calc(60vmin / 12.80);
  line-height: calc(60vmin / 12.80);
}

.portrait-main .interviewee-content .floor-box .floor-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(880vmin / 12.80);
}

.portrait-main .interviewee-content .floor-box .floor-content .box-content {
  position: relative;
  background-color: #fff;
  border-radius: calc(10vmin / 12.80);
  width: calc(640vmin / 12.80);
  height: calc(440vmin / 12.80);
  padding: calc(30vmin / 12.80);
  box-sizing: border-box;
}

.portrait-main .interviewee-content .floor-box .floor-content .box-content .floor-item {
  height: calc(310vmin / 12.80);
  overflow: hidden;
  overflow-y: auto;
}

.portrait-main .interviewee-content .floor-box .floor-content .box-content .floor-item .floor-item-box {
  font-size: calc(20vmin / 12.80);
  display: inline-block;
  background-color: #d0f4f8;
  color: rgba(20, 86, 118, 1);
  width: calc(130vmin / 12.80);
  height: calc(56vmin / 12.80);
  line-height: calc(56vmin / 12.80);
  text-align: center;
  border-radius: calc(8vmin / 12.80);
  margin-bottom: calc(10vmin / 12.80);
  margin-right: calc(20vmin / 12.80);
}

.portrait-main .interviewee-content .floor-box .floor-content .box-content .floor-item .floor-item-box:nth-child(4n) {
  margin-right: 0;
}

.portrait-main .interviewee-content .floor-box .floor-content .box-content .floor-item .choose-floor-item {
  background-color: #13a1b4;
  color: #fff;
}

.portrait-main .interviewee-content .floor-box .floor-content .box-content .floor-btn {
  position: absolute;
  left: 50%;
  width: calc(330vmin / 12.80);
  padding: calc(20vmin / 12.80) 0;
  margin-top: calc(10vmin / 12.80);
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.portrait-main .interviewee-content .floor-box .floor-content .box-content .floor-btn .floor-btn-css {
  display: inline-block;
  font-size: calc(20vmin / 12.80);
  border-radius: calc(24vmin / 12.80);
  width: calc(140vmin / 12.80);
  height: calc(42vmin / 12.80);
  line-height: calc(42vmin / 12.80);
  text-align: center;
}

.portrait-main .interviewee-content .floor-box .floor-content .box-content .floor-btn .floor-cancel {
  background-color: #b1e3ff;
  color: rgba(21, 140, 207, 1);
}

.portrait-main .interviewee-content .floor-box .floor-content .box-content .floor-btn .floor-sure {
  background-color: #18baff;
  color: rgba(255, 255, 255, 1);
}

.portrait-main .interviewee-content .floor-box .floor-content .selected-floor {
  position: relative;
  background-color: #fff;
  border-radius: calc(10vmin / 12.80);
  width: calc(220vmin / 12.80);
  height: calc(440vmin / 12.80);
  overflow-y: auto;
  padding: calc(30vmin / 12.80) calc(20vmin / 12.80);
  box-sizing: border-box;
}

.portrait-main .interviewee-content .floor-box .floor-content .selected-floor .selected-floor-item {
  background-color: #13a2b5;
  color: #fff;
  width: calc(80vmin / 12.80);
  height: calc(32vmin / 12.80);
  line-height: calc(32vmin / 12.80);
  /* text-align: center; */
  border-radius: calc(24vmin / 12.80);
  margin-bottom: calc(12vmin / 12.80);
  font-size: calc(16vmin / 12.80);
  position: relative;
  padding-left: calc(20vmin / 12.80);
  box-sizing: border-box;
  display: inline-block;
}

.portrait-main .interviewee-content .floor-box .floor-content .selected-floor .selected-floor-item:nth-child(2n - 1) {
  margin-right: calc(20vmin / 12.80);
}

.portrait-main .interviewee-content .floor-box .floor-content .selected-floor .delete-icon {
  position: absolute;
  top: calc(10vmin / 12.80);
  right: calc(12vmin / 12.80);
  width: calc(12vmin / 12.80);
  height: calc(12vmin / 12.80);
}