@import "~@less/variables.less"; .infoContainer{ width: 100%; // min-width: 930px; height: 60px; display: flex; flex-direction: row; flex-wrap: wrap; .infoItem{ width: 25%; min-width: 25%; padding: 0px 10px; // min-width: 230px; float: left; flex: 1; height: 30px; border-right: 1px solid @person-table-color; display: flex; justify-content: center; align-items: center; label{ // min-width: 70px; text-align: center; } input{ flex:1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #000 } .selectBox{ flex:1; } select { // appearance:none; // -moz-appearance:none; // -webkit-appearance:none; background:#fff; height: 28px; flex:1; border: none; outline: none; } option{ display: inline-block; height: 40px; // width: 77%; } } .infoItem:nth-child(-n+4){ border-bottom: 1px solid @person-table-color; } } .table{ width: 100%; // display: none; // border:1px @border-color solid; float: left; td{ // border:1px @border-color solid; height:30px; line-height: 30px; padding-left: 10px; width: 200px; white-space: nowrap; } .tdBorderB { border-bottom: 1px solid @person-table-color; max-width: 110px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tdBorderR { border-right: 1px solid @person-table-color; max-width: 110px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } .newSize{ td{ overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; max-width: 110px; } } .selectBox { display: flex; align-items: center; .label { // display: inline-block; // padding-right: 8px; // color: #333333; } .select { flex : 1; position: relative; .selfInput { width:100%; box-sizing: border-box; margin: 0; padding: 0; list-style: none; display: inline-block; height: 32px; padding: 4px 11px; color: rgba(0, 0, 0, 0.65); font-size: 14px; line-height: 1.5; background-color: #fff; background-image: none; border-radius: 4px; transition: all 0.3s; overflow: visible; cursor: pointer; position: relative; top: 0px; background-color: transparent; } .inputHover { box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); border: 1px solid rgba(24, 144, 255, 1); } .down{ width: 20px; height: 20px; border-radius: 50%; // background-color: red; position: absolute; margin-top: -10px; top: 50%; left: 38px; cursor: pointer; img{ width: 16px; height: 10px; position: absolute; top: 50%; left: 50%; margin-left: -8px; margin-top: -5px; // width: 50%; // margin-bottom: 3px; } } .downActive{ width: 20px; height: 20px; border-radius: 50%; background-color: #E2F1F8; position: absolute; margin-top: -10px; top: 50%; left: 38px; cursor: pointer; img{ width: 16px; height: 10px; position: absolute; top: 50%; left: 50%; margin-left: -8px; margin-top: -5px; // width: 50%; // margin-bottom: 3px; } } .options { z-index: 666; width: 120px; box-sizing: border-box; position: absolute; top: 25px; left: -4px; color: rgba(0, 0, 0, 0.65); font-size: 14px; background-color: #fff; background-image: none; border: 1px solid #d9d9d9; border-radius: 4px; cursor: pointer; transition: 0.35s; opacity: 1; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3); .item { position: relative; line-height: 20px; padding: 8px; &:hover { background: rgba(226,241,248,1); } } } .optionsHidden { // opacity: 0; display: none; } // 修改输入框默认样式 input:-moz-placeholder, textarea:-moz-placeholder { color: #999999; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #999999; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #999999; } } }