.category-page { font-size: 15PX; .search-input { position: relative; background-color: #f8f8f8; padding: 13px 20px; p { box-sizing: border-box; width: 100%; height: 60px; line-height: 60px; border: none; padding-left: 66px; border-radius: 60px; font-size: 13PX; background: #fff; color: #999; } } .search-icon { position: absolute; top: 0; bottom: 0; left: 43px; line-height: 86px; color: #999; } .category-nav { height: 70px; border-bottom: 1px solid #e6e6e6; li { display: block; box-sizing: border-box; float: left; height: 100%; padding: 20px 0; width: 25%; text-align: center; color: #999; &:last-child { border-right: none; } &.focus { color: #000; } &.bytouch { background: #eee; } } span { display: block; width: 100%; height: 30px; line-height: 30px; font-size: 15PX; border-right: 1px solid #e6e6e6; } li:last-child span { border-right: 0; } } .category-container { margin-bottom: 100px; } .content { background: #f8f8f8; overflow: hidden; position: relative; &.hide { display: none; } } .primary-level { float: left; box-sizing: border-box; width: 45%; > li { height: 89px; line-height: 89px; padding: 0 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; &.focus { background-color: #fff; } &.highlight { background-color: #eee; } } } .sub-level-container { float: left; overflow-x: auto; box-sizing: border-box; background: #fff; width: 55%; height: 100%; } .sub-level { width: 100%; &.hide { display: none; } > li { box-sizing: border-box; height: 89px; line-height: 89px; border-bottom: 1px solid #e6e6e6; padding-left: 20px; &.highlight { background: #eee; } &:last-child { border-bottom: none; } } a { display: block; height: 100%; width: 100%; color: #000; } } }