@item_width: 70px; @item_margin: 6px; .options{ border-bottom: 1px dashed #00000017; 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:1px 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:1px 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; } } } &.small { @item_width: 72px; @item_margin: 19px; padding: 0 0 12px 0; // padding: 12px 20px; border-bottom: none; p { margin-bottom: 8px; } .infoItem { text-align: center; .priceItem { border-radius:6px; height: 32px; width: @item_width; margin: 0 0 (@item_margin - 7px) @item_margin; } .priceItem:first-child{ margin: 0 0 (@item_margin - 7px) 0px; } .priceInput { display: block; width: @item_width*3+@item_margin*2; border-radius: 6px; height: 32px; } } } } .options { &.multi { padding: 20px 20px; 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; width:74px; height:36px; line-height: 36px; border-radius:4px; border:1px solid rgba(207,207,207,1); &.active { background-color: #fff; color: #FF3266FF; border-radius:4px; border:1px solid rgba(255,50,102,1); } } .priceInput { border-radius:6px; height: 36px; width: auto; } } } }