.cl-topbar { display: flex; align-items: center; height: $cl-topbar-height; width: 100%; position: relative; box-sizing: border-box; &__content { width: 100%; } &__text { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text { width: 500rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } &__title { font-size: 14px; &:last-child { font-size: 16px; } } &__description { font-size: 12px; color: #999; line-height: 1; } &__prepend, &__append { display: flex; align-items: center; height: $cl-topbar-height; position: absolute; /* #ifdef MP */ & > view { display: flex; } /* #endif */ } &__prepend { left: 0; } &__append { right: 0; } &__icon { display: flex; align-items: center; justify-content: center; height: 100%; width: 80rpx; font-size: 22px; &:active { opacity: 0.8; } } &.is-fixed { position: fixed; top: 0; left: 0; width: 100%; } &.is-border { border-bottom: $cl-border-width solid #f6f7fa; } &.is-ios { .cl-topbar__title { font-weight: bold; } } &.with-mp { /* #ifdef MP */ padding-right: 180rpx; /* #endif */ } }