.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); font-size: calc(16vmax / 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(-6vmax / 12.80) 0 calc(6vmax / 12.80) rgb(0 0 0 / 20%); /* 向右的阴影 */ } .main .visitor-list-content .box-shadow-right { box-shadow: calc(6vmax / 12.80) 0 calc(6vmax / 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 .keyboard-mask { position: fixed; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; z-index: 997; } .main .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: 998; /*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 .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 .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 .keyboard .keyboard-mini .provinces, .main .keyboard .keyboard-mini .keyNums{ overflow: hidden; display: flex; flex-wrap: wrap; } .main .keyboard .kb-btn-box { width: calc(295vmax / 12.80); display: flex; justify-content: space-between; align-items: center; } .main .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 .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 .keyboard .kb-btn-box .down-blue { background-color: rgba(24, 186, 255, 1) !important; color: #ffffff !important; } .main .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); font-size: calc(16vmin / 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(-6vmin / 12.80) 0 calc(6vmin / 12.80) rgb(0 0 0 / 20%); /* 向右的阴影 */ } .portrait-main .visitor-list-content .box-shadow-right { box-shadow: calc(6vmin / 12.80) 0 calc(6vmin / 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 .keyboard-mask { position: fixed; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; z-index: 997; } .portrait-main .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: 998; /*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 .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 .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 .keyboard .keyboard-mini .provinces, .portrait-main .keyboard .keyboard-mini .keyNums{ overflow: hidden; display: flex; flex-wrap: wrap; } .portrait-main .keyboard .kb-btn-box { width: calc(295vmin / 12.80); display: flex; justify-content: space-between; align-items: center; } .portrait-main .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 .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 .keyboard .kb-btn-box .down-blue { background-color: rgba(24, 186, 255, 1) !important; color: #ffffff !important; } .portrait-main .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); } /* 键盘样式结束 */