.container { display: flex; flex-direction: column; width: 100%; align-content: center; .banner { height: 210px; width: 100%; .swiper-item, image { width: 100%; } } &__top { display: flex; flex-direction: column; align-content: center; width: 100%; padding: 10px 0px; &__row { display: flex; flex-direction: row; align-items: center; align-content: center; justify-content: space-between; padding: 2.5px 10px; text { font-size: 14px; color: #333; text-align: left; width: 100%; } .qty { text-align: center; } } .price, :first-child { text { font-size: 16px; font-weight: bold; } } .container__top__row__step { display: flex; flex-direction: row; justify-content: start; align-items: center; align-content: center; white-space: nowrap; margin: 0px 10px; width: 96%; &__item { display: inline-flex; flex-direction: column; align-items: center; align-content: center; padding-top: 5px; .value { font-size: 13px; padding: 5px 5px; text-align: center; } } } } &__diamondinfo { display: flex; flex-direction: column; align-content: center; margin-top: 10px; text { padding: 10px 15px; font-size: 14px; text-align: left; width: 100%; border-bottom: 1px solid #f0f0f0; } :first-child { padding: 10px 5px; font-size: 20px; font-weight: bold; } } .button-view { border-radius: 10px; width: 100%; padding: 15px 0px; display: flex; flex-direction: row; align-content: center; align-items: center; justify-content: space-between; van-button { width: 95%; padding-left: 2.5%; } } } .popup-view { display: flex; flex-direction: column; align-items: center; align-content: center; .title { font-size: 18px; font-weight: bold; color: #333; text-align: center; padding: 15px 0px; } .message { font-size: 13px; color: #333; text-align: center; padding-bottom: 15px; } van-field { width: 80%; } .button-view { display: flex; flex-direction: row; justify-content: space-between; align-items: center; align-content: center; padding-top: 15px; width: 80%; van-button { width: 45%; } } }