@item_width: 70px; @item_margin: 6px; @item_border_width: 1px; .options { p { font-size: 14px; font-weight: 400; color: rgba(97, 106, 121, 1); margin-bottom: 20px; } .infoItem { padding-right: 0; .priceItem { background: rgba(243, 243, 243, 0.14); border-radius: 4px; border: @item_border_width solid rgba(207, 207, 207, 1); font-size: 14px; font-weight: 600; color: rgba(97, 106, 121, 1); display: inline-block; text-align: center; vertical-align: top; height: 30px; width: @item_width; line-height: 30px; cursor: pointer; margin: @item_margin; &.active { background: rgba(255, 50, 102, 0.1); border-radius: 4px; border: @item_border_width solid rgba(255, 50, 102, 1); color: rgba(97, 106, 121, 1); } } .priceInput { display: inline-block; min-width: 70px; width: auto; margin: @item_margin; text-align: center; } button { border-top-left-radius: 0; border-bottom-left-radius: 0; height: 30px; width: 50px; vertical-align: top; padding: 0 5px; } .rate { margin-left: 10px; i { margin-right: 5px; color: #1790ff; } } } &.multi { p { font-size: 14px; font-weight: 400; color: rgba(97, 106, 121, 1); } .infoItem { padding-right: 0; display: flex; flex-direction: column; justify-content: center; .priceBtn { display: flex; justify-content: space-between; } .priceItem { display: inline-block; background-color: #fff; border-radius: 4px; border: @item_border_width solid rgba(207, 207, 207, 1); &.active { background-color: #fff; color: #ff3266ff; border: @item_border_width solid rgba(255, 50, 102, 1); } } .priceInput { width: @item_width*3+ @item_margin*2; width: auto; } } } }