.container { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; align-content: center; flex-wrap: nowrap; height: 100vh; } .header, .data, .order-other { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; height: 70px; background-color: #fff; border-bottom: 6px solid #eee; padding-left: 20px; } .header .address { font-size: 20px; color: #333; } .header .detail { font-size: 16px; margin-top: 5px; color: rgb(151, 151, 151); } .with-line { padding-top: 10px; padding-bottom: 10px; border-bottom: 2px solid #eee; } .content { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; width: calc(100% - 40px); } .shop-name { font-size: 16px; color: #333; } .item { display: flex; justify-content: space-between; align-content: space-between; width: 100%; } .item .item-detail { display: flex; flex-direction: row; justify-content: center; align-content: center; } .color-grey { color: rgb(151, 151, 151); } .color-red { color: rgba(255, 0, 0, 0.575); } .item .item-detail .pic { width: 80px; height: 48px; margin-right: 10px; } .item .item-detail .bug-detail { display: flex; flex-direction: column; justify-content: space-between; align-content: center; align-items: flex-start; } .item .item-detail .bug-detail .num, .item-price .price-old { font-size: 14px; } .item .item-price { display: flex; flex-direction: column; justify-content: flex-start; align-content: center; align-items: flex-end; } .package, .pay, .data-detail { display: flex; justify-content: space-between; align-content: space-between; } .content { padding-bottom: 40px; } .data { border-top: 6px solid #eee; height: unset; width: calc(100% - 40px); padding: 10px 20px; } .order-other { height: unset; width: calc(100% - 40px); padding: 10px 20px; } .order-other .other-detail { display: flex; justify-content: flex-start; align-content: space-between; margin: 10px 0; }