page { display: flex; flex-flow: column nowrap; height: 100%; } .deliveryDetail { display: flex; flex-flow: column nowrap; height: 100%; .content { padding-top: 24px; flex: 1 1 auto; overflow: scroll; .detailTop { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; font-size: 28px; } .topBar__orderType { color: #6e6e6e; font-size: 28px; font-weight: 550; } } .bottomBar { flex: none; margin: 0 24px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; padding-top: 24px; padding-bottom: calc(20px + constant(safe-area-inset-bottom)); padding-bottom: calc(20px + env(safe-area-inset-bottom)); } } .detailInfo { .detailInfoItem { &--title { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; font-size: 28px; font-weight: bold; color: #424242; padding: 10px 0; } &--detail { &--row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 28px; color: #6e6e6e; } &--name { } &--count { } &--weight { } } } } .orderInfoTop { font-size: 28px; color: $color_font_one; font-weight: 550; } .orderNo { font-size: 28px; color: #424242; font-weight: 550; } .status { font-size: 28px; &--takingGoods { font-weight: bold; color: $color_main; } &--finished { font-weight: bold; color: $color_font_three; } } .divider { margin: 20px 0 10px 0; } .total { margin-top: 24px; padding: 15px 24px; font-size: 24px; line-height: 30px; font-weight: 600; color: #f79b31; background: #fef9f4; border-radius: 8px; display: flex; .totalContent { flex: 1 1 auto; display: inline-block; text-align: right; } }