.malls { position: relative; width: 100vw; height: 100vh; box-sizing: border-box; color: #5a5a5a; font-family: SourceHanSansCN-Medium, SourceHanSansCN; } .malls .search-icon { position: absolute; width: 13px; height: 13px; top: 21px; left: 26px; z-index: 1; } .malls .close { position: absolute; border-radius: 50%; background: #8d8d8d; width: 20px; height: 20px; top: 17px; right: 19px; } .malls .input-wrapper { padding: 12px 14px 0 14px; } .malls .input-wrapper .input { padding: 5px 30px; background: #ececec; border-radius: 100px; height: 30px; line-height: 20px; font-size: 11px; box-sizing: border-box; } .malls .input-wrapper .placeholder { color: #a9a9a9; } .malls .list { padding: 0 50px 0 15px; line-height: 36px; height: calc(100vh - 42px); font-size: 12px; overflow: scroll; } .malls .list .item { border-bottom: 1px solid #f4f4f4; } .malls .main .r1 { padding: 18px 15px; line-height: 30px; } .malls .main .r1 .left { position: relative; display: inline-block; font-size: 14px; background: #f4f4f4; border-radius: 8px; border: 1px solid #ececec; padding: 0 30px; } .malls .main .r1 .left .pos { position: absolute; width: 14px; height: 16px; top: 7px; left: 9px; } .malls .main .r1 .left .up { position: absolute; right: 7.5px; top: 12.5px; width: 8px; height: 5px; transform-origin: center; transform: rotate(90deg); } .malls .main .r1 .left Text+Text { margin-left: 22px; } .malls .main .r1 .right { margin-left: 15px; font-size: 11px; font-weight: 400; color: darkgray; } .malls .main .r2 { padding-left: 15px; color: #a9a9a9; font-size: 11px; line-height: 11px; font-weight: 400; } .malls .main .malls-wrapper {} .malls .main .malls-wrapper .malls1 { position: relative; margin-top: 11px; padding-left: 15px; padding-right: 60px; height: 32px; overflow: hidden; background: #fff; z-index: 10; } .malls .main .malls-wrapper .malls1 .more { position: absolute; line-height: 30px; color: #a9a9a9; right: 14px; font-size: 11px; top: 0; } .malls .main .malls-wrapper .malls1.expand { box-shadow: 0px 15px 12px 0px rgba(0, 0, 0, 0.22); padding-right: 15px; padding-bottom: 17px; overflow: auto; height: auto; } .malls .main .malls-wrapper .malls1 .tag { color: #878787; font-size: 12px; padding: 0 11px; border-radius: 15px; border: 1px solid #ececec; line-height: 30px; display: inline-block; margin-bottom: 12px; margin-right: 10px; } .malls .main .malls-wrapper .malls1 .fold { position: absolute; bottom: 0; width: 8px; height: 5px; padding: 8px 6.5px; left: 0; right: 0; margin: auto; } .malls .main .malls-wrapper .malls1 .fold::after { content: ""; position: absolute; left: -5px; right: -5px; top: -5px; bottom: -5px; } .malls .main .at-indexes { position: absolute; top: 178px; border-top: 1px solid #f4f4f4; padding: 0 50px 0 15px; height: calc(100vh - 178px); } .malls .main .at-indexes .at-indexes__menu :first-child { display: none !important; } .malls .main .at-indexes .at-indexes__menu { top: 204px; font-size: 11px; transform: none; right: 15px; z-index: 1; text-align: center; } .malls .main .at-indexes .at-indexes__menu .at-indexes__menu-item { display: block; padding: 0; font-size: 11px; color: #a9a9a9; line-height: 15px; height: 15px; width: 15px; } .malls .main .at-indexes .at-indexes__menu .at-indexes__menu-item:active { background: #d6ab7e; color: white; border-radius: 50%; } .malls .main .at-indexes .at-list::after { content: none; } .malls .main .at-indexes .at-indexes__list-title { line-height: 36px; color: #878787; font-size: 12px; font-weight: 400; border-bottom: 1px solid #f4f4f4; background: none; padding: 0; } .malls .main .at-indexes .at-list__item { font-size: 12px; font-weight: 400; border-bottom: 1px solid #f4f4f4; padding: 0; } .malls .main .at-indexes .at-list__item .item-content__info-title { color: #5a5a5a; line-height: 36px; } .malls .main .at-indexes .at-list__item::after { content: none; } .malls .main .meta { font-size: 11px; font-weight: 400; margin-top: 7px; padding: 11px 0; color: #a9a9a9; } .malls .main .city-buttons { display: grid; grid-column-gap: 10px; grid-row-gap: 11px; grid-auto-rows: 30px; grid-auto-columns: 70px; grid-template-columns: 1fr 1fr 1fr 1fr; } .malls .main .city-buttons .city-button { display: inline-block; color: #878787; font-size: 12px; line-height: 30px; background: #f4f4f4; border-radius: 4px; text-align: center; } .malls .list-container { position: absolute; top: 178px; border-top: 1px solid #f4f4f4; padding: 0 50px 0 15px; height: calc(100vh - 178px); width: 100vw; box-sizing: border-box; } .malls .city-indexed .index { height: 36px; line-height: 36px; border-top: 1px solid #f4f4f4; border-bottom: 1px solid #f4f4f4; } .malls .city-indexed .index.first { border-top: none; } .malls .city-indexed .name { height: 36px; line-height: 36px; } .malls .indexes { position: absolute; top: 196px; font-size: 11px; right: 15px; z-index: 1; text-align: center; } .malls .indexes .li { display: block; padding: 0; font-size: 11px; color: #a9a9a9; line-height: 15px; height: 15px; width: 15px; } .malls .indexes .li:active { background: #d6ab7e; color: white; border-radius: 50%; }