.main { //padding: 0.08rem 0.12rem; //height: calc(calc(100dvh - $-header-height) - $-footer-height); //overflow-y: scroll; } .providerBox { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .providerItem { aspect-ratio: 1/1; display: flex; align-items: center; background-color: #2b363f; justify-content: center; padding: 0.1rem 0; border-radius: 0.06rem; cursor: pointer; img { height: 50%; } } .sideTitle { display: flex; align-items: center; // padding: 0.06rem 0; .icon { margin-right: 0.06rem; color: #11dd68; } span { font-size: 0.15rem; // font-weight: 700; line-height: 1; position: relative; top: 0.01rem; } } .qianbao { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; .qianbaoItem { cursor: pointer; display: flex; align-items: center; justify-content: flex-start; background-color: #2b363f; padding: 0.1rem 0 0.1rem 0.1rem; width: 100%; border-radius: 0.06rem; min-height: 0.54rem; color: #fff; img { width: 0.26rem; } } } .promotionBox { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; .promotionItem { width: 100%; cursor: pointer; border-radius: 0.1rem; overflow: hidden; img { width: 100%; } } } .signalItem { display: flex; align-items: center; margin: 0.15rem 0 0 0; cursor: pointer; img { width: 0.26rem; margin-right: 0.1rem; } } .footer { button { width: 47%; height: 0.4rem; border-radius: 0.2rem; &:nth-child(1) { background: #11dd68; } &:nth-child(2) { background: #ebc71f; } } }