/*穿梭框*/ #transfer{ display: flex; height: 300px; } .tra-left,.tra-right{ border: 1px solid #cecece; flex: 1; border-radius: 5px; height: 100%; display: flex; flex-direction: column; } .tra-center{ width: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .tra-center button{ margin: 10px 0; } .tra-header{ display: flex; align-items: center; height: 30px; background: #F9FAFC; } .tra-header-left{ width: 50px; text-align: center; } .tra-header-center{ flex: 1; } .tra-header-right{ width: 50px; text-align: center; } .tra-icon{ width: 20px; font-size: 16px; } .tra-tab{ height: 35px; border: 1px solid #cecece; display: flex; border-left: 0; border-right: 0; align-items: center; padding: 0 10px; box-sizing: border-box; } .activeBottom{ border-bottom: 2px solid #2D8CF0!important; transition:all 0.3s; } .tra-tab-pic{ width: 100px; text-align: center; cursor: pointer; display: flex; justify-content: center; align-items: center; height: 100%; margin-bottom: 2px; border-bottom: 2px solid #fff; /*box-sizing: border-box;*/ } .tra-search{ height: 40px; position: relative; display: flex; align-items: center; overflow: hidden; padding: 0 5px; box-sizing: border-box; } .searchicon{ position: absolute; right: 20px; } .tra-content{ padding: 0 15px; flex: 1; overflow-y: auto; } .tra-empty-content{ padding: 0 15px; flex: 1; display: flex; justify-content: center; align-items: center; } .tra-item{ height: 25px; display: flex; align-items: center; } .tra-item span{ padding-left: 5px; font-size: 14px; } .tra-pointer{ cursor: pointer; } /*滚动条样式*/ .tra-content::-webkit-scrollbar { /*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .tra-content::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2); } .tra-content::-webkit-scrollbar-track { /*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 0; background: rgba(0, 0, 0, 0.1); }