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

.main .visitor-list-content {
  padding: 0 calc(24vmax / 12.80);
}

.main .visitor-list-content .search-box {
  margin-top: calc(20vmax / 12.80);
  width: 100%;
}

.main .visitor-list-content .search-box .search-form {
  width: calc(100% - 165vmax / 12.80);
  overflow: auto;
}

.main .visitor-list-content .search-box .search-form .form-item{
}

.main .visitor-list-content .search-box .search-form .form-item>text{
  text-align: right;
  width: calc(80vmax / 12.80);
  padding: 0 calc(5vmax / 12.80);
  font-size: calc(16vmax / 12.80);
  box-sizing: border-box;
}

.main .visitor-list-content .search-box .search-form .form-item .input {
  width: calc(130vmax / 12.80);
  height: calc(40vmax / 12.80);
  line-height: calc(40vmax / 12.80);
  background: #FFFFFF;
  border-radius: calc(4vmax / 12.80);
  /* border: 1px solid #B8EFF3; */
  box-sizing: border-box;
  font-size: calc(16vmax / 12.80);
  padding: 0 calc(10vmax / 12.80);
  color: #00A2FF;
}


.main .visitor-list-content .search-box .search-form .form-item .wid-time {
  width: calc(180vmax / 12.80);
}

.main .visitor-list-content .search-box .search-form .form-item .time-placeholder {
  font-size: calc(16vmax / 12.80);
  color: #B5D7E7 !important;
}

.main .visitor-list-content .search-box .search-form .form-item .pad {
  padding: 0 calc(10vmax / 12.80);
}

.main .visitor-list-content .search-box .search-btn {
  width: calc(200vmax / 12.80);
  padding-left: calc(10vmax / 12.80);
}

.main .visitor-list-content .search-box .search-btn .inquire,
.main .visitor-list-content .search-box .search-btn .clear {
  width: calc(70vmax / 12.80);
  height: calc(40vmax / 12.80);
  line-height: calc(40vmax / 12.80);
  font-size: calc(16vmax / 12.80);
  border-radius: calc(4vmax / 12.80);
  text-align: center;
}

.main .visitor-list-content .search-box .search-btn .close {
  background-color: #f49219;
  width: calc(40vmax / 12.80);
  height: calc(40vmax / 12.80);
  line-height: calc(40vmax / 12.80);
  border-radius: 50%;
  color: #fff;
  text-align: center;
}

.main .visitor-list-content .search-box .search-btn .inquire {
  background: #1689FF;
  border: 1px solid #B8EFF3;
  color: #FFFFFF;
}

.main .visitor-list-content .search-box .search-btn .clear {
  color: #614B33;
  background-color: #fdf3e0;
}

.main .visitor-list-content .box-shadow-left {
  box-shadow: calc(-14vmax / 12.80) 0 calc(14vmax / 12.80) rgb(0 0 0 / 20%); /* 向右的阴影 */
}

.main .visitor-list-content .box-shadow-right {
  box-shadow: calc(14vmax / 12.80) 0 calc(14vmax / 12.80) rgb(0 0 0 / 20%); /* 向右的阴影 */
}

.main .visitor-list-content .table-box-fixed-left {
  width: calc(205vmax / 12.80) !important;
}
.main .visitor-list-content .table-box-fixed-center {
  width: calc(100% - 205vmax / 12.80 - 80vmax / 12.80) !important;
}
.main .visitor-list-content .table-box-fixed-right {
  width: calc(80vmax / 12.80) !important;
}

.main .visitor-list-content .table-box {
  min-height: calc(520vmax / 12.80);
  margin-top: calc(10vmax / 12.80);
  overflow: auto;
  /*background: #B8EFF2;*/
  position: relative;
  top: 0;
}

.main .visitor-list-content .table-box .table-tit {
  height: calc(40vmax / 12.80);
  width: calc(1820vmax / 12.80);
  background: #1689FF;
  border-radius: calc(2vmax / 12.80);
  border: 1px solid #B8EFF3;
  box-sizing: border-box;
}

.main .visitor-list-content .table-box .table-tit .tit-item {
  font-size: calc(18vmax / 12.80);
  color: #FFFFFF;
  text-align: center;
}

.main .visitor-list-content .table-box  .one {
  width: calc(75vmax / 12.80);
}

.main .visitor-list-content .table-box  .two {
  width: calc(130vmax / 12.80);
}

.main .visitor-list-content .table-box  .three {
  width: calc(200vmax / 12.80);
}

