.status_bar { position: sticky; top: 0px; z-index: 98; height: var(--status-bar-height); width: 100%; background-color: #f8f8f8; .top_view { height: var(--status-bar-height); width: 100%; position: fixed; background-color: #f8f8f8; top: 0; z-index: 98; } } .navBarWrapper { position: sticky; top: var(--status-bar-height); /* #ifdef H5 */ top: 0; /* #endif */ z-index: 98; background-color: #fff; .navBar { display: flex; justify-content: space-between; align-items: center; padding-left: 28px; padding-right: 16px; height: 44px; border: 1px solid rgba(236, 236, 236, 1); border-left-width: 0px; border-right-width: 0px; } } .leftDrawer { top: calc(46px + var(--status-bar-height)); .submenu { height: 48px; padding: 0 48px; border-bottom: 1px solid #ebeef5; display: flex; align-items: center; column-gap: 10px; } .scrollView { height: 100%; ::v-deep .uni-scroll-view-content { height: unset; padding-bottom: 24px; } } .menuItem { min-height: 50px; margin: 0px 28px 0px 16px; padding: 0px 10px; display: flex; align-items: center; column-gap: 10px; &.active { color: #fff; background-color: #29bbe4; } .menuIcon { width: 18px; height: 18px; } &.userName { height: 65px; border-bottom: 1px solid #ECECEC; margin: 0 0 26px 0; padding: 0px 38px 0px 26px; } &.balance { height: 65px; font-size: 12px; font-weight: 600; .value { font-size: 24px; font-weight: 700; } } } } .rightDrawer { top: calc(46px + var(--status-bar-height)); .rightContent { padding: 0 20px; .noticeItem { display: flex; flex-direction: column; row-gap: 10px; padding: 20px 0 14px; border-bottom: 1px solid rgba(236, 236, 236, 1); &:last-child { border-bottom: none; } .noticeSubject { color: rgba(51, 51, 51, 1); font-size: 16px; font-weight: 700; } .noticeSummary { color: rgba(102, 102, 102, 1); font-size: 14px; line-height: 20px; } } } } .popup-content { display: flex; align-items: center; justify-content: center; padding: 15px; height: 50px; background-color: #fff; } .popup-height { height: 100%; flex: 1; width: 200px; } .detailModal { position: relative; width: calc(100vw - 50px); width: 726upx; background-color: #fff; box-sizing: border-box; .detailContent { padding: 32px 30upx 24px; &::-webkit-scrollbar { display: none; } } .closeIcon { position: absolute; z-index: 10; top: 18px; right: 21px; width: 17px; height: 17px; } .titleWrapper { display: flex; flex-direction: column; align-items: center; row-gap: 12px; color: #333333; padding: 12px; margin: 24px 0; box-shadow: -1px 0 5px 1px rgba(0, 0, 0, 0.1); .title { margin: 0; font-size: 24px; font-weight: 700; line-height: 34px; } .value { font-size: 36px; font-weight: 700; color: #29bbe4; line-height: 52px; } } .btnsWrapper { display: flex; align-items: center; column-gap: 10px; .delBtn { background-color: #f56c6c; } } } .selectorWrapper { position: relative; // display: flex; // justify-content: space-between; // align-items: center; .selector { display: flex; align-items: center; column-gap: 10px; margin: 0px 10px 0px 16px; padding: 0px 10px; .selectorLabel { display: flex; justify-content: space-between; align-items: center; height: 50px; width: 100%; } } .optionsWrapper { flex-shrink: 0; height: 0px; opacity: 0; overflow: hidden; transition: all 0.3s ease-out; &.visible { display: flex; flex-direction: column; height: 100%; opacity: 1; padding-left: 16px; } .option { display: flex; align-items: center; min-width: 100px; padding: 8px 20px 8px 40px; box-sizing: border-box; background: #F7F8FA; text-align: center; white-space: nowrap; &.active { color: #fff; background-color: #29bbe4; } } } .menuRight{ position: absolute; right: 20px; top: 15px; .menuIcon { width: 12px; height: 12px; } } }