.tiled-select { display: flex; margin-bottom: 4rem; } .tiled-select .label { white-space: nowrap; display: flex; font-size: 20rem; font-family: 'Lucida Grande', 'PingFang SC-Bold', 'PingFang SC'; font-weight: 400; color: #666666; padding-right: 3%; line-height: 40rem; } .tiled-select .tileed-select-body { width: 0; flex: 1; } .tiled-select .tileed-select-body.tileed-select-body-shrink { height: 56rem; overflow: hidden; } .tiled-select .tileed-select-body.tileed-select-body-shrink.show { height: initial; } .tiled-select .tiled-select-item { float: left; min-width: 50rem; height: 43rem; font-size: 17rem; font-weight: 400; font-family: 'Lucida Grande', 'PingFangSC-Regular, PingFang SC'; color: #333333; background: #fff; line-height: 43rem; padding: 0 6rem; cursor: pointer; white-space: nowrap; margin-bottom: 15rem; margin-right: 15rem; text-align: center; } .tiled-select .tiled-select-item span { font-size: 20rem; font-weight: 400; font-family: 'Lucida Grande', 'PingFangSC-Regular, PingFang SC'; color: #333333; cursor: pointer; } .tiled-select .tiled-select-item.tiled-select-item-active { min-width: 50rem; height: 43rem; background: #ecf5fe; border-radius: 2rem; font-size: 20rem; font-family: 'Lucida Grande', 'PingFangSC-Regular, PingFang SC'; font-weight: bold; color: #037cfc; text-align: center; } .tiled-select .select-shrink { float: right; cursor: pointer; min-width: 50rem; height: 43rem; font-size: 20px; font-weight: 400; font-family: 'Lucida Grande', 'PingFangSC-Regular, PingFang SC'; color: var(--theme-color); background: #fff; line-height: 43rem; padding: 0 23rem; white-space: nowrap; margin-bottom: 15rem; } .tiled-select-item-first { width: 40rem; } .sorter-select { display: inline-flex; align-items: center; box-sizing: content-box; } .sorter-select .sorter-item { font-size: 22rem; font-weight: 500; color: #6d6d6d; height: 31px; margin-left: 30rem; cursor: pointer; user-select: none; display: flex; } .sorter-select .sorter-item:first-child { margin-left: 0; } .sorter-select .sorter-item .sorter-item-label { display: flex; align-items: center; position: relative; white-space: nowrap; padding-bottom: 5rem; } .sorter-select .sorter-item .sorter-item-icon { display: flex; flex-direction: column; justify-content: center; margin-left: 6rem; font-size: 12rem; } .sorter-select .sorter-item .sorter-item-icon > .el-icon { color: #6d6d6d; } .sorter-select .sorter-item.active.orange .sorter-item-label::after { background: #ff9a3d; } .sorter-select .sorter-item.active .sorter-item-label { color: #000000; } .sorter-select .sorter-item.active .sorter-item-label::after { position: absolute; left: 26.13%; right: 14.77%; bottom: -5rem; height: 4px; background: #308be9; content: ''; } .sorter-select .sorter-item.active.asc .sorter-item-icon .el-icon-caret-top { color: #000000; } .sorter-select .sorter-item.active.desc .sorter-item-icon .el-icon-caret-bottom { color: #000000; } .more { font-size: 20rem; font-family: 'Lucida Grande', 'Alibaba PuHuiTi 2.0-55 Regular', 'Alibaba PuHuiTi 20'; font-weight: 400; color: var(--theme-color); } .tiled-select .el-dropdown { margin-left: 0rem; } .dropdown-name { height: 48rem; font-size: 20rem; font-family: 'Lucida Grande', 'Alibaba PuHuiTi 2.0-55 Regular', 'Alibaba PuHuiTi 20'; font-weight: 400; color: #333333; line-height: 48rem; } .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover .dropdown-name { font-weight: 500 !important; color: var(--theme-color) !important; } .dropdown-name.active { font-weight: 500 !important; color: var(--theme-color) !important; }