.main .visitor-list-content .table-box  .four {
  width: calc(190vmax / 12.80);
}

.main .visitor-list-content .table-box  .five {
  width: calc(170vmax / 12.80);
}

.main .visitor-list-content .table-box  .six {
  width: calc(120vmax / 12.80);
}

.main .visitor-list-content .table-box  .seven {
  width: calc(150vmax / 12.80);
}

.main .visitor-list-content .table-box  .eight {
  width: calc(250vmax / 12.80);
}

.main .visitor-list-content .table-box  .nine {
  width: calc(320vmax / 12.80);
}

.main .visitor-list-content .table-box  .eight>view ,
.main .visitor-list-content .table-box  .nine>view {
  line-height: calc(24vmax / 12.80);
}

.main .visitor-list-content .table-box  .ten {
  width: calc(120vmax / 12.80);
}

.main .visitor-list-content .table-box  .eleven {
  width: calc(120vmax / 12.80);
}

.main .visitor-list-content .table-box  .twelve {
  width: calc(80vmax / 12.80);
}

.main .visitor-list-content .table-box  .item-fixed-right {
  /*position: fixed;*/
  /*background: #B8EFF2;*/
  /*right: calc(24vmax / 12.80);*/
}

.main .visitor-list-content .table-box  .checkOut {
  width: calc(66vmax / 12.80);
  height: calc(40vmax / 12.80);
  line-height: calc(40vmax / 12.80);
  border-radius: calc(20vmax / 12.80);
  border: calc(2vmax / 12.80) solid #3398FF;
  color: #007EFF;
  font-size: calc(16vmax / 12.80);
  text-align: center;
}

.main .visitor-list-content .table-box .table-content {
  width: calc(1820vmax / 12.80);
  /*height: calc(100%);*/
}

.main .visitor-list-content .table-box .horizontal-box {
  border-bottom: calc(1vmax / 12.80) solid #79BBE9;
  box-sizing: border-box;
}

.main .visitor-list-content .table-box .table-content .table-item {
  height: calc(66vmax / 12.80);
  font-size: calc(16vmax / 12.80);
  color: #145676;
}

.main .visitor-list-content .pagination {
  margin-top: calc(10vmax / 12.80);
}

.main .visitor-list-content .pagination .previous,
.main .visitor-list-content .pagination .next {
  width: calc(130vmax / 12.80);
  height: calc(40vmax / 12.80);
  line-height: calc(40vmax / 12.80);
  text-align: center;
  background: #3398FF;
  border-radius: calc(20vmax / 12.80);
  font-size: calc(18vmax / 12.80);
  color: #FFFFFF;
  margin: 0 calc(10vmax / 12.80);
}

.main .visitor-list-content .pagination .total {
  margin: 0 calc(10vmax / 12.80);
  height: calc(40vmax / 12.80);
  line-height: calc(40vmax / 12.80);
  font-size: calc(16vmax / 12.80);
  color: #145676;
  position: absolute;
  left: calc(24vmax / 12.80);
}

/* 键盘样式开始 */

/* 键盘 */
.main .visitor-list-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);*/
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 99;
  /*background-color: #fff;*/
  border: 0 solid #1689FF;
  box-shadow: 0 0 calc(8vmax / 12.80) 0 rgba(22, 137, 255, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: calc(16vmax / 12.80);
  background: linear-gradient(180deg, #1689FF 0%, #07D3E0 100%);
}
.main .visitor-list-content .keyboard .keyboard-tit {
  color: #fff;
  font-size: calc(28vmax / 12.80);
  font-weight: 700;
  height: calc(60vmax / 12.80);
  line-height: calc(60vmax / 12.80);
}

.main .visitor-list-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 .visitor-list-content .keyboard .keyboard-mini .provinces,
.main .visitor-list-content .keyboard .keyboard-mini .keyNums{
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

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

.main .visitor-list-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 .visitor-list-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 .visitor-list-content .keyboard .kb-btn-box .down-blue {
  background-color: rgba(24, 186, 255, 1) !important;
  color: #ffffff !important;
}

.main .visitor-list-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);
}

/* 键盘样式结束 */

/*竖屏样式*/
.portrait-main .visitor-list-content {
  padding: 0 calc(24vmin / 12.80);
}

.portrait-main .visitor-list-content .search-box {
  margin-top: calc(20vmin / 12.80);
  width: 100%;
}

.portrait-main .visitor-list-content .search-box .search-form {
  width: calc(100% - 165vmin / 12.80);
  overflow: auto;
}

.portrait-main .visitor-list-content .search-box .search-form .form-item{
}

.portrait-main .visitor-list-content .search-box .search-form .form-item>text{
  text-align: right;
  width: calc(80vmin / 12.80);
  padding: 0 calc(5vmin / 12.80);
  font-size: calc(16vmin / 12.80);
  box-sizing: border-box;
}

.portrait-main .visitor-list-content .search-box .search-form .form-item .input {
  width: calc(130vmin / 12.80);
  height: calc(40vmin / 12.80);
  line-height: calc(40vmin / 12.80);
  background: #FFFFFF;
  border-radius: calc(4vmin / 12.80);
  /* border: 1px solid #B8EFF3; */
  box-sizing: border-box;
  font-size: calc(16vmin / 12.80);
  padding: 0 calc(10vmin / 12.80);
  color: #00A2FF;
}


.portrait-main .visitor-list-content .search-box .search-form .form-item .wid-time {
  width: calc(180vmin / 12.80);
}

.portrait-main .visitor-list-content .search-box .search-form .form-item .time-placeholder {
  font-size: calc(16vmin / 12.80);
  color: #B5D7E7 !important;
}

.portrait-main .visitor-list-content .search-box .search-form .form-item .pad {
  padding: 0 calc(10vmin / 12.80);
}

.portrait-main .visitor-list-content .search-box .search-btn {
  width: calc(200vmin / 12.80);
  padding-left: calc(10vmin / 12.80);
}

.portrait-main .visitor-list-content .search-box .search-btn .inquire,
.portrait-main .visitor-list-content .search-box .search-btn .clear {
  width: calc(70vmin / 12.80);
  height: calc(40vmin / 12.80);
  line-height: calc(40vmin / 12.80);
  font-size: calc(16vmin / 12.80);
  border-radius: calc(4vmin / 12.80);
  text-align: center;
}

.portrait-main .visitor-list-content .search-box .search-btn .close {
  background-color: #f49219;
  width: calc(40vmin / 12.80);
  height: calc(40vmin / 12.80);
  line-height: calc(40vmin / 12.80);
  border-radius: 50%;
  color: #fff;
  text-align: center;
}

.portrait-main .visitor-list-content .search-box .search-btn .inquire {
  background: #1689FF;
  border: 1px solid #B8EFF3;
  color: #FFFFFF;
}

.portrait-main .visitor-list-content .search-box .search-btn .clear {
  color: #614B33;
  background-color: #fdf3e0;
}

.portrait-main .visitor-list-content .box-shadow-left {
  box-shadow: calc(-14vmin / 12.80) 0 calc(14vmin / 12.80) rgb(0 0 0 / 20%); /* 向右的阴影 */
}

.portrait-main .visitor-list-content .box-shadow-right {
  box-shadow: calc(14vmin / 12.80) 0 calc(14vmin / 12.80) rgb(0 0 0 / 20%); /* 向右的阴影 */
}

.portrait-main .visitor-list-content .table-box-fixed-left {
  width: calc(205vmin / 12.80) !important;
}
.portrait-main .visitor-list-content .table-box-fixed-center {
  width: calc(100% - 205vmin / 12.80 - 80vmin / 12.80) !important;
}
.portrait-main .visitor-list-content .table-box-fixed-right {
  width: calc(80vmin / 12.80) !important;
}

.portrait-main .visitor-list-content .table-box {
  min-height: calc(520vmin / 12.80);
  margin-top: calc(10vmin / 12.80);
  overflow: auto;
  /*background: #B8EFF2;*/
  position: relative;
  top: 0;
}

.portrait-main .visitor-list-content .table-box .table-tit {
  height: calc(40vmin / 12.80);
  width: calc(1820vmin / 12.80);
  background: #1689FF;
  border-radius: calc(2vmin / 12.80);
  border: 1px solid #B8EFF3;
  box-sizing: border-box;
}

.portrait-main .visitor-list-content .table-box .table-tit .tit-item {
  font-size: calc(18vmin / 12.80);
  color: #FFFFFF;
  text-align: center;
}

.portrait-main .visitor-list-content .table-box  .one {
  width: calc(75vmin / 12.80);
}

.portrait-main .visitor-list-content .table-box  .two {
  width: calc(130vmin / 12.80);
}

.portrait-main .visitor-list-content .table-box  .three {
  width: calc(200vmin / 12.80);
}

.portrait-main .visitor-list-content .table-box  .four {
  width: calc(190vmin / 12.80);
}

.portrait-main .visitor-list-content .table-box  .five {
  width: calc(170vmin / 12.80);
}

.portrait-main .visitor-list-content .table-box  .six {
  width: calc(120vmin / 12.80);
}

.portrait-main .visitor-list-content .table-box  .seven {
  width: calc(150vmin / 12.80);
}

.portrait-main .visitor-list-content .table-box  .eight {
  width: calc(250vmin / 12.80);
}

.portrait-main .visitor-list-content .table-box  .nine {
  width: calc(320vmin / 12.80);
}

.portrait-main .visitor-list-content .table-box  .eight>view ,
.portrait-main .visitor-list-content .table-box  .nine>view {
  line-height: calc(24vmin / 12.80);
}

.portrait-main .visitor-list-content .table-box  .ten {
  width: calc(120vmin / 12.80);
}

.portrait-main .visitor-list-content .table-box  .eleven {
  width: calc(120vmin / 12.80);
}

.portrait-main .visitor-list-content .table-box  .twelve {
  width: calc(80vmin / 12.80);
}

.portrait-main .visitor-list-content .table-box  .item-fixed-right {
  /*position: fixed;*/
  /*background: #B8EFF2;*/
  /*right: calc(24vmin / 12.80);*/
}

.portrait-main .visitor-list-content .table-box  .checkOut {
  width: calc(66vmin / 12.80);
  height: calc(40vmin / 12.80);
  line-height: calc(40vmin / 12.80);
  border-radius: calc(20vmin / 12.80);
  border: calc(2vmin / 12.80) solid #3398FF;
  color: #007EFF;
  font-size: calc(16vmin / 12.80);
  text-align: center;
}

.portrait-main .visitor-list-content .table-box .table-content {
  width: calc(1820vmin / 12.80);
  /*height: calc(100%);*/
}

.portrait-main .visitor-list-content .table-box .horizontal-box {
  border-bottom: calc(1vmin / 12.80) solid #79BBE9;
  box-sizing: border-box;
}

.portrait-main .visitor-list-content .table-box .table-content .table-item {
  height: calc(66vmin / 12.80);
  font-size: calc(16vmin / 12.80);
  color: #145676;
}

.portrait-main .visitor-list-content .pagination {
  margin-top: calc(10vmin / 12.80);
}

.portrait-main .visitor-list-content .pagination .previous,
.portrait-main .visitor-list-content .pagination .next {
  width: calc(130vmin / 12.80);
  height: calc(40vmin / 12.80);
  line-height: calc(40vmin / 12.80);
  text-align: center;
  background: #3398FF;
  border-radius: calc(20vmin / 12.80);
  font-size: calc(18vmin / 12.80);
  color: #FFFFFF;
  margin: 0 calc(10vmin / 12.80);
}

.portrait-main .visitor-list-content .pagination .total {
  margin: 0 calc(10vmin / 12.80);
  height: calc(40vmin / 12.80);
  line-height: calc(40vmin / 12.80);
  font-size: calc(16vmin / 12.80);
  color: #145676;
  position: absolute;
  left: calc(24vmin / 12.80);
}

/* 键盘样式开始 */

/* 键盘 */
.portrait-main .visitor-list-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);*/
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 99;
  /*background-color: #fff;*/
  border: 0 solid #1689FF;
  box-shadow: 0 0 calc(8vmin / 12.80) 0 rgba(22, 137, 255, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: calc(16vmin / 12.80);
  background: linear-gradient(180deg, #1689FF 0%, #07D3E0 100%);
}
.portrait-main .visitor-list-content .keyboard .keyboard-tit {
  color: #fff;
  font-size: calc(28vmin / 12.80);
  font-weight: 700;
  height: calc(60vmin / 12.80);
  line-height: calc(60vmin / 12.80);
}

.portrait-main .visitor-list-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 .visitor-list-content .keyboard .keyboard-mini .provinces,
.portrait-main .visitor-list-content .keyboard .keyboard-mini .keyNums{
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

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

.portrait-main .visitor-list-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 .visitor-list-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 .visitor-list-content .keyboard .kb-btn-box .down-blue {
  background-color: rgba(24, 186, 255, 1) !important;
  color: #ffffff !important;
}

.portrait-main .visitor-list-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);
}

/* 键盘样式结束 